fix: address onboarding UI deviations (#24)

Signed-off-by: ryanml <[email protected]> Co-authored-by: vvava <[email protected]> Co-authored-by: bferenc <[email protected]> Co-authored-by: Viktor Vasas <[email protected]>
ava-labs · Aug 13, 2024 · ce79553 · ce79553
1 parent 26399f6
commit ce79553
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@avalabs/core-wallets-sdk": "3.0.0",
     "@avalabs/glacier-sdk": "2.8.0-alpha.188",
     "@avalabs/hw-app-avalanche": "0.14.1",
-    "@avalabs/core-k2-components": "4.18.0-alpha.44",
+    "@avalabs/core-k2-components": "4.18.0-alpha.47",
     "@avalabs/types": "2.8.0-alpha.188",
     "@blockaid/client": "0.10.0",
     "@coinbase/cbpay-js": "1.6.0",

diff --git a/src/pages/Onboarding/pages/Seedless/components/ExistingWalletButton.tsx b/src/pages/Onboarding/pages/Seedless/components/ExistingWalletButton.tsx
@@ -18,11 +18,12 @@ export function ExistingWalletButton({
         width: '225px',
         height: '180px',
         borderRadius: 2,
-        backgroundColor: 'grey.700',
+        backgroundColor: 'rgba(88, 88, 91, 0.75)',
         cursor: 'pointer',
         '&:hover': {
           backgroundColor: 'grey.200',
-          color: 'grey.700',
+          color: 'common.black',
+          transition: 'all 300ms ease-in-out',
         },
         alignItems: 'flex-start',
         p: 2,

diff --git a/src/pages/Onboarding/pages/Seedless/components/ExistingWalletOptions.tsx b/src/pages/Onboarding/pages/Seedless/components/ExistingWalletOptions.tsx
@@ -0,0 +1,90 @@
+import {
+  Stack,
+  Typography,
+  ShieldLockIcon,
+  LedgerIcon,
+  KeystoneIcon,
+  ArrowLeftIconV2,
+} from '@avalabs/core-k2-components';
+import { forwardRef, ForwardedRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useFeatureFlagContext } from '@src/contexts/FeatureFlagsProvider';
+import { FeatureGates } from '@src/background/services/featureFlags/models';
+import { OnboardingURLs } from '@src/background/services/onboarding/models';
+import { Overlay } from '@src/components/common/Overlay';
+import { ExistingWalletButton } from './ExistingWalletButton';
+
+type ExistingWalletOptionsProps = {
+  setShowExistingWalletOption: (open: boolean) => void;
+};
+
+export const ExistingWalletOptions = forwardRef(function ExistingWalletOptions(
+  { setShowExistingWalletOption }: ExistingWalletOptionsProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const { featureFlags } = useFeatureFlagContext();
+
+  return (
+    <Overlay
+      sx={{
+        backgroundColor: 'rgba(17, 17, 17, 0.75)',
+      }}
+    >
+      <Stack
+        ref={ref}
+        sx={{
+          width: 480,
+          alignItems: 'flex-start',
+          rowGap: 5,
+          position: 'fixed',
+          top: 90,
+        }}
+      >
+        <ArrowLeftIconV2
+          sx={{ cursor: 'pointer', width: 19, height: 14 }}
+          onClick={() => {
+            setShowExistingWalletOption(false);
+          }}
+        />
+        <Typography variant="h3" sx={{ textAlign: 'left' }}>
+          {t('How would you like to access your existing wallet?')}
+        </Typography>
+        <Stack>
+          <Stack sx={{ flexDirection: 'row', columnGap: 3, pb: 3 }}>
+            <ExistingWalletButton
+              data-testid="access-with-seed-phrase"
+              icon={<ShieldLockIcon size={30} />}
+              text={t('Enter recovery phrase')}
+              onClick={() => {
+                history.push(OnboardingURLs.SEED_PHRASE);
+              }}
+            />
+            <ExistingWalletButton
+              data-testid="access-with-ledger"
+              icon={<LedgerIcon size={30} />}
+              text={t('Add using Ledger')}
+              onClick={() => {
+                history.push(OnboardingURLs.LEDGER);
+              }}
+            />
+          </Stack>
+          {featureFlags[FeatureGates.KEYSTONE] && (
+            <Stack sx={{ flexDirection: 'row' }}>
+              <ExistingWalletButton
+                data-testid="access-with-seed-keystone"
+                icon={<KeystoneIcon size={30} />}
+                text={t('Add using Keystone')}
+                onClick={() => {
+                  history.push(OnboardingURLs.KEYSTONE);
+                }}
+              />
+            </Stack>
+          )}
+        </Stack>
+      </Stack>
+    </Overlay>
+  );
+});
diff --git a/src/pages/Onboarding/pages/Welcome/SignUpWithSeedless.tsx b/src/pages/Onboarding/pages/Welcome/SignUpWithSeedless.tsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Stack,
-  Typography,
-  KeystoneIcon,
-  LedgerIcon,
-  ArrowLeftIcon,
-  ShieldLockIcon,
-} from '@avalabs/core-k2-components';
+import { Button, Stack } from '@avalabs/core-k2-components';
 import { useTranslation } from 'react-i18next';
 import { useFeatureFlagContext } from '@src/contexts/FeatureFlagsProvider';
 import { FeatureGates } from '@src/background/services/featureFlags/models';
@@ -15,23 +7,40 @@ import { OnboardingURLs } from '@src/background/services/onboarding/models';
 import { GoogleButton } from '../Seedless/components/GoogleButton';
 import { AppleButton } from '../Seedless/components/AppleButton';
 import { LoadingOverlay } from '@src/components/common/LoadingOverlay';
-import { useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useAnalyticsContext } from '@src/contexts/AnalyticsProvider';
-import { Overlay } from '@src/components/common/Overlay';
-import { ExistingWalletButton } from '../Seedless/components/ExistingWalletButton';
+import { ExistingWalletOptions } from '../Seedless/components/ExistingWalletOptions';
 import { BlinkingLogo } from '@src/components/icons/BlinkLogo';
 
-export function SignUpWithSeedles() {
+export function SignUpWithSeedless() {
   const { t } = useTranslation();
   const { capture } = useAnalyticsContext();
   const { featureFlags } = useFeatureFlagContext();
   const history = useHistory();
   const [isAuthenticationInProgress, setIsAuthenticationInProgress] =
     useState(false);
+  const scrimRef = useRef<HTMLDivElement>(null);
+  const optionsRef = useRef<HTMLDivElement>(null);
 
   const [showExistingWalletOption, setShowExistingWalletOption] =
     useState(false);
 
+  useEffect(() => {
+    const handleClickInShim = (event: MouseEvent) => {
+      const { target } = event;
+      const overlayClicked = scrimRef.current?.contains(target as Node);
+      const optionsClicked = optionsRef.current?.contains(target as Node);
+      if (overlayClicked && !optionsClicked) {
+        setShowExistingWalletOption(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickInShim);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickInShim);
+    };
+  }, [scrimRef, setShowExistingWalletOption]);
+
   return (
     <>
       <Stack
@@ -40,6 +49,7 @@ export function SignUpWithSeedles() {
           textAlign: 'center',
           height: '100%',
         }}
+        ref={scrimRef}
       >
         <Stack
           sx={{
@@ -91,53 +101,11 @@ export function SignUpWithSeedles() {
             </Button>
           </Stack>
         </Stack>
-
         {showExistingWalletOption && (
-          <Overlay>
-            <Stack sx={{ width: 480, alignItems: 'flex-start', rowGap: 5 }}>
-              <ArrowLeftIcon
-                size={32}
-                onClick={() => {
-                  setShowExistingWalletOption(false);
-                }}
-              />
-              <Typography variant="h3" sx={{ textAlign: 'left' }}>
-                {t('How would you like to access your existing wallet?')}
-              </Typography>
-              <Stack>
-                <Stack sx={{ flexDirection: 'row', columnGap: 3, pb: 3 }}>
-                  <ExistingWalletButton
-                    data-testid="access-with-seed-phrase"
-                    icon={<ShieldLockIcon size={30} />}
-                    text={t('Enter recovery phrase')}
-                    onClick={() => {
-                      history.push(OnboardingURLs.SEED_PHRASE);
-                    }}
-                  />
-                  <ExistingWalletButton
-                    data-testid="access-with-ledger"
-                    icon={<LedgerIcon size={30} />}
-                    text={t('Add using Ledger')}
-                    onClick={() => {
-                      history.push(OnboardingURLs.LEDGER);
-                    }}
-                  />
-                </Stack>
-                {featureFlags[FeatureGates.KEYSTONE] && (
-                  <Stack sx={{ flexDirection: 'row' }}>
-                    <ExistingWalletButton
-                      data-testid="access-with-seed-keystone"
-                      icon={<KeystoneIcon size={30} />}
-                      text={t('Add using Keystone')}
-                      onClick={() => {
-                        history.push(OnboardingURLs.KEYSTONE);
-                      }}
-                    />
-                  </Stack>
-                )}
-              </Stack>
-            </Stack>
-          </Overlay>
+          <ExistingWalletOptions
+            ref={optionsRef}
+            setShowExistingWalletOption={setShowExistingWalletOption}
+          />
         )}
       </Stack>
       {isAuthenticationInProgress && <LoadingOverlay />}

diff --git a/src/pages/Onboarding/pages/Welcome/Welcome.tsx b/src/pages/Onboarding/pages/Welcome/Welcome.tsx
@@ -1,4 +1,4 @@
-import { SignUpWithSeedles } from './SignUpWithSeedless';
+import { SignUpWithSeedless } from './SignUpWithSeedless';
 import { Stack } from '@avalabs/core-k2-components';
 import { useOnboardingContext } from '@src/contexts/OnboardingProvider';
 import { useEffect } from 'react';
@@ -12,7 +12,7 @@ export function Welcome() {
 
   return (
     <Stack sx={{ height: '100%' }}>
-      <SignUpWithSeedles />
+      <SignUpWithSeedless />
     </Stack>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -91,10 +91,10 @@
   dependencies:
     "@avalabs/core-utils-sdk" "^3.0.0"
 
-"@avalabs/[email protected].44":
-  version "4.18.0-alpha.44"
-  resolved "https://registry.yarnpkg.com/@avalabs/core-k2-components/-/core-k2-components-4.18.0-alpha.44.tgz#8daf2d8ab28cc5491adbb11d36201ec91dfc4bce"
-  integrity sha512-2oIg1SsJ7dGedpxoezOPMTJbIcMK4s+P8fu9ba6Q3ZskjhX5OJizv42H4orvQyCb5RXgN2FvxYkft6FSufNiqA==
+"@avalabs/[email protected].47":
+  version "4.18.0-alpha.47"
+  resolved "https://registry.yarnpkg.com/@avalabs/core-k2-components/-/core-k2-components-4.18.0-alpha.47.tgz#94d588cf109350fe57d246dbf36bc127a1fc0584"
+  integrity sha512-eXgd3mgHJKHyQRGHxcQV4MJBzJT0Orr+w2xrWZ1M9dGcQBTGbOxQ5h0Y/TPRkUXrP8SVhonEM2ACX8YTSTbKDA==
   dependencies:
     "@emotion/react" "11.11.1"
     "@emotion/styled" "11.11.0"