Merge branch 'main' into yash/stylus-docs

kumaryash90 · web-flow · commit aaa796d43bad · 2025-05-16T02:49:38.000+05:30
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
@@ -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,25 +111,31 @@ 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"
           >
             {props.asset.name}
           </Link>
 
-          <p className="text-muted-foreground text-sm">
+          <p className="truncate text-muted-foreground text-sm">
             {`${toTokens(BigInt(props.asset.balance), props.asset.decimals)} ${props.asset.symbol}`}
           </p>
         </div>
@@ -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 (
-    <AssetsSectionUI
-      data={assetsQuery.data ?? []}
-      isPending={assetsQuery.isPending}
-      client={props.client}
-    />
+    <AssetsSectionUI data={data} isPending={isPending} client={props.client} />
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.tsx
@@ -88,7 +88,7 @@ function TransactionInfo(props: {
     <div className="relative flex h-[48px] items-center gap-2.5 rounded-lg px-2 py-1 hover:bg-accent">
       <ChainIconClient
         client={props.client}
-        className="size-8"
+        className="size-8 rounded-full border"
         src={chainMeta?.icon?.url || ""}
       />
 
@@ -167,20 +167,29 @@ export function TransactionsSection(props: {
       const url = new URL(
         `https://insight.${isProd ? "thirdweb" : "thirdweb-dev"}.com/v1/wallets/${account.address}/transactions`,
       );
-      url.searchParams.set("limit", "10");
+      url.searchParams.set("limit", "20");
       url.searchParams.set("decode", "true");
       url.searchParams.set("clientId", nebulaAppThirdwebClient.clientId);
 
+      const threeMonthsAgoUnixTime = Math.floor(
+        (Date.now() - 3 * 30 * 24 * 60 * 60 * 1000) / 1000,
+      );
+
+      url.searchParams.set(
+        "filter_block_timestamp_gte",
+        `${threeMonthsAgoUnixTime}`,
+      );
+
       for (const chain of chains) {
         url.searchParams.append("chain", chain.toString());
       }
 
       const response = await fetch(url.toString());
       const json = (await response.json()) as {
-        data: WalletTransaction[];
+        data?: WalletTransaction[];
       };
 
-      return json.data;
+      return json.data ?? [];
     },
     retry: false,
     enabled: !!account && !!activeChain,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
@@ -3,7 +3,7 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useId, useMemo } from "react";
 import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import type { UniversalBridgeWalletStats } from "types/analytics";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
 
 type GraphDataItem = {
   date: string;
@@ -20,7 +20,7 @@ export function PayNewCustomers(props: {
   /**
    * For each date, compute the total number of wallets that have never existed before in the time series
    */
-  const { graphData, trend } = useMemo(() => {
+  const { graphData } = useMemo(() => {
     const dates = new Set<string>();
     for (const item of props.data) {
       if (!dates.has(item.date)) {
@@ -47,19 +47,7 @@ export function PayNewCustomers(props: {
         value: newUsers,
       });
     }
-    const lastPeriod = newUsersData[newUsersData.length - 3];
-    const currentPeriod = newUsersData[newUsersData.length - 2];
-    // Calculate the percent change from last period to current period
-    const trend =
-      lastPeriod &&
-      currentPeriod &&
-      lastPeriod.value > 0 &&
-      currentPeriod.value > 0
-        ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
-          ? 100
-          : undefined;
-    return { graphData: newUsersData, trend };
+    return { graphData: newUsersData };
   }, [props.data, props.dateFormat]);
   const isEmpty = useMemo(
     () => graphData.length === 0 || graphData.every((x) => x.value === 0),
@@ -89,17 +77,6 @@ export function PayNewCustomers(props: {
                 );
               }}
             />
-
-            {!isEmpty && typeof trend !== "undefined" && (
-              <SkeletonContainer
-                loadedData={trend}
-                className="rounded-2xl"
-                skeletonData={1}
-                render={(v) => {
-                  return <ChangeBadge percent={v} />;
-                }}
-              />
-            )}
           </div>
         </div>
       </div>
@@ -125,7 +102,7 @@ export function PayNewCustomers(props: {
                       {payload?.date}
                     </p>
                     <p className="text-base text-medium">
-                      Customers: {payload?.value}
+                      New Customers: {payload?.value}
                     </p>
                   </div>
                 );
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import type { UniversalBridgeStats } from "types/analytics";
 import { toUSD } from "../../../../utils/number";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
 
 type GraphData = {
   date: string;
@@ -24,7 +24,7 @@ export function Payouts(props: {
     props.data.every((x) => x.developerFeeUsdCents === 0);
 
   const barColor = isEmpty ? "hsl(var(--accent))" : "hsl(var(--chart-1))";
-  const { graphData, totalPayoutsUSD, trend } = useMemo(() => {
+  const { graphData, totalPayoutsUSD } = useMemo(() => {
     const dates = new Set<string>();
     for (const item of props.data) {
       if (!dates.has(item.date)) {
@@ -49,21 +49,9 @@ export function Payouts(props: {
         value: total / 100,
       });
     }
-    const lastPeriod = cleanedData[cleanedData.length - 3];
-    const currentPeriod = cleanedData[cleanedData.length - 2];
-    const trend =
-      lastPeriod &&
-      currentPeriod &&
-      lastPeriod.value > 0 &&
-      currentPeriod.value > 0
-        ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
-          ? 100
-          : undefined;
     return {
       graphData: cleanedData,
       totalPayoutsUSD: totalPayouts / 100,
-      trend,
     };
   }, [props.data, props.dateFormat]);
 
@@ -93,17 +81,6 @@ export function Payouts(props: {
               );
             }}
           />
-
-          {!isEmpty && typeof trend !== "undefined" && (
-            <SkeletonContainer
-              className="rounded-2xl"
-              loadedData={trend}
-              skeletonData={1}
-              render={(percent) => {
-                return <ChangeBadge percent={percent} />;
-              }}
-            />
-          )}
         </div>
 
         <div className="relative flex w-full justify-center">
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
