feat: display network specific address on ledger onboarding (#1755)

apps/extension/src/ui/domains/Account/AccountAdd/AccountAddLedger/AddLedgerSelectAccount.tsx

@@ -186,10 +186,17 @@ export const AddLedgerSelectAccount = () => {
               />
             )}
             {data.substrateAppType === AddSubstrateLedgerAppType.Generic && (
-              <LedgerSubstrateGenericAccountPicker onChange={handleAccountsChange} />
+              <LedgerSubstrateGenericAccountPicker
+                onChange={handleAccountsChange}
+                chainId={data.chainId}
+              />
             )}
             {data.substrateAppType === AddSubstrateLedgerAppType.Migration && !!app && (
-              <LedgerSubstrateGenericAccountPicker onChange={handleAccountsChange} app={app} />
+              <LedgerSubstrateGenericAccountPicker
+                onChange={handleAccountsChange}
+                app={app}
+                chainId={data.chainId}
+              />
             )}
           </>
         )}

apps/extension/src/ui/domains/Account/DerivedAccountPickerBase.tsx

@@ -1,6 +1,6 @@
 import { AccountJson } from "@polkadot/extension-base/background/types"
 import { CheckCircleIcon } from "@talismn/icons"
-import { classNames } from "@talismn/util"
+import { classNames, encodeAnyAddress } from "@talismn/util"
 import { FC, ReactNode, useCallback, useMemo } from "react"
 import { Checkbox, Tooltip, TooltipTrigger } from "talisman-ui"
 
@@ -54,6 +54,7 @@ const AccountButton: FC<AccountButtonProps> = ({
   onClick,
   withBalances,
   isBalanceLoading,
+  addressPrefix,
 }) => {
   const totalFiat = useBalancesFiatTotal(balances)
 
@@ -67,6 +68,11 @@ const AccountButton: FC<AccountButtonProps> = ({
     [balances.each, isBalanceLoading],
   )
 
+  const formattedAddress = useMemo(
+    () => encodeAnyAddress(address, addressPrefix ?? undefined),
+    [address, addressPrefix],
+  )
+
   return (
     <button
       type="button"
@@ -76,11 +82,11 @@ const AccountButton: FC<AccountButtonProps> = ({
       disabled={connected}
       onClick={onClick}
     >
-      <AccountIcon address={address} genesisHash={genesisHash} className="text-xl" />
+      <AccountIcon address={formattedAddress} genesisHash={genesisHash} className="text-xl" />
       <div className="flex flex-grow flex-col gap-2 overflow-hidden">
         <div className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</div>
         <div className="text-body-secondary text-sm">
-          <Address address={address} startCharCount={6} endCharCount={6} />
+          <Address address={formattedAddress} startCharCount={6} endCharCount={6} />
         </div>
       </div>
       <div className="flex items-center justify-end gap-2">
@@ -121,6 +127,7 @@ export type DerivedAccountBase = AccountJson & {
 
 type AccountButtonProps = DerivedAccountBase & {
   withBalances: boolean
+  addressPrefix?: number | null
   onClick: () => void
 }
 
@@ -129,6 +136,7 @@ type DerivedAccountPickerBaseProps = {
   withBalances: boolean
   canPageBack?: boolean
   disablePaging?: boolean
+  addressPrefix?: number | null
   onPagerFirstClick?: () => void
   onPagerPrevClick?: () => void
   onPagerNextClick?: () => void
@@ -139,6 +147,7 @@ export const DerivedAccountPickerBase: FC<DerivedAccountPickerBaseProps> = ({
   accounts = [],
   disablePaging,
   canPageBack,
+  addressPrefix,
   onPagerFirstClick,
   onPagerPrevClick,
   onPagerNextClick,
@@ -171,6 +180,7 @@ export const DerivedAccountPickerBase: FC<DerivedAccountPickerBaseProps> = ({
               key={`${keyPrefix}::${account.address}`}
               withBalances={withBalances}
               isBalanceLoading={account.isBalanceLoading}
+              addressPrefix={addressPrefix}
               {...account}
               onClick={handleToggleAccount(account)}
             />

apps/extension/src/ui/domains/Account/LedgerSubstrateGenericAccountPicker.tsx

@@ -1,7 +1,7 @@
 import { InfoIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { SubstrateAppParams } from "@zondax/ledger-substrate/dist/common"
-import { AccountJsonAny, SubstrateLedgerAppType } from "extension-core"
+import { AccountJsonAny, ChainId, SubstrateLedgerAppType } from "extension-core"
 import { log } from "extension-shared"
 import {
   ChangeEventHandler,
@@ -21,7 +21,7 @@ import { LedgerAccountDefSubstrateGeneric } from "@ui/domains/Account/AccountAdd
 import { getPolkadotLedgerDerivationPath } from "@ui/hooks/ledger/common"
 import { useLedgerSubstrateGeneric } from "@ui/hooks/ledger/useLedgerSubstrateGeneric"
 import { AccountImportDef, useAccountImportBalances } from "@ui/hooks/useAccountImportBalances"
-import { useAccounts, useChains } from "@ui/state"
+import { useAccounts, useChain, useChains } from "@ui/state"
 
 import { Fiat } from "../Asset/Fiat"
 import { AccountIcon } from "./AccountIcon"
@@ -147,20 +147,23 @@ const useLedgerSubstrateGenericAccounts = (
 type LedgerSubstrateGenericAccountPickerProps = {
   onChange?: (accounts: LedgerAccountDefSubstrateGeneric[]) => void
   app?: SubstrateAppParams | null
+  chainId?: ChainId
 }
 
 type LedgerSubstrateGenericAccount = DerivedAccountBase & LedgerAccountDefSubstrateGeneric
 
 const LedgerSubstrateGenericAccountPickerDefault: FC<LedgerSubstrateGenericAccountPickerProps> = ({
   onChange,
   app,
+  chainId,
 }) => {
   const { t } = useTranslation()
   const itemsPerPage = 5
   const [pageIndex, setPageIndex] = useState(0)
   const [selectedAccounts, setSelectedAccounts] = useState<LedgerAccountDefSubstrateGeneric[]>([])
   const { accounts, error, isBusy, connectionStatus, withBalances } =
     useLedgerSubstrateGenericAccounts(selectedAccounts, pageIndex, itemsPerPage, app)
+  const chain = useChain(chainId)
 
   // if ledger was busy when changing tabs, connection needs to be refreshed once on mount
   const refInitialized = useRef(false)
@@ -207,6 +210,7 @@ const LedgerSubstrateGenericAccountPickerDefault: FC<LedgerSubstrateGenericAccou
       <DerivedAccountPickerBase
         accounts={accounts}
         withBalances={withBalances}
+        addressPrefix={chain?.prefix}
         disablePaging={isBusy}
         canPageBack={pageIndex > 0}
         onAccountClick={handleToggleAccount}
@@ -505,6 +509,7 @@ const ModeButton: FC<{ selected: boolean; onClick: () => void; children: ReactNo
 export const LedgerSubstrateGenericAccountPicker: FC<LedgerSubstrateGenericAccountPickerProps> = ({
   onChange,
   app,
+  chainId,
 }) => {
   const { t } = useTranslation()
   const [mode, setMode] = useState<DerivationMode>("default")
@@ -535,9 +540,17 @@ export const LedgerSubstrateGenericAccountPicker: FC<LedgerSubstrateGenericAccou
         </div>
       </div>
       {mode === "default" ? (
-        <LedgerSubstrateGenericAccountPickerDefault onChange={onChange} app={app} />
+        <LedgerSubstrateGenericAccountPickerDefault
+          onChange={onChange}
+          app={app}
+          chainId={chainId}
+        />
       ) : (
-        <LedgerSubstrateGenericAccountPickerCustom onChange={onChange} app={app} />
+        <LedgerSubstrateGenericAccountPickerCustom
+          onChange={onChange}
+          app={app}
+          chainId={chainId}
+        />
       )}
     </div>
   )

apps/extension/src/ui/domains/Account/LedgerSubstrateLegacyAccountPicker.tsx

@@ -170,7 +170,7 @@ export const LedgerSubstrateLegacyAccountPicker: FC<LedgerSubstrateAccountPicker
   const itemsPerPage = 5
   const [pageIndex, setPageIndex] = useState(0)
   const [selectedAccounts, setSelectedAccounts] = useState<LedgerAccountDefSubstrateLegacy[]>([])
-  const { accounts, withBalances, error, isBusy } = useLedgerChainAccounts(
+  const { accounts, withBalances, error, isBusy, chain } = useLedgerChainAccounts(
     chainId,
     selectedAccounts,
     pageIndex,
@@ -207,6 +207,7 @@ export const LedgerSubstrateLegacyAccountPicker: FC<LedgerSubstrateAccountPicker
       <DerivedAccountPickerBase
         accounts={accounts}
         withBalances={withBalances}
+        addressPrefix={chain?.prefix}
         disablePaging={isBusy}
         canPageBack={pageIndex > 0}
         onAccountClick={handleToggleAccount}