d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c37af4f191a0414b3df50019cef69362b12343cf
js/packages/thirdweb/CHANGELOG.md
T
Joaquim VergesGitHubgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
 c37af4f191 Version Packages (#8389) 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2025-11-10 14:31:30 -08:00

382 KiB
Raw Blame History

thirdweb

5.111.10

Patch Changes

5.111.9

Patch Changes

5.111.8

Patch Changes

5.111.7

Patch Changes

5.111.6

Patch Changes

5.111.5

Patch Changes

  • #8369 7da16cf Thanks @joaquim-verges! - Make maxAmount optional in wrapFetchWithPayment and loosen schema validation for payment payloads

5.111.4

Patch Changes

5.111.3

Patch Changes

5.111.2

Patch Changes

5.111.1

Patch Changes

5.111.0

Minor Changes

Patch Changes

5.110.6

Patch Changes

5.110.5

Patch Changes

5.110.4

Patch Changes

5.110.3

Patch Changes

5.110.2

Patch Changes

5.110.1

Patch Changes

5.110.0

Minor Changes

  • #8289 b30369f Thanks @jnsdls! - ### getContractMetadata() now returns a record with unknown values instead of any.

    before:

    const metadata = await getContractMetadata({ contract });
metadata; // Record<string, any>
metadata.name; // string
metadata.symbol; // string

    after:

    const metadata = await getContractMetadata({ contract });
metadata; // Record<string, unknown>
metadata.name; // string | null
metadata.symbol; // string | null

    Metadata is not (and was never) strictly defined outside of name and symbol and may contain any type of data in the record. This is not a runtime change but it may break type inference in existing apps that relied on the previous return type.

    Recommended fix: You should type-guard any key you access from "metadata".

    const metadata = await getContractMetadata({ contract });
if ("foo" in metadata && typeof metadata.foo === "string") {
  metadata.foo; // string
}

    Quick fix: If adding type assertions is not something you can do in the short term you can also assert the type directly. This is as "unsafe" as the type was before.

    const metadata = await getContractMetadata({ contract });
const foo = metadata.foo as string;

Patch Changes

  • #8280 ceba683 Thanks @MananTank! - Fix process not defined error when using "thirdweb/contract" import in Vite

5.109.1

Patch Changes

5.109.0

Minor Changes

  • #8259 d68da22 Thanks @MananTank! - Update onSuccess prop on BuyWidget, CheckoutWidget, SwapWidget, and BridgeWidget components to include statuses and quote objects instead of just quote.

    <BuyWidget
  onSuccess={(data) => {
    console.log(data.statuses);
    console.log(data.quote);
  }}
/>

Patch Changes

5.108.15

Patch Changes

  • #8257 e7f42e6 Thanks @joaquim-verges! - Improve Transactions list in connect modal Fix query cache for block explorers for raw chains

5.108.14

Patch Changes

5.108.13

Patch Changes

5.108.12

Patch Changes

5.108.11

Patch Changes

5.108.10

Patch Changes

5.108.9

Patch Changes

  • #8192 968913d Thanks @MananTank! - Fix TransactionWidget not updating when currency prop is changed after initial render

5.108.8

Patch Changes

5.108.7

Patch Changes

  • #8181 e612f16 Thanks @MananTank! - BuyWidget UI improvements and new features:
    • chain, and amount props are now optional
    • User can always change the token and chain selection in the widget
    • Both fiat and token amounts are editable
    • connected wallet can be disconnected from the widget
    • current balance displayed in the widget

5.108.6

Patch Changes

5.108.5

Patch Changes

5.108.4

Patch Changes

5.108.3

Patch Changes

5.108.2

Patch Changes

  • #8106 1f7cda6 Thanks @MananTank! - Add BridgeWidget component.

    Generate a browser script in dist/scripts/bridge-widget.js that can be used to render the BridgeWidget component in a browser with a script

  • #8126 9069351 Thanks @joaquim-verges! - Accept chain objects for x402 APIs

5.108.1

Patch Changes

5.108.0

Minor Changes

  • #8091 5249cb7 Thanks @joaquim-verges! - Accept arbitrary chain ids for x402 payments with new settlePayment() and verifyPayment() backend utility functions

Patch Changes

  • #8100 a94f229 Thanks @MananTank! - Update the onSuccess, onError, and onCancel callback props of the BuyWidget to be called with the quote object

    <BuyWidget
  onSuccess={(quote) => console.log("Swap completed:", quote)}
  onError={(error, quote) => console.error("Swap failed:", error, quote)}
  onCancel={(quote) => console.log("Swap cancelled:", quote)}
/>

5.107.1

Patch Changes

5.107.0

Minor Changes

5.106.1

Patch Changes

5.106.0

Minor Changes

  • #8044 0e3f346 Thanks @MananTank! - Add SwapWidget component for swapping tokens using thirdweb Bridge

    <SwapWidget client={thirdwebClient} />

Patch Changes

5.105.48

Patch Changes

5.105.47

Patch Changes

5.105.46

Patch Changes

5.105.45

Patch Changes

5.105.44

Patch Changes

5.105.43

Patch Changes

5.105.42

Patch Changes

5.105.41

Patch Changes

5.105.40

Patch Changes

  • #7946 597431e Thanks @MananTank! - Add Pay Modal integration in useSendAndConfirmTransaction hook similar to useSendTransaction hook

5.105.39

Patch Changes

5.105.38

Patch Changes

5.105.37

Patch Changes

5.105.36

Patch Changes

5.105.35

Patch Changes

5.105.34

Patch Changes

5.105.33

Patch Changes

5.105.32

Patch Changes

5.105.31

Patch Changes

5.105.30

Patch Changes

  • #7813 e114b2c Thanks @gregfromstl! - Skips payment selection in the TransactionWidget if the user's balance is sufficient to complete the transaction.

5.105.29

Patch Changes

5.105.28

Patch Changes

5.105.27

Patch Changes

5.105.26

Patch Changes

5.105.25

Patch Changes

5.105.24

Patch Changes

5.105.23

Patch Changes

5.105.22

Patch Changes

5.105.21

Patch Changes

5.105.20

Patch Changes

5.105.19

Patch Changes

5.105.18

Patch Changes

5.105.17

Patch Changes

  • #7634 4cbf671 Thanks @Yash094! - feat(chains): add Etherlink mainnet and testnet chains

  • #7650 426bb8b Thanks @alecananian! - react: fix native <ConnectEmbed /> component not auto-connecting

  • #7600 170c377 Thanks @gregfromstl! - Add fallback mechanism to usePaymentMethods hook for getOwnedTokens failures

    When getOwnedTokens batches fail in the usePaymentMethods hook, the system now falls back to getting native token balances for each chain using getWalletBalance. This ensures users can still access their native tokens as payment methods even when the insight API is experiencing issues, providing a more resilient user experience.

    The fallback mechanism:

    • Catches getOwnedTokens failures and logs warnings
    • Falls back to native balance fetching using getWalletBalance for each chain
    • Transforms results to match the expected format
    • Continues normal processing flow seamlessly

  • #7656 bfa0a42 Thanks @joaquim-verges! - Fix TransactionWidget when wallet has enough currency for the transaction

  • #7647 823af01 Thanks @alecananian! - react: update hooks to use core transaction types

  • #7642 0f38a12 Thanks @gregfromstl! - TransactionWidget: Hides the "UnknownContract" label

  • #7652 620e294 Thanks @joaquim-verges! - Update server wallet config types for 7702 and EOA execution

  • Updated dependencies [620e294]:

5.105.16

Patch Changes

  • #7591 f33e31a Thanks @gregfromstl! - Fixed a regression that prompted the user to pay the full amount in the TransactionWidget, rather than the difference from their current balance

  • #7589 592bf6f Thanks @MananTank! - Fix theme in ConnectButton Details Modal Buy screen

5.105.15

Patch Changes

5.105.14

Patch Changes

5.105.13

Patch Changes

5.105.12

Patch Changes

  • #7575 bfd728a Thanks @gregfromstl! - Adds the ability to hide thirdweb branding in the payment widgets with showThirdwebBranding

5.105.11

Patch Changes

5.105.10

Patch Changes

5.105.9

Patch Changes

5.105.8

Patch Changes

5.105.7

Patch Changes

5.105.6

Patch Changes

5.105.5

Patch Changes

5.105.4

Patch Changes

  • #7465 bc51255 Thanks @gregfromstl! - Adds paymentMethods prop to BuyWidget, CheckoutWidget, and TransactionWidget to control available payment options. Accepts an array of "crypto" and/or "card" values.

5.105.3

Patch Changes

5.105.2

Patch Changes

5.105.1

Patch Changes

5.105.0

Minor Changes

Patch Changes

5.104.1

Patch Changes

5.104.0

Minor Changes

Patch Changes

5.103.1

Patch Changes

5.103.0

Minor Changes

  • #7354 ed81006 Thanks @gregfromstl! - Adds new components BuyWidget, CheckoutWidget, and TransactionWidget

    BuyWidget

    A component that allows users to purchase tokens or NFTs directly within your application.

    Example:

    import { BuyWidget } from "thirdweb/react";

function App() {
  return (
    <BuyWidget
      client={client}
      chain={chain}
      tokenAddress="0x..." // Token or NFT contract address
      recipient="0x..." // Optional: recipient address
      theme="light" // Optional: "light" or "dark"
    />
  );
}

    CheckoutWidget

    A comprehensive checkout experience for purchasing digital assets with multiple payment options.

    Example:

    import { CheckoutWidget } from "thirdweb/react";

function App() {
  return (
    <CheckoutWidget
      client={client}
      chain={chain}
      items={[
        {
          tokenAddress: "0x...",
          tokenId: "1", // For NFTs
          quantity: "1",
        },
      ]}
      onSuccess={(result) => console.log("Purchase successful:", result)}
      theme="dark" // Optional: "light" or "dark"
    />
  );
}

    TransactionWidget

    A widget for executing arbitrary blockchain transactions with a user-friendly interface.

    Example:

    import { TransactionWidget } from "thirdweb/react";
import { prepareContractCall } from "thirdweb";

function App() {
  const transaction = prepareContractCall({
    contract: myContract,
    method: "transfer",
    params: [recipientAddress, amount],
  });

  return (
    <TransactionWidget
      client={client}
      transaction={transaction}
      onSuccess={(result) => console.log("Transaction successful:", result)}
      onError={(error) => console.error("Transaction failed:", error)}
      theme="light" // Optional: "light" or "dark"
    />
  );
}

Patch Changes

5.102.6

Patch Changes

5.102.5

Patch Changes

5.102.4

Patch Changes

5.102.3

Patch Changes

  • #7240 ad8cc9a Thanks @joaquim-verges! - Add Bridge.tokens() function to retrieve supported Universal Bridge tokens

    New function allows fetching and filtering tokens supported by the Universal Bridge service. Supports filtering by chain ID, token address, symbol, name, and includes pagination with limit/offset parameters.

    import { Bridge } from "thirdweb";

// Get all supported tokens
const tokens = await Bridge.tokens({
  client: thirdwebClient,
});

// Filter tokens by chain and symbol
const ethTokens = await Bridge.tokens({
  chainId: 1,
  symbol: "USDC",
  limit: 50,
  client: thirdwebClient,
});

  • #7242 f10fbc8 Thanks @joaquim-verges! - Optimize fiat conversion query

  • #7230 8245c06 Thanks @gregfromstl! - Fixes token pricing in PayEmbed

  • #7234 4e93539 Thanks @MananTank! - Fallback to insight response if RPC request fails in ERC721 & ERC1155 getNFTs extension

  • #7241 38627d3 Thanks @joaquim-verges! - Handle smart account detection for inApp and ecosystem wallets

5.102.2

Patch Changes

5.102.1

Patch Changes

  • #7211 31c4bb2 Thanks @joaquim-verges! - Add account deletion support when unlinking profiles

    Added optional allowAccountDeletion parameter to useUnlinkProfile hook and unlinkProfile function. When set to true, this allows deleting the entire account when unlinking the last profile associated with it.

    React Hook Example:

    import { useUnlinkProfile } from "thirdweb/react";

const { mutate: unlinkProfile } = useUnlinkProfile();

const handleUnlink = () => {
  unlinkProfile({
    client,
    profileToUnlink: connectedProfiles[0],
    allowAccountDeletion: true, // Delete account if last profile
  });
};

    Direct Function Example:

    import { unlinkProfile } from "thirdweb/wallets/in-app";

const updatedProfiles = await unlinkProfile({
  client,
  profileToUnlink: profiles[0],
  allowAccountDeletion: true, // Delete account if last profile
});

5.102.0

Minor Changes

  • #7190 861e623 Thanks @joaquim-verges! - Enhanced Engine functionality with server wallet management, search transactions and batch transaction support:

    • Added Engine.createServerWallet() to create a new server wallet with a custom label

      import { Engine } from "thirdweb";

const serverWallet = await Engine.createServerWallet({
  client,
  label: "My Server Wallet",
});
console.log(serverWallet.address);
console.log(serverWallet.smartAccountAddress);

    • Added Engine.getServerWallets() to list all existing server wallets

      import { Engine } from "thirdweb";

const serverWallets = await Engine.getServerWallets({
  client,
});
console.log(serverWallets);

    • Added Engine.searchTransactions() to search for transactions by various filters (id, chainId, from address, etc.)

      // Search by transaction IDs
const transactions = await Engine.searchTransactions({
  client,
  filters: [
    {
      field: "id",
      values: ["1", "2", "3"],
    },
  ],
});

// Search by chain ID and sender address
const transactions = await Engine.searchTransactions({
  client,
  filters: [
    {
      filters: [
        {
          field: "from",
          values: ["0x1234567890123456789012345678901234567890"],
        },
        {
          field: "chainId",
          values: ["8453"],
        },
      ],
      operation: "AND",
    },
  ],
  pageSize: 100,
  page: 0,
});

    • Added serverWallet.enqueueBatchTransaction() to enqueue multiple transactions in a single batch

      // Prepare multiple transactions
const transaction1 = claimTo({
  contract,
  to: firstRecipient,
  quantity: 1n,
});
const transaction2 = claimTo({
  contract,
  to: secondRecipient,
  quantity: 1n,
});

// Enqueue as a batch
const { transactionId } = await serverWallet.enqueueBatchTransaction({
  transactions: [transaction1, transaction2],
});

// Wait for batch completion
const { transactionHash } = await Engine.waitForTransactionHash({
  client,
  transactionId,
});

    • Improved server wallet transaction handling with better error reporting

Patch Changes

5.101.2

Patch Changes

5.101.1

Patch Changes

5.101.0

Minor Changes

  • #7103 f3abea3 Thanks @jnsdls! - Added webhook verification functionality to securely verify incoming webhooks from thirdweb. This includes:

    • New Webhook.parse function to verify webhook signatures and timestamps
    • Support for both x-payload-signature and x-pay-signature header formats
    • Timestamp verification with configurable tolerance
    • Version 2 webhook payload type support

    Example usage:

    import { Webhook } from "thirdweb/bridge";

const webhook = await Webhook.parse(
  payload,
  headers,
  secret,
  300, // optional tolerance in seconds
);

5.100.2

Patch Changes

5.100.1

Patch Changes

5.100.0

Minor Changes

  • #7064 64964da Thanks @gregfromstl! - Adds Bridge.Transfer module for direct token transfers:

    import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";

const quote = await Bridge.Transfer.prepare({
  chainId: 1,
  tokenAddress: NATIVE_TOKEN_ADDRESS,
  amount: toWei("0.01"),
  sender: "0x...",
  receiver: "0x...",
  client: thirdwebClient,
});

    This will return a quote that might look like:

    {
  originAmount: 10000026098875381n,
  destinationAmount: 10000000000000000n,
  blockNumber: 22026509n,
  timestamp: 1741730936680,
  estimatedExecutionTimeMs: 1000
  steps: [
    {
      originToken: {
        chainId: 1,
        address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
        symbol: "ETH",
        name: "Ethereum",
        decimals: 18,
        priceUsd: 2000,
        iconUri: "https://..."
      },
      destinationToken: {
        chainId: 1,
        address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
        symbol: "ETH",
        name: "Ethereum",
        decimals: 18,
        priceUsd: 2000,
        iconUri: "https://..."
      },
      originAmount: 10000026098875381n,
      destinationAmount: 10000000000000000n,
      estimatedExecutionTimeMs: 1000
      transactions: [
        {
          action: "approval",
          id: "0x",
          to: "0x...",
          data: "0x...",
          chainId: 1,
          type: "eip1559"
        },
        {
          action: "transfer",
          to: "0x...",
          value: 10000026098875381n,
          data: "0x...",
          chainId: 1,
          type: "eip1559"
        }
      ]
    }
  ],
  expiration: 1741730936680,
  intent: {
    chainId: 1,
    tokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
    amount: 10000000000000000n,
    sender: "0x...",
    receiver: "0x..."
  }
}

    Sending the transactions

    The transactions array is a series of ox EIP-1559 transactions that must be executed one after the other in order to fulfill the complete route. There are a few things to keep in mind when executing these transactions:

    • Approvals will have the approval action specified. You can perform approvals with sendAndConfirmTransaction, then proceed to the next transaction.
    • All transactions are assumed to be executed by the sender address, regardless of which chain they are on. The final transaction will use the receiver as the recipient address.
    • If an expiration timestamp is provided, all transactions must be executed before that time to guarantee successful execution at the specified price.

    NOTE: To get the status of each non-approval transaction, use Bridge.status rather than checking for transaction inclusion. This function will ensure full completion of the transfer.

    You can include arbitrary data to be included on any webhooks and status responses with the purchaseData option:

    const quote = await Bridge.Transfer.prepare({
  chainId: 1,
  tokenAddress: NATIVE_TOKEN_ADDRESS,
  amount: toWei("0.01"),
  sender: "0x...",
  receiver: "0x...",
  purchaseData: {
    reference: "payment-123",
    metadata: {
      note: "Transfer to Alice",
    },
  },
  client: thirdwebClient,
});

    Fees

    There may be fees associated with the transfer. These fees are paid by the feePayer address, which defaults to the sender address. You can specify a different address with the feePayer option. If you do not specify an option or explicitly specify sender, the fees will be added to the input amount. If you specify the receiver as the fee payer the fees will be subtracted from the destination amount.

    For example, if you were to request a transfer with feePayer set to receiver:

    const quote = await Bridge.Transfer.prepare({
  chainId: 1,
  tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
  amount: 100_000_000n, // 100 USDC
  sender: "0x...",
  receiver: "0x...",
  feePayer: "receiver",
  client: thirdwebClient,
});

    The returned quote might look like:

    {
  originAmount: 100_000_000n, // 100 USDC
  destinationAmount: 99_970_000n, // 99.97 USDC
  ...
}

    If you were to request a transfer with feePayer set to sender:

    const quote = await Bridge.Transfer.prepare({
  chainId: 1,
  tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
  amount: 100_000_000n, // 100 USDC
  sender: "0x...",
  receiver: "0x...",
  feePayer: "sender",
  client: thirdwebClient,
});

    The returned quote might look like:

    {
  originAmount: 100_030_000n, // 100.03 USDC
  destinationAmount: 100_000_000n, // 100 USDC
  ...
}

Patch Changes

  • #7064 64964da Thanks @gregfromstl! - Faster useSendTransaction execution

  • #7092 d623978 Thanks @joaquim-verges! - Show deposit modal for tokens that don't have any UB routes

  • #7076 89ccc80 Thanks @joaquim-verges! - Added Bridge.Onramp.prepare and Bridge.Onramp.status functions

    Bridge.Onramp.prepare

    Prepares an onramp transaction, returning a link from the specified provider to onramp to the specified token.

    import { Bridge } from "thirdweb";
import { ethereum } from "thirdweb/chains";
import { NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb/utils";

const preparedOnramp = await Bridge.Onramp.prepare({
  client: thirdwebClient,
  onramp: "stripe",
  chainId: ethereum.id,
  tokenAddress: NATIVE_TOKEN_ADDRESS,
  receiver: "0x...", // receiver's address
  amount: toWei("10"), // 10 of the destination token
  // Optional params:
  // sender: "0x...", // sender's address
  // onrampTokenAddress: NATIVE_TOKEN_ADDRESS, // token to initially onramp to
  // onrampChainId: 1, // chain to initially onramp to
  // currency: "USD",
  // maxSteps: 2,
  // purchaseData: { customId: "123" }
});

console.log(preparedOnramp.link); // URL to redirect the user to
console.log(preparedOnramp.currencyAmount); // Price in fiat currency

    Bridge.Onramp.status

    Retrieves the status of an Onramp session created via Bridge.Onramp.prepare.

    import { Bridge } from "thirdweb";

const onrampStatus = await Bridge.Onramp.status({
  id: "022218cc-96af-4291-b90c-dadcb47571ec",
  client: thirdwebClient,
});

// Possible results:
// {
//   status: "CREATED",
//   transactions: [],
//   purchaseData: {
//     orderId: "abc-123",
//   },
// }
//
// or
// {
//   status: "PENDING",
//   transactions: [],
//   purchaseData: {
//     orderId: "abc-123",
//   },
// }
//
// or
// {
//   status: "COMPLETED",
//   transactions: [
//     {
//       chainId: 1,
//       transactionHash: "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
//     },
//   ],
//   purchaseData: {
//     orderId: "abc-123",
//   },
// }

5.99.3

Patch Changes

5.99.2

Patch Changes

5.99.1

Patch Changes

5.99.0

Minor Changes

  • #7003 58e343c Thanks @joaquim-verges! - Breaking change: EIP-5792 support

    We've significantly improved our EIP-5792 apis, which come with some breaking changes:

    New Functions Added

    1. useSendAndConfirmCalls

      • Description: Hook to send and wait for confirmation of EIP-5792 calls
      • Returns: React Query mutation object with transaction receipts
      • Example:
      const { mutate: sendAndConfirmCalls, data: result } =
  useSendAndConfirmCalls();
await sendAndConfirmCalls({
  client,
  calls: [tx1, tx2],
});
console.log("Transaction hash:", result.receipts?.[0]?.transactionHash);

    2. useWaitForCallsReceipt

      • Description: Hook to wait for the receipt of EIP-5792 calls, perfect for splitting submitting the call and waiting for receipt
      • Returns: React Query object with call receipts
      • Example:
      const { mutate: sendCalls, data: result } = useSendCalls();
const { data: receipt, isLoading } = useWaitForCallsReceipt(result);

    Breaking Changes

    useSendCalls Changes

    Before

    // mutation returns id a string
const sendCalls = useSendCalls({ client });

    After

    // no longer needs client
// mutation returns an object with id
const sendCalls = useSendCalls();

    Waiting for call receipts is now done separately, via the useWaitForCallsReceipt.

    Before

    const { mutate: sendCalls, data: receipt } = useSendCalls({
  client,
  waitForBundle: true,
});

    After

    const { mutate: sendCalls, data: result } = useSendCalls();
const { data: receipt, isLoading } = useWaitForCallsReceipt(result);

    You can also use the helper useSendAndConfirmCalls to combine both submitting and waiting for confirmation.

    const { mutate: sendAndConfirmCalls, data: receipt } =
  useSendAndConfirmCalls();

    sendCalls Changes

    Before:

    // Old output type
type SendCallsResult = string;

    After:

    // New output type
type SendCallsResult = {
  id: string;
  client: ThirdwebClient;
  chain: Chain;
  wallet: Wallet;
};

5.98.2

Patch Changes

5.98.1

Patch Changes

5.98.0

Minor Changes

  • #6874 e96ebba Thanks @joaquim-verges! - EIP7702 support for in-app wallets

    You can now turn your in-app wallets into smart accounts with 7702!

    This lets you:

    • sponsor transactions
    • batch transactions
    • add session keys
    • and more!

    simply pass the executionMode "EIP7702" to get started:

    const wallet = inAppWallet({
  executionMode: {
    mode: "EIP7702",
    sponsorGas: true,
  },
});

    Keep in mind that this will only work on chains that support 7702.

5.97.3

Patch Changes

5.97.2

Patch Changes

5.97.1

Patch Changes

5.97.0

Minor Changes

  • #6956 08cff4b Thanks @gregfromstl! - feat(bridge): Add chains endpoint to retrieve Universal Bridge supported chains

    import { Bridge } from "thirdweb";

const chains = await Bridge.chains({
  client: thirdwebClient,
});

    Returned chains include chain information such as chainId, name, icon, and nativeCurrency details.

Patch Changes

  • #6953 736c3f8 Thanks @gregfromstl! - Adds the maxSteps option to Buy.quote, Buy.prepare, Sell.quote, and Sell.prepare functions. This allows users to limit quotes to routes with a specific number of steps or fewer. For example:

    const quote = await bridge.Buy.quote({
  originChainId: 1,
  originTokenAddress: "0x...",
  destinationChainId: 137,
  destinationTokenAddress: "0x...",
  amount: 1000000n,
  maxSteps: 2,
});

const preparedQuote = await bridge.Buy.prepare({
  originChainId: 1,
  originTokenAddress: "0x...",
  destinationChainId: 137,
  destinationTokenAddress: "0x...",
  amount: 1000000n,
  sender: "0x...",
  receiver: "0x...",
  maxSteps: 2,
});

const quote = await bridge.Sell.quote({
  originChainId: 1,
  originTokenAddress: "0x...",
  destinationChainId: 137,
  destinationTokenAddress: "0x...",
  amount: 1000000n,
  maxSteps: 3,
});

const preparedQuote = await bridge.Sell.prepare({
  originChainId: 1,
  originTokenAddress: "0x...",
  destinationChainId: 137,
  destinationTokenAddress: "0x...",
  amount: 1000000n,
  sender: "0x...",
  receiver: "0x...",
  maxSteps: 3,
});

  • #6952 055e451 Thanks @gregfromstl! - +Deprecate legacy Pay functions

  • #6955 6dd2b09 Thanks @gregfromstl! - Added the sortBy option to Bridge.routes

    import { Bridge } from "thirdweb";

const routes = await Bridge.routes({
  originChainId: 1,
  originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
  limit: 10,
  offset: 0,
  sortBy: "popularity",
  client: thirdwebClient,
});

  • #6900 e9d0b6e Thanks @MananTank! - Only attempt autoconnect once

5.96.8

Patch Changes

5.96.7

Patch Changes

5.96.6

Patch Changes

5.96.5

Patch Changes

5.96.4

Patch Changes

  • #6849 e28eb73 Thanks @MananTank! - Signature Screen loading state improvements

  • #6858 adcbec6 Thanks @mmahdigh! - Add name and icon to inAppWallet metadata props to customize in-app wallets inside the connect modal

5.96.3

Patch Changes

5.96.2

Patch Changes

5.96.1

Patch Changes

5.96.0

Minor Changes

  • #6830 e526f75 Thanks @gregfromstl! - Enhanced SDK Bridge functionality with the following key updates:

    1. Breaking Change: Standardized parameter naming in bridge functions:

      • Changed buyAmountWei to amount in Buy functions
      • Changed sellAmountWei to amount in Sell functions

      Example:

      // Before
const buyQuote = await buy.quote({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  buyAmountWei: toWei("0.01"),
  client: thirdwebClient,
});

// After
const buyQuote = await buy.quote({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  amount: toWei("0.01"),
  client: thirdwebClient,
});

    2. Enhanced Quote Structure: Added steps array to buy/sell quote responses with detailed token information:

      // Steps contains detailed information about each step in a cross-chain transaction
steps: [
  {
    originToken: {
      chainId: 1,
      address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
      symbol: "ETH",
      name: "Ethereum",
      decimals: 18,
      priceUsd: 2000,
      iconUri: "https://...",
    },
    destinationToken: {
      chainId: 10,
      address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
      symbol: "ETH",
      name: "Ethereum",
      decimals: 18,
      priceUsd: 2000,
      iconUri: "https://...",
    },
    originAmount: 1000000000000000000n,
    destinationAmount: 9980000000000000000n,
    estimatedExecutionTimeMs: 1000,
    transactions: [
      /* transactions for this step */
    ],
  },
];

    3. Added Purchase Data Support: Added optional purchaseData parameter to Buy and Sell functions:

      // Example with purchaseData
const quote = await buy.prepare({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  amount: toWei("0.01"),
  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
  purchaseData: {
    foo: "bar",
  },
  client: thirdwebClient,
});

    4. Enhanced Status Responses: Status responses now include the purchaseData field that was provided during the initial transaction:

      // Status response includes purchaseData
{
  status: "COMPLETED",
  // ...other status fields
  purchaseData: {
    foo: "bar"
  }
}

    5. Updated API Interactions: Changed from query parameters to JSON body for prepare functions to accommodate complex data.

Patch Changes

5.95.3

Patch Changes

5.95.2

Patch Changes

5.95.1

Patch Changes

5.95.0

Minor Changes

  • #6706 185d2f3 Thanks @joaquim-verges! - Expose getOwnedTokens, getOwnedNFTs and getTransaction functions

    You can now use Insight, our in-house indexer directly from the SDK with a simple API:

    Get Owned ERC20 tokens

    import { Insight } from "thirdweb";

const tokens = await Insight.getOwnedTokens({
  client,
  ownerAddress,
  chains: [base, polygon, arbitrum],
});

    Get Owned NFTs (ERC721 and ERC1155)

    import { Insight } from "thirdweb";

const nfts = await Insight.getOwnedNFTs({
  client,
  ownerAddress,
  chains: [sepolia],
});

    Get Transactions for a given wallet address

    import { Insight } from "thirdweb";

const transactions = await Insight.getTransactions({
  client,
  walletAddress,
  chains: [sepolia],
});

    All functions come with extra query filters for more granular queries, refer to the documentation for more details.

Patch Changes

  • #6760 7ecfcb9 Thanks @joaquim-verges! - Add thirdweb branding to PayEmbed

  • #6753 4cf15a2 Thanks @joaquim-verges! - Use insight for 1155 getNFTs, getOwnedNFTs and getNFT

  • #6752 23d3757 Thanks @joaquim-verges! - Simplify RPC request handling

  • #6741 8d4d991 Thanks @joaquim-verges! - Use insight for erc821/getNFT, erc721/getNFTs and erc721/getOwnedNFTs

    Standard ERC721 getNFT, getNFTs and getOwnedNFTs now use insight, our in house indexer by default. If indexer is not availbale, will fallback to RPC.

    You can also use the indexer directly using the Insight API:

    for an entire collection

    import { Insight } from "thirdweb";

const events = await Insight.getContractNFTs({
  client,
  chains: [sepolia],
  contractAddress: "0x1234567890123456789012345678901234567890",
});

    or for a single NFT

    import { Insight } from "thirdweb";

const events = await Insight.getNFT({
  client,
  chains: [sepolia],
  contractAddress: "0x1234567890123456789012345678901234567890",
  tokenId: 1n,
});

  • #6683 a3e7300 Thanks @kumaryash90! - Get indexed events from getContractEvents

    You can now automatically query indexed events on supported chains when calling getContractEvents

    import { getContractEvents } from "thirdweb";

const events = await getContractEvents({
  contract: DOODLES_CONTRACT,
  events: [transferEvent()],
});

    This method falls back to RPC eth_getLogs if the indexer is not available.

    You can also use the dedicated indexer function via the Insight export

    import { Insight } from "thirdweb";

const events = await Insight.getContractEvents({
  client,
  chains: [sepolia],
  contractAddress: "0x1234567890123456789012345678901234567890",
  event: transferEvent(),
  decodeLogs: true,
});

  • #6732 a45c558 Thanks @gregfromstl! - Improve pay error messages

  • #6758 62ce05e Thanks @joaquim-verges! - Better error message for getUser

  • #6734 2a7df33 Thanks @joaquim-verges! - Better error messages for failed requests

  • Updated dependencies [185d2f3]:

5.94.2

Patch Changes

  • #6716 0ea8987 Thanks @gregfromstl! - Miscellaneous PayEmbed error improvements:

    • Adds title and message to PayEmbed errors
    • Prevents propagating raw errors to the user when in purchase or transaction mode
    • Fixes bubble alignment on pulsing animation

  • #6712 e574114 Thanks @joaquim-verges! - Dont retry on user connection rejection in eip1193 connector

5.94.1

Patch Changes

5.94.0

Minor Changes

  • #6695 86070fa Thanks @joaquim-verges! - Add feePayer option for direct_payment mode of PayEmbed

    For direct payments via the PayEmbed, you can now specify the payer of the protocol fee for direct transfers. Can be "sender" or "receiver", defaults to "sender".

    <PayEmbed
        client={THIRDWEB_CLIENT}
        payOptions={{
          mode: "direct_payment",
          paymentInfo: {
            amount: "2",
            chain: base,
            token: getDefaultToken(base, "USDC"),
            sellerAddress: "0x...",
            feePayer: "receiver", // <-- transfer fee paid by the receiver
          },
          metadata: {
            name: "Black Hoodie (Size L)",
            image: "/drip-hoodie.png",
          },
        }}
      />

5.93.17

Patch Changes

5.93.16

Patch Changes

5.93.15

Patch Changes

5.93.14

Patch Changes

5.93.13

Patch Changes

5.93.12

Patch Changes

5.93.11

Patch Changes

5.93.10

Patch Changes

5.93.9

Patch Changes

5.93.8

Patch Changes

5.93.7

Patch Changes

5.93.6

Patch Changes

  • #6569 2d4c5ff Thanks @MananTank! - Fix "Cannot read properties of undefined (reading 'forwardRef')" error in certain bundler setups

5.93.5

Patch Changes

5.93.4

Patch Changes

5.93.3

Patch Changes

5.93.2

Patch Changes

5.93.1

Patch Changes

5.93.0

Minor Changes

  • #6464 654f879 Thanks @gregfromstl! - Adds a new Bridge module to the thirdweb SDK to access the Universal Bridge.

    Features

    Buy & Sell Operations

    The Bridge module makes it easy to buy and sell tokens across chains:

    • Bridge.Buy - For specifying the destination amount you want to receive
    • Bridge.Sell - For specifying the origin amount you want to send

    Each operation provides two functions:

    1. quote - Get an estimate without connecting a wallet
    2. prepare - Get a finalized quote with transaction data

    Buy Example

    import { Bridge, toWei, NATIVE_TOKEN_ADDRESS } from "thirdweb";

// First, get a quote to see approximately how much you'll pay
const buyQuote = await Bridge.Buy.quote({
  originChainId: 1, // Ethereum
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10, // Optimism
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  buyAmountWei: toWei("0.01"), // I want to receive 0.01 ETH on Optimism
  client: thirdwebClient,
});

console.log(
  `To get ${buyQuote.destinationAmount} wei on destination chain, you need to pay ${buyQuote.originAmount} wei`,
);

// When ready to execute, prepare the transaction
const preparedBuy = await Bridge.Buy.prepare({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  buyAmountWei: toWei("0.01"),
  sender: "0x...", // Your wallet address
  receiver: "0x...", // Recipient address (can be the same as sender)
  client: thirdwebClient,
});

// The prepared quote contains the transactions you need to execute
console.log(`Transactions to execute: ${preparedBuy.transactions.length}`);

    Sell Example

    import { Bridge, toWei } from "thirdweb";

// First, get a quote to see approximately how much you'll receive
const sellQuote = await Bridge.Sell.quote({
  originChainId: 1, // Ethereum
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10, // Optimism
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  sellAmountWei: toWei("0.01"), // I want to sell 0.01 ETH from Ethereum
  client: thirdwebClient,
});

console.log(
  `If you send ${sellQuote.originAmount} wei, you'll receive approximately ${sellQuote.destinationAmount} wei`,
);

// When ready to execute, prepare the transaction
const preparedSell = await Bridge.Sell.prepare({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  sellAmountWei: toWei("0.01"),
  sender: "0x...", // Your wallet address
  receiver: "0x...", // Recipient address (can be the same as sender)
  client: thirdwebClient,
});

// Execute the transactions in sequence
for (const tx of preparedSell.transactions) {
  // Send the transaction using your wallet
  // Wait for it to be mined
}

    Bridge Routes

    You can discover available bridge routes using the routes function:

    import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";

// Get all available routes
const allRoutes = await Bridge.routes({
  client: thirdwebClient,
});

// Filter routes for a specific token or chain
const filteredRoutes = await Bridge.routes({
  originChainId: 1, // From Ethereum
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10, // To Optimism
  client: thirdwebClient,
});

// Paginate through routes
const paginatedRoutes = await Bridge.routes({
  limit: 10,
  offset: 0,
  client: thirdwebClient,
});

    Bridge Transaction Status

    After executing bridge transactions, you can check their status:

    import { Bridge } from "thirdweb";

// Check the status of a bridge transaction
const bridgeStatus = await Bridge.status({
  transactionHash:
    "0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d",
  chainId: 8453, // The chain ID where the transaction was initiated
  client: thirdwebClient,
});

// The status will be one of: "COMPLETED", "PENDING", "FAILED", or "NOT_FOUND"
if (bridgeStatus.status === "completed") {
  console.log(`
    Bridge completed!
    Sent: ${bridgeStatus.originAmount} wei on chain ${bridgeStatus.originChainId}
    Received: ${bridgeStatus.destinationAmount} wei on chain ${bridgeStatus.destinationChainId}
  `);
} else if (bridgeStatus.status === "pending") {
  console.log("Bridge transaction is still pending...");
} else {
  console.log("Bridge transaction failed");
}

    Error Handling

    The Bridge module provides consistent error handling with descriptive error messages:

    try {
  await Bridge.Buy.quote({
    // ...params
  });
} catch (error) {
  // Errors will have the format: "ErrorCode | Error message details"
  console.error(error.message); // e.g. "AmountTooHigh | The provided amount is too high for the requested route."
}

    Types

    The Bridge module exports the following TypeScript types:

    • Route - Describes a bridge route between chains and tokens
    • Status - Represents the status of a bridge transaction
    • Quote - Contains quote information for a bridge transaction
    • PreparedQuote - Extends Quote with transaction data

    Integration

    The Bridge module is accessible as a top-level export:

    import { Bridge } from "thirdweb";

    Use Bridge.Buy, Bridge.Sell, Bridge.routes, and Bridge.status to access the corresponding functionality.

Patch Changes

5.92.3

Patch Changes

5.92.2

Patch Changes

5.92.1

Patch Changes

5.92.0

Minor Changes

5.91.1

Patch Changes

5.91.0

Minor Changes

5.90.4

Patch Changes

5.90.3

Patch Changes

5.90.2

Patch Changes

5.90.1

Patch Changes

5.90.0

Minor Changes

  • #6370 5625ff1 Thanks @joaquim-verges! - Added estimateUserOpGasCost() utility function for estimating the total gas cost in wei/ether of user operations

Patch Changes

5.89.1

Patch Changes

5.89.0

Minor Changes

Patch Changes

5.88.7

Patch Changes

5.88.6

Patch Changes

  • #6274 b182302 Thanks @kumaryash90! - bytes32 salt for deterministic deployment

  • #6283 5a08176 Thanks @joaquim-verges! - Respect supportedTokens override in PayEmbed

  • #6281 a0f3557 Thanks @joaquim-verges! - Fix text wrapping for long balances in token selector

  • #6282 45ca033 Thanks @joaquim-verges! - Deprecated viemAdapter.walletClient in favor of viemAdapter.wallet to take wallet instances instead of accounts

    BEFORE:

    import { viemAdapter } from "thirdweb/adapters/viem";

const walletClient = viemAdapter.walletClient.toViem({
  account, // Account
  chain,
  client,
});

    AFTER:

    import { viemAdapter } from "thirdweb/adapters/viem";

const walletClient = viemAdapter.wallet.toViem({
  wallet, // now pass a connected Wallet instance instead of an account
  chain,
  client,
});

    This allows for full wallet lifecycle management with the viem adapter, including switching chains, adding chains, events and more.

5.88.5

Patch Changes

5.88.4

Patch Changes

5.88.3

Patch Changes

5.88.2

Patch Changes

5.88.1

Patch Changes

5.88.0

Minor Changes

  • #6194 9663079 Thanks @joaquim-verges! - Added session keys to smart wallet options

    You can now pass a sessionKey to the smartWallet options function to immediately add a session key to the smart wallet upon connection.

    This is great in combination with an engine backend wallet! Let's you act on behalf of the user from your backend, making executing transactions as easy as a REST API call. Also unblocks automations, like renewing a subscription, or paying for a service.

    const wallet = smartWallet({
  sessionKey: {
    address: "0x...", // the session key address (ex: engine backend wallet)
    permissions: {
      approvedTargets: ["0x..."], // allowed contract addresses (or * for all)
      nativeTokenLimitPerTransaction: 0.1, // max spend per transaction in ETH
      permissionEndTimestamp: new Date(Date.now() + 1000 * 60 * 60), // expiration date
    },
  },
});

// this will connect the user wallet and add the session key if not already added
await wallet.connect({
  client: TEST_CLIENT,
  personalAccount,
});

    You can also pass the sessionKey to the ConnectButton, ConnectEmbed components and useConnect hook.

    <ConnectButton
  client={client}
  accountAbstraction={{
    chain,
    sponsorGas: true,
    sessionKey: {
      address: "0x...",
      permissions: {
        approvedTargets: "*",
      },
    },
  }}
/>

    Also works for the inAppWallet smartAccount option!

    const wallet = inAppWallet({
  smartAccount: {
    chain,
    sponsorGas: true,
    sessionKey: {
      address: "0x...",
      permissions: {
        approvedTargets: "*",
      },
    },
  },
});

Patch Changes

5.87.4

Patch Changes

5.87.3

Patch Changes

5.87.2

Patch Changes

5.87.1

Patch Changes

5.87.0

Minor Changes

  • #6082 4550bb2 Thanks @joaquim-verges! - Support Account and Wallet headless components in react native

    You can now use the Account and Wallet headless components in react native, this lets you build your own UI, styling it however you want, but letting the components handle the logic.

    Example Account components usage:

    <AccountProvider address={account.address} client={client}>
  /* avatar */
  <AccountAvatar
    loadingComponent={
      <AccountBlobbie size={92} style={{ borderRadius: 100 }} />
    }
    fallbackComponent={
      <AccountBlobbie size={92} style={{ borderRadius: 100 }} />
    }
    style={{
      width: 92,
      height: 92,
      borderRadius: 100,
    }}
  />
  /* address */
  <AccountAddress
    style={{ fontSize: 16, color: Colors.secondary }}
    formatFn={shortenAddress}
  />
  /* balance */
  <AccountBalance
    showBalanceInFiat={"USD"}
    chain={chain}
    loadingComponent={
      <ActivityIndicator size="large" color={Colors.accent} />
    }
    fallbackComponent={
      <Text className="text-primary">Failed to load balance</Text>
    }
    style={{
      color: "white",
      fontSize: 48,
      fontWeight: "bold",
    }}
  />
</AccountProvider>

    Example Wallet components usage:

    <WalletProvider id={"io.metamask"}>
  <WalletIcon width={32} height={32} />
  <WalletName style={{ fontSize: 16, color: Colors.primary }} />
</WalletProvider>

Patch Changes

5.86.6

Patch Changes

5.86.5

Patch Changes

5.86.4

Patch Changes

5.86.3

Patch Changes

5.86.2

Patch Changes

5.86.1

Patch Changes

5.86.0

Minor Changes

  • #5989 8b5cb47 Thanks @gregfromstl! - Feature: Adds deployMarketplaceContract

    import { deployMarketplaceContract } from "thirdweb/deploys";

const address = await deployMarketplaceContract({
  client,
  chain,
  account,
  params: {
    name: "MarketplaceV3",
    description: "MarketplaceV3 deployed using thirdweb SDK",
    platformFeeRecipient: "0x21d514c90ee4E4e4Cd16Ce9185BF01F0F1eE4A04",
    platformFeeBps: 1000,
  },
});

Patch Changes

5.85.0

Minor Changes

  • #5972 0b62397 Thanks @joaquim-verges! - Support multiple messages for Nebula API, updated input props.

    Some prop names have been updated:

    prompt -> messsage context -> contextFilter

    Nebula.chat({
  client,
  // prompt is now message
  message:
    "What's the total supply of this contract: 0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
  // contextFilter is now contextFilter
  contextFilter: {
    chains: [sepolia],
  },
});

    The Nebula.chat and Nebula.execute functions now support multiple input messages, and the input properties have been updated to match the http API.

    Nebula.chat({
  client,
  // multi message format
  messages: [
    {
      role: "user",
      content:
        "Tell me the name of this contract: 0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
    },
    {
      role: "assistant",
      content: "The name of the contract is My NFT Collection",
    },
    {
      role: "user",
      content: "What's the symbol of this contract?",
    },
  ],
  contextFilter: {
    chains: [sepolia],
  },
});

    Same changes apply to Nebula.execute.

    Nebula.execute({
  client,
  account,
  messages: [
    { role: "user", content: "What's the address of vitalik.eth" },
    {
      role: "assistant",
      content:
        "The address of vitalik.eth is 0xd8dA6BF26964aF8E437eEa5e3616511D7G3a3298",
    },
    { role: "user", content: "Send them 0.0001 ETH" },
  ],
  contextFilter: {
    chains: [sepolia],
  },
});

Patch Changes

5.84.0

Minor Changes

  • #5889 7a3dff0 Thanks @ElasticBottle! - Exposes autoConnect as a standalone function for use outside of react.

    import { autoConnect } from "thirdweb/wallets";

const autoConnected = await autoConnect({
  client,
  onConnect: (wallet) => {
    console.log("wallet", wallet); /// wallet that is have been auto connected.
  },
});
console.log("isAutoConnected", isAutoConnected); // true or false

  • #5947 d1c03b0 Thanks @joaquim-verges! - Introducing engineAccount() for backend usage

    You can now use engineAccount() on the backend to create an account that can send transactions via your engine instance.

    This lets you use the full catalog of thirdweb SDK functions and extensions on the backend, with the performance, reliability, and monitoring of your engine instance.

    // get your engine url, auth token, and wallet address from your engine instance on the dashboard
const engine = engineAccount({
  engineUrl: process.env.ENGINE_URL,
  authToken: process.env.ENGINE_AUTH_TOKEN,
  walletAddress: process.env.ENGINE_WALLET_ADDRESS,
});

// Now you can use engineAcc to send transactions, deploy contracts, etc.
// For example, you can prepare extension functions:
const tx = await claimTo({
  contract: getContract({ client, chain, address: "0x..." }),
  to: "0x...",
  tokenId: 0n,
  quantity: 1n,
});

// And then send the transaction via engine
// this will automatically wait for the transaction to be mined and return the transaction hash
const result = await sendTransaction({
  account: engine, // forward the transaction to your engine instance
  transaction: tx,
});

console.log(result.transactionHash);

  • #5948 b10f306 Thanks @joaquim-verges! - Introducing Nebula API

    You can now chat with Nebula and ask it to execute transactions with your wallet.

    Ask questions about real time blockchain data.

    import { Nebula } from "thirdweb/ai";

const response = await Nebula.chat({
  client: TEST_CLIENT,
  prompt:
    "What's the symbol of this contract: 0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
  context: {
    chains: [sepolia],
  },
});

console.log("chat response:", response.message);

    Ask it to execute transactions with your wallet.

    import { Nebula } from "thirdweb/ai";

const wallet = createWallet("io.metamask");
const account = await wallet.connect({ client });

const result = await Nebula.execute({
  client,
  prompt: "send 0.0001 ETH to vitalik.eth",
  account,
  context: {
    chains: [sepolia],
  },
});

console.log("executed transaction:", result.transactionHash);

Patch Changes

  • #5926 4b5661b Thanks @MananTank! - Export toEventSelector utility function from "thirdweb/utils"

  • #5923 42a313f Thanks @kumaryash90! - Fix deploy version for published contracts

  • #5924 7fb5ce1 Thanks @joaquim-verges! - Ensure resetting deploy flag on bundler errors

  • #5937 0e2b3df Thanks @MananTank! - Add isValidENSName utility function for checking if a string is a valid ENS name. It does not check if the name is actually registered, it only checks if the string is in a valid format.

    import { isValidENSName } from "thirdweb/utils";

isValidENSName("thirdweb.eth"); // true
isValidENSName("foo.bar.com"); // true
isValidENSName("foo"); // false

  • #5790 e331e43 Thanks @gregfromstl! - Migrated underlying functionality to Ox

  • #5914 c5c6f9d Thanks @MananTank! - Do not prompt user for signing message for SIWE auth in Connect UI for Ecosystem wallets

5.83.1

Patch Changes

5.83.0

Minor Changes

  • #5878 70b7b5c Thanks @ElasticBottle! - Add support for backend wallets.

    This is useful is you have a backend that is connected to an that you want to have programmatic access to a wallet without managing private keys.

    Here's how you'd do it:

    const wallet = inAppWallet();
const account = await wallet.connect({
  strategy: "backend",
  client: createThirdwebClient({
    secretKey: "...",
  }),
  walletSecret: "...",
});
console.log("account.address", account.address);

    Note that walletSecret should be generated by you and securely stored to uniquely authenticate to the given wallet.

Patch Changes

5.82.0

Minor Changes

  • #5801 429e112 Thanks @gregfromstl! - Feature: Adds beta support for EIP-7702 authorization lists

    import {
  prepareTransaction,
  sendTransaction,
  signAuthorization,
} from "thirdweb";

const authorization = await signAuthorization({
  request: {
    address: "0x...",
    chainId: 911867,
    nonce: 100n,
  },
  account: myAccount,
});

const transaction = prepareTransaction({
  chain: ANVIL_CHAIN,
  client: TEST_CLIENT,
  value: 100n,
  to: TEST_WALLET_B,
  authorizationList: [authorization],
});

const res = await sendTransaction({
  account,
  transaction,
});

  • #5845 b058f68 Thanks @gregfromstl! - Feature: Adds deploySmartAccount function to force the deployment of a smart account.

    const account = await deploySmartAccount({
  smartAccount,
  chain,
  client,
  accountContract,
});

    Fix: Uses 1271 signatures if the smart account is already deployed.

5.81.0

Minor Changes

Patch Changes

  • #5837 ce3e850 Thanks @kumaryash90! - Update implementations

  • #5865 a9547c5 Thanks @gregfromstl! - SDK: Fix chain switching in smart account transactions

  • #5879 810f319 Thanks @kien-ngo! - Add onTimeout callback to useAutoConnect

  • #5605 e9c23ad Thanks @kien-ngo! - - Add onClose callback to Connect Details modal

    <ConnectButton
  detailsModal={{
    onClose: (screen: string) => {
      // The last screen name that was being shown when user closed the modal
      console.log({ screen });
    },
  }}
/>
    • Small fix for ChainIcon: Always resolve IPFS URI
    • Improve test coverage

  • #5869 273a320 Thanks @gregfromstl! - SDK: Removed co.lobstr from the available wallets (an unsupported non-EVM wallet)

  • #5871 1e8ddcb Thanks @gregfromstl! - SDK: Gracefully ignore chain with no chain ID in fromEip1193Provider

5.80.0

Minor Changes

  • #5799 90e2b97 Thanks @gregfromstl! - Feature: Allows hiding the "Linked Profiles" button in the ConnectButton Details Modal

    <ConnectButton
  detailsModal={{ manageWallet: { allowLinkingProfiles: false } }}
/>

Patch Changes

5.79.0

Minor Changes

  • #5691 5be197b Thanks @kien-ngo! - Add headless components for Wallets: WalletProvider, WalletIcon and WalletName

Patch Changes

5.78.0

Minor Changes

  • #5709 cd55ada Thanks @gregfromstl! - Adds a defaultSmsCountryCode configuration option to In-App and Ecosystem Wallets

    createWallet("inApp", {
    auth: {
      options: [
        "email",
        "phone",
      ],
      mode: "redirect",
      defaultSmsCountryCode: "IN", // Default country code for SMS
    },
  }),

  • #5604 03b6d0d Thanks @ElasticBottle! - Support the ability to unlink accounts for in app wallet with more than 1 linked account.

    It's supported out of the box in the connect UI.

    For typescript users, the following code snippet is a simple example of how it'd work.

    import { inAppWallet } from "thirdweb/wallets";

const wallet = inAppWallet();
wallet.connect({ strategy: "google" });

const profiles = await getProfiles({
  client,
});

const updatedProfiles = await unlinkProfile({
  client,
  profileToUnlink: profiles[1], // assuming there is more than 1 profile linked to the user.
});

5.77.0

Minor Changes

Patch Changes

5.76.1

Patch Changes

  • #5688 da5d8ec Thanks @joaquim-verges! - Autoconnect previously linked wallets

  • #5682 5b24faf Thanks @gregfromstl! - Fix ecosystem wallet AA detection in Pay modal

  • #5674 8020bdb Thanks @devfelipenunes! - This pull request adds the complete Portuguese (Brazil) translation for the wallet connection module. It includes translations for connecting a wallet, sending/receiving funds, network management, and other wallet-related actions. This improves the user experience for Portuguese-speaking users.

5.76.0

Minor Changes

  • #5533 43fbcac Thanks @kien-ngo! - The Connected-details button now shows USD value next to the token balance.

    Breaking change to the AccountBalance

    The formatFn props now takes in an object of type AccountBalanceInfo. The old formatFn was inflexible because it only allowed you to format the balance value. With this new version, you have access to both the balance and symbol.

    import { AccountBalance, type AccountBalanceInfo } from "thirdweb/react";

<AccountBalance
  // Show the symbol in lowercase, before the balance
  formatFn={(props: AccountBalanceInfo) =>
    `${props.symbol.toLowerCase()} ${props.balance}`
  }
/>;

    AccountBalance now supports showing the token balance in fiat value (only USD supported at the moment)

    <AccountBalance showBalanceInFiat="USD" />

    The formatFn prop now takes in an object of type AccountBalanceInfo and outputs a string

    import { AccountBalance, type AccountBalanceInfo } from "thirdweb/react";

<AccountBalance
  formatFn={(props: AccountBalanceInfo) =>
    `${props.balance}---${props.symbol.toLowerCase()}`
  }
/>;

// Result: 11.12---eth

    ConnectButton also supports displaying balance in fiat since it uses AccountBalance internally

    <ConnectButton
  // Show USD value on the button
  detailsButton={{
    showBalanceInFiat: "USD",
  }}
  // Show USD value on the modal
  detailsModal={{
    showBalanceInFiat: "USD",
  }}
/>

    Export utils functions:

    formatNumber: Round up a number to a certain decimal place

    import { formatNumber } from "thirdweb/utils";
const value = formatNumber(12.1214141, 1); // 12.1

    shortenLargeNumber: Shorten the string for large value. Mainly used for the AccountBalance's formatFn

    import { shortenLargeNumber } from "thirdweb/utils";
const numStr = shortenLargeNumber(1_000_000_000);

    Fix to ConnectButton

    The social image of the Details button now display correctly for non-square image.

    Massive test coverage improvement for the Connected-button components

  • #5655 f69d1aa Thanks @kien-ngo! - Improve NFT Components

    • Add custom resolver methods to NFTMedia, NFTName and NFTDescription
    • Add caching for the NFT-info-getter method to improve performance
    • Small fix to handle falsy values for NFT media src, name and description
    • Improve test coverage by extracting internal logics and testing them

Patch Changes

5.75.0

Minor Changes

Patch Changes

  • #5639 ed0886a Thanks @jnsdls! - default account components to not retry on failure

  • #5640 5070e76 Thanks @jnsdls! - accept react 19 as peer explicitly

  • #5487 5574c15 Thanks @joaquim-verges! - BETA support for 7579 modular smart accounts

    You can now create modular smart wallets using the 7579 preset.

    Keep in mind that this is in BETA, and there might be breaking API changes.

    import { sepolia } from "thirdweb/chains";
import { smartWallet, Config } from "thirdweb/wallets/smart";
 const modularSmartWallet = smartWallet(
  Config.erc7579({
    chain: sepolia,
    sponsorGas: true,
    factoryAddress: "0x...", // the 7579 factory address
    validatorAddress: "0x...", // the default validator module address
  }),
});

  • #5630 0aa2416 Thanks @kien-ngo! - Add erc20Value to buyFromListing transaction

  • #5641 d1716fc Thanks @joaquim-verges! - Support ERC6492 for smart account signatures

5.74.0

Minor Changes

  • #5634 d1aa380 Thanks @joaquim-verges! - ERC20 Token Paymaster support

    You can now use ERC20 Token Paymasters with Smart Wallets.

    import { base } from "thirdweb/chains";
import { TokenPaymaster, smartWallet } from "thirdweb/wallets";

const wallet = smartWallet({
  chain: base,
  sponsorGas: true, // only sponsor gas for the first ERC20 approval
  overrides: {
    tokenPaymaster: TokenPaymaster.BASE_USDC,
  },
});

Patch Changes

5.73.0

Minor Changes

  • #5457 57fa96b Thanks @kien-ngo! - Add 2 new Pay functions: convertFiatToCrypto and convertCryptoToFiat

    Examples:

    Convert fiat (USD) to crypto

    import { convertFiatToCrypto } from "thirdweb/pay";
import { ethereum } from "thirdweb/chains";

// Convert 2 cents to ETH
const result = await convertFiatToCrypto({
  from: "USD",
  // the token address. For native token, use NATIVE_TOKEN_ADDRESS
  to: "0x...",
  // the chain (of the chain where the token belong to)
  chain: ethereum,
  // 2 cents
  fromAmount: 0.02,
});
// Result: 0.0000057 (a number)

    Convert crypto to fiat (USD)

    import { convertCryptoToFiat } from "thirdweb/pay";

// Get Ethereum price
const result = convertCryptoToFiat({
  fromTokenAddress: NATIVE_TOKEN_ADDRESS,
  to: "USD",
  chain: ethereum,
  fromAmount: 1,
});

// Result: 3404.11 (number)

Patch Changes

5.72.0

Minor Changes

  • #5495 d1845f3 Thanks @kien-ngo! - Add headless components: ChainProvider, ChainIcon & ChainName

  • #5529 7488102 Thanks @gregfromstl! - Adds LoyaltyCard extensions and support for ERC721 deployment.

    import { deployERC721Contract } from "thirdweb/deploys";

const loyaltyCardContractAddress = await deployERC721Contract({
  chain: "your-chain-id", // replace with your chain ID
  client: yourThirdwebClient, // replace with your Thirdweb client instance
  account: yourAccount, // replace with your account details
  type: "LoyaltyCard",
  params: {
    name: "MyLoyaltyCard",
    symbol: "LOYAL",
    description: "A loyalty card NFT contract",
    image: "path/to/image.png", // replace with your image path
    defaultAdmin: "0xYourAdminAddress", // replace with your admin address
    royaltyRecipient: "0xYourRoyaltyRecipient", // replace with your royalty recipient address
    royaltyBps: 500n, // 5% royalty
    trustedForwarders: ["0xTrustedForwarderAddress"], // replace with your trusted forwarder addresses
    saleRecipient: "0xYourSaleRecipient", // replace with your sale recipient address
    platformFeeBps: 200n, // 2% platform fee
    platformFeeRecipient: "0xYourPlatformFeeRecipient", // replace with your platform fee recipient address
  },
});

Patch Changes

5.71.0

Minor Changes

  • #5501 ac42c45 Thanks @gregfromstl! - Added new deployment utility functions to help manage infrastructure contracts and initialization:

    • getInitializeTransaction: Prepare initialization transaction for contract deployment
    • getOrDeployInfraForPublishedContract: Get or deploy required infrastructure for published contracts
    import {
  getInitializeTransaction,
  getOrDeployInfraForPublishedContract,
} from "thirdweb";

// Get initialization transaction
const initTx = await getInitializeTransaction({
  client,
  chain,
  account,
  implementationContract,
  deployMetadata,
  initializeParams: {
    name: "My Contract",
    symbol: "CNTRCT",
  },
});

// Get or deploy infrastructure
const infra = await getOrDeployInfraForPublishedContract({
  chain,
  client,
  account,
  contractId: "MyContract",
  constructorParams: params,
});

5.70.1

Patch Changes

5.70.0

Minor Changes

  • #5388 901c3a1 Thanks @kien-ngo! - Add headless UI component: Account (Name, Image, Address, Balance)

  • #5374 0e5d120 Thanks @joaquim-verges! - # Breaking change

    We are making the following changes to the NFT component to provide better performance and fine-grain control over their internal fetching logic. Moreover, you no longer have to wrap React.Suspense around said components!

    Old

    <NFT>
  <React.Suspense fallback={"Loading stuff..."}>
    <NFT.Media />
    <NFT.Name />
    <NFT.Description />
  </React.Suspense>
</NFT>

    New

    The new version comes with 2 new props: loadingComponent and fallbackComponent. Basically, loadingComponent takes in a component and show it while the internal fetching is being done fallbackComponent takes in a component and show it once the data is failed to be resolved

    <NFTProvider contract={contract} tokenId={0n}>
    <NFTMedia
      loadingComponent={<span>Loading NFT Image</span>}
      fallbackComponent={<span>Failed to load NFT</span>}
    />
    <NFTDescription
      loadingComponent={<span>Loading NFT Description</span>}
      fallbackComponent={<span>Failed to load NFT Description</span>}
    />
</NFT>

Patch Changes

5.69.0

Minor Changes

Patch Changes

5.68.0

Minor Changes

  • #5354 a1fc436 Thanks @joaquim-verges! - Adds EIP1193 adapters that allow conversion between Thirdweb wallets and EIP-1193 providers:

    • EIP1193.fromProvider(): Creates a Thirdweb wallet from any EIP-1193 compatible provider (like MetaMask, WalletConnect)
    • EIP1193.toProvider(): Converts a Thirdweb wallet into an EIP-1193 provider that can be used with any web3 library

    Key features:

    • Full EIP-1193 compliance for seamless integration
    • Handles account management (connect, disconnect, chain switching)
    • Supports all standard Ethereum JSON-RPC methods
    • Comprehensive event system for state changes
    • Type-safe interfaces with full TypeScript support

    Examples:

    // Convert MetaMask's provider to a Thirdweb wallet
const wallet = EIP1193.fromProvider({
  provider: window.ethereum,
  walletId: "io.metamask",
});

// Use like any other Thirdweb wallet
const account = await wallet.connect({
  client: createThirdwebClient({ clientId: "..." }),
});

// Convert a Thirdweb wallet to an EIP-1193 provider
const provider = EIP1193.toProvider({
  wallet,
  chain: ethereum,
  client: createThirdwebClient({ clientId: "..." }),
});

// Use with any EIP-1193 compatible library
const accounts = await provider.request({
  method: "eth_requestAccounts",
});

// Listen for events
provider.on("accountsChanged", (accounts) => {
  console.log("Active accounts:", accounts);
});

Patch Changes

5.67.0

Minor Changes

  • #5326 f5f5ae6 Thanks @gregfromstl! - Add SiteLink component for creating wallet-aware links between thirdweb-enabled sites. This component automatically adds wallet connection parameters to the target URL when a wallet is connected, enabling seamless wallet state sharing between sites.

    Example:

    import { SiteLink } from "thirdweb/react";

function App() {
  return (
    <SiteLink
      href="https://thirdweb.com"
      client={thirdwebClient}
      ecosystem={{ id: "ecosystem.thirdweb" }}
    >
      Visit thirdweb.com with connected wallet
    </SiteLink>
  );
}

Patch Changes

5.66.0

Minor Changes

  • #5298 5cc5c93 Thanks @gregfromstl! - Added new SiteEmbed React component for embedding thirdweb-supported sites with seamless wallet connection support.

    The component allows you to embed other thirdweb-enabled sites while maintaining wallet connection state, supporting both in-app and ecosystem wallets.

    Example usage:

    import { SiteEmbed } from "thirdweb/react";

<SiteEmbed
  src="https://thirdweb.com"
  client={client}
  ecosystem={ecosystem}
/>;

    Note: Embedded sites must include <AutoConnect /> and support frame-ancestors in their Content Security Policy.

Patch Changes

5.65.2

Patch Changes

5.65.1

Patch Changes

5.65.0

Minor Changes

  • #5126 c621c13 Thanks @kien-ngo! - Allow to customize the display order of Asset tabs

    When you click on "View Assets", by default the "Tokens" tab is shown first.

    If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]

    Note: If an empty array is passed, the [View Funds] button will be hidden

    <ConnectButton
  client={client}
  detailsModal={{
    assetTabs: ["nft", "token"],
  }}
/>

Patch Changes

5.64.5

Patch Changes

5.64.4

Patch Changes

  • #5237 802d3bf Thanks @joaquim-verges! - Sanitize block explorer URLs

  • #5231 686d0c3 Thanks @joaquim-verges! - Respect custom bundler URL for getting gas fees + better DX for predictSmartAccountAddress()

  • #5187 68ce724 Thanks @ElasticBottle! - expose WalletUser type for in app / ecosystem wallets

  • #5214 ad4af68 Thanks @joaquim-verges! - Reduce async calls before requesting webauthn credentials for ios 15

  • #5229 9425e9e Thanks @ElasticBottle! - Consolidate custom jwt and custom auth endpoint through common endpoint

  • #5244 178d407 Thanks @joaquim-verges! - Add support for custom singlePhase drops

    If you are using a custom drop contract, you can now set claim conditions and claim by passing the singlePhaseDrop option to the setClaimConditions and claimTo functions.

    setClaimConditions({
  contract,
  phases: [
    {
      startTime: new Date(0),
      maxClaimableSupply: 10n,
    },
  ],
  tokenId: 0n,
  singlePhaseDrop: true, // <--- for custom drop contracts
});

5.64.3

Patch Changes

5.64.2

Patch Changes

5.64.1

Patch Changes

5.64.0

Minor Changes

Patch Changes

5.63.2

Patch Changes

5.63.1

Patch Changes

  • #5065 b01faac Thanks @MananTank! - Catch failed to post tracking errors to avoid exposing them to error report services

  • #5063 ef6b4f4 Thanks @MananTank! - Add reason string on abort controller's abort method to avoid AbortError: signal is aborted without reason errors

  • #5080 67a363f Thanks @gregfromstl! - Fix revalidation with siwe auth in ConnectEmbed

5.63.0

Minor Changes

Patch Changes

5.62.0

Minor Changes

  • #5032 3fe33a6 Thanks @kien-ngo! - Add ERC1155 extension: mintToBatch

  • #4992 1994d9e Thanks @joaquim-verges! - Support for enclave wallet migration in React Native

    this change requires the latest version of the @thirdweb-dev/react-native-adapter package to be installed.

Patch Changes

5.61.6

Patch Changes

5.61.5

Patch Changes

5.61.4

Patch Changes

5.61.3

Patch Changes

5.61.2

Patch Changes

5.61.1

Patch Changes

5.61.0

Minor Changes

Patch Changes

  • #4919 d4c423c Thanks @joaquim-verges! - Fix passing 0n as from/to blocks in getContractEvents

  • #4918 0f6b881 Thanks @ElasticBottle! - Add querying for in app wallet user details via externally linked wallet address:

    import { getUser } from "thirdweb";

// this is the wallet address that the user used to connect via SIWE to their in app wallet
const user = await getUser({
  client,
  externalWalletAddress: "0x123...",
});

    Add querying for ecosystem wallet user details:

    import { getUser } from "thirdweb";

const user = await getUser({
  client,
  ecosystem: {
    id: "ecosystem.YOUR_ID",
    partnerId: "OPTIONAL_PARTNER_ID"
  }
  email: "[email protected]",
});

5.60.1

Patch Changes

5.60.0

Minor Changes

  • #4579 90b5495 Thanks @kien-ngo! - Add Pack extensions

    Deploy Pack

    import { deployPackContract } from "thirdweb/extensions/deploy";

const packAddress = await deployPackContract({
  account,
  client,
  chain,
  params: {
    name: "Pack contract name",
    symbol: "PACK1155",
  },
});

    Create a Pack

    import { createPack } from "thirdweb/extensions/pack";

const transaction = createPack({
  contract: packContract,
  client,
  recipient: "0x...",
  tokenOwner: "0x...",
  packMetadata: {
    name: "Pack #1",
    image: "image-of-pack-1",
  },
  openStartTimestamp: new Date(),
  erc20Rewards: [
    {
      contractAddress: "0x...",
      quantityPerReward: 1,
      totalRewards: 1,
    },
  ],
  erc721Rewards: [
    {
      contractAddress: "0x...",
      tokenId: 0n,
    },
  ],
  erc1155Rewards: [
    {
      contractAddress: "0x...",
      tokenId: 0n,
      quantityPerReward: 1,
      totalRewards: 1,
    },
  ],
});

Patch Changes

5.59.2

Patch Changes

5.59.1

Patch Changes

5.59.0

Minor Changes

Patch Changes

5.58.5

Patch Changes

5.58.4

Patch Changes

5.58.3

Patch Changes

5.58.2

Patch Changes

5.58.1

Patch Changes

5.58.0

Minor Changes

  • #4692 0a7448c Thanks @gregfromstl! - Login to an in-app wallet with your Coinbase account

    import { inAppWallet } from "thirdweb/react";

const wallet = inAppWallet();

const account = await wallet.connect({
  strategy: "coinbase",
  chain: mainnet,
  client: thirdwebClient,
});

Patch Changes

5.57.3

Patch Changes

5.57.2

Patch Changes

5.57.1

Patch Changes

  • #4665 6ce7c83 Thanks @joaquim-verges! - Update @mobile-wallet-protocol/client to 0.0.3

  • #4659 406de39 Thanks @jnsdls! - - Allow using valid JWTs for authorization

    • update dependencies
    • simplify updateMetadata extension params for ERC721 and ERC1155

5.57.0

Minor Changes

  • #4631 a468439 Thanks @gregfromstl! - Adds guest account option. These accounts will only persist for the duration of the user's session unless they link an additionaly auth method to recover the account with.

    import { inAppWallet } from "thirdweb/wallets";

const wallet = inAppWallet();

const account = await wallet.connect({
  client,
  strategy: "guest",
});

Patch Changes

5.56.0

Minor Changes

  • #4607 7b94bf5 Thanks @joaquim-verges! - Expose checkModulesCompatibility function

  • #4601 a4a4136 Thanks @joaquim-verges! - useAdminWallet() Hook + automatically auth when using inapp + smart accounts

    Add useAdminWallet() hook to get the admin wallet for a smart wallet

    const activeWallet = useActiveWallet(); // smart wallet
const adminWallet = useAdminWallet(); // the personal wallet that controls the smart wallet

    Automatically auth when using inapp + smart accounts

    When using auth with an inapp + smart wallet, ConnectButton and ConnectEmebed will automatically auth without having to click sign in.

  • #4604 3009a0f Thanks @joaquim-verges! - Expose publishContract extension

Patch Changes

5.55.0

Minor Changes

  • #4571 5058fdb Thanks @gregfromstl! - Adds X authentication

  • #4565 c0778cb Thanks @gregfromstl! - Adds parseAvatarRecord and parseNftUri utilities

    import { parseAvatarRecord } from "thirdweb/extensions/ens";
import { parseNftUri } from "thirdweb/extensions/common";

const avatarUrl = await parseAvatarRecord({
  client,
  uri: "...",
});

const nftUri = await parseNftUri({
  client,
  uri: "...",
});

Patch Changes

  • #4582 5d3b395 Thanks @gregfromstl! - Adds the ability to hide certain wallets in the wallet switcher

    <ConnectButton
  client={client}
  detailsModal={{
    // We hide the in-app wallet so they can't switch to it
    hiddenWallets: ["inApp"],
  }}
  accountAbstraction={{
    chain: baseSepolia,
    sponsorGas: true,
  }}
/>

  • #4546 3901805 Thanks @edwardysun! - Add preferredProvider to buyWithFiat

5.54.0

Minor Changes

  • #4527 b76a82c Thanks @joaquim-verges! - Update React Native dependencies and add support for React Native 0.75

  • #4499 fe1ff63 Thanks @joaquim-verges! - Breaking Change in deployPublishedContract

    Contract constructor/ initializer params are now passed as a single object instead of an array. The object should have the same shape as the params defined in the contract's ABI.

    Example of old way (using constructorParams or initializeParams):

    const address = await deployPublishedContract({
  account,
  chain,
  client,
  contractId: "Airdrop",
  contractParams: [TEST_ACCOUNT_A.address, ""],
});

    New way (using contractParams):

    const address = await deployPublishedContract({
  account,
  chain,
  client,
  contractId: "Airdrop",
  contractParams: {
    defaultAdmin: TEST_ACCOUNT_A.address,
    contractURI: "",
  },
});

  • #4528 c96e2d9 Thanks @joaquim-verges! - Handle salt parameter for deterministic deploys of published contracts

    You can now pass a salt parameter to the deployPublishedContract function to deploy a contract deterministically.

    const address = await deployPublishedContract({
  client,
  chain,
  account,
  contractId: "Airdrop",
  contractParams: {
    defaultAdmin: "0x...",
    contractURI: "ipfs://...",
  },
  salt: "test", // <--- deterministic deploy
});

    This also works for unpublished contracts, via the deployContract function.

    const address = await deployContract({
  client,
  chain,
  account,
  bytecode: "0x...",
  abi: contractAbi,
  constructorParams: {
    param1: "value1",
    param2: 123,
  },
  salt: "test", // <--- deterministic deploy
});

  • #4541 0596fa2 Thanks @gregfromstl! - Adds getUsers function to query users on the server

    import { getUser } from "thirdweb/wallets";

const user = await getUser({
  client,
  walletAddress: "0x123...",
});

Patch Changes

5.53.0

Minor Changes

  • #4094 f1d087e Thanks @joaquim-verges! - Support for Coinbase Smart Wallet in React Native

    You can now use the Coinbase Smart Wallet in your React Native apps.

    const wallet = createWallet("com.coinbase.wallet", {
  appMetadata: {
    name: "My app name",
  },
  mobileConfig: {
    callbackURL: "https://example.com",
  },
  walletConfig: {
    options: "smartWalletOnly",
  },
});

await wallet.connect({
  client,
});

  • #4454 c546b65 Thanks @joaquim-verges! - Expose createAndSignUserOp utility function

Patch Changes

5.52.0

Minor Changes

  • #4349 a2d2291 Thanks @gregfromstl! - Adds social profile retrieval for Farcaster, Lens, and ENS.

    import { getSocialProfiles } from "thirdweb/social";
const profiles = await getSocialProfiles({
  address: "0x...",
  client,
});

    [
  {
    "type": "ens",
    "name": "joenrv.eth",
    "avatar": "ipfs://bafybeic2wvtpv5hpdyeuy6o77yd5fp2ndfygppd6drdxvtfd2jouijn72m",
    "metadata": {
      "name": "joenrv.eth"
    }
  },
  {
    "type": "farcaster",
    "name": "joaquim",
    "bio": "Eng Lead @ thirdweb",
    "avatar": "https://lh3.googleusercontent.com/EUELPFJzdDNcc3qSaEMekh0_W16acnS8MSvWizt-7HPaQhfJsNFC5HA0W4NKcy6CN9zmV7d4Crqg2B8qM9BpiveqVTl2GPBQ16Ax2IQ",
    "metadata": {
      "fid": 2735,
      "bio": "Eng Lead @ thirdweb",
      "pfp": "https://lh3.googleusercontent.com/EUELPFJzdDNcc3qSaEMekh0_W16acnS8MSvWizt-7HPaQhfJsNFC5HA0W4NKcy6CN9zmV7d4Crqg2B8qM9BpiveqVTl2GPBQ16Ax2IQ",
      "username": "joaquim",
      "addresses": [
        "0x2247d5d238d0f9d37184d8332ae0289d1ad9991b",
        "0xf7970369310b541b8a84086c8c1c81d3beb85e0e"
      ]
    }
  },
  {
    "type": "lens",
    "name": "joaquim",
    "bio": "Lead engineer @thirdweb",
    "avatar": "https://ik.imagekit.io/lens/media-snapshot/557708cc7581172234133c10d473058ace362c5f547fa86cee5be2abe1478e5b.png",
    "metadata": {
      "name": "joaquim",
      "bio": "Lead engineer @thirdweb",
      "picture": "https://ik.imagekit.io/lens/media-snapshot/557708cc7581172234133c10d473058ace362c5f547fa86cee5be2abe1478e5b.png"
    }
  }
]

    import { useSocialProfiles } from "thirdweb/react";
const { data: profiles } = useSocialProfiles({
  client,
  address: "0x...",
});

  • #3413 87d6b6a Thanks @joaquim-verges! - Support for modular contracts

    Deploy and Interact with modular contracts programmatically

    Deploy a modular contract

    import {
  ClaimableERC721,
  BatchMetadataERC721,
  deployModularContract,
} from "thirdweb/modules";

const deployed = deployModularContract({
   client,
   chain,
   account,
   core: "ERC721",
   params: {
     name: "My Modular NFT Contract",
   },
   modules: [
     ClaimableERC721.module({
        primarySaleRecipient: ...,
     }),
     BatchMetadataERC721.module(),
   ],
});

    Interact with a modular contract

    import { ClaimableERC721 } from "thirdweb/modules";

const contract = getContract({
  client,
  chain,
  address,
});

const transaction = ClaimableERC721.mint({
  contract,
  to: account.address,
  quantity: 1,
});

await sendTransaction({
  transaction,
  account,
});

Patch Changes

5.51.0

Minor Changes

Patch Changes

5.50.1

Patch Changes

  • #4388 82a30af Thanks @edwardysun! - Update setting default source chain and token

  • #4375 edb95d0 Thanks @jnsdls! - [Extensions] expose permission detection logic

  • #4390 d74e61b Thanks @MananTank! - Fix Swap Fees layout in fees drawer in pay UI

  • #4319 73e5dc7 Thanks @joaquim-verges! - Fix direct payments to the same wallet

  • #4382 9e8d3e6 Thanks @MananTank! - Add props for hiding "Send", "Receive" and "Send" buttons in Connect Details Modal UI for ConnectButton component. By default, all buttons are visible in the modal.

    <ConnectButton
  detailsModal={{
    hideSendFunds: false,
    hideReceiveFunds: true,
    hideBuyFunds: false,
  }}
/>

  • #4363 066aede Thanks @kien-ngo! - Allow to specify "from" and "to" props for the ClaimButton

5.50.0

Minor Changes

Patch Changes

5.49.0

Minor Changes

  • #4179 42d5c65 Thanks @kien-ngo! - Add NFT prebuilt components

    import { getContract } from "thirdweb";
import { NFT } from "thirdweb/react";

const contract = getContract({
  address: "0x...",
  chain: ethereum,
  client: yourThirdwebClient,
});

<NFT contract={contract} tokenId={0n}>
  <Suspense fallback={"Loading media..."}>
    <NFTMedia />
  </Suspense>
</NFT>;

Patch Changes

5.48.3

Patch Changes

5.48.2

Patch Changes

  • #4250 41fbdaf Thanks @gregfromstl! - Add overload to signMessage to pass an account rather than a private key

    import { signMessage } from "thirdweb/utils";
await signMessage({
  message: "Hello, world!",
  account,
});

  • #4267 7a2de70 Thanks @alecananian! - Added hideSwitchWallet param to wallet details modal

  • #4224 1405598 Thanks @IDubuque! - Added support for direct transfers in Pay

  • #4269 120d61f Thanks @MananTank! - Show wallet balance with upto 5 decimal places in UI components

  • #4274 a0aea23 Thanks @gregfromstl! - Fix popup and window auth modes conflicting on firefox

  • #4244 44e8e7b Thanks @MananTank! - - Pay UI now selects the fiat currency based on the user's location / timezone

    • Add Japanese Yen (JPY) as a supported fiat currency for thirdweb Pay
    • Added option to configure the default fiat currency for the Pay UI

    Examples

    <PayEmbed
  client={client}
  payOptions={{
    buyWithFiat: {
      prefillSource: {
        currency: "CAD",
      },
    },
  }}
/>

    <ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      buyWithFiat: {
        prefillSource: {
          currency: "JPY",
        },
      },
    },
  }}
/>

    const sendTransaction = useSendTransaction({
  payModal: {
    buyWithFiat: {
      prefillSource: {
        currency: "CAD",
      },
    },
  },
});

    <TransactionButton
  transaction={() => someTx}
  payModal={{
    buyWithFiat: {
      prefillSource: {
        currency: "CAD",
      },
    },
  }}
>
  some tx
</TransactionButton>

5.48.1

Patch Changes

  • #4237 b38308d Thanks @gregfromstl! - Enable external redirects for electron support

    import { authenticate } from "thirdweb/wallets/in-app";

const result = await authenticate({
  client,
  strategy: "google",
  redirectUrl: "https://example.org",
  mode: "window",
});

  • #4213 6c87d7b Thanks @MananTank! - Fix "conditionally rendereed hooks error" in various components in thirdweb/react and thirdweb/react-native

  • #4214 0a1bce8 Thanks @gregfromstl! - Fix custom image metadata on in-app wallets

  • #4239 d93ec63 Thanks @joaquim-verges! - Fix passkey domain not being respected on login

5.48.0

Minor Changes

Patch Changes

  • #4128 ef9cc55 Thanks @kien-ngo! - Expose max() & min() util methods for bigints

  • #4172 cb591aa Thanks @joaquim-verges! - Only show pay modal if active wallet does not have enough funds for a paid transaction

  • #4177 bd46699 Thanks @kien-ngo! - Expsose GaslessConfigs type

    const gaslessOptions: GaslessOptions = {
  provider: "engine",
  relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
  relayerForwarderAddress: "0x...",
};

  • #4211 4abf7a7 Thanks @MananTank! - Fix Conditionally rendered hook error when Buying funds using fiat

5.47.1

Patch Changes

5.47.0

Minor Changes

Patch Changes

5.46.1

Patch Changes

5.46.0

Minor Changes

  • #4045 3c32b99 Thanks @gregfromstl! - Update SIWE interface

    import { inAppWallet, createWallet } from "thirdweb/wallets";
import { mainnet } from "thirdweb/chains";

const rabby = createWallet("io.rabby");
const wallet = inAppWallet();

const account = await wallet.connect({
  client: MY_CLIENT,
  strategy: "wallet",
  wallet: rabby,
  chain: mainnet,
});

  • #4077 ef9c7df Thanks @joaquim-verges! - Passkey login support in React Native

Patch Changes

  • #4033 141fd53 Thanks @kien-ngo! - Add more Split contract extensions

  • #3998 db8695d Thanks @kien-ngo! - Add NFT extension: updateTokenURI

  • #4101 03a809a Thanks @MananTank! - Add onPurchaseSuccess callback to PayEmbed, ConnectButton, TransactionButton and useSendTransaction and gets called when user completes the purchase using thirdweb pay.

    <PayEmbed
  client={client}
  payOptions={{
    onPurchaseSuccess(info) {
      console.log("purchase success", info);
    },
  }}
/>

    <ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      onPurchaseSuccess(info) {
        console.log("purchase success", info);
      },
    },
  }}
/>

    <TransactionButton
  transaction={...}
  payModal={{
    onPurchaseSuccess(info) {
      console.log("purchase success", info);
    },
  }}
>
  Some Transaction
</TransactionButton>

    const sendTransaction = useSendTransaction({
  payModal: {
    onPurchaseSuccess(info) {
      console.log("purchase success", info);
    },
  },
});

  • #4047 7a68e3b Thanks @gregfromstl! - Switch to the proper chain prior to signing SIWE payloads

  • #4092 0ca1a79 Thanks @gregfromstl! - UI cosmetic improvements

  • #4091 b9ed753 Thanks @MananTank! - Fix connection with Safe using WalletConnect link

  • #4070 e5a046e Thanks @kien-ngo! - Add contract util method: getCompilerMetadata()

5.45.1

Patch Changes

5.45.0

Minor Changes

  • #3870 bbb4f1c Thanks @gregfromstl! - Adds useProfiles hook to fetch linked profiles for the current wallet.

    import { useProfiles } from "thirdweb/react";

const { data: profiles } = useProfiles();

console.log("Type:", profiles[0].type); // "discord"
console.log("Email:", profiles[0].email); // "[email protected]"

  • #3870 bbb4f1c Thanks @gregfromstl! - Adds SIWE authentication on in-app wallets

    import { inAppWallet } from "thirdweb/wallets";

const wallet = inAppWallet();
const account = await wallet.connect({
  client,
  walletId: "io.metamask",
  chainId: 1, // can be anything unless using smart accounts
});

    This will give you a new in-app wallet, not the injected provider wallet.

  • #3797 f74d523 Thanks @gregfromstl! - Wallets can now add additional profiles to an account. Once added, any connected profile can be used to access the same wallet.

    const wallet = inAppWallet();

await wallet.connect({ strategy: "google" });
const profiles = await linkProfile(wallet, { strategy: "discord" });

    Both the Google and Discord accounts will now be linked to the same wallet.

    If the Discord account is already linked to this or another wallet, this will throw an error.

    You can retrieve all profiles linked to a wallet using the getProfiles method.

    import { inAppWallet, getProfiles } from "thirdweb/wallets";

const wallet = inAppWallet();
wallet.connect({ strategy: "google" });

const profiles = getProfiles(wallet);

    This would return an array of profiles like this:

    [
  {
    type: "google",
    details: {
      email: "[email protected]",
    },
  },
  {
    type: "discord",
    details: {
      email: "[email protected]",
    },
  },
];

  • #3995 5367eed Thanks @kien-ngo! - Add thirdweb Split contract extensions

  • #3993 c31f25c Thanks @kien-ngo! - Add thirdweb Vote contract extensions

  • #3870 bbb4f1c Thanks @gregfromstl! - Adds account linking to the Connect UI

Patch Changes

5.44.1

Patch Changes

5.44.0

Minor Changes

  • c9e14e3 Thanks @jnsdls! - Adds telegram login option for in-app wallets

    import { inAppWallet } from "thirdweb";

const wallet = inAppWallet();

await wallet.connect({
  strategy: "telegram",
});

Patch Changes

  • c9e14e3 Thanks @jnsdls! - Added Celo Alfajores Testnet within the chain-definitions

  • c9e14e3 Thanks @jnsdls! - Add type field on DirectListing and EnglishAuction types.

5.43.2

Patch Changes

5.43.1

Patch Changes

5.43.0

Minor Changes

  • #3875 337c8c9 Thanks @jnsdls! - add German localization

  • #3881 e7d6161 Thanks @kien-ngo! - Add CreateDirectListing button for Marketplace v3

    import { CreateDirectListingButton } from "thirdweb/react";

<CreateDirectListingButton
  contractAddress="0x..." // contract address for the marketplace-v3
  chain={...} // the chain which the marketplace contract is deployed on

  // These props below are the same props for `createListing`
  // to get the full list, check the docs link above
  tokenId={0n}
  assetContractAddress="0x..." // The NFT contract address whose NFT(s) you want to sell
  pricePerToken={"0.1"} // sell for 0.1 <native token>
>
  Sell NFT
</CreateDirectListingButton>

Patch Changes

5.42.0

Minor Changes

  • #3847 e27ebef Thanks @kien-ngo! - Add prebuilt component: BuyDirectListingButton for Marketplace v3

    import { BuyDirectListingButton } from "thirdweb/react";

<BuyDirectListingButton
  contractAddress="0x..." // contract address of the marketplace v3
  chain={...} // the chain which the marketplace contract is deployed on
  client={...} // thirdweb client
  listingId={100n} // the listingId or the item you want to buy
  quantity={1n} // optional - see the docs to learn more
>
  Buy NFT
</BuyDirectListingButton>

  • #3857 d5e5467 Thanks @gregfromstl! - Adds useChainMetadata to retrieve metadata for a chain such as name, icon, available faucets, block explorers, etc.

    import { useChainMetadata } from "thirdweb/react";

const { data: chainMetadata } = useChainMetadata(defineChain(11155111));

console.log("Name:", chainMetadata.name); // Sepolia
console.log("Faucets:", chainMetadata.faucets); // ["https://thirdweb.com/sepolia/faucet"]
console.log("Explorers:", chainMetadata.explorers); // ["https://sepolia.etherscan.io/"]

Patch Changes

  • #3846 cdb2970 Thanks @kien-ngo! - Handle ERC20 approval for the ClaimButton

  • #3843 91edae5 Thanks @kien-ngo! - Expose multicall & erc1155:encodeSafeTransferFrom extension

  • #3867 109575e Thanks @gregfromstl! - Fix wallet social login button styling

  • #3854 7ec421f Thanks @kien-ngo! - Add util function: parseAbiParams

    import { parseAbiParams } from "thirdweb/utils";

const example1 = parseAbiParams(
  ["address", "uint256"],
  ["0x.....", "1200000"],
); // result: ["0x......", 1200000n]

  • #3869 bd44ce9 Thanks @joaquim-verges! - Export more wallet creation and connection types

5.41.0

Minor Changes

  • #3827 b0a303d Thanks @gregfromstl! - Adds SIWF for in-app wallets

    await wallet.connect({
  strategy: "farcaster",
  client: CLIENT,
});

Patch Changes

5.40.0

Minor Changes

  • #3750 4a4a061 Thanks @joaquim-verges! - New PayEmbed modes and revamp TransactionButton flow

    You can now configure the PayEmbed component to build 3 different flows:

    • Buy Crypto: Inline component that allows users to buy any currency. (default)
    <PayEmbed
  client={client}
  payOptions={{
    mode: "fund_wallet",
  }}
/>
    • Direct payments: Take payments from Fiat or Crypto directly to your seller wallet.
    <PayEmbed
  client={client}
  payOptions={{
    mode: "direct_payment",
    paymentInfo: {
      sellerAddress: "0x...",
      chain: base,
      amount: "0.1",
    },
    metadata: {
      name: "Black Hoodie (Size L)",
      image: "https://example.com/image.png",
    },
  }}
/>
    • Transaction payments: Let your users pay for onchain transactions with fiat or crypto on any chain.
    <PayEmbed
  client={client}
  payOptions={{
    mode: "transaction",
    transaction: claimTo({
      contract,
      tokenId: 0n,
      to: toAddress,
    }),
    metadata: nft?.metadata,
  }}
/>

    You can also configure the TransactionButton component to show metadata to personalize the transaction payment flow:

    <TransactionButton
  transaction={() => {
    return transfer({
      contract,
      amount: 10n,
      to: toAddress,
    });
  }}
  payModal={{
    metadata: {
      name: "Buy me a coffee",
      image: "https://example.com/image.png",
    },
  }}
/>

  • #3822 3848327 Thanks @gregfromstl! - Adds the ability to open OAuth windows as a redirect. This is useful for embedded applications such as telegram web apps.

    Be sure to include your domain in the allowlisted domains for your client ID.

    import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
  auth: {
    mode: "redirect",
  },
});

Patch Changes

  • #3813 6081ac7 Thanks @kien-ngo! - Expose types: NFTInput and NFTMetadata

  • #3815 87dc9a5 Thanks @MananTank! - Allow clicking on other wallet when a wallet is connected and sign in is required in ConnectEmbed component.

5.39.0

Minor Changes

  • #3785 105e523 Thanks @kien-ngo! - Add ClaimButton for claiming tokens from all thirdweb Drop contracts

    Higher level abstraction to claim tokens from all thirdweb Drop contracts

    import { ClaimButton } from "thirdweb/react";
import { ethereum } from "thirdweb/chains";

<ClaimButton
  contractAddress="0x..."
  chain={ethereum}
  client={client}
  claimParams={{
    type: "ERC721",
    quantity: 1n,
  }}
>
  Claim now
</ClaimButton>;

Patch Changes

5.38.0

Minor Changes

  • #3766 9f555ca Thanks @kien-ngo! - Add more chains: Astria EVM Dusknet (912559), Blast Sepolia (168587773), Celo (42220), Cronos (25), Degen (666666666), Fantom Testnet (4002), Fantom (250), Frame Tesnet (68840142), Gnosis Chiado Testnet (10200), Gnosis (100), GodWoken (71402), GodWoken Testnet (71401), Hokum Testnet (20482050), Localhost (1337), Loot chain (5151706), Manta Pacific (169), Manta Pacific Testnet (3441005), Moonbeam (1284), Palm Testnet (11297108099), Palm (11297108109), Polygon zkEvm Testnet (1442), Polygon zkEVM (1101), Rari Testnet (1918988905), Rari chain (1380012617), Scroll Alpha Testnet (534353), Scroll Sepolia Testnet (534353), Scroll (534352), Xai Sepolia (37714555429), Xai Mainnet(660279), zk Candy Sepolia (302)

Patch Changes

5.37.0

Minor Changes

  • #3678 31ee4e5 Thanks @ElasticBottle! - Add discord login as an option of thirdweb in app wallet and ecosystem wallet logins

    import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
  client,
  chain,
  strategy: "discord",
});

  • #3716 ec3405b Thanks @gregfromstl! - Adds Discord login to the React Native SDK

Patch Changes

5.36.0

Minor Changes

Patch Changes

  • #3730 db2cadf Thanks @MananTank! - Update buffer calculation of transaction if gas estimation fails for Pay Modal

  • #3735 6cc3038 Thanks @joaquim-verges! - Add optional 'from' in readContract()

  • #3719 05df89c Thanks @joaquim-verges! - Add support for ERC20 paymaster for smart accounts

  • #3728 0a5af48 Thanks @MananTank! - Fix chain with custom RPC not used if the chain object is passed in the chains prop to ConnectButton, ConnectEmbed or PayEmbed components.

    This also fixes dashboard not using custom chain's RPC since it passes the chain object via chains prop

5.35.0

Minor Changes

Patch Changes

5.34.3

Patch Changes

5.34.2

Patch Changes

5.34.1

Patch Changes

  • #3634 4d24208 Thanks @MananTank! - Fix random behavior when connecting smart wallet where it sometimes does not add the personal wallet in the list of connected wallets

  • #3637 02fff7d Thanks @joaquim-verges! - Loosen react native peer dep version restriction

5.34.0

Minor Changes

Patch Changes

  • #3602 21aaec8 Thanks @jnsdls! - improve

  • #3633 636fe40 Thanks @joaquim-verges! - Fix uploading files on mobile with directory

  • #3621 5470dd9 Thanks @MananTank! - Pay UI improvements

    • Only perform token amount rounding when rendering the amount - not in state
    • increase the rendered decimals for token amount whereever we have enough space available in UI
    • Fix "Minimum required amount" error message for Buy with fiat when token amount is so low that server calculates its value as 0 USD - which prevents calculation of minimum required token amount
    • Show token symbol in Minimum required amount error message

  • #3603 342d74e Thanks @jnsdls! - export JWT utils, fix naming of decodeJWT

  • #3611 f103a90 Thanks @MananTank! - Fix Transaction Button callbacks not called when tx is executed in Pay Modal

  • #3630 41b9a53 Thanks @MananTank! - Fix Search in Network Selector screen

5.33.0

Minor Changes

Patch Changes

  • #3597 34b9bbe Thanks @gregfromstl! - Fix wallet disconnect events not being emitted

  • #3608 2ab8b3c Thanks @MananTank! - Set selection data on wallet selection with no custom selection UI - This fixes UI bug in Connect wide modal that has both inApp and ecosystem wallets added

5.32.3

Patch Changes

5.32.2

Patch Changes

5.32.1

Patch Changes

5.32.0

Minor Changes

  • #3570 1a2e056 Thanks @joaquim-verges! - ConnectButton and ConnectEmbed components for React Native

    ConnectButton and ConnectEmbed components for React Native

    Same behavior as the web, you can use these prebuilt components to quickly provide wallet connection flows to your users.

    You can use it the same way as you would in the web, with the same supported properties and configuration flags.

    import { ConnectButton } from "thirdweb/react";

<ConnectButton
    client={client}
/>

    and same for ConnectEmbed

    import { ConnectEmbed } from "thirdweb/react";

<ConnectEmbed
    client={client}
/>

Patch Changes

  • #3574 f526d73 Thanks @MananTank! - * Fix broken inApp wallet connection flow in Compact size Connect UI

    • Fix missing back button in inApp wallet connection flow in Compact size Connect UI

  • #3575 5953131 Thanks @MananTank! - Reset wallet selection data on wallet selection

  • #3569 e5f772d Thanks @edwardysun! - Support localhost as a domain override option for the Pay service

5.31.1

Patch Changes

5.31.0

Minor Changes

Patch Changes

5.30.0

Minor Changes

  • #3451 2244631 Thanks @gregfromstl! - Adds getTransactionStore to retrieve a transaction store for a given address

  • #3381 6429acc Thanks @gregfromstl! - Adds support for Dawn wallet

  • #3270 b24e9b2 Thanks @gregfromstl! - Adds ecosystemWallet to TS SDK

    Usage

    import { ecosystemWallet } from "thirdweb/wallets";

const wallet = ecosystemWallet("ecosystem.hooli", {
  partnerId: "pied-piper",
});

  • #3428 fab5cd4 Thanks @jnsdls! - Adds watchAsset support in injected wallet accounts

  • #3428 fab5cd4 Thanks @jnsdls! - - Add purchaseData parameter in getBuyWithFiatQuote and getBuyWithCryptoQuote functions and UI components to store Extra details for the purchase which can be retrieved later via the status API or Webhook

    • Add a required fromAddress parameter in getBuyWithFiatQuote

  • #3429 a3a4008 Thanks @gregfromstl! - Adds WalletConnect disconnect screen

  • #3428 fab5cd4 Thanks @jnsdls! - Added onDisconnect option in useWalletDetailsModal's open method to add a callback when the user disconnects the wallet by clicking the disconnect button in the wallet details modal.

    import { useWalletDetailsModal } from "thirdweb/react";

function Example() {
  const detailsModal = useWalletDetailsModal();

  return (
    <button
      onClick={() => {
        detailsModal.open({
          client,
          onDisconnect: ({ wallet, account }) => {
            console.log("disconnected", wallet, account);
          },
        });
      }}
    >
      Show wallet details
    </button>
  );
}

    onDisconnect prop of ConnectButton now gets called with the disconnected wallet and account as arguments

    <ConnectButton
  onDisconnect={({ wallet, account }) => {
    console.log("disconnected", wallet, account);
  }}
/>

  • #3270 b24e9b2 Thanks @gregfromstl! - Adds ecosystem wallet UI

Patch Changes

5.29.6

Patch Changes

5.29.5

Patch Changes

5.29.4

Patch Changes

5.29.3

Patch Changes

5.29.2

Patch Changes

5.29.1

Patch Changes

5.29.0

Minor Changes

  • #3273 7afd2da Thanks @gregfromstl! - Adds options refetchInterval and retry params to useReadContract

  • #3231 dbf74aa Thanks @joaquim-verges! - TransactionButton react native implementation

  • #3271 3a1fd98 Thanks @joaquim-verges! - Align inAppWallet secret sharing implementation with web and previous RN SDK

  • #3229 e7b9b9f Thanks @MananTank! - Add useWalletDetailsModal hook to open Wallet Details Modal without using <ConnectButton /> component

    import { createThirdwebClient } from "thirdweb";
import { useWalletDetailsModal } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

function Example() {
  const { open } = useWalletDetailsModal();

  function handleClick() {
    open({ client, theme: "light" });
  }

  return <button onClick={handleClick}> Show Wallet Details </button>;
}

Patch Changes

  • #3278 5698b0c Thanks @0xFirekeeper! - [v4 & v5] zkCandy Sepolia AA Support

  • #3263 f2004b5 Thanks @gregfromstl! - Add potential error message for eip155 failure

  • #3266 e763ace Thanks @joaquim-verges! - Fix sign typed data with inAppWallet when the domain contains a salt param

  • #3264 3948f43 Thanks @MananTank! - - Remove the feature that sets another connected wallet as active when disconnecting the current active wallet.

    • Do not save personal wallet as a separate wallet in connected wallets list.

  • #3256 923a5ec Thanks @gregfromstl! - Automatic retries on watchContractEvents

  • #3280 7dec4d0 Thanks @MananTank! - Fix in-app wallet sending another verification code on window focus when using ConnectEmbed.

    Fix the underlying issue of useAutoConnect running again on window focus.

    Add refetchOnWindowFocus: false on few more useQuery instances to avoid unnecessary refetches

  • #3235 824a631 Thanks @gregfromstl! - Adds EIP-5792 hook exports to thirdweb/react

  • #3241 37ec4ca Thanks @jnsdls! - fix ipfs resolveScheme bug for v1 ipfs schemes

  • #3240 d488223 Thanks @MananTank! - Fix custom theme not used in ConnectEmbed loading screen

  • #3251 ce45a79 Thanks @MananTank! - Allow selecting fiat currency in Pay UI

5.28.0

Minor Changes

  • #3198 ca31a6c Thanks @gregfromstl! - Exports toSerializableTransaction to convert preparedTransaction into a fully serializable transaction. Exports estimateGasCost to estimate the gas cost of a transaction in ether and wei. Exports getGasPrice to get the currect gas price for a chain.

    toSerializableTransaction

    import { prepareTransaction, toSerializableTransaction } from "thirdweb";

const transaction = await prepareTransaction({
  transaction: {
    to: "0x...",
    value: 100,
  },
});
const serializableTransaction = await toSerializableTransaction({
  transaction,
});

account.sendTransaction(serializableTransaction);

    estimateGasCost

    import { estimateGasCost } from "thirdweb";

const gasCost = await estimateGasCost({ transaction });

    getGasPrice

    import { getGasPrice } from "thirdweb";

const gasPrice = await getGasPrice({ client, chain });

Patch Changes

5.27.0

Minor Changes

  • #3181 a346111 Thanks @gregfromstl! - Adds headless functions for creating and managing a WalletConnect session with a connected wallet

    createWalletConnectClient

    import { createWalletConnectClient } from "thirdweb/wallets/wallet-connect";

createWalletConnectClient({
  client: client,
  wallet: wallet,
  onConnect: (session: any) => {
    alert("Connected");
  },
  onDisconnect: (session: any) => {
    alert("Disconnected");
  },
});

    createWalletConnectSession

    import { createWalletConnectSession } from "thirdweb/wallets/wallet-connect";

createWalletConnectSession({
  walletConnectClient: wcClient,
  uri: "wc:...",
});

    getWalletConnectSessions

    import {
  getWalletConnectSession,
  type WalletConnectSession,
} from "thirdweb/wallets/wallet-connect";

const sessions: WalletConnectSession[] = await getWalletConnectSessions();

    disconnectWalletConnectClient

    import { disconnectWalletConnectClient } from "thirdweb/wallets/wallet-connect";

disconnectWalletConnectClient({ session, walletConnectClient: wcClient });

  • #3105 51e7ada Thanks @joaquim-verges! - First party support for zkSync native account abstraction

    You can now use smart accounts on zkSync and zkSync sepolia without any extra setup.

    const wallet = smartWallet({
  chain: zkSync,
  sponsorGas: true,
});

const smartAccount = await wallet.connect({
  client,
  personalAccount,
});

// now your can perform transactions normally, gas will be sponsored
sendTransaction({ transaction, account: smartAccount });

  • #3105 51e7ada Thanks @joaquim-verges! - ZkSync transaction support

Patch Changes

5.26.0

Minor Changes

  • #3161 b569eb4 Thanks @gregfromstl! - Adds waitForBundle function to await a sendCalls bundle's complete confirmation.

    Usage

    import { waitForBundle } from "thirdweb/wallets/eip5792";
const result = await waitForBundle({
  client,
  chain,
  wallet,
  bundleId: "0x123...",
});

  • #3161 b569eb4 Thanks @gregfromstl! - Adds EIP-5792 react hooks

    useSendCalls

    useSendCalls will automatically revalidate all reads from contracts that are interacted with.

    import { useSendCalls } from "thirdweb/react";

const sendTx1 = approve({
  contract: USDT_CONTRACT,
  amount: 100,
  spender: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
});
const sendTx2 = approve({
  contract: USDT_CONTRACT,
  amount: 100,
  spender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
});
const { mutate: sendCalls, data: bundleId } = useSendCalls({ client });
await sendCalls({
  wallet,
  client,
  calls: [sendTx1, sendTx2],
});

    Await the bundle's full confirmation:

    const { mutate: sendCalls, data: bundleId } = useSendCalls({
  client,
  waitForResult: true,
});
await sendCalls({
  wallet,
  client,
  calls: [sendTx1, sendTx2],
});

    Sponsor transactions with a paymaster:

    const { mutate: sendCalls, data: bundleId } = useSendCalls();
await sendCalls({
  client,
  calls: [sendTx1, sendTx2],
  capabilities: {
    paymasterService: {
      url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`,
    },
  },
});

    useCapabilities

    import { useCapabilities } from "thirdweb/react";
const { data: capabilities, isLoading } = useCapabilities();

    useCallsStatus

    import { useCallsStatus } from "thirdweb/react";
const { data: status, isLoading } = useCallsStatus({ bundleId, client });

Patch Changes

5.25.1

Patch Changes

5.25.0

Minor Changes

  • #3140 fc1b658 Thanks @gregfromstl! - Show in-app wallet users an option to export their private key. Enabled by default.

    Usage

    To hide the private key export:

    import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
  hidePrivateKeyExport: true,
});

  • #3154 99d11bb Thanks @gregfromstl! - Adds the ability to copy the wallet connect connection link as an alternative to scanning the QR code

  • #3150 9c417d9 Thanks @gregfromstl! - Adds onDisconnect callback to connect button

    Usage

    <ConnectButton
  client={THIRDWEB_CLIENT}
  onDisconnect={() => console.log("disconnect")}
  theme={theme === "light" ? "light" : "dark"}
/>

Patch Changes

5.24.0

Minor Changes

  • #2943 2774d1f Thanks @MananTank! - Added useConnectModal hook.

    Add useConnectModal hook that allows you to open the Connect UI in a Modal to prompt the user to connect wallet.

    import { createThirdwebClient } from "thirdweb";
import { useConnectModal } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

function Example() {
  const { connect, isConnecting } = useConnectModal();

  async function handleConnect() {
    const wallet = await connect({ client }); // opens the connect modal
    console.log("connected to", wallet);
  }

  return <button onClick={handleConnect}> Connect </button>;
}

  • #3127 5031e44 Thanks @gregfromstl! - Adds contract extensions for delayed reveal NFTs

  • #3118 546d2db Thanks @gregfromstl! - Adds React Native to the thirdweb create CLI

  • #3126 764bce2 Thanks @joaquim-verges! - WalletConnect in React Native + useAutoConnect hook

    Support WalletConnect compatible wallets in React Native

    You can now connect any of the 300+ WalletConnect compatible mobile wallets from react native.

    import { useConnect } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";

const { connect, isConnecting } = useConnect();

const connectMetamask = async () => {
  await connect(async () => {
    const wallet = createWallet("io.metamask");
    await wallet.connect({
      client,
      chain,
    });
    return wallet;
  });
};

    Exposed useAutoConnect hook

    You can now use a hook to trigger autoconnecting to the last connected wallet

    import { useAutoConnect } from "thirdweb/react";

const { data: autoConnected, isLoading } = useAutoConnect({
  client,
  accountAbstraction,
  wallets,
  onConnect,
  timeout,
});

  • #3125 c3a92bf Thanks @gregfromstl! - Added useWalletBalance() hook

    Adds the useWalletBalance hook. The hook will default to the native token balance if no tokenAddress is provided.

    Usage

    import { useWalletBalance } from "thirdweb/react";

const { data, isLoading, isError } = useWalletBalance({
  chain: walletChain,
  tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
  address: activeAccount?.address,
  client,
});

Patch Changes

5.23.0

Minor Changes

  • #3103 a2275c4 Thanks @gregfromstl! - Adds unstyled prop to TransactionButton to remove default styles

    <TransactionButton
  transaction={() => {}}
  onSuccess={handleSuccess}
  onError={handleError}
  unstyled
  className="bg-white text-black rounded-md p-4 flex items-center justify-center"
>
  Confirm Transaction
</TransactionButton>

  • #3083 5994685 Thanks @MananTank! - Add support for deep-linking to Metamask app instead of using WalletConnect on mobile devices when using Connect UI (ConnectButton / ConnectEmbed) components.

    <ConnectButton
  client={client}
  wallets={[
    createWallet("io.metamask", {
      preferDeepLink: true,
    }),
  ]}
/>

  • #3064 f55fa4c Thanks @joaquim-verges! - In-app wallet support for react native

Patch Changes

5.22.1

Patch Changes

5.22.0

Minor Changes

  • #3001 726618b Thanks @gregfromstl! - Adds basic EIP-5792 support for wallets with functions getCapabilities, sendCalls, showCallsStatus, getCallsStatus.

    Example Usage

    getCapabilities

    Returns the capabilities of the wallet according to EIP-5792.

    import { getCapabilities } from "thirdweb/wallets/eip5792";

const capabilities = await getCapabilities({ wallet });

    sendCalls

    Sends the given calls to the wallet for execution, and attempts to fallback to normal execution if the wallet does not support EIP-5792.

    import { sendCalls } from "thirdweb/wallets/eip5792";

const transfer1 = transfer({
  contract: USDC_CONTRACT,
  amount: 5000,
  to: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
});

const transfer2 = transfer({
  contract: USDT_CONTRACT,
  amount: 1000,
  to: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
});

const bundleId = await sendCalls({
  wallet,
  client,
  calls: [transfer1, transfer2],
});

    showCallsStatus

    Requests the wallet to show the status of a given bundle ID.

    import { showCallsStatus } from "thirdweb/wallets/eip5792";

await showCallsStatus({ wallet, bundleId });

    getCallsStatus

    Returns the status of the given bundle ID and the transaction receipts if completed.

    import { getCallsStatus } from "thirdweb/wallets/eip5792";

const status = await getCallsStatus({ wallet, bundleId });

Patch Changes

5.21.0

Minor Changes

  • #3034 99fa2da Thanks @gregfromstl! - Adds the ability to set a custom logo for the social login modal

    import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
  metadata: {
    image: {
      src: "https://example.com/logo.png",
      alt: "My logo",
      width: 100,
      height: 100,
    },
  },
});

Patch Changes

5.20.0

Minor Changes

  • #2912 9caa9d7 Thanks @joaquim-verges! - Updated Connect Modal UI + Passkey support

    • Passkey is now an auth option for inAppWallet
    • Connect UI component UI refresh
    const wallet = inAppWallet();
const hasPasskey = await hasStoredPasskey(client);
await wallet.connect({
  client,
  strategy: "passkey",
  type: hasPasskey ? "sign-in" : "sign-up",
});

  • #3018 5083464 Thanks @gregfromstl! - Adds support for Core wallet extension

Patch Changes

5.19.1

Patch Changes

  • #3005 0006e54 Thanks @joaquim-verges! - - useSendTransaction now switches chain if needed
    • Fix chain switching with in-app smart accounts
    • Fix tx simulation for pay modal

5.19.0

Minor Changes

Patch Changes

5.18.1

Patch Changes

5.18.0

Minor Changes

  • #2985 55081d8 Thanks @jnsdls! - ### "Credit Card" payment method added in thirdweb Pay for Fiat on-ramp

    PayEmbed component added to embed thirdweb Pay UI

    <PayEmbed
  client={client}
  style={{
    width: "360px",
  }}
/>

    thirdweb Pay UI customization available in PayEmbed and ConnectButton

    payOptions prop in PayEmbed and ConnectButton > detailsModal allows you custimize :

    • Enable/Disable payment methods
    • Set default amount for Buy token
    • Set Buy token/chain to be selected by default
    • Set Source token/chain to be selected by default for Crypto payment method
    • Disable editing for Buy token/chain/amount and Source token/chain
    <ConnectButton
  client={client}
  detailsModal={{
    payOptions: yourOptions,
  }}
/>

<PayEmbed
  client={client}
  detailsModal={{
    payOptions: yourOptions,
  }}
/>

    Fiat on-ramp functions and hooks added

    • getBuyWithFiatQuote, useBuyWithFiatQuote to get a quote for buying crypto with fiat currency
    • getBuyWithFiatStatus, useBuyWithFiatStatus to get status of "Buy with fiat" transaction
    • getBuyWithFiatHistory, useBuyWithFiatHistory to get "Buy with fiat" transaction history
    • getPostOnRampQuote, usePostOnRampQuote to get quote for swapping on-ramp token to destination token after doing on-ramp
    • Add getBuyHistory and useBuyHistory to get both "Buy with Fiat" and "Buy with Crypto" transaction history in a single list

5.17.0

Minor Changes

  • #2931 24c1670 Thanks @joaquim-verges! - New smartAccount prop for inAppWallet()

    You can now convert an inAppWallet to a smart account simply by passing the smartAccount prop.

    const wallet = inAppWallet({
  smartAccount: {
    chain: sepolia,
    sponsorGas: true,
  },
});

await wallet.connect({
  client,
  strategy: "google",
});

    Note: beware that when toggling this flag on and off, you will get a different address (admin EOA vs smart account).

Patch Changes

  • #2959 3377fc9 Thanks @MananTank! - Fix custom details button not opening the details modal in ConnectButton

  • #2955 fd1bd7e Thanks @kien-ngo! - Add resolve method for Arweave URIs

  • #2950 d4808fd Thanks @gregfromstl! - Export getUserPhoneNumber and getAuthenticatedUser in-app wallet functions

  • #2972 b1ca05e Thanks @gregfromstl! - Fix issue with nonce set to 0 on toSerializableTransaction

  • #2966 4de8802 Thanks @gregfromstl! - Fixes issue with contract compilation in hardhat

  • #2962 5b6b241 Thanks @gregfromstl! - Makes multiple bugfixes on the deployPublishedContract code path

    • Contracts with no constructor can now deploy as abi inputs defaults to [] when encoding the parameters
    • Properly finds contract versions when specified
    • Defaults to standard deployment if no deployType is specified

  • #2965 ae10776 Thanks @kien-ngo! - Add Arweave URI support to

  • #2969 d660b6c Thanks @gregfromstl! - Fixes deterministic deploys of contracts with no constructor

  • #2958 02a0ca9 Thanks @gregfromstl! - Fixes inconsistent block numbers when fetching events.

    getContractEvents will now properly handle blockRange interaction with fromBlock and toBlock given they are both inclusive (i.e. it will only return logs for the number of blocks specified in blockRange).

5.16.1

Patch Changes

  • #2936 a692154 Thanks @MananTank! - Fix OTP input entered by by clicking on “from messages” option in iOS safari

  • #2934 bdb919f Thanks @gregfromstl! - Updates the CLI create command to use the v5 templates for Next.js and Vite

    Other templates will be updated in the future from within their existing repositories

    Removes React Native starters from the CLI menu Removes JS template support from the CLI

  • #2941 795a59e Thanks @gregfromstl! - Can now optionally specify blockRange on getContractEvents in combination with toBlock and fromBlock.

    Usage

    Specify a blockRange, defaulting toBlock to the current block number.

    await getContractEvents({
  contract: myContract,
  blockRange: 123456n,
  events: [preparedEvent, preparedEvent2],
});

    Specify a block range with toBlock.

    await getContractEvents({
  contract: myContract,
  toBlock: endBlock,
  blockRange: 123456n,
  events: [preparedEvent, preparedEvent2],
});

    Specify a block range starting from fromBlock (great for pagination).

    await getContractEvents({
  contract: myContract,
  fromBlock: lastBlockFetched,
  blockRange: 123456n,
  events: [preparedEvent, preparedEvent2],
});

  • #2945 b64c8e7 Thanks @gregfromstl! - Removes deprecated template options from the CLI, specifically PWA Vite, Express, and React

  • #2951 49d4494 Thanks @gregfromstl! - Increase gas on MarketplaceV3 writes

  • #2948 44680c6 Thanks @gregfromstl! - Adds extraGas override to transactions. Useful when gas estimates are faulty or to ensure a transaction goes through.

    Usage

    const transaction = prepareTransaction({
  to: "0x1234567890123456789012345678901234567890",
  chain: ethereum,
  client: thirdwebClient,
  value: toWei("1.0"),
  gasPrice: 30n,
  extraGas: 50_000n,
});

  • #2932 86105c9 Thanks @gregfromstl! - TransactionButton throws error on reverted transaction

  • #2946 ec149f3 Thanks @gregfromstl! - Read RPC url from viem chain in viem chain adapter

  • #2928 cea736c Thanks @gregfromstl! - Filters invalid listings and auctions from marketplace

  • #2949 0e19911 Thanks @kien-ngo! - Docs update: fix typos and add code snippet

  • #2944 82e8911 Thanks @joaquim-verges! - Show auth provider icon in connect UI when connected to in app wallet

  • #2933 8e0a3ce Thanks @MananTank! - ### Integrate Pay Modal with TransactionButton

    By default, the Pay Modal is integrated with the TransactionButton component. If the user performs a transaction and does not have enough funds to execute it and if thirdweb Payments is available for that blockchain, the Pay Modal will be displayed to allow user to buy the required amount of tokens

    A new prop payModal is added to the TransactionButton component customize the Pay Modal UI or disable it entirely

    Example: Disable Pay Modal

    <TransactionButton payModal={false}> Example 1 </TransactionButton>

    Example: Customize Pay Modal UI

    <TransactionButton
  payModal={{
    theme: "light",
  }}
>
  Example 2
</TransactionButton>

    Disable Pay Modal for certain configurations in useSendTransaction hook

    If useSendTransaction hook is passed gasless: true configuration or if current active wallet is a smart wallet with sponsorGas: true configuration - the Pay Modal will be disabled

  • #2929 9f817cf Thanks @joaquim-verges! - Tweaked connected modal UI layout

5.16.0

Minor Changes

  • #2917 5b0c37a Thanks @joaquim-verges! - Factory address is now optional in accountAbstraction and smartWallet options.

    • Defaults to a global permissionless factory deployed on all chains.
    • Also enables switching chains for smart wallets, as long as the factory is deployed

  • #2915 664082e Thanks @joaquim-verges! - New prepareDeterministicDeployTransaction extension for deploying published contracts with the same address on multiple chains

  • #2921 d77b6f6 Thanks @gregfromstl! - Adds the 'use client' directive to all client-only components

  • #2919 47de345 Thanks @jnsdls! - Add support for several additional wallets

Patch Changes

5.15.0

Minor Changes

Patch Changes

5.14.0

Minor Changes

Patch Changes

5.13.0

Minor Changes

  • #2853 56c139c Thanks @joaquim-verges! - Add account abstraction options to useConnect and handle smart wallet autoconnection outside of UI components

Patch Changes

5.12.0

Minor Changes

Patch Changes

  • #2848 41be954 Thanks @jnsdls! - add celo chains to known op stack chains

  • #2850 aa0b8c4 Thanks @MananTank! - Fix "All wallets" UI in Connect

    • Remove duplicated entry for "inApp"
    • Remove wallets specified by developer

5.11.0

Minor Changes

  • #2679 560d8ad Thanks @ElasticBottle! - Add support for connecting in-app wallet using phone number

    Usage in TypeScript

    import { createThirdwebClient, createWallet } from "thirdweb";
import { preAuthenticate } from "thirdweb/wallets/in-app";

const client = createThirdwebClient({ clientId: "..." });

const phoneNumber = '+123456789';

// Send OTP to given phone number
async function sendOTP() {
  await preAuthenticate({
    strategy: "phone",
    phoneNumber,
    client,
  });
}

async function connect() {
  // create a in-app wallet instance
  const wallet = createWallet('inApp');
  // if the OTP is correct, the wallet will be connected else an error will be thrown
  const account = await wallet.connect({
    client,
    strategy: "phone";
    phoneNumber,
    verificationCode: '...' // Pass the OTP entered by the user
  });

  console.log('connected to', account);
}

    Usage in React

    import { createThirdwebClient } from "thirdweb";
import { preAuthenticate } from "thirdweb/wallets/in-app";
import { useConnect } from "thirdweb/react";

const client = createThirdwebClient({ clientId: "..." });

function Component() {
  const { connect } = useConnect();
  const [phoneNumber, setPhoneNumber] = useState(''); // get phone number from user
  const [otp, setOtp] = useState(''); // get OTP from user

  // Send OTP to given phone number
  async function sendOTP() {
    await preAuthenticate({
      strategy: "phone",
      phoneNumber,
      client,
    });
  }

  async function connect() {
    // create a in-app wallet instance
    const wallet = createWallet('inApp');
    // if the OTP is correct, the wallet will be connected else an error will be thrown
    await wallet.connect({
      client,
      strategy: "phone";
      phoneNumber,
      verificationCode: otp
    });

    // set the wallet as active
    connect(wallet)
  }

  // render UI to get OTP and phone number from user
  return <div> ...  </div>
}

  • #2818 948f155 Thanks @jnsdls! - Gasless transactions in Typescript

    import { sendTransaction } from "thirdweb";

const result = sendTransaction({
  transaction,
  account,
  gasless: {
    provider: "engine",
    relayerUrl: "https://...",
    relayerForwarderAddress: "0x...",
  },
});

    Gasless transactions in React

    import { useSendTransaction } from "thirdweb/react";

const { mutate } = useSendTransaction({
  gasless: {
    provider: "engine",
    relayerUrl: "https://...",
    relayerForwarderAddress: "0x...",
  },
});

// Call mutate with the transaction object
mutate(transaction);

Patch Changes

5.10.1

Patch Changes

5.10.0

Minor Changes

Patch Changes

5.9.0

Minor Changes

  • #2793 4dbcbd1 Thanks @jnsdls! - thirdweb/react

    Add a new optional auth prop to <ConnectButton /> to allow specifying a SIWE auth flow after users connect their wallets.

    <ConnectButton
  client={client}
  auth={{
    isLoggedIn: async (address) => {
      // check if the user is logged in by calling your server, etc.
      // then return a boolean value
      return true || false;
    },
    getLoginPayload: async ({ address, chainId }) => {
      // send the address (and optional chainId) to your server to generate the login payload for the user to sign
      // you can use the `generatePayload` function from `thirdweb/auth` to generate the payload
      // once you have retrieved the payload return it from this function

      return; // <the login payload here>
    },
    doLogin: async (loginParams) => {
      // send the login params to your server where you can validate them using the `verifyPayload` function
      // from `thirdweb/auth`
      // you can then set a cookie or return a token to save in local storage, etc
      // `isLoggedIn` will automatically get called again after this function resolves
    },
    doLogout: async () => {
      //  do anything you need to do such as clearing cookies, etc when the user should be logged out
      // `isLoggedIn` will automatically get called again after this function resolves
    },
  }}
/>

Patch Changes

5.8.0

Minor Changes

Patch Changes

5.7.0

Minor Changes

  • #2803 a54c745 Thanks @jnsdls! - Added new extensions for "English Auctions" in thirdweb/extensions/marketplace module:

    • bidInAuction
    • cancelAuction
    • buyoutAuction
    • collectAuctionPayout
    • collectAuctionTokens
    • executeSale

  • #2767 300e4c8 Thanks @MananTank! - Open "Pay Modal" UI when sending transaction using the useSendTransaction hook if the user does not have enough funds to execute the transaction to prompt the user to buy tokens

    useSendTransaction now takes an optional config option to customize the "Pay Modal" UI

    const sendTransaction = useSendTransaction({
  payModal: {
    locale: "en_US",
    theme: "light",
  },
});

    You may also explicitly disable the "Pay Modal" UI by setting the payModal option to false

    const sendTransaction = useSendTransaction({
  payModal: false,
});

  • #2788 f5abbe8 Thanks @joaquim-verges! - Added deployPublishedContract

Patch Changes

5.6.0

Minor Changes

  • #2760 8197b3c Thanks @gregfromstl! - Adds serializeTransaction and updates sign return object to include yParity

  • #2766 65e4ddc Thanks @joaquim-verges! - Added ERC721 extensions:

    • claimTo with allowlist support
    • lazyMint
    • setClaimConditions

  • #2771 df338f5 Thanks @jnsdls! - Added ERC20 extensions:

    • claimTo with allowlist support
    • setClaimConditions

  • #2757 9d46fce Thanks @jnsdls! - add extensions for contract roles in the thirdweb/extensions/permissions namespace

Patch Changes

5.5.0

Minor Changes

  • #2752 39c6fbc Thanks @jnsdls! - add concatHex utility function

  • #2744 db05717 Thanks @joaquim-verges! - Added 1155 extensions:

    • claimTo with allowlist support
    • lazyMint
    • setClaimConditions

  • #2749 eb919ed Thanks @jnsdls! - - storage: upload now returns a single uri when a single file is passed to the files array.

    • extensions: added suport for royalty, platformFee and primarySale extensions

Patch Changes

  • #2748 007770c Thanks @MananTank! - - Show ENS name and avatar in ConnectButton's Details Modal

    • Add wallet ID alias "embedded" for "inApp" to avoid breaking change
    createWallet("embedded"); // supported but deprecated

createWallet("inApp"); // recommended

  • #2759 07f98a5 Thanks @MananTank! - - Improved Swap UI in ConnectButton Details Modal

    • Prevent Modal from closing when clicking on "Switch Network" in the Swap UI
    • Fix wrong network name shown in Transaction History

  • #2756 e6b5d9c Thanks @jnsdls! - improve resolveScheme reliability and handle cases where getNFT for ERC1155 was breaking on missing totalSupply method

  • #2678 9453f74 Thanks @kumaryash90! - Custom gas settings for any evm deployments

5.4.2

Patch Changes

5.4.1

Patch Changes

5.4.0

Minor Changes

Patch Changes

  • #2731 1d4fdd6 Thanks @jnsdls! - export ChainMetadata type from thirdweb/chains

  • #2712 02583f8 Thanks @jnsdls! - fix watchBlockNumber polling when fully unsubscribing and later re-subscribing

5.3.1

Patch Changes

5.3.0

Minor Changes

Patch Changes

  • #2689 740a675 Thanks @jnsdls! - ---

    Marketplace Extensions

    Added initial support for the Marketplace extensions, available via the thirdweb/extensions/marketplace module.

    Direct Listings

    Write

    • createListing

    Read

    • totalListings
    • getListing
    • getAllListings
    • getAllValidListings

    Events

    • buyerApprovedForListingEvent
    • cancelledListingEvent
    • currencyApprovedForListingEvent
    • newListingEvent
    • newSaleEvent
    • updatedListingEvent

    English Auctions

    Write

    • createAuction

    Read

    • totalAuctions
    • getAuction
    • getAllAuctions
    • getAllValidAuctions

    Events

    • auctionClosedEvent
    • cancelledAuctionEvent
    • newAuctionEvent
    • newBidEvent

    Types

    • DirectListing
    • EnglishAuction

    ERC721 Extensions

    • Added isERC721 to the thirdweb/extensions/erc721 module.

    ERC1155 Extensions

    • Added isERC1155 to the thirdweb/extensions/erc1155 module.

  • #2700 f709f13 Thanks @jnsdls! - ENS: add support for resolveName(), resolveAvatar() and resolveText()

  • #2686 a2423ca Thanks @MananTank! - Add modalSize prop on ConnectEmbed to allow "wide" modal size.

  • #2684 4504a8d Thanks @MananTank! - Fix sourcemap warnings in CRA

  • #2677 0e479e2 Thanks @farhanW3! - added 50k overhead to userOp gas estimations

5.2.0

Minor Changes

  • #2667 44d9630 Thanks @joaquim-verges! - API update for ethers5 and ethers5 adapters:

    • Now all adapter functions take a singular object
    • ethers5: fixed adapted signer not containing a provider by default
    • ethers5: added support for sign typed data

  • #2674 97a31f5 Thanks @joaquim-verges! - Add useSendAndConfirmTransaction hook

Patch Changes

  • #2666 127c476 Thanks @gregfromstl! - fix getAddresses for accounts converted to viem

  • #2637 367576c Thanks @MananTank! - - Always start a new session when calling wallet.connect for WalletConnect

    • Fix JSDoc for useConnectedWallets
    • Add accountsChanged event back to Wallet
    • wallet.disconnect method cleanups

5.1.1

Patch Changes

5.1.0

Minor Changes

Patch Changes

5.0.3

Patch Changes

5.0.2

Patch Changes

  • #2585 052892b Thanks @MananTank! - Fix wallet not opened on WC sessions request event on page reload on mobile

  • #2587 6063f40 Thanks @jnsdls! - [CLI] - fix execution on windows and when prettier is not installed

5.0.1

Patch Changes

5.0.0

Major Changes

Patch Changes

Reference in New Issue View Git Blame Copy Permalink