JSPM

thirdweb

1.0.0-alpha-650f77d12-20240214074749
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 133411
  • Score
    100M100P100Q169945F
  • License Apache-2.0

Package Exports

  • thirdweb
  • thirdweb/adapters/ethers5
  • thirdweb/adapters/ethers6
  • thirdweb/contract
  • thirdweb/event
  • thirdweb/extensions/common
  • thirdweb/extensions/common/read/contractURI
  • thirdweb/extensions/common/read/getContractMetadata
  • thirdweb/extensions/common/read/name
  • thirdweb/extensions/common/read/symbol
  • thirdweb/extensions/common/write/setContractURI
  • thirdweb/extensions/drops/read/claimConditioById
  • thirdweb/extensions/drops/read/claimCondition
  • thirdweb/extensions/drops/read/getActiveClaimCondition
  • thirdweb/extensions/drops/read/getActiveClaimConditionId
  • thirdweb/extensions/erc1155
  • thirdweb/extensions/erc1155/read/balanceOf
  • thirdweb/extensions/erc1155/read/balanceOfBatch
  • thirdweb/extensions/erc1155/read/getNFT
  • thirdweb/extensions/erc1155/read/getNFTs
  • thirdweb/extensions/erc1155/read/getOwnedNFTs
  • thirdweb/extensions/erc1155/read/nextTokenIdToMint
  • thirdweb/extensions/erc1155/read/tokenURI
  • thirdweb/extensions/erc1155/read/totalSupply
  • thirdweb/extensions/erc20
  • thirdweb/extensions/erc20/read/allowance
  • thirdweb/extensions/erc20/read/balanceOf
  • thirdweb/extensions/erc20/read/decimals
  • thirdweb/extensions/erc20/read/totalSupply
  • thirdweb/extensions/erc20/write/approve
  • thirdweb/extensions/erc20/write/mintTo
  • thirdweb/extensions/erc20/write/transfer
  • thirdweb/extensions/erc20/write/transferFrom
  • thirdweb/extensions/erc721
  • thirdweb/extensions/erc721/read/getNFT
  • thirdweb/extensions/erc721/read/getNFTs
  • thirdweb/extensions/erc721/read/nextTokenIdToMint
  • thirdweb/extensions/erc721/read/ownerOf
  • thirdweb/extensions/erc721/read/startTokenId
  • thirdweb/extensions/erc721/read/tokenURI
  • thirdweb/extensions/erc721/read/totalSupply
  • thirdweb/extensions/erc721/write/claimTo
  • thirdweb/extensions/erc721/write/mintTo
  • thirdweb/extensions/erc721/write/transferFrom
  • thirdweb/package.json
  • thirdweb/react
  • thirdweb/rpc
  • thirdweb/storage
  • thirdweb/transaction
  • thirdweb/utils
  • thirdweb/wallets
  • thirdweb/wallets/index
  • thirdweb/wallets/injected/index
  • thirdweb/wallets/injected/mipdStore
  • thirdweb/wallets/injected/types
  • thirdweb/wallets/injected/wallets/coinbase
  • thirdweb/wallets/injected/wallets/metamask
  • thirdweb/wallets/injected/wallets/rainbow
  • thirdweb/wallets/injected/wallets/zerion
  • thirdweb/wallets/interfaces/ethereum
  • thirdweb/wallets/interfaces/listeners
  • thirdweb/wallets/interfaces/wallet
  • thirdweb/wallets/manager/index
  • thirdweb/wallets/manager/storage
  • thirdweb/wallets/private-key
  • thirdweb/wallets/smart/index
  • thirdweb/wallets/smart/lib/bundler
  • thirdweb/wallets/smart/lib/calls
  • thirdweb/wallets/smart/lib/constants
  • thirdweb/wallets/smart/lib/paymaster
  • thirdweb/wallets/smart/lib/receipts
  • thirdweb/wallets/smart/lib/userop
  • thirdweb/wallets/smart/lib/utils
  • thirdweb/wallets/smart/types
  • thirdweb/wallets/types
  • thirdweb/wallets/utils/chains
  • thirdweb/wallets/utils/getTokenBalance
  • thirdweb/wallets/utils/normalizeChainId
  • thirdweb/wallets/wallet-connect/index
  • thirdweb/wallets/wallet-connect/types
  • thirdweb/wallets/wallet-connect/utils

Readme



thirdweb

npm version Build Status Join our Discord!

Installation

npm install thirdweb@alpha

High Level Concepts

Clients

A client is the entry point to the thirdweb SDK. It is required for all other actions.

import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  // one of these is required to initialize a client - create a free api key at https://thirdweb.com/dashboard
  secretKey: "<you secret key>",
  // or
  clientId: "<your client id>",
});

Contract

A "contract" is a wrapper around a smart contract that is deployed on a chain. It is what you use to create transactions and read contract state.

import { createThirdwebClient, getContract } from "thirdweb";

const client = createThirdwebClient({...})
const contract = getContract({
  // pass in the client
  client,
  // pass the contract address
  address: "0x123...",
  // and the chainId
  chainId: 5,
  // OPTIONALLY the contract's abi
  abi: [...],
})

Transactions

Transactions are the primary way to interact with smart contracts. They are created using the transaction function.

There are 4 ways to create a transaction, all of these return the same transaction object.

Method Signature
import { prepareContractCall } from "thirdweb";

const tx = prepareContractCall({
  contract,
  // pass the method signature that you want to call
  method: "function mintTo(address to, uint256 amount)",
  // and the params for that method
  // their types are automatically inferred based on the method signature
  params: ["0x123...", 100n * 10n ** 18n],
});
Automatic ABI Resolution
import { prepareContractCall } from "thirdweb";
const tx = prepareContractCall({
  contract,
  // in this case we only pass the name of the method we want to call
  method: "mintTo",
  // however using this method we lose type safety for our params
  params: ["0x123...", 100n * 10n ** 18n],
});
Explicit Contract ABI
import { getContract, prepareContractCall } from "thirdweb";

const contract = getContract({
  {...}
  // the abi for the contract is defined here
  abi: [
    ...
    {
      name: "mintTo",
      inputs: [
        {
          type: "address",
          name: "to",
        },
        {
          type: "uint256",
          name: "amount",
        },
      ],
      type: "function",
    }
    ...
  ],
});

const tx = prepareContractCall({
  contract,
  // we get auto-completion for all the available functions on the contract ABI
  method: "mintTo",
  // including full type-safety for the params
  params: ["0x123...", 100n * 10n ** 18n],
});
ABI Snippet
import { prepareContractCall } from "thirdweb";
const tx = prepareContractCall({
  client,
  // in this case we pass the piece of the abi for the method we want to call
  abi: {
    name: "mintTo",
    inputs: [
      {
        type: "address",
        name: "to",
      },
      {
        type: "uint256",
        name: "amount",
      },
    ],
    type: "function",
  },
  // types are automatically inferred based on the ABI inputs
  params: ["0x123...", 100n * 10n ** 18n],
});

Actions

Transactions have a variety of actions that can be called on them, in all cases this is done by calling the action on the transaction object itself.

read - reading contract state

For reading contract state, there is a shortcut function called read that can be used instead of prepareContractCall:

import { readContract } from "thirdweb";

// output type is automatically inferred based on the method signature
const balance = await readContract({
  //    ^ bigint
  contract,
  method: "function balanceOf(address) view returns (uint256)",
  params: ["0x123..."],
});

Which is the equivalent of doing:

import { prepareContractCall, readTransaction } from "thirdweb";

const tx = prepareContractCall({
  contract,
  method: "function balanceOf(address) view returns (uint256)",
  params: ["0x123..."],
});

const balance = await readTransaction(tx);
estimateGas - estimating gas cost for a tx
import { estimateGas } from "thirdweb";

const gasEstimate = await estimateGas(tx);
sendTransaction - sending a transaction

See Wallets for more information on how to send a transaction.

import { sendTransaction } from "thirdweb";
import { privateKeyWallet } from "thirdweb/wallets/private-key";

const wallet = privateKeyWallet({ privateKey: "<your private key>" });

const { transactionHash } = sendTransaction(tx, wallet);
waitForReceipt - waiting for a transaction to be mined
import { waitForReceipt } from "thirdweb";

const receipt = await waitForReceipt({
  contract,
  transactionHash: "0x...",
});

Wallets

TODO: add more info.

Currently available:

Metamask

For usage in browsers.

import { metamaskWallet } from "thirdweb/wallets/metamask";

const wallet = await metamaskWallet();

Private Key

For usage in backend environments.

import { privateKeyWallet } from "thirdweb/wallets/private-key";

const wallet = privateKeyWallet({ client, privateKey: "<your private key>" });

Extensions

Alpha Note: Currently some extensions are available for ERC20 and ERC721 standards, we are constantly adding more.

Extensions are "pre-compiled" transactions for common actions. Their API is generally same as for transactions / reading contract state.

They are namespaced by ERC standard, meaning you can import them like this:

// import the `balanceOf` and `mintTo` extensions for the ERC20 standard
import { balanceOf, mintTo } from "thirdweb/extensions/erc20";

Examples

Backend (Node, Bun, Deno, etc)

With Extensions

import {
  createThirdwebClient,
  getContract,
  sendTransaction,
  waitForReceipt,
} from "thirdweb";
import { privateKeyWallet } from "thirdweb/wallets/private-key";
import { balanceOf, mintTo } from "thirdweb/extensions/erc20";

// Step 1: create a client
const client = createThirdwebClient({
  // create a secret key at https://thirdweb.com/dashboard
  secretKey: process.env.SECRET_KEY as string,
});

// Step 2: define a contract to interact with
const contract = getContract({
  client,
  // the contract address
  address: "0xBCfaB342b73E08858Ce927b1a3e3903Ddd203980",
  // the chainId of the chain the contract is deployed on
  chainId: 5,
});

// Step 3: read contract state
const balance = await balanceOf({
  contract,
  address: "0x0890C23024089675D072E984f28A93bb391a35Ab",
});

console.log("beginning balance", balance);

// Step 4: initialize a wallet
const wallet = privateKeyWallet({
  client,
  privateKey: process.env.PRIVATE_KEY as string,
});

// Step 5: create a transaction
const tx = mintTo({
  contract,
  to: "0x0890C23024089675D072E984f28A93bb391a35Ab",
  amount: 100,
});

// Step 6: execute the transaction with the wallet
const transactionHash = await sendTransaction(tx, wallet);

console.log("tx hash", transactionHash);

// Step 7: wait for the receipt to be mined
const txReceipt = await waitForReceipt({
  transactionHash,
  contract,
});

console.log(txReceipt);

// Step 8: read contract state
const newBalance = await balanceOf({
  contract,
  address: "0x0890C23024089675D072E984f28A93bb391a35Ab",
});

console.log("ending balance", newBalance);

Without Extensions

import {
  createThirdwebClient,
  getContract,
  readContract,
  sendTransaction,
  prepareContractCall,
  waitForReceipt,
} from "thirdweb";
import { privateKeyWallet } from "thirdweb/wallets/private-key";

// Step 1: create a client
const client = createThirdwebClient({
  // create a secret key at https://thirdweb.com/dashboard
  secretKey: process.env.SECRET_KEY as string,
});

// Step 2: define a contract to interact with
const contract = getContract({
  client,
  // the contract address
  address: "0xBCfaB342b73E08858Ce927b1a3e3903Ddd203980",
  // the chainId of the chain the contract is deployed on
  chainId: 5,
});

// Step 3: read contract state
const balance = await readContract({
  contract,
  method: "function balanceOf(address) view returns (uint256)",
  params: ["0x0890C23024089675D072E984f28A93bb391a35Ab"],
});

console.log("beginning balance", balance);

// Step 4: initialize a wallet
const wallet = privateKeyWallet({
  client,
  privateKey: process.env.PRIVATE_KEY as string,
});

// Step 5: create a transaction
const tx = prepareContractCall({
  contract,
  method: "function mintTo(address to, uint256 amount)",
  params: ["0x0890C23024089675D072E984f28A93bb391a35Ab", 100n * 10n ** 18n],
});

// Step 6: execute the transaction with the wallet
const transactionHash = await sendTransaction(tx, wallet);

console.log("tx hash", transactionHash);

// Step 7: wait for the receipt to be mined
const txReceipt = await waitForReceipt({
  contract,
  transactionHash,
});

console.log(txReceipt);

// Step 8: read contract state
const newBalance = await readContract({
  contract,
  method: "function balanceOf(address) view returns (uint256)",
  params: ["0x0890C23024089675D072E984f28A93bb391a35Ab"],
});

console.log("ending balance", newBalance);