{"version":3,"sources":["assets/hero.png","components/Minter.js","index.js"],"names":["initialInfoState","connected","status","account","web3","contract","address","contractJSON","initialMintState","loading","name","amount","supply","cost","Minter","useState","info","setInfo","mintInfo","setMintInfo","console","log","init","_request","_contractJSON","a","window","ethereum","isMetaMask","request","method","accounts","chain_id","Web3","prevState","eth","Contract","abi","chain","message","getSupply","params","to","from","data","methods","totalSupply","encodeABI","result","utils","hexToNumberString","getCost","mint","value","String","toHex","Number","updateAmount","newAmount","connectToContract","useEffect","on","location","reload","className","alt","src","Hero","total_supply","style","display","justifyContent","alignItems","disabled","onClick","width","height","collectionTitle","collectionDescription","collectionPhoto","clientId","mintConfig","price","_mintAmount","background","textAlign","color","fromWei","chain_symbol","backgroundColor","substring","position","bottom","left","target","href","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.0e1d4e26.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/hero.7dacef23.png\";","import { useEffect, useState } from \"react\";\nimport Web3 from \"web3\";\nimport contract from \"../contracts/contract.json\";\nimport Hero from \"../assets/hero.png\";\nimport { CrossmintPayButton } from \"@crossmint/client-sdk-react-ui\";\n\n\nconst initialInfoState = {\n  connected: false,\n  status: null,\n  account: null,\n  web3: null,\n  contract: null,\n  address: null,\n  contractJSON: null,\n};\n\nconst initialMintState = {\n  loading: false,\n  status: `Mint your ${contract.name}`,\n  amount: 1,\n  supply: \"0\",\n  cost: \"0\",\n};\n\nfunction Minter() {\n  const [info, setInfo] = useState(initialInfoState);\n  const [mintInfo, setMintInfo] = useState(initialMintState);\n\n  console.log(info);\n\n  const init = async (_request, _contractJSON) => {\n    if (window.ethereum.isMetaMask) {\n      try {\n        const accounts = await window.ethereum.request({\n          method: _request,\n        });\n        const networkId = await window.ethereum.request({\n          method: \"net_version\",\n        });\n        if (networkId == _contractJSON.chain_id) {\n          let web3 = new Web3(window.ethereum);\n          setInfo((prevState) => ({\n            ...prevState,\n            connected: true,\n            status: null,\n            account: accounts[0],\n            web3: web3,\n            contract: new web3.eth.Contract(\n              _contractJSON.abi,\n              _contractJSON.address\n            ),\n            contractJSON: _contractJSON,\n          }));\n        } else {\n          setInfo(() => ({\n            ...initialInfoState,\n            status: `Change network to ${_contractJSON.chain}.`,\n          }));\n        }\n      } catch (err) {\n        console.log(err.message);\n        setInfo(() => ({\n          ...initialInfoState,\n        }));\n      }\n    } else {\n      setInfo(() => ({\n        ...initialInfoState,\n        status: \"Please install metamask.\",\n      }));\n    }\n  };\n\n  const initListeners = () => {\n    if (window.ethereum) {\n      window.ethereum.on(\"accountsChanged\", () => {\n        window.location.reload();\n      });\n      window.ethereum.on(\"chainChanged\", () => {\n        window.location.reload();\n      });\n    }\n  };\n\n  const getSupply = async () => {\n    const params = {\n      to: info.contractJSON.address,\n      from: info.account,\n      data: info.contract.methods.totalSupply().encodeABI(),\n    };\n    try {\n      const result = await window.ethereum.request({\n        method: \"eth_call\",\n        params: [params],\n      });\n      console.log(info.web3.utils.hexToNumberString(result));\n      setMintInfo((prevState) => ({\n        ...prevState,\n        supply: info.web3.utils.hexToNumberString(result),\n      }));\n    } catch (err) {\n      setMintInfo((prevState) => ({\n        ...prevState,\n        supply: 0,\n      }));\n    }\n  };\n\n  const getCost = async () => {\n    const params = {\n      to: info.contractJSON.address,\n      from: info.account,\n      data: info.contract.methods.cost().encodeABI(),\n    };\n    try {\n      const result = await window.ethereum.request({\n        method: \"eth_call\",\n        params: [params],\n      });\n      console.log(info.web3.utils.hexToNumberString(result));\n      setMintInfo((prevState) => ({\n        ...prevState,\n        cost: info.web3.utils.hexToNumberString(result),\n      }));\n    } catch (err) {\n      setMintInfo((prevState) => ({\n        ...prevState,\n        cost: \"0\",\n      }));\n    }\n  };\n\n  const mint = async () => {\n    const params = {\n      to: info.contractJSON.address,\n      from: info.account,\n      value: String(\n        info.web3.utils.toHex(Number(mintInfo.cost) * mintInfo.amount)\n      ),\n      data: info.contract.methods\n        .mint(info.account, mintInfo.amount)\n        .encodeABI(),\n    };\n    try {\n      setMintInfo((prevState) => ({\n        ...prevState,\n        loading: true,\n        status: `Minting ${mintInfo.amount}...`,\n      }));\n      const txHash = await window.ethereum.request({\n        method: \"eth_sendTransaction\",\n        params: [params],\n      });\n      setMintInfo((prevState) => ({\n        ...prevState,\n        loading: false,\n        status:\n          \"Nice! Your NFT will show up on Opensea, once the transaction is successful.\",\n      }));\n      getSupply();\n    } catch (err) {\n      setMintInfo((prevState) => ({\n        ...prevState,\n        loading: false,\n        status: err.message,\n      }));\n    }\n  };\n\n  const updateAmount = (newAmount) => {\n    if (newAmount <= 5 && newAmount >= 1) {\n      setMintInfo((prevState) => ({\n        ...prevState,\n        amount: newAmount,\n      }));\n    }\n  };\n\n  const connectToContract = (_contractJSON) => {\n    init(\"eth_requestAccounts\", _contractJSON);\n  };\n\n  useEffect(() => {\n    connectToContract(contract);\n    initListeners();\n  }, []);\n\n  useEffect(() => {\n    if (info.connected) {\n      getSupply();\n      getCost();\n    }\n  }, [info.connected]);\n\n  return (\n    <div className=\"page\">\n      <div className=\"card\">\n        <div className=\"card_header colorGradient\">\n          <img className=\"card_header_image ns\" alt={\"banner\"} src={Hero} />\n        </div>\n        {mintInfo.supply < contract.total_supply ? (\n          <div className=\"card_body\">\n            <div\n              style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n              }}\n            >\n              <button\n                disabled={!info.connected || mintInfo.cost == \"0\"}\n                className=\"small_button\"\n                onClick={() => updateAmount(mintInfo.amount - 1)}\n              >\n                -\n              </button>\n              <div style={{ width: 10 }}></div>\n              <button\n                disabled={!info.connected || mintInfo.cost == \"0\"}\n                className=\"button\"\n                onClick={() => mint()}\n              >\n                Mint {mintInfo.amount}\n              </button>\n              <div style={{ width: 10 }}></div>\n              <button\n                disabled={!info.connected || mintInfo.cost == \"0\"}\n                className=\"small_button\"\n                onClick={() => updateAmount(mintInfo.amount + 1)}\n              >\n\n                +\n              </button>\n              \n            </div>   \n            <div style={{ height:16}}></div>\n            <CrossmintPayButton\n    collectionTitle=\"Jellyfish NFT Purpose\"\n    collectionDescription=\"<DESCRIPTION_OF_YOUR_COLLECTION>\"\n    collectionPhoto=\"\"\n    clientId=\"52e32009-7b3c-4551-b034-c8536a227b62\"\n    mintConfig={{\n        price: \"15\",\n        _mintAmount:\"1\",\n        // ... mint arguments ...\n    }}\n    style={{background: \"linear-gradient(70deg, #f000ff 0%, #478ac9 100%)\", textAlign: \"center\", width: 260 }}\n/>\n\n            {info.connected ? (\n              <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n                <p style={{ color: \"var(--statusText)\", textAlign: \"center\" }}>\n                  {info.web3?.utils.fromWei(mintInfo.cost, \"ether\") *\n                    mintInfo.amount}{\" \"}\n                  {contract.chain_symbol} (~$10)\n                </p>\n                <div style={{ width: 20 }}></div>\n                <p style={{ color: \"var(--statusText)\", textAlign: \"center\" }}>\n                  |\n                </p>\n                <div style={{ width: 20 }}></div>\n                <p style={{ color: \"var(--statusText)\", textAlign: \"center\" }}>\n                  {mintInfo.supply}/{contract.total_supply}\n                </p>\n              </div>\n            ) : null}\n            {mintInfo.status ? (\n              <p className=\"statusText\">{mintInfo.status}</p>\n            ) : null}\n            {info.status ? (\n              <p \n              className=\"statusText\" style={{ color: \"var(--error)\" }}>\n                {info.status}\n              </p>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"card_body\">\n            <p style={{ color: \"var(--statusText)\", textAlign: \"center\" }}>\n              {mintInfo.supply}/{contract.total_supply}\n            </p>\n            <p className=\"statusText\">\n              We've sold out! .You can still buy and trade the {contract.name}{\" \"}\n              on marketplaces such as Opensea.\n            </p>\n          </div>\n        )}\n        <div className=\"card_footer colorGradient\">\n          <button\n            className=\"button\"\n            style={{\n              backgroundColor: info.connected\n                ? \"var(--success)\"\n                : \"var(--warning)\",\n            }}\n            onClick={() => connectToContract(contract)}\n          >\n            {info.account ? \"Connected\" : \"Connect Wallet\"}\n          </button>\n          {info.connected ? (\n            <span className=\"accountText\">\n              {String(info.account).substring(0, 6) +\n                \"...\" +\n                String(info.account).substring(38)}\n            </span>\n          ) : null}\n        </div>\n        <a\n          style={{\n            position: \"absolute\",\n            bottom: 55,\n            left: -75,\n          }}\n          className=\"_90\"\n          target=\"_blank\"\n          href=\"https://polygonscan.com/token/0xb6840bA24c6BB8d680114D2D1F20778c073e5cAF\"\n        >\n          View Contract\n        </a>\n      </div>\n    </div>\n  );\n}\n\nexport default Minter;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Minter from \"./components/Minter\";\nimport \"./styles/styles.css\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <Minter />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}