Skip to content

Releases: thirdweb-dev/js

[email protected]

23 Nov 04:28
de2a7ba
Compare
Choose a tag to compare

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,
    });

[email protected]

22 Nov 21:19
be3570b
Compare
Choose a tag to compare

Patch Changes

[email protected]

21 Nov 18:10
d665684
Compare
Choose a tag to compare

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

@thirdweb-dev/[email protected]

21 Nov 18:10
d665684
Compare
Choose a tag to compare

Patch Changes

[email protected]

19 Nov 18:58
2591c75
Compare
Choose a tag to compare

Minor Changes

Patch Changes

@thirdweb-dev/[email protected]

19 Nov 18:58
2591c75
Compare
Choose a tag to compare

Patch Changes

[email protected]

13 Nov 17:01
e0c641c
Compare
Choose a tag to compare

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

@thirdweb-dev/[email protected]

13 Nov 17:01
e0c641c
Compare
Choose a tag to compare

Patch Changes

[email protected]

07 Nov 18:36
2579525
Compare
Choose a tag to compare

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

[email protected]

06 Nov 07:04
a045479
Compare
Choose a tag to compare

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