Work for upgradable contract

public/index.html

@@ -4,9 +4,12 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <script>
-      window.CONTRACT_ADDRESS = "0xa343cE3e4D217559c9f3fc1f19Aa053a6adD92f0"
-      window.NETWORK_ID = 1
-      window.STYLES = {
+      CONTRACT_ADDRESS = "0x28c9863edA501DF708b85C147Fc2961032FD1873"
+      IMPLEMENTATION_ADDRESS = "0x7ABC1197454970c91E92A7F57e19B8375E2a67cd"
+      NETWORK_ID = 4
+      IS_TESTNET = 1
+      CONTRACT_ABI = [{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"approved","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"operator","type":"address"},{"indexed":false,"internalType":"bool","name":"approved","type":"bool"}],"name":"ApprovalForAll","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"approve","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"baseExtension","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"contractURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"cost","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"getApproved","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_name","type":"string"},{"internalType":"string","name":"_symbol","type":"string"},{"internalType":"string","name":"_initBaseURI","type":"string"},{"internalType":"string","name":"_initContractURI","type":"string"},{"internalType":"string","name":"_initHiddenURI","type":"string"}],"name":"initialize","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_owner","type":"address"},{"internalType":"address","name":"_operator","type":"address"}],"name":"isApprovedForAll","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"maxMintAmountPerTx","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"maxSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_mintAmount","type":"uint256"}],"name":"mint","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_mintAmount","type":"uint256"},{"internalType":"address","name":"_receiver","type":"address"}],"name":"mintForAddress","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"ownerOf","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"bool","name":"_state","type":"bool"}],"name":"pause","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"paused","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"revealed","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"bytes","name":"_data","type":"bytes"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"operator","type":"address"},{"internalType":"bool","name":"approved","type":"bool"}],"name":"setApprovalForAll","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_newBaseExtension","type":"string"}],"name":"setBaseExtension","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_newBaseURI","type":"string"}],"name":"setBaseURI","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_newContractURI","type":"string"}],"name":"setContractURI","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_newCost","type":"uint256"}],"name":"setCost","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_newHiddenURI","type":"string"}],"name":"setHiddenURI","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_newmMaxMintAmountPerTx","type":"uint256"}],"name":"setMaxMintAmountPerTx","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_newMaxSupplyAmount","type":"uint256"}],"name":"setMaxSupplyAmount","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bool","name":"_state","type":"bool"}],"name":"setRevealed","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes4","name":"interfaceId","type":"bytes4"}],"name":"supportsInterface","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"transferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_owner","type":"address"}],"name":"walletOfOwner","outputs":[{"internalType":"uint256[]","name":"","type":"uint256[]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"withdraw","outputs":[],"stateMutability":"payable","type":"function"}]
+      STYLES = {
         theme: "dark"
       }
     </script>
@@ -30,6 +33,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <button id="connect">Connect</button>
     <button id="mint-button">Mint</button>
     <!--
       This HTML file is a template.

src/constants.js

@@ -118,4 +118,4 @@ export const getBaseURL = () => {
         return "http://localhost:3000"
     }
     return "https://nftcomponents.vercel.app"
-}
+}

src/contract.js

@@ -7,16 +7,21 @@ export let NFTContract;
 export const initContract = async (contract, shouldSwitchNetwork=true) => {
     const host = normalizeURL(window.location.href);
     const allowedURLs = contract?.allowedURLs?.map(u => normalizeURL(u));
+
     if (allowedURLs && !allowedURLs?.some(v => v.includes(host))) {
         return undefined;
     }
+
     let currentNetwork = await getCurrentNetwork();
+
     if (shouldSwitchNetwork && !contract.allowedNetworks.includes(currentNetwork)) {
         await switchNetwork(contract.allowedNetworks[0])
         currentNetwork = await getCurrentNetwork();
     }
+
     const address = contract.address[contract.allowedNetworks[0]];
-    const abi = contract.abi ?? await fetchABI(address, currentNetwork);
+    const abi = contract.abi;
+
     return new web3.eth.Contract(abi, address);
 }
 
@@ -33,7 +38,8 @@ const initContractGlobalObject = async () => {
             address: {
                 [chainID]: window.CONTRACT_ADDRESS,
             },
-            abi: await fetchABI(window.CONTRACT_ADDRESS, chainID),
+            implementationAddress: window.IMPLEMENTATION_ADDRESS,
+            abi: await fetchABI(window.IMPLEMENTATION_ADDRESS, chainID),
             allowedNetworks: [chainID]
         }
     }
@@ -45,10 +51,9 @@ export const fetchABI = async (address, chainID) => {
     if (cachedABI)
         return cachedABI
 
-    const abi = await fetch(`https://metadata.buildship.xyz/api/info/${address}?network_id=${chainID}`)
-        .then(r => r.json())
-        .then(r => r.abi)
-        .catch(e => null)
+    const networkName = window.IS_TESTNET || window.NETWORK_ID == 4 ? "-rinkeby" : "";
+    const abi = await fetch(`http://api${networkName}.etherscan.io/api?module=contract&action=getabi&address=${address}&format=raw&apikey=WBB6MKCCU58DU1ZX2446B915PTURZ4QE78`)
+        .then(res => res.json())
 
     if (!abi) {
         console.log("No ABI returned from https://metadata.buildship.xyz")
@@ -104,4 +109,4 @@ export const setContracts = async (shouldSwitchNetwork=true) => {
     }
     NFTContract = await initContract(window.CONTRACT.nft, false);
     console.log("NFTContract", NFTContract)
-}
+}

src/index.js

@@ -48,7 +48,4 @@ document.addEventListener("DOMContentLoaded", () => {
     sendAnonymousAnalytics()
 });
 
-export { showAlert, showMintModal, renderAppContainer };
-
-
-
+export { showAlert, showMintModal, renderAppContainer };

src/mint/index.js

@@ -17,4 +17,4 @@ export const init = async () => {
     updateMintButton();
 }
 
-init();
+init();

src/mint/web3.js

@@ -85,7 +85,7 @@ export const getMintedNumber = async () => {
     if (!NFTContract)
         return undefined
     if (NFTContract.methods.totalSupply)
-        return await NFTContract.methods.totalSupply().call()
+        return await NFTContract.methods.totalSupply().call() - 1
     // temporary solution, works only for buildship.xyz contracts
     // totalSupply was removed to save gas when minting
     // but number minted still accessible in the contract as a private variable
@@ -113,6 +113,9 @@ export const getDefaultMaxTokensPerMint = () => {
 }
 
 export const getMaxTokensPerMint = async () => {
+    if(NFTContract?.methods?.maxMintAmountPerTx) {
+        return Number(await NFTContract.methods.maxMintAmountPerTx().call())
+    }
     if (NFTContract?.methods?.maxPerMint) {
         return Number(await NFTContract.methods.maxPerMint().call())
     }

src/tx.js

@@ -34,4 +34,4 @@ const estimateMaxGasFee = async (tx) => {
 const estimateMaxPriorityFeePerGas = async () => {
     const chainID = await web3.eth.getChainId();
     return [1, 4].includes(chainID) ? 2e9 : undefined;
-}
+}

src/wallet.js

@@ -267,7 +267,7 @@ export const connectWallet = async () => {
     try {
         await initWeb3(true);
     } catch (e) {
-        if (!e.includes("Modal closed by user")) {
+        if (typeof e === "string" && !e.includes("Modal closed by user")) {
             alert(`Error in initWeb3 in connectWallet: ${e.toString()}`)
             console.error(e)
         }
@@ -287,7 +287,7 @@ export const updateWalletStatus = async () => {
     try {
         await initWeb3();
     } catch (e) {
-        if (!e.includes("Modal closed by user")) {
+        if (typeof e === "string" && !e.includes("Modal closed by user")) {
             alert(`Error in initWeb3: ${e.toString()}`)
             console.error(e)
         }
@@ -296,7 +296,8 @@ export const updateWalletStatus = async () => {
     const connected = await isWalletConnected();
     const button = getConnectButton();
     if (button && connected) {
-        button.textContent = window?.DEFAULTS?.labels?.walletConnected ?? "Wallet connected";
+        const walletAddress = await getWalletAddressOrConnect(false, true);
+        button.textContent = window?.DEFAULTS?.labels?.walletConnected ?? "Connected: " + truncate(walletAddress, 10);
     }
 }
 
@@ -309,4 +310,18 @@ export const updateConnectButton = () => {
             await updateMintedCounter()
         }
     });
-}
+}
+
+function truncate(fullStr, strLen, separator) {
+    if (fullStr === undefined) return;
+    if (fullStr.length <= strLen) return fullStr;
+
+    separator = separator || '...';
+
+    var sepLen = separator.length,
+        charsToShow = strLen - sepLen,
+        frontChars = Math.ceil(charsToShow/1.5),
+        backChars = Math.floor(charsToShow/2.5);
+
+    return fullStr.substr(0, frontChars) + separator + fullStr.substr(fullStr.length - backChars);
+};