Merge pull request #123 from valory-xyz/tanya/improve-creating-accoun…

…t-transition

Make creating account transition more obvious

frontend/components/Setup/Create/SetupCreateSafe.tsx

@@ -0,0 +1,78 @@
+import { message, Typography } from 'antd';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+import { Chain } from '@/client';
+import { CardSection } from '@/components/styled/CardSection';
+import { SUPPORT_URL } from '@/constants';
+import { UNICODE_SYMBOLS } from '@/constants/unicode';
+import { PageState } from '@/enums';
+import { usePageState, useSetup } from '@/hooks';
+import { useWallet } from '@/hooks/useWallet';
+import { WalletService } from '@/service/Wallet';
+
+export const SetupCreateSafe = () => {
+  const { masterSafeAddress } = useWallet();
+  const { backupSigner } = useSetup();
+  const { goto } = usePageState();
+
+  const [isCreatingSafe, setIsCreatingSafe] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    if (isCreatingSafe) return;
+    setIsCreatingSafe(true);
+    // TODO: add backup signer
+    WalletService.createSafe(Chain.GNOSIS, backupSigner).catch((e) => {
+      console.error(e);
+      setIsError(true);
+      message.error('Failed to create an account. Please try again later.');
+    });
+  }, [backupSigner, isCreatingSafe]);
+
+  useEffect(() => {
+    // Only progress is the safe is created and accessible via context (updates on interval)
+    if (masterSafeAddress) goto(PageState.Main);
+  }, [goto, masterSafeAddress]);
+
+  return (
+    <CardSection
+      vertical
+      align="center"
+      justify="center"
+      padding="80px 24px"
+      gap={12}
+    >
+      {isError ? (
+        <>
+          <Image src="/broken-robot.svg" alt="logo" width={80} height={80} />
+          <Typography.Text type="secondary" className="mt-12">
+            Error, please contact{' '}
+            <a target="_blank" href={SUPPORT_URL}>
+              Olas community {UNICODE_SYMBOLS.EXTERNAL_LINK}
+            </a>
+          </Typography.Text>
+        </>
+      ) : (
+        <>
+          <Image
+            src="/onboarding-robot.svg"
+            alt="logo"
+            width={80}
+            height={80}
+          />
+          <Typography.Title
+            level={4}
+            className="m-0 mt-12 loading-ellipses"
+            style={{ width: '220px' }}
+          >
+            Creating account
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            You will be redirected once the account is created
+          </Typography.Text>
+        </>
+      )}
+    </CardSection>
+  );
+};

frontend/components/Setup/Create/SetupEoaFunding.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
   Typography,
 } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Chain } from '@/client';
@@ -24,90 +24,44 @@ import {
   MIN_ETH_BALANCE_THRESHOLDS,
 } from '@/constants';
 import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { PageState, SetupScreen } from '@/enums';
-import { useBalance, usePageState, useSetup } from '@/hooks';
+import { SetupScreen } from '@/enums';
+import { useBalance, useSetup } from '@/hooks';
 import { useWallet } from '@/hooks/useWallet';
-import { WalletService } from '@/service/Wallet';
 import { Address } from '@/types';
 
 import { SetupCreateHeader } from './SetupCreateHeader';
 
-enum SetupEaoFundingStatus {
-  WaitingForEoaFunding,
-  CreatingSafe,
-  Done,
-  Error,
-}
-
-const loadingStatuses = [
-  SetupEaoFundingStatus.WaitingForEoaFunding,
-  SetupEaoFundingStatus.CreatingSafe,
-];
-
-export const SetupEoaFunding = ({
-  isIncomplete,
-}: {
-  isIncomplete?: boolean;
-}) => {
-  const { masterEoaAddress: masterEaoAddress, masterSafeAddress } = useWallet();
+export const SetupEoaFunding = () => {
+  const { masterEoaAddress } = useWallet();
   const { walletBalances } = useBalance();
-  const { backupSigner } = useSetup();
-  const { goto } = usePageState();
-
-  const [isCreatingSafe, setIsCreatingSafe] = useState(false);
+  const { goto } = useSetup();
 
   const masterEaoEthBalance =
-    masterEaoAddress && walletBalances?.[masterEaoAddress]?.ETH;
+    masterEoaAddress && walletBalances?.[masterEoaAddress]?.ETH;
 
   const isFundedMasterEoa =
     masterEaoEthBalance &&
     masterEaoEthBalance >=
       MIN_ETH_BALANCE_THRESHOLDS[Chain.GNOSIS].safeCreation;
 
-  const status = useMemo(() => {
-    if (!isFundedMasterEoa) return SetupEaoFundingStatus.WaitingForEoaFunding;
-    if (isCreatingSafe) return SetupEaoFundingStatus.CreatingSafe;
-    if (masterSafeAddress) return SetupEaoFundingStatus.Done;
-    return SetupEaoFundingStatus.Error;
-  }, [isCreatingSafe, isFundedMasterEoa, masterSafeAddress]);
-
   const statusMessage = useMemo(() => {
-    switch (status) {
-      case SetupEaoFundingStatus.WaitingForEoaFunding:
-        return 'Waiting for transaction';
-      case SetupEaoFundingStatus.CreatingSafe:
-        return 'Creating account';
-      case SetupEaoFundingStatus.Done:
-        return 'Account created';
-      case SetupEaoFundingStatus.Error:
-        return 'Error, please contact support';
+    if (isFundedMasterEoa) {
+      return 'Funds have been received!';
+    } else {
+      return 'Waiting for transaction';
     }
-  }, [status]);
+  }, [isFundedMasterEoa]);
 
   useEffect(() => {
-    // Create the safe once the master EOA is funded
+    // Move to create the safe stage once the master EOA is funded
     if (!isFundedMasterEoa) return;
-    if (isCreatingSafe) return;
-    setIsCreatingSafe(true);
     message.success('Funds have been received!');
-    // TODO: add backup signer
-    WalletService.createSafe(Chain.GNOSIS, backupSigner).catch((e) => {
-      console.error(e);
-      message.error('Failed to create an account. Please try again later.');
-    });
-  }, [backupSigner, goto, isCreatingSafe, isFundedMasterEoa]);
-
-  useEffect(() => {
-    // Only progress is the safe is created and accessible via context (updates on interval)
-    if (masterSafeAddress) goto(PageState.Main);
-  }, [goto, masterSafeAddress]);
+    goto(SetupScreen.SetupCreateSafe);
+  }, [goto, isFundedMasterEoa]);
 
   return (
     <CardFlex>
-      <SetupCreateHeader
-        prev={SetupScreen.SetupBackupSigner}
-        disabled={isCreatingSafe || isIncomplete}
-      />
+      <SetupCreateHeader prev={SetupScreen.SetupBackupSigner} />
       <Typography.Title level={3}>
         Deposit {MIN_ETH_BALANCE_THRESHOLDS[Chain.GNOSIS].safeCreation} XDAI on
         Gnosis
@@ -121,13 +75,13 @@ export const SetupEoaFunding = ({
         borderbottom={isFundedMasterEoa ? 'true' : 'false'}
       >
         <Typography.Text
-          className={loadingStatuses.includes(status) ? 'loading-ellipses' : ''}
+          className={isFundedMasterEoa ? '' : 'loading-ellipses'}
         >
           Status: {statusMessage}
         </Typography.Text>
       </CardSection>
       {!isFundedMasterEoa && (
-        <SetupEoaFundingWaiting masterEoa={masterEaoAddress} />
+        <SetupEoaFundingWaiting masterEoa={masterEoaAddress} />
       )}
     </CardFlex>
   );

frontend/components/Setup/Setup.tsx

@@ -4,6 +4,7 @@ import { SetupContext } from '@/context';
 import { SetupScreen } from '@/enums';
 
 import { SetupBackupSigner } from './Create/SetupBackupSigner';
+import { SetupCreateSafe } from './Create/SetupCreateSafe';
 import { SetupEoaFunding } from './Create/SetupEoaFunding';
 import { SetupPassword } from './Create/SetupPassword';
 import { SetupSeedPhrase } from './Create/SetupSeedPhrase';
@@ -30,8 +31,8 @@ export const Setup = () => {
         return <SetupBackupSigner />;
       case SetupScreen.SetupEoaFunding:
         return <SetupEoaFunding />;
-      case SetupScreen.SetupEoaFundingIncomplete:
-        return <SetupEoaFunding isIncomplete />;
+      case SetupScreen.SetupCreateSafe:
+        return <SetupCreateSafe />;
       // Restore account
       case SetupScreen.Restore:
         return <SetupRestoreMain />;

frontend/components/Setup/SetupWelcome.tsx

@@ -111,7 +111,7 @@ export const SetupWelcomeLogin = () => {
         .then(() => {
           if (masterEoaAddress && !masterSafeAddress) {
             gotoPage(PageState.Setup);
-            goto(SetupScreen.SetupEoaFundingIncomplete);
+            goto(SetupScreen.SetupCreateSafe);
           } else {
             gotoPage(PageState.Main);
           }

frontend/constants/urls.ts

@@ -1,3 +1,5 @@
 export const BACKEND_URL: string = `http://localhost:${process.env.NEXT_PUBLIC_BACKEND_PORT || 8000}/api`;
 export const COW_SWAP_GNOSIS_XDAI_OLAS_URL: string =
   'https://swap.cow.fi/#/100/swap/WXDAI/OLAS';
+export const SUPPORT_URL =
+  'https://discord.com/channels/899649805582737479/1169275451089367131';

frontend/enums/SetupScreen.ts

@@ -5,7 +5,7 @@ export enum SetupScreen {
   SetupSeedPhrase,
   SetupBackupSigner,
   SetupEoaFunding,
-  SetupEoaFundingIncomplete,
+  SetupCreateSafe,
   Restore,
   RestoreViaSeed,
   RestoreSetPassword,