fix(ui): show rescanning alert on CreateWallet page

joinmarket-webui · Nov 16, 2023 · d3450a8 · d3450a8
1 parent ec30c2a
commit d3450a8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 13 deletions.
diff --git a/src/components/CreateWallet.test.tsx b/src/components/CreateWallet.test.tsx
@@ -41,6 +41,22 @@ describe('<CreateWallet />', () => {
     ;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
   })
 
+  it('should display alert when rescanning is active', async () => {
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          rescanning: true,
+        }),
+    })
+
+    await act(async () => setup({}))
+
+    expect(screen.getByText('create_wallet.title')).toBeVisible()
+    expect(screen.getByTestId('alert-rescanning')).toBeVisible()
+    expect(screen.queryByText('create_wallet.button_create')).not.toBeInTheDocument()
+  })
+
   it('should render without errors', () => {
     act(() => setup({}))
 

diff --git a/src/components/CreateWallet.tsx b/src/components/CreateWallet.tsx
@@ -106,6 +106,12 @@ export default function CreateWallet({ parentRoute, startWallet }: CreateWalletP
   const [alert, setAlert] = useState<SimpleAlert>()
   const [createdWallet, setCreatedWallet] = useState<CreatedWalletWithAuth>()
 
+  const isCreated = useMemo(() => !!createdWallet?.walletFileName && !!createdWallet?.auth, [createdWallet])
+  const canCreate = useMemo(
+    () => !createdWallet && !serviceInfo?.walletFileName && !serviceInfo?.rescanning,
+    [isCreated, serviceInfo],
+  )
+
   const createWallet = useCallback(
     async ({ walletName, password }) => {
       setAlert(undefined)
@@ -152,17 +158,33 @@ export default function CreateWallet({ parentRoute, startWallet }: CreateWalletP
         <PageTitle title={t('create_wallet.title')} />
       )}
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
-      {serviceInfo?.walletFileName && !createdWallet ? (
-        <rb.Alert variant="warning">
-          <Trans i18nKey="create_wallet.alert_other_wallet_unlocked">
-            Currently <strong>{{ walletName: walletDisplayName(serviceInfo.walletFileName) }}</strong> is active. You
-            need to lock it first.
-            <Link to={routes.walletList} className="alert-link">
-              Go back
-            </Link>
-            .
-          </Trans>
-        </rb.Alert>
+      {!canCreate && !isCreated ? (
+        <>
+          {serviceInfo?.walletFileName && (
+            <rb.Alert variant="warning">
+              <Trans i18nKey="create_wallet.alert_other_wallet_unlocked">
+                Currently <strong>{{ walletName: walletDisplayName(serviceInfo.walletFileName) }}</strong> is active.
+                You need to lock it first.
+                <Link to={routes.walletList} className="alert-link">
+                  Go back
+                </Link>
+                .
+              </Trans>
+            </rb.Alert>
+          )}
+          {serviceInfo?.rescanning === true && (
+            <rb.Alert variant="warning" data-testid="alert-rescanning">
+              <Trans i18nKey="create_wallet.alert_rescan_in_progress">
+                Rescanning the timechain is currently in progress. Please wait until the process finishes and then try
+                again.
+                <Link to={routes.walletList} className="alert-link">
+                  Go back
+                </Link>
+                .
+              </Trans>
+            </rb.Alert>
+          )}
+        </>
       ) : (
         <>
           <PreventLeavingPageByMistake />

diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
@@ -394,7 +394,7 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
   const [importDetailsFormValues, setImportDetailsFormValues] = useState<ImportWalletDetailsFormValues>()
   const [recoveredWallet, setRecoveredWallet] = useState<RecoveredWalletWithAuth>()
 
-  const isRecovered = useMemo(() => !!recoveredWallet?.walletFileName && recoveredWallet?.auth, [recoveredWallet])
+  const isRecovered = useMemo(() => !!recoveredWallet?.walletFileName && !!recoveredWallet?.auth, [recoveredWallet])
   const canRecover = useMemo(
     () => !isRecovered && !serviceInfo?.walletFileName && !serviceInfo?.rescanning,
     [isRecovered, serviceInfo],
@@ -571,7 +571,7 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
             </rb.Alert>
           )}
           {serviceInfo?.rescanning === true && (
-            <rb.Alert variant="warning">
+            <rb.Alert variant="warning" data-testid="alert-rescanning">
               <Trans i18nKey="import_wallet.alert_rescan_in_progress">
                 Rescanning the timechain is currently in progress. Please wait until the process finishes and then try
                 again.

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -125,6 +125,7 @@
     "title_wallet_created": "Wallet created successfully!",
     "subtitle_wallet_created": "Please write down your seed phrase and password! Without this information you will not be able to access and recover your wallet!",
     "alert_other_wallet_unlocked": "Currently <1>{{ walletName }}</1> is active. You need to lock it first. <3>Go back</3>.",
+    "alert_rescan_in_progress": "Rescanning the timechain is currently in progress. Please wait until the process finishes and then try again. <1>Go back</1>.",
     "feedback_valid": "Looks good!",
     "label_wallet_name": "Wallet name",
     "placeholder_wallet_name": "Your Wallet...",