thirdweb 5.35.0 → 5.35.1-nightly-0a5af48f70a76fc060909b853e20c927328c31c3-20240717194138

package/dist/types/wallets/smart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/wallets/smart/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/wallets/smart/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.35.0",
+  "version": "5.35.1-nightly-0a5af48f70a76fc060909b853e20c927328c31c3-20240717194138",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"
@@ -211,7 +211,7 @@
     "@aws-sdk/credential-providers": "^3",
     "@coinbase/wallet-mobile-sdk": "^1",
     "@react-native-async-storage/async-storage": "^1",
-    "@react-native-clipboard/clipboard": "^1",
+    "@react-native-clipboard/clipboard": "*",
     "amazon-cognito-identity-js": "^6",
     "aws-amplify": "^5",
     "ethers": "^5 || ^6",

package/src/chains/utils.ts

@@ -60,6 +60,15 @@ export function defineChain(
   return chain;
 }
 
+/**
+ * @internal
+ */
+export function cacheChains(chains: Chain[]) {
+  for (const chain of chains) {
+    CUSTOM_CHAIN_MAP.set(chain.id, chain);
+  }
+}
+
 /**
  * @internal
  */

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -38,6 +38,9 @@ import type { SupportedTokens } from "../../utils/defaultTokens.js";
  */
 export type SendTransactionPayModalConfig =
   | {
+      metadata?: {
+        title?: string;
+      };
       locale?: LocaleId;
       supportedTokens?: SupportedTokens;
       theme?: Theme | "light" | "dark";

package/src/react/core/utils/defaultTokens.ts

@@ -91,6 +91,14 @@ export const defaultTokens: SupportedTokens = {
       icon: maticIcon,
     },
   ],
+  "11155111": [
+    {
+      address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+      name: "USD Coin",
+      symbol: "USDC",
+      icon: usdcIcon,
+    },
+  ],
   "10": [
     {
       address: "0x4200000000000000000000000000000000000006",

package/src/react/native/ui/connect/ConnectButton.tsx

@@ -9,6 +9,7 @@ import {
   StyleSheet,
   View,
 } from "react-native";
+import { cacheChains } from "../../../../chains/utils.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -67,6 +68,15 @@ export function ConnectButton(props: ConnectButtonProps) {
     ]).start();
   }, []);
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const closeModal = useCallback(() => {
     Animated.parallel([
       Animated.timing(fadeAnim.current, {

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -77,6 +77,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
         : (data) => {
             setRootEl(
               <TxModal
+                title={payModal?.metadata?.title || "Buy"}
                 tx={data.tx}
                 onComplete={data.sendTx}
                 onClose={() => {
@@ -108,6 +109,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
 }
 
 type ModalProps = {
+  title: string;
   onComplete: () => void;
   onClose: () => void;
   client: ThirdwebClient;
@@ -178,6 +180,7 @@ function ModalContent(props: ModalProps) {
 
   return (
     <LazyBuyScreen
+      title={props.title}
       isEmbed={false}
       client={props.client}
       onViewPendingTx={() => {

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

@@ -2,6 +2,7 @@
 
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
+import { cacheChains } from "../../../../chains/utils.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -63,6 +64,15 @@ export function ConnectButton(props: ConnectButtonProps) {
     client: props.client,
   });
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const size = useMemo(() => {
     return !canFitWideModal() || wallets.length === 1
       ? "compact"

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

@@ -810,6 +810,7 @@ function DetailsModal(props: {
   else if (screen === "buy") {
     content = (
       <LazyBuyScreen
+        title="Buy"
         isEmbed={false}
         client={client}
         onBack={() => setScreen("main")}

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useMemo } from "react";
 import type { Chain } from "../../../../../chains/types.js";
+import { cacheChains } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
@@ -62,6 +63,15 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
   const show =
     !activeAccount || (siweAuth.requiresAuth && !siweAuth.isLoggedIn);
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const wallets = useMemo(
     () =>
       props.wallets ||

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

@@ -77,6 +77,7 @@ import type { PayerInfo } from "./types.js";
 import { usePayerSetup } from "./usePayerSetup.js";
 
 export type BuyScreenProps = {
+  title: string;
   onBack: (() => void) | undefined;
   supportedTokens: SupportedTokens | undefined;
   onViewPendingTx: () => void;
@@ -111,6 +112,7 @@ export default function BuyScreen(props: BuyScreenProps) {
 }
 
 type BuyScreenContentProps = {
+  title: string;
   client: ThirdwebClient;
   onBack?: () => void;
   supportedTokens?: SupportedTokens;
@@ -228,6 +230,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
   if (screen.id === "swap-flow" && payer) {
     return (
       <SwapFlow
+        title={props.title}
         isBuyForTx={!!props.buyForTx}
         isEmbed={props.isEmbed}
         client={client}
@@ -253,6 +256,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
   if (screen.id === "fiat-flow" && payer) {
     return (
       <FiatFlow
+        title={props.title}
         isBuyForTx={!!props.buyForTx}
         quote={screen.quote}
         onBack={() => {
@@ -329,7 +333,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         }
         connectLocale={connectLocale}
         client={client}
-        modalTitle="Buy"
+        modalTitle={props.title}
       />
     );
   }
@@ -391,6 +395,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
       <div>
         {screen.id === "main" && (
           <MainScreen
+            title={props.title}
             payerAccount={payer?.account}
             buyForTx={buyForTx}
             client={client}
@@ -418,6 +423,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           screen.id === "buy-with-fiat") &&
           payer && (
             <TokenSelectedLayout
+              title={props.title}
               selectedChain={toChain}
               selectedToken={toToken}
               tokenAmount={tokenAmount}
@@ -547,6 +553,7 @@ function SelectedTokenInfo(props: {
 }
 
 function MainScreen(props: {
+  title: string;
   buyForTx: BuyForTx | undefined;
   client: ThirdwebClient;
   setTokenAmount: (amount: string) => void;
@@ -598,7 +605,9 @@ function MainScreen(props: {
     <Container p="lg">
       <ModalHeader
         title={
-          props.buyForTx ? `Not enough ${props.buyForTx.tokenSymbol}` : "Buy"
+          props.buyForTx
+            ? `Not enough ${props.buyForTx.tokenSymbol}`
+            : props.title
         }
         onBack={props.onBack}
       />
@@ -697,6 +706,7 @@ function MainScreen(props: {
 }
 
 function TokenSelectedLayout(props: {
+  title: string;
   children: React.ReactNode;
   tokenAmount: string;
   selectedToken: ERC20OrNativeToken;
@@ -707,7 +717,7 @@ function TokenSelectedLayout(props: {
   return (
     <Container>
       <Container p="lg">
-        <ModalHeader title={"Buy"} onBack={props.onBack} />
+        <ModalHeader title={props.title} onBack={props.onBack} />
       </Container>
 
       <Container

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

@@ -37,6 +37,7 @@ type Screen =
     };
 
 export function FiatFlow(props: {
+  title: string;
   quote: BuyWithFiatQuote;
   onBack: () => void;
   client: ThirdwebClient;
@@ -67,6 +68,7 @@ export function FiatFlow(props: {
   if (screen.id === "step-1") {
     return (
       <FiatSteps
+        title={props.title}
         client={props.client}
         onBack={props.onBack}
         partialQuote={fiatQuoteToPartialQuote(props.quote)}
@@ -87,6 +89,7 @@ export function FiatFlow(props: {
   if (screen.id === "onramp-status") {
     return (
       <OnrampStatusScreen
+        title={props.title}
         client={props.client}
         intentId={props.quote.intentId}
         onBack={props.onBack}
@@ -107,6 +110,7 @@ export function FiatFlow(props: {
   if (screen.id === "postonramp-swap") {
     return (
       <PostOnRampSwapFlow
+        title={props.title}
         status={screen.data}
         quote={fiatQuoteToPartialQuote(props.quote)}
         client={props.client}

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

@@ -30,6 +30,7 @@ type UIStatus = "loading" | "failed" | "completed" | "partialSuccess";
  * - call `onShowSwapFlow` if on-ramp is completed and swap is required
  */
 export function OnrampStatusScreen(props: {
+  title: string;
   client: ThirdwebClient;
   onBack: () => void;
   intentId: string;
@@ -97,7 +98,7 @@ export function OnrampStatusScreen(props: {
 
   return (
     <Container p="lg">
-      <ModalHeader title="Buy" onBack={props.onBack} />
+      <ModalHeader title={props.title} onBack={props.onBack} />
 
       {props.hasTwoSteps && (
         <>

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

@@ -83,6 +83,7 @@ export function fiatQuoteToPartialQuote(
 }
 
 export function FiatSteps(props: {
+  title: string;
   partialQuote: BuyWithFiatPartialQuote;
   status?: BuyWithFiatStatus;
   onBack: () => void;
@@ -308,7 +309,7 @@ export function FiatSteps(props: {
 
   return (
     <Container p="lg">
-      <ModalHeader title="Buy" onBack={props.onBack} />
+      <ModalHeader title={props.title} onBack={props.onBack} />
       <Spacer y="lg" />
 
       {/* Step 1 */}

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

@@ -15,6 +15,7 @@ import { SwapFlow } from "../swap/SwapFlow.js";
 import type { PayerInfo } from "../types.js";
 
 export function PostOnRampSwap(props: {
+  title: string;
   client: ThirdwebClient;
   buyWithFiatStatus: BuyWithFiatStatus;
   onBack?: () => void;
@@ -59,7 +60,7 @@ export function PostOnRampSwap(props: {
     return (
       <Container fullHeight>
         <Container p="lg">
-          <ModalHeader title="Buy" onBack={props.onBack} />
+          <ModalHeader title={props.title} onBack={props.onBack} />
         </Container>
 
         <Container
@@ -95,7 +96,7 @@ export function PostOnRampSwap(props: {
     return (
       <Container fullHeight>
         <Container p="lg">
-          <ModalHeader title="Buy" onBack={props.onBack} />
+          <ModalHeader title={props.title} onBack={props.onBack} />
         </Container>
 
         <Container
@@ -117,6 +118,7 @@ export function PostOnRampSwap(props: {
 
   return (
     <SwapFlow
+      title={props.title}
       payer={props.payer}
       buyWithCryptoQuote={lockedOnRampQuote}
       client={props.client}

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

@@ -12,6 +12,7 @@ import { PostOnRampSwap } from "./PostOnRampSwap.js";
  * - Show swap flow
  */
 export function PostOnRampSwapFlow(props: {
+  title: string;
   status: BuyWithFiatStatus;
   quote: BuyWithFiatPartialQuote;
   client: ThirdwebClient;
@@ -31,6 +32,7 @@ export function PostOnRampSwapFlow(props: {
   if (statusForSwap) {
     return (
       <PostOnRampSwap
+        title={props.title}
         buyWithFiatStatus={statusForSwap}
         client={props.client}
         onViewPendingTx={props.onViewPendingTx}
@@ -45,6 +47,7 @@ export function PostOnRampSwapFlow(props: {
   // show step 1 and step 2 details
   return (
     <FiatSteps
+      title={props.title}
       client={props.client}
       onBack={props.onBack}
       partialQuote={props.quote}

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

@@ -34,6 +34,7 @@ import { addPendingTx } from "./pendingSwapTx.js";
  * @internal
  */
 export function SwapConfirmationScreen(props: {
+  title: string;
   onBack?: () => void;
   client: ThirdwebClient;
   quote: BuyWithCryptoQuote;
@@ -63,7 +64,7 @@ export function SwapConfirmationScreen(props: {
 
   return (
     <Container p="lg">
-      <ModalHeader title="Buy" onBack={props.onBack} />
+      <ModalHeader title={props.title} onBack={props.onBack} />
 
       {props.isFiatFlow ? (
         <>

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

@@ -10,6 +10,7 @@ import { SwapConfirmationScreen } from "./ConfirmationScreen.js";
 import { SwapStatusScreen } from "./SwapStatusScreen.js";
 
 type SwapFlowProps = {
+  title: string;
   onBack?: () => void;
   buyWithCryptoQuote: BuyWithCryptoQuote;
   payer: PayerInfo;
@@ -75,6 +76,7 @@ export function SwapFlow(props: SwapFlowProps) {
   if (swapTxHash) {
     return (
       <SwapStatusScreen
+        title={props.title}
         onBack={props.onBack}
         onTryAgain={props.onTryAgain}
         onViewPendingTx={props.onViewPendingTx}
@@ -90,6 +92,7 @@ export function SwapFlow(props: SwapFlowProps) {
 
   return (
     <SwapConfirmationScreen
+      title={props.title}
       setSwapTxHash={setSwapTxHash}
       toChain={toChain}
       toAmount={toAmount}

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

@@ -17,6 +17,7 @@ import { SwapTxDetailsTable } from "../tx-history/SwapDetailsScreen.js";
 type UIStatus = "pending" | "success" | "failed" | "partialSuccess";
 
 export function SwapStatusScreen(props: {
+  title: string;
   onBack?: () => void;
   onViewPendingTx: () => void;
   swapTxHash: string;
@@ -77,7 +78,7 @@ export function SwapStatusScreen(props: {
   return (
     <Container animate="fadein">
       <Container p="lg">
-        <ModalHeader title="Buy" onBack={props.onBack} />
+        <ModalHeader title={props.title} onBack={props.onBack} />
         <Spacer y="sm" />
 
         {uiStatus === "success" && (

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx

@@ -43,6 +43,7 @@ export function FiatDetailsScreen(props: {
     const fiatQuote = status.quote;
     return (
       <PostOnRampSwapFlow
+        title="Buy"
         client={props.client}
         status={status}
         onBack={props.onBack}

package/src/react/web/ui/PayEmbed.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import type { Chain } from "../../../chains/types.js";
+import { cacheChains } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
@@ -124,6 +125,13 @@ export type PayEmbedProps = {
    */
   connectOptions?: PayEmbedConnectOptions;
 
+  /**
+   * Customize the display of the PayEmbed UI.
+   */
+  metadata?: {
+    title?: string;
+  };
+
   style?: React.CSSProperties;
 };
 
@@ -154,6 +162,15 @@ export function PayEmbed(props: PayEmbedProps) {
   const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
   const theme = props.theme || "dark";
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.connectOptions?.chains) {
+    cacheChains(props.connectOptions?.chains);
+  }
+
+  if (props.connectOptions?.chain) {
+    cacheChains([props.connectOptions?.chain]);
+  }
+
   let content = null;
 
   if (!localeQuery.data) {
@@ -175,6 +192,7 @@ export function PayEmbed(props: PayEmbedProps) {
       <>
         <div style={{ display: screen === "tx-history" ? "none" : "inherit" }}>
           <BuyScreen
+            title={props.metadata?.title || "Buy"}
             isEmbed={true}
             supportedTokens={props.supportedTokens}
             theme={theme}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.35.0";
+export const version = "5.35.1-nightly-0a5af48f70a76fc060909b853e20c927328c31c3-20240717194138";

package/src/wallets/smart/index.ts

@@ -4,10 +4,14 @@ import {
   type TypedDataDefinition,
   type TypedDataDomain,
   hashTypedData,
+  maxUint96,
 } from "viem";
 import type { Chain } from "../../chains/types.js";
 import { getCachedChain } from "../../chains/utils.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
+import { allowance } from "../../extensions/erc20/__generated__/IERC20/read/allowance.js";
+import { approve } from "../../extensions/erc20/write/approve.js";
+import { toSerializableTransaction } from "../../transaction/actions/to-serializable-transaction.js";
 import type { WaitForReceiptOptions } from "../../transaction/actions/wait-for-tx-receipt.js";
 import {
   populateEip712Transaction,
@@ -15,6 +19,8 @@ import {
 } from "../../transaction/actions/zksync/send-eip712-transaction.js";
 import type { PreparedTransaction } from "../../transaction/prepare-transaction.js";
 import { getAddress } from "../../utils/address.js";
+import { concatHex } from "../../utils/encoding/helpers/concat-hex.js";
+import type { Hex } from "../../utils/encoding/hex.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parseTypedData.js";
 import type {
   Account,
@@ -44,9 +50,11 @@ import {
 } from "./lib/userop.js";
 import { isNativeAAChain } from "./lib/utils.js";
 import type {
+  PaymasterResult,
   SmartAccountOptions,
   SmartWalletConnectionOptions,
   SmartWalletOptions,
+  UserOperation,
 } from "./types.js";
 
 /**
@@ -170,6 +178,27 @@ async function createSmartAccount(
   const account: Account = {
     address: getAddress(accountContract.address),
     async sendTransaction(transaction: SendTransactionOption) {
+      // if erc20 paymaster - check allowance and approve if needed
+      const erc20Paymaster = options.overrides?.erc20Paymaster;
+      let paymasterOverride:
+        | undefined
+        | ((userOp: UserOperation) => Promise<PaymasterResult>) = undefined;
+      if (erc20Paymaster) {
+        await approveERC20({
+          accountContract,
+          erc20Paymaster,
+          options,
+        });
+        const paymasterCallback = async (): Promise<PaymasterResult> => {
+          return {
+            paymasterAndData: concatHex([
+              erc20Paymaster.address as Hex,
+              erc20Paymaster?.token as Hex,
+            ]),
+          };
+        };
+        paymasterOverride = options.overrides?.paymaster || paymasterCallback;
+      }
       const executeTx = prepareExecute({
         accountContract,
         transaction,
@@ -177,7 +206,13 @@ async function createSmartAccount(
       });
       return _sendUserOp({
         executeTx,
-        options,
+        options: {
+          ...options,
+          overrides: {
+            ...options.overrides,
+            paymaster: paymasterOverride,
+          },
+        },
       });
     },
     async sendBatchTransaction(transactions: SendTransactionOption[]) {
@@ -362,6 +397,57 @@ async function createSmartAccount(
   return account;
 }
 
+async function approveERC20(args: {
+  accountContract: ThirdwebContract;
+  options: SmartAccountOptions;
+  erc20Paymaster: {
+    address: string;
+    token: string;
+  };
+}) {
+  const { accountContract, erc20Paymaster, options } = args;
+  const tokenAddress = erc20Paymaster.token;
+  const tokenContract = getContract({
+    address: tokenAddress,
+    chain: accountContract.chain,
+    client: accountContract.client,
+  });
+  const accountAllowance = await allowance({
+    contract: tokenContract,
+    owner: accountContract.address,
+    spender: erc20Paymaster.address,
+  });
+
+  if (accountAllowance > 0n) {
+    return;
+  }
+
+  const approveTx = approve({
+    contract: tokenContract,
+    spender: erc20Paymaster.address,
+    amountWei: maxUint96 - 1n,
+  });
+  const transaction = await toSerializableTransaction({
+    transaction: approveTx,
+    from: accountContract.address,
+  });
+  const executeTx = prepareExecute({
+    accountContract,
+    transaction,
+    executeOverride: options.overrides?.execute,
+  });
+  await _sendUserOp({
+    executeTx,
+    options: {
+      ...options,
+      overrides: {
+        ...options.overrides,
+        erc20Paymaster: undefined,
+      },
+    },
+  });
+}
+
 function createZkSyncAccount(args: {
   creationOptions: SmartWalletOptions;
   connectionOptions: SmartWalletConnectionOptions;

package/src/wallets/smart/types.ts

@@ -17,6 +17,10 @@ export type SmartWalletOptions = Prettify<
       accountAddress?: string;
       accountSalt?: string;
       entrypointAddress?: string;
+      erc20Paymaster?: {
+        address: string;
+        token: string;
+      };
       paymaster?: (userOp: UserOperation) => Promise<PaymasterResult>;
       predictAddress?: (factoryContract: ThirdwebContract) => Promise<string>;
       createAccount?: (