thirdweb 5.94.1 → 5.95.0-nightly-4c1f384a635054a8cfaaa487e3ba7ada63b221ec-20250415110008

package/src/insight/get-tokens.ts

@@ -0,0 +1,63 @@
+import {
+  type GetV1TokensErc20ByOwnerAddressData,
+  type GetV1TokensErc20ByOwnerAddressResponse,
+  getV1TokensErc20ByOwnerAddress,
+} from "@thirdweb-dev/insight";
+import { stringify } from "viem";
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
+import { getThirdwebDomains } from "../utils/domains.js";
+import { getClientFetch } from "../utils/fetch.js";
+
+export type OwnedToken = GetV1TokensErc20ByOwnerAddressResponse["data"][number];
+
+/**
+ * Get ERC20 tokens owned by an address
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const tokens = await Insight.getOwnedTokens({
+ *   client,
+ *   chains: [sepolia],
+ *   ownerAddress: "0x1234567890123456789012345678901234567890",
+ * });
+ * ```
+ * @insight
+ */
+export async function getOwnedTokens(args: {
+  client: ThirdwebClient;
+  chains: Chain[];
+  ownerAddress: string;
+  queryOptions?: Omit<GetV1TokensErc20ByOwnerAddressData["query"], "chain">;
+}): Promise<OwnedToken[]> {
+  const {
+    client,
+    chains,
+    ownerAddress,
+    queryOptions = {
+      chain: chains.map((chain) => chain.id),
+      include_spam: "false",
+      metadata: "true",
+      limit: 100,
+      page: 1,
+    },
+  } = args;
+
+  const result = await getV1TokensErc20ByOwnerAddress({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    path: {
+      ownerAddress: ownerAddress,
+    },
+    query: {
+      ...queryOptions,
+      chain: chains.map((chain) => chain.id),
+    },
+  });
+
+  if (!result.data || result.error) {
+    throw new Error(result.error ? stringify(result.error) : "Unknown error");
+  }
+  return result.data.data;
+}

package/src/insight/get-transactions.ts

@@ -0,0 +1,66 @@
+import {
+  type GetV1WalletsByWalletAddressTransactionsData,
+  type GetV1WalletsByWalletAddressTransactionsResponse,
+  getV1WalletsByWalletAddressTransactions,
+} from "@thirdweb-dev/insight";
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
+import { getThirdwebDomains } from "../utils/domains.js";
+import { getClientFetch } from "../utils/fetch.js";
+
+export type Transaction = NonNullable<
+  GetV1WalletsByWalletAddressTransactionsResponse["data"]
+>[number];
+
+/**
+ * Get transactions for a wallet
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const transactions = await Insight.getTransactions({
+ *   client,
+ *   walletAddress: "0x1234567890123456789012345678901234567890",
+ *   chains: [sepolia],
+ * });
+ * ```
+ * @insight
+ */
+export async function getTransactions(args: {
+  client: ThirdwebClient;
+  walletAddress: string;
+  chains: Chain[];
+  queryOptions?: Omit<
+    GetV1WalletsByWalletAddressTransactionsData["query"],
+    "chain"
+  >;
+}): Promise<Transaction[]> {
+  const threeMonthsAgoInSeconds = Math.floor(
+    (Date.now() - 3 * 30 * 24 * 60 * 60 * 1000) / 1000,
+  );
+  const {
+    client,
+    walletAddress,
+    chains,
+    queryOptions = {
+      filter_block_timestamp_gte: threeMonthsAgoInSeconds,
+      limit: 100,
+      page: 1,
+    },
+  } = args;
+  const result = await getV1WalletsByWalletAddressTransactions({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    query: {
+      ...queryOptions,
+      chain: chains.map((chain) => chain.id),
+    },
+    path: {
+      wallet_address: walletAddress,
+    },
+  });
+  if (result.error) {
+    throw new Error(result.error.error);
+  }
+  return result.data.data || [];
+}

package/src/insight/index.ts

@@ -0,0 +1,3 @@
+export { getOwnedNFTs, type OwnedNFT } from "./get-nfts.js";
+export { getOwnedTokens, type OwnedToken } from "./get-tokens.js";
+export { getTransactions, type Transaction } from "./get-transactions.js";

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -703,11 +703,7 @@ export function DetailsModal(props: {
               }}
             >
               <CoinsIcon size={iconSize.md} />
-              <Text color="primaryText">
-                {props.supportedNFTs
-                  ? locale.viewFunds.viewAssets
-                  : locale.viewFunds.title}
-              </Text>
+              <Text color="primaryText">{locale.viewFunds.viewAssets}</Text>
             </MenuButton>
           )}
 
@@ -841,34 +837,20 @@ export function DetailsModal(props: {
       />
     );
   } else if (screen === "view-assets") {
-    if (props.supportedNFTs) {
-      content = (
-        <ViewAssets
-          supportedTokens={props.supportedTokens}
-          supportedNFTs={props.supportedNFTs}
-          onBack={() => {
-            setScreen("main");
-          }}
-          theme={props.theme}
-          setScreen={setScreen}
-          client={client}
-          connectLocale={locale}
-          assetTabs={props.detailsModal?.assetTabs}
-        />
-      );
-    } else {
-      // Always show tokens (has the native token at least)
-      content = (
-        <ViewTokens
-          supportedTokens={props.supportedTokens}
-          onBack={() => {
-            setScreen("main");
-          }}
-          client={client}
-          connectLocale={locale}
-        />
-      );
-    }
+    content = (
+      <ViewAssets
+        supportedTokens={props.supportedTokens}
+        supportedNFTs={props.supportedNFTs}
+        onBack={() => {
+          setScreen("main");
+        }}
+        theme={props.theme}
+        setScreen={setScreen}
+        client={client}
+        connectLocale={locale}
+        assetTabs={props.detailsModal?.assetTabs}
+      />
+    );
   } else if (screen === "view-nfts") {
     content = (
       <ViewNFTs

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

@@ -72,8 +72,8 @@ const pulseAnimation = keyframes`
 const PulsingDot = /* @__PURE__ */ StyledDiv(() => {
   return {
     background: "currentColor",
-    width: "9px",
-    height: "9px",
+    width: "10px",
+    height: "10px",
     borderRadius: "50%",
     '&[data-active="true"]': {
       animation: `${pulseAnimation} 1s infinite`,

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

@@ -186,9 +186,14 @@ export function TransactionModeScreen(props: {
         ) : activeAccount ? (
           <Container flex="column" gap="sm">
             {insufficientFunds && (
-              <Text size="sm" color="danger" style={{ textAlign: "center" }}>
-                Insufficient funds
-              </Text>
+              <div>
+                <Text color="danger" size="xs" center multiline>
+                  Insufficient Funds
+                </Text>
+                <Text size="xs" center multiline>
+                  Select another token or pay with a debit card.
+                </Text>
+              </div>
             )}
             <Container
               flex="row"

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -13,10 +13,7 @@ import {
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useBuyWithFiatQuote } from "../../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
 import { PREFERRED_FIAT_PROVIDER_STORAGE_KEY } from "../../../../../../core/utils/storage.js";
-import {
-  defaultMessage,
-  getErrorMessage,
-} from "../../../../../utils/errors.js";
+import { getErrorMessage } from "../../../../../utils/errors.js";
 import {
   Drawer,
   DrawerOverlay,
@@ -180,7 +177,7 @@ export function FiatScreenContent(props: {
       )}
 
       <Container flex="column" gap="sm">
-        <Text size="sm">Pay with credit card</Text>
+        <Text size="sm">Pay with a debit card</Text>
         <div>
           <PayWithCreditCard
             isLoading={fiatQuoteQuery.isLoading}
@@ -242,9 +239,14 @@ export function FiatScreenContent(props: {
                 />
               </Text>
             ) : (
-              <Text color="danger" size="sm" center multiline>
-                {errorMsg.message || defaultMessage}
-              </Text>
+              <div>
+                <Text color="danger" size="xs" center multiline>
+                  {errorMsg.title}
+                </Text>
+                <Text size="xs" center multiline>
+                  {errorMsg.message}
+                </Text>
+              </div>
             )}
           </div>
         )}

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

@@ -1,5 +1,4 @@
-import { CrossCircledIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -13,7 +12,6 @@ import {
   waitForReceipt,
 } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize } from "../../../../../../core/design-system/index.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { StepBar } from "../../../../components/StepBar.js";
@@ -25,6 +23,7 @@ import { StyledDiv } from "../../../../design-system/elements.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
+import { ErrorText } from "./ErrorText.js";
 import { SwapSummary } from "./SwapSummary.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
@@ -59,6 +58,7 @@ export function SwapConfirmationScreen(props: {
   const initialStep = needsApprovalStep ? "approval" : "swap";
 
   const [step, setStep] = useState<"approval" | "swap">(initialStep);
+  const [error, setError] = useState<string | undefined>();
   const [status, setStatus] = useState<
     "pending" | "success" | "error" | "idle"
   >("idle");
@@ -66,6 +66,38 @@ export function SwapConfirmationScreen(props: {
   const receiver = props.quote.swapDetails.toAddress;
   const sender = props.quote.swapDetails.fromAddress;
 
+  const uiErrorMessage = useMemo(() => {
+    if (step === "approval" && status === "error" && error) {
+      if (error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Approve",
+          message: "Your wallet rejected the approval request.",
+        };
+      }
+      return {
+        title: "Failed to Approve",
+        message:
+          "Your wallet failed to approve the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    if (step === "swap" && status === "error" && error) {
+      if (error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Confirm",
+          message: "Your wallet rejected the confirmation request.",
+        };
+      }
+      return {
+        title: "Failed to Confirm",
+        message:
+          "Your wallet failed to confirm the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    return undefined;
+  }, [error, step, status]);
+
   return (
     <Container p="lg">
       <ModalHeader title={props.title} onBack={props.onBack} />
@@ -128,15 +160,12 @@ export function SwapConfirmationScreen(props: {
         </>
       )}
 
-      {status === "error" && (
+      {uiErrorMessage && (
         <>
-          <Container flex="row" gap="xs" center="both" color="danger">
-            <CrossCircledIcon width={iconSize.sm} height={iconSize.sm} />
-            <Text color="danger" size="sm">
-              {step === "approval" ? "Failed to Approve" : "Failed to Confirm"}
-            </Text>
-          </Container>
-
+          <ErrorText
+            title={uiErrorMessage.title}
+            message={uiErrorMessage.message}
+          />
           <Spacer y="md" />
         </>
       )}
@@ -224,6 +253,7 @@ export function SwapConfirmationScreen(props: {
                   setStatus("idle");
                 } catch (e) {
                   console.error(e);
+                  setError((e as Error).message);
                   setStatus("error");
                 }
               }

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

@@ -0,0 +1,23 @@
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { iconSize } from "../../../../../../core/design-system/index.js";
+import { Container } from "../../../../components/basic.js";
+import { Text } from "../../../../components/text.js";
+
+export function ErrorText(props: {
+  title: string;
+  message: string;
+}) {
+  return (
+    <Container gap="xxs" flex="column">
+      <Container flex="row" gap="xxs" center="both" color="danger">
+        <CrossCircledIcon width={iconSize.sm} height={iconSize.sm} />
+        <Text color="danger" size="sm">
+          {props.title}
+        </Text>
+      </Container>
+      <Text center size="xs">
+        {props.message}
+      </Text>
+    </Container>
+  );
+}

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

@@ -12,10 +12,7 @@ import type { Account } from "../../../../../../../wallets/interfaces/wallet.js"
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
 import { useBuyWithCryptoQuote } from "../../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
-import {
-  defaultMessage,
-  getErrorMessage,
-} from "../../../../../utils/errors.js";
+import { getErrorMessage } from "../../../../../utils/errors.js";
 import type { PayEmbedConnectOptions } from "../../../../PayEmbed.js";
 import {
   Drawer,
@@ -301,9 +298,14 @@ export function SwapScreenContent(props: {
                 />
               </Text>
             ) : (
-              <Text color="danger" size="xs" center multiline>
-                {errorMsg.message || defaultMessage}
-              </Text>
+              <div>
+                <Text color="danger" size="xs" center multiline>
+                  {errorMsg.title}
+                </Text>
+                <Text size="xs" center multiline>
+                  {errorMsg.message}
+                </Text>
+              </div>
             )}
           </div>
         )}
@@ -311,7 +313,10 @@ export function SwapScreenContent(props: {
         {!errorMsg && isNotEnoughBalance && (
           <div>
             <Text color="danger" size="xs" center multiline>
-              Insufficient funds
+              Insufficient Funds
+            </Text>
+            <Text size="xs" center multiline>
+              Select another token or pay with a debit card.
             </Text>
           </div>
         )}

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

@@ -176,11 +176,11 @@ export function TokenSelectorScreen(props: {
     enabled: !!props.sourceSupportedTokens && !!chainInfo.data,
   });
 
-  if (walletsAndBalances.isLoading || !walletsAndBalances.data) {
+  if (walletsAndBalances.isLoading || chainInfo.isLoading) {
     return <LoadingScreen />;
   }
 
-  const filteredWallets = Array.from(walletsAndBalances.data.entries() || [])
+  const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
     .filter(([w]) => !props.hiddenWallets?.includes(w.id))
     .filter(([, balances]) => {
       const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
@@ -276,7 +276,7 @@ export function TokenSelectorScreen(props: {
               >
                 <CardStackIcon width={iconSize.md} height={iconSize.md} />
                 <Text size="sm" color="primaryText">
-                  Pay with credit card
+                  Pay with a debit card
                 </Text>
               </Container>
             </Button>
@@ -362,7 +362,7 @@ function WalletRowWithBalances(props: {
         ) : (
           <Container style={{ padding: spacing.sm }}>
             <Text size="sm" color="secondaryText">
-              Insufficient funds
+              Insufficient Funds
             </Text>
           </Container>
         )}

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

@@ -1,6 +1,6 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -34,6 +34,7 @@ import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
 import { ConnectorLine } from "./ConfirmationScreen.js";
+import { ErrorText } from "./ErrorText.js";
 import { SwapSummary } from "./SwapSummary.js";
 
 type TransferConfirmationScreenProps = {
@@ -109,6 +110,42 @@ export function TransferConfirmationScreen(
     refetchInterval: 30 * 1000,
   });
 
+  const uiErrorMessage = useMemo(() => {
+    if (step === "approve" && status.id === "error" && status.error) {
+      if (status.error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Approve",
+          message: "Your wallet rejected the approval request.",
+        };
+      }
+      return {
+        title: "Failed to Approve",
+        message:
+          "Your wallet failed to approve the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    if (
+      (step === "transfer" || step === "execute") &&
+      status.id === "error" &&
+      status.error
+    ) {
+      if (status.error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Confirm",
+          message: "Your wallet rejected the confirmation request.",
+        };
+      }
+      return {
+        title: "Failed to Confirm",
+        message:
+          "Your wallet failed to confirm the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    return undefined;
+  }, [step, status]);
+
   if (transferQuery.isLoading) {
     return (
       <Container p="lg">
@@ -190,15 +227,12 @@ export function TransferConfirmationScreen(
         </>
       )}
 
-      {status.id === "error" && (
+      {uiErrorMessage && (
         <>
-          <Container flex="row" gap="xs" center="both" color="danger">
-            <Text color="danger" size="sm" style={{ textAlign: "center" }}>
-              {step === "transfer"
-                ? `${status.error || "Failed to Transfer"}`
-                : "Failed to Execute"}
-            </Text>
-          </Container>
+          <ErrorText
+            title={uiErrorMessage.title}
+            message={uiErrorMessage.message}
+          />
           <Spacer y="md" />
         </>
       )}

package/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

@@ -82,7 +82,7 @@ export function ViewAssets(props: {
     >
       <Container p="lg">
         <ModalHeader
-          title={connectLocale.viewFunds.title}
+          title={connectLocale.viewFunds.viewAssets}
           onBack={props.onBack}
         />
       </Container>