\n {\" \"}\n 🦊{\" \"}\n \n You must install Metamask, a virtual Ethereum wallet, in your\n browser.\n \n
\n \n ),\n };\n }\n};\n\nexport const getCurrentWalletConnected = async () => {\n if (window.ethereum) {\n try {\n const addressArray = await window.ethereum.request({\n method: \"eth_accounts\",\n });\n if (addressArray.length > 0) {\n return {\n address: addressArray[0],\n status: \"Wallet Connected\",\n };\n } else {\n return {\n address: \"\",\n status: '🦊 Connect to Metamask with the button ->',\n };\n }\n } catch (err) {\n return {\n address: \"\",\n status: \"😥 \" + err.message,\n };\n }\n } else {\n return {\n address: \"\",\n status: (\n \n\n {\" \"}\n 🦊{\" \"}\n \n You must install Metamask, a virtual Ethereum wallet, in your\n browser.\n \n
\n \n ),\n };\n }\n};\n\n\nexport const collectionInWallet = async(address) => {\n window.contract = await new web3.eth.Contract(contractABI['abi'], contractAddress);\n\n let collection = await window.contract.methods.collectionInWallet(address).call();\n // console.log(collection, \"COLLECTION\")\n return collection;\n}\n\nexport const getTokenURI = async(tokenId) => {\n window.contract = await new web3.eth.Contract(contractABI['abi'], contractAddress);\n let tokenURI = await window.contract.methods.tokenURI(tokenId).call();\n return tokenURI;\n}\n\nexport const changeModeMetavaders_Animetas = async(tokenId) => {\n // console.log(\"XX\" + tokenId);\n let invasionContract = await new web3.eth.Contract(invasionContractABI['abi'], invasionContractAddress);\n\n const transactionParameters = {\n from: window.ethereum.selectedAddress, // must match user's active address.\n to: invasionContractAddress, // Required except during contract publications.\n data: invasionContract.methods.changeModeMetavaders_Animetas(tokenId).encodeABI(),\n };\n\n try {\n const txHash = await window.ethereum.request({\n method: \"eth_sendTransaction\",\n params: [transactionParameters],\n });\n // console.log(txHash);\n return {\n success: true,\n status: (\n \n ✅ Check out the status of transaction on Etherscan: {\" \"}\n \n here\n \n \n )\n }; \n } catch (error) {\n return {\n success: false,\n status: \"😥 Something went wrong: \" + error.message,\n }; \n }\n}\n\nexport const changeModeMetavaders_Normal = async(tokenId) => {\n // console.log(tokenId, \"TOKEN ID\")\n let invasionContract = await new web3.eth.Contract(invasionContractABI['abi'], invasionContractAddress);\n\n const transactionParameters = {\n from: window.ethereum.selectedAddress, // must match user's active address.\n to: invasionContractAddress, // Required except during contract publications.\n data: invasionContract.methods.changeModeMetavaders_Normal(tokenId).encodeABI(),\n };\n\n try {\n const txHash = await window.ethereum.request({\n method: \"eth_sendTransaction\",\n params: [transactionParameters],\n });\n // console.log(txHash);\n return {\n success: true,\n status: (\n \n ✅ Check out the status of transaction on Etherscan: {\" \"}\n \n here\n \n \n )\n }; \n } catch (error) {\n return {\n success: false,\n status: \"😥 Something went wrong: \" + error.message,\n }; \n }\n}\n\nexport const getInvaderBalance = async() => {\n window.contract = await new web3.eth.Contract(invasionContractABI['abi'], invasionContractAddress);\n let invaderBalance = await window.contract.methods.getInvaderBalance().call({from: window.ethereum.selectedAddress});\n console.log(\"Invader Balance: \" + invaderBalance)\n return invaderBalance;\n}","export default __webpack_public_path__ + \"static/media/error_placeholder.d0701f55.png\";","\nimport Web3 from \"web3\";\n\n\nconst spacePunksContractABI = require(\"./contracts/SpacePunks.json\"); // Make sure to upload correct ABI\nconst spacePunksContractAddress = \"0x45db714f24f5a313569c41683047f1d49e78ba07\"; // Update to contract address\nconst web3 = new Web3(`https://mainnet.infura.io/v3/6e3fdc31eb5b4621b3f03c6ebad9dc35`);\n\n\n\n\n\nexport const collectionSpacePunkInWallet = async(address) => {\n window.contract = await new web3.eth.Contract(spacePunksContractABI['abi'], spacePunksContractAddress);\n \n let collection = await window.contract.methods.balanceOf(address).call();\n console.log(collection, \"COLLECTION\")\n // console.log(collection, \"COLLECTION\")\n return collection;\n } \n\n export const tokenOfOwnerByIndex = async(address, index) => {\n window.contract = await new web3.eth.Contract(spacePunksContractABI['abi'], spacePunksContractAddress);\n \n let collection = await window.contract.methods.tokenOfOwnerByIndex(address, index).call();\n // console.log(collection, \"COLLECTION\")\n return collection;\n }\n \n \n\nexport const getTokenURI_SpacePunks = async(tokenId) => {\n let contract = await new web3.eth.Contract(spacePunksContractABI['abi'], spacePunksContractAddress);\n let tokenURI = await contract.methods.tokenURI(tokenId).call();\n return tokenURI;\n}\n\nexport const convertIPFSToHTML = (ipfs_link) => {\n return ipfs_link.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/')\n}\n\nexport const getImageURL = (link) => {\n \n return \n}\n\n// const main = async (tokenId) => {\n// console.log('Running up to: ' + tokenId);\n// let result = await getTokenURI_SpacePunks(tokenId);\n// result = convertIPFSToHTML(result)['external_url'];\n// // do something else here after firstFunction completes\n// console.log(result)\n// }\n\n// main(1)","import React, {useState, useEffect} from \"react\";\nimport logo from \"../../assets/logoN1.png\";\nimport {Link} from \"react-router-dom\";\nimport {FaBars, FaTimes} from \"react-icons/fa\";\nimport Switch from \"react-switch\";\nimport { \n connectWallet, \n getCurrentWalletConnected, \n collectionInWallet,\n\n getTokenURI,\n} from \"../../web3/interact\";\nimport error_placeholder from \"../../assets/error_placeholder.png\";\n\n\nimport './index.css';\nimport { collectionSpacePunkInWallet,getTokenURI_SpacePunks, convertIPFSToHTML, tokenOfOwnerByIndex } from \"../../web3/spacePunksExample\";\n\n\nexport const NavBar = ({ \nonUpdateNftCollection,\nonUpdateWallet,\nwalletAddress,\nstatus,\nsetIsLoading,\nsetLoading,\nonUpdateSpacePunkCollection,\nsetStatusState,\n updateDrawer}) => {\n const [drawer, setDrawer] = useState(false)\n const [showNotif, setShowNotif] = useState(true)\n\n\n\n useEffect(async () => {\n setIsLoading(true)\n const { address, status } = await getCurrentWalletConnected();\n onUpdateWallet(address);\n setStatusState(status);\n if (address !== \"\") {\n getCollectionInWallet(address);\n getSpacePunkInWallet(address)\n setIsLoading(false)\n } else {\n setIsLoading(false)\n }\n addWalletListener();\n \n }, [walletAddress]);\n\n\n\n\n {/* METAVADERS LOGIC */}\n const getCollectionInWallet = async (address) =>{\n if(window.ethereum) {\n let collection = await collectionInWallet(address);\n // Get NFT Metadata\n let collectionMetadata = [];\n \n\n for(let i=0; i < collection.length; i++) {\n \n let url = await getTokenURI(collection[i]);\n \n let metadata = await getMetadata(url);\n \n if (\"image\" in metadata) {\n \n metadata['id'] = collection[i];\n collectionMetadata.push(metadata);\n \n } else {\n \n metadata['id'] = collection[i];\n metadata['image'] = error_placeholder;\n \n }\n }\n onUpdateNftCollection(collectionMetadata)\n setTimeout(() => {\n if(collectionMetadata){\n setIsLoading(false)\n }\n }, 200);\n \n }\n };\n\n\n {/* SPACE PUNK LOGIC */}\n const getSpacePunkInWallet = async (address) => {\n\n if(window.ethereum) {\n let items = await collectionSpacePunkInWallet(address) \n\n let spacePunkCollection = [];\n\n for(let i=0; i < items; i++) {\n let spacePunks = await tokenOfOwnerByIndex(address, i)\n let url = await getTokenURI_SpacePunks(spacePunks);\n let metadata = convertIPFSToHTML(url);\n if (metadata) {\nfetch(metadata)\n.then(res => res.json())\n.then((out) => {\n console.log('Checkout this JSON! ', spacePunkCollection.push(out))\n})\n.catch(err => { throw err });\n } \n }\n onUpdateSpacePunkCollection(spacePunkCollection)\n }\n }\n\n \n\n async function getMetadata (metadataUrl) {\n let result = await fetch_json(metadataUrl);\n return result;\n }\n\n function fetch_json(url) {\n return fetch(url).then((response) => {\n if (response.ok) {\n return response.json();\n } else {\n throw new Error('Something went wrong');\n }\n })\n .then((responseJson) => {\n return responseJson\n })\n .catch((error) => {\n console.log(error);\n return error\n });\n }\n\n\n function addWalletListener() {\n if (window.ethereum) {\n window.ethereum.on(\"accountsChanged\", (accounts) => {\n if (accounts.length > 0) {\n onUpdateWallet(accounts[0]);\n setStatusState(\"\");\n window.location.reload()\n } else {\n onUpdateWallet(\"\");\n setStatusState(\n '🦊 Connect to Metamask with the button ->'\n );\n }\n });\n } else {\n setStatusState(\n\n {\" \"}\n 🦊{\" \"}\n
For better performance, you should use a laptop.
\n\n {status}\n
\n \n\nThis is a call to action at the bottom. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
\nCopyright © 2021 Greed. All rights reserved.
\n{text}
\n {(active_imageURL) ?Please confirm your Metamask transaction
\n{status}
\nSucessfully {action === \"activate\" ? `Activated` : `Deactivated`} Metavader...
\n{status}
\nClick here to toggle between Activate/Deactivate page
\nTo activate please do the following:
\nSelect Metavader
\nConnect your wallet to select Metavaders
\nSelect invasion target
\nClick here to toggle between Activate/De-Activate page
\nTo de-activate please do the following:
\nSelect Metavader
\nConnect your wallet to select Metavaders
\nUpgrade to Starship
\n */}\nSelect Metavader
\nSelect Background Image
\nYou currently own no metavaders
:Add Metavader to background image
}\n\nFind the different pages below and short description
\nConnect your wallet, select our metavader and activate it if it's not already
\nConnect your wallet, select our metavader and de-activate it if it's not already
\nGet creative by customizing your metavaders in different background
\nYour Collection
\nConnect your wallet to select Metavaders
\n\n To use this feature you will need to own a Metavaders NFT (which you can get here) as well as a NFT of the corresponding project. For more details of how to use visit our discord page.\n
\n\nSelect your corresponding project
\n\nSelect the SpacePunk you would like to customize
\n\nAdd custom suit to your selected SpacePunk
\nTo upgrade please do the following:
\nSelect Starship
\nConnect your wallet to select Starship
\n