Skip to content

Commit

Permalink
display usdc/t for main account
Browse files Browse the repository at this point in the history
  • Loading branch information
Tbaut committed Jan 13, 2025
1 parent 6ce8c96 commit 4af2a1e
Show file tree
Hide file tree
Showing 20 changed files with 362 additions and 174 deletions.
2 changes: 1 addition & 1 deletion packages/ui/.papi/descriptors/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.1.0-autogenerated.16048031132384038004",
"version": "0.1.0-autogenerated.5929925895564698467",
"name": "@polkadot-api/descriptors",
"files": [
"dist"
Expand Down
Binary file modified packages/ui/.papi/metadata/bifrostDot.scale
Binary file not shown.
Binary file added packages/ui/.papi/metadata/coretimeDot.scale
Binary file not shown.
Binary file modified packages/ui/.papi/metadata/hydration.scale
Binary file not shown.
Binary file modified packages/ui/.papi/metadata/khala.scale
Binary file not shown.
Binary file modified packages/ui/.papi/metadata/paseo.scale
Binary file not shown.
Binary file modified packages/ui/.papi/metadata/phala.scale
Binary file not shown.
Binary file added packages/ui/.papi/metadata/polimec.scale
Binary file not shown.
Binary file modified packages/ui/.papi/metadata/wesPpl.scale
Binary file not shown.
30 changes: 13 additions & 17 deletions packages/ui/.papi/polkadot-api.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -69,6 +53,18 @@
"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"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
37 changes: 37 additions & 0 deletions packages/ui/src/components/library/AssetBalance.tsx
Original file line number Diff line number Diff line change
@@ -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
20 changes: 18 additions & 2 deletions packages/ui/src/components/library/Balance.tsx
Original file line number Diff line number Diff line change
@@ -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')`
Expand All @@ -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
28 changes: 17 additions & 11 deletions packages/ui/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,18 @@ import { chainsWatrPNG } from './logos/watrPNG'
import paseoSVG from './logos/paseoSVG.svg'
import { nodesCoretimeSVG } from './logos/coretimeSVG'
import { polimecSVG } from './logos/polimecSVG'
import usdc from './logos/usdc.svg'
import usdt from './logos/usdt.svg'

export const DAPP_NAME = 'Multix'
export const ICON_SIZE_LARGE = 92
export const ICON_SIZE_MEDIUM = 40
export const ICON_SIZE_SMALL = 30
export const DEFAULT_ICON_THEME = 'polkadot'
export const AH_SUPPORTED_ASSETS = [
{ assetId: 1984, logo: usdt },
{ assetId: 1337, logo: usdc }
]

export interface NetworkInfo {
chainId: string
Expand Down Expand Up @@ -103,15 +109,15 @@ export const networkList: Record<string, NetworkInfo> = {
httpGraphqlUrl: HTTP_GRAPHQL_URL,
logo: chainsKusamaSVG
},
'asset-hub-dot': {
'asset-hub-polkadot': {
chainId: 'asset-hub-polkadot',
explorerNetworkName: 'assethub-polkadot',
rpcUrls: [
// 'wss://asset-hub-polkadot-rpc.dwellir.com',
// 'wss://asset-hub-polkadot-rpc.dwellir.com'
// 'wss://statemint-rpc-tn.dwellir.com',
// 'wss://sys.ibp.network/asset-hub-polkadot',
'wss://sys.ibp.network/asset-hub-polkadot'
// 'wss://asset-hub-polkadot.dotters.network',
'wss://rpc-asset-hub-polkadot.luckyfriday.io'
// 'wss://rpc-asset-hub-polkadot.luckyfriday.io'
// 'wss://statemint.api.onfinality.io/public-ws',
// 'wss://polkadot-asset-hub-rpc.polkadot.io',
// 'wss://statemint.public.curie.radiumblock.co/ws',
Expand All @@ -121,7 +127,7 @@ export const networkList: Record<string, NetworkInfo> = {
httpGraphqlUrl: HTTP_GRAPHQL_URL,
logo: nodesAssetHubSVG
},
'asset-hub-ksm': {
'asset-hub-kusama': {
chainId: 'asset-hub-kusama',
explorerNetworkName: 'assethub-kusama',
rpcUrls: [
Expand All @@ -138,7 +144,7 @@ export const networkList: Record<string, NetworkInfo> = {
httpGraphqlUrl: HTTP_GRAPHQL_URL,
logo: nodesAssetHubSVG
},
'coretime-dot': {
'coretime-polkadot': {
chainId: 'coretime-polkadot',
explorerNetworkName: 'coretime-polkadot',
rpcUrls: [
Expand All @@ -150,7 +156,7 @@ export const networkList: Record<string, NetworkInfo> = {
httpGraphqlUrl: HTTP_GRAPHQL_URL,
logo: nodesCoretimeSVG
},
'coretime-ksm': {
'coretime-kusama': {
chainId: 'coretime-kusama',
explorerNetworkName: 'coretime-kusama',
rpcUrls: [
Expand Down Expand Up @@ -364,8 +370,8 @@ export const networkList: Record<string, NetworkInfo> = {

export const polkadotNetworksAndParachains: Partial<keyof typeof networkList>[] = [
'polkadot',
'asset-hub-dot',
'coretime-dot',
'asset-hub-polkadot',
'coretime-polkadot',
'acala',
// 'astar',
'bifrost-dot',
Expand All @@ -380,8 +386,8 @@ export const polkadotNetworksAndParachains: Partial<keyof typeof networkList>[]
]
export const kusamaNetworksAndParachains: Partial<keyof typeof networkList>[] = [
'kusama',
'asset-hub-ksm',
// 'coretime-ksm'
'asset-hub-kusama',
// 'coretime-kusama'
// 'amplitude',
'khala'
// 'moonriver'
Expand Down
20 changes: 16 additions & 4 deletions packages/ui/src/contexts/ApiContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ import {
ksmAssetHub,
// ksmPpl,
paseo,
phala
phala,
polimec,
coretimeDot
// rhala,
// rococo,
// rococoAssetHub,
Expand Down Expand Up @@ -45,6 +47,8 @@ export type ApiType = TypedApi<
// | typeof rococoAssetHub
// | typeof rococoPpl
| typeof paseo
| typeof polimec
| typeof coretimeDot
>

export interface IApiContext {
Expand Down Expand Up @@ -73,6 +77,7 @@ const ApiContextProvider = ({ children }: ApiContextProps) => {
useEffect(() => {
if (!selectedNetworkInfo) return

console.log('selectedNetworkInfo', selectedNetworkInfo?.chainId)
let cl: PolkadotClient
let typedApi: ApiType

Expand All @@ -81,11 +86,11 @@ const ApiContextProvider = ({ children }: ApiContextProps) => {
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(ksm)
break
case 'asset-hub-dot':
case 'asset-hub-polkadot':
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(dotAssetHub)
break
case 'asset-hub-ksm':
case 'asset-hub-kusama':
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(ksmAssetHub)
break
Expand Down Expand Up @@ -125,7 +130,14 @@ const ApiContextProvider = ({ children }: ApiContextProps) => {
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(paseo)
break

case 'polimec':
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(polimec)
break
case 'coretime-polkadot':
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(coretimeDot)
break
default:
cl = createClient(withPolkadotSdkCompat(getWsProvider(selectedNetworkInfo.rpcUrls)))
typedApi = cl.getTypedApi(dot)
Expand Down
55 changes: 55 additions & 0 deletions packages/ui/src/hooks/useGetAssetBalance.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useEffect, useState } from 'react'
import { useApi } from '../contexts/ApiContext'
import { formatBigIntBalance } from '../utils/formatBnBalance'
import { dotAssetHub, DotAssetHubQueries } from '@polkadot-api/descriptors'
import { TypedApi } from 'polkadot-api'

interface useGetBalanceProps {
address?: string
numberAfterComma?: number
assetId: number
}

export const useGetAssetBalance = ({
address,
numberAfterComma = 4,
assetId
}: useGetBalanceProps) => {
const { api } = useApi()
const [balance, setBalance] = useState<bigint | null>(null)
const [balanceFormatted, setFormattedBalance] = useState<string | null>(null)
const [assetMetadata, setAssetMetadata] = useState<
DotAssetHubQueries['Assets']['Metadata']['Value'] | null
>(null)

useEffect(() => {
if (!api || !assetId) return
;(api as TypedApi<typeof dotAssetHub>).query.Assets.Metadata.getValue(assetId)
.then(setAssetMetadata)
.catch(console.error)
}, [api, assetId])

useEffect(() => {
if (!api || !address || !assetMetadata || !assetId) return

const unsub = (api as TypedApi<typeof dotAssetHub>).query.Assets.Account.watchValue(
assetId,
address,
'best'
).subscribe((res) => {
const balance = res?.balance || 0n

setBalance(balance)
setFormattedBalance(
formatBigIntBalance(balance, assetMetadata.decimals, {
numberAfterComma,
tokenSymbol: assetMetadata.symbol.asText()
})
)
})

return () => unsub && unsub.unsubscribe()
}, [address, api, assetId, assetMetadata, numberAfterComma])

return { balance, balanceFormatted }
}
5 changes: 5 additions & 0 deletions packages/ui/src/logos/usdc.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/ui/src/logos/usdt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 21 additions & 1 deletion packages/ui/src/pages/Home/HeaderView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,19 @@ import { Balance, ButtonWithIcon } from '../../components/library'
import { HiOutlineArrowLongRight } from 'react-icons/hi2'
import { createSearchParams, useNavigate, useSearchParams } from 'react-router'
import { useMemo } from 'react'
import { useNetwork } from '../../contexts/NetworkContext'
import AssetBalance from '../../components/library/AssetBalance'
import { AH_SUPPORTED_ASSETS } from '../../constants'

const HeaderView = () => {
const { selectedNetwork } = useNetwork()
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const { selectedMultiProxy, selectedHasProxy, selectedIsWatched } = useMultiProxy()
const isAssetHub = useMemo(
() => selectedNetwork === 'asset-hub-polkadot' || selectedNetwork === 'asset-hub-kusama',
[selectedNetwork]
)

const selectedAddress = useMemo(() => {
return selectedHasProxy ? selectedMultiProxy?.proxy : selectedMultiProxy?.multisigs[0].address
Expand Down Expand Up @@ -47,7 +55,19 @@ const HeaderView = () => {
<BalanceStyled>
<BalanceHeaderStyled>Balance</BalanceHeaderStyled>
<BalanceAmountStyled data-cy="label-account-balance">
<Balance address={selectedAddress} />
<Balance
address={selectedAddress}
withIcon={isAssetHub}
/>
{isAssetHub &&
AH_SUPPORTED_ASSETS.map(({ assetId, logo }) => (
<AssetBalance
key={assetId}
address={selectedAddress}
assetId={assetId}
logo={logo}
/>
))}
</BalanceAmountStyled>
</BalanceStyled>
</BalanceStyledWrapper>
Expand Down
Loading

0 comments on commit 4af2a1e

Please sign in to comment.