thirdweb-dev / js

Best in class web3 SDKs for Browser, Node and Mobile apps

thirdweb TypeScript SDK

All-in-one web3 SDK for Browser, Node and Mobile apps

Features

• Support for React & React-Native
• First party support for Embedded Wallets (social/email login)
• First party support for Account Abstraction
• Instant connection to any chain with RPC Edge integration
• Integrated IPFS upload/download
• UI Components for connection, transactions, nft rendering
• High level contract extensions for interacting with common standards
• Automatic ABI resolution

Library Comparison

	thirdweb	Wagmi + Viem	Ethers@6
Type safe contract API	✅	✅	✅
Type safe wallet API	✅	✅	✅
EVM utils	✅	✅	✅
RPC for any EVM	✅	⚠️ public RPC only	❌
Automatic ABI Resolution	✅	❌	❌
IPFS Upload/Download	✅	❌	❌
Embedded wallet (email/ social login)	✅	⚠️ via 3rd party	❌
Account abstraction (ERC4337) support	✅	⚠️ via 3rd party	❌
Web3 wallet connectors	✅	✅	❌
Local wallet creation	✅	✅	✅
Auth (SIWE)	✅	✅	❌
Extensions functions for common standards	✅	✅	❌
React Hooks	✅	✅	❌
React UI components	✅	❌	❌
React Native Hooks	✅	✅	❌
React Native UI Components	✅	❌	❌

Contributing

We welcome contributions from all developers regardless of experience level. If you are interested in contributing, please read our Contributing Guide to learn how the repo works, how to test your changes, and how to submit a pull request.

See our open source page for more information on our open-source bounties and program.

Additional Resources

• Documentation
• Templates
• YouTube

Support

For help or feedback, please visit our support site

Security

If you believe you have found a security vulnerability in any of our packages, we kindly ask you not to open a public issue; and to disclose this to us by emailing [email protected].

js's Issues

[SDK] - Add support for getting all token holder balances

Description

With ERC20 tokens, you should be able to get all the current holders and their balances:

const token = sdk?.getToken("0xEB0e3E54103AD8dBe298b86474d7AA08cc680776");
const hist = token.history;
const balances = hist.getAllHolderBalances();

Right now, history is undefined when you try to access this.

Goal

Find and resolve the bug in this logic above within the \packages\sdk\src\core\classes\erc-20-history.ts file.

[CLI] - Fix "Invalid Project name" when a project with a capital letter is entered

Feature Description

When you enter a name for a project on the CLI when you run npx thirdweb create, you currently cannot type any capital letters. We shouldn't show this error, we should just automatically convert it to all lowercase.

Goal

The project name should be automatically all lowercase and not show this error.

[CLI] Rename "Initial commit from Create thirdweb app"

We should rename this initial commit to be Initial commit from npx thirdweb create

One line change, good first contribution :)

Remember to add a changeset!

Error on Codesandbox when setting up thirdweb sdks

Sandbox: https://codesandbox.io/s/tw-sandbox-error-qrn4c5?file=/src/index.tsx

Steps to Replicate

• Select React TypeScript template
• add dependencies ethers, @thirdweb-dev/sdk, @thirdweb-dev/react

[CLI] - Set the name of the project in package.json file

Feature Description

When you create a new project running the npx thirdweb create --app command, you get set up with a project that has the name of the starter kit that gets cloned in the package.json file.

  "name": "next-javascript-starter",

We should change this to be the name that the user enters when they create the project.

Goal

The name field in the package.json file should be the name the user enters when they create the app.

[SDK]-I want to fix or on/off this feature. Should not be re-try if the signer explicitly cancels

Difficult

When I deploy contract or transfer, mint, ....

I explicitly reject but a backup signer is called and I have to press reject twice, it's annoying, I don't think this feature is very good.

I suggest is it possible to turn this feature on or off.

Describe

js/packages/sdk/src/core/classes/factory.ts

Lines 74 to 87 in a5cdd85

	try {
	receipt = await this.sendTransaction("deployProxy", [
	encodedType,
	encodedFunc,
	]);
	} catch (e) {
	// deploy might fail due to salt already used, fallback to deterministic deploy
	const blockNumber = await this.getProvider().getBlockNumber();
	receipt = await this.sendTransaction("deployProxyDeterministic", [
	encodedType,
	encodedFunc,
	ethers.utils.formatBytes32String(blockNumber.toString()),
	]);
	}

Request

DEPLOY PROXY DETERMINISTICTurn this feature on or off or delete

Can not get const contractType = await sdk.resolveContractType(contractId) if login magicLink. I try login magic link , but it not get singer.

[REACT]: `isLoading` state for the `useLogin` hook in the solana package

A returned isLoading state from the useLogin hook would be helpful to show loading state while signing the message.

Browserify doesn't work anymore

Hi, I was creating a bundle with browserify from @thirdweb-dev/sdk to be used in my environment which is not React and requires vanilla js basically (can't use module type)

Until version 3.4 the bundle worked like a charm.

Now I'm trying to update to the latest version and I get these errors:

This happens right after the page loads, without initiating anything.

Hotfix- How to get transaction hash when deploying smart contract

I check and see here you only return contract address.
My code:

let params = {
			name: name,
			symbol: symbol || "",
			fee_recipient: recipient || currentAddress,
			primary_sale_recipient: recipient || currentAddress,
			platform_fee_recipient: recipient || currentAddress,
			seller_fee_basis_points: fee || 0,
			platform_fee_basis_points: fee || 0,
			description: `hazbase:${currentProjectId}`
		}

contractId = await sdk.deployer.deployNFTCollection(params)
 contractId = await sdk.deployer.deployEditionDrop(params)
contractId = await sdk.deployer.deployNFTDrop(params)
contractId = await sdk.deployer.deployToken(params)

You code :

deployNFTCollection(metadata: NFTContractDeployMetadata): Promise<string>;

Issues:

When many of my users use gasless, I want to save the information for customers to pay through Openzeplin. I don't see this function returning txHash but returning address.

But I see other functions like MintToken, SendToken, ... that return txid, like below.

My code get txid :

switch (contractType) {
		case 'edition-drop':
			contract = sdk.getEditionDrop(currentContractId)
			return txid = await contract.createBatch(Array.isArray(data)? data: [data])
		case 'nft-collection':
			contract = sdk.getNFTCollection(currentContractId)
			return txid = await contract.mintBatch(Array.isArray(data)? data: [data])
		case 'nft-drop':
			contract = sdk.getNFTDrop(currentContractId)
			return txid = await contract.createBatch(Array.isArray(data)? data: [data])
		case 'token':
			contract = sdk.getToken(currentContractId)
			return txid = await contract.mintTo(params.mintto, params.amount)
		default:
			break;
	}

YouCode return txid:

mintBatch(metadata: NFTMetadataOrUri[]): Promise<TransactionResultWithId<NFTMetadataOwner>[]>;

Can you help me pay extra txID when deploying contract .
Thanks!!!

Starter Kit not working by default clone

Currently out of the box downloading the starter project does not work for me in vite or react, I tried downgrading my react scripts to v 4.0.3 still getting errors
ERROR in ./node_modules/@zag-js/react/dist/index.mjs 6:0-71 Module not found: Error: Can't resolve 'use-sync-external-store/shim' in '/home/sam/Desktop/help/node_modules/@zag-js/react/dist' Did you mean 'index.js'? BREAKING CHANGE: The request 'use-sync-external-store/shim' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
Using node LTS not sure what the issue is here

[React] - ConnectWallet component incorrect border radius

Feature Description

The ConnectWallet component has incorrect border radius / rounding in some cases.

Goal

The colored border around the edges should be rounded to match the shape of the inner section.

Error: This action requires a connected wallet to sign the transaction. Please pass a valid signer to the SDK.

Hi - I keep getting the following error:

Error: This action requires a connected wallet to sign the transaction. Please pass a valid signer to the SDK.

My wallet is connected though (address is available). But useWriteContract is failing.

[SDK] - Add "getMinimumBidValue" to marketplace

Feature Description

Currently with the marketplace prebuilt contract there is no way to get the minimum bid a user must place to outbid the previous highest bid.

Let's add it!

Goal

Add a function to the marketplace smart contract called getMinimumNextBid

The logic needs to be something like this:

if (auction has current highest bid) {
  return currentHighestBid + (bid buffer * highest bid)
}
else {
  return minimum bid value
}

This must take into account Bid Buffers; i.e. the next bid must be a certain amount higher than the current highest bid.

editionDrop.history.getAllClaimerAddresses(0) error

const walletAddresses = (await editionDrop).history.getAllClaimerAddresses(0);

reason: 'bad response',
code: 'SERVER_ERROR',
status: 413,
headers: {
'access-control-allow-credentials': 'true',
'access-control-allow-headers': 'Content-Type,Authorization,User-Agent',
'access-control-allow-methods': 'GET, POST, OPTIONS',
'access-control-allow-origin': '',
'content-type': 'application/json',
vary: 'Accept-Encoding',
'x-host-id': '',
'x-node-id': '08777362-575c-4584-aa42-4f09eb19af92',
'x-ratelimit-limit': '1000000',
'x-ratelimit-remaining': '999814',
'x-ratelimit-reset': '1665137764',
'x-request-id': 'e0da4b42-61d3-4133-9d57-dc40d2852d36',
date: 'Fri, 07 Oct 2022 05:18:57 GMT',
'content-length': '142',
connection: 'close'
},
body: '{"jsonrpc":"2.0","id":44,"result":null,"error":{"code":-32602,"message":"eth_getLogs and eth_newFilter are limited to a 10,000 blocks range"}}',
requestBody: '{"method":"eth_getLogs","params":[{"fromBlock":"0x0","toBlock":"latest","address":"0x1d6288e8c07ceb1caa82c1ba4fcc856e7536b2d8","topics":["0x4f72e6585331094d368e469f11198272039d08cbddfcda1577e192687a83afb6"]}],"id":44,"jsonrpc":"2.0"}',
requestMethod: 'POST',
url: 'https://aged-dimensional-mansion.ethereum-goerli.discover.quiknode.pro/xxxx'
}

cors

Different public address from Magic

I have two different public addresses for the following methods

import { EthNetworkConfiguration, Magic } from 'magic-sdk';

const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY, {
  network: process.env.NEXT_PUBLIC_CHAIN_KEY as EthNetworkConfiguration,
});
await magic.auth.loginWithMagicLink({ email:  '[email protected]'  });

const provider = new ethers.providers.Web3Provider(magic.rpcProvider);
const magicSigner = provider.getSigner();
const address = await magicSigner.getAddress();
console.log(address)

and

import { useMagic, useAddress } from '@thirdweb-dev/react/evm/connectors/magic';
const connectWithMagic = useMagic();
const address = useAddress()

await connectWithMagic({ email: '[email protected]' })
console.log(address)

Here is the Sandbox to reproduce the issue: https://github.com/rekolt/magic-link

If I use the same email, I should have one single address, correct? Why do I have two different?

node_modules issue compiling error

I get the following errors with node 16.19.0 react 17.0.2 and the following third wave packages

"@thirdweb-dev/react": "^3.6.9",
"@thirdweb-dev/sdk": "^3.6.9",

Compiled with problems:X

WARNING in ../node_modules/@thirdweb-dev/react/dist/index-aed60ee9.esm.js 6849:13-18

export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)


ERROR in ../node_modules/@zag-js/react/dist/chunk-DARLHIWS.mjs 18:23-43

export 'useSyncExternalStore' (imported as 'useSyncExternalStore') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

Problem when installing React SDK

When trying to install Thirdweb SDK in my react project, I get this error:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16 || ^17 || ^18" from @headlessui/[email protected]
npm WARN node_modules/@headlessui/react
npm WARN @headlessui/react@"^1.7.2" from the root project
npm WARN 35 more (framer-motion, jotai, little-state-machine, nano-css, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.0" from [email protected]
npm WARN node_modules/wagmi
npm WARN wagmi@"^0.2.28" from @thirdweb-dev/[email protected]
npm WARN node_modules/@thirdweb-dev/react
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^17.0.0" from [email protected]
npm WARN node_modules/wagmi
npm WARN wagmi@"^0.2.28" from @thirdweb-dev/[email protected]
npm WARN node_modules/@thirdweb-dev/react
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

@thirdweb-dev/auth/next 'could not find name'

Good day ser. I'm trying to code along the token-gated NFT tutorial by Thirdweb in this article:

https://blog.thirdweb.com/guides/nft-gated-website/

However, during installation of the Auth SDK, I get an error about NextJS13 conflict. I tried using legacy-peer-deps, however after installation, no data could be pulled from ThirdWebAuth. Might you know what's the issue here?

Error on StackBlitz when setting up thirdweb sdk

Steps to replicate

• select React + Typescript template
• add thirdweb dependencies ethers, @thirdweb-dev/react, @thirdweb-dev/sdk

stackblitz-error.mov

[SDK] - Add ability to view and update owner of a contract

Feature Description

We have the Ownable functionality on contract extensions and also in many of our prebuilt contracts.

Currently, there is no way to utilize this feature from the SDK.

Goal

The user should be able to call

contract.getOwner => Get the wallet address of the current owner.
contract.setOwner => Attempt to transfer ownership (requires the user be the owner of the smart contract0

[TypeScript] SDK unusable in browser context because of undefined globals

Hello, this is the second time I'm opening an issue with regards to Thirdweb SDK using undefined globals for browser context (for instance, process), making it impossible to use Thirdweb JS SDK with for instance SvelteKit.

There used to be an import @thirdweb-dev/sdk/browser/dist, that allowed you to import Thirdweb SDK in a browser context, but this has been removed since the restructure to the js monorepo.

I would hope that in the future, breaking changes like this would be left for major versions! :)

ThirdwebSDK problem

Hi, I'm beginning with ThirdwebSDK and I got the next problem.

const sdk = new ThirdwebSDK("mumbai");
^

TypeError: ThirdwebSDK is not a constructor

I followed the instructions using first step.

const ThirdwebSDK = require ("@thirdweb-dev/sdk");
const sdk = new ThirdwebSDK("mumbai");

Error with Vite 4

Steps to Replicate

• npm create vite@latest
• Select React, TypeScript
• npm i ethers @thirdweb-dev/sdk @thirdweb-dev/react
• npm run dev

SDK-Can not getContractList when deploy contract use GASLESS.

When i deploy contract with network GEORI and success.
Then I use method const list = await sdk.getContractList(currentAddress) to get all List contract .

I get the result that no contracts can be found deployed using gasless and using a regular wallet is successful.

I tested with RINKEBY network, it was successful and no error
Can you help me to test GEORI network and mainnet networks.

[React] - useNFTSupply throws invariant failed with token ID:

Feature Description

Incorrectly, the useNFTBalance throws an error when the third parameter (token ID) is a number.

For example, the below code errors:

  const editionDrop = useEditionDrop(
    "0x1fCbA150F05Bbe1C9D21d3ab08E35D682a4c41bF"
  );
 
 const { data: balance, isLoading } = useNFTBalance(editionDrop, address, 0);

Goal

Allow the third parameter to be of type number

Gnosis Safe from backend

Is it possible to use a Gnosis Safe wallet from the backend (Node.js)? I'm trying to list NFTs using the marketplace pre-build contract.

Thanks

Marketplace contract with custom provider: buyoutListing Error: invalid hash

I'm using magic.link wallet as a custom provider with the Marketplace contract.

Here is my code:

const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY);
await magic.auth.loginWithMagicLink({ email: "[email protected]" });
const provider = new ethers.providers.Web3Provider(magic.rpcProvider);
const signer = provider.getSigner();
const web3Sdk = ThirdwebSDK.fromSigner(signer, "goerli");
const contract = await web3Sdk.getContract(
  process.env.NEXT_PUBLIC_REKOLT_MARKETPLACE_CONTRACT_ADDRESS,
  'marketplace',
);
const buy = await contract.buyoutListing(1, 1);

I have the following error:

Error: Contract transaction failed

Message: invalid hash

| Transaction info |

from:      0x031d9DA080fD0DE2Be1C08Aa1e88C1146588E434
to:        0xC166FA92A0515234DeA1BF52D06776168600dfDE
chain:     goerli (5)

Need help with this error? Join our community: https://discord.gg/thirdweb

| Raw error |

invalid hash (argument="value", value=null, code=INVALID_ARGUMENT, version=providers/5.7.1)
    at convertToTWError (paper-xyz-b54e7924.esm.js?f374:1588:1)
    at ContractWrapper.sendTransactionByFunction (paper-xyz-b54e7924.esm.js?f374:5449:1)
    at async ContractWrapper.sendTransaction (paper-xyz-b54e7924.esm.js?f374:5424:1)
    at async MarketplaceDirect.buyoutListing (paper-xyz-b54e7924.esm.js?f374:13133:1)
    at async Marketplace.buyoutListing (marketplace-ceb4a6d2.esm.js?4f67:388:1)

Is it possible to use this contract with a custom provider? What I'm missing?

Uncaught Error: Must be used within Provider when using an external provider such as wagmi

Error when offering to a Direct Listing

Getting an error on makeOffer in useMakeOffer

| Raw error |

cannot estimate gas; transaction may fail or may require manual gas limit [ See: https://links.ethers.org/v5-errors-UNPREDICTABLE_GAS_LIMIT ] (reason="execution reverted: !BAL20", method="estimateGas",...

Tuffle compile error during thirdweb deploy

I have already deployed a contract to testnet. i would like to deploy with thirdweb sdk and then I can use it for my front end.
But the error shows when I type : npx thirdweb deploy

[React] - Support 3D File Formats in NFT Media Renderer UI Component

Feature Request

We have the NFT Media Renderer component which renders the relevant HTML tag after determining the file type provided by the metadata prop.

This currently only supports image and video files. We would like to add support for common 3D formats such as .glb.

Goal

Be able to provide an NFT that has a .glb or other 3D file format file as it's image property and have it rendered on the UI.

Tree Shaking is not working

The Problem

importing even the tiniest thing from SDK results in a TON of code being imported and results in an extremely huge bundle size

Example

Let's say we add this line to our application: -

import { ChainId } from '@thirdweb-dev/sdk/evm';

( above-shown code is taken from thirdweb.com codebase)

ChainId is a tiny object and I would expect that only a little bit of JS will be imported from thirdweb-sdk in the final bundle - But that's not what happens!

This is what happens in Next.js & Vite

Next.js

Areas marked with an arrow are loaded because of the above-shown import

Vite ( vanilla JS )

JS chunks created after running the build command:

A LOT (200kB !!!) of unnecessary JS is bundled together and the below-shown chunks are loaded on the client

What I Expect

Only the imported code - ChainId object should have been bundled - because It's a simple object that does not have any dependencies.

If the tree shaking was working properly - only the below-shown object would be imported from thirdweb-sdk - nothing else

What I Get

A lot of unnecessary code (200kb+) gets bundled!

Checkout these Repos to replicate the issue

• Vite - https://github.com/MananTank/thirdweb-sdk-treeshaking-issue-vite
• Next - https://github.com/MananTank/thirdweb-sdk-next-issue

What's happening here?

I suspect there's something wrong with how the imports/exports are done or maybe how the package is built that is causing the tree shaking to not work properly. I highly recommend investigating this as soon as possible

Impact 🔥

Websites using thirdweb-sdk are loading a LOT more JS than required - including https://thirdweb.com/

Deployer events addDeployListener not receiving data

emitTransactionListener is not emitting events because deployViaFactory is creating a new instance of ContractFactory and losing reference to previously added listener.

The steps i follow for above process are:

Code tried:

`sdk.deployer.events.addTransactionListener((event: any) => {
console.log(event, "from event");
});

const contractAddress = await sdk.deployer.deployNFTCollection({
name: "My Collection NFT",
primary_sale_recipient: "0xd6f71925b31......................625E6850DB",
});`

Snippet is not working.

What i also noticed:
When i logged sdk.deployer instance there is no such event name as addTransactionListener available in the context. Instead there is only one event is there named addDeployListener
But when i logged contract instance from useContract hook i am able to see that addTransactionListener is available in the context.

After debugging i noticed the issue is coming from:

https://github.com/thirdweb-dev/js/blob/main/packages/sdk/src/evm/core/classes/contract-deployer.ts

Missing Possible WalletConnect Files

I am trying to implement ThirdWebProvider in my NextJS typescript app.

Upon importing the provider, i got an error noting that there is a missing file or directory.

./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js

When I check the node_modules folders it is missing and i have tried to reinstall the packages as well and it is still missing and erroring out.

The noted path above is what is missing. Is this something on your end?

Error: Unrecognized chain name or RPC url: rinkeby

I got this error after upgrading to @thirdweb-dev/sdk to 3.4.2 and @thirdweb-dev/react to 2.9.7

`Server Error
Error: Unrecognized chain name or RPC url: rinkeby

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.getProviderForNetwork
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/@thirdweb-dev/react/node_modules/@thirdweb-dev/sdk/dist/thirdweb-dev-sdk.cjs.dev.js (1195:15)

file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.cjs.dev.js (745:49)
Array.reduce


file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.cjs.dev.js (744:30)
Object.useMemo
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/react-dom/cjs/react-dom-server.node.development.js (1582:19)
Object.useMemo
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/react/cjs/react.development.js (1532:21)
ThirdwebProvider
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.cjs.dev.js (743:28)
processChild
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/react-dom/cjs/react-dom-server.node.development.js (3353:14)
resolve
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/react-dom/cjs/react-dom-server.node.development.js (3270:5)
ReactDOMServerRenderer.render
file:///Users/apple/Documents/GitHub/safrootics-app-react/node_modules/react-dom/cjs/react-dom-server.node.development.js (3753:22)`

useContract returns `undefined`

Initializing a contract through the useContract hook almost always results in undefined.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThirdwebProvider } from "@thirdweb-dev/react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThirdwebProvider
    >
        <App />
    </ThirdwebProvider>
  </React.StrictMode>
);

reportWebVitals();

App.js

import Home from "./pages/Home";

function App() {
  return (
   <Home></Home>
  );
}

export default App;

Home.js

import React from 'react';
import { ConnectWallet, ChainId, useContract, useContractWrite } from "@thirdweb-dev/react";
import myABI from "./myABI.json";


function Home() {
    const { contract } = useContract("0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", myABI);

    console.log(contract);
    console.log(myABI);

    return (
        <>
            <ConnectWallet accentColor="#f213a4" colorMode="dark" />

            <h1>Thirdweb</h1>
        </>
    );
}

export default Home;

myABI.json

[{"constant":false,"inputs":[{"name":"newImplementation","type":"address"}],"name":"upgradeTo","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"newImplementation","type":"address"},{"name":"data","type":"bytes"}],"name":"upgradeToAndCall","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[],"name":"implementation","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newAdmin","type":"address"}],"name":"changeAdmin","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"admin","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"_implementation","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"anonymous":false,"inputs":[{"indexed":false,"name":"previousAdmin","type":"address"},{"indexed":false,"name":"newAdmin","type":"address"}],"name":"AdminChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"implementation","type":"address"}],"name":"Upgraded","type":"event"}]

I am connected using the ConnectWallet button, and the network is the same as the one the contract is on (mainnet, the contract is the address of the USDC token).

Tried it with different ABIs and contract addresses, as well as without any ABI, just the address. Why does this happen? Does the hook work ONLY for contracts deployed using the Thirdweb Dashboard, or what's the case here?

[SDK] Better Documentation

The documentation lacks information on which methods work with which contract type. Reviewing method names (collection vs edition and various drops) and consolidating them with function overloading would be beneficial. There could also be an auto detection step as contract types are identifiable.

No mention that it only works with ERC721

https://portal.thirdweb.com/pre-built-contracts/nft-collection
https://portal.thirdweb.com/sdk/interacting-with-contracts/nft-collection

No mention that it only works with ERC1155

https://portal.thirdweb.com/pre-built-contracts/edition
https://portal.thirdweb.com/sdk/interacting-with-contracts/edition

Finally, labeling which methods contain a cost would also be helpful to developers.

@thirdweb/react not compatible with the recent version of wagmi

I open this issue because I recently encounter an issue with the react package of thirdweb. This is the issue and the response from wagmi:

wevm/wagmi#1858 (comment)

[SDK] - Expose convenience function to do `ethers.utils.formatEther` and `ethers.utils.parseEther`

Background

Working with BigNumber variables requires importing ethers and using ethers.utils.formatEther and parseEther functions which is not very discoverable through our SDK unless you are already familiar with the ethers dependency.

It would be great to expose convenience functions that expose these directly from our SDK package rather than ethers.

Goal

[] Add toEther function

• Users can import toEther from the @thirdweb-dev/sdk package and convert a number from wei to formatted value. Use the ethers.utils.formatEther functionality under the hood.

[] Add toWei function

• Same as above, except use parseEther under the hood.

[SDK] - Add "getOffers" to Marketplace

Feature Description

Currently, there is no way to view all of the offers that have been made to a direct listing.

We should add this functionality so that the user can view all of the offers on a given listing ID.

Goal

Add the capability to call:

marketplaceContract.getOffers(listingId)

That returns an array of Offers.

Info

This should be implemented using the Contract Events feature.

useAddress empty when signin with Magic socials

I cloned the following repo: https://github.com/thirdweb-example/thirdweb-auth-next-auth

I followed these steps and when I signin using Google auth, I successfully see the user in the Magic dashboard => the wallet is created.

What step am I missing to get the wallet connected? The useAddress hook return null

Add free domain name and version to forwarder for Defender gasless transaction

Hi, I found the domain for the forwarder using openzeppelin defender hardcoded into the SDK here

domain = {
        name: "GSNv2 Forwarder",
        version: "0.0.1",
      };

I would find it useful to be able to specify the domain for the forwarder, so that I can create my own forwarder and use that one instead of the one provided here, and specified in the doc

Moreover, this can pair well with the pre-built contract https://thirdweb.com/thirdweb.eth/Forwarder, that has the constructor EIP712("MinimalForwarder", "0.0.1") so that anyone can use his own contract with zero effort.

It can become easily a property of the gasless option of the sdk.

fatal: not a git repository (or any of the parent directories): .git

When trying to install @thirdweb-dev/react in NextJS project

[TypeScript] On SinglePhase and SignatureDrop, fix activeClaimCondition

On Signature Drop and SinglePhase extension, we only have one claim condition

Right now, when calling claimConditions.getActive, we always return that single phase.

We should only do so if the the maxQuantity for the phase is different than 0, and the startTime for the phase has already started.

@thirdweb-dev/auth API vulnerability

Issue

When sending a blank GET request to /api/auth/login using @thirdweb/auth in Next.js (and Express.js as well) the whole server crashes because of an unexpected token in this line of code.

This might be a vulnerability because this is a way to crash the whole backend with one single request.

Also to mention that the atob method used here is deprecated.

const payload = JSON.parse(atob(req.query.payload as string)) as LoginPayload;

The error

error - node_modules/@thirdweb-dev/auth/next/evm/dist/thirdweb-dev-auth-next-evm.esm.js (20:0) @ handler$2
error - SyntaxError: Unexpected token º in JSON at position 0
    at JSON.parse (<anonymous>)

Possible solutions

1. Replace the deprecated atob method with the modern Buffer.from method.
2. Handle the case where the req.query.payload is null or undefined.
3. Catch server errors in the whole route handler.

Error with SvelteKit

/usr/bin/npm run dev

> [email protected] dev
> vite dev



  VITE v4.0.4  ready in 1662 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
10:32:13 pm [vite-plugin-svelte] ssr compile in progress ...
/home/john/Desktop/xdc/node_modules/.pnpm/@[email protected][email protected]/node_modules/@thirdweb-dev/sdk/dist/thirdweb-checkout-058de62a.cjs.dev.js:1116
  return CONTRACT_ADDRESSES[chainId][contractName];
                                    ^

TypeError: Cannot read properties of undefined (reading 'twFactory')
    at getContractAddressByChainId (/home/john/Desktop/xdc/node_modules/.pnpm/@[email protected][email protected]/node_modules/@thirdweb-dev/sdk/dist/thirdweb-checkout-058de62a.cjs.dev.js:1116:37)
    at /home/john/Desktop/xdc/node_modules/.pnpm/@[email protected][email protected]/node_modules/@thirdweb-dev/sdk/dist/thirdweb-checkout-058de62a.cjs.dev.js:17116:30
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v19.3.0

Process finished with exit code 1

process is not defined

I try to as example describe in READEME.md, but got this error:

@thirdweb-dev_react.js?v=2f243b4d:19243 Uncaught ReferenceError: process is not defined

My version is:
"@thirdweb-dev/react": "^3.6.0",
"@thirdweb-dev/sdk": "^3.6.0",

Cant understand why react lib try to access process?

 if (process.env.NODE_DEBUG) {
      debugEnv = process.env.NODE_DEBUG;
      debugEnv = debugEnv.replace(/[|\\{}()[\]^$+?.]/g, "\\$&").replace(/\*/g, ".*").replace(/,/g, "$|^").toUpperCase();
      debugEnvRegex = new RegExp("^" + debugEnv + "$", "i");
    }

Marketplace: Active listings query filtering works incorrect

Hi! I'm using ThirdWeb React SDK to communicate with marketplace contracts.

Active Listings pagination seems to work based on All Listing pagination and just filter data when it's fetched.

Let me show you

I have a ThirdWeb Marketplace Contract with 17 active listings. You can check it by link https://thirdweb.com/mumbai/0xe844E4183DB6F6F026d44a7Cb3AD0C485d18748a/listings

I wrote such code:

const activeListings = await contract.getActiveListings({
    start: 0,
    count: 24,
  });

  const activeListingsSecond = await contract.getActiveListings({
    start: 23,
    count: 24,
  });

  const allListings = await contract.getAllListings({
    start: 0,
    count: 24,
  });
  const allListingsSecond = await contract.getAllListings({
    start: 23,
    count: 24,
  });

  console.log('activeListings', activeListings);
  console.log('activeListingsSecond', activeListingsSecond);
  console.log('allListings', allListings);
  console.log('allListingsSecond', allListingsSecond);

And I have such output:

As you can see, I have 17 Active Listings in total. But these listings are placed on different pages, event size of page 24.

I think the issue is that your pagination works based on all listings and data is filtered after fetch.

Could you check it?

Thanks! Have a nice day!