diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx
index a295458713..bad7e2796d 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx
+++ b/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) => {
+
+
,
- amount: '3,800 / year',
- currency: 'USDC',
- }}
+ {...MSG.currencyAndPeriod}
+ values={{ currency: cost.reneval.token.symbol }}
/>
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
index 212d48dc78..cefab8225c 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
+++ b/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) => {
{formValues.purpose}
-
+
);
};
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
index 58cb25f4b9..67857b006d 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
+++ b/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 (
- {protector.verified
- ? VerificationStatus.Verified
- : VerificationStatus.Unverified}
+ {verificationStatus}
{
const [, { value: protectors }] = useField('protectors');
- const [, { value: signOption }] = useField('signOption');
+ const [, { value: signOption }] = useField('signOption');
const [, { value: mainContact }, { setValue: setMainContact }] = useField(
'mainContact',
);
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/Incorporation/IncorporationForm/constants.ts
index 318b5e19ed..f5765597ef 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/constants.ts
+++ b/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 = {
diff --git a/src/modules/dashboard/components/Incorporation/VerificationBanner/VerificationBanner.tsx b/src/modules/dashboard/components/Incorporation/VerificationBanner/VerificationBanner.tsx
index 8550b7fe4d..fc4a91d6de 100644
--- a/src/modules/dashboard/components/Incorporation/VerificationBanner/VerificationBanner.tsx
+++ b/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) => {
- ),
+ user: ,
}}
/>
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css b/src/modules/pages/components/IncorporationPage/IncorporationPage.css
index 7984904f8f..7cbcac48ce 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css
+++ b/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%;
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index e5475565aa..efa2b2693d 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/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
(formValuesMock);
+ const [isFormEditable, setFormEditable] = useState(true);
+ const [formValues, setFormValues] = useState();
const [shouldValidate, setShouldValidate] = useState(false);
const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment);
const sidebarRef = useRef(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 = () => {
)
)}
- {/* user passed to VerifiactionBanner is a mock */}
- {notVerified &&
}
+ {isNominated && isVerified === VerificationStatus.Unverified && (
+
+ )}
{colonyData && (
diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts
index 311d840016..6908270d19 100644
--- a/src/modules/pages/components/IncorporationPage/constants.ts
+++ b/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',
- },
-};
diff --git a/src/modules/pages/components/IncorporationPage/types.ts b/src/modules/pages/components/IncorporationPage/types.ts
index bcbe4a5b88..1cf843baa0 100644
--- a/src/modules/pages/components/IncorporationPage/types.ts
+++ b/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;
+}