feat: APP-163 custodial wallet design implementation (#2470)

Co-authored-by: Ralph <“[email protected]>
regen-network · Sep 17, 2024 · 0502b30 · 0502b30
1 parent c2458cb
commit 0502b30
Show file tree

Hide file tree

Showing 11 changed files with 1,570 additions and 1,585 deletions.
diff --git a/web-marketplace/graphql.schema.json b/web-marketplace/graphql.schema.json
diff --git a/...etplace/src/components/organisms/UserAccountSettings/UserAccountSettings.ConnectField.tsx b/...etplace/src/components/organisms/UserAccountSettings/UserAccountSettings.ConnectField.tsx
@@ -9,7 +9,8 @@ import { Body } from 'web-components/src/components/typography';
 
 import { SocialProviderInfo } from './UserAccountSettings.types';
 
-type Props = SocialProviderInfo & {
+type Props = Omit<SocialProviderInfo, 'name'> & {
+  name?: string;
   connect?: () => void;
   disconnect?: () => void;
   address?: string;
@@ -29,9 +30,11 @@ export const ConnectField = ({
   return (
     <div className="flex flex-row justify-between flex-wrap gap-y-10">
       <div className="flex flex-col gap-5">
-        <Body size="md" color="info.dark-grey">
-          {name}
-        </Body>
+        {name && (
+          <Body size="md" color="info.dark-grey">
+            {name}
+          </Body>
+        )}
         {address ? (
           <AddressWidget address={address} />
         ) : (

diff --git a/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.stories.tsx b/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.stories.tsx
@@ -5,37 +5,76 @@ import { Title } from 'web-components/src/components/typography';
 
 import { UserAccountSettings } from './UserAccountSettings';
 
-const meta: Meta<typeof UserAccountSettings> = {
-  title: 'Marketplace/Organisms/UserAccountSettings',
-  component: UserAccountSettings,
-  args: {
-    email: '[email protected]',
-    socialProviders: [
-      {
-        name: 'Google',
-        connect: action('connect google'),
-      },
-      {
-        name: 'LinkedIn',
-        disconnect: async () => {
-          action('disconnect linkedin')();
-        },
-      },
-    ],
-    walletProvider: {
-      address: 'regenfoobar3792723djghsdg',
+const args = {
+  email: '',
+  socialProviders: [
+    {
+      name: 'Google',
+      connect: action('connect google'),
+    },
+    {
+      name: 'LinkedIn',
       disconnect: async () => {
-        action('disconnect wallet')();
+        action('disconnect linkedin')();
       },
     },
+  ],
+  walletProvider: {
+    address: 'regenfoobar3792723djghsdg',
+    disconnect: async () => {
+      action('disconnect wallet')();
+    },
+  },
+  custodialAddress: 'mock-regen-custodial-address',
+  emailConfirmationData: {
+    isConfirmationModalOpen: false,
+    email: '',
+    emailModalError: '',
+    resendTimeLeft: null,
+    onConfirmationModalClose: action('close confirmation modal'),
+    onMailCodeChange: async (passcode: string) => {
+      action('mail code change')(passcode);
+    },
+    onResendPasscode: async () => {
+      action('resend passcode')();
+      return Promise.resolve();
+    },
+    onEmailSubmit: async ({
+      email,
+      callback,
+    }: {
+      email: string;
+      callback?: () => void;
+    }) => {
+      action('email submit')({ email, callback });
+      return Promise.resolve();
+    },
+    isConnectedEmailErrorModalOpen: false,
+    onConnectedEmailErrorModalClose: action(
+      'close connected email error modal',
+    ),
   },
 };
 
+const meta: Meta<typeof UserAccountSettings> = {
+  title: 'Marketplace/Organisms/UserAccountSettings',
+  component: UserAccountSettings,
+};
+
 export default meta;
 type Story = StoryObj<typeof UserAccountSettings>;
 
 export const Default: Story = {};
 
+Default.args = args;
+
+export const WithEmail: Story = {};
+
+WithEmail.args = {
+  ...args,
+  email: '[email protected]',
+};
+
 export const Width375: Story = {
   name: 'Wrapped in a 375px mobile container',
   render: args => (
@@ -50,6 +89,8 @@ export const Width375: Story = {
   ),
 };
 
+Width375.args = args;
+
 export const Width560: Story = {
   name: 'Wrapped in a 560px container',
   render: args => (
@@ -63,3 +104,5 @@ export const Width560: Story = {
     </div>
   ),
 };
+
+Width560.args = args;
diff --git a/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.tsx b/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.tsx
@@ -7,6 +7,7 @@ import TextField from 'web-components/src/components/inputs/new/TextField/TextFi
 import { EmailConfirmationModal } from 'web-components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal';
 import { Body, Subtitle } from 'web-components/src/components/typography';
 
+import { Link } from 'components/atoms';
 import Form from 'components/molecules/Form/Form';
 import { useZodForm } from 'components/molecules/Form/hook/useZodForm';
 
@@ -16,11 +17,9 @@ import {
 } from '../LoginButton/LoginButton.constants';
 import { getResendCodeButtonLink } from '../LoginButton/utils/getResendCodeButtonLink';
 import { getResendCodeLabel } from '../LoginButton/utils/getResendCodeLabel';
-import { useEmailConfirmationData } from '../LoginFlow/hooks/useEmailConfirmationData';
 import { emailFormSchema } from '../LoginModal/LoginModal.schema';
 import { ConnectedEmailErrorModal } from './UserAccountSettings.ConnectedEmailErrorModal';
 import { ConnectField } from './UserAccountSettings.ConnectField';
-import { EMAIL_ADDED } from './UserAccountSettings.constants';
 import { UserAccountSettingsProps } from './UserAccountSettings.types';
 
 /** UserAccountSettings is a component for displaying and managing a user's
@@ -33,6 +32,8 @@ export const UserAccountSettings = ({
   email: initialEmail,
   socialProviders,
   walletProvider,
+  custodialAddress,
+  emailConfirmationData,
 }: UserAccountSettingsProps) => {
   const { _ } = useLingui();
   const {
@@ -46,7 +47,8 @@ export const UserAccountSettings = ({
     onEmailSubmit,
     isConnectedEmailErrorModalOpen,
     onConnectedEmailErrorModalClose,
-  } = useEmailConfirmationData({ emailConfirmationText: _(EMAIL_ADDED) });
+  } = emailConfirmationData;
+
   const form = useZodForm({
     schema: emailFormSchema,
     defaultValues: {
@@ -152,6 +154,31 @@ export const UserAccountSettings = ({
         {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
         <ConnectField name="Keplr" {...walletProvider} />
       </div>
+      {custodialAddress && (
+        <div className="flex flex-col gap-30">
+          <div className="flex flex-col gap-10">
+            <Subtitle size="lg">
+              <Trans>Regen impact address</Trans>
+            </Subtitle>
+            <Body size="sm" color="info.dark-grey">
+              <Trans>
+                In order to buy and retire ecocredits using credit card payment,
+                we may generate a dedicated hosted wallet address to use as the
+                recipient of the retired blockchain credits. Please do not send
+                funds or tradable credits to this address, as you will not have
+                the ability to initiate transactions from this account.
+                <Link
+                  className="inline ml-5"
+                  href="https://guides.regen.network/guides/regen-marketplace-buyers-guides/ecocredits/buy-ecocredits"
+                >
+                  Learn more»
+                </Link>
+              </Trans>
+            </Body>
+          </div>
+          <ConnectField address={custodialAddress} />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.types.ts b/web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.types.ts
@@ -1,3 +1,7 @@
+import { AccountByIdQuery } from 'generated/graphql';
+
+import { useEmailConfirmationData } from '../LoginFlow/hooks/useEmailConfirmationData';
+
 /**
  * Describes the props for the UserAccountSettings component.
  */
@@ -16,6 +20,31 @@ export interface UserAccountSettingsProps {
    * The wallet provider that the user can connect to.
    */
   walletProvider: WalletProviderInfo;
+
+  /**
+   * The current user's custodial address.
+   */
+  custodialAddress: NonNullable<
+    AccountByIdQuery['accountById']
+  >['custodialAddress'];
+
+  /**
+   * Methods and data related to email confirmation,
+   * returned by the useEmailConfirmationData hook.
+   */
+  emailConfirmationData: Pick<
+    ReturnType<typeof useEmailConfirmationData>,
+    | 'isConfirmationModalOpen'
+    | 'email'
+    | 'emailModalError'
+    | 'resendTimeLeft'
+    | 'onConfirmationModalClose'
+    | 'onMailCodeChange'
+    | 'onResendPasscode'
+    | 'onEmailSubmit'
+    | 'isConnectedEmailErrorModalOpen'
+    | 'onConnectedEmailErrorModalClose'
+  >;
 }
 
 type DisconnectedState = {