[SDK] Fix supportedTokens address comparison in usePaymentMethods (#7824)

Author: joaquim-verges

.changeset/violet-readers-warn.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix supportedTokens address comparison

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -93,32 +93,15 @@ export function usePaymentMethods(options: {
         type: "wallet" as const,
         quote: s.quote,
       }));
-      const insufficientBalanceQuotes = validTokenQuotes
-        .filter((s) => s.balance < s.quote.originAmount)
-        .sort((a, b) => {
-          return (
-            Number.parseFloat(
-              toTokens(a.quote.originAmount, a.originToken.decimals),
-            ) *
-              (a.originToken.prices.USD || 1) -
-            Number.parseFloat(
-              toTokens(b.quote.originAmount, b.originToken.decimals),
-            ) *
-              (b.originToken.prices.USD || 1)
-          );
-        });
+
       const sufficientBalanceQuotes = validTokenQuotes
-        .filter((s) => s.balance >= s.quote.originAmount)
+        .filter((s) => !!s.originToken.prices.USD)
         .sort((a, b) => {
           return (
-            Number.parseFloat(
-              toTokens(a.quote.originAmount, a.originToken.decimals),
-            ) *
-              (a.originToken.prices.USD || 1) -
-            Number.parseFloat(
-              toTokens(b.quote.originAmount, b.originToken.decimals),
-            ) *
-              (b.originToken.prices.USD || 1)
+            Number.parseFloat(toTokens(b.balance, b.originToken.decimals)) *
+              (b.originToken.prices.USD || 1) -
+            Number.parseFloat(toTokens(a.balance, a.originToken.decimals)) *
+              (a.originToken.prices.USD || 1)
           );
         });
 
@@ -133,15 +116,14 @@ export function usePaymentMethods(options: {
           )
         : [];
       const finalQuotes = supportedTokens
-        ? [...sufficientBalanceQuotes, ...insufficientBalanceQuotes].filter(
-            (q) =>
-              tokensToInclude.find(
-                (t) =>
-                  t.chainId === q.originToken.chainId &&
-                  t.address === q.originToken.address,
-              ),
+        ? sufficientBalanceQuotes.filter((q) =>
+            tokensToInclude.find(
+              (t) =>
+                t.chainId === q.originToken.chainId &&
+                t.address.toLowerCase() === q.originToken.address.toLowerCase(),
+            ),
           )
-        : [...sufficientBalanceQuotes, ...insufficientBalanceQuotes];
+        : sufficientBalanceQuotes;
       return finalQuotes;
     },
     queryKey: [

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -192,6 +192,7 @@ export function BridgeOrchestrator({
   // Handle errors
   const handleError = useCallback(
     (error: Error) => {
+      console.error(error);
       onError?.(error);
       send({ error, type: "ERROR_OCCURRED" });
     },

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -33,6 +33,9 @@ import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
 
 export type BuyWidgetProps = {
+  /**
+   * Customize the supported tokens that users can pay with.
+   */
   supportedTokens?: SupportedTokens;
   /**
    * A client is the entry point to the thirdweb SDK.
@@ -217,7 +220,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount="0.1"
+ *   amount="0.1" // in native tokens (ie. ETH)
  * />
  * ```
  *
@@ -229,11 +232,34 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount="100"
+ *   amount="100" // 100 USDC on mainnet
  *   tokenAddress="0xA0b86a33E6417E4df2057B2d3C6d9F7cc11b0a70"
  * />
  * ```
  *
+ * ### Customize the supported tokens
+ *
+ * You can customize the supported tokens that users can pay with by passing a `supportedTokens` object to the `BuyWidget` component.
+ *
+ * ```tsx
+ * <BuyWidget
+ *   client={client}
+ *   chain={ethereum}
+ *   amount="0.1"
+ *   // user will only be able to pay with these tokens
+ *   supportedTokens={{
+ *     [8453]: [
+ *       {
+ *         address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+ *         name: "USDC",
+ *         symbol: "USDC",
+ *       },
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
+ *
  * ### Customize the UI
  *
  * You can customize the UI of the `BuyWidget` component by passing a custom theme object to the `theme` prop.

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -29,6 +29,9 @@ import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
 
 export type CheckoutWidgetProps = {
+  /**
+   * Customize the supported tokens that users can pay with.
+   */
   supportedTokens?: SupportedTokens;
   /**
    * A client is the entry point to the thirdweb SDK.
@@ -215,11 +218,43 @@ type UIOptionsResult =
  * @example
  * ### Default configuration
  *
- * By default, the `CheckoutWidget` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ * The `CheckoutWidget` component allows user to pay a given wallet for any product or service. You can register webhooks to get notified for every purchase done via the widget.
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *   chain={base}
+ *   amount="0.01" // in native tokens (ETH), pass tokenAddress to charge in a specific token (USDC, USDT, etc.)
+ *   seller="0x123...abc" // the wallet address that will receive the payment
+ *   name="Premium Course"
+ *   description="Complete guide to web3 development"
+ *   image="/course-thumbnail.jpg"
+ *   onSuccess={() => {
+ *     alert("Purchase successful!");
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Customize the supported tokens
+ *
+ * You can customize the supported tokens that users can pay with by passing a `supportedTokens` object to the `CheckoutWidget` component.
  *
  * ```tsx
  * <CheckoutWidget
  *   client={client}
+ *   chain={arbitrum}
+ *   amount="0.01"
+ *   seller="0x123...abc"
+ *   // user will only be able to pay with these tokens
+ *   supportedTokens={{
+ *     [8453]: [
+ *       {
+ *         address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+ *         name: "USDC",
+ *         symbol: "USDC",
+ *       },
+ *     ],
+ *   }}
  *  />
  * ```
  *
@@ -230,6 +265,9 @@ type UIOptionsResult =
  * ```tsx
  * <CheckoutWidget
  *   client={client}
+ *   chain={arbitrum}
+ *   amount="0.01"
+ *   seller="0x123...abc"
  *   theme={darkTheme({
  *     colors: {
  *       modalBg: "red",
@@ -258,6 +296,9 @@ type UIOptionsResult =
  * ```tsx
  * <CheckoutWidget
  *   client={client}
+ *   chain={arbitrum}
+ *   amount="0.01"
+ *   seller="0x123...abc"
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -37,6 +37,9 @@ import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
 
 export type TransactionWidgetProps = {
+  /**
+   * Customize the supported tokens that users can pay with.
+   */
   supportedTokens?: SupportedTokens;
   /**
    * A client is the entry point to the thirdweb SDK.
@@ -232,6 +235,30 @@ type UIOptionsResult =
  *  />
  * ```
  *
+ * ### Customize the supported tokens
+ *
+ * You can customize the supported tokens that users can pay with by passing a `supportedTokens` object to the `TransactionWidget` component.
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   client={client}
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *   })}
+ *   supportedTokens={{
+ *     [8453]: [
+ *       {
+ *         address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+ *         name: "USDC",
+ *         symbol: "USDC",
+ *       },
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
  * ### Customize the UI
  *
  * You can customize the UI of the `TransactionWidget` component by passing a custom theme object to the `theme` prop.