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; +}