thirdweb 5.105.9 → 5.105.10

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/fetchBalancesForWallet.tsx

@@ -1,282 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import type { Chain } from "../../../../../../../chains/types.js";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import { isInsightEnabled } from "../../../../../../../insight/common.js";
-import { getOwnedTokens } from "../../../../../../../insight/get-tokens.js";
-import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import {
-  type GetWalletBalanceResult,
-  getWalletBalance,
-} from "../../../../../../../wallets/utils/getWalletBalance.js";
-import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
-import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainMetadata } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
-import type {
-  SupportedTokens,
-  TokenInfo,
-} from "../../../../../../core/utils/defaultTokens.js";
-import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
-
-const CHUNK_SIZE = 5;
-
-function chunkChains<T>(chains: T[]): T[][] {
-  const chunks: T[][] = [];
-  for (let i = 0; i < chains.length; i += CHUNK_SIZE) {
-    chunks.push(chains.slice(i, i + CHUNK_SIZE));
-  }
-  return chunks;
-}
-
-type FetchBalancesParams = {
-  wallet: Wallet;
-  accountAddress: string | undefined;
-  sourceSupportedTokens: SupportedTokens;
-  toChain: Chain;
-  toToken: ERC20OrNativeToken;
-  mode: PayUIOptions["mode"];
-  client: ThirdwebClient;
-};
-
-export type TokenBalance = {
-  balance: GetWalletBalanceResult;
-  chain: Chain;
-  token: TokenInfo;
-};
-
-type WalletKey = {
-  id: WalletId;
-  address: string;
-};
-
-export function useWalletsAndBalances(props: {
-  sourceSupportedTokens: SupportedTokens;
-  toChain: Chain;
-  toToken: ERC20OrNativeToken;
-  mode: PayUIOptions["mode"];
-  client: ThirdwebClient;
-}) {
-  const activeAccount = useActiveAccount();
-  const connectedWallets = useConnectedWallets();
-  const chainInfo = useChainMetadata(props.toChain);
-
-  return useQuery({
-    enabled:
-      !!props.sourceSupportedTokens && !!chainInfo.data && !!activeAccount,
-    queryFn: async () => {
-      const entries = await Promise.all(
-        connectedWallets.map(async (wallet) => {
-          const balances = await fetchBalancesForWallet({
-            accountAddress: activeAccount?.address,
-            client: props.client,
-            mode: props.mode,
-            sourceSupportedTokens: props.sourceSupportedTokens || [],
-            toChain: props.toChain,
-            toToken: props.toToken,
-            wallet,
-          });
-          return [
-            {
-              address: wallet.getAccount()?.address || "",
-              id: wallet.id,
-            } as WalletKey,
-            balances,
-          ] as const;
-        }),
-      );
-      const map = new Map<WalletKey, TokenBalance[]>();
-      for (const entry of entries) {
-        map.set(entry[0], entry[1]);
-      }
-      return map;
-    },
-    queryKey: [
-      "wallets-and-balances",
-      props.sourceSupportedTokens,
-      props.toChain.id,
-      props.toToken,
-      props.mode,
-      activeAccount?.address,
-      connectedWallets.map((w) => w.getAccount()?.address),
-    ],
-  });
-}
-
-async function fetchBalancesForWallet({
-  wallet,
-  accountAddress,
-  sourceSupportedTokens,
-  toChain,
-  toToken,
-  mode,
-  client,
-}: FetchBalancesParams): Promise<TokenBalance[]> {
-  const account = wallet.getAccount();
-  if (!account) {
-    return [];
-  }
-
-  const balances: TokenBalance[] = [];
-
-  // 1. Resolve all unique chains in the supported token map
-  const uniqueChains = Object.keys(sourceSupportedTokens).map((id) =>
-    getCachedChain(Number(id)),
-  );
-
-  // 2. Check insight availability once per chain
-  const insightSupport = await Promise.all(
-    uniqueChains.map(async (c) => ({
-      chain: c,
-      enabled: await isInsightEnabled(c),
-    })),
-  );
-  const insightEnabledChains = insightSupport
-    .filter((c) => c.enabled)
-    .map((c) => c.chain);
-
-  // 3. ERC-20 balances for insight-enabled chains (batched 5 chains / call)
-  const insightChunks = chunkChains(insightEnabledChains);
-  await Promise.all(
-    insightChunks.map(async (chunk) => {
-      let owned: GetWalletBalanceResult[] = [];
-      let page = 0;
-      const limit = 100;
-
-      while (true) {
-        const batch = await getOwnedTokens({
-          chains: chunk,
-          client,
-          ownerAddress: account.address,
-          queryOptions: {
-            limit,
-            page,
-          },
-        }).catch((err) => {
-          console.error("error fetching balances from insight", err);
-          return [];
-        });
-
-        if (batch.length === 0) {
-          break;
-        }
-
-        owned = [...owned, ...batch];
-        page += 1;
-      }
-
-      for (const b of owned) {
-        const matching = sourceSupportedTokens[b.chainId]?.find(
-          (t) => t.address.toLowerCase() === b.tokenAddress.toLowerCase(),
-        );
-        if (matching && b.value > 0n) {
-          balances.push({
-            balance: b,
-            chain: getCachedChain(b.chainId),
-            token: matching,
-          });
-        }
-      }
-    }),
-  );
-
-  // 4. Build a token map that also includes the destination token so it can be used to pay
-  const destinationToken = isNativeToken(toToken)
-    ? {
-        address: NATIVE_TOKEN_ADDRESS,
-        icon: toChain.icon?.url,
-        name: toChain.nativeCurrency?.name || "",
-        symbol: toChain.nativeCurrency?.symbol || "",
-      }
-    : toToken;
-
-  const tokenMap: Record<number, TokenInfo[]> = {
-    ...sourceSupportedTokens,
-    [toChain.id]: [
-      destinationToken,
-      ...(sourceSupportedTokens[toChain.id] || []),
-    ],
-  };
-
-  // 5. Fallback RPC balances (native currency & ERC-20 that we couldn't fetch from insight)
-  const rpcCalls: Promise<void>[] = [];
-
-  for (const [chainIdStr, tokens] of Object.entries(tokenMap)) {
-    const chainId = Number(chainIdStr);
-    const chain = getCachedChain(chainId);
-
-    if (insightEnabledChains.some((c) => c.id === chainId)) {
-      continue;
-    }
-
-    for (const token of tokens) {
-      const isNative = isNativeToken(token);
-      const isAlreadyFetched = balances.some(
-        (b) =>
-          b.chain.id === chainId &&
-          b.token.address.toLowerCase() === token.address.toLowerCase(),
-      );
-      if (isAlreadyFetched) {
-        // ERC20 on insight-enabled chain already handled by insight call
-        continue;
-      }
-      rpcCalls.push(
-        (async () => {
-          try {
-            const balance = await getWalletBalance({
-              address: account.address,
-              chain,
-              client,
-              tokenAddress: isNative ? undefined : token.address,
-            });
-
-            const include =
-              token.address.toLowerCase() ===
-                destinationToken.address.toLowerCase() &&
-              chain.id === toChain.id
-                ? !(
-                    mode === "fund_wallet" && account.address === accountAddress
-                  ) && balance.value > 0n
-                : balance.value > 0n;
-
-            if (include) {
-              balances.push({ balance, chain, token });
-            }
-          } catch (err) {
-            console.warn(
-              `Failed to fetch RPC balance for ${token.symbol} on chain ${chainId}`,
-              err,
-            );
-          }
-        })(),
-      );
-    }
-  }
-
-  await Promise.all(rpcCalls);
-
-  // Remove duplicates (same chainId + token address)
-  {
-    const uniq: Record<string, TokenBalance> = {};
-    for (const b of balances) {
-      const k = `${b.chain.id}-${b.token.address.toLowerCase()}`;
-      if (!uniq[k]) {
-        uniq[k] = b;
-      }
-    }
-    balances.splice(0, balances.length, ...Object.values(uniq));
-  }
-  // 6. Sort so that the destination token always appears first, then tokens on the destination chain, then by chain id
-  balances.sort((a, b) => {
-    const destAddress = destinationToken.address;
-    if (a.chain.id === toChain.id && a.token.address === destAddress) return -1;
-    if (b.chain.id === toChain.id && b.token.address === destAddress) return 1;
-    if (a.chain.id === toChain.id) return -1;
-    if (b.chain.id === toChain.id) return 1;
-    return a.chain.id - b.chain.id;
-  });
-
-  return balances;
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts

@@ -1,23 +0,0 @@
-import { createStore } from "../../../../../../../reactive/store.js";
-
-type PendingTxInfo =
-  | {
-      type: "swap";
-      txHash: string;
-      chainId: number;
-    }
-  | {
-      type: "fiat";
-      intentId: string;
-    };
-
-const pendingTransactions = /* @__PURE__ */ createStore<PendingTxInfo[]>([]);
-
-/**
- * @internal
- */
-export const addPendingTx = (txInfo: PendingTxInfo) => {
-  const currentValue = pendingTransactions.getValue();
-  // prepend the new tx to list
-  pendingTransactions.setValue([txInfo, ...currentValue]);
-};

package/src/react/web/ui/ConnectWallet/screens/Buy/usePayerSetup.tsx

@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../../../../core/hooks/wallets/useActiveWalletChain.js";
-import type { PayerInfo } from "./types.js";
-
-export function usePayerSetup() {
-  const wallet = useActiveWallet();
-  const account = useActiveAccount();
-  const activeChain = useActiveWalletChain();
-
-  const [_payer, setPayer] = useState<PayerInfo | undefined>();
-
-  useEffect(() => {
-    const wallet = _payer?.wallet;
-
-    function update() {
-      if (!wallet) {
-        setPayer(undefined);
-        return;
-      }
-
-      const account = wallet.getAccount();
-      const chain = wallet.getChain();
-      if (account && chain) {
-        setPayer({
-          account,
-          chain,
-          wallet,
-        });
-      } else {
-        setPayer(undefined);
-      }
-    }
-
-    if (wallet) {
-      const unsubChainChanged = wallet.subscribe("chainChanged", update);
-      const unsubAccountChanged = wallet.subscribe("accountChanged", update);
-      return () => {
-        unsubChainChanged();
-        unsubAccountChanged();
-      };
-    }
-
-    return undefined;
-  }, [_payer]);
-
-  const initialPayer =
-    account && activeChain && wallet
-      ? { account, chain: activeChain, wallet }
-      : undefined;
-
-  // return the payer state if its set
-  // otherwise return the active wallet as payer
-  const payer: PayerInfo | undefined = _payer || initialPayer;
-
-  return {
-    payer,
-    setPayer,
-  };
-}

package/src/react/web/ui/components/Drawer.tsx

@@ -1,171 +0,0 @@
-"use client";
-import { keyframes } from "@emotion/react";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import {
-  forwardRef,
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { iconSize, radius } from "../../../core/design-system/index.js";
-import { fadeInAnimation } from "../design-system/animations.js";
-import { StyledDiv } from "../design-system/elements.js";
-import { Container } from "./basic.js";
-import { IconButton } from "./buttons.js";
-import { DynamicHeight } from "./DynamicHeight.js";
-import { CrossContainer } from "./Modal.js";
-
-type DrawerProps = {
-  children: React.ReactNode;
-  close: () => void;
-};
-/**
- *
- * @internal
- */
-export const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(
-  function Drawer_(props, ref) {
-    return (
-      <DrawerContainer ref={ref}>
-        <DynamicHeight>
-          <Container p="lg">
-            <CrossContainer>
-              <IconButton
-                aria-label="Close"
-                onClick={props.close}
-                type="button"
-              >
-                <Cross2Icon
-                  height={iconSize.md}
-                  style={{
-                    color: "inherit",
-                  }}
-                  width={iconSize.md}
-                />
-              </IconButton>
-            </CrossContainer>
-
-            {props.children}
-          </Container>
-        </DynamicHeight>
-      </DrawerContainer>
-    );
-  },
-);
-
-const DrawerContainer = /* @__PURE__ */ StyledDiv((_) => {
-  const theme = useCustomTheme();
-  return {
-    animation: `${drawerOpenAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1)`,
-    background: theme.colors.modalBg,
-    borderTop: `1px solid ${theme.colors.borderColor}`,
-    borderTopLeftRadius: radius.xl,
-    borderTopRightRadius: radius.xl,
-    bottom: 0,
-    left: 0,
-    position: "absolute",
-    right: 0,
-    zIndex: 10000,
-  };
-});
-
-const drawerOpenAnimation = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(100px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-
-export const DrawerOverlay = /* @__PURE__ */ StyledDiv((_) => {
-  const theme = useCustomTheme();
-  return {
-    animation: `${fadeInAnimation} 400ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    backgroundColor: theme.colors.modalOverlayBg,
-    inset: 0,
-    position: "absolute",
-    zIndex: 9999,
-  };
-});
-
-/**
- *
- * @internal
- */
-export function useDrawer() {
-  const [isOpen, _setIsOpen] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(null);
-  const drawerOverlayRef = useRef<HTMLDivElement>(null);
-
-  const closeDrawerAnimation = useCallback(() => {
-    return new Promise<void>((resolve) => {
-      if (drawerRef.current) {
-        const animOptions = {
-          duration: 300,
-          easing: "cubic-bezier(0.175, 0.885, 0.32, 1.1)",
-          fill: "forwards",
-        } as const;
-
-        const closeAnimation = drawerRef.current.animate(
-          [{ opacity: 0, transform: "translateY(100%)" }],
-          animOptions,
-        );
-
-        drawerOverlayRef.current?.animate([{ opacity: 0 }], animOptions);
-        closeAnimation.onfinish = () => resolve();
-      } else {
-        resolve();
-      }
-    });
-  }, []);
-
-  const setIsOpen = useCallback(
-    async (value: boolean) => {
-      if (value) {
-        _setIsOpen(true);
-      } else {
-        await closeDrawerAnimation();
-        _setIsOpen(false);
-      }
-    },
-    [closeDrawerAnimation],
-  );
-
-  // close on outside click
-  useLayoutEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handleClick = (event: MouseEvent) => {
-      if (
-        drawerRef.current &&
-        event.target instanceof Node &&
-        !drawerRef.current.contains(event.target)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    // avoid listening to the click event that opened the drawer by adding a frame delay
-    requestAnimationFrame(() => {
-      document.addEventListener("click", handleClick);
-    });
-
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  }, [isOpen, setIsOpen]);
-
-  return {
-    drawerOverlayRef,
-    drawerRef,
-    isOpen,
-    setIsOpen,
-  };
-}

package/src/react/web/ui/components/StepBar.tsx

@@ -1,25 +0,0 @@
-import { radius } from "../../../core/design-system/index.js";
-import { Container } from "./basic.js";
-
-export function StepBar(props: { steps: number; currentStep: number }) {
-  return (
-    <Container
-      bg="tertiaryBg"
-      flex="row"
-      style={{
-        borderRadius: radius.lg,
-        height: "8px",
-      }}
-    >
-      <Container
-        bg="accentText"
-        style={{
-          borderRadius: radius.lg,
-          width: `${(props.currentStep / props.steps) * 95}%`,
-        }}
-      >
-        {null}
-      </Container>
-    </Container>
-  );
-}

package/src/react/web/ui/components/SwitchNetwork.tsx

@@ -1,35 +0,0 @@
-import { useState } from "react";
-import { Button, type ButtonProps } from "./buttons.js";
-import { Spinner } from "./Spinner.js";
-
-export function SwitchNetworkButton(
-  props: ButtonProps & {
-    fullWidth?: boolean;
-    switchChain: () => Promise<void>;
-  },
-) {
-  const [isSwitching, setIsSwitching] = useState(false);
-
-  return (
-    <Button
-      {...props}
-      gap="xs"
-      onClick={async () => {
-        setIsSwitching(true);
-        try {
-          await props.switchChain();
-        } catch {}
-        setIsSwitching(false);
-      }}
-    >
-      {isSwitching ? (
-        <>
-          Switching
-          <Spinner color="accentButtonText" size="sm" />
-        </>
-      ) : (
-        "Switch Network"
-      )}
-    </Button>
-  );
-}