feaT: CP-9487 CP-9473 ledger flow (#93)

src/background/runtime/BackgroundRuntime.ts

@@ -4,15 +4,16 @@ import { ConnectionService } from '@src/background/connections/ConnectionService
 import { singleton } from 'tsyringe';
 import { LockService } from '@src/background/services/lock/LockService';
 import { OnboardingService } from '@src/background/services/onboarding/OnboardingService';
-import { BridgeService } from '@src/background/services/bridge/BridgeService';
 import { ModuleManager } from '../vmModules/ModuleManager';
+import { BridgeService } from '../services/bridge/BridgeService';
 
 @singleton()
 export class BackgroundRuntime {
   constructor(
     private connectionService: ConnectionService,
     private lockService: LockService,
     private onboardingService: OnboardingService,
+    // we try to fetch the bridge configs as soon as possible
     private bridgeService: BridgeService,
     private moduleManager: ModuleManager
   ) {}

src/components/ledger/LedgerConnector.tsx

@@ -377,10 +377,7 @@ export function LedgerConnector({
               }}
             >
               <Divider flexItem />
-              <DerivedAddresses
-                addresses={addresses}
-                hideLoadinSkeleton={pathSpec === DerivationPath.BIP44}
-              />
+              <DerivedAddresses addresses={addresses} />
             </Stack>
           )}
       </Stack>

src/localization/locales/en/translation.json

@@ -156,6 +156,7 @@
   "Click close below.": "Click close below.",
   "Click on the 'Get Signature' button after signing the transaction with your Keystone device.": "Click on the 'Get Signature' button after signing the transaction with your Keystone device.",
   "Click on the “Scan” button at the bottom to scan the QR code displayed on the Keystone device.": "Click on the “Scan” button at the bottom to scan the QR code displayed on the Keystone device.",
+  "Clicking the cancel button will close the tab and open the extension for you. If the extension doesn’t open automatically, please open it manually.": "Clicking the cancel button will close the tab and open the extension for you. If the extension doesn’t open automatically, please open it manually.",
   "Close": "Close",
   "Closing the settings menu will require you to restart the 2 day waiting period.": "Closing the settings menu will require you to restart the 2 day waiting period.",
   "Code": "Code",

src/pages/Accounts/AddWalletWithLedger.tsx

@@ -4,6 +4,7 @@ import {
   ExternalLinkIcon,
   Grid,
   Stack,
+  Tooltip,
   Typography,
   toast,
   useTheme,
@@ -34,6 +35,7 @@ import { useErrorMessage } from '@src/hooks/useErrorMessage';
 import { useLedgerContext } from '@src/contexts/LedgerProvider';
 import { Overlay } from '@src/components/common/Overlay';
 import { AppBackground } from '@src/components/common/AppBackground';
+import browser from 'webextension-polyfill';
 
 enum Step {
   Import,
@@ -221,7 +223,13 @@ export function AddWalletWithLedger() {
                   'Please close this tab and open the Core Browser Extension to see the newly imported wallet.'
                 )}
               </Typography>
-              <Button onClick={window.close} sx={{ width: '50%' }}>
+              <Button
+                onClick={() => {
+                  browser.action.openPopup();
+                  window.close();
+                }}
+                sx={{ width: '50%' }}
+              >
                 {t('Close')}
               </Button>
             </Stack>
@@ -310,12 +318,34 @@ export function AddWalletWithLedger() {
                 />
               </Stack>
               <Stack sx={{ p: 2, mb: 2, rowGap: 1 }}>
-                <Button
-                  disabled={!hasPublicKeys}
-                  onClick={() => setStep(Step.Name)}
-                >
-                  {t('Next')}
-                </Button>
+                <Stack sx={{ flexDirection: 'row', columnGap: 2 }}>
+                  <Stack sx={{ width: '50%' }}>
+                    <Tooltip
+                      title={t(
+                        'Clicking the cancel button will close the tab and open the extension for you. If the extension doesn’t open automatically, please open it manually.'
+                      )}
+                    >
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          browser.action.openPopup();
+                          window.close();
+                        }}
+                        fullWidth
+                      >
+                        {t('Cancel')}
+                      </Button>
+                    </Tooltip>
+                  </Stack>
+                  <Button
+                    disabled={!hasPublicKeys}
+                    onClick={() => setStep(Step.Name)}
+                    sx={{ width: '50%' }}
+                    fullWidth
+                  >
+                    {t('Next')}
+                  </Button>
+                </Stack>
                 <LedgerLiveSupportButton />
               </Stack>
             </Stack>

src/pages/Accounts/components/AccountsActionButton.tsx

@@ -93,8 +93,6 @@ export const AccountsActionButton = ({
     browser.tabs.create({
       url: `/fullscreen.html#/accounts/add-wallet/ledger`,
     });
-
-    // history.push('/accounts/add-wallet/ledger');
   }, [capture]);
 
   const goToWalletConnectScreen = useCallback(() => {

src/pages/Onboarding/components/DerivedAddresses.tsx

@@ -13,14 +13,17 @@ import {
   useTheme,
   Tooltip,
 } from '@avalabs/core-k2-components';
+import { useMemo } from 'react';
 
 interface DerivedAddressesProps {
   addresses: AddressType[];
-  hideLoadinSkeleton?: boolean;
 }
 export function DerivedAddresses({ addresses }: DerivedAddressesProps) {
   const theme = useTheme();
   const { t } = useTranslation();
+  const hasBalance = useMemo(() => {
+    return addresses.find((address) => address.balance !== '0');
+  }, [addresses]);
 
   return (
     <Card
@@ -37,6 +40,9 @@ export function DerivedAddresses({ addresses }: DerivedAddressesProps) {
           </Typography>
           <Stack alignItems="space-between" divider={<Divider flexItem />}>
             {addresses.map((addressData, index) => {
+              if (hasBalance && addressData.balance === '0') {
+                return;
+              }
               const explorerLink = getAvalancheAddressLink(addressData.address);
 
               return (