diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index 88a409aae9..b14d882707 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -19,6 +19,7 @@ import { BN_ZERO, isFunction } from '@polkadot/util'; import CreateModal from '../modals/Create.js'; import ImportModal from '../modals/Import.js'; import Ledger from '../modals/Ledger.js'; +import Local from '../modals/LocalAdd.js'; import Multisig from '../modals/MultisigCreate.js'; import Proxy from '../modals/ProxiedAdd.js'; import Qr from '../modals/Qr.js'; @@ -44,17 +45,18 @@ interface SortControls { sortFromMax: boolean; } -type GroupName = 'accounts' | 'hardware' | 'injected' | 'multisig' | 'proxied' | 'qr' | 'testing'; +type GroupName = 'accounts' | 'chopsticks' | 'hardware' | 'injected' | 'multisig' | 'proxied' | 'qr' | 'testing'; const DEFAULT_SORT_CONTROLS: SortControls = { sortBy: 'date', sortFromMax: true }; const STORE_FAVS = 'accounts:favorites'; -const GROUP_ORDER: GroupName[] = ['accounts', 'injected', 'qr', 'hardware', 'proxied', 'multisig', 'testing']; +const GROUP_ORDER: GroupName[] = ['accounts', 'injected', 'qr', 'hardware', 'proxied', 'multisig', 'testing', 'chopsticks']; function groupAccounts (accounts: SortedAccount[]): Record { const ret: Record = { accounts: [], + chopsticks: [], hardware: [], injected: [], multisig: [], @@ -77,6 +79,8 @@ function groupAccounts (accounts: SortedAccount[]): Record ret.multisig.push(address); } else if (cryptoType === 'proxied') { ret.proxied.push(address); + } else if (cryptoType === 'chopsticks') { + ret.chopsticks.push(address); } else if (cryptoType === 'qr') { ret.qr.push(address); } else { @@ -89,7 +93,7 @@ function groupAccounts (accounts: SortedAccount[]): Record function Overview ({ className = '', onStatusChange }: Props): React.ReactElement { const { t } = useTranslation(); - const { api, isElectron } = useApi(); + const { api, fork, isElectron } = useApi(); const { allAccounts, hasAccounts } = useAccounts(); const { isIpfs } = useIpfs(); const { isLedgerEnabled } = useLedger(); @@ -98,6 +102,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen const [isLedgerOpen, toggleLedger] = useToggle(); const [isMultisigOpen, toggleMultisig] = useToggle(); const [isProxyOpen, toggleProxy] = useToggle(); + const [isLocalOpen, toggleLocal] = useToggle(); const [isQrOpen, toggleQr] = useToggle(); const [favorites, toggleFavorite] = useFavorites(STORE_FAVS); const [balances, setBalances] = useState({ accounts: {} }); @@ -197,6 +202,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen (): Record void)?][]> => { const ret: Record void)?][]> = { accounts: [[<>{t('accounts')}
{t('all locally stored accounts')}
]], + chopsticks: [[<>{t('chopsticks')}
{t('local accounts added via chopsticks fork')}
]], hardware: [[<>{t('hardware')}
{t('accounts managed via hardware devices')}
]], injected: [[<>{t('extension')}
{t('accounts available via browser extensions')}
]], multisig: [[<>{t('multisig')}
{t('on-chain multisig accounts')}
]], @@ -287,6 +293,12 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen {isLedgerOpen && ( )} + {isLocalOpen && ( + + )} {isMultisigOpen && ( )} + {fork && ( +