Lawrence  Lesch

Lawrence Lesch

1668086220

A Simple, Maximally Extensible, Dependency Minimized Framework

web3-react (beta)

Looking for the prior version of this library? It's available on the v6 branch.

Example

This is a hosted version of packages/example-next.

Packages

PackageVersionSizeLink
@web3-react/typesnpmminzip 
@web3-react/storenpmminzip 
@web3-react/corenpmminzip 
Connectors   
@web3-react/eip1193npmminzipEIP-1193
@web3-react/emptynpmminzip 
@web3-react/gnosis-safenpmminzipGnosis Safe
@web3-react/metamasknpmminzipMetaMask
@web3-react/networknpmminzip 
@web3-react/urlnpmminzip 
@web3-react/walletconnectnpmminzipWalletConnect
@web3-react/coinbase-walletnpmminzipCoinbase Wallet

Get Started

  • yarn
  • yarn bootstrap
  • yarn start

In addition to compiling each package in watch mode, this will also spin up packages/example-next on localhost:3000. (It will also spin up packages/example-cra on localhost:3001, but this is just a skeleton app for testing compatibility.)

Run Tests

  • yarn build
  • yarn test --watch

Add a Dependency

  • yarn lerna add <DEPENDENCY> --scope <PACKAGE>

Remove a Dependency

  • Delete the relevant package.json entry

Because of a lerna bug, it's not possible to prune yarn.lock programmatically, so regenerate it manually:

  • yarn lerna exec "rm -f yarn.lock" --scope <SUBPACKAGE>
  • yarn clean --scope <SUBPACKAGE>
  • yarn bootstrap

Publish

  • yarn lerna publish [--dist-tag]

Documentation

This version of web3-react is still in beta, so unfortunately documentation is pretty sparse at the moment. packages/example-next, TSDoc comments, and the source code itself are the best ways to get an idea of what's going on. More thorough documentation is a priority as development continues!

Upgrading Connector Dependencies

Some connectors have one or more dependencies that are specific to the connection method in question. For example, the walletconnect connector relies on @walletconnect/ethereum-provider package to handle a lot of the connection logic. Often, you may wish to upgrade to the latest version of a client package, to take advantage of the latest features. web3-react makes the process of upgrading client packages fairly painless by specifying them as peerDependencies. This means that you have to explicitly install client packages, and therefore may transparently switch between any version that agrees with the semver specified in the connector (usually any matching major).

Third-Party Connectors

The decision to publish a connector under the @web3-react namespace is fully up to the discretion of the team. However, third-party connectors are always welcome! This library was designed to be highly modular, and you should be able to draw inspiration from the existing connectors to write your own. That connector can live inside your codebase, or even be published as a standalone package. A selection of third-party connectors that have widespread usage may be featured below, PRs modifying this list are welcome.

Upgrading from v6

While the internals of web3-react have changed fairly dramatically between v6 and v8, the hope is that usage don't have to change too much when upgrading. Once you've migrated to the new connectors and state management patterns, you should be able to use the hooks defined in @web3-react/core, in particular useWeb3React (or usePriorityWeb3React), as more or less drop-in replacements for the v6 hooks. The big benefit in v8 is that hooks are now per-connector, as opposed to global, so no more juggling between connectors/multiple roots!

Download Details:

Author: Uniswap
Source Code: https://github.com/Uniswap/web3-react 
License: GPL-3.0 license

#typescript #javascript #ethereum #dapp #web3 

A Simple, Maximally Extensible, Dependency Minimized Framework
Hermann  Frami

Hermann Frami

1668029760

Squeezer: Squeezer Framework - Build Serverless DApps

What is Squeezer ?

Squeezer is a platform that empowers new-entry blockchain developers to build serverless dApps simply as dead.

ChainKit - Agnostic blockchain integration

The main usage of the ChainKit is to unify top blockchains interfaces into a single normalized API interface , therefore you can build blockchain dApps easily without digging into blockchain complex infrastructure.

How to use the ChainKit

Features in short

  • create blockchain wallets
  • double-encrypt for wallet data
  • on-the-fly encryption/decryption
  • user choose how to store wallet token
  • bi-directional onchain transactions (inbound and outbound)
  • create blockchain payment solution
  • build dApps connecting to smart contracts using chainkit agnostic connector
  • deploy smart contracts
  • quick intuitive code deployments by using a special mechanism which will deploy smart contracts and dApp services where code changed
  • powered by microservices
  • share components between functions, similar to monolytic project
  • auto-deployable, auto-scalable , no DevOps requirements
  • silent deployments ,no interruption for the current functionality ( really useful on production )
  • one single command to simultaneously deploy all available functions on your project where code changed from the last deployment
  • automatic rollback to the previous working deployment if something goes wrong
  • sequential deployments, wait for the current deployments in progress to finish
  • self-healing functions
  • test your code locally on a simulated functions platform for a faster development cycle
  • separate your environments in multiple stages
  • extend framework functionality with your own "home-made" plugins
  • pay only for the usage ( no monthly subscriptions )
  • Swagger UI API documentation support

Roadmap

  • decentralize microservices, currently we are using cloud microservices, AWS Lambda, Azure Functions ... we need to get rid of it and store and access the microservices in a decentralized way, IPFS and Ethereum Swarm could be an option
  • add 2FA and other security options when using ChainKit sendTransaction which is used on withdraws, transfer and other sensitive actions
  • add DEX site example using Squeezer 2way-payment-system

Requirements

Squeezer CLI

Squeezer command-line interface

Templates

Create a quick project stub by using templates :

templatedescription
Squeezer 2way Paymenthttps://github.com/SqueezerIO/squeezer-2way-payment

Plugins

Extend or merge the Squeezer framework functionality with plugins

PluginAuthor
Serve Plugin 
This plugin enables serving support for local development within the Squeezer Framework.
Nick Chisiu
Swagger Plugin 
This plugin enables Swagger API Documentation support within the Squeezer Framework.
Nick Chisiu

Example Projects

Project NameAuthorDemo
Squeezer 2way Payment 
Squeezer Two Way Blockchain Payment System (inbound + outbound)
Nick Chisiuvideo

Getting started

NOTE: Windows users should enable symlinks in order to avoid unwanted symbolic links errors .

Full Video tutorial

  1. Install Squeezer's command line tool globally on your machine using npm: npm install squeezer-cli -g
  2. Create a new project using the squeezer-2way-payment template: sqz create --project my-first-project --template https://github.com/SqueezerIO/squeezer-2way-payment
  3. Switch to the project's directory: cd my-first-project
  4. Initialize the local directory as a Git repository: git init
  5. Add the files in your new local repository. This stages them for the first commit: git add .
  6. Open up GitHub in a browser, navigate to the repositories page, and click on the New button, and enter the name of your project that you've created locally, in our case it will be my-first-project, then create the new repository.
  7. In Terminal, add the URL for the remote repository where your local repository will be pushed: git remote add origin remote repository URL
  8. Commit the files that you've staged in your local repository: git commit -m "First commit"
  9. Push the master branch to GitHub: git push -u origin master
  10. Open up a new browser window and navigate to https://platform.squeezer.io, then login to the platform.
  11. Click on the import project button and import the project you've created from GitHub.
  12. In the first step of the import process, you have to select the repository from your list.
  13. In the second step of the import, you have to choose the provider and the stage name, dev or prod.
  14. After importing the project, the deployment will start automatically.
  15. When the deploy will be finished, we can check the logs by clicking on it.
  16. Scroll all the way down in the log window and copy the Swagger URL, then paste in a browser window.

Contributing

See contributing.md for contribution guidelines

Community

Meetups


Framework : squeezer.io

Docs : docs.squeezer.io


Download Details:

Author: SqueezerIO
Source Code: https://github.com/SqueezerIO/squeezer 
License: MIT license

#serverless #bitcoin #ethereum #dapp #blockchain

Squeezer: Squeezer Framework - Build Serverless DApps
Blockchain Dev

Blockchain Dev

1666062965

Web3 Messenger Dapp with Nextjs, React, Moralis, Tailwind CSS, MetaMask

In this tutorial, you'll learn how to build a Web3 Messenger Dapp with NEXT.JS, ReactJS, Moralis, Tailwind CSS and MetaMask.

Join me as I build a WEB3 MESSENGER DAPP with NEXT.JS. You'll learn how to do the following in this build:

๐Ÿ‘‰ How to build a Login and Logout Authentication flow with Metamask!
๐Ÿ‘‰ How to implement your own random custom avatar!
๐Ÿ‘‰ How to build a complete 1 - 1 Real Time Messaging Functionality using Moralis!
๐Ÿ‘‰ How to finally deploy the final build on Vercel!

๐Ÿ• TIMESTAMPS:
00:00 Introduction
01:32 Build Showcase
03:57 Explaining Moralis
06:41 Setting up Moralis
07:43 Setting up Next.js & Tailwind CSS
10:15 Initialising the Build
13:47 Building the Login Component
27:11 Implementing Moralis
34:36 Implementing Login Functionality
39:31 Implementing Logout Functionality
40:13 Deploying to Vercel (1/2)
47:14 Planning out the Messaging Screen
52:34 Building the Header Component (1/3)
57:17 Building the Avatar Component
58:58 Implementing Random Custom Avatars
1:04:57 Building the Header Component (2/3)
1:08:05 Implementing Username Functionality
1:14:35 Building the Header Component (3/3)
1:19:09 Building the Messages Component (1/2)
1:23:24 Building the Send Message Component
1:28:42 Implementing Messaging Functionality
1:44:40 Building the Message Component
1:51:47 Implementing Timestamp Functionality
1:58:20 Deploying to Vercel (2/2)
2:00:39 Outro

LOOKING FOR THE CODE? ๐Ÿ› ๏ธ
https://links.papareact.com/github 

Subscribe: https://www.youtube.com/c/SonnySangha/featured 

#web3 #reactjs #nextjs #dapp #tailwindcss #metamask #moralis

Web3 Messenger Dapp with Nextjs, React, Moralis, Tailwind CSS, MetaMask

Build Front End & Smart Contract for Raffle on Moonbeam Blockchain

Moonbeam Raffle

Frontend + SmartContract for raffle on Moonbeam.

Setup SmartContract development environment (MacOS)

First we need to setup a Moonbeam node locally using Docker:

docker pull purestake/moonbeam:v0.25.0 # Download Moonbeam docker image (only run this command the first time)
docker run --rm --name moonbeam_development -p 9944:9944 -p 9933:9933 purestake/moonbeam:v0.25.0 --dev --ws-external --rpc-external # Run the node

Once the node is running, deploy the SmartContracts to that node:

cd hardhat # All the SmartContracts files are located in the ./hardhat directory
yarn install # Install dependencies
yarn run compile # Compile the SmartContracts anytime you make changes
yarn run deploy:localhost # Deploy the compiled SmartContracts to the node running locally

Setup Frontend development environment

Run the development server:

yarn install # Install dependencies
yarn dev # Run front-end locally

Open http://localhost:3000 with your browser to see the result.

Download details:

Author: jbmerville
Source code: https://github.com/jbmerville/moonbeam-raffle 

#nextjs #react #smartcontract #solidity #dapp

Build Front End & Smart Contract  for Raffle on Moonbeam Blockchain

A Crowdfunding Dapp Built on Algorand Using Nextjs

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
# or
pnpm create next-app -- --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

Download details:

Author: andreademasi
Source code: https://github.com/andreademasi/pop-funding 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract

A Crowdfunding Dapp Built on Algorand Using Nextjs

An DApp Template Of NEAR Blockchain Smart Contract in Rust & Next.js

About

  • My dApp template of NEAR Blockchain smart contract in Rust and frontend in Next.js(Typescript)

Background

Environments

NameVersion
OSmacOS 10.15.5(Intel)
NodeJs16.16.0
Rust1.62.1
Terraform1.2.7
Serverless Framework2.72.*
AWS-cli2.5.3
NextJs12.*
React18.*
Emotion/react11.*

Architecture Overview

img

How to use

Smart contract build and deploy

  • Build
npm run build:contract
  • Deploy SmartContract to testnet
npm run dev:deploy:contract

Prepare Frontend(next.js) .env.local

  • Open contracts/neardev/dev-account.env and check contract name
$ cat contracts/neardev/dev-account.env 
CONTRACT_NAME=dev-1660474152460-14596747053304
  • Put .env.local file for next.js
touch .env.local
cat <<EOF frontend/.env.local
NEXT_PUBLIC_CONTRACT_NAME=dev-1660474152460-14596747053304
EOF

Frontend(next.js) build

  • Build
npm run build:frontend

Frontend(next.js) preview(local)

  • Start Dev Frontend Server
npm run dev

Frontend deploy(test)

  • Ensure your serverless framework access key $SERVERLESS_ACCESS_KEY is exists
    • if does not exist.
      • login app.serverless.com and publish your access key
echo $SERVERLESS_ACCESS_KEY
  • Execute serverless deploy
$ npm run deploy:serverless:test
  • Ensure serverless deploy is done(messages should be shown like following)
> awesome-rust-dapp@0.1.0 deploy:serverless:test
> cp serverless.test.yml serverless.yml && components-v1 && rm -rf serverless.yml


  awesomeRustDapp: 
    appUrl:         https://awesome-rust-dapp.efgriver.com
    bucketName:     v2j8wjn-k5ncpd8
    distributionId: E1WHCQULHESL5I

  287s โ€บ awesomeRustDapp โ€บ done

Unit test(rust)

npm run test:unit

Integration test(next.js / cypress)

  • start dev server
npm run dev

open another terminal

start integration test

  • after cypress launched successfully, choose E2E and run each test spec manually.
npm run test:integration:ts

Deploy frontend app AWS(test)

NEXT_PUBLIC_CONTRACT_NAME=dev-1660474152460-14596747053304
SERVERLESS_ACCESS_KEY=my secret key
SLS_STAGE=test
  • try deploy serverless deploy
export SERVERLESS_ACCESS_KEY=my secret key
source frontend/.env.local
npm run deploy:serverless

Note: Directory Tree

  • Main component in japanese
    • dAppใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰็ฝฎใๅ ด(Next.js)
    • ใ‚ตใƒผใƒใƒฌใ‚นใ‚คใƒณใƒ•ใƒฉใ‚ณใƒผใƒ‰(Serverless Framework)
    • dAppใƒใƒƒใ‚ฏใ‚จใƒณใƒ‰ใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰็ฝฎใๅ ด(NEAR Smart Contract)
    • ใ‚นใƒžใƒผใƒˆใ‚ณใƒณใƒˆใƒฉใ‚ฏใƒˆ็ตๅˆใƒ†ใ‚นใƒˆใ‚ณใƒผใƒ‰
    • E2Eใƒ†ใ‚นใƒˆใ‚ณใƒผใƒ‰(Cypress)
    • IaCใ‚ณใƒผใƒ‰(Terraform)
    • CI/CD่จญๅฎš(Github Actions Workflow)
    • ใ‚ตใƒผใƒใƒฌใ‚นใ‚คใƒณใƒ•ใƒฉใ‚ณใƒผใƒ‰(Serverless Framework)
nextjs-neardev-rust-template

โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ next-env.d.ts
โ”œโ”€โ”€ next.config.js
โ”œโ”€โ”€ package.json                      # ใƒ“ใƒซใƒ‰ใƒปใƒ‡ใƒ—ใƒญใ‚คใ‚นใ‚ฏใƒชใƒ—ใƒˆ(NPM script)
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ tsconfig.json
โ”œโ”€โ”€ src                               # dAppใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰็ฝฎใๅ ด(Next.js)
โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”‚   โ””โ”€โ”€ Form.tsx
โ”‚   โ”œโ”€โ”€ near-env-config.ts
โ”‚   โ”œโ”€โ”€ near-init-contract.ts
โ”‚   โ”œโ”€โ”€ pages
โ”‚   โ”‚   โ”œโ”€โ”€ _app.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ api
โ”‚   โ”‚   โ””โ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ public
โ”‚   โ”‚   โ”œโ”€โ”€ favicon.ico
โ”‚   โ”‚   โ””โ”€โ”€ vercel.svg
โ”‚   โ”œโ”€โ”€ styles
โ”‚   โ”‚   โ”œโ”€โ”€ Home.module.css
โ”‚   โ”‚   โ””โ”€โ”€ globals.css
โ”‚   โ””โ”€โ”€ types.ts
โ”œโ”€โ”€ contracts                        # dAppใƒใƒƒใ‚ฏใ‚จใƒณใƒ‰ใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰็ฝฎใๅ ด(NEAR Smart Contract)
โ”‚   โ”œโ”€โ”€ Cargo.lock
โ”‚   โ”œโ”€โ”€ Cargo.toml
โ”‚   โ”œโ”€โ”€ integration-tests            # ใ‚นใƒžใƒผใƒˆใ‚ณใƒณใƒˆใƒฉใ‚ฏใƒˆ็ตๅˆใƒ†ใ‚นใƒˆใ‚ณใƒผใƒ‰
โ”‚   โ”‚   โ””โ”€โ”€ rs
โ”‚   โ”‚       โ”œโ”€โ”€ Cargo.toml
โ”‚   โ”‚       โ””โ”€โ”€ src
โ”‚   โ”‚           โ””โ”€โ”€ tests.rs
โ”‚   โ”œโ”€โ”€ neardev
โ”‚   โ”‚   โ”œโ”€โ”€ dev-account
โ”‚   โ”‚   โ””โ”€โ”€ dev-account.env
โ”‚   โ”œโ”€โ”€ src
โ”‚   โ”‚   โ””โ”€โ”€ lib.rs
โ”‚   โ””โ”€โ”€ target
โ”‚       โ””โ”€โ”€ wasm32-unknown-unknown
โ”œโ”€โ”€ cypress                          # E2Eใƒ†ใ‚นใƒˆใ‚ณใƒผใƒ‰(Cypress)
โ”‚   โ”œโ”€โ”€ downloads
โ”‚   โ”œโ”€โ”€ e2e
โ”‚   โ”‚   โ”œโ”€โ”€ index.d.ts
โ”‚   โ”‚   โ””โ”€โ”€ spec.cy.ts
โ”‚   โ”œโ”€โ”€ fixtures
โ”‚   โ”‚   โ””โ”€โ”€ example.json
โ”‚   โ””โ”€โ”€ support
โ”‚       โ”œโ”€โ”€ commands.ts
โ”‚       โ””โ”€โ”€ e2e.ts
โ”œโ”€โ”€ cypress.config.js
โ”œโ”€โ”€ terraform                       # IaCใ‚ณใƒผใƒ‰(Terraform)
โ”‚   โ””โ”€โ”€ components
โ”‚       โ””โ”€โ”€ backend
โ”‚           โ”œโ”€โ”€ README.md
โ”‚           โ”œโ”€โ”€ apply.sh
โ”‚           โ”œโ”€โ”€ iam.tf
โ”‚           โ”œโ”€โ”€ main.tf
โ”‚           โ”œโ”€โ”€ output.tf
โ”‚           โ”œโ”€โ”€ providers.tf
โ”‚           โ”œโ”€โ”€ templates
โ”‚           โ”‚   โ”œโ”€โ”€ github-workflow-assume-role-policy.json
โ”‚           โ”‚   โ””โ”€โ”€ github-workflow-iam-policy.json
โ”‚           โ”œโ”€โ”€ terraform.plan
โ”‚           โ””โ”€โ”€ variables.tf
โ”œโ”€โ”€ .github
โ”‚   โ””โ”€โ”€ workflows                  # CI/CD่จญๅฎš(Github Actions Workflow)
โ”‚           โ”œโ”€โ”€ deploy-aws-serverless.yml
โ”‚           โ””โ”€โ”€ tests.yml
โ””โ”€โ”€ serverless.test.yml            # ใ‚ตใƒผใƒใƒฌใ‚นใ‚คใƒณใƒ•ใƒฉ่จญๅฎš(Serverless Framework)

Download details:

Author: Eigo-Mt-Fuji
Source code: https://github.com/Eigo-Mt-Fuji/nextjs-neardev-rust-template 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #rust

An DApp Template Of NEAR Blockchain Smart Contract in Rust & Next.js

A Dapp Where You Can Hire Bodyguard and Pay Them with Crypto

Crypto Bodyguard

A Dapp where you can hire bodyguard and pay them with Crypto

Technologies

  • Next.js
  • Tailwind CSS
  • Truffle
  • Ethers.js
  • NFTPort API
  • web3.storage

Getting Started

Configure Infura

Add the following to .env.local in the project's root.

NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}
NEXT_PUBLIC_NFTPORT_API={YOUR_NFTPORT_API}
NEXT_PUBLIC_MAPBOX_API={YOUR_MAPBOX_API}
NEXT_PUBLIC_WEB3STORAGE_APIKEY={YOUR_WEB3STORAGE_APIKEY}

Install the package

npm install

Run the development server

npm run dev

Open http://localhost:3000 with your browser to see the application.

Download details:

Author: ysongh
Source code: https://github.com/ysongh/Crypto_Bodyguard 
License: MIT license

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #etherjs

A Dapp Where You Can Hire Bodyguard and Pay Them with Crypto

Build DeFi Lending Borrowing DApp Using Nextjs & Solidity

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Download details:

Author: Parasgr7
Source code: https://github.com/Parasgr7/Defi-Lending-Borrowing 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #ethereum #defi #lending

Build DeFi Lending Borrowing DApp Using Nextjs & Solidity

Build An NFT Marketplace for Buy and Sell NFTs Over Ethereum Network

Description

This repository contains frontend part of NFT Marketplace Dapp.

The application allows users to list, buy, and sell NFTs by connecting to their Metamask wallet. There are two pages in it.

Home page, which displays recently listed NFTs. And any user is able to purchase NFT, but only owner is able to change the price.

Sell page enables users to list their NFT on the market and withdraw the proceeds from NFTs that have been sold.

The listed NFTs are derived from events data that is indexed by The Graph. The Graph is an indexing protocol for querying networks like Ethereum and IPFS.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Note

this error:

Server Error
NoMoralisContextProviderError: Make sure to only call useMoralis within a  <MoralisProvider>

can be fixed by deleting folder "react-moralis" from "./node_modules/web3uikit/node_modules/react-moralis/"

rm -r -f ./node_modules/web3uikit/node_modules/react-moralis

Download details:

Author: neeyno
Source code: https://github.com/neeyno/nextjs-thegraph-nft-marketplace 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #nft

Build An NFT Marketplace for Buy and Sell NFTs Over Ethereum Network

Building Web3 dApp on Polygon with Nextjs and TheGraph

WEB3RSVP dApp

Description

Eventbrite like dapp, but for events in the Metaverse. Built during 30 Days of Web3 curriculum.

WEB3RSVP - that stands for "web3 Rรฉpondez s'il vous plaรฎt" - is a dApp (decentralized application) built on Polygon that allows the user to create an event and invite the attendee to RSVP. RSVPing to an event is done by locking in an amount (set by the event creator). This amount is returned in case of participation in this event. If the user does not attend the event, the amount goes to the creator of the event.

Structure

This project contains 3 packages:

  1. The contract written in solidity.
  2. The subgraph with the graphql.schema derived from the contract's methods and serving as an API for the frontend.
  3. The frontend - a Nextjs app.

Download details:

Author: PaoloCalzone
Source code: https://github.com/PaoloCalzone/web3rsvp 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract

Building Web3 dApp on Polygon with Nextjs and TheGraph

The Ultimate NextJS Ethereum Dapp Boilerplate

ethereum-boilerplate

Fully Typescript ready NextJS components for fast building dApps without running own backend

This boilerplate is built with Moralis

You need active web3 provider/wallet only for authnetication. All pages in this boilerplate do not require an active web3 provider, they use Moralis Web3 API. Moralis supports the most popular blockchains and their test networks. You can find a list of all available networks in Moralis Supported Chains

Please check the official documentation of Moralis for all the functionalities of Moralis.

eth-boilerplate

โญ๏ธ Star us

If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us very happy!

๐Ÿค Need help?

If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this boilerplate is the super active community ready to help at any time! We help each other.

๐Ÿš€ Quick Start

๐Ÿ“„ Clone or fork ethereum-boilerplate:

git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git

๐Ÿ’ฟ Install all dependencies:

cd ethereum-boilerplate
yarn install

โœ Rename .env.local.example to .env.local and provide required data. Get your Web3 Api Key from the Moralis dashboard:

image

๐Ÿšดโ€โ™‚๏ธ Run your App:

yarn start

๐Ÿงญ Table of contents

๐Ÿ— Ethereum Components

<NFTBalances />

image

location: src/component/templates/balances/NFT/NFTBalances.tsx

๐ŸŽจ <NFTBalances /> : displays the the user's balances. Uses Moralis Evm API (does not require an active web3 provider).

<ERC20Balances />

image

location: src/component/templates/balances/ERC20/ERC20Balances.tsx

๐Ÿ’ฐ <ERC20Balances /> : displays the user's ERC20 balances. Uses Moralis Evm API (does not require an active web3 provider).

<ERC20Transfers />

image

location: src/component/templates/transfers/ERC20/ERC20Transfers.tsx

๐Ÿ’ฐ <ERC20Transfers /> : displays the user's ERC20 transfers. Uses Moralis Evm API (does not require an active web3 provider).

<NFTTransfers />

image

location: src/component/templates/transfers/NFT/NFTTransfers.tsx

๐ŸŽจ <NFTTransfers /> : displays the user's NFT transfers. Uses Moralis Evm API (does not require an active web3 provider).

<Transactions />

image

location: src/component/templates/transactions/Transactions.tsx

๐Ÿ’ฐ <Transactions /> : displays the user's transactions. Uses Moralis Evm API (does not require an active web3 provider).

๐Ÿš€DEMO: https://eth-boilerplate.vercel.app/

Download details:

Author: ethereum-boilerplate
Source code: https://github.com/ethereum-boilerplate/ethereum-boilerplate 
License: MIT license

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #ethereum

The Ultimate NextJS Ethereum Dapp Boilerplate

Building Dapp Frontend for Gamedao Protocol Using Nextjs

Gamedao Haiku

Prerequisites

node >= 16

Linux

sudo apt update &&
sudo apt install nodejs npm

Windows:

Installer 

Packages:

App:

Frontend application for gamedao

GraphQL

Everything about GraphQL Resolver and type generators

Translations:

Package to organize the translation files

Install:

Run yarn install

Local Frontend development

  1. Before the frontend can be started, the GraphQL types and queries must be generated for this yarn build:graphql must be executed
  2. Run development with yarn dev

Urls:

Frontend: http://localhost:3000/app

GraphQL Playground http://localhost:3000/api/graphql

Update GraphQL package

After changes in the graphql package yarn build:graphql must be executed to rebuild the types and queries.

Steps to Commit code

  1. Run yarn install
  2. Run yarn format
  3. Commit message must be formatted as described here -> https://www.conventionalcommits.org/en/v1.0.0-beta.2/
  4. Push your changes ;)

greetings x credits x kudos

  • kilt.io
  • rmrk.app
  • substrate.io
  • zero.io

Download details:

Author: gamedaoco
Source code: https://github.com/gamedaoco/gamedao-haiku 
License:

#nextjs #reactjs #web3 #dapp #solidity #smartcontract

Building Dapp Frontend for Gamedao Protocol Using Nextjs

Building Minting Dapp for NFT on The Elrond Network

Minting dApp Template

This is a dApp template based on erd-next-starter by Giants & soft-ui-dashboard-tailwind by Creative Tim. The Minting Smart contract used in the live demo is elven-nft-minter-sc by Julian.

It offers authentication with Maiar App, Web Wallet, Extension, and Ledger. It also includes methods to easily sign and make transactions, query smart contracts, and a few utility methods.

This template can be used as a starting point for any minting dApp. It comes with the most common sections like:

  • Header
  • About us
  • NFTs Carousel
  • Roadmap
  • Team
  • FAQ

Getting Started

Clone repository

git clone https://github.com/Elrond-Giants/giants-nftim-minting-dapp.git

Install the dependencies

npm install

Set the .env file

We have included the .env.development and .env.production files, which contain just elrond-specific environment variables.

To interact with a minting smart contract, create your .env file and set the NEXT_PUBLIC_CONTRACT_ADDRESS variable.

Launch and explore

npm run dev

Open your browser, go to http://localhost:3000 and start exploring.

How To's

Sign and send transaction

To make a transaction, simply use the hook useTransction and everything will be taken care for, from signing the transaction to status notifications.

Smart contract call:

import { useTransaction } from "../hooks/useTransaction";
import { TransactionPayload } from "@elrondnetwork/erdjs/out";

const { makeTransaction } = useTransaction();
const txData = TransactionPayload.contractCall()
  .setFunction(new ContractFunction("SomeFunction"))
  .addArg(new BigUIntValue(10))
  .build();

await makeTransaction({
  receiver: "erd...",
  data: txData,
  value: 0.01,
});

Make query

To read data from the Smart Contract, like total number of NFTs, the price per NFT, etc, you can use a query.

export const getTotalTokensLeft = async (): Promise<number> => {
  const { data: data } = await querySc(contractAddress, "getTotalTokensLeft", { outputType: "int" });

  return parseInt(data, 10);
};

Deploy

Checkout the Next.js deployment documentation for details.

Reporting Issues

We use GitHub Issues as the official bug tracker for this template. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the template.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Resources

Useful Links

Download details:

Author: Elrond-Giants
Source code: https://github.com/Elrond-Giants/giants-nftim-minting-dapp 
License: GPL-3.0 license

#nextjs #reactjs #web3 #dapp #solidity #smartcontract

Building Minting Dapp for NFT on The Elrond Network

Building Whitelist D-app for NFT Collection using Next js, Solidity

Whitelist-Dapp

whitelist dapp for Crypto Devs,to give early supporters access to a whitelist for your collection. 
Tech stacks: Next js, Solidity, Hardhat 
Deployed link: https://whitelist-dapp-rho-cyan.vercel.app/

Screenshot (13)

Download details:

Author: adamsyy
Source code: https://github.com/adamsyy/Whitelist-Dapp 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract

Building Whitelist D-app for NFT Collection using Next js, Solidity

Building an Decentralized NFT Marketplace Built with Solidity & Nextjs

Polyplace

An open decentralized NFT Marketplace built with Solidity and Next.js, powered by Polygon Technologies. It basically is an open platform where users can mint and trade their own NFTs.

Table of Contents

  • The Project
  • Developers
  • Resources

The Project

An open platform where users can mint their own NFTs and list them on a Marketplace or buying NFT from others. It includes:

  • A smart contract which represents a collection of NFTs by following the ERC-721 standard.
  • A smart contract which represents the NFT Marketplace and contains all the logic to make offers, execute offers...
  • A Next.js front-end application as a user interface.

Project details

Users can access the application via web-browser, and must have the Metamask wallet installed. The interface, built with Next.js, relies on the ethers.js library to communicate with the smart contracts through Metamask. This means that the data reflected on the front-end application is fetched from the Polygon blockchain. Each action performed by the user (mint an NFT, sell NFT, buy NFT...) creates a transaction on Polygon, which will requires Metamask confirmation and a small fee, and this transaction will permanently modify the state of the NFTMarketplace smart contracts. On top of it, users NFT Metadata will be uploaded to the IPFS, generating a hash which will be permanently recorded on the blockchain to prove ownership.

Features

Users can perform the following actions on the NFT Marketplace:

Mint

Input a name, description and upload a file (image) to mint an NFT. Once minted, a representation of this NFT will be displayed in the marketplace and it will be owned by its creator. This is open for everyone, meaning everyone can participate in this NFT creation through this platform.

Buy NFT

A user can buy NFTs which someone else offered. This will require paying the requested price and a small fee.

Sell NFT

Users can sell their NFT by specifying its price (in MATIC). If someone fulfills this offer, then the NFT and it's ownership is transferred to the new owner.

Connect to Mumbai Testnet

First of all, it is required to install Metamask wallet as a browser extension: https://metamask.io/

Then you should configure Metamask to connect to your local blockchain. To do it manually:

  • Open Metamask.
  • Open the Network Configuration panel.
  • Open Custom RPC.
  • Connect to Mumbai Testnet.

Another way to connect to Mumbai Testnet is by using the following link: https://chainlist.org/ and add the network of your choice by simply connecting your wallet.

Getting test MATIC

You can get up to 2 MATIC/day by pasting your address here: https://mumbaifaucet.com/.

Developers

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

The repository

First, you will need to clone or fork the repository into your Github account:

git clone https://github.com/chrisstef/polyplace.git

Installing

First, you will need to install the dependencies.

Run the following command in your terminal after cloning the main repo:

npm install

Then, you will need to install hardhat globally by running the following command into your terminal:

npm install -g hardhat

Smart Contract

First, you will have to set up a local network by running the following command:

npx hardhat node

Then, you will have to compile the smart contracts by running the following command in your terminal:

npx hardhat compile

Smart Contract Visualization

Below you can view the smart contract functions (and it's interactions).

SCV

Deployment on Local Blockchain

Deploy the contracts on your hardhat local network by running the following command:

npx hardhat run scripts/deploy.js --network hardhat

Paste the deployed address in the constants.js file.

Remove the argument provided in the JsonRpcProvider which is located in the line 111 of the NFTContext.js file.

Finally, run the following command in your terminal to open the User Interface:

npm run dev

An instance of Polyplace will be up and running on your local environment.

Technology stack

  • Solidity
  • Next.js
  • hardhat
  • ethers.js
  • node.js
  • Metamask
  • IPFS
  • Infura
  • Alchemy

Future Ideas

  • Clear deploy on Polygon Mainnet.
  • Auction features.
  • Bulk upload of NFTs as collections.
  • Creator details and more.

Resources

Learn More

The smart contract has been deployed in the following (test) network: Mumbai.

NFTMarketplace Smart Contract Address:

https://mumbai.polygonscan.com/address/0xC9798FF24bEa832c70E66554a35211677D64a627

Demo video:

https://www.youtube.com/watch?v=kVIb7MGJ53k&t=36s

Download details:

Author: chrisstef
Source code: https://github.com/chrisstef/polyplace 
License: MIT license 

#nextjs #reactjs #web3 #dapp #solidity #smartcontract #nft

Building an Decentralized NFT Marketplace Built with Solidity & Nextjs