Code Monkey home page Code Monkey logo

biconomy-demo's Introduction

Biconomy SDK Social Login + Gasless Transactions

This is a starter kit that implements the Biconomy SDK into a basic React application built with Vite. This Kit comes with everything you need for social login and for making gasless transactions to a contract with the Biconomy SDK.

Installation

Navigate to this directory in your terminal and then

  cd smartContract

You can use npm to install but for these instructions I will be using yarn. It will work the same way with npm or pnpm.

  yarn

Once dependencies are installed run the following command:

  cp .env.example .env;

You will need to update the newly created .env file with your wallet's PRIVATE_KEY. Make sure to get API keys from Etherscan or PolygonScan. Create an account to get your API keys, these are free.

Run the command below to deploy your contract to the Polygon Mumbai Network. Make sure the wallet you got your private key from has a small amount of test matic for deployment. You can get test matic here.

  npx hardhat run scripts/deploy.ts --network mumbai

Once deployed copy the contract address on the terminal and run the command below:

  npx hardhat verify --network mumbai <your-contract-address>

This will verify your contract on Polygonscan and give you a link to your code on Polygonscan!

Biconomy Dashboard Registration

Now head over to the Biconomy SDK Dashboard

Sign in With Github then register a new dApp. I have some registred dApps already but you might not.

Register new dApp

Name your dApp and choose a chain, in this case we deployed to Polygon Mumbai so let's choose this one.

Register new dApp part 2

You'll see this message on the top right let's click set up gas tank to set up the funds needed to cover users gas costs!

Register new dApp part 2

From here its fairly simple, agree to the terms and sign with the your wallet. Its important to note that if you want to withdraw the funds at any point then you will need to make sure that you use the same wallet you sign with at this step.

Deposit the funds you would like to start with and take note of your api key for later.

Finally we'll need to authorize the contract we just deployed.

Head back to the dApp page and click Smart Contracts and then Add Smart Contract. You can add the name of your contract and the address here. Because we verified it the ABI will be automatically fetched. If you do not verify your contract you can also manually paste your ABI here as well. Make sure to select the write method that you would like to authorize for gasless transactions. In this case we just have an incrementCount method.

Register new dApp part 3

Copy your API key and you will now be all set!

Frontend Configuration

In your terminal navigate to the root folder of the project and install dependencies and configure the frontend variables as we did for the contract folder.

  yarn
  cp .env.example .env;

Add your Biconomy API Key and your contract address in the .env file, and use the dev script to run:

  yarn dev

You should now be all set to try out the starter kit and begin making changes for your own project!

Pull requests welcome

Have any improvements to be made? Feel free to make a Pull Request!

biconomy-demo's People

Contributors

namn-grg avatar

Stargazers

Smarthug avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.