diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 2d7a81472f..d1085dc6d4 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -3,11 +3,12 @@ import type { SubmittableExtrinsic } from '@polkadot/api/types'; import type { DeriveBalancesAll, DeriveDemocracyLock } from '@polkadot/api-derive/types'; +import type { Ledger } from '@polkadot/ledger'; import type { ActionStatus } from '@polkadot/react-components/Status/types'; import type { ThemeDef } from '@polkadot/react-components/types'; import type { Option } from '@polkadot/types'; import type { ProxyDefinition, RecoveryConfig } from '@polkadot/types/interfaces'; -import type { KeyringAddress } from '@polkadot/ui-keyring/types'; +import type { KeyringAddress, KeyringJson$Meta } from '@polkadot/ui-keyring/types'; import type { Delegation } from '../types'; import BN from 'bn.js'; @@ -15,9 +16,8 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import styled, { ThemeContext } from 'styled-components'; import { ApiPromise } from '@polkadot/api'; -import { getLedger } from '@polkadot/react-api'; import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components'; -import { useAccountInfo, useApi, useCall, useToggle } from '@polkadot/react-hooks'; +import { useAccountInfo, useApi, useCall, useLedger, useToggle } from '@polkadot/react-hooks'; import { keyring } from '@polkadot/ui-keyring'; import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util'; @@ -74,6 +74,12 @@ function createClearDemocracyTx (api: ApiPromise, address: string, unlockableIds ); } +async function showLedgerAddress (getLedger: () => Ledger, meta: KeyringJson$Meta): Promise { + const ledger = getLedger(); + + await ledger.getAddress(true, meta.accountOffset as number || 0, meta.addressOffset as number || 0); +} + const transformRecovery = { transform: (opt: Option) => opt.unwrapOr(null) }; @@ -83,6 +89,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt const { theme } = useContext(ThemeContext); const { queueExtrinsic } = useContext(StatusContext); const api = useApi(); + const { getLedger } = useLedger(); const bestNumber = useCall(api.api.derive.chain.bestNumber); const balancesAll = useCall(api.api.derive.balances.all, [address]); const democracyLocks = useCall(api.api.derive.democracy?.locks, [address]); @@ -191,13 +198,11 @@ function Account ({ account: { address, meta }, className = '', delegation, filt // TODO: we should check the hardwareType from metadata here as well, // for now we are always assuming hardwareType === 'ledger' (): void => { - getLedger() - .getAddress(true, meta.accountOffset as number || 0, meta.addressOffset as number || 0) - .catch((error): void => { - console.error(`ledger: ${(error as Error).message}`); - }); + showLedgerAddress(getLedger, meta).catch((error): void => { + console.error(`ledger: ${(error as Error).message}`); + }); }, - [meta] + [getLedger, meta] ); if (!isVisible) { diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index ca602f3d87..82496a98ff 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -9,9 +9,8 @@ import BN from 'bn.js'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; -import { isLedger } from '@polkadot/react-api'; import { Button, Input, Table } from '@polkadot/react-components'; -import { useAccounts, useApi, useCall, useFavorites, useIpfs, useLoadingDelay, useToggle } from '@polkadot/react-hooks'; +import { useAccounts, useApi, useCall, useFavorites, useIpfs, useLedger, useLoadingDelay, useToggle } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { BN_ZERO } from '@polkadot/util'; @@ -49,6 +48,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen const { api } = useApi(); const { allAccounts, hasAccounts } = useAccounts(); const { isIpfs } = useIpfs(); + const { isLedgerEnabled } = useLedger(); const [isCreateOpen, toggleCreate] = useToggle(); const [isImportOpen, toggleImport] = useToggle(); const [isLedgerOpen, toggleLedger] = useToggle(); @@ -208,7 +208,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen label={t('Add via Qr')} onClick={toggleQr} /> - {isLedger() && ( + {isLedgerEnabled && ( <>