thirdweb 5.87.4 → 5.88.0

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

@@ -0,0 +1,353 @@
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+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 { getContract } from "../../../../../../../contract/contract.js";
+import { allowance } from "../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
+import type { GetBuyWithCryptoQuoteParams } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+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 type { PayEmbedConnectOptions } from "../../../../PayEmbed.js";
+import {
+  Drawer,
+  DrawerOverlay,
+  useDrawer,
+} from "../../../../components/Drawer.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { Spinner } from "../../../../components/Spinner.js";
+import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
+import { Container } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
+import type { ConnectLocale } from "../../../locale/types.js";
+import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
+import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
+import type { SelectedScreen } from "../main/types.js";
+import type { PayerInfo } from "../types.js";
+import { SwapFees } from "./Fees.js";
+import { PayWithCryptoQuoteInfo } from "./PayWithCrypto.js";
+
+export function SwapScreenContent(props: {
+  setScreen: (screen: SelectedScreen) => void;
+  tokenAmount: string;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  fromChain: Chain;
+  fromToken: ERC20OrNativeToken;
+  showFromTokenSelector: () => void;
+  payer: PayerInfo;
+  client: ThirdwebClient;
+  payOptions: PayUIOptions;
+  isEmbed: boolean;
+  onDone: () => void;
+  connectOptions: PayEmbedConnectOptions | undefined;
+  connectLocale: ConnectLocale;
+  setPayer: (payer: PayerInfo) => void;
+  activeAccount: Account;
+  setTokenAmount: (amount: string) => void;
+  setHasEditedAmount: (hasEdited: boolean) => void;
+  disableTokenSelection: boolean;
+}) {
+  const {
+    setScreen,
+    payer,
+    client,
+    toChain,
+    tokenAmount,
+    toToken,
+    fromChain,
+    fromToken,
+    payOptions,
+    disableTokenSelection,
+  } = props;
+
+  const defaultRecipientAddress = (
+    props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
+  )?.paymentInfo?.sellerAddress;
+  const receiverAddress =
+    defaultRecipientAddress || props.activeAccount.address;
+  const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
+  const [drawerScreen, setDrawerScreen] = useState<
+    "fees" | "receiver" | "payer"
+  >("fees");
+
+  const fromTokenBalanceQuery = useWalletBalance({
+    address: payer.account.address,
+    chain: fromChain,
+    tokenAddress: isNativeToken(fromToken) ? undefined : fromToken.address,
+    client,
+  });
+
+  const fromTokenId = isNativeToken(fromToken)
+    ? NATIVE_TOKEN_ADDRESS
+    : fromToken.address.toLowerCase();
+  const toTokenId = isNativeToken(toToken)
+    ? NATIVE_TOKEN_ADDRESS
+    : toToken.address.toLowerCase();
+  const swapRequired =
+    !!tokenAmount &&
+    !(fromChain.id === toChain.id && fromTokenId === toTokenId);
+  const quoteParams: GetBuyWithCryptoQuoteParams | undefined = swapRequired
+    ? {
+        // wallets
+        fromAddress: payer.account.address,
+        toAddress: receiverAddress,
+        // from
+        fromChainId: fromChain.id,
+        fromTokenAddress: isNativeToken(fromToken)
+          ? NATIVE_TOKEN_ADDRESS
+          : fromToken.address,
+        // to
+        toChainId: toChain.id,
+        toTokenAddress: isNativeToken(toToken)
+          ? NATIVE_TOKEN_ADDRESS
+          : toToken.address,
+        toAmount: tokenAmount,
+        client,
+        purchaseData: payOptions.purchaseData,
+      }
+    : undefined;
+
+  const quoteQuery = useBuyWithCryptoQuote(quoteParams, {
+    // refetch every 30 seconds
+    staleTime: 30 * 1000,
+    refetchInterval: 30 * 1000,
+    gcTime: 30 * 1000,
+  });
+
+  const allowanceQuery = useQuery({
+    queryKey: [
+      "allowance",
+      payer.account.address,
+      quoteQuery.data?.approvalData,
+    ],
+    queryFn: () => {
+      if (!quoteQuery.data?.approvalData) {
+        return null;
+      }
+      return allowance({
+        contract: getContract({
+          client: props.client,
+          address: quoteQuery.data.swapDetails.fromToken.tokenAddress,
+          chain: getCachedChain(quoteQuery.data.swapDetails.fromToken.chainId),
+        }),
+        spender: quoteQuery.data.approvalData.spenderAddress,
+        owner: props.payer.account.address,
+      });
+    },
+    enabled: !!quoteQuery.data?.approvalData,
+    refetchOnMount: true,
+  });
+
+  const sourceTokenAmount = swapRequired
+    ? quoteQuery.data?.swapDetails.fromAmount
+    : tokenAmount;
+
+  const isNotEnoughBalance =
+    !!sourceTokenAmount &&
+    !!fromTokenBalanceQuery.data &&
+    Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
+
+  const disableContinue =
+    (swapRequired && !quoteQuery.data) ||
+    isNotEnoughBalance ||
+    allowanceQuery.isLoading;
+  const switchChainRequired =
+    props.payer.wallet.getChain()?.id !== fromChain.id;
+
+  const errorMsg =
+    !quoteQuery.isLoading && quoteQuery.error
+      ? getErrorMessage(quoteQuery.error)
+      : undefined;
+
+  function showSwapFlow() {
+    if (
+      (props.payOptions.mode === "direct_payment" ||
+        props.payOptions.mode === "fund_wallet") &&
+      !isNotEnoughBalance &&
+      !swapRequired
+    ) {
+      // same currency, just direct transfer
+      setScreen({
+        id: "transfer-flow",
+      });
+    } else if (
+      props.payOptions.mode === "transaction" &&
+      !isNotEnoughBalance &&
+      !swapRequired
+    ) {
+      if (payer.account.address !== receiverAddress) {
+        // needs transfer from another wallet before executing the transaction
+        setScreen({
+          id: "transfer-flow",
+        });
+      } else {
+        // has enough balance to just do the transaction directly
+        props.onDone();
+      }
+
+      return;
+    }
+
+    if (!quoteQuery.data) {
+      return;
+    }
+
+    setScreen({
+      id: "swap-flow",
+      quote: quoteQuery.data,
+      approvalAmount: allowanceQuery.data ?? undefined,
+    });
+  }
+
+  function showFees() {
+    if (!quoteQuery.data) {
+      return;
+    }
+
+    setIsOpen(true);
+    setDrawerScreen("fees");
+  }
+
+  return (
+    <Container flex="column" gap="md" animate="fadein">
+      {isOpen && (
+        <>
+          <DrawerOverlay ref={drawerOverlayRef} />
+          <Drawer ref={drawerRef} close={() => setIsOpen(false)}>
+            {drawerScreen === "fees" && quoteQuery.data && (
+              <div>
+                <Text size="lg" color="primaryText">
+                  Fees
+                </Text>
+                <Spacer y="lg" />
+                <SwapFees quote={quoteQuery.data} />
+              </div>
+            )}
+          </Drawer>
+        </>
+      )}
+
+      {/* Quote info */}
+      <div>
+        <PayWithCryptoQuoteInfo
+          value={sourceTokenAmount || ""}
+          chain={fromChain}
+          token={fromToken}
+          isLoading={quoteQuery.isLoading && !sourceTokenAmount}
+          client={client}
+          freezeChainAndTokenSelection={disableTokenSelection}
+          payerAccount={props.payer.account}
+          swapRequired={swapRequired}
+        />
+        {swapRequired && (
+          <EstimatedTimeAndFees
+            quoteIsLoading={quoteQuery.isLoading}
+            estimatedSeconds={
+              quoteQuery.data?.swapDetails.estimated.durationSeconds
+            }
+            onViewFees={showFees}
+          />
+        )}
+        <Spacer y="md" />
+      </div>
+
+      {/* Error message */}
+      {errorMsg && (
+        <div>
+          {errorMsg.data?.minimumAmountEth ? (
+            <Text color="danger" size="sm" center multiline>
+              Minimum amount is{" "}
+              {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
+              <TokenSymbol
+                token={toToken}
+                chain={toChain}
+                size="sm"
+                inline
+                color="danger"
+              />
+            </Text>
+          ) : (
+            <Text color="danger" size="sm" center multiline>
+              {errorMsg.message || defaultMessage}
+            </Text>
+          )}
+        </div>
+      )}
+
+      {!errorMsg && isNotEnoughBalance && (
+        <div>
+          <Text color="danger" size="sm" center multiline>
+            Not enough funds.
+          </Text>
+          <Text color="danger" size="sm" center multiline>
+            Try a different wallet or token.
+          </Text>
+        </div>
+      )}
+
+      {/* Button */}
+      {errorMsg?.data?.minimumAmountEth ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            props.setTokenAmount(
+              formatNumber(
+                Number(errorMsg.data?.minimumAmountEth),
+                6,
+              ).toString(),
+            );
+            props.setHasEditedAmount(true);
+          }}
+        >
+          Set Minimum
+        </Button>
+      ) : switchChainRequired &&
+        !quoteQuery.isLoading &&
+        !allowanceQuery.isLoading &&
+        !isNotEnoughBalance &&
+        !quoteQuery.error ? (
+        <SwitchNetworkButton
+          variant="accent"
+          fullWidth
+          switchChain={async () => {
+            await props.payer.wallet.switchChain(fromChain);
+          }}
+        />
+      ) : (
+        <Button
+          variant={disableContinue ? "outline" : "accent"}
+          fullWidth
+          data-disabled={disableContinue}
+          disabled={disableContinue}
+          onClick={async () => {
+            if (!disableContinue) {
+              showSwapFlow();
+            }
+          }}
+          gap="xs"
+        >
+          {quoteQuery.isLoading ? (
+            <>
+              Getting price quote
+              <Spinner size="sm" color="accentText" />
+            </>
+          ) : (
+            "Continue"
+          )}
+        </Button>
+      )}
+    </Container>
+  );
+}

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

@@ -1,14 +1,18 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 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 { getContract } from "../../../../../../../contract/contract.js";
+import { allowance } from "../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
+import { approve } from "../../../../../../../extensions/erc20/write/approve.js";
 import { transfer } from "../../../../../../../extensions/erc20/write/transfer.js";
 import { getBuyWithCryptoTransfer } from "../../../../../../../pay/buyWithCrypto/getTransfer.js";
 import { sendAndConfirmTransaction } from "../../../../../../../transaction/actions/send-and-confirm-transaction.js";
 import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
 import { prepareTransaction } from "../../../../../../../transaction/prepare-transaction.js";
+import type { Address } from "../../../../../../../utils/address.js";
 import { toWei } from "../../../../../../../utils/units.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
@@ -248,13 +252,46 @@ export function TransferConfirmationScreen(
                   purchaseData: payOptions?.purchaseData,
                 });
 
-                if (transferResponse.approval) {
-                  setStep("approve");
-                  // approve the transfer
-                  await sendAndConfirmTransaction({
-                    account: props.payer.account,
-                    transaction: transferResponse.approval,
+                if (transferResponse.approvalData) {
+                  // check allowance
+                  const prevAllowance = await allowance({
+                    contract: getContract({
+                      client: client,
+                      address: transferResponse.approvalData.tokenAddress,
+                      chain: getCachedChain(
+                        transferResponse.approvalData.chainId,
+                      ),
+                    }),
+                    spender: transferResponse.approvalData
+                      .spenderAddress as Address,
+                    owner: payer.account.address,
                   });
+
+                  if (
+                    prevAllowance <
+                    BigInt(transferResponse.approvalData.amountWei)
+                  ) {
+                    setStep("approve");
+                    const transaction = approve({
+                      contract: getContract({
+                        client: client,
+                        address: transferResponse.approvalData.tokenAddress,
+                        chain: getCachedChain(
+                          transferResponse.approvalData.chainId,
+                        ),
+                      }),
+                      spender: transferResponse.approvalData
+                        .spenderAddress as Address,
+                      amountWei: BigInt(
+                        transferResponse.approvalData.amountWei,
+                      ),
+                    });
+                    // approve the transfer
+                    await sendAndConfirmTransaction({
+                      account: props.payer.account,
+                      transaction,
+                    });
+                  }
                 }
 
                 setStep("transfer");

package/src/react/web/ui/ConnectWallet/screens/nativeToken.ts

@@ -1,4 +1,5 @@
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { type Address, getAddress } from "../../../../../utils/address.js";
 import type { TokenInfo } from "../../../../core/utils/defaultTokens.js";
 
 export type NativeToken = { nativeToken: true };
@@ -17,4 +18,11 @@ export function isNativeToken(
   );
 }
 
+export function getTokenAddress(token: TokenInfo | NativeToken): Address {
+  if (isNativeToken(token)) {
+    return NATIVE_TOKEN_ADDRESS;
+  }
+  return getAddress(token.address);
+}
+
 export type ERC20OrNativeToken = TokenInfo | NativeToken;

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

@@ -3,7 +3,7 @@ import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.
 import { type Theme, fontSize } from "../../../core/design-system/index.js";
 import { StyledAnchor, StyledSpan } from "../design-system/elements.js";
 
-type TextProps = {
+export type TextProps = {
   theme?: Theme;
   color?: keyof Theme["colors"];
   center?: boolean;

package/src/react/web/utils/errors.ts

@@ -0,0 +1,22 @@
+type ApiError = {
+  code: string;
+  message?: string;
+  data?: {
+    minimumAmountUSDCents?: string;
+    requestedAmountUSDCents?: string;
+    minimumAmountWei?: string;
+    minimumAmountEth?: string;
+  };
+};
+
+export const defaultMessage = "Unable to get price quote";
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export function getErrorMessage(err: any): ApiError {
+  if (typeof err.error === "object" && err.error.code) {
+    return err.error;
+  }
+  return {
+    code: "UNABLE_TO_GET_PRICE_QUOTE",
+    message: defaultMessage,
+  };
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.87.4";
+export const version = "5.88.0";

package/src/wallets/smart/index.ts

@@ -6,6 +6,9 @@ import type { ThirdwebClient } from "../../client/client.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 { isActiveSigner } from "../../extensions/erc4337/__generated__/IAccountPermissions/read/isActiveSigner.js";
+import { addSessionKey } from "../../extensions/erc4337/account/addSessionKey.js";
+import { sendTransaction } from "../../transaction/actions/send-transaction.js";
 import { toSerializableTransaction } from "../../transaction/actions/to-serializable-transaction.js";
 import type { WaitForReceiptOptions } from "../../transaction/actions/wait-for-tx-receipt.js";
 import {
@@ -16,6 +19,7 @@ import type { PreparedTransaction } from "../../transaction/prepare-transaction.
 import { readContract } from "../../transaction/read-contract.js";
 import { getAddress } from "../../utils/address.js";
 import { isZkSyncChain } from "../../utils/any-evm/zksync/isZkSyncChain.js";
+import { isContractDeployed } from "../../utils/bytecode/is-contract-deployed.js";
 import type { Hex } from "../../utils/encoding/hex.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parse-typed-data.js";
@@ -164,6 +168,30 @@ export async function connectSmartAccount(
   adminAccountToSmartAccountMap.set(personalAccount, account);
   smartAccountToAdminAccountMap.set(account, personalAccount);
 
+  if (options.sessionKey) {
+    let hasSessionKey = false;
+    // check if already added
+    const accountDeployed = await isContractDeployed(accountContract);
+    if (accountDeployed) {
+      hasSessionKey = await isActiveSigner({
+        contract: accountContract,
+        signer: options.sessionKey.address,
+      });
+    }
+    if (!hasSessionKey) {
+      const transaction = addSessionKey({
+        account: personalAccount,
+        contract: accountContract,
+        permissions: options.sessionKey.permissions,
+        sessionKeyAddress: options.sessionKey.address,
+      });
+      await sendTransaction({
+        account: account,
+        transaction,
+      });
+    }
+  }
+
   return [account, chain] as const;
 }
 

package/src/wallets/smart/smart-wallet-integration.test.ts

@@ -15,6 +15,7 @@ import {
 } from "../../exports/extensions/erc4337.js";
 import { balanceOf } from "../../extensions/erc1155/__generated__/IERC1155/read/balanceOf.js";
 import { claimTo } from "../../extensions/erc1155/drops/write/claimTo.js";
+import { isActiveSigner } from "../../extensions/erc4337/__generated__/IAccountPermissions/read/isActiveSigner.js";
 import { setContractURI } from "../../extensions/marketplace/__generated__/IMarketplace/write/setContractURI.js";
 import { estimateGasCost } from "../../transaction/actions/estimate-gas-cost.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
@@ -458,5 +459,29 @@ describe.runIf(process.env.TW_SECRET_KEY).sequential(
         }),
       ).rejects.toThrowError(/AA21 didn't pay prefund/);
     });
+
+    it("can use a session key right after connecting", async () => {
+      const sessionKey = await generateAccount({ client });
+      const wallet = smartWallet({
+        chain,
+        gasless: true,
+        sessionKey: {
+          address: sessionKey.address,
+          permissions: {
+            approvedTargets: "*",
+          },
+        },
+      });
+      await wallet.connect({
+        client: TEST_CLIENT,
+        personalAccount,
+      });
+
+      const isSigner = await isActiveSigner({
+        contract: accountContract,
+        signer: sessionKey.address,
+      });
+      expect(isSigner).toEqual(true);
+    });
   },
 );

package/src/wallets/smart/types.ts

@@ -3,6 +3,7 @@ import type * as ox__TypedData from "ox/TypedData";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import type { ThirdwebContract } from "../../contract/contract.js";
+import type { AccountPermissions } from "../../extensions/erc4337/account/types.js";
 import type { PreparedTransaction } from "../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../transaction/types.js";
 import type { Hex } from "../../utils/encoding/hex.js";
@@ -21,6 +22,10 @@ export type SmartWalletOptions = Prettify<
   {
     chain: Chain; // TODO consider making default chain optional
     factoryAddress?: string;
+    sessionKey?: {
+      address: string;
+      permissions: AccountPermissions;
+    };
     overrides?: {
       bundlerUrl?: string;
       accountAddress?: string;