From 38b7ebc24cde8ad4a16b1ed06cfaec69e0210996 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 23 Jan 2021 15:30:37 +0100 Subject: [PATCH] Format multiple balances w/ properties (#4480) * Format mutiple balances w/ properties * Bump API * Update chainDecimals extraction * Fox bounties mock API * Expand rendering * Bumps --- package.json | 20 +- packages/apps-config/package.json | 2 +- packages/page-accounts/package.json | 2 +- packages/page-bounties/src/Bounties.spec.tsx | 28 +- packages/page-contracts/package.json | 2 +- packages/page-settings/src/useChainInfo.ts | 6 +- packages/page-settings/src/useExtensions.ts | 8 +- packages/react-api/package.json | 4 +- packages/react-api/src/Api.tsx | 20 +- packages/react-components/package.json | 6 +- packages/react-components/src/AddressInfo.tsx | 292 +++++++++--------- packages/react-components/src/InputNumber.tsx | 2 +- packages/react-query/src/FormatBalance.tsx | 37 ++- yarn.lock | 284 ++++++++--------- 14 files changed, 374 insertions(+), 339 deletions(-) diff --git a/package.json b/package.json index 4bf9f02e0a..02d3225c18 100644 --- a/package.json +++ b/package.json @@ -12,17 +12,17 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^3.5.2-10", - "@polkadot/api-contract": "^3.5.2-10", - "@polkadot/hw-ledger": "^5.3.2-7", - "@polkadot/keyring": "^5.3.2-7", - "@polkadot/networks": "^5.3.2-7", - "@polkadot/phishing": "^0.3.22", - "@polkadot/types": "^3.5.2-10", - "@polkadot/util": "^5.3.2-7", - "@polkadot/util-crypto": "^5.3.2-7", + "@polkadot/api": "^3.5.2-13", + "@polkadot/api-contract": "^3.5.2-13", + "@polkadot/hw-ledger": "^5.3.2-8", + "@polkadot/keyring": "^5.3.2-8", + "@polkadot/networks": "^5.3.2-8", + "@polkadot/phishing": "^0.3.23", + "@polkadot/types": "^3.5.2-13", + "@polkadot/util": "^5.3.2-8", + "@polkadot/util-crypto": "^5.3.2-8", "@polkadot/wasm-crypto": "^3.2.1", - "@polkadot/x-rxjs": "^5.3.2-7", + "@polkadot/x-rxjs": "^5.3.2-8", "babel-core": "^7.0.0-bridge.0", "styled-components": "^5.2.0", "typescript": "^4.1.3" diff --git a/packages/apps-config/package.json b/packages/apps-config/package.json index 3bb32788a5..231d601ca3 100644 --- a/packages/apps-config/package.json +++ b/packages/apps-config/package.json @@ -14,7 +14,7 @@ "@edgeware/node-types": "^3.2.0", "@interlay/polkabtc-types": "^0.3.1", "@laminar/type-definitions": "^0.2.0-beta.143", - "@polkadot/networks": "^5.3.2-7", + "@polkadot/networks": "^5.3.2-8", "@sora-substrate/type-definitions": "^0.3.5", "@subsocial/types": "^0.4.28", "moonbeam-types-bundle": "^1.0.6" diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json index 9d8a44e975..d12381b9b5 100644 --- a/packages/page-accounts/package.json +++ b/packages/page-accounts/package.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", - "@polkadot/phishing": "^0.3.22", + "@polkadot/phishing": "^0.3.23", "@polkadot/react-components": "^0.76.2-23", "@polkadot/vanitygen": "^0.25.2-2", "detect-browser": "^5.2.0", diff --git a/packages/page-bounties/src/Bounties.spec.tsx b/packages/page-bounties/src/Bounties.spec.tsx index 228ff4b7fa..5410b7a63e 100644 --- a/packages/page-bounties/src/Bounties.spec.tsx +++ b/packages/page-bounties/src/Bounties.spec.tsx @@ -101,20 +101,22 @@ describe('Bounties', () => { const renderBounties = (bountyApi: Partial = {}, { balance = 1 } = {}) => { mockBountyApi = { ...mockBountyApi, ...bountyApi }; mockBalance = balanceOf(balance); - const mockApi: ApiProps = { api: { - derive: { - accounts: { info: () => Promise.resolve(() => { /**/ }) } - }, - genesisHash: aGenesisHash(), - query: {}, - registry: { chainDecimals: 12 }, - tx: { - council: { - propose + const mockApi: ApiProps = { + api: { + derive: { + accounts: { info: () => Promise.resolve(() => { /**/ }) } + }, + genesisHash: aGenesisHash(), + query: {}, + registry: { chainDecimals: [12], chainTokens: ['Unit'] }, + tx: { + council: { + propose + } } - } - }, - systemName: 'substrate' } as unknown as ApiProps; + }, + systemName: 'substrate' + } as unknown as ApiProps; const queue = { queueExtrinsic diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json index 837539e16c..f66e8fc678 100644 --- a/packages/page-contracts/package.json +++ b/packages/page-contracts/package.json @@ -10,6 +10,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", - "@polkadot/api-contract": "^3.5.2-10" + "@polkadot/api-contract": "^3.5.2-13" } } diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts index 281298fc06..067be1fe44 100644 --- a/packages/page-settings/src/useChainInfo.ts +++ b/packages/page-settings/src/useChainInfo.ts @@ -10,7 +10,7 @@ import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config'; import { DEFAULT_DECIMALS, DEFAULT_SS58 } from '@polkadot/react-api'; import { useApi } from '@polkadot/react-hooks'; import { getSpecTypes } from '@polkadot/types-known'; -import { isNumber } from '@polkadot/util'; +import { formatBalance, isNumber } from '@polkadot/util'; function createInfo (api: ApiPromise, systemChain: string, systemName: string): ChainInfo { return { @@ -21,8 +21,8 @@ function createInfo (api: ApiPromise, systemChain: string, systemName: string): metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'), specVersion: api.runtimeVersion.specVersion.toNumber(), ss58Format: isNumber(api.registry.chainSS58) ? api.registry.chainSS58 : DEFAULT_SS58.toNumber(), - tokenDecimals: isNumber(api.registry.chainDecimals) ? api.registry.chainDecimals : DEFAULT_DECIMALS.toNumber(), - tokenSymbol: api.registry.chainToken || 'Unit', + tokenDecimals: (api.registry.chainDecimals || [DEFAULT_DECIMALS.toNumber()])[0], + tokenSymbol: (api.registry.chainTokens || formatBalance.getDefaults().unit)[0], types: getSpecTypes(api.registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record }; } diff --git a/packages/page-settings/src/useExtensions.ts b/packages/page-settings/src/useExtensions.ts index d1b414ef41..2dc8177f71 100644 --- a/packages/page-settings/src/useExtensions.ts +++ b/packages/page-settings/src/useExtensions.ts @@ -52,8 +52,8 @@ function saveProperties (api: ApiPromise, { name, version }: InjectedExtension): allProperties[name] = { extensionVersion: version, ss58Format: api.registry.chainSS58, - tokenDecimals: api.registry.chainDecimals, - tokenSymbol: api.registry.chainToken + tokenDecimals: api.registry.chainDecimals[0], + tokenSymbol: api.registry.chainTokens[0] }; store.set(storeKey, allProperties); @@ -73,8 +73,8 @@ function hasCurrentProperties (api: ApiPromise, { extension }: ExtensionKnown): const { ss58Format, tokenDecimals, tokenSymbol } = allProperties[extension.name]; return ss58Format === api.registry.chainSS58 && - tokenDecimals === api.registry.chainDecimals && - tokenSymbol === api.registry.chainToken; + tokenDecimals === api.registry.chainDecimals[0] && + tokenSymbol === api.registry.chainTokens[0]; } // filter extensions based on the properties we have available diff --git a/packages/react-api/package.json b/packages/react-api/package.json index d7510c000c..912f52202c 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -15,9 +15,9 @@ "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/react-api#readme", "dependencies": { "@babel/runtime": "^7.12.5", - "@polkadot/api": "^3.5.2-10", + "@polkadot/api": "^3.5.2-13", "@polkadot/extension-dapp": "^0.36.2-8", - "@polkadot/x-rxjs": "^5.3.2-7", + "@polkadot/x-rxjs": "^5.3.2-8", "fflate": "^0.6.0" } } diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx index 20e86077be..8aa4020b9a 100644 --- a/packages/react-api/src/Api.tsx +++ b/packages/react-api/src/Api.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2021 @polkadot/react-api authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type BN from 'bn.js'; import type { InjectedExtension } from '@polkadot/extension-inject/types'; import type { ChainProperties, ChainType } from '@polkadot/types/interfaces'; import type { KeyringStore } from '@polkadot/ui-keyring/types'; @@ -11,7 +12,7 @@ import store from 'store'; import { ApiPromise } from '@polkadot/api/promise'; import { deriveMapCache, setDeriveCache } from '@polkadot/api-derive/util'; -import { ethereumChains, POLKADOT_GENESIS, typesBundle, typesChain, typesSpec } from '@polkadot/apps-config'; +import { ethereumChains, typesBundle, typesChain, typesSpec } from '@polkadot/apps-config'; import { web3Accounts, web3Enable } from '@polkadot/extension-dapp'; import { TokenUnit } from '@polkadot/react-components/InputNumber'; import { StatusContext } from '@polkadot/react-components/Status'; @@ -53,6 +54,7 @@ interface ChainData { export const DEFAULT_DECIMALS = registry.createType('u32', 12); export const DEFAULT_SS58 = registry.createType('u32', addressDefaults.prefix); +export const DEFAULT_AUX = ['Aux1', 'Aux2', 'Aux3', 'Aux4', 'Aux5', 'Aux6', 'Aux7', 'Aux8', 'Aux9']; let api: ApiPromise; @@ -110,11 +112,7 @@ async function retrieve (api: ApiPromise, injectedPromise: Promise b.toNumber()), + unit: tokenSymbol[0].toString() }); - TokenUnit.setAbbr(tokenSymbol); + TokenUnit.setAbbr(tokenSymbol[0].toString()); // finally load the keyring isKeyringLoaded() || keyring.loadAll({ diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 7c120c195c..cbe5881fa3 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -12,15 +12,15 @@ "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/react-fontawesome": "^0.1.14", - "@polkadot/keyring": "^5.3.2-7", + "@polkadot/keyring": "^5.3.2-8", "@polkadot/react-api": "^0.76.2-23", "@polkadot/react-identicon": "^0.66.4-1", "@polkadot/react-qr": "^0.66.4-1", "@polkadot/react-query": "^0.76.2-23", "@polkadot/ui-keyring": "^0.66.4-1", "@polkadot/ui-settings": "^0.66.4-1", - "@polkadot/util": "^5.3.2-7", - "@polkadot/util-crypto": "^5.3.2-7", + "@polkadot/util": "^5.3.2-8", + "@polkadot/util-crypto": "^5.3.2-8", "chart.js": "^2.9.4", "codeflask": "^1.4.1", "i18next": "^19.8.4", diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx index 1a56ac6fad..c1b5869c09 100644 --- a/packages/react-components/src/AddressInfo.tsx +++ b/packages/react-components/src/AddressInfo.tsx @@ -216,162 +216,174 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop ); } -function createBalanceItems (index: number, lookup: Record, t: TFunction, { address, balanceDisplay, balancesAll, bestNumber, democracyLocks, isAllLocked, otherBonded, ownBonded, stakingInfo, withBalanceToggle }: { address: string; balanceDisplay: BalanceActiveType; balancesAll?: DeriveBalancesAll | DeriveBalancesAccountData; bestNumber: BlockNumber; democracyLocks?: DeriveDemocracyLock[]; isAllLocked: boolean; otherBonded: BN[]; ownBonded: BN; stakingInfo?: DeriveStakingAccount; withBalanceToggle: boolean }): React.ReactNode { - const allItems = ( - <> - {!withBalanceToggle && balancesAll && balanceDisplay.total && ( - <> -