feat: use yttrium via walletkit for chain abstraction

advanced/wallets/react-wallet-v2/next.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   webpack(config) {
     config.resolve.fallback = {
       ...config.resolve.fallback,

advanced/wallets/react-wallet-v2/package.json

@@ -30,7 +30,7 @@
     "@polkadot/keyring": "^10.1.2",
     "@polkadot/types": "^9.3.3",
     "@reown/appkit-experimental": "1.6.8",
-    "@reown/walletkit": "1.0.0",
+    "@reown/walletkit": "1.1.2-canary-ca-1",
     "@rhinestone/module-sdk": "0.1.25",
     "@solana/web3.js": "1.89.2",
     "@taquito/signer": "^15.1.0",
@@ -63,7 +63,7 @@
     "tiny-secp256k1": "^2.2.3",
     "tronweb": "^4.4.0",
     "valtio": "1.13.2",
-    "viem": "2.17.8",
+    "viem": "2.23.2",
     "webauthn-p256": "0.0.2"
   },
   "devDependencies": {

advanced/wallets/react-wallet-v2/src/components/BridgeBadge.tsx

@@ -0,0 +1,26 @@
+import { Icon } from '@mui/material'
+import bridgeIcon from './../../public/bridge.png'
+
+export default function BridgeBadge() {
+  return (
+    <div
+      style={{
+        width: 27,
+        height: 27,
+        borderRadius: 12,
+        backgroundColor: '#363636',
+        flexDirection: 'row',
+        justifyContent: 'space-evenly'
+      }}
+    >
+      <img
+        style={{
+          width: 16,
+          height: 16,
+          margin: 5
+        }}
+        src="./../../bridge.png"
+      />
+    </div>
+  )
+}

advanced/wallets/react-wallet-v2/src/components/ChainAbstractionBalanceCard.tsx

@@ -11,7 +11,7 @@ import { Hex } from 'viem'
 
 export default function ChainAbstractionBalanceCard() {
   const { eip155Address } = useSnapshot(SettingsStore.state)
-  const [balances, setBalances] = useState<Record<string, Record<string, number>>>({})
+  const [balances, setBalances] = useState<Record<string, Record<string, string>>>({})
   const [totalBalance, setTotalBalance] = useState<Record<string, number>>({})
   const [loading, setLoading] = useState(true)
   useEffect(() => {
@@ -20,7 +20,7 @@ export default function ChainAbstractionBalanceCard() {
 
       const fetchedBalances: Record<string, any> = {}
       for (const asset of Object.keys(multibridgeSupportedAssets)) {
-        const assetBalances: Record<string, number> = {}
+        const assetBalances: Record<string, string> = {}
         for (const chainId of Object.keys(multibridgeSupportedAssets[asset])) {
           const tokenAddress = multibridgeSupportedAssets[asset][Number(chainId)]
           const balance = await getErc20TokenBalance(
@@ -43,7 +43,7 @@ export default function ChainAbstractionBalanceCard() {
     for (const asset of Object.keys(balances)) {
       let total = 0
       for (const chainBalance of Object.values(balances[asset])) {
-        total += chainBalance
+        total += parseFloat(chainBalance)
       }
       totalBalances[asset] = total
     }