fix: small fixes (#1249)

* fix: ui bug when more than 9 accounts connected

* fix: `TS Expression produces a union type that is too complex to represent` error

apps/portal/src/components/molecules/WalletConnectionButton.tsx

@@ -35,7 +35,8 @@ export const WalletConnectionButton = () => {
         <div className="whitespace-pre text-xl leading-none">
           {hasActiveConnection ? (
             <div className="flex items-center gap-1">
-              <div className="w-[1rem]">{accounts.length}</div>Connected
+              <span>{accounts.length}</span>
+              <span>Connected</span>
             </div>
           ) : (
             <div>Connect wallet</div>

apps/portal/src/components/widgets/swap/SwapTokensModal.tsx

@@ -13,7 +13,8 @@ import { Globe, X } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { isAddress } from 'viem'
-import * as allChains from 'viem/chains'
+import { type Chain as ViemChain } from 'viem/chains'
+import * as allEvmChains from 'viem/chains'
 
 import { useDebounce } from '@/hooks/useDebounce'
 import { cn } from '@/util/cn'
@@ -331,7 +332,8 @@ export const SwapTokensModal: React.FC<Props> = ({
                             substrateAddress={substrateAddress}
                             balance={balances?.[asset.id]}
                             explorerUrl={
-                              Object.values(allChains).find(c => c.id === +asset.chainId)?.blockExplorers?.default.url
+                              Object.values(allEvmChains).find((c: ViemChain) => c.id === +asset.chainId)
+                                ?.blockExplorers?.default.url
                             }
                             onClick={handleSelectAsset}
                           />

apps/portal/src/components/widgets/swap/swap-balances.api.ts

@@ -2,7 +2,8 @@ import { chainsAtom, evmNetworksAtom } from '@talismn/balances-react'
 import { atom } from 'jotai'
 import { atomFamily } from 'jotai/utils'
 import { createPublicClient, http } from 'viem'
-import * as chains from 'viem/chains'
+import { type Chain as ViemChain } from 'viem/chains'
+import * as allEvmChains from 'viem/chains'
 
 import { substrateApiGetterAtom } from '@/domains/common/recoils/api'
 import { computeSubstrateBalance } from '@/util/balances'
@@ -52,7 +53,7 @@ const evmBalancesAtom = atomFamily((chainId: string) =>
       const evmNetworks = await get(evmNetworksAtom)
       const network = evmNetworks.find(network => network.id.toString() === chainId.toString())
       const rpc = network?.rpcs?.[1] ?? network?.rpcs?.[0]
-      const chain = Object.values(chains).find(chain => chain.id.toString() === chainId)
+      const chain: ViemChain | undefined = Object.values(allEvmChains).find(chain => chain.id.toString() === chainId)
       if (!rpc || !chain) return { balances: {} }
 
       // make multicall request here

apps/portal/src/components/widgets/swap/swap-modules/chainflip.swap-module.ts

@@ -7,6 +7,7 @@ import type {
   SwapStatusResponse,
 } from '@chainflip/sdk/swap'
 import type { Getter, Setter } from 'jotai'
+import type { Chain as ViemChain } from 'viem/chains'
 import { Asset, SwapSDK } from '@chainflip/sdk/swap'
 import { chainsAtom } from '@talismn/balances-react'
 import { atom } from 'jotai'
@@ -44,7 +45,7 @@ import {
 const PROTOCOL: SupportedSwapProtocol = 'chainflip'
 const PROTOCOL_NAME = 'Chainflip'
 const DECENTRALISATION_SCORE = 2
-const EVM_CHAINS = [mainnet, sepolia, arbitrum]
+const EVM_CHAINS: ViemChain[] = [mainnet, sepolia, arbitrum]
 
 const CHAINFLIP_CHAIN_TO_ID_MAP: Record<Chain, string> = {
   Arbitrum: '42161',

apps/portal/src/components/widgets/swap/swap-modules/common.swap-module.ts

@@ -3,6 +3,7 @@
 import type { BaseWallet } from '@polkadot-onboard/core'
 import type { Signer, SubmittableExtrinsic } from '@polkadot/api/types'
 import type { Atom, Getter, SetStateAction, Setter } from 'jotai'
+import type { Chain as ViemChain } from 'viem/chains'
 import { ApiPromise } from '@polkadot/api'
 import { isAddress as isSubstrateAddress } from '@polkadot/util-crypto'
 import { evmErc20TokenId, evmNativeTokenId, subNativeTokenId } from '@talismn/balances'
@@ -19,7 +20,7 @@ import type { TransactionRequest, WalletClient } from 'viem'
 import { isAddress } from 'viem'
 import { arbitrum, blast, bsc, mainnet, manta, moonbeam, moonriver, optimism, polygon } from 'viem/chains'
 
-export const supportedEvmChains = {
+export const supportedEvmChains: Record<string, ViemChain> = {
   eth: mainnet,
   bsc: bsc,
   arbitrum: arbitrum,

apps/portal/src/components/widgets/swap/swap-modules/lifi.swap-module.ts

@@ -4,6 +4,7 @@ import { evmNetworksByIdAtom } from '@talismn/balances-react'
 import { atom, Getter, Setter } from 'jotai'
 import { atomFamily, loadable } from 'jotai/utils'
 import { zeroAddress } from 'viem'
+import { type Chain as ViemChain } from 'viem/chains'
 import * as allEvmChains from 'viem/chains'
 
 import { Decimal } from '@/util/Decimal'
@@ -218,7 +219,7 @@ const swap: SwapFunction<{ id: string }> = async (get: Getter, _: Setter, { evmW
   if (txRequest.from.toLowerCase() !== evmWalletClient.account?.address.toLowerCase())
     throw new Error('Invalid sender address')
 
-  const chain = Object.values(allEvmChains).find(c => c.id === txRequest.chainId)
+  const chain: ViemChain | undefined = Object.values(allEvmChains).find(c => c.id === txRequest.chainId)
   if (!chain) throw new Error('Unknown chain')
 
   await evmWalletClient.switchChain({ id: chain.id })

apps/portal/src/components/widgets/swap/swaps.api.ts

@@ -9,6 +9,7 @@ import { Loadable } from 'jotai/vanilla/utils/loadable'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useRecoilCallback, useRecoilValue } from 'recoil'
 import { createPublicClient, erc20Abi, http, isAddress } from 'viem'
+import { type Chain as ViemChain } from 'viem/chains'
 import * as allEvmChains from 'viem/chains'
 import { useWalletClient } from 'wagmi'
 
@@ -285,7 +286,7 @@ const erc20Atom = atomFamily((addressChainId: string) =>
     const isValidAddress = isAddress(address)
     if (!isValidAddress || isNaN(chainId)) return null
 
-    const chain = Object.values(allEvmChains).find(c => c.id === chainId)
+    const chain: ViemChain | undefined = Object.values(allEvmChains).find(c => c.id === chainId)
     if (!chain) return null
     const platforms = await get(coingeckoAssetPlatformsAtom)
     const platform = platforms.find(p => p.chain_identifier === chainId)