Skip to content

Commit e814900

Browse files
julienbrgjulienbrg
authored
Merge pull request #18 from julienbrg/dev
Release v1
2 parents d5e0f8e + 174fa17 commit e814900

File tree

5 files changed

+89
-83
lines changed

5 files changed

+89
-83
lines changed

‎packages/react-app/src/App.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import React, { useEffect, useState } from "react";
44
import { Body, Container, Header } from "./components";
55
// import GET_TRANSFERS from "./graphql/subgraph";
66
import { Mint } from './components/mint'
7-
import { Alerts } from './components/alerts'
8-
9-
import { Network } from './components/network'
107
import { Button } from '@chakra-ui/react'
118

129
function WalletButton() {
@@ -43,7 +40,7 @@ function WalletButton() {
4340
}}
4441
colorScheme='purple'
4542
margin= '4'
46-
size='xs'
43+
size='sm'
4744
variant='outline'
4845
>
4946
{rendered === "" && "Connect Wallet"}
@@ -71,8 +68,6 @@ function App() {
7168
return (
7269
<Container>
7370
<Header>
74-
<Alerts />
75-
<Network />
7671
<WalletButton />
7772
</Header>
7873
<Body>

‎packages/react-app/src/components/alerts.tsx

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/react-app/src/components/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Body = styled.div`
77
flex-direction: column;
88
font-size: calc(10px + 2vmin);
99
justify-content: center;
10-
margin-top: 40px;
10+
margin-top: 100px;
1111
`;
1212

1313
export const Button = styled.button`
@@ -58,3 +58,4 @@ export const Link = styled.a.attrs({
5858
margin-top: 8px;
5959
font-size: calc(2px + 2vmin);
6060
`;
61+

‎packages/react-app/src/components/mint.tsx

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,98 @@
11
import { Link, Loader, Image } from "./";
2-
import React from 'react'
3-
import { utils } from 'ethers'
2+
import { formatEther } from '@ethersproject/units'
3+
import React, { useEffect } from 'react'
4+
import { utils, BigNumber } from 'ethers'
45
import { Contract } from '@ethersproject/contracts'
5-
import { useContractFunction, useEthers, useCall} from '@usedapp/core'
6+
import { useContractFunction, useEthers, useCall, useEtherBalance} from '@usedapp/core'
67
import { Erc721 } from '../../gen/types'
78
import { addresses, abis } from "@my-app/contracts";
89
import { Web3Storage } from 'web3.storage/dist/bundle.esm.min.js';
910
import loader from "../assets/reggae-loader.svg";
1011
import myImage from "../assets/lode-runner.png";
11-
import { Button } from '@chakra-ui/react'
1212
import { FaEthereum } from 'react-icons/fa';
13-
13+
import {Button, useToast } from '@chakra-ui/react'
1414

1515
const nftInterface = new utils.Interface(abis.erc721)
1616
const nftContract = new Contract(addresses.erc721, nftInterface) as Erc721
1717

1818
export const Mint = () => {
1919

20+
// const ens = useLookupAddress();
2021
const { account, chainId } = useEthers();
22+
const toast = useToast()
23+
const userBalance = useEtherBalance(account, { chainId })
2124

2225
const { state, send } = useContractFunction(nftContract, 'safeMint')
2326
const onTx = async () => {
2427

25-
console.log("nft contract address ✅ : ", nftContract.address)
28+
if (account === null || account === undefined) {
29+
30+
toast({
31+
position: "bottom-left",
32+
title: "Disconnected 😿",
33+
description: "It seems like you're not connected. Please click on the Connect Wallet' button.",
34+
status: "warning",
35+
duration: 5000,
36+
isClosable: true,
37+
})
38+
39+
return (
40+
<></>
41+
)
42+
}
2643

2744
if (chainId !== 4) {
2845

46+
toast({
47+
position: "bottom-left",
48+
title: "Wrong network 🌈",
49+
description: "Please switch your network to Rinkeby ",
50+
status: "warning",
51+
duration: 2000,
52+
isClosable: true,
53+
})
54+
2955
return (
30-
<></> // prevents user to click
56+
<></>
3157
)
58+
}
3259

33-
}
60+
const formatter = new Intl.NumberFormat('en-us', {
61+
minimumFractionDigits: 4,
62+
maximumFractionDigits: 4,
63+
})
64+
65+
const formatBalance = (balance: BigNumber | undefined) =>
66+
formatter.format(parseFloat(formatEther(balance ?? BigNumber.from('0'))))
67+
68+
if (formatBalance(userBalance) as any < 0.001) {
69+
70+
toast({
71+
position: "bottom-left",
72+
title: "Insufficient funds 💰",
73+
description: "You need a handful of Rinkeby ETH to mint your NFT.",
74+
status: "error",
75+
duration: 3000,
76+
isClosable: true,
77+
})
78+
79+
return (
80+
<></>
81+
)
82+
}
3483

3584
function getAccessToken() {
36-
console.log("getAccessToken ✅")
85+
console.log("✅ getAccessToken")
3786
return process.env.REACT_APP_WEB3STORAGE_TOKEN;
3887
}
3988

4089
function makeStorageClient() {
41-
console.log("makeStorageClient ✅ ");
90+
console.log("✅ makeStorageClient");
4291
return new Web3Storage({ token: getAccessToken() });
4392
}
4493

4594
function makeFileObjects() {
46-
console.log("makeFileObjects ✅ ");
95+
console.log("✅ makeFileObjects");
4796
const obj = {
4897
"name": "Lode Runner #1",
4998
"author": "Julien",
@@ -81,18 +130,19 @@ export const Mint = () => {
81130
}
82131

83132
async function storeFiles(files) {
84-
console.log("storeFiles ✅ ");
133+
console.log("✅ storeFiles");
85134
const client = makeStorageClient();
86135
const cid = await client.put(files);
87-
console.log('stored files with CID ✅: ', cid, "🎉");
136+
console.log('✅ stored files with CID: ', cid, "🎉");
88137
return cid;
89138
}
90139

91-
console.log("Hello! 👋 ");
140+
console.log("👋 Hello! ");
92141
makeStorageClient();
93142
const uri = await storeFiles(makeFileObjects()) + "/lode-runner.json";
94-
console.log("uri: ", uri );
143+
console.log("✅ uri: ", uri );
95144

145+
console.log("✅ nft contract address: ", nftContract.address)
96146

97147
await send(
98148
// TODO: check the type of an address
@@ -101,17 +151,32 @@ export const Mint = () => {
101151
)
102152
}
103153

154+
useEffect(() => {
155+
if (state.transaction?.hash) {
156+
if (state.status === "Success") {
157+
console.log("✅ tx hash: ", state.transaction?.hash)
158+
toast({
159+
position: "top-left",
160+
title: "Success 🎉",
161+
description: "You just minted an NFT! Here's your tx hash my friend: " + state.transaction?.hash + ". Thank you for using Mojito app.",
162+
status: "success",
163+
duration: 8000,
164+
isClosable: true,
165+
})
166+
}
167+
}
168+
}, [state.transaction?.hash, toast, state.status]);
169+
104170
const txHash = state.transaction?.hash
105171
const etherscanUrl = "https://rinkeby.etherscan.io/tx/" + txHash
106172

107-
// TODO: read-only https://usedapp-docs.netlify.app/docs/Guides/Connecting/Read-only
108173
const { value: bal } =
109174
useCall({
110175
contract: new Contract(addresses.erc721, abis.erc721),
111176
method: "balanceOf",
112-
args: (account === null || account === undefined) ? ["0xbFBaa5a59e3b6c06afF9c975092B8705f804Fa1c"] : [account],
177+
args: (account === null || account === undefined) ? ["0x157555B75fE690351b9199384e3C473cCFb6EFab"] : [account],
113178
}) ?? {};
114-
179+
115180
const { value: supply } =
116181
useCall({
117182
contract: new Contract(addresses.erc721, abis.erc721),
@@ -121,10 +186,6 @@ export const Mint = () => {
121186

122187
const id = Number(supply) - 1
123188
const openseaUrl = "https://testnets.opensea.io/assets/0x61681514ea040d19dc4279301adc10bf654d886a/"+ id
124-
125-
// TODO: handle sig denied by user
126-
// TODO: handle insufficient funds error
127-
// TODO: invite to switch network if not on Rinkeby
128189

129190
return (
130191

@@ -133,7 +194,9 @@ export const Mint = () => {
133194

134195
<Image src={myImage} />
135196

136-
{bal && <p>You own <strong>{bal.toString()}</strong> of these.</p>}
197+
{/* {!!!account || ens ? <p>Please connect your wallet.</p> : <p></p>} */}
198+
{bal === null || bal === undefined ? <p></p> : <p>You own <strong>{bal.toString()}</strong> of these.</p> }
199+
137200
{state.status === "Mining" || state.status === "PendingSignature" ?
138201
<Loader src={loader}/> :
139202

@@ -150,9 +213,6 @@ export const Mint = () => {
150213
{state.status === "Success" && <><Link href={openseaUrl}>{openseaUrl}</Link>
151214
<Link href={etherscanUrl}>{etherscanUrl} </Link></>}
152215

153-
154-
{/* <Link href={openseaUrl}>{openseaUrl}</Link>
155-
<Link href={etherscanUrl}>{etherscanUrl} </Link></> */}
156216
</>
157217
)
158218
}

‎packages/react-app/src/components/network.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)