Learn how to use the Web3Button component from the thirdweb React SDK!

Overview

Web3Button

This template shows you how you can use our Web3Button component from our React SDK to call any function on any smart contract; and ensure the user:

  • Has their wallet connected
  • Is on the correct network (as defined in _app.js)

before attempting to call the function.

contract.nft.mint.to(address, { name: "Hello world!", // Image can be a File, or any url that points to a file image: myFile, description: "Your awesome NFT", }) } // Or just call the function name and parameters directly: // functionName="mintTo" // // The mintTo Function on this contract accepts two parameters, we can pass them in an array here. // params={[ // // First parameter is the address to mint to // address, // // Second parameter is the metadata URI // "ipfs://Qmf9csTfndWRgH2z35WUBm9jTuQKfSv1dJC9YKW6iTZkDP/0", // ]} // Some customization of colors and styling colorMode="light" accentColor="#F213A4" // If the function is successful, we can do something here. onSuccess={(result) => console.log(result)} // If the function fails, we can do something here. onError={(error) => console.error(error)} > Mint NFT ">
<Web3Button
  // The contract address
  contractAddress="0x424037abd63d32595bD843791ab015C31c87Cb6d"
  // Access the contract itself, perform any action you want on it:
  action={(contract) =>
    contract.nft.mint.to(address, {
      name: "Hello world!",
      // Image can be a File, or any url that points to a file
      image: myFile,
      description: "Your awesome NFT",
    })
  }
  // Or just call the function name and parameters directly:
  // functionName="mintTo"
  // // The mintTo Function on this contract accepts two parameters, we can pass them in an array here.
  // params={[
  //   // First parameter is the address to mint to
  //   address,
  //   // Second parameter is the metadata URI
  //   "ipfs://Qmf9csTfndWRgH2z35WUBm9jTuQKfSv1dJC9YKW6iTZkDP/0",
  // ]}

  // Some customization of colors and styling
  colorMode="light"
  accentColor="#F213A4"
  // If the function is successful, we can do something here.
  onSuccess={(result) => console.log(result)}
  // If the function fails, we can do something here.
  onError={(error) => console.error(error)}
>
  Mint NFT
</Web3Button>
You might also like...
Foxpage SDK for JavaScript in the browser and Node.js.

Foxpage SDK for JavaScript in the browser and Node.js.

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers
The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

Use js to download and unzip the npm package. only supports use in the browser.

Use js to download and unzip the npm package. only supports use in the browser.

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React = 16.8.0 Installation Using npm: $ npm install --save react-un

@use-gesture is a library that let you bind richer mouse and touch events to any component or view.
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

👇Bread n butter utility for component-tied mouse/touch gestures in React

🕹 GBA emulator on your React project - easy and powerful to use!
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

React Query for Firestore, that you can actually use in production, on every screen.

React Query for Firestore, that you can actually use in production, on every screen.

Shows how to use phan-wallet-mock to test wallet functionality of a react app with Cypress.

Cypress Starter Kit A no-nonsense Cypress template for copying into new or existing projects, with some sensible defaults and useful helper functions.

Sample of how to use Frontegg with embedded react login-box

Getting Started with Frontegg Embedded Login-Box and React This sample is a React Login-Box embedded sample crafted with React.js. Running the sample

30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 16.1k Sep 21, 2022
This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Bek Brace 105 Sep 17, 2022
A curated list of resources to learn React and related web technologies as fast as possible.

React Learning Resources A curated list of resources to learn React and related web technologies as fast as possible. The goal is to help you create p

Naresh Bhatia 58 Aug 12, 2022
⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

SkynexUI Use the platform, don't care about how to style there ⚠️ Version 1.x.x is alpha, trust only in v2 A set of components writen on top of React

SkynexUI 664 Sep 14, 2022
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Abdul Hakim 12 Jul 17, 2022
Github-ci-cd-react - I followed CI/CD course from codedamn to learn how to implement github actions in a project, in this practical lesson with codedamn am using ReactJS

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

Okechukwu Somtochukwu 1 Jan 2, 2022
A React wrapper for Typeform Embed SDK.

React wrapper for Typeform Embed SDK

Alex Garces 119 Jul 24, 2022
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

Zappar 29 Sep 19, 2022
Google OAuth2 using the new Google Identity Services SDK for React 🚀

React OAuth2 | Google Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google ?? Install $ npm install @react-oauth/goo

Mo'men Sherif 253 Oct 1, 2022
Inteliver React SDK. Inteliver is an image management as a service.

This repository is Inteliver's official SDK for react framework. Using this SDK you can integrate your react project with inteliver image management service.

Inteliver 2 Sep 8, 2022