diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx index 5ae31714b9b..f0bbe25c84f 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx @@ -3,7 +3,13 @@ import { isProd } from "@/constants/env-utils"; import { useQuery } from "@tanstack/react-query"; import { XIcon } from "lucide-react"; import Link from "next/link"; -import { type ThirdwebClient, defineChain, toTokens } from "thirdweb"; +import { + NATIVE_TOKEN_ADDRESS, + type ThirdwebClient, + defineChain, + getAddress, + toTokens, +} from "thirdweb"; import { Blobbie, TokenIcon, @@ -11,6 +17,7 @@ import { useActiveAccount, useActiveWalletChain, } from "thirdweb/react"; +import { getWalletBalance } from "thirdweb/wallets"; import { ChainIconClient } from "../../../../../components/icons/ChainIcon"; import { useAllChainsData } from "../../../../../hooks/chains/allChains"; import { nebulaAppThirdwebClient } from "../../utils/nebulaThirdwebClient"; @@ -45,7 +52,7 @@ export function AssetsSectionUI(props: { {!props.isPending && props.data.map((asset) => ( @@ -78,6 +85,8 @@ function AssetItem(props: { }) { const { idToChain } = useAllChainsData(); const chainMeta = idToChain.get(props.asset.chain_id); + const isNativeToken = props.asset.token_address === NATIVE_TOKEN_ADDRESS; + return (
} /> -
- -
+ {!isNativeToken && ( +
+ +
+ )}
{props.asset.name} -

+

{`${toTokens(BigInt(props.asset.balance), props.asset.decimals)} ${props.asset.symbol}`}

@@ -158,16 +173,85 @@ export function AssetsSection(props: { data: AssetBalance[]; }; - return json.data; + const tokensToShowOnTop = new Set( + [ + // base + "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913", // usdc, + "0x0555E30da8f98308EdB960aa94C0Db47230d2B9c", // wbtc + "0x4200000000000000000000000000000000000006", // wrapped eth + // ethereum + "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", // usdc + "0xdac17f958d2ee523a2206206994597c13d831ec7", // usdt + "0xB8c77482e45F1F44dE1745F52C74426C631bDD52", // bnb + "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", // weth + "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599", // wbtc + // optimism + "0x4200000000000000000000000000000000000042", // op token + "0xdc6ff44d5d932cbd77b52e5612ba0529dc6226f1", // world coin + "0x94b008aa00579c1307b0ef2c499ad98a8ce58e58", // usdt + "0x0b2c639c533813f4aa9d7837caf62653d097ff85", // usdc + "0x4200000000000000000000000000000000000006", // wrapped eth + // polygon + "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619", // weth + "0xc2132d05d31c914a87c6611c10748aeb04b58e8f", // usdt + "0x3BA4c387f786bFEE076A58914F5Bd38d668B42c3", // bnb + "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359", // usdc + "0x2791bca1f2de4661ed88a30c99a7a9449aa84174", // usdc.e + ].map((x) => getAddress(x)), + ); + + return json.data.sort((a, b) => { + if (tokensToShowOnTop.has(getAddress(a.token_address))) { + return -1; + } + if (tokensToShowOnTop.has(getAddress(b.token_address))) { + return 1; + } + return 0; + }); }, enabled: !!account && !!activeChain, }); + const nativeBalances = useQuery({ + queryKey: ["getWalletBalance", account?.address, activeChain?.id], + queryFn: async () => { + if (!account || !activeChain) { + return []; + } + + const chains = [...new Set([1, 8453, 10, 137, activeChain.id])]; + + const result = await Promise.allSettled( + chains.map((chain) => + getWalletBalance({ + // eslint-disable-next-line no-restricted-syntax + chain: defineChain(chain), + client: props.client, + address: account.address, + }), + ), + ); + + return result + .filter((r) => r.status === "fulfilled") + .map((r) => ({ + chain_id: r.value.chainId, + token_address: r.value.tokenAddress, + balance: r.value.value.toString(), + name: r.value.name, + symbol: r.value.symbol, + decimals: r.value.decimals, + })) + .filter((x) => x.balance !== "0") as AssetBalance[]; + }, + }); + + const isPending = assetsQuery.isPending || nativeBalances.isPending; + + const data = [...(nativeBalances.data ?? []), ...(assetsQuery.data ?? [])]; + return ( - + ); }