feat(wallet): add balance finder presentation view (#4891)

* feat: turn on feature flag

* feat: fix styles in remove dialog

* feat: add balance finder intro page

* minor fixes

* feat: disable feature in prod

* feat: add intro for ledger

apps/apps-backend/src/features/features.controller.ts

@@ -63,7 +63,7 @@ export class FeaturesController {
                     defaultValue: true,
                 },
                 [Feature.AccountFinder]: {
-                    defaultValue: false,
+                    defaultValue: true,
                 },
                 [Feature.StardustMigration]: {
                     defaultValue: true,

apps/wallet/src/ui/app/index.tsx

@@ -59,6 +59,7 @@ import { AppType } from './redux/slices/app/appType';
 import { StakingPage } from './staking/home';
 import { StorageMigrationPage } from './pages/StorageMigrationPage';
 import { AccountsFinderPage } from './pages/accounts/manage/accounts-finder/AccountsFinderPage';
+import { AccountsFinderIntroPage } from './pages/accounts/manage/accounts-finder/AccountsFinderIntroPage';
 
 const HIDDEN_MENU_PATHS = [
     '/nft-details',
@@ -192,6 +193,7 @@ export function App() {
                 <Route path="import-private-key" element={<ImportPrivateKeyPage />} />
                 <Route path="import-seed" element={<ImportSeedPage />} />
                 <Route path="manage" element={<ManageAccountsPage />} />
+                <Route path="manage/accounts-finder/intro" element={<AccountsFinderIntroPage />} />
                 <Route
                     path="manage/accounts-finder/:accountSourceId"
                     element={<AccountsFinderPage />}

apps/wallet/src/ui/app/pages/accounts/ProtectAccountPage.tsx

@@ -22,7 +22,6 @@ import {
 } from '_hooks';
 import { isSeedSerializedUiAccount } from '_src/background/accounts/seedAccount';
 import { isLedgerAccountSerializedUI } from '_src/background/accounts/ledgerAccount';
-import { AllowedAccountSourceTypes } from '../../accounts-finder';
 import { useFeature } from '@growthbook/growthbook-react';
 import { Feature } from '@iota/core';
 
@@ -94,7 +93,7 @@ export function ProtectAccountPage() {
                     (isMnemonicSerializedUiAccount(createdAccounts[0]) ||
                         isSeedSerializedUiAccount(createdAccounts[0]))
                 ) {
-                    const path = `/accounts/manage/accounts-finder/${createdAccounts[0].sourceID}`;
+                    const path = '/accounts/manage/accounts-finder/intro';
                     navigate(path, {
                         replace: true,
                         state: {
@@ -105,7 +104,7 @@ export function ProtectAccountPage() {
                     featureAccountFinderEnabled &&
                     isLedgerAccountSerializedUI(createdAccounts[0])
                 ) {
-                    const path = `/accounts/manage/accounts-finder/${AllowedAccountSourceTypes.LedgerDerived}`;
+                    const path = '/accounts/manage/accounts-finder/intro';
                     navigate(path, {
                         replace: true,
                         state: {

apps/wallet/src/ui/app/pages/accounts/manage/RemoveDialog.tsx

@@ -3,8 +3,19 @@
 
 import { useAccounts, useBackgroundClient } from '_hooks';
 import { useMutation } from '@tanstack/react-query';
-import { Button, ButtonType, Dialog, DialogBody, DialogContent, Header } from '@iota/apps-ui-kit';
+import {
+    Button,
+    ButtonType,
+    Dialog,
+    DialogBody,
+    DialogContent,
+    Header,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
+} from '@iota/apps-ui-kit';
 import toast from 'react-hot-toast';
+import { Info } from '@iota/apps-ui-icons';
 
 interface RemoveDialogProps {
     accountID: string;
@@ -41,27 +52,32 @@ export function RemoveDialog({ isOpen, setOpen, accountID }: RemoveDialogProps)
             <DialogContent containerId="overlay-portal-container">
                 <Header title="Remove account" onClose={() => setOpen(false)} />
                 <DialogBody>
-                    <div className="mb-md text-body-md">
-                        Are you sure you want to remove this account?
-                    </div>
-                    {totalAccounts === 1 ? (
-                        <div className="text-center">
-                            Removing this account will require you to set up your IOTA wallet again.
+                    <div className="flex flex-col gap-y-md">
+                        <div className="text-body-md">
+                            Are you sure you want to remove this account?
+                        </div>
+                        {totalAccounts === 1 ? (
+                            <InfoBox
+                                type={InfoBoxType.Default}
+                                supportingText="Removing this account will require you to set up your IOTA wallet again."
+                                icon={<Info />}
+                                style={InfoBoxStyle.Elevated}
+                            />
+                        ) : null}
+                        <div className="flex gap-xs">
+                            <Button
+                                fullWidth
+                                type={ButtonType.Secondary}
+                                text="Cancel"
+                                onClick={handleCancel}
+                            />
+                            <Button
+                                fullWidth
+                                type={ButtonType.Destructive}
+                                text="Remove"
+                                onClick={handleRemove}
+                            />
                         </div>
-                    ) : null}
-                    <div className="flex gap-xs">
-                        <Button
-                            fullWidth
-                            type={ButtonType.Secondary}
-                            text="Cancel"
-                            onClick={handleCancel}
-                        />
-                        <Button
-                            fullWidth
-                            type={ButtonType.Destructive}
-                            text="Remove"
-                            onClick={handleRemove}
-                        />
                     </div>
                 </DialogBody>
             </DialogContent>

apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderIntroPage.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useNavigate } from 'react-router-dom';
+import { Overlay } from '_components';
+import { useActiveAccount } from '_hooks';
+import { getKey } from '_helpers';
+import { Theme, useTheme } from '@iota/core';
+import { Button, ButtonType } from '@iota/apps-ui-kit';
+import BalanceFinderIntroImage from '_assets/images/balance_finder_intro.svg';
+import BalanceFinderIntroDarkImage from '_assets/images/balance_finder_intro_darkmode.svg';
+import { isLedgerAccountSerializedUI } from '_src/background/accounts/ledgerAccount';
+import { AllowedAccountSourceTypes } from '_src/ui/app/accounts-finder';
+
+export function AccountsFinderIntroPage() {
+    const { theme } = useTheme();
+    const navigate = useNavigate();
+    const activeAccount = useActiveAccount();
+
+    const isLedgerAccount = activeAccount && isLedgerAccountSerializedUI(activeAccount);
+    const accountSourceId = activeAccount && getKey(activeAccount);
+
+    const ledgerPath = `/accounts/manage/accounts-finder/${AllowedAccountSourceTypes.LedgerDerived}`;
+    const accountPath = isLedgerAccount
+        ? ledgerPath
+        : `/accounts/manage/accounts-finder/${accountSourceId}`;
+
+    return (
+        <Overlay showModal>
+            <div className="flex h-full flex-col items-center justify-between">
+                <div>
+                    {theme === Theme.Dark ? (
+                        <BalanceFinderIntroDarkImage />
+                    ) : (
+                        <BalanceFinderIntroImage />
+                    )}
+                </div>
+                <div className="flex h-full flex-col items-center justify-between">
+                    <div className="flex flex-col gap-y-sm p-md text-center">
+                        <span className="text-label-lg text-neutral-40 dark:text-neutral-60">
+                            Wallet Setup
+                        </span>
+                        <span className="text-headline-md text-neutral-10 dark:text-neutral-92">
+                            Balance Finder
+                        </span>
+                        <span className="text-body-md text-neutral-40 dark:text-neutral-60">
+                            Easily find and import all your accounts with balances, in one place.
+                        </span>
+                    </div>
+                    <div className="flex w-full flex-row gap-x-xs">
+                        <Button
+                            type={ButtonType.Secondary}
+                            text="Skip"
+                            onClick={() => navigate('/')}
+                            fullWidth
+                        />
+                        <Button
+                            type={ButtonType.Primary}
+                            text="Start"
+                            fullWidth
+                            onClick={() => navigate(accountPath)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Overlay>
+    );
+}