[NEB-248] Show native token balances in assets, show popular tokens on top

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx

@@ -3,14 +3,21 @@ 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,
   TokenProvider,
   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) => (
           <AssetItem
-            key={asset.token_address}
+            key={`${asset.chain_id}-${asset.token_address}`}
             asset={asset}
             client={props.client}
           />
@@ -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 (
     <TokenProvider
       address={props.asset.token_address}
@@ -88,7 +97,7 @@ function AssetItem(props: {
       <div className="relative flex h-[48px] items-center gap-2.5 rounded-lg px-2 py-1 hover:bg-accent">
         <div className="relative">
           <TokenIcon
-            className="size-8 rounded-full"
+            className="size-8 rounded-full border"
             loadingComponent={
               <Blobbie
                 address={props.asset.token_address}
@@ -102,18 +111,24 @@ function AssetItem(props: {
               />
             }
           />
-          <div className="-right-0.5 -bottom-0.5 absolute rounded-full border bg-background p-0.5">
-            <ChainIconClient
-              client={props.client}
-              className="size-3.5"
-              src={chainMeta?.icon?.url || ""}
-            />
-          </div>
+          {!isNativeToken && (
+            <div className="-right-0.5 -bottom-0.5 absolute rounded-full border bg-background p-0.5">
+              <ChainIconClient
+                client={props.client}
+                className="size-3.5"
+                src={chainMeta?.icon?.url || ""}
+              />
+            </div>
+          )}
         </div>
 
         <div className="flex min-w-0 flex-col text-sm">
           <Link
-            href={`https://thirdweb.com/${props.asset.chain_id}/${props.asset.token_address}`}
+            href={
+              isNativeToken
+                ? `https://thirdweb.com/${props.asset.chain_id}`
+                : `https://thirdweb.com/${props.asset.chain_id}/${props.asset.token_address}`
+            }
             target="_blank"
             className="truncate font-medium before:absolute before:inset-0"
           >
@@ -158,16 +173,84 @@ 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.all(
+        chains.map((chain) =>
+          getWalletBalance({
+            // eslint-disable-next-line no-restricted-syntax
+            chain: defineChain(chain),
+            client: props.client,
+            address: account.address,
+          }),
+        ),
+      );
+
+      return result
+        .map((r) => ({
+          chain_id: r.chainId,
+          token_address: r.tokenAddress,
+          balance: r.value.toString(),
+          name: r.name,
+          symbol: r.symbol,
+          decimals: r.decimals,
+        }))
+        .filter((x) => x.balance !== "0") as AssetBalance[];
+    },
+  });
+
+  const isPending = assetsQuery.isPending || nativeBalances.isPending;
+
+  const data = [...(nativeBalances.data ?? []), ...(assetsQuery.data ?? [])];
+
   return (
-    <AssetsSectionUI
-      data={assetsQuery.data ?? []}
-      isPending={assetsQuery.isPending}
-      client={props.client}
-    />
+    <AssetsSectionUI data={data} isPending={isPending} client={props.client} />
   );
 }