Skip to content

deyzir/dapp

Repository files navigation

CREATE A DAPP WEBSİTE

before start;

There is no react packages inside this repo
#How is it looking code

images

Before we start what we will use source
1 - REACT
2 - HARDHAT
3 - İNFURA
4 - ETHERSCAN
5 - NODE
6 - CHAKRA UI
7 - ALCHEMY
8 - PİNATA
9 - HASHLİPS CONTRACTS
Let We Start ;)

- npx create-react-app x
- Enter to inside x file (dont paste this code to terminal)
- npm i -D dotenv
- npm i -D @nomiclabs/hardhat-etherscan
- npm i -D hardhat
- npx hardhat
- reate basic simple project
- npm i @openzeppelin/contracts

- get to chakra uı webiste and go to installation - then copy (npm i ....)
# We will delete some file in x folder example; satup-test.js,app.test.js vb
Of course you have to clear ın ındex.js into reportWebtials and course we should delete something in app.js
Find contracts folder then create new file in contracts name 'y.sol' paste your solidity code into y.sol
Enter to scripts folder and create new file name is 'deploying.js' then put your code into deploying.js
We will get fake ether like goerli testnet we can buy from https://goerlifaucet.com/
And of course should from metamask settings show testnets
Go to infura and create new project. choose goerli testnet
Come back to vscode add .env file
Enter etherscan key on .env file
Enter private keys on .env file
Enter hardhat.config.js and put your code inside to hardhat.config.js

Right now we can compile this code

npx hardhat compile
npx hardhat run scripts/deploying.js --network georli 

We can go to goerliethercan and we can see contract address
But there is a little problem this contract dont verify we will verify this contract
npx hardhat verify -- network goerli -enter the contract adress here-

Very good everything is working right now ;)

How we can connect to website this contract

Actually its very clear we can look 'mainMint.js file'
We used to web3 for connection to website or we can use ether.js its your choice

    async function handleMint() {
        if(window.ethereum) {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contract = new ethers.Contract(
                minessAdress,
                mines.abi,
                signer 
            );

This code allow us to connect but we see mines.abi First of all we have to add mines.abi file to src folder.

Screenshot 2022-12-13 at 08 34 04

This image we can see it but the name is different to src because ı changed it
Screenshot 2022-12-13 at 08 35 00

This file name is Miness.json
I just did copy past from artifact/contracts/....json. to src/Miness.json
Everything is looking good

How to create nft image

First of all we should go to hashlips github contract -

https://github.com/HashLips/hashlips_art_engine

We can see how to use this repo

İf you create nft images and json's we can go to ıpfs website , pinata.


##Very good almost done
### This side little important for your nft upload to testnet.opensea

Screenshot 2022-12-13 at 08 56 23

This photo we are seeing BaseUrl we have to add from ipfs metadata so json file to baseUrl

Of course we have to allow some function for make a mint

Screenshot 2022-12-13 at 08 59 12

like this
so how we can control this token 'NFT'

if you want you can go to ethercan and connect your wallet then you can mint here

Screenshot 2022-12-13 at 09 04 28


OR
you can mint website

WELL DONE EVERYTHİNG İS DONE ;)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published