Add view for unverified protector

src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx

@@ -54,6 +54,10 @@ export const MSG = defineMessages({
     id: 'dashboard.Incorporation.IncorporationForm.descriptionLabel',
     defaultMessage: 'Describe the purpose of the DAO',
   },
+  currencyAndPeriod: {
+    id: 'dashboard.Incorporation.IncorporationForm.currencyAndPeriod',
+    defaultMessage: '{currency} / year',
+  },
 });
 
 const displayName = 'dashboard.Incorporation.IncorporationForm';
@@ -96,13 +100,16 @@ const IncorporationForm = ({ colony, sidebarRef }: Props) => {
             <FormattedMessage {...MSG.ongoingCost} />
           </div>
           <div className={styles.cost}>
+            <Icon name="usd-coin" appearance={{ size: 'medium' }} />
+            <Numeral
+              value={cost.reneval.amount || 0}
+              unit={getTokenDecimalsWithFallback(
+                cost.reneval.token && cost.reneval.token.decimals,
+              )}
+            />
             <FormattedMessage
-              {...MSG.cost}
-              values={{
-                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
-                amount: '3,800 / year',
-                currency: 'USDC',
-              }}
+              {...MSG.currencyAndPeriod}
+              values={{ currency: cost.reneval.token.symbol }}
             />
           </div>
         </div>

src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields';
 import Icon from '~core/Icon';
 import { Stages } from '~pages/IncorporationPage/constants';
-import { ValuesType } from '~pages/IncorporationPage/types';
+import { ValuesType, VerificationStatus } from '~pages/IncorporationPage/types';
 import { multiLineTextEllipsis } from '~utils/strings';
 
 import LockedProtectors from '../LockedProtectors';
@@ -47,9 +47,14 @@ const displayName = `dashboard.Incorporation.IncorporationForm.LockedIncorporati
 export interface Props {
   formValues: ValuesType;
   activeStageId: Stages;
+  verificationStatuses: VerificationStatus[] | undefined;
 }
 
-const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
+const LockedIncorporationForm = ({
+  formValues,
+  activeStageId,
+  verificationStatuses,
+}: Props) => {
   const { alternativeName1: altName1, alternativeName2: altName2 } = formValues;
   const alternativeNames = useMemo(
     () => [
@@ -136,7 +141,10 @@ const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
           <div className={styles.description}>{formValues.purpose}</div>
         </div>
       </FormSection>
-      <LockedProtectors formValues={formValues} />
+      <LockedProtectors
+        formValues={formValues}
+        verificationStatuses={verificationStatuses}
+      />
     </div>
   );
 };

src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx

@@ -3,13 +3,16 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { FormSection, InputLabel } from '~core/Fields';
 import QuestionMarkTooltip from '~core/QuestionMarkTooltip';
-import { ValuesType } from '~pages/IncorporationPage/types';
+import { ValuesType, VerificationStatus } from '~pages/IncorporationPage/types';
 import UserAvatar from '~core/UserAvatar';
 import UserMention from '~core/UserMention';
 import Tag from '~core/Tag';
 import Link from '~core/Link';
 
-import { SignOption, VerificationStatus } from '../constants';
+import {
+  SignOption,
+  VerificationStatus as VerificationType,
+} from '../constants';
 
 import styles from './LockedProtectors.css';
 
@@ -60,9 +63,10 @@ const displayName = `dashboard.Incorporation.IncorporationForm.LockedProtectors`
 
 export interface Props {
   formValues: ValuesType;
+  verificationStatuses: VerificationStatus[] | undefined;
 }
 
-const LockedProtectors = ({ formValues }: Props) => {
+const LockedProtectors = ({ formValues, verificationStatuses }: Props) => {
   const signLabel = useMemo(() => {
     return formValues.signOption === SignOption.Individual
       ? MSG.individual
@@ -93,18 +97,23 @@ const LockedProtectors = ({ formValues }: Props) => {
           const { profile } = user || {};
           const { walletAddress, username, displayName: userDispalyName } =
             profile || {};
+          const verificationStatus = verificationStatuses?.find(
+            (item) =>
+              item.walletAddress === protector.user?.profile?.walletAddress,
+          )?.verified;
 
           return (
             <div className={styles.row}>
               <Tag
                 appearance={{
                   colorSchema: 'fullColor',
-                  theme: protector.verified ? 'primary' : 'danger',
+                  theme:
+                    verificationStatus === VerificationType.Unverified
+                      ? 'danger'
+                      : 'primary',
                 }}
               >
-                {protector.verified
-                  ? VerificationStatus.Verified
-                  : VerificationStatus.Unverified}
+                {verificationStatus}
               </Tag>
               <div className={styles.userAvatarContainer}>
                 <UserAvatar

src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx

@@ -69,7 +69,7 @@ export interface Props {
 
 const Protectors = ({ colony, sidebarRef }: Props) => {
   const [, { value: protectors }] = useField<Protector[]>('protectors');
-  const [, { value: signOption }] = useField('signOption');
+  const [, { value: signOption }] = useField<SignOption>('signOption');
   const [, { value: mainContact }, { setValue: setMainContact }] = useField(
     'mainContact',
   );

src/modules/dashboard/components/Incorporation/IncorporationForm/constants.ts

@@ -6,6 +6,7 @@ export enum SignOption {
 export enum VerificationStatus {
   Verified = 'Verified',
   Unverified = 'Unverified',
+  Submitted = 'Submitted',
 }
 // this is a mock data
 export const cost = {

src/modules/dashboard/components/Incorporation/VerificationBanner/VerificationBanner.tsx

@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 
 import Button from '~core/Button';
 import UserMention from '~core/UserMention';
-import { AnyUser } from '~data/index';
+import { LoggedInUser } from '~data/index';
 import { useDialog } from '~core/Dialog';
 import RemoveNominationDialog from '~dashboard/Dialogs/RemoveNominationDialog';
 
@@ -31,7 +31,10 @@ const MSG = defineMessages({
 const displayName = 'dashboard.Incorporation.VerificationBanner';
 
 export interface Props {
-  user: AnyUser;
+  user: Pick<
+    LoggedInUser,
+    'walletAddress' | 'balance' | 'username' | 'ethereal' | 'networkId'
+  >;
 }
 
 const VerificationBanner = ({ user }: Props) => {
@@ -54,13 +57,7 @@ const VerificationBanner = ({ user }: Props) => {
           <FormattedMessage
             {...MSG.title}
             values={{
-              user: (
-                <UserMention
-                  username={
-                    user.profile.username || user.profile.displayName || ''
-                  }
-                />
-              ),
+              user: <UserMention username={user.username || ''} />,
             }}
           />
         </div>

src/modules/pages/components/IncorporationPage/IncorporationPage.css

@@ -36,6 +36,7 @@
 }
 
 .mainContainer {
+  padding: 76px 100px 70px 25px;
   padding-bottom: 50px;
   height: 600px;
   min-height: 100%;

src/modules/pages/components/IncorporationPage/IncorporationPage.tsx

@@ -12,14 +12,14 @@ import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/
 import VerificationBanner from '~dashboard/Incorporation/VerificationBanner';
 import IncorporationPaymentDialog from '~dashboard/Dialogs/IncorporationPaymentDialog';
 import { useDialog } from '~core/Dialog';
+import { useLoggedInUser } from '~data/helpers';
+import { VerificationStatus } from '~dashboard/Incorporation/IncorporationForm/constants';
 
 import {
   initialValues,
   stages,
   validationSchema,
   Stages as StagesEnum,
-  formValuesMock,
-  userMock,
 } from './constants';
 import { ValuesType } from './types';
 import styles from './IncorporationPage.css';
@@ -36,13 +36,43 @@ const IncorporationPage = () => {
   const { data: colonyData, loading } = useColonyFromNameQuery({
     variables: { name: colonyName, address: '' },
   });
-  const [isFormEditable, setFormEditable] = useState(false);
-  const [formValues, setFormValues] = useState<ValuesType>(formValuesMock);
+  const [isFormEditable, setFormEditable] = useState(true);
+  const [formValues, setFormValues] = useState<ValuesType>();
   const [shouldValidate, setShouldValidate] = useState(false);
   const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment);
   const sidebarRef = useRef<HTMLElement>(null);
 
-  const notVerified = true; // temporary valule
+  const user = useLoggedInUser();
+
+  const isNominated = useMemo(
+    () =>
+      user.walletAddress &&
+      formValues?.protectors?.find(
+        (protector) =>
+          user.walletAddress === protector?.user?.profile?.walletAddress,
+      ),
+    [formValues, user],
+  );
+
+  // mock data, add here fetching verification status from backend
+  const verificationStatuses = useMemo(
+    () =>
+      formValues?.protectors?.map((protector) => {
+        return {
+          id: protector.user?.id,
+          walletAddress: protector.user?.profile?.walletAddress,
+          verified: VerificationStatus.Unverified,
+        };
+      }),
+    [formValues],
+  );
+
+  const isVerified = useMemo(() => {
+    const verificationStatus = verificationStatuses?.find(
+      (protector) => protector.walletAddress === user.walletAddress,
+    );
+    return verificationStatus?.verified;
+  }, [user.walletAddress, verificationStatuses]);
 
   const openPayDialog = useDialog(IncorporationPaymentDialog);
 
@@ -153,17 +183,19 @@ const IncorporationPage = () => {
             <LockedIncorporationForm
               formValues={formValues}
               activeStageId={activeStageId}
+              verificationStatuses={verificationStatuses}
             />
           )
         )}
       </aside>
       <div
         className={classNames(styles.mainContainer, {
-          [styles.smallerPadding]: notVerified,
+          [styles.smallerPadding]: isNominated && !isVerified,
         })}
       >
-        {/* user passed to VerifiactionBanner is a mock */}
-        {notVerified && <VerificationBanner user={userMock} />}
+        {isNominated && isVerified === VerificationStatus.Unverified && (
+          <VerificationBanner user={user} />
+        )}
         <main className={styles.mainContent}>
           <div />
           {colonyData && (

src/modules/pages/components/IncorporationPage/constants.ts

@@ -4,7 +4,7 @@ import * as yup from 'yup';
 
 import { SignOption } from '~dashboard/Incorporation/IncorporationForm/constants';
 
-import { StageObject, ValuesType } from './types';
+import { StageObject } from './types';
 
 const MSG = defineMessages({
   create: {
@@ -164,51 +164,3 @@ export const stages: StageObject[] = [
   },
   { id: Stages.Complete, title: MSG.complete, description: MSG.completeDesc },
 ];
-
-export const formValuesMock: ValuesType = {
-  alternativeName1: 'WallStreetBets Foundation',
-  alternativeName2: 'WallStreet Corp',
-  mainContact: {
-    id: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-    profile: {
-      avatarHash: null,
-      displayName: null,
-      username: 'Storm',
-      walletAddress: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-    },
-  },
-  name: 'WallStreetBets',
-  protectors: [
-    {
-      user: {
-        id: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-        profile: {
-          avatarHash: null,
-          displayName: null,
-          username: 'Storm',
-          walletAddress: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-        },
-      },
-      key: nanoid(),
-    },
-    {
-      user: {
-        id: 'filterValue',
-        profile: { displayName: 'Ragnar', walletAddress: 'Ragnar' },
-      },
-      key: nanoid(),
-    },
-  ],
-  purpose: `WallStreetBets is on a mission to deploy decentralized satellites in our skies.`,
-  signOption: SignOption.Individual,
-};
-
-export const userMock = {
-  id: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-  profile: {
-    avatarHash: null,
-    displayName: null,
-    username: 'Storm',
-    walletAddress: '0xb77D57F4959eAfA0339424b83FcFaf9c15407461',
-  },
-};

src/modules/pages/components/IncorporationPage/types.ts

@@ -2,7 +2,7 @@ import { MessageDescriptor } from 'react-intl';
 
 import {
   SignOption,
-  VerificationStatus,
+  VerificationStatus as VerificationStatusType,
 } from '~dashboard/Incorporation/IncorporationForm/constants';
 import { AnyUser } from '~data/index';
 
@@ -13,7 +13,6 @@ export interface Protector {
   key: string;
   removed?: boolean;
   created?: boolean;
-  verified?: VerificationStatus;
 }
 export interface ValuesType {
   name: string;
@@ -31,3 +30,9 @@ export interface StageObject {
   description: MessageDescriptor;
   buttonText?: MessageDescriptor;
 }
+
+export interface VerificationStatus {
+  id?: string;
+  walletAddress?: string;
+  verified: VerificationStatusType;
+}