fix: null rendering when accounts are undefined, closes #2000

leather-wallet · Dec 15, 2021 · 973dcc4 · 973dcc4
1 parent 24c9afd
commit 973dcc4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/src/features/account-switch-drawer/components/account-list-unavailable.tsx b/src/features/account-switch-drawer/components/account-list-unavailable.tsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { Box, Flex } from '@stacks/ui';
+import { Body, Title } from '@components/typography';
+
+export const AccountListUnavailable = memo(() => (
+  <Flex
+    flexDirection="column"
+    justifyContent="center"
+    px="loose"
+    minHeight="120px"
+    mb="extra-loose"
+  >
+    <Box>
+      <Title>Unable to load account information</Title>
+      <Body mt="base-tight">
+        We're unable to load information about your accounts. This may be a problem with the
+        wallet's API. If this problem persists, please contact support.
+      </Body>
+    </Box>
+  </Flex>
+));
diff --git a/src/features/account-switch-drawer/components/create-account-action.tsx b/src/features/account-switch-drawer/components/create-account-action.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Button } from '@stacks/ui';
+
+interface CreateAccountActionProps {
+  onCreateAccount(): void;
+}
+export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProps) {
+  return (
+    <Box pt="base" pb="loose" px="loose">
+      <Button onClick={() => onCreateAccount()}>Create an account</Button>
+    </Box>
+  );
+}
diff --git a/src/features/account-switch-drawer/switch-accounts.tsx b/src/features/account-switch-drawer/switch-accounts.tsx
@@ -1,12 +1,13 @@
 import React, { memo } from 'react';
-import { Box, Button } from '@stacks/ui';
 
 import { useUpdateAccountDrawerStep } from '@store/ui/ui.hooks';
 import { AccountStep } from '@store/ui/ui.models';
 import { useAccounts } from '@store/accounts/account.hooks';
 import { useAnalytics } from '@common/hooks/analytics/use-analytics';
 
 import { AccountList } from './components/account-list';
+import { AccountListUnavailable } from './components/account-list-unavailable';
+import { CreateAccountAction } from './components/create-account-action';
 
 interface SwitchAccountProps {
   close(): void;
@@ -15,17 +16,21 @@ export const SwitchAccounts = memo(({ close }: SwitchAccountProps) => {
   const setAccountDrawerStep = useUpdateAccountDrawerStep();
   const accounts = useAccounts();
   const analytics = useAnalytics();
+
   const setCreateAccountStep = () => {
     void analytics.track('choose_to_create_account');
     setAccountDrawerStep(AccountStep.Create);
   };
 
+  if (!accounts) {
+    void analytics.track('account_list_unavailable_warning_displayed');
+    return <AccountListUnavailable />;
+  }
+
   return (
     <>
-      {accounts ? <AccountList accounts={accounts} handleClose={close} /> : null}
-      <Box pt="base" pb="loose" px="loose">
-        <Button onClick={setCreateAccountStep}>Create an account</Button>
-      </Box>
+      <AccountList accounts={accounts} handleClose={close} />
+      <CreateAccountAction onCreateAccount={() => setCreateAccountStep()} />
     </>
   );
 });