Manually trigger accounts discovery

alephium · Jan 23, 2024 · 3f07ee1 · 3f07ee1
1 parent 7541338
commit 3f07ee1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 46 deletions.
diff --git a/packages/extension/src/ui/features/accounts/AccountListScreen.tsx b/packages/extension/src/ui/features/accounts/AccountListScreen.tsx
@@ -6,13 +6,12 @@ import {
 } from "@argent/ui"
 import { Flex } from "@chakra-ui/react"
 import { partition } from "lodash-es"
-import { FC, useCallback, useEffect, useState } from "react"
+import { FC, useCallback } from "react"
 import { useNavigate } from "react-router-dom"
 import styled from "styled-components"
 
 import { useReturnTo } from "../../routes"
 import { P } from "../../theme/Typography"
-import { LoadingScreen } from "../actions/LoadingScreen"
 import { useCurrentNetwork } from "../networks/useNetworks"
 import { useBackupRequired } from "../recovery/backupDownload.state"
 import { recover } from "../recovery/recovery.service"
@@ -25,7 +24,6 @@ import {
 } from "./accounts.state"
 import { HiddenAccountsBar } from "./HiddenAccountsBar"
 import { routes } from "../../routes"
-import { discoverAccounts } from "../../services/backgroundAccounts"
 
 const { AddIcon } = icons
 
@@ -36,7 +34,6 @@ const Paragraph = styled(P)`
 export const AccountListScreen: FC = () => {
   const navigate = useNavigate()
   const returnTo = useReturnTo()
-  const [accountsDiscovered, setAcccountsDiscovered] = useState(false)
   const selectedAccount = useSelectedAccount()
   const allAccounts = useAccounts({ showHidden: true })
   const [hiddenAccounts, visibleAccounts] = partition(
@@ -45,7 +42,6 @@ export const AccountListScreen: FC = () => {
   )
   const { isBackupRequired } = useBackupRequired()
   const currentNetwork = useCurrentNetwork()
-
   const hasHiddenAccounts = hiddenAccounts.length > 0
 
   const onClose = useCallback(async () => {
@@ -56,21 +52,6 @@ export const AccountListScreen: FC = () => {
     }
   }, [navigate, returnTo])
 
-  useEffect(() => {
-    if (allAccounts.length === 0) {
-      discoverAccounts(currentNetwork.id)
-        .then(() => setAcccountsDiscovered(true))
-        .catch((e) => {
-          console.error(e)
-          setAcccountsDiscovered(true)
-        })
-    }
-  }, [currentNetwork])
-
-  if (allAccounts.length === 0 && !accountsDiscovered) {
-    return <LoadingScreen />
-  }
-
   return (
     <>
       <NavigationContainer

diff --git a/packages/extension/src/ui/features/accounts/AccountScreenEmpty.tsx b/packages/extension/src/ui/features/accounts/AccountScreenEmpty.tsx
@@ -3,51 +3,58 @@ import { partition } from "lodash-es"
 import { FC, useEffect, useState } from "react"
 import { discoverAccounts } from "../../services/backgroundAccounts"
 import { LoadingScreen } from "../actions/LoadingScreen"
-
+import { routes } from "../../routes"
+import { Navigate } from "react-router-dom"
 import { useCurrentNetwork } from "../networks/useNetworks"
 import { AccountNavigationBar } from "./AccountNavigationBar"
 import { isHiddenAccount, useAccounts } from "./accounts.state"
 import { HiddenAccountsBar } from "./HiddenAccountsBar"
 import { autoSelectAccountOnNetwork } from "./switchAccount"
 
-const { WalletIcon, AddIcon } = icons
+const { WalletIcon, AddIcon, SearchIcon } = icons
 
 export interface AccountScreenEmptyProps {
   onAddAccount: () => void
-  isDeploying?: boolean
 }
 
 export const AccountScreenEmpty: FC<AccountScreenEmptyProps> = ({
   onAddAccount,
-  isDeploying,
 }) => {
   const currentNetwork = useCurrentNetwork()
-  const [accountsDiscovered, setAcccountsDiscovered] = useState(false)
+  const [discoveringAccount, setDiscoveringAccount] = useState(false)
+  const [accountDiscoveryFinished, setAccountDiscoveryFinished] = useState(false)
   const allAccounts = useAccounts({ showHidden: true })
   const [hiddenAccounts, visibleAccounts] = partition(
     allAccounts,
     isHiddenAccount,
   )
   const hasVisibleAccounts = visibleAccounts.length > 0
   const hasHiddenAccounts = hiddenAccounts.length > 0
+
+  const onDiscoverAccounts = () => {
+    setDiscoveringAccount(true)
+    discoverAccounts(currentNetwork.id)
+      .then(() => {
+        setDiscoveringAccount(false)
+        setAccountDiscoveryFinished(true)
+      })
+      .catch((e) => {
+        console.error(e)
+        setDiscoveringAccount(false)
+      })
+  }
+
   useEffect(() => {
     /** User made some account visible then returned to this screen */
     if (hasVisibleAccounts) {
       autoSelectAccountOnNetwork(currentNetwork.id)
     }
+  }, [currentNetwork.id, hasVisibleAccounts, accountDiscoveryFinished])
 
-    if (allAccounts.length === 0) {
-      discoverAccounts(currentNetwork.id)
-        .then(() => setAcccountsDiscovered(true))
-        .catch((e) => {
-          console.error(e)
-          setAcccountsDiscovered(true)
-        })
-    }
-  }, [currentNetwork.id, hasVisibleAccounts])
-
-  if (allAccounts.length === 0 && !accountsDiscovered) {
+  if (allAccounts.length === 0 && discoveringAccount) {
     return <LoadingScreen />
+  } else if (allAccounts.length > 0) {
+    return <Navigate to={routes.accounts()} />
   }
 
   return (
@@ -59,14 +66,36 @@ export const AccountScreenEmpty: FC<AccountScreenEmptyProps> = ({
           }`}
       >
         <EmptyButton
+          size={"sm"}
+          colorScheme={"transparent"}
+          color={"neutrals.500"}
           leftIcon={<AddIcon />}
           onClick={onAddAccount}
-          isLoading={isDeploying}
-          isDisabled={isDeploying}
           loadingText={"Creating"}
         >
-          Create account
+          New account
         </EmptyButton>
+        {
+          accountDiscoveryFinished ? (
+            <>
+              No active accounts found
+            </>
+          ) :
+            (<>
+              or
+              <EmptyButton
+                size={"sm"}
+                colorScheme={"transparent"}
+                color={"neutrals.500"}
+                leftIcon={<SearchIcon />}
+                onClick={onDiscoverAccounts}
+                loadingText={"Discovering"}
+              >
+                Discover accounts
+              </EmptyButton>
+            </>
+            )
+        }
       </Empty>
       {hasHiddenAccounts && <HiddenAccountsBar />}
     </>

diff --git a/packages/extension/src/ui/features/recovery/recovery.service.ts b/packages/extension/src/ui/features/recovery/recovery.service.ts
@@ -13,13 +13,11 @@ import { mapWalletAccountsToAccounts } from "../accounts/accounts.state"
 
 interface RecoveryOptions {
   networkId?: string
-  showAccountList?: boolean
   showHiddenAccountList?: boolean
 }
 
 export const recover = async ({
   networkId,
-  showAccountList,
   showHiddenAccountList,
 }: RecoveryOptions = {}) => {
   try {
@@ -43,10 +41,6 @@ export const recover = async ({
     await selectAccount(selectedAccount)
     useAppState.setState({ switcherNetworkId: networkId })
 
-    if (showAccountList || !selectedAccount) {
-      return routes.accounts()
-    }
-
     if (showHiddenAccountList && networkId) {
       return routes.accountsHidden(networkId)
     }

diff --git a/packages/ui/src/components/Empty.tsx b/packages/ui/src/components/Empty.tsx
@@ -30,5 +30,10 @@ export const Empty: FC<EmptyProps> = ({
 )
 
 export const EmptyButton: FC<ComponentProps<typeof Button>> = (props) => (
-  <Button colorScheme={"tertiary"} size={"sm"} {...props} />
+  <Button
+    colorScheme={"tertiary"}
+    color={"neutrals.500"}
+    size={"sm"}
+    {...props}
+  />
 )