Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/net2devcrypto/erc-6551-nft-wallets-web3-front-end-nextjs
A NextJS Web3 app that allows users to create and interact ERC-6551 tokenbound accounts (NFT Wallet). Send and Store ERC-20 tokens in NFT. Withdraw tokens and more!
https://github.com/net2devcrypto/erc-6551-nft-wallets-web3-front-end-nextjs
avalanche binance erc-1155 erc-20 erc-6551 erc-721 ethereum ethers nextjs nft polygon viem
Last synced: 24 days ago
JSON representation
A NextJS Web3 app that allows users to create and interact ERC-6551 tokenbound accounts (NFT Wallet). Send and Store ERC-20 tokens in NFT. Withdraw tokens and more!
- Host: GitHub
- URL: https://github.com/net2devcrypto/erc-6551-nft-wallets-web3-front-end-nextjs
- Owner: net2devcrypto
- Created: 2024-01-29T00:07:35.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-16T20:39:25.000Z (10 months ago)
- Last Synced: 2024-02-17T18:37:31.540Z (10 months ago)
- Topics: avalanche, binance, erc-1155, erc-20, erc-6551, erc-721, ethereum, ethers, nextjs, nft, polygon, viem
- Language: SCSS
- Homepage:
- Size: 591 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ERC-6551-NFT-Wallet-Web3-Front-End-NextJS
A NextJS Web3 app that allows users to create and interact ERC-6551 tokenbound accounts (NFT Wallet). Send and Store ERC-20 tokens in NFT. Withdraw tokens and more!
** THE FILES ATTACHED TO THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY **
** NOT FINANCIAL ADVISE **
** USE IT AT YOUR OWN RISK** **I'M NOT RESPONSIBLE FOR ANY USE, ISSUES ETC.. **
ENTIRE PLAYLIST:
Part 2 Repo
Click for video:
Part2 "Contracts" Folder Contents:
```shell
N2D-ERC6551-Account.sol
N2D-ERC6551-Registry.sol
N2D-Sample-Fake-USDT.sol
N2D-Sample-NFT-Collection.sol
```
Follow the tutorial video for guidance in using the contract files.
Part 3 Repo FINAL
Click for video:
# How to install and test the front-end app.
Step 1
Download the folder "ERC-6551-Frontend", then via terminal or shell navigate to the folder and install dependencies, make sure to enable legacy peer dependencies:
```shell
cd ERC-6551-Frontend
npm i --legacy-peer-deps
```
Step 2 (OPTIONAL)
If you don't have existing contracts deployed, you may deploy the contract files located inside the repo folder "Contracts". Make sure to update your NFT Collection metadata BaseURI to point to the IPFS CID. Follow the tutorial video for more info. If you deployed a new NFT Collection contract to test, Make sure you mint some NFT's to validate the ERC-6551 Wallet creation.
```shell
N2D-Sample-NFT-Collection.sol
N2D-ERC6551-Account.sol
N2D-ERC6551-Registry.sol
N2D-Sample-Fake-USDT.sol
```
Step 3
Open the project folder on your favorite editor and update the "components/config.js" file with all your deployed smart contract addresses:
```shell
const nftContractAddr = 'NFT_COLLECTION_CONTRACT_ADDRESS';
const erc6551RegistryAddr = 'ERC_6551_REGISTRY_CONTRACT_ADDRESS';
const erc6551BaseAccount = 'ERC_6551_ACCOUNT_CONTRACT_ADDRESS';
const usdtContractAddr = 'FAKE_USDT_TOKEN_CONTRACT_ADDRESS';
```
"CTRL + S" to save!
Step 4
Read the "readme-first" located inside the "ERC-6551-Frontend" folder then run the application and test! Follow the tutorial vid for more info.
```shell
cd ERC-6551-Frontend
npm run dev
```