UI changes, copy changes

Apillon · Sep 5, 2023 · db891e9 · db891e9
1 parent 06c3856
commit db891e9
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 30 deletions.
diff --git a/.env b/.env
@@ -1,5 +1,5 @@
 # Paste the address of the NFT collection.
-REACT_APP_NFT_ADDRESS=
+REACT_APP_CONTRACT_ADDRESS=
 
 # Uncomment the chain you are using:
 # Moonbase 

diff --git a/README.md b/README.md
@@ -29,12 +29,12 @@ To configure the template, do the following:
 Example:
 
 ```sh
-const nftAddress = ""; // Paste the address of the NFT collection between the parenthesis
+REACT_APP_CONTRACT_ADDRESS = ""; // Paste the address of the NFT collection between the parenthesis
 
 // uncomment the chain you are using by deleting the slashes
-// const chainId = "0x507"; // Moonbase
-// const chainId = "0x504"; // Moonbeam
-// const chainId = "0x250"; // Astar
+// REACT_APP_CHAIN_ID = "0x507"; // Moonbase
+// REACT_APP_CHAIN_ID = "0x504"; // Moonbeam
+// REACT_APP_CHAIN_ID = "0x250"; // Astar
 ```
 
 Once you have updated the .env. file, save it. Now the website files are ready to be deployed.

diff --git a/src/components/CollectionInfo.jsx b/src/components/CollectionInfo.jsx
@@ -1,8 +1,8 @@
-import { ethers } from 'ethers'
+import { constants, ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import Mint from './Mint'
 
-export default function Collection ({ collection, provider, address, isCollectionNestable }) {
+export default function Collection ({ collection, provider, address }) {
   const [totalSupply] = useState(collection.totalSupply)
   const [maxSupply] = useState(collection.maxSupply)
   const [dropStartDate, setDropStartDate] = useState(new Date())
@@ -92,13 +92,24 @@ export default function Collection ({ collection, provider, address, isCollectio
         <b> Symbol: </b>
         {collection.symbol}
       </div>
+      <div>
+        <b> Revocable: </b>
+        {collection.revokable ? 'TRUE' : 'FALSE'}
+      </div>
       <div>
         <b> Soulbound: </b>
         {collection.soulbound ? 'TRUE' : 'FALSE'}
       </div>
       <div>
         <b> Supply: </b>
-        {totalSupply.toString()}/{maxSupply.toString()}
+        {(() => {
+          if (maxSupply.toString() === constants.MaxUint256.toString()) {
+            return (<div>{totalSupply.toString()} / &infin;</div>)
+          } else {
+            return (<div>{totalSupply.toString()} / {maxSupply.toString()}</div>)
+          }
+        })()}
+
       </div>
       {/* Is drop */}
       {collection.drop && (

diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -211,7 +211,7 @@ export default function Main () {
       } catch (e) {
         console.error(e)
 
-        toast('Apologies, we were unable to load NFT: ' + (i + 1), {
+        toast('Apologies, we were unable to load NFTs metadata.', {
           type: 'error'
         })
       }
@@ -233,7 +233,6 @@ export default function Main () {
             collection={collectionInfo}
             provider={provider}
             address={address}
-            isCollectionNestable={collectionNestable}
           />
         )}
 

diff --git a/src/components/Mint.jsx b/src/components/Mint.jsx
@@ -12,7 +12,7 @@ export default function Mint ({ price, provider, address }) {
 
   async function mint () {
     setLoading(true)
-    const NFT_ADDRESS = process.env.REACT_APP_NFT_ADDRESS
+    const NFT_ADDRESS = process.env.REACT_APP_CONTRACT_ADDRESS
 
     if (!checkInputAmount(amount)) {
       console.log('Wrong amount number')

diff --git a/src/components/MintNestable.jsx b/src/components/MintNestable.jsx
@@ -15,14 +15,14 @@ export default function MintNestable ({ price, provider, address }) {
   async function mintWrapper () {
     setLoadingMint(true)
 
-    mint(process.env.REACT_APP_NFT_ADDRESS)
+    mint(process.env.REACT_APP_CONTRACT_ADDRESS)
 
     setLoadingMint(false)
   }
 
   async function childMintWrapper () {
     setLoadingMintNestable(true)
-    const contractAddress = inputAddress || process.env.REACT_APP_NFT_ADDRESS
+    const contractAddress = inputAddress || process.env.REACT_APP_CONTRACT_ADDRESS
 
     mint(contractAddress)
 
@@ -70,7 +70,7 @@ export default function MintNestable ({ price, provider, address }) {
       </div>
       <br />
       <div className="field">
-        <label htmlFor="address">Contract Address:</label>
+        <label htmlFor="address">Child Contract Address:</label>
         <input id="address" value={inputAddress} type="text" onChange={handleChange} />
       </div>
       <button disabled={loadingNestMint} onClick={childMintWrapper}>

diff --git a/src/components/NftCard.jsx b/src/components/NftCard.jsx
@@ -25,11 +25,11 @@ export default function NftCard ({ id, nft, isCollectionNestable, myNFTs }) {
       <div className={styles.nft_content}>
         <h3>#{id} {nft.name}</h3>
         <p>{nft.description}</p>
-      {isCollectionNestable && isMyNFT && (
-                <button onClick={() => openModalNft()}>
-                  Open NFT
-                </button>
-      )}
+        {isCollectionNestable && isMyNFT && (
+          <button onClick={() => openModalNft()}>
+            Open NFT
+          </button>
+        )}
       </div>
       <Modal
         className='modal'

diff --git a/src/components/NftNestable.jsx b/src/components/NftNestable.jsx
@@ -15,8 +15,8 @@ const NftNestable = ({ nftId, nftName, nftDescription, nftImage }) => {
   const [loadingNestMint, setLoadingNestMint] = useState(false)
   const [loadingTransferFrom, setLoadingTransferFrom] = useState(false)
 
-  const [addressNestMint, setAddressNestMint] = useState(process.env.REACT_APP_NFT_ADDRESS)
-  const [addressTransferFrom, setAddressTransferFrom] = useState(process.env.REACT_APP_NFT_ADDRESS)
+  const [addressNestMint, setAddressNestMint] = useState(process.env.REACT_APP_CONTRACT_ADDRESS)
+  const [addressTransferFrom, setAddressTransferFrom] = useState(process.env.REACT_APP_CONTRACT_ADDRESS)
   const [tokenTransferFrom, setTokenTransferFrom] = useState(0)
 
   const [pendingChild, setPendingChild] = useState({})
@@ -149,7 +149,7 @@ const NftNestable = ({ nftId, nftName, nftDescription, nftImage }) => {
       try {
         const provider = getProvider()
         const walletAddress = await provider.getSigner().getAddress()
-        const toAddress = process.env.REACT_APP_NFT_ADDRESS
+        const toAddress = process.env.REACT_APP_CONTRACT_ADDRESS
 
         await childNftContract
           .connect(provider.getSigner())
@@ -231,12 +231,12 @@ const NftNestable = ({ nftId, nftName, nftDescription, nftImage }) => {
               <div className="btn-group">
                 <div className="field">
                   <label htmlFor={`addressNestMint_${nftId}`}>
-                    <span>Contract Address</span>
+                    <span>Child Contract Address</span>
                     <a id={`infoNestMint_${nftId}`}>
                       <img src="images/info.svg" width={16} height={16} />
                     </a>
                     <Tooltip anchorSelect={`#infoNestMint_${nftId}`}type='warning' effect='solid'>
-                      <span>Enter collection address from where you want to mint NFT and transfer it to this NFT. Initial address is from this collection.</span>
+                      <span>Enter child collection address from where you want to mint NFT and transfer it to this NFT. Initial address is from this collection.</span>
                     </Tooltip>
                   </label>
                   <input
@@ -247,18 +247,18 @@ const NftNestable = ({ nftId, nftName, nftDescription, nftImage }) => {
                   />
                 </div>
                 <button disabled={loadingNestMint} onClick={childNestMint}>
-                  {loadingNestMint ? <Spinner /> : 'Mint Child'}
+                  {loadingNestMint ? <Spinner /> : `Nest Mint Child under ${nftName}` }
                 </button>
               </div>
               <div className="btn-group">
                 <div className="field">
                   <label htmlFor={`addressTransferFrom_${nftId}`}>
-                    <span>Contract Address</span>
+                    <span>Child Contract Address</span>
                     <a id={`infoTransferFrom_${nftId}`}>
                       <img src="images/info.svg" width={16} height={16} />
                     </a>
                     <Tooltip anchorSelect={`#infoTransferFrom_${nftId}`}type='warning' effect='solid'>
-                      <span>Enter collection address from where you want to transfer NFT. Initial address is from this collection.</span>
+                      <span>Enter child collection address from where you want to transfer NFT. Initial address is from this collection.</span>
                     </Tooltip>
                   </label>
                   <input
@@ -287,7 +287,7 @@ const NftNestable = ({ nftId, nftName, nftDescription, nftImage }) => {
                   />
                 </div>
                 <button disabled={loadingTransferFrom} onClick={nestTransferFrom}>
-                  {loadingTransferFrom ? <Spinner /> : 'Nest Transfer From'}
+                  {loadingTransferFrom ? <Spinner /> : `Nest NFT under ${nftName}`}
                 </button>
               </div>
             </div>

diff --git a/src/components/NftNestedChild.jsx b/src/components/NftNestedChild.jsx
@@ -30,7 +30,7 @@ const NftNestedChild = ({ parentId, tokenId, contractAddress }) => {
       } catch (error) {
         console.error(error)
 
-        toast('Apologies, we were unable to load NFT: ' + (tokenId), {
+        toast('Apologies, we were unable to load NFTs metadata.', {
           type: 'error'
         })
       }

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -136,7 +136,7 @@ export const getProvider = () => {
 }
 
 export const getContract = (contractAddress) => {
-  const NFT_ADDRESS = process.env.REACT_APP_NFT_ADDRESS
+  const NFT_ADDRESS = process.env.REACT_APP_CONTRACT_ADDRESS
   return new ethers.Contract(contractAddress || NFT_ADDRESS, nftAbi, getProvider())
 }