https://github.com/coffiasd/hackathon-web3-storage
https://github.com/coffiasd/hackathon-web3-storage
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/coffiasd/hackathon-web3-storage
- Owner: coffiasd
- License: mit
- Created: 2022-11-01T02:42:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-07T23:38:43.000Z (over 2 years ago)
- Last Synced: 2024-05-16T04:41:01.167Z (about 1 year ago)
- Language: JavaScript
- Homepage: hackathon-web3-storage.vercel.app
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# StorageWizard: The Best Use Of NFT.Storage Or Web3.Storage project
gitcoin address:
front-page address :
youtube link :
## Project Description
### 1.summary
**Technology stack** and **dependencies** that i used in this project:
- web3.storage platform
- next.js
- react.js
- tailwindcss
- solidity
- hardhat
- ether.js
- openzeppelin(ERC721)
- ploygon test net Mumbai
This is a gitcoin hackathon NFTs project based on web3.storage and other dependencies above.User can mint a NFT which is generate by themself.
### 2.Flowchart
Users can generate a unique svg avatar image by choosing various attributes.After click the attributes buttons you can get the result avatar image real-time because of react hooks.Furthormore, you can upload the image which is generated by yourself to our web3.storage platform.Once the upload process is finished,js sdk return a **CID** which is a **IPFS** address to our browser client.Finnaly we can mint the NFT with the cid and the attributes config json.
> You can view your mint result on OpenSea test net like this:
### 3.smart contract
> smart contract address
Ploygon Mumbai: **0xDe3C417aDc211e0b0a4140BA704a333E3A824dBF**
> smart contract content
> install hardhat tools
```
cd contract
npm install
```
> set hardhat.config.js file
```
module.exports = {
solidity: "0.8.9",
networks: {
mumbai: {
url: process.env.TESTNET_RPC,
accounts: [process.env.PRIVATE_KEY]
},
},
etherscan: {
apiKey: {
polygonMumbai: process.env.POLYGONSCAN_API_KEY
}
}
};
```
> deploy smart contract to mumbai net using hardhat tool
```
npx hardhat --network mumbai run ./script/deploy.js
```
After deploy the smart contract we'll get a contract address which is used in front-end config file.Furthormore we'll generate a ABI json file,move it to front-end utils directory.
### 4.team member and contact
> Team member
- front-end:@coffiasd
- back-end:@coffiasd
- ui/ux:@coffiasd
> Contact
- mail:
- twitter: @coffiasse
- github: @coffiasd
## How to use web3.storage and example code
### store svg to web3.storage
> init a new client instance with env config token
```
/// get web3.storage config token
function getAccessToken() {
return process.env.NEXT_PUBLIC_WEB3_STORAGE_TOKEN
}
/// get a new web3.storage client
function makeStorageClient() {
return new Web3Storage({ token: getAccessToken() })
}
```
> store user image
```
/// store your pic
async function storeWithProgress() {
// set btn state
setIsLoading("loading");
setUpLoadBtn("uploading");
//get image info
const scale = 2;
const node = document.getElementById("myAvatar");
const blob = await domtoimage.toBlob(node, {
height: node.offsetHeight * scale,
style: {
transform: `scale(${scale}) translate(${node.offsetWidth / 2 / scale}px, ${node.offsetHeight / 2 / scale}px)`,
"border-radius": 0
},
width: node.offsetWidth * scale
});
//set loading timeout
setTimeout(() => {
setIsLoading("");
}, 7000);
//add file
const files = [
new File([blob], 'avatar.png'),
]
// when each chunk is stored, update the percentage complete and display
const totalSize = files.map(f => f.size).reduce((a, b) => a + b, 0)
let uploaded = 0
const onStoredChunk = size => {
uploaded += size
const pct = 100 * (uploaded / totalSize)
console.log(`Uploading... ${pct.toFixed(2)}% complete`)
//change btn state
setIsLoading("");
setReadyMint(true);
alertService.info("upload success", options);
}
// show the root cid as soon as it's ready
const onRootCidReady = (cid) => {
setCid(cid);
console.log('uploading files with cid:', cid)
}
// makeStorageClient returns an authorized web3.storage client instance
const client = makeStorageClient()
// client.put will invoke our callbacks during the upload
// and return the root cid when the upload completes
return client.put(files, { onRootCidReady, onStoredChunk })
}
```
> get file status by **cid**
```
/// check status
async function checkStatus() {
setStatusIsLoading("loading");
const client = makeStorageClient()
const status = await client.status(cid)
console.log(status);
if (status) {
alertService.info("Status:" + status.pins[0].status + ",PeerId:" + status.pins[0].peerId, options);
} else {
alertService.info("not ready", options);
}
setStatusIsLoading("");
}
```
## Show case