NFT template React (UX/UI improvement)

Author: urko94

package-lock.json

@@ -23,6 +23,7 @@
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
+    "@types/react-modal": "^3.16.3",
     "@vitejs/plugin-react": "^4.1.0",
     "@wagmi/cli": "^2.1.0",
     "autoprefixer": "^10.4.17",

package.json

@@ -5,7 +5,7 @@ const Btn = ({
   loading,
   onClick,
   children,
-  disabled = false,
+  disabled,
   ...attrs
 }: {
   [x: string]: any
@@ -24,7 +24,7 @@ const Btn = ({
   }
 
   return (
-    <button {...attrs} className="relative" onClick={(e) => handleClick(e)}>
+    <button {...attrs} className={disabled ? 'relative disabled' : 'relative'} onClick={(e) => handleClick(e)}>
       {loading && <Spinner />}
       <span className={loading ? 'opacity-0' : ''}>{children}</span>
     </button>

src/components/Btn.tsx

@@ -2,15 +2,15 @@ import { constants, ethers } from 'ethers'
 import { useEffect, useState } from 'react'
 import Mint from './Mint'
 import { CHAIN_ID } from '../lib/config'
-import useWeb3Provider from '../hooks/useWeb3Provider'
+import { useWeb3Context } from '../context/Web3Context'
 import MintNestable from './MintNestable'
 
 interface CollectionInfoProps {
   nftId: number
 }
 
 export default function CollectionInfo({ nftId }: CollectionInfoProps) {
-  const { state } = useWeb3Provider()
+  const { state } = useWeb3Context()
 
   const [totalSupply, setTotalSupply] = useState(0)
   const [maxSupply, setMaySupply] = useState(0)
@@ -67,11 +67,11 @@ export default function CollectionInfo({ nftId }: CollectionInfoProps) {
   function collectionLink() {
     switch (CHAIN_ID) {
       case '0x504':
-        return `https://moonbeam.moonscan.io/address/${state.collectionInfo.address}`
+        return `https://moonbeam.moonscan.io/address/${state.collectionInfo?.address}`
       case '0x507':
-        return `https://moonbase.moonscan.io/address/${state.collectionInfo.address}`
+        return `https://moonbase.moonscan.io/address/${state.collectionInfo?.address}`
       case '0x250':
-        return `https://astar.subscan.io/address/${state.collectionInfo.address}`
+        return `https://astar.subscan.io/address/${state.collectionInfo?.address}`
       default:
         console.warn('Missing chainId')
         return 'https://moonbeam.moonscan.io'

src/components/CollectionInfo.tsx

@@ -1,14 +1,6 @@
-import React from 'react'
-
-export default function IconWallet () {
+export default function IconWallet() {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="25"
-      viewBox="0 0 24 25"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
       <path
         d="M4 3C2.89 3 2 3.9 2 5V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H18C18.5304 21 19.0391 20.7893 19.4142 20.4142C19.7893 20.0391 20 19.5304 20 19V16.72C20.59 16.37 21 15.74 21 15V9C21 8.26 20.59 7.63 20 7.28V5C20 4.46957 19.7893 3.96086 19.4142 3.58579C19.0391 3.21071 18.5304 3 18 3H4ZM4 5H18V7H12C11.4696 7 10.9609 7.21071 10.5858 7.58579C10.2107 7.96086 10 8.46957 10 9V15C10 15.5304 10.2107 16.0391 10.5858 16.4142C10.9609 16.7893 11.4696 17 12 17H18V19H4V5ZM12 9H19V15H12V9ZM15 10.5C14.6022 10.5 14.2206 10.658 13.9393 10.9393C13.658 11.2206 13.5 11.6022 13.5 12C13.5 12.3978 13.658 12.7794 13.9393 13.0607C14.2206 13.342 14.6022 13.5 15 13.5C15.3978 13.5 15.7794 13.342 16.0607 13.0607C16.342 12.7794 16.5 12.3978 16.5 12C16.5 11.6022 16.342 11.2206 16.0607 10.9393C15.7794 10.658 15.3978 10.5 15 10.5Z"
         fill="currentColor"

src/components/IconWallet.tsx

@@ -1,9 +1,12 @@
-import useWeb3Provider from '../hooks/useWeb3Provider'
+import { useEffect } from 'react'
+import { ethers } from 'ethers'
+import { toast } from 'react-toastify'
+
+import { useWeb3Context } from '../context/Web3Context'
 import Btn from './Btn'
 import NftGallery from './Nft/NftGallery'
 import CollectionInfo from './CollectionInfo'
 import WalletConnect from './WalletConnect'
-import { toast } from 'react-toastify'
 import {
   addChain,
   changeChain,
@@ -13,11 +16,9 @@ import {
   metamaskNotSupportedMessage
 } from '../lib/utils'
 import { CHAIN_ID, CONTRACT_ADDRESS } from '../lib/config'
-import { ethers } from 'ethers'
-import { useEffect } from 'react'
 
 export default function Main() {
-  const { state, setState, filterNfts, initContract, getCollectionInfo, getMyNftIDs, getNfts } = useWeb3Provider()
+  const { state, setState, filterNfts, initContract, getCollectionInfo, getMyNftIDs, getNfts } = useWeb3Context()
 
   const connectWallet = async () => {
     if (state.isAuthenticated) return
@@ -143,7 +144,7 @@ export default function Main() {
       )}
 
       {/* Collection loaded */}
-      {state.collectionInfo && (
+      {state.collectionInfo?.address && (
         <div>
           {(() => {
             if (Number(state.collectionInfo.totalSupply) === 0) {

src/components/Main.tsx

@@ -4,11 +4,11 @@ import Spinner from './Spinner'
 import { transactionError } from '../lib/utils/errors'
 import { checkInputAmount, getContract } from '../lib/utils'
 import { toast } from 'react-toastify'
-import useWeb3Provider from '../hooks/useWeb3Provider'
+import { useWeb3Context } from '../context/Web3Context'
 import { CONTRACT_ADDRESS } from '../lib/config'
 
 export default function Mint() {
-  const { state, refreshNfts } = useWeb3Provider()
+  const { state, refreshNfts } = useWeb3Context()
 
   const [loading, setLoading] = useState(false)
   const [amount, setAmount] = useState(1)
@@ -40,6 +40,7 @@ export default function Mint() {
       toast('Token minting has started', { type: 'success' })
 
       await tx.wait()
+
       await refreshNfts(nftContract)
     } catch (e) {
       transactionError('Unsuccessful mint', e)

src/components/Mint.tsx

@@ -2,7 +2,7 @@ import { BigNumber } from 'ethers'
 import { BaseSyntheticEvent, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import useWeb3Provider from '../hooks/useWeb3Provider'
+import { useWeb3Context } from '../context/Web3Context'
 import { CONTRACT_ADDRESS } from '../lib/config'
 import { transactionError } from '../lib/utils/errors'
 import { checkInputAddress, getContract, isCollectionNestable } from '../lib/utils'
@@ -13,7 +13,7 @@ interface MintNestableProps {
 }
 
 export default function MintNestable({ nftId }: MintNestableProps) {
-  const { state, getSigner, refreshNfts } = useWeb3Provider()
+  const { state, getPendingChildren, getSigner, refreshNfts } = useWeb3Context()
 
   const [loading, setLoading] = useState(false)
   const [address, setAddress] = useState('')
@@ -49,6 +49,8 @@ export default function MintNestable({ nftId }: MintNestableProps) {
         toast('Token minting has started', { type: 'success' })
 
         await tx.wait()
+
+        getPendingChildren(nftId)
         await refreshNfts(nftContract)
       } catch (e) {
         transactionError('Unsuccessful mint', e)
@@ -84,6 +86,8 @@ export default function MintNestable({ nftId }: MintNestableProps) {
         toast('Token minting has started', { type: 'success' })
 
         await tx.wait()
+
+        getPendingChildren(nftId)
         await refreshNfts(childNftContract)
       } catch (e) {
         console.log(e)

src/components/MintNestable.tsx

@@ -1,18 +1,19 @@
 import { useMemo, useState } from 'react'
-import Modal from 'react-modal'
 
-import useWeb3Provider from '../../hooks/useWeb3Provider'
+import { useWeb3Context } from '../../context/Web3Context'
 import ScrollLock from '../../lib/utils/scroll-lock'
 import Header from '../Header'
 import NftNestable from './NftNestable'
 
+// @ts-ignore
+import Modal from 'react-modal'
 interface NftProps {
   nft: Nft
   open?: Boolean
 }
 
 export default function NftCard({ nft, open }: NftProps) {
-  const { state } = useWeb3Provider()
+  const { state } = useWeb3Context()
   const [isModalOpen, setIsOpen] = useState(false)
 
   const isMyNFT = useMemo(() => {

src/components/Nft/NftCard.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo } from 'react'
-import useWeb3Provider from '../../hooks/useWeb3Provider'
+import { useWeb3Context } from '../../context/Web3Context'
 import NftCard from './NftCard'
 import Spinner from '../Spinner'
 
 export default function NftGallery() {
-  const { state, setState } = useWeb3Provider()
+  const { state, setState } = useWeb3Context()
 
   const nfts = useMemo(() => {
     return state.filterByWallet ? state.nfts.filter((item) => state.myNftIDs.includes(item.id)) : state.nfts