feat(refactor): Use latest w3ux packages, fix breaking changes (#276)

polkadot-cloud · Nov 3, 2024 · b316a5d · b316a5d
2 parents 91425e6 + b2588b8
commit b316a5d
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 57 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -31,12 +31,12 @@
     "@polkadot/util-crypto": "^13.2.2",
     "@tanstack/react-query": "^5.53.3",
     "@w3ux/extension-assets": "^0.4.0",
-    "@w3ux/factories": "^1.0.0-beta.0",
-    "@w3ux/hooks": "^1.1.1",
+    "@w3ux/factories": "^1.0.0",
+    "@w3ux/hooks": "^1.2.1",
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
-    "@w3ux/react-polkicon": "^1.3.0",
-    "@w3ux/utils": "^0.9.1",
+    "@w3ux/react-polkicon": "^2.0.1-alpha.0",
+    "@w3ux/utils": "^1.1.0",
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/universal-provider": "^2.15.2",
     "@walletconnect/utils": "^2.15.3",

diff --git a/packages/app/src/library/ConnectOverlay/ManageLedger.tsx b/packages/app/src/library/ConnectOverlay/ManageLedger.tsx
@@ -7,7 +7,7 @@ import type {
   LedgerAddress,
 } from '@w3ux/react-connect-kit/types';
 import { Polkicon } from '@w3ux/react-polkicon';
-import { ellipsisFn, remToUnit, setStateWithRef } from '@w3ux/utils';
+import { ellipsisFn, setStateWithRef } from '@w3ux/utils';
 import { NetworkDirectory } from 'config/networks';
 import type { DirectoryId } from 'config/networks/types';
 import { HardwareAddress } from 'library/HardwareAddress';
@@ -300,9 +300,7 @@ export const ManageLedger = ({
             address={address}
             index={0}
             initial={name}
-            Identicon={
-              <Polkicon address={address} size={remToUnit('2.1rem')} />
-            }
+            Identicon={<Polkicon address={address} fontSize="2.1rem" />}
             existsHandler={ledgerAccountExists}
             renameHandler={handleRename}
             onRemove={handleRemove}

diff --git a/packages/app/src/library/ConnectOverlay/ManageVault.tsx b/packages/app/src/library/ConnectOverlay/ManageVault.tsx
@@ -15,7 +15,6 @@ import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { QrReader } from './QrReader';
 import { useVaultAccounts } from '@w3ux/react-connect-kit';
 import type { VaultAccount } from '@w3ux/react-connect-kit/types';
-import { remToUnit } from '@w3ux/utils';
 import { NetworkDirectory } from 'config/networks';
 
 export const ManageVault = ({
@@ -133,9 +132,7 @@ export const ManageVault = ({
             address={address}
             index={i}
             initial={name}
-            Identicon={
-              <Polkicon address={address} size={remToUnit('2.1rem')} />
-            }
+            Identicon={<Polkicon address={address} fontSize="2.1rem" />}
             existsHandler={vaultAccountExists}
             renameHandler={handleRename}
             onRemove={handleRemove}

diff --git a/packages/app/src/library/ConnectOverlay/ManageWalletConnect.tsx b/packages/app/src/library/ConnectOverlay/ManageWalletConnect.tsx
@@ -14,7 +14,6 @@ import { faSquareMinus } from '@fortawesome/free-solid-svg-icons';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { useWcAccounts } from '@w3ux/react-connect-kit';
 import type { WCAccount } from '@w3ux/react-connect-kit/types';
-import { remToUnit } from '@w3ux/utils';
 import { NetworkDirectory } from 'config/networks';
 import { useWalletConnect } from 'contexts/WalletConnect';
 import { useChainSpaceEnv } from 'contexts/ChainSpaceEnv';
@@ -206,9 +205,7 @@ export const ManageWalletConnect = ({
             address={address}
             index={i}
             initial={name}
-            Identicon={
-              <Polkicon address={address} size={remToUnit('2.1rem')} />
-            }
+            Identicon={<Polkicon address={address} fontSize="2.1rem" />}
             allowAction={false}
             existsHandler={wcAccountExists}
             renameHandler={handleRename}

diff --git a/packages/app/src/library/Inputs/AccountId32/ReadOnly.tsx b/packages/app/src/library/Inputs/AccountId32/ReadOnly.tsx
@@ -3,7 +3,7 @@
 
 import { Polkicon } from '@w3ux/react-polkicon';
 import { TextInputWrapper } from '../Wrappers';
-import { ellipsisFn, isValidAddress, remToUnit } from '@w3ux/utils';
+import { ellipsisFn, isValidAddress } from '@w3ux/utils';
 import type { AccountId32ReadOnlyProps } from './types';
 
 export const AccountId32ReadOnly = ({
@@ -28,8 +28,8 @@ export const AccountId32ReadOnly = ({
       <span className="icon">
         <Polkicon
           address={address}
-          size={remToUnit('1.5rem')}
-          outerColor="var(--background-primary)"
+          background="var(--background-primary)"
+          fontSize="1.5rem"
         />
       </span>
       <input

diff --git a/packages/app/src/library/Inputs/AccountId32/index.tsx b/packages/app/src/library/Inputs/AccountId32/index.tsx
@@ -8,12 +8,7 @@ import {
   TextInputWrapper,
 } from '../Wrappers';
 import { Polkicon } from '@w3ux/react-polkicon';
-import {
-  ellipsisFn,
-  isValidAddress,
-  remToUnit,
-  setStateWithRef,
-} from '@w3ux/utils';
+import { ellipsisFn, isValidAddress, setStateWithRef } from '@w3ux/utils';
 import { formatInputString } from 'Utils';
 import { SelectDropdown } from 'library/SelectDropdown';
 import type { AccountId32Props } from './types';
@@ -155,8 +150,8 @@ export const AccountId32 = ({
         <span className="icon">
           <Polkicon
             address={selectedAddress}
-            size={remToUnit('1.5rem')}
-            outerColor="var(--background-primary)"
+            background="var(--background-primary)"
+            fontSize="1.5rem"
           />
         </span>
 

diff --git a/packages/app/src/library/Tx/EstimatedTxFee/index.tsx b/packages/app/src/library/Tx/EstimatedTxFee/index.tsx
@@ -6,14 +6,17 @@ import { useTxMeta } from 'contexts/TxMeta';
 import { Wrapper } from './Wrapper';
 import type { EstimatedTxFeeProps } from './types';
 import { useExtrinsicData } from 'library/SubmitTx/ExtrinsicDataProvider';
+import BigNumber from 'bignumber.js';
 
 export const EstimatedTxFee = ({ format }: EstimatedTxFeeProps) => {
   const { getTxFee } = useTxMeta();
   const { instanceId, units, unit } = useExtrinsicData();
 
   const txFee = getTxFee(instanceId);
 
-  const txFeesUnit = planckToUnit(txFee, units).toFormat();
+  const txFeesUnit = new BigNumber(
+    planckToUnit(txFee.toString(), units).toString()
+  ).toFormat();
 
   return format === 'table' ? (
     <>

diff --git a/packages/app/src/routes/Common/Accounts/Account.tsx b/packages/app/src/routes/Common/Accounts/Account.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-developer-console authors & contributors
 // SPDX-License-Identifier: AGPL-3.0
 
-import { ellipsisFn, planckToUnit, remToUnit } from '@w3ux/utils';
+import { ellipsisFn, planckToUnit } from '@w3ux/utils';
 import type { AccountProps } from './types';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { useMenu } from 'contexts/Menu';
@@ -57,7 +57,7 @@ export const Account = ({
     <AccountWrapper>
       <div className="inner">
         <div className="icon">
-          <Polkicon address={address} size={remToUnit('1.9rem')} />
+          <Polkicon address={address} fontSize="1.9rem" />
         </div>
         <div className="content">
           {/* NOTE: Currently hiding menu on custom endpoint connections as there is no guarantee Subscan will have the connected chain supported. Once menu contains more links, this check can happen inside the menu. */}
@@ -118,7 +118,9 @@ export const Account = ({
           <div className="free">
             <h5>
               <span>Free:</span>{' '}
-              {planckToUnit(freePlanck, units).decimalPlaces(3).toFormat()}{' '}
+              {new BigNumber(planckToUnit(freePlanck.toString(), units))
+                .decimalPlaces(3)
+                .toFormat()}{' '}
               {unit}
             </h5>
           </div>

diff --git a/yarn.lock b/yarn.lock
@@ -1982,6 +1982,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polkadot-api/substrate-bindings@npm:^0.9.3":
+  version: 0.9.3
+  resolution: "@polkadot-api/substrate-bindings@npm:0.9.3"
+  dependencies:
+    "@noble/hashes": "npm:^1.4.0"
+    "@polkadot-api/utils": "npm:0.1.2"
+    "@scure/base": "npm:^1.1.7"
+    scale-ts: "npm:^1.6.1"
+  checksum: 10c0/d0b2e9adf3b28e7aaa1f52e26fd7b200defe1b83499450227289bff0ec784e7dab334e93dc8d989e10e31d6cbb3ac561afd50f1c25e54b9ddc2be02826ca43c2
+  languageName: node
+  linkType: hard
+
 "@polkadot-api/substrate-client@npm:0.0.1":
   version: 0.0.1
   resolution: "@polkadot-api/substrate-client@npm:0.0.1"
@@ -2088,12 +2100,12 @@ __metadata:
     "@polkadot/util-crypto": "npm:^13.2.2"
     "@tanstack/react-query": "npm:^5.53.3"
     "@w3ux/extension-assets": "npm:^0.4.0"
-    "@w3ux/factories": "npm:^1.0.0-beta.0"
-    "@w3ux/hooks": "npm:^1.1.1"
+    "@w3ux/factories": "npm:^1.0.0"
+    "@w3ux/hooks": "npm:^1.2.1"
     "@w3ux/react-connect-kit": "npm:^1.8.0"
     "@w3ux/react-odometer": "npm:^1.1.0"
-    "@w3ux/react-polkicon": "npm:^1.3.0"
-    "@w3ux/utils": "npm:^0.9.1"
+    "@w3ux/react-polkicon": "npm:^2.0.1-alpha.0"
+    "@w3ux/utils": "npm:^1.1.0"
     "@walletconnect/modal": "npm:^2.6.2"
     "@walletconnect/universal-provider": "npm:^2.15.2"
     "@walletconnect/utils": "npm:^2.15.3"
@@ -4151,6 +4163,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@w3ux/crypto@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@w3ux/crypto@npm:1.0.0"
+  dependencies:
+    blakejs: "npm:^1.2.1"
+  checksum: 10c0/c32d5ca52496d06a1e57d7dceb739c00cf099221a90998461827be6f685923a7b848f2c3d6b7c85839dcd307b08593a65b411d9e7b8a7ddf579fb8cadc02a00b
+  languageName: node
+  linkType: hard
+
 "@w3ux/extension-assets@npm:0.4.0, @w3ux/extension-assets@npm:^0.4.0":
   version: 0.4.0
   resolution: "@w3ux/extension-assets@npm:0.4.0"
@@ -4160,12 +4181,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@w3ux/factories@npm:^1.0.0-beta.0":
-  version: 1.0.0-beta.0
-  resolution: "@w3ux/factories@npm:1.0.0-beta.0"
+"@w3ux/factories@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@w3ux/factories@npm:1.0.0"
   peerDependencies:
     react: ^18
-  checksum: 10c0/1c2a8adb966300fe7e36410e4b91381221a70f2470dfa3c1b5612ddc2e84c4579b6928ac7d4c9cad34291b7d8e1cbc97cbba66ae46fd04627042df50e9646b66
+  checksum: 10c0/c1c02d40d60fc242cdec74be93f2d24b04f87ea908ef9a523ea3811bc13199d07941b267424b6316c2a4d2f003ad5a65a8aaf9937fe48a6da1dba2f7c36ef8a5
   languageName: node
   linkType: hard
 
@@ -4178,12 +4199,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@w3ux/hooks@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@w3ux/hooks@npm:1.1.1"
+"@w3ux/hooks@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@w3ux/hooks@npm:1.2.1"
   peerDependencies:
     react: ^18
-  checksum: 10c0/abd315cd4cd5cb45f5dd73d1d661e82de64230d0c9b167d5cb64c768044efc9a52c7a2fe0a88cc951072b2295835738fae05abd1a8f9ac2e07cb811dba184375
+  checksum: 10c0/542eae337e26c2202b53625ee7178bcf8fd748aac5b37c8851ef143251a09e37bf8a95916039661dcf76fe31004d3231c87d2dad6237251dc843351282173d72
   languageName: node
   linkType: hard
 
@@ -4209,13 +4230,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@w3ux/react-polkicon@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@w3ux/react-polkicon@npm:1.3.0"
+"@w3ux/react-polkicon@npm:^2.0.1-alpha.0":
+  version: 2.0.1-alpha.0
+  resolution: "@w3ux/react-polkicon@npm:2.0.1-alpha.0"
   dependencies:
-    "@w3ux/utils": "npm:^0.9.0"
-    framer-motion: "npm:^11.2.10"
-  checksum: 10c0/ebd40b62fcf985013b594c410fb2fa58c750eb7247811788afac48179508445c3167a23da63aa070fcf312ec0077f15ad67f919526f8aa63d1902a28989de342
+    "@polkadot-api/substrate-bindings": "npm:^0.9.3"
+    "@w3ux/crypto": "npm:1.0.0"
+  checksum: 10c0/4390646debb6f4f09717806a10ecb811d48e96c32ac7a958944e321a9c4b3330d538b154e7a23891b4808b764bf8525203c26d7075270a3b280504d14cda555e
   languageName: node
   linkType: hard
 
@@ -4237,14 +4258,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@w3ux/utils@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "@w3ux/utils@npm:0.9.1"
+"@w3ux/utils@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@w3ux/utils@npm:1.1.0"
   dependencies:
-    "@polkadot/util": "npm:^13.1.1"
-    "@polkadot/util-crypto": "npm:^13.1.1"
-    bignumber.js: "npm:^9.1.1"
-  checksum: 10c0/624ca3fd80cd5a0ed16b28342b41d643cc1aac7dbe68e00f3c4a9e460da21ac28d09e86582aad7c642e5907069c4544705c3bc638d836625916694e21774861c
+    "@polkadot-api/substrate-bindings": "npm:^0.9.3"
+  checksum: 10c0/98edea2d49ee40b3735a62d2f239b203d2bcfa643db5ddb9424c013dfb175afa940dc0c2752daace04e171d39db0a5e55c0f5674ac526918ead132a5878188dc
   languageName: node
   linkType: hard
 
@@ -5385,6 +5404,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"blakejs@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "blakejs@npm:1.2.1"
+  checksum: 10c0/c284557ce55b9c70203f59d381f1b85372ef08ee616a90162174d1291a45d3e5e809fdf9edab6e998740012538515152471dc4f1f9dbfa974ba2b9c1f7b9aad7
+  languageName: node
+  linkType: hard
+
 "bn.js@npm:^4.11.9":
   version: 4.12.0
   resolution: "bn.js@npm:4.12.0"
@@ -7300,7 +7326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^11.1.7, framer-motion@npm:^11.2.10":
+"framer-motion@npm:^11.1.7":
   version: 11.11.8
   resolution: "framer-motion@npm:11.11.8"
   dependencies:
@@ -10500,6 +10526,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scale-ts@npm:^1.6.1":
+  version: 1.6.1
+  resolution: "scale-ts@npm:1.6.1"
+  checksum: 10c0/bbcf476029095152189c5bd210922b43342e8bfb712bf56237de172d55b528e090419e80da67c627a8f706a228237346b82de527755d7f197bb4d822c6383dfd
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.23.2":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"