Add Incorporation details on Motion page

src/i18n/en-motions.ts

@@ -24,6 +24,7 @@ const motionsMessageDescriptors = {
           other {pts}
         } reputation reward}
       ${ColonyMotions.UnlockTokenMotion} {Unlock native token {tokenSymbol}}
+      ${ColonyMotions.DAOIncorporationMotion} {Incorporate this DAO}
       other {Generic motion we don't have information about}
     }`,
   [`motion.${ColonyMotions.SetUserRolesMotion}.assign`]: `Assign the {roles} in {fromDomainName} to {recipient}`,
@@ -41,6 +42,7 @@ const motionsMessageDescriptors = {
       ${ColonyMotions.EmitDomainReputationPenaltyMotion} {Smite}
       ${ColonyMotions.EmitDomainReputationRewardMotion} {Award}
       ${ColonyMotions.UnlockTokenMotion} {Unlock Token}
+      ${ColonyMotions.DAOIncorporationMotion} {DAO Incorporation}
       other {Generic}
     }`,
 };

src/img/icons.json

@@ -73,6 +73,7 @@
     "envelope",
     "file",
     "filled-circle-person",
+    "flag",
     "forbidden-signal",
     "four-square",
     "graph-line",

src/modules/dashboard/components/ActionsPage/ActionsComponents/DefaultMotion.tsx

@@ -49,6 +49,7 @@ import {
   useColonyHistoricRolesQuery,
   useNetworkContracts,
 } from '~data/index';
+import { useTitle } from '~utils/hooks/useTitle';
 
 import DetailsWidget from '../DetailsWidget';
 import StakingWidgetFlow from '../StakingWidget';
@@ -61,9 +62,9 @@ import FinalizeMotionAndClaimWidget, {
 import VoteResults from '../FinalizeMotionAndClaimWidget/VoteResults';
 import CountDownTimer from '../CountDownTimer';
 
-import styles from './DefaultAction.css';
 import motionSpecificStyles from './DefaultMotion.css';
-import { useTitle } from '~utils/hooks/useTitle';
+import { cost, source, incorporationName } from './constants';
+import styles from './DefaultAction.css';
 
 const MSG = defineMessages({
   or: {
@@ -350,6 +351,12 @@ const DefaultMotion = ({
     reputationChange: formattedReputationChange,
     reputationChangeNumeral: <Numeral value={formattedReputationChange} />,
     isSmiteAction: new Decimal(reputationChange).isNegative(),
+    // Cost, source and incorporationName are mocks. Add backend data here when ready.
+    cost: <Numeral value={cost} />,
+    source: domains.find(
+      ({ ethDomainId }) => ethDomainId === source,
+    ) as OneDomain,
+    incorporationName,
   };
 
   const actionAndEventValuesForDocumentTitle = {

src/modules/dashboard/components/ActionsPage/ActionsComponents/constants.ts

@@ -0,0 +1,83 @@
+// Mock data. Replace with backend data (DAO Incorporation Motion details) when ready.
+export const cost = 5300;
+export const source = 1;
+export const incorporationName = 'WallStreetBets';
+
+export const mockColonyActionData = {
+  colonyAction: {
+    actionInitiator: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+    actionType: 'DAOIncorporationMotion',
+    amount: '5300',
+    annotationHash: null,
+    blockNumber: 922,
+    colonyAvatarHash: '#123',
+    colonyDisplayName: 'test',
+    colonyTokens: [],
+    createdAt: 1678185528000,
+    domainColor: '',
+    domainName: '1',
+    domainPurpose: '',
+    events: [
+      {
+        createdAt: 1678185528000,
+        emmitedBy: 'VotingReputationClient',
+        name: 'MotionCreated',
+        transactionHash:
+          '0xe459e77c2b10e8b391c71fe0c3a788e176301221d5b201dcdfa582d7754a80ac',
+        type: 'NetworkEvent',
+        values: '',
+      },
+    ],
+    fromDomain: 1,
+    hash: '0xe459e77c2b10e8b391c71fe0c3a788e176301221d5b201dcdfa582d7754a80ac',
+    motionDomain: 1,
+    motionState: 'Staking',
+    newVersion: '0',
+    oldVersion: '0',
+    recipient: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+    reputationChange: '0',
+    roles: [],
+    rootHash:
+      '0x113f47cccf1266a78e892a719efb64e82892999ed9a6c042af53e63827f6d42c',
+    status: 1,
+    toDomain: 1,
+    tokenAddress: '0x3Fe98e1e643c3f78aCF72B7FC4A68B5A737CD274',
+    cost: 5300,
+    source: 1,
+    incorporationName: 'WallStreetBets',
+  },
+};
+
+export const initiatorProfileWithFallbackMock = {
+  id: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+  profile: {
+    avatarHash: null,
+    bio: null,
+    displayName: null,
+    location: null,
+    username: 'john doe',
+    walletAddress: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+    website: null,
+  },
+};
+
+export const recipientProfileWithFallbackMock = {
+  id: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+  profile: {
+    avatarHash: null,
+    bio: null,
+    displayName: null,
+    location: null,
+    username: 'john doe',
+    walletAddress: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
+    website: null,
+  },
+};
+
+export const tokenDataMock = {
+  address: '0x3Fe98e1e643c3f78aCF72B7FC4A68B5A737CD274',
+  decimals: 18,
+  iconHash: null,
+  name: 'xDai',
+  symbol: 'XDAI',
+};

src/modules/dashboard/components/ActionsPage/ActionsPage.tsx

@@ -28,6 +28,12 @@ import { STATUS_MAP } from './staticMaps';
 
 import NakedMoleImage from '../../../../img/naked-mole.svg';
 import styles from './ActionsPage.css';
+import {
+  initiatorProfileWithFallbackMock,
+  mockColonyActionData,
+  recipientProfileWithFallbackMock,
+  tokenDataMock,
+} from './ActionsComponents/constants';
 
 const MSG = defineMessages({
   loading: {
@@ -161,6 +167,21 @@ const ActionsPage = () => {
     colonyActionData?.colonyAction?.actionInitiator || '',
   );
 
+  // It's temporary condition for displaying DAOIncorporation motion.
+  // Remove this condition when DAOIncorporation motion data are fetched from the backend.
+  if (transactionHash === 'DAOIncorporation' && colonyData) {
+    return (
+      <DefaultMotion
+        colony={colonyData?.processedColony}
+        token={tokenDataMock}
+        colonyAction={mockColonyActionData.colonyAction}
+        transactionHash={transactionHash as string}
+        recipient={recipientProfileWithFallbackMock}
+        initiator={initiatorProfileWithFallbackMock}
+      />
+    );
+  }
+
   if (!isTransactionFormat(transactionHash) || colonyActionError) {
     return (
       <div className={styles.main}>

src/modules/dashboard/components/ActionsPage/DetailsWidget/DetailsWidget.tsx

@@ -11,6 +11,8 @@ import { AnyUser, Colony } from '~data/index';
 import { ColonyActions, ColonyMotions } from '~types/index';
 import { splitTransactionHash } from '~utils/strings';
 import { getDetailsForAction } from '~utils/colonyActions';
+import LinkedIncorporation from '~dashboard/Incorporation/LinkedIncorporation';
+
 import { EventValues } from '../../ActionsPageFeed/ActionsPageFeed';
 import { ACTION_TYPES_ICONS_MAP } from '../../ActionsPage/staticMaps';
 
@@ -73,6 +75,14 @@ const MSG = defineMessages({
       false {reward}
     }`,
   },
+  source: {
+    id: 'dashboard.ActionsPage.DetailsWidget.source',
+    defaultMessage: 'Source',
+  },
+  cost: {
+    id: 'dashboard.ActionsPage.DetailsWidget.cost',
+    defaultMessage: 'Cost',
+  },
 });
 
 interface Props {
@@ -109,6 +119,7 @@ const DetailsWidget = ({
    */
   const Amount = () => values?.amount as ReactElement;
   const Symbol = () => values?.tokenSymbol as ReactElement;
+  const Cost = () => values?.cost as ReactElement;
 
   const detailsForAction = getDetailsForAction(actionType);
 
@@ -143,16 +154,17 @@ const DetailsWidget = ({
           </div>
         </div>
       </div>
-      {values?.motionDomain && (
-        <div className={styles.item}>
-          <div className={styles.label}>
-            <FormattedMessage {...MSG.motionDomain} />
-          </div>
-          <div className={styles.value}>
-            <DetailsWidgetTeam domain={values.motionDomain} />
+      {values?.motionDomain &&
+        actionType !== ColonyMotions.DAOIncorporationMotion && (
+          <div className={styles.item}>
+            <div className={styles.label}>
+              <FormattedMessage {...MSG.motionDomain} />
+            </div>
+            <div className={styles.value}>
+              <DetailsWidgetTeam domain={values.motionDomain} />
+            </div>
           </div>
-        </div>
-      )}
+        )}
       {detailsForAction.FromDomain && values?.fromDomain && (
         <div className={styles.item}>
           <div className={styles.label}>
@@ -259,6 +271,33 @@ const DetailsWidget = ({
           <div className={styles.value}>{values.colonyName}</div>
         </div>
       )}
+      {detailsForAction.Source && values?.source && (
+        <div className={styles.item}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.source} />
+          </div>
+          <DetailsWidgetTeam domain={values.source} />
+        </div>
+      )}
+      {values?.cost && detailsForAction.Cost && (
+        <div className={styles.item}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.cost} />
+          </div>
+          <div className={styles.tokenContainer}>
+            {values?.token && (
+              <TokenIcon
+                token={values.token}
+                name={values.token.name || undefined}
+                size="xxs"
+              />
+            )}
+            <div className={styles.value}>
+              <Cost /> <Symbol />
+            </div>
+          </div>
+        </div>
+      )}
       {!!shortenedHash && (
         <div className={styles.item}>
           <div className={styles.label}>
@@ -274,6 +313,12 @@ const DetailsWidget = ({
           </div>
         </div>
       )}
+      {detailsForAction.LinkedIncorporation && values?.incorporationName && (
+        <LinkedIncorporation
+          link={`/colony/${colony.displayName}/incorporation/create`} // Replace with correct redirection. This is a mock.
+          name={values.incorporationName}
+        />
+      )}
     </div>
   );
 };

src/modules/dashboard/components/ActionsPage/staticMaps.ts

@@ -17,6 +17,9 @@ export enum ActionPageDetails {
   Name = 'Name',
   Permissions = 'Permissions',
   ReputationChange = 'ReputationChange',
+  Source = 'Source',
+  Cost = 'Cost',
+  LinkedIncorporation = 'LinkedIncorporation',
 }
 
 type EventRolesMap = Partial<
@@ -97,6 +100,7 @@ export const ACTION_TYPES_ICONS_MAP: {
   [ColonyMotions.EmitDomainReputationPenaltyMotion]: 'emoji-firebolt',
   [ColonyMotions.EmitDomainReputationRewardMotion]: 'emoji-shooting-star',
   [ColonyMotions.UnlockTokenMotion]: 'emoji-padlock',
+  [ColonyMotions.DAOIncorporationMotion]: 'flag',
   [ColonyActions.Generic]: 'circle-check-primary',
 };
 
@@ -279,4 +283,9 @@ export const DETAILS_FOR_ACTION: ActionsDetailsMap = {
     ActionPageDetails.ReputationChange,
   ],
   [ColonyMotions.UnlockTokenMotion]: [],
+  [ColonyMotions.DAOIncorporationMotion]: [
+    ActionPageDetails.Source,
+    ActionPageDetails.Cost,
+    ActionPageDetails.LinkedIncorporation,
+  ],
 };

src/modules/dashboard/components/ActionsPageFeed/ActionsPageFeed.tsx

@@ -71,6 +71,9 @@ export interface EventValues {
   isSmiteAction?: boolean;
   changes?: ReactElement[];
   funds?: ReactElement[];
+  source?: OneDomain;
+  cost?: string | ReactElement;
+  incorporationName?: string;
 }
 
 export type FeedItemWithId<T> = T & { uniqueId: string };

src/modules/dashboard/components/Incorporation/LinkedIncorporation/LinkedIncorporation.css

@@ -0,0 +1,49 @@
+@value passedColor: var(--primary);
+@value failedColor: var(--pink);
+
+.wrapper {
+  margin: 60px 0;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  line-height: 18px;
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid color-mod(var(--temp-grey-blue-7) alpha(15%));
+}
+
+.statusWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.line {
+  width: 7px;
+  border-top: 1px solid var(--dark);
+}
+
+.dot {
+  margin: 0 2px;
+  height: 7px;
+  width: 7px;
+  min-width: 7px;
+  border: 1px solid var(--dark);
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.title {
+  margin-left: 8px;
+  font-size: var(--size-smallish);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.link:hover {
+  color: var(--action-secondary);
+}