lint

Author: gregfromstl

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -18,6 +18,7 @@ import { cn } from "../../../../lib/utils";
 import { CollapsibleSection } from "../../sign-in/components/CollapsibleSection";
 import { ColorFormGroup } from "../../sign-in/components/ColorFormGroup";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
+import { Address, isAddress } from "thirdweb";
 
 export function LeftSection(props: {
   options: BridgeComponentsPlaygroundOptions;
@@ -134,8 +135,20 @@ export function LeftSection(props: {
                         <Input
                           id="token-address"
                           placeholder="0x..."
-                          value={tokenAddress}
-                          onChange={(e) => setTokenAddress(e.target.value)}
+                          value={payOptions.buyTokenAddress}
+                          onChange={(e) => {
+                            const addressCheck = isAddress(e.target.value);
+                            if (!addressCheck) {
+                              return;
+                            }
+                            setOptions((v) => ({
+                              ...v,
+                              payOptions: {
+                                ...v.payOptions,
+                                buyTokenAddress: e.target.value as Address,
+                              },
+                            }));
+                          }}
                           className={cn("bg-card")}
                         />
                       </div>
@@ -155,15 +168,19 @@ export function LeftSection(props: {
                     placeholder="0x..."
                     className="bg-card"
                     value={payOptions.sellerAddress || ""}
-                    onChange={(e) =>
+                    onChange={(e) => {
+                      const addressCheck = isAddress(e.target.value);
+                      if (!addressCheck) {
+                        return;
+                      }
                       setOptions((v) => ({
                         ...v,
                         payOptions: {
                           ...v.payOptions,
-                          sellerAddress: e.target.value,
+                          sellerAddress: e.target.value as Address,
                         },
-                      }))
-                    }
+                      }));
+                    }}
                   />
                 </div>
 

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
-import { type Address, getContract, toWei } from "thirdweb";
-import { arbitrum, base } from "thirdweb/chains";
+import { getContract, toUnits } from "thirdweb";
+import { base } from "thirdweb/chains";
 import { claimTo } from "thirdweb/extensions/erc1155";
 import {
   BuyWidget,
@@ -17,6 +17,8 @@ import { THIRDWEB_CLIENT } from "../../../../lib/client";
 import { cn } from "../../../../lib/utils";
 import { CodeGen } from "../components/CodeGen";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
+import { useQuery } from "@tanstack/react-query";
+import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 
 const nftContract = getContract({
   address: "0xf0d0CBf84005Dd4eC81364D1f5D7d896Bd53D1B8",
@@ -41,6 +43,18 @@ export function RightSection(props: {
   }
 
   const account = useActiveAccount();
+  const { data: tokenData } = useQuery({
+    queryKey: ["token", props.options.payOptions.buyTokenAddress],
+    queryFn: () =>
+      getCurrencyMetadata({
+        contract: getContract({
+          address: props.options.payOptions.buyTokenAddress,
+          chain: props.options.payOptions.buyTokenChain,
+          client: THIRDWEB_CLIENT,
+        }),
+      }),
+    enabled: !!props.options.payOptions.buyTokenAddress,
+  });
 
   const themeObj =
     props.options.theme.type === "dark"
@@ -60,7 +74,10 @@ export function RightSection(props: {
         title={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
         chain={props.options.payOptions.buyTokenChain}
-        amount={toWei(props.options.payOptions.buyTokenAmount)}
+        amount={toUnits(
+          props.options.payOptions.buyTokenAmount,
+          tokenData?.decimals || 18,
+        )}
       />
     );
   }
@@ -73,7 +90,10 @@ export function RightSection(props: {
         name={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
         chain={props.options.payOptions.buyTokenChain}
-        amount={toWei(props.options.payOptions.buyTokenAmount)}
+        amount={toUnits(
+          props.options.payOptions.buyTokenAmount,
+          tokenData?.decimals || 18,
+        )}
         seller={props.options.payOptions.sellerAddress}
         presetOptions={[1, 2, 3]}
         purchaseData={{

packages/thirdweb/src/exports/react.ts

@@ -142,6 +142,10 @@ export {
   TransactionWidget,
   type TransactionWidgetProps,
 } from "../react/web/ui/Bridge/TransactionWidget.js";
+export {
+  useBridgeRoutes,
+  type UseBridgeRoutesParams,
+} from "../react/core/hooks/useBridgeRoutes.js";
 export {
   PayEmbed,
   type PayEmbedProps,

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

@@ -38,7 +38,7 @@ export function useBridgeQuote({
       // if ssame token and chain, use transfer
       if (
         checksumAddress(originToken.address) ===
-        checksumAddress(destinationToken.address) &&
+          checksumAddress(destinationToken.address) &&
         originToken.chainId === destinationToken.chainId
       ) {
         const transfer = await Transfer.prepare({
@@ -51,8 +51,6 @@ export function useBridgeQuote({
         });
         return transfer;
       }
-
-      console.log("AMOUNT", destinationAmount);
       const quote = await Buy.quote({
         originChainId: originToken.chainId,
         originTokenAddress: originToken.address,

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

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { status as OnrampStatus } from "../../../bridge/OnrampStatus.js";
 import { ApiError } from "../../../bridge/types/Errors.js";
@@ -9,15 +10,14 @@ import type { Status } from "../../../bridge/types/Status.js";
 import { getCachedChain } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { waitForReceipt } from "../../../transaction/actions/wait-for-tx-receipt.js";
+import { stringify } from "../../../utils/json.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WindowAdapter } from "../adapters/WindowAdapter.js";
 import {
-  useBridgePrepare,
   type BridgePrepareRequest,
   type BridgePrepareResult,
+  useBridgePrepare,
 } from "./useBridgePrepare.js";
-import { useQuery } from "@tanstack/react-query";
-import { stringify } from "../../../utils/json.js";
 
 /**
  * Type for completed status results from Bridge.status and Onramp.status
@@ -27,9 +27,9 @@ export type CompletedStatusResult =
   | ({ type: "sell" } & Extract<Status, { status: "COMPLETED" }>)
   | ({ type: "transfer" } & Extract<Status, { status: "COMPLETED" }>)
   | ({ type: "onramp" } & Extract<
-    OnrampStatus.Result,
-    { status: "COMPLETED" }
-  >);
+      OnrampStatus.Result,
+      { status: "COMPLETED" }
+    >);
 
 /**
  * Options for the step executor hook

packages/thirdweb/src/react/core/hooks/wallets/useAutoConnectCore.test.tsx

@@ -125,7 +125,7 @@ describe("useAutoConnectCore", () => {
           {
             wallets: [wallet],
             client: TEST_CLIENT,
-            onTimeout: () => console.info("TIMEOUTTED"),
+            onTimeout: () => {},
             timeout: 0,
           },
           (id: WalletId) =>

packages/thirdweb/src/react/core/machines/paymentMachine.ts

@@ -4,11 +4,11 @@ import type { Address } from "../../../utils/address.js";
 import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WindowAdapter } from "../adapters/WindowAdapter.js";
-import type { CompletedStatusResult } from "../hooks/useStepExecutor.js";
 import type {
   BridgePrepareRequest,
   BridgePrepareResult,
 } from "../hooks/useBridgePrepare.js";
+import type { CompletedStatusResult } from "../hooks/useStepExecutor.js";
 
 /**
  * Payment modes supported by BridgeEmbed
@@ -20,17 +20,17 @@ export type PaymentMode = "fund_wallet" | "direct_payment" | "transaction";
  */
 export type PaymentMethod =
   | {
-    type: "wallet";
-    payerWallet: Wallet;
-    originToken: Token;
-    balance: bigint;
-  }
+      type: "wallet";
+      payerWallet: Wallet;
+      originToken: Token;
+      balance: bigint;
+    }
   | {
-    type: "fiat";
-    payerWallet: Wallet;
-    currency: string;
-    onramp: "stripe" | "coinbase" | "transak";
-  };
+      type: "fiat";
+      payerWallet: Wallet;
+      currency: string;
+      onramp: "stripe" | "coinbase" | "transak";
+    };
 
 /**
  * Payment machine context - holds all flow state data
@@ -70,17 +70,17 @@ export interface PaymentMachineContext {
  */
 export type PaymentMachineEvent =
   | {
-    type: "DESTINATION_CONFIRMED";
-    destinationToken: Token;
-    destinationAmount: string;
-    receiverAddress: Address;
-  }
+      type: "DESTINATION_CONFIRMED";
+      destinationToken: Token;
+      destinationAmount: string;
+      receiverAddress: Address;
+    }
   | { type: "PAYMENT_METHOD_SELECTED"; paymentMethod: PaymentMethod }
   | {
-    type: "QUOTE_RECEIVED";
-    quote: BridgePrepareResult;
-    request: BridgePrepareRequest;
-  }
+      type: "QUOTE_RECEIVED";
+      quote: BridgePrepareResult;
+      request: BridgePrepareRequest;
+    }
   | { type: "ROUTE_CONFIRMED" }
   | { type: "EXECUTION_COMPLETE"; completedStatuses: CompletedStatusResult[] }
   | { type: "ERROR_OCCURRED"; error: Error }

packages/thirdweb/src/react/core/utils/persist.ts

@@ -42,10 +42,10 @@ export async function saveSnapshot(
         completedStatuses: context.completedStatuses,
         currentError: context.currentError
           ? {
-            name: context.currentError.name,
-            message: context.currentError.message,
-            stack: context.currentError.stack,
-          }
+              name: context.currentError.name,
+              message: context.currentError.message,
+              stack: context.currentError.stack,
+            }
           : undefined,
         retryState: context.retryState,
       },