thirdweb@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:

  • Fund wallets: 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.