Display usdc/t for main account

packages/ui/.papi/descriptors/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-autogenerated.16048031132384038004",
+  "version": "0.1.0-autogenerated.5905160511643341821",
   "name": "@polkadot-api/descriptors",
   "files": [
     "dist"

packages/ui/.papi/polkadot-api.json

@@ -22,22 +22,6 @@
       "chain": "polkadot_people",
       "metadata": ".papi/metadata/dotPpl.scale"
     },
-    "dotAssetHub": {
-      "chain": "polkadot_asset_hub",
-      "metadata": ".papi/metadata/dotAssetHub.scale"
-    },
-    "rococo": {
-      "chain": "rococo_v2_2",
-      "metadata": ".papi/metadata/rococo.scale"
-    },
-    "rococoAssetHub": {
-      "chain": "rococo_v2_2_asset_hub",
-      "metadata": ".papi/metadata/rococoAssetHub.scale"
-    },
-    "rococoPpl": {
-      "chain": "rococo_v2_2_people",
-      "metadata": ".papi/metadata/rococoPpl.scale"
-    },
     "bifrostDot": {
       "wsUrl": "wss://eu.bifrost-polkadot-rpc.liebi.com/ws",
       "metadata": ".papi/metadata/bifrostDot.scale"
@@ -69,6 +53,22 @@
     "wesPpl": {
       "wsUrl": "wss://westend-people-rpc.polkadot.io",
       "metadata": ".papi/metadata/wesPpl.scale"
+    },
+    "dotAssetHub": {
+      "chain": "polkadot_asset_hub",
+      "metadata": ".papi/metadata/dotAssetHub.scale"
+    },
+    "polimec": {
+      "wsUrl": "wss://polimec.ibp.network",
+      "metadata": ".papi/metadata/polimec.scale"
+    },
+    "coretimeDot": {
+      "wsUrl": "wss://polkadot-coretime-rpc.polkadot.io",
+      "metadata": ".papi/metadata/coretimeDot.scale"
+    },
+    "westend": {
+      "chain": "westend2",
+      "metadata": ".papi/metadata/westend.scale"
     }
   }
-}
+}

packages/ui/package.json

@@ -10,7 +10,7 @@
     "@mui/material": "^6.1.10",
     "@mui/styled-engine": "^6.1.10",
     "@polkadot-api/descriptors": "portal:.papi/descriptors",
-    "@polkadot-api/tx-utils": "^0.0.6",
+    "@polkadot-api/tx-utils": "^0.0.8",
     "@polkadot-labs/hdkd": "^0.0.10",
     "@polkadot-labs/hdkd-helpers": "^0.0.10",
     "@polkadot/react-identicon": "^3.11.3",
@@ -25,7 +25,7 @@
     "graphql-request": "^7.1.2",
     "graphql-ws": "^5.16.0",
     "json5": "^2.2.3",
-    "polkadot-api": "^1.7.7",
+    "polkadot-api": "^1.8.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "^5.4.0",

packages/ui/src/components/CallInfo.tsx

@@ -1,7 +1,7 @@
 import Expander from './Expander'
 import { styled } from '@mui/material/styles'
 import { ReactNode, useMemo } from 'react'
-import { ApiType, useApi } from '../contexts/ApiContext'
+import { IApiContext, useApi } from '../contexts/ApiContext'
 import { getExtrinsicName } from '../utils/getExtrinsicName'
 import { isProxyCall } from '../utils/isProxyCall'
 import { formatBigIntBalance } from '../utils/formatBnBalance'
@@ -29,7 +29,7 @@ interface CreateTreeParams {
   decimals: number
   unit: string
   name?: string
-  api: ApiType
+  api: IApiContext['api']
   chainInfo?: ChainInfoHuman
 }
 

packages/ui/src/components/EasySetup/BalancesTransfer.tsx

@@ -8,8 +8,8 @@ import { inputToBigInt, getGlobalMaxValue } from '../../utils/bnUtils'
 import { TextField } from '../library'
 import { getOptionLabel } from '../../utils/getOptionLabel'
 import { useAccountBaseFromAccountList } from '../../hooks/useAccountBaseFromAccountList'
-import { dot, hydration, MultiAddress } from '@polkadot-api/descriptors'
-import { Transaction, TypedApi } from 'polkadot-api'
+import { MultiAddress } from '@polkadot-api/descriptors'
+import { Transaction } from 'polkadot-api'
 import { useNetwork } from '../../contexts/NetworkContext'
 
 interface Props {
@@ -22,7 +22,7 @@ interface Props {
 const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }: Props) => {
   const accountBase = useAccountBaseFromAccountList({ withAccountsFromAddressBook: true })
   const [selected, setSelected] = useState<AccountBaseInfo | undefined>()
-  const { api, chainInfo } = useApi()
+  const { api, chainInfo, apiDescriptor } = useApi()
   const [amountString, setAmountString] = useState('')
   const [amount, setAmount] = useState<bigint | undefined>()
   const [amountError, setAmountError] = useState('')
@@ -54,18 +54,18 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
     }
 
     const extrinsic =
-      selectedNetwork === 'hydration'
-        ? (api as TypedApi<typeof hydration>).tx.Balances.transfer_keep_alive({
+      apiDescriptor === 'hydration'
+        ? api.tx.Balances.transfer_keep_alive({
             dest: toAddress,
             value: amount
           })
-        : (api as TypedApi<typeof dot>).tx.Balances.transfer_keep_alive({
+        : api.tx.Balances.transfer_keep_alive({
             dest: MultiAddress.Id(toAddress),
             value: amount
           })
 
     onSetExtrinsic(extrinsic)
-  }, [amount, api, chainInfo, onSetExtrinsic, selectedNetwork, toAddress])
+  }, [amount, api, apiDescriptor, chainInfo, onSetExtrinsic, selectedNetwork, toAddress])
 
   const onAddressDestChange = useCallback((account: AccountBaseInfo) => {
     setSelected(account)

packages/ui/src/components/library/AssetBalance.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles'
+import { useGetAssetBalance } from '../../hooks/useGetAssetBalance'
+
+interface BalanceProps {
+  address: string
+  assetId: number
+  logo: string
+}
+
+const AssetBalance = ({ address, assetId, logo }: BalanceProps) => {
+  const { balanceFormatted } = useGetAssetBalance({ address, assetId })
+
+  if (!balanceFormatted) return null
+
+  return (
+    <BalanceStyled>
+      <ImgStyled
+        src={logo}
+        alt="balance"
+      />
+      {balanceFormatted}
+    </BalanceStyled>
+  )
+}
+
+const BalanceStyled = styled('div')`
+  display: flex;
+  color: ${({ theme }) => theme.custom.gray[700]};
+  font-size: 1rem;
+  margin-top: 0.5rem;
+`
+
+const ImgStyled = styled('img')`
+  margin-right: 0.5rem;
+  width: 1.5rem;
+`
+export default AssetBalance

packages/ui/src/components/library/Balance.tsx

@@ -1,14 +1,26 @@
 import { styled } from '@mui/material/styles'
 import { useGetBalance } from '../../hooks/useGetBalance'
+import { chainsPolkadotCircleSVG } from '../../logos/polkadot-circleSVG'
 
 interface BalanceProps {
   address: string
+  withIcon?: boolean
 }
 
-const Balance = ({ address }: BalanceProps) => {
+const Balance = ({ address, withIcon = false }: BalanceProps) => {
   const { balanceFormatted } = useGetBalance({ address })
 
-  return <BalanceStyled>{balanceFormatted}</BalanceStyled>
+  return (
+    <BalanceStyled>
+      {withIcon && (
+        <ImgStyled
+          src={chainsPolkadotCircleSVG}
+          alt="balance"
+        />
+      )}
+      {balanceFormatted}
+    </BalanceStyled>
+  )
 }
 
 const BalanceStyled = styled('div')`
@@ -17,4 +29,8 @@ const BalanceStyled = styled('div')`
   font-size: 1rem;
 `
 
+const ImgStyled = styled('img')`
+  margin-right: 0.5rem;
+  width: 1.5rem;
+`
 export default Balance