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

Related tags

Learning resource js
Overview



thirdweb JavaScript/TypeScript monorepo

Build Status Join our Discord!

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

Packages

Package Description Latest Version
/sdk Best in class web3 SDK for Browser, Node and Mobile apps npm version
/react Ultimate collection of React hooks for your web3 apps npm version
/auth Best in class wallet authentication for Node backends npm version
/storage Best in class decentralized storage SDK for Browser and Node npm version
/cli Publish and deploy smart contracts without dealing with private keys npm version
/solana Solana SDK for Browser, Node and React Native npm version

Documentation

Visit https://portal.thirdweb.com/ to view the full documentation.


Contributing

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


Community

The best place to discuss your ideas, ask questions, and troubleshoot issues is our Discord server.


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].

Comments
  • instalasi Erorr @thirdweb-dev/react @thirdweb-dev/sdk ethers

    instalasi Erorr @thirdweb-dev/react @thirdweb-dev/sdk ethers

    <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@"^17.0.2 || ^18.0.0-0" from [email protected] npm WARN node_modules/next npm WARN next@"12.3.0" from the root project npm WARN 12 more (react-dom, styled-jsx, use-sync-external-store, ...) 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 -2 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

    npm ERR! A complete log of this run can be found in:>

    when the installation is done it shows an error and it is not added to the package.json

    i have been looking for the best solution fix this start node.js reinstallation and others

    opened by zulfi-eth 8
  • Hotfix- How to get transaction hash when deploying smart contract

    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!!!

    opened by legiarung 7
  • useContract returns `undefined`

    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).

    thirdweb-bug

    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?

    opened by account4sO8sF3 6
  • [SDK] - Expose convenience function to do `ethers.utils.formatEther` and `ethers.utils.parseEther`

    [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.
    good first issue SDK 
    opened by jarrodwatts 4
  • SDK-Can not getContractList when deploy contract use GASLESS.

    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.

    wontfix 
    opened by legiarung 4
  • Version Packages

    Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    @thirdweb-dev/[email protected]

    Patch Changes

    @thirdweb-dev/[email protected]

    Patch Changes

    @thirdweb-dev/[email protected]

    Patch Changes

    @thirdweb-dev/[email protected]

    @thirdweb-dev/[email protected]

    opened by github-actions[bot] 0
  • Bump json5 from 1.0.1 to 1.0.2

    Bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Different public address from Magic

    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?

    opened by arnaudjnn 0
  • @thirdweb-dev/auth API vulnerability

    @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.
    opened by jaschahuisman 0
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

Nathanael Garza 2 Jan 21, 2022
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 3 Aug 25, 2022
A web3 starter project using Typescript, Hardhat, ethers.js and @web3-react

Starter React Typescript Ethers.js Hardhat Project This repo contains a Hardhat and React Dapp starter project. The React Dapp in the frontend dir of

ChainShot 39 Dec 31, 2022
(🔗, 🌲) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Naut 35 Sep 20, 2022
🛠 Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

Holaplex 30 May 21, 2022
Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

MultiDeviceHover Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop. Usage Install Using npm, install multi

Ryuta Sakai 1 Oct 5, 2021
This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Muhammet Çokyaman 4 Nov 4, 2021
a quick start boilerplate for developing web3 apps and deploying smart contracts.

create-web3 A boilerplate for starting a web3 project. This boilerplate quickly creates a mono repo with 2 environments, a Next JS environment for fro

Eric Roupe 83 Dec 16, 2022
The Remix Stack for Web2 apps and Web3 DApps with authentication with Magic, testing, linting, formatting, etc.

Remix French House Stack Learn more about Remix Stacks. npx create-remix --template janhesters/french-house-stack What's in the Stack? The French Hou

Jan Hesters 26 Dec 26, 2022
The template I use to kickstart all my web3 apps.

dApp Starter The template I use to kickstart all my web3 apps. This starter kit is composed of Next.js and Tailwind CSS, with RainbowKit, ethers, & wa

Miguel Piedrafita 364 Dec 18, 2022
An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

Gianluca Chiarani 1 May 1, 2021
Highlighting the best apps and builders on the Farcaster community.

FarApps Highlighting the best apps and builders on the Farcaster community. Getting Started This project uses Next.js. Install dependencies and run th

null 15 Dec 30, 2022
Secure-electron-template - The best way to build Electron apps with security in mind.

secure-electron-template A current electron app template with the most popular frameworks, designed and built with security in mind. (If you are curio

reZach 1.4k Dec 29, 2022
Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Baidu BEFE 1.7k Nov 25, 2022
Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing

Flutter 148.1k Jan 7, 2023
Storex is a store management opensource API platform for web and mobile apps developers.

STOREXAPI STOREXAPI is a free online REST API that you can use whenever you need Pseudo-real data for your store management website, mobile applicatio

Abdullah Al Mamun 7 Aug 5, 2022