-
diff --git a/src/views/NftMarketplace/NftMarketplace.js b/src/views/NftMarketplace/NftMarketplace.js
new file mode 100644
index 0000000..56a7d67
--- /dev/null
+++ b/src/views/NftMarketplace/NftMarketplace.js
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { useWallet } from 'use-wallet';
+import styled from 'styled-components';
+import { makeStyles } from '@mui/styles';
+import { Box, Typography, Grid, Container } from '@mui/material';
+import UnlockWallet from '../../components/UnlockWallet';
+import Page from '../../components/Page';
+import Markets from './components/markets';
+import MyNFTs from './components/myNfts';
+import { createGlobalStyle } from 'styled-components';
+import Web3Provider from './utils/Web3Provider';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './utils/createEmotionCache';
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache()
+
+const NftMarketplace = (props) => {
+ const { emotionCache = clientSideEmotionCache } = props
+ const classes = useStyles();
+ const { account } = useWallet();
+ const [activeTab, setActiveTab] = useState("tab1");
+
+ const handleTab1 = () =>{
+ setActiveTab("tab1");
+ };
+ const handleTab2 = () => {
+ setActiveTab("tab2");
+ };
+
+ return (
+
+ + ); +}; + + + +const BackgroundImage = createGlobalStyle` + body { + background-color: var(--black); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%231D1E1F' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E"); + } + + * { + color: var(--white) !important; + } +`; + +const useStyles = makeStyles((theme) => ({ + + nftField: { + display: "flex", + justifyContent: "center" + }, + + toggleNav: { + display: "flex", + margin: '40px 16px', + boxShadow: '0px 2px 4px var(--extra-color-1)' + }, + + tabs: { + fontSize: 20, + width: '50%', + textAlign: 'center', + color: "#9a9797 !important", + padding: "16px 0 12px", + cursor: "pointer" + }, + + tabActive: { + fontSize: 20, + width: '50%', + textAlign: 'center', + color: "#FFF", + padding: "16px 0 12px", + backgroundColor: "#ff26de56", + cursor: "pointer" + } +})); + +export default NftMarketplace; diff --git a/src/views/NftMarketplace/components/card/CardAddresses.js b/src/views/NftMarketplace/components/card/CardAddresses.js new file mode 100755 index 0000000..f9f352b --- /dev/null +++ b/src/views/NftMarketplace/components/card/CardAddresses.js @@ -0,0 +1,28 @@ +import { Typography } from '@mui/material' +import { ethers } from 'ethers' +import { useContext } from 'react' +import { shortenAddress } from '../../utils/format' +import { Web3Context } from '../../utils/Web3Provider' + +function getAddressText(address, account) { + if (address === ethers.constants.AddressZero) return 'Marketplace'; + if (address === account) return 'You'; + return shortenAddress(address); +} + +export default function CardAddresses({ nft }) { + const isAvailable = !nft.sold && !nft.canceled; + const { account } = useContext(Web3Context); + return ( + <> ++ ++ ++ {!!account ? ( + <> + + NFT Marketplace + ++ + + ) : ( ++ ++ +Market Place +My NFTs ++ {activeTab ==="tab1" ? +: } + + )} + + Owner: {getAddressText(nft.owner, account)} + + {isAvailable && ++ Seller: {getAddressText(nft.seller, account)} + + } + + ); +}; diff --git a/src/views/NftMarketplace/components/card/NFTPrice.js b/src/views/NftMarketplace/components/card/NFTPrice.js new file mode 100755 index 0000000..9918373 --- /dev/null +++ b/src/views/NftMarketplace/components/card/NFTPrice.js @@ -0,0 +1,45 @@ +import { Typography } from '@mui/material' +import Game from '../../../../assets/img/GAME.png' +// import Image from 'material-ui-image' + +function getPriceText (nft) { + const { sold, canceled } = nft; + if (sold) { + return 'Sold for' + } + + if (canceled) { + return 'Offered for' + } + + return 'Price' +} + +export default function NFTPrice ({ nft }) { + const priceText = getPriceText(nft); + + return ( ++ ++ ); +}; diff --git a/src/views/NftMarketplace/components/card/PriceTextField.js b/src/views/NftMarketplace/components/card/PriceTextField.js new file mode 100755 index 0000000..cf7415e --- /dev/null +++ b/src/views/NftMarketplace/components/card/PriceTextField.js @@ -0,0 +1,21 @@ +import { TextField } from '@mui/material' + +export default function PriceTextField ({ onChange, disabled, error }) { + return ( ++ {priceText} + ++ + ++ + {' '}{nft.price} +
+ ); +}; diff --git a/src/views/NftMarketplace/components/card/SortTag.js b/src/views/NftMarketplace/components/card/SortTag.js new file mode 100755 index 0000000..7764dfd --- /dev/null +++ b/src/views/NftMarketplace/components/card/SortTag.js @@ -0,0 +1,65 @@ +import React from "react"; +import { Grid, Button, Typography } from "@mui/material"; +import { makeStyles } from '@mui/styles' + +export default function SortTag({ setSortBy, sortBy, direction, toggleDirection }) { + const classes = useStyles(); + const tags = [ + { key: "price", title: "Price" }, + { key: "level", title: "Level" } + ]; + const items = tags.map(({ key, title }) => { + const active = key === sortBy; + return ( + { + if (active) { + toggleDirection(); + } + setSortBy(key); + }} + > + {title} {active ? (direction === "asc" ? " (asc)" : " (dsc)") : null} + + ); + }); + return ( ++ + ); +} + +function HeadToggle({ children, active, onClick }) { + return ( + + ); +} + +const useStyles = makeStyles((theme) => ({ + sortField: { + width: 300, + alignItems: 'center', + display: 'flex', + marginRight: 22, + marginBottom: 25, + justifyContent: 'space-around', + position: 'absolute', + right: 0, + // float: 'right', + '& button': { + padding: '5px 25px' + }, + '@media (max-width: 640px)': { + marginTop: 66 + } + } +})); diff --git a/src/views/NftMarketplace/components/gen0/Gen0Card.js b/src/views/NftMarketplace/components/gen0/Gen0Card.js new file mode 100755 index 0000000..074d171 --- /dev/null +++ b/src/views/NftMarketplace/components/gen0/Gen0Card.js @@ -0,0 +1,202 @@ +import { ethers } from 'ethers' +import { useContext, useEffect, useState } from 'react' +import { makeStyles } from '@mui/styles' +import { Grid, Card, CardActions, CardContent, CardMedia, Button, Divider, Box, CircularProgress, Typography } from '@mui/material' +import { Web3Context } from '../../utils/Web3Provider' +import NFTPrice from '../card/NFTPrice' +import CardAddresses from '../card/CardAddresses' +import PriceTextField from '../card/PriceTextField' +import ReactPlayer from 'react-player'; +import useApprove, { ApprovalState } from '../../../../hooks/useApprove' +import useTombFinance from '../../../../hooks/useTombFinance' + +const APPROVE_AMOUNT = ethers.constants.MaxUint256; + +export default function Gen0Card({ nft, action, updateNFT }) { + const { account, TheoryUnlocker, marketplaceContract, GameContract, hasWeb3 } = useContext(Web3Context); + const [isHovered, setIsHovered] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [priceError, setPriceError] = useState(false); + const [newPrice, setPrice] = useState(0); + const classes = useStyles(); + + const tombFinance = useTombFinance(); + const [approveStatus, approve] = useApprove(tombFinance?.TOMB, tombFinance?.contracts.Marketplace.address); + + const actions = { + buy: { + text: 'buy', + method: buyNft + }, + cancel: { + text: 'cancel', + method: cancelNft + }, + approve: { + text: 'Approve for selling', + method: approveNft + }, + sell: { + text: 'Sell', + method: sellNft + }, + none: { + text: 'pending', + method: () => {} + } + }; + + async function buyNft (nft) { + const transaction = await marketplaceContract.createMarketSale(TheoryUnlocker.address, nft.marketItemId); + await transaction.wait(); + updateNFT(); + } + + async function approveBuy () { + const transaction = await GameContract.approve(marketplaceContract.address, APPROVE_AMOUNT); + await transaction.wait(); + // updateNFT(); + } + + async function cancelNft (nft) { + const transaction = await marketplaceContract.cancelMarketItem(TheoryUnlocker.address, nft.marketItemId); + await transaction.wait(); + updateNFT(); + } + + async function approveNft(nft) { + const approveTx = await TheoryUnlocker.approve(marketplaceContract.address, nft.tokenId); + await approveTx.wait(); + updateNFT(); + return approveTx; + } + + async function sellNft (nft) { + if (!newPrice) { + setPriceError(true); + return; + } + setPriceError(false) + const priceInWei = ethers.utils.parseUnits(newPrice, 'ether'); + const transaction = await marketplaceContract.createMarketItem(TheoryUnlocker.address, nft.tokenId, 0, priceInWei); + await transaction.wait(); + updateNFT(); + return transaction; + } + + async function onClick (nft) { + try { + setIsLoading(true); + await actions[action].method(nft); + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + } + } + + return ( +Sort by:
+{items} +setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + + ); +}; + +const useStyles = makeStyles({ + root: { + flexDirection: 'column', + display: 'flex', + margin: 15, + flexGrow: 1, + height: 'auto', + + '& .video': { + '& > video': { + borderTopLeftRadius: 17, + borderTopRightRadius: 17 + } + } + }, + cardContent: { + padding: '9px 16px 16px', + display: 'flex', + flexDirection: 'column', + height: '100%' + }, + firstDivider: { + margin: '10px 0', + borderColor: '#e4e2e226' + }, + addressesAndPrice: { + display: 'flex', + flexDirection: 'row' + }, + addressesContainer: { + margin: 'auto', + width: '60%', + textAlign: 'left' + }, + priceContainer: { + width: '40%', + margin: 'auto', + '& input': { + fontSize: '20px' + } + }, + cardActions: { + padding: '10px 16px 16px' + }, + btn: { + background: '#ff24df', + fontSize: 15 + } +}) \ No newline at end of file diff --git a/src/views/NftMarketplace/components/gen0/Gen0CardList.js b/src/views/NftMarketplace/components/gen0/Gen0CardList.js new file mode 100755 index 0000000..b9fafdc --- /dev/null +++ b/src/views/NftMarketplace/components/gen0/Gen0CardList.js @@ -0,0 +1,101 @@ +import React, { useContext } from 'react' +import { ethers } from 'ethers' +import { Grid, Fade } from '@mui/material' +import { makeStyles } from '@mui/styles' +import Gen0Card from './Gen0Card' +import { Web3Context } from '../../utils/Web3Provider' +import { mapOwnedTokenIdsAsMarketItems } from '../../utils/nft' +import Datasort from "react-data-sort"; +import SortTag from '../card/SortTag' + +export default function Gen0CardList({ nfts, setNfts }) { + const classes = useStyles(); + const { account, marketplaceContract, TheoryUnlocker } = useContext(Web3Context); + + async function updateNFT(index, tokenId) { + const updatedNFt = await mapOwnedTokenIdsAsMarketItems(marketplaceContract, TheoryUnlocker, account)(tokenId); + setNfts(prevNfts => { + const updatedNfts = [...prevNfts]; + updatedNfts[index] = updatedNFt; + return updatedNfts; + }); + } + + function Gen0NFT({ nft, index }) { + if (nft.owner === account && !nft.hasMarketApproval) { + return+ + + ++ ++ +Generation +0 ++ +Tier +{nft.attributes[0].value} ++ +Level +{nft.level.toNumber()} ++ + +++Token ID:{nft.tokenId.toNumber()} ++ + {action === 'sell' + ?+setPrice(e.target.value)} /> + : + } + + {nft.owner === ethers.constants.AddressZero && approveStatus !== ApprovalState.APPROVED && nft.seller !== account ? ( + + ) : ( + + )} + +updateNFT(index, nft.tokenId)} /> + } + + if (nft.owner === account && nft.hasMarketApproval) { + return updateNFT(index, nft.tokenId)} /> + } + + if (nft.seller === account && !nft.sold) { + return updateNFT(index, nft.tokenId)} /> + } + + if (nft.owner === ethers.constants.AddressZero) { + return updateNFT(index, nft.tokenId)} /> + } + + return + } + + return ( + { + return ( + + + ); + }} + /> + ); +}; + +const useStyles = makeStyles((theme) => ({ + grid: { + spacing: 3, + alignItems: 'stretch', + marginTop: 60, + '@media (max-width: 640px)': { + marginTop: 120 + } + }, + gridItem: { + display: 'flex', + transition: 'all .3s', + + '@media (min-width: 1000px)': { + maxWidth: '33.3% !important' + }, + '@media (min-width: 641px) and (max-width: 999px)': { + maxWidth: '50% !important' + }, + '@media (max-width: 640px)': { + maxWidth: '100% !important' + } + } +})); \ No newline at end of file diff --git a/src/views/NftMarketplace/components/gen1/Gen1Card.js b/src/views/NftMarketplace/components/gen1/Gen1Card.js new file mode 100755 index 0000000..17e2171 --- /dev/null +++ b/src/views/NftMarketplace/components/gen1/Gen1Card.js @@ -0,0 +1,208 @@ +import { ethers } from 'ethers' +import { useContext, useEffect, useState } from 'react' +import { makeStyles } from '@mui/styles' +import { Grid, Card, CardActions, CardContent, CardMedia, Button, Divider, Box, CircularProgress, Typography } from '@mui/material' +import { Web3Context } from '../../utils/Web3Provider' +import NFTPrice from '../card/NFTPrice' +import CardAddresses from '../card/CardAddresses' +import PriceTextField from '../card/PriceTextField' +import ReactPlayer from 'react-player' +import useApprove, { ApprovalState } from '../../../../hooks/useApprove' +import useTombFinance from '../../../../hooks/useTombFinance' + +const APPROVE_AMOUNT = ethers.constants.MaxUint256; + +export default function Gen1Card({ nft, action, updateNFT }) { + const { account, TheoryUnlockerGen1, marketplaceContract, GameContract, hasWeb3 } = useContext(Web3Context); + const [isHovered, setIsHovered] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [priceError, setPriceError] = useState(false); + const [newPrice, setPrice] = useState(0); + const classes = useStyles(); + + const tombFinance = useTombFinance(); + const [approveStatus, approve] = useApprove(tombFinance?.TOMB, tombFinance?.contracts.Marketplace.address); + + const actions = { + buy: { + text: 'buy', + method: buyNft + }, + cancel: { + text: 'cancel', + method: cancelNft + }, + approve: { + text: 'Approve for selling', + method: approveNft + }, + sell: { + text: 'Sell', + method: sellNft + }, + none: { + text: 'pending', + method: () => {} + } + }; + + async function buyNft (nft) { + // const price = ethers.utils.parseUnits(nft.price.toString(), 'ether'); + // const getPrice = await marketplaceContract.getPrice(nft.marketItemId); + const transaction = await marketplaceContract.createMarketSale(TheoryUnlockerGen1.address, nft.marketItemId); + await transaction.wait(); + updateNFT(); + } + + async function approveBuy () { + const transaction = await GameContract.approve(marketplaceContract.address, APPROVE_AMOUNT); + await transaction.wait(); + // const allowanceTx = await GameContract.allowance(account, marketplaceContract.address); + // updateNFT(); + } + + async function cancelNft (nft) { + const transaction = await marketplaceContract.cancelMarketItem(TheoryUnlockerGen1.address, nft.marketItemId); + await transaction.wait(); + updateNFT(); + } + + async function approveNft (nft) { + const approveTx = await TheoryUnlockerGen1.approve(marketplaceContract.address, nft.tokenId); + // const approveTx = await TheoryUnlockerGen1.setApprovalForAll(marketplaceContract.address, true); + await approveTx.wait(); + updateNFT(); + return approveTx; + } + + async function sellNft (nft) { + if (!newPrice) { + setPriceError(true); + return; + } + setPriceError(false) + const priceInWei = ethers.utils.parseUnits(newPrice, 'ether'); + // const approvalForSal = await TheoryUnlockerGen1.setApprovalForAll(marketplaceContract.address, true) + // await approvalForSal.wait() + const transaction = await marketplaceContract.createMarketItem(TheoryUnlockerGen1.address, nft.tokenId, 1, priceInWei); + await transaction.wait(); + updateNFT(); + return transaction; + } + + async function onClick (nft) { + try { + setIsLoading(true); + await actions[action].method(nft); + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + } + } + + return ( ++ + {data.map((nft, i) => + ++ + )} ++ ++ setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + + ); +}; + +const useStyles = makeStyles({ + root: { + flexDirection: 'column', + display: 'flex', + margin: 15, + flexGrow: 1, + height: 'auto', + + '& .video': { + '& > video': { + borderTopLeftRadius: 17, + borderTopRightRadius: 17 + } + } + }, + cardContent: { + padding: '9px 16px 16px', + display: 'flex', + flexDirection: 'column', + height: '100%' + }, + firstDivider: { + margin: '10px 0', + borderColor: '#e4e2e226' + }, + addressesAndPrice: { + display: 'flex', + flexDirection: 'row' + }, + addressesContainer: { + margin: 'auto', + width: '60%', + textAlign: 'left' + }, + priceContainer: { + width: '40%', + margin: 'auto', + '& input': { + fontSize: '20px' + } + }, + cardActions: { + padding: '10px 16px 16px' + }, + btn: { + background: '#ff24df', + fontSize: 15 + } +}) \ No newline at end of file diff --git a/src/views/NftMarketplace/components/gen1/Gen1CardList.js b/src/views/NftMarketplace/components/gen1/Gen1CardList.js new file mode 100755 index 0000000..d855c5d --- /dev/null +++ b/src/views/NftMarketplace/components/gen1/Gen1CardList.js @@ -0,0 +1,102 @@ +import { useContext } from 'react' +import { ethers } from 'ethers' +import { Grid, Fade } from '@mui/material' +import { makeStyles } from '@mui/styles' +import Gen1Card from './Gen1Card' +import { Web3Context } from '../../utils/Web3Provider' +import { mapOwnedTokenIdsAsMarketItemsGen1 } from '../../utils/nft' +import Datasort from "react-data-sort"; +import SortTag from '../card/SortTag' + +export default function Gen1CardList({ nfts, setNfts }) { + const classes = useStyles(); + const { account, marketplaceContract, TheoryUnlockerGen1 } = useContext(Web3Context); + + async function updateNFT(index, tokenId) { + const updatedNFt = await mapOwnedTokenIdsAsMarketItemsGen1(marketplaceContract, TheoryUnlockerGen1, account)(tokenId); + setNfts(prevNfts => { + const updatedNfts = [...prevNfts]; + updatedNfts[index] = updatedNFt; + return updatedNfts; + }); + } + + function Gen1NFT({ nft, index }) { + // if (nft.owner === account && nft.marketItemId && !nft.hasMarketApproval) { + if (nft.owner === account && !nft.hasMarketApproval) { + return+ + + ++ ++ +Generation +1 ++ +Tier +{nft.attributes[0].value} ++ +Level +{nft.level.toNumber()} ++ + +++Token ID: {nft.tokenId.toNumber()} ++ + {action === 'sell' + ?+setPrice(e.target.value)} /> + : + } + + {nft.owner === ethers.constants.AddressZero && approveStatus !== ApprovalState.APPROVED && nft.seller !== account ? ( + + ) : ( + + )} + +updateNFT(index, nft.tokenId)} /> + } + + if (nft.owner === account && nft.hasMarketApproval) { + return updateNFT(index, nft.tokenId)} /> + } + + if (nft.seller === account && !nft.sold) { + return updateNFT(index, nft.tokenId)} /> + } + + if (nft.owner === ethers.constants.AddressZero) { + return updateNFT(index, nft.tokenId)} /> + } + + return + } + + return ( + { + return ( + + + ); + }} + /> + ); +}; + +const useStyles = makeStyles((theme) => ({ + grid: { + spacing: 3, + alignItems: 'stretch', + marginTop: 60, + '@media (max-width: 640px)': { + marginTop: 120 + } + }, + gridItem: { + display: 'flex', + transition: 'all .3s', + + '@media (min-width: 1000px)': { + maxWidth: '33.3% !important' + }, + '@media (min-width: 641px) and (max-width: 999px)': { + maxWidth: '50% !important' + }, + '@media (max-width: 640px)': { + maxWidth: '100% !important' + } + } +})); \ No newline at end of file diff --git a/src/views/NftMarketplace/components/markets.js b/src/views/NftMarketplace/components/markets.js new file mode 100755 index 0000000..0921323 --- /dev/null +++ b/src/views/NftMarketplace/components/markets.js @@ -0,0 +1,72 @@ +import { useState } from 'react' +import { makeStyles } from '@mui/styles' +import { Box, Typography, Grid, Container } from '@mui/material'; +import Market0 from './markets/market-0'; +import Market1 from './markets/market-1'; + +export default function Markets() { + const [activeTab, setActiveTab] = useState("tab1"); + const classes = useStyles(); + + const handleTab1 = () =>{ + setActiveTab("tab1"); + }; + const handleTab2 = () => { + setActiveTab("tab2"); + }; + + return ( ++ + {data.map((nft, i) => + ++ + )} ++ ++ + + ); + +}; + +const useStyles = makeStyles((theme) => ({ + + genContainer: { + paddingLeft: 0, + paddingRight: 0 + }, + + genField: { + display: "flex", + justifyContent: "center" + }, + + genNav: { + display: "flex", + justifyContent: "space-between", + backgroundColor: "#000", + width: 230, + borderRadius: 30, + marginLeft: 22, + padding: 1, + position: 'absolute' + }, + + tabs: { + fontSize: 18, + color: "#999898 !important", + padding: "7px 34px", + cursor: "pointer" + }, + + tabActive: { + fontSize: 18, + color: "#FFF", + padding: "7px 34px", + backgroundColor: "#ff24df", + borderRadius: 20, + cursor: "pointer" + } +})); \ No newline at end of file diff --git a/src/views/NftMarketplace/components/markets/market-0.js b/src/views/NftMarketplace/components/markets/market-0.js new file mode 100755 index 0000000..971daf1 --- /dev/null +++ b/src/views/NftMarketplace/components/markets/market-0.js @@ -0,0 +1,41 @@ +import { useContext, useEffect, useState } from 'react' +import { CircularProgress } from '@mui/material' +import Gen0CardList from '../gen0/Gen0CardList' +import { Web3Context } from '../../utils/Web3Provider' +import { mapAvailableMarketItems } from '../../utils/nft' + + +export default function Market0 () { + const [nfts, setNfts] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + const { marketplaceContract, TheoryUnlocker, isReady } = useContext(Web3Context) + useEffect(() => { + loadNFTs(); + }, [isReady]); + + async function loadNFTs() { + if (!isReady) return; + + const data = await marketplaceContract.fetchAvailableMarketItems() + let marketItems = []; + for (let i = 0; i < data.length; ++i) { + if ((data[i].genNumber).toNumber() == 0) { + marketItems.push(data[i]); + } + } + + const items = await Promise.all(marketItems.map(mapAvailableMarketItems(TheoryUnlocker))) + setNfts(items) + setIsLoading(false) + } + + if (isLoading) return+ ++ +Gen 0 +Gen 1 ++ {activeTab ==="tab1" ? +: } + + if (!isLoading && !nfts.length) return No NFTs for sale
+ return ( + isReady && ( ++ ) + ); +}; + \ No newline at end of file diff --git a/src/views/NftMarketplace/components/markets/market-1.js b/src/views/NftMarketplace/components/markets/market-1.js new file mode 100755 index 0000000..53242b5 --- /dev/null +++ b/src/views/NftMarketplace/components/markets/market-1.js @@ -0,0 +1,41 @@ +import { useContext, useEffect, useState } from 'react' +import { CircularProgress } from '@mui/material' +import Gen1CardList from '../gen1/Gen1CardList' +import { Web3Context } from '../../utils/Web3Provider' +import { mapAvailableMarketItemsGen1 } from '../../utils/nft' + + +export default function Market1 () { + const [nfts, setNfts] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + const { marketplaceContract, TheoryUnlockerGen1, isReady } = useContext(Web3Context) + + useEffect(() => { + loadNFTs(); + }, [isReady]); + + async function loadNFTs() { + if (!isReady) return; + + const data = await marketplaceContract.fetchAvailableMarketItems() + let marketItems = []; + for (let i = 0; i < data.length; ++i) { + if ((data[i].genNumber).toNumber() == 1) { + marketItems.push(data[i]); + } + } + const items = await Promise.all(marketItems.map(mapAvailableMarketItemsGen1(TheoryUnlockerGen1))) + setNfts(items) + setIsLoading(false) + } + + if (isLoading) return + if (!isLoading && !nfts.length) return No NFTs for sale
+ return ( + isReady && ( ++ ) + ); +}; + \ No newline at end of file diff --git a/src/views/NftMarketplace/components/myNFTs/myGen-0.js b/src/views/NftMarketplace/components/myNFTs/myGen-0.js new file mode 100644 index 0000000..f8a8f8b --- /dev/null +++ b/src/views/NftMarketplace/components/myNFTs/myGen-0.js @@ -0,0 +1,35 @@ +import React, { useContext, useEffect, useState } from 'react' +import { CircularProgress } from '@mui/material' +import { Web3Context } from '../../utils/Web3Provider' +import { mapOwnedTokenIdsAsMarketItems, getUniqueOwnedTokenIds } from '../../utils/nft' +import Gen0CardList from '../gen0/Gen0CardList'; + +export default function MyGen0() { + const [nfts, setNfts] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const { account, marketplaceContract, TheoryUnlocker, isReady, hasWeb3 } = useContext(Web3Context); + + useEffect(() => { + loadNFTs(); + }, [account, isReady, TheoryUnlocker]); + + async function loadNFTs() { + if (!isReady || !hasWeb3) return <> + const myUniqueOwnedTokenIds = await getUniqueOwnedTokenIds(TheoryUnlocker, account) + const myNfts = await Promise.all(myUniqueOwnedTokenIds.map( + mapOwnedTokenIdsAsMarketItems(marketplaceContract, TheoryUnlocker, account) + )) + + setNfts(myNfts) + setIsLoading(false) + }; + + if (isLoading) return + if (!isLoading && !nfts.length) return No NFTs
+ return ( + isReady && ( ++ ) + ); +}; + \ No newline at end of file diff --git a/src/views/NftMarketplace/components/myNFTs/myGen-1.js b/src/views/NftMarketplace/components/myNFTs/myGen-1.js new file mode 100644 index 0000000..ffbedf3 --- /dev/null +++ b/src/views/NftMarketplace/components/myNFTs/myGen-1.js @@ -0,0 +1,34 @@ +import React, { useContext, useEffect, useState } from 'react' +import { CircularProgress } from '@mui/material' +import { Web3Context } from '../../utils/Web3Provider' +import { mapOwnedTokenIdsAsMarketItemsGen1, getUniqueOwnedTokenIdsGen1 } from '../../utils/nft' +import Gen1CardList from '../gen1/Gen1CardList'; + +export default function MyGen1() { + const [nfts, setNfts] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const { account, marketplaceContract, TheoryUnlockerGen1, isReady, hasWeb3 } = useContext(Web3Context); + + useEffect(() => { + loadNFTs(); + }, [account, isReady, TheoryUnlockerGen1]); + + async function loadNFTs() { + if (!isReady || !hasWeb3) return <> + const myUniqueOwnedTokenIds = await getUniqueOwnedTokenIdsGen1(TheoryUnlockerGen1, account) + const myNfts = await Promise.all(myUniqueOwnedTokenIds.map( + mapOwnedTokenIdsAsMarketItemsGen1(marketplaceContract, TheoryUnlockerGen1, account) + )) + + setNfts(myNfts) + setIsLoading(false) + }; + + if (isLoading) return + if (!isLoading && !nfts.length) return No NFTs
+ return ( + isReady && ( ++ ) + ); +}; diff --git a/src/views/NftMarketplace/components/myNfts.js b/src/views/NftMarketplace/components/myNfts.js new file mode 100755 index 0000000..b939b44 --- /dev/null +++ b/src/views/NftMarketplace/components/myNfts.js @@ -0,0 +1,73 @@ +import { useState } from 'react' +import { makeStyles } from '@mui/styles' +import { Box, Typography, Grid, Container } from '@mui/material'; +import MyGen0 from './myNFTs/myGen-0' +import MyGen1 from './myNFTs/myGen-1' + +export default function MyNFTs() { + const [activeTab, setActiveTab] = useState("tab1"); + const classes = useStyles(); + + const handleTab1 = () =>{ + setActiveTab("tab1"); + }; + const handleTab2 = () => { + setActiveTab("tab2"); + }; + + return ( + + + ); + +}; + +const useStyles = makeStyles((theme) => ({ + + genContainer: { + paddingLeft: 0, + paddingRight: 0 + }, + + genField: { + display: "flex", + justifyContent: "center" + }, + + genNav: { + display: "flex", + justifyContent: "space-between", + backgroundColor: "#000", + width: 230, + borderRadius: 30, + marginLeft: 22, + padding: 1, + position: 'absolute' + }, + + tabs: { + fontSize: 18, + color: "#999898 !important", + padding: "7px 34px", + cursor: "pointer" + }, + + tabActive: { + fontSize: 18, + color: "#FFF", + padding: "7px 34px", + backgroundColor: "#ff24df", + borderRadius: 20, + cursor: "pointer" + } +})); + diff --git a/src/views/NftMarketplace/index.js b/src/views/NftMarketplace/index.js new file mode 100644 index 0000000..648833f --- /dev/null +++ b/src/views/NftMarketplace/index.js @@ -0,0 +1 @@ +export { default } from './NftMarketplace'; diff --git a/src/views/NftMarketplace/utils/Web3Provider.js b/src/views/NftMarketplace/utils/Web3Provider.js new file mode 100755 index 0000000..9808762 --- /dev/null +++ b/src/views/NftMarketplace/utils/Web3Provider.js @@ -0,0 +1,130 @@ +import React, { createContext, useCallback, useEffect, useState } from 'react' +import Web3Modal from 'web3modal' +import { ethers } from 'ethers' +import useTombFinance from '../../../hooks/useTombFinance' + +const contextDefaultValues = { + account: '', + connectWallet: () => { }, + marketplaceContract: null, + TheoryUnlocker: null, + TheoryUnlockerGen1: null, + GameContract: null, + isReady: false, + hasWeb3: false +}; + +export const Web3Context = createContext( + contextDefaultValues +); + +export default function Web3Provider({ children }) { + const tombFinance = useTombFinance(); + + const [hasWeb3, setHasWeb3] = useState(contextDefaultValues.hasWeb3); + const [account, setAccount] = useState(contextDefaultValues.account); + const [marketplaceContract, setMarketplaceContract] = useState(contextDefaultValues.marketplaceContract); + const [TheoryUnlocker, setTheoryUnlocker] = useState(); + const [TheoryUnlockerGen1, setTheoryUnlockerGen1] = useState(); + const [GameContract, setGameContract] = useState(); + const [isReady, setIsReady] = useState(contextDefaultValues.isReady); + + useEffect(() => { + initializeWeb3(); + }, []); + + + const getTheoryUnlockers = useCallback(async () => { + setIsReady(false); + const web3Modal = new Web3Modal(); + const connection = await web3Modal.connect(); + const provider = new ethers.providers.Web3Provider(connection); + const signer = provider.getSigner(); + + const TheoryUnlockerAddress = await tombFinance?.getTheoryUnlockerAddress(); + const TheoryUnlockerABI = await tombFinance?.getTheoryUnlockerABI(); + const TheoryUnlocker = new ethers.Contract(TheoryUnlockerAddress, TheoryUnlockerABI, signer); + setTheoryUnlocker(TheoryUnlocker); + + const TheoryUnlockerGen1Address = await tombFinance?.getTheoryUnlockerGen1Address(); + const TheoryUnlockerGen1ABI = await tombFinance?.getTheoryUnlockerGen1ABI(); + const TheoryUnlockerGen1 = new ethers.Contract(TheoryUnlockerGen1Address, TheoryUnlockerGen1ABI, signer); + setTheoryUnlockerGen1(TheoryUnlockerGen1); + + const MarketplaceAddress = await tombFinance?.getMarketplaceAddress(); + const MarketplaceABI = await tombFinance?.getMarketplaceABI(); + const MarketplaceContract = new ethers.Contract(MarketplaceAddress, MarketplaceABI, signer); + setMarketplaceContract(MarketplaceContract); + + + const GameContractAddress = await tombFinance?.getGameContractAddress(); + const GameContractABI = await tombFinance?.getGameContractABI(); + const GameContract = new ethers.Contract(GameContractAddress, GameContractABI, signer); + setGameContract(GameContract); + + setIsReady(true); + }, [tombFinance]); + + useEffect(() => { + getTheoryUnlockers().catch((err) => console.error(`Failed to fetch Theory Unlockers: ${err.stack}`)); + }, [tombFinance, getTheoryUnlockers, setTheoryUnlocker, setTheoryUnlockerGen1, setMarketplaceContract, setGameContract]); + + + async function initializeWeb3WithoutSigner() { + const provider = new ethers.providers.JsonRpcProvider(); + setHasWeb3(false); + }; + + async function initializeWeb3() { + try { + if (!window.ethereum) { + await initializeWeb3WithoutSigner() + return + } + + let onAccountsChangedCooldown = false + const web3Modal = new Web3Modal() + const connection = await web3Modal.connect() + setHasWeb3(true) + const provider = new ethers.providers.Web3Provider(connection, 'any') + await getAndSetWeb3ContextWithSigner(provider) + + function onAccountsChanged(accounts) { + if (onAccountsChangedCooldown) return + onAccountsChangedCooldown = true + setTimeout(() => { onAccountsChangedCooldown = false }, 1000) + const changedAddress = ethers.utils.getAddress(accounts[0]) + setAccount(changedAddress) + } + + connection.on('accountsChanged', onAccountsChanged) + connection.on('chainChanged', initializeWeb3) + } catch (error) { + initializeWeb3WithoutSigner() + console.log(error) + } + }; + + async function getAndSetWeb3ContextWithSigner(provider) { + const signer = provider.getSigner() + const signerAddress = await signer.getAddress() + setAccount(signerAddress) + } + + return ( ++ ++ +Gen 0 +Gen 1 ++ {activeTab ==="tab1" ? +: } + + {children} + + ); +}; diff --git a/src/views/NftMarketplace/utils/createEmotionCache.js b/src/views/NftMarketplace/utils/createEmotionCache.js new file mode 100755 index 0000000..a50e840 --- /dev/null +++ b/src/views/NftMarketplace/utils/createEmotionCache.js @@ -0,0 +1,7 @@ +import createCache from '@emotion/cache' + +// prepend: true moves MUI styles to the top of the so they're loaded first. +// It allows developers to easily override MUI styles with other styling solutions, like CSS modules. +export default function createEmotionCache () { + return createCache({ key: 'css', prepend: true }) +} diff --git a/src/views/NftMarketplace/utils/format.js b/src/views/NftMarketplace/utils/format.js new file mode 100755 index 0000000..5047b49 --- /dev/null +++ b/src/views/NftMarketplace/utils/format.js @@ -0,0 +1,4 @@ +export function shortenAddress (address) { + if (!address) return '' + return address.slice(0, 8); +}; diff --git a/src/views/NftMarketplace/utils/nft.js b/src/views/NftMarketplace/utils/nft.js new file mode 100755 index 0000000..549ea0e --- /dev/null +++ b/src/views/NftMarketplace/utils/nft.js @@ -0,0 +1,108 @@ +import axios from 'axios' +import { ethers } from 'ethers' + +export async function getTokenMetadataByTokenId (TheoryUnlocker, tokenId) { + try { + const tokenUri = (await TheoryUnlocker.tokenURI(tokenId)).replace("ipfs://", "https://") + ".ipfs.nftstorage.link"; + const metadata = (await axios(tokenUri)).data; + await new Promise(r => setTimeout(r, 1000)); + metadata.animation_url = metadata.animation_url.replace("ipfs://", "https://") + ".ipfs.nftstorage.link"; + metadata.level = (await TheoryUnlocker.tokenInfo(tokenId)).level; + return metadata + } catch (error) { + console.log(error) + } +} + +export function mapAvailableMarketItems (TheoryUnlocker) { + return async (marketItem) => { + const metadata = await getTokenMetadataByTokenId(TheoryUnlocker, marketItem.tokenId) + return mapMarketItem(marketItem, metadata) + } +} + +export function mapOwnedTokenIdsAsMarketItems (marketplaceContract, TheoryUnlocker, account) { + return async (tokenId) => { + const metadata = await getTokenMetadataByTokenId(TheoryUnlocker, tokenId) + const approveAddress = await TheoryUnlocker.getApproved(tokenId) + const hasMarketApproval = approveAddress === marketplaceContract.address + const [foundMarketItem, hasFound] = await marketplaceContract.getLatestMarketItemByTokenId(tokenId) + const marketItem = hasFound ? foundMarketItem : {} + return mapMarketItem(marketItem, metadata, tokenId, account, hasMarketApproval) + } +} + +export function mapMarketItem (marketItem, metadata, tokenId, account, hasMarketApproval) { + return { + price: marketItem.price ? ethers.utils.formatUnits(marketItem.price, 'ether') : undefined, + tokenId: marketItem.tokenId || tokenId, + marketItemId: marketItem.marketItemId || undefined, + seller: marketItem.seller || undefined, + owner: marketItem.owner || account, + sold: marketItem.sold || false, + canceled: marketItem.canceled || false, + animation_url: metadata.animation_url, + level: metadata.level, + attributes: metadata.attributes, + genNumber: marketItem.genNumber, + hasMarketApproval: hasMarketApproval || false + }; +}; + +export async function getUniqueOwnedTokenIds (TheoryUnlocker, account) { + let myNftIds = [] + const OwnedTokenBalance = await TheoryUnlocker.balanceOf(account); + const balToNum = OwnedTokenBalance.toNumber() + + for (let i = 0; i < balToNum; i++) { + const tokenId = await TheoryUnlocker.tokenOfOwnerByIndex(account, i); + myNftIds[i] = tokenId; + } + + return [...new Map(myNftIds.map((item) => [item._hex, item])).values()] +} + +// TheoryUnlockerGen1 functions +export async function getTokenMetadataByTokenIdGen1 (TheoryUnlockerGen1, tokenId) { + try { + const tokenUri = (await TheoryUnlockerGen1.tokenURI(tokenId)).replace("ipfs://", "https://") + ".ipfs.nftstorage.link"; + const metadata = (await axios(tokenUri)).data; + await new Promise(r => setTimeout(r, 1000)); + metadata.animation_url = metadata.animation_url.replace("ipfs://", "https://") + ".ipfs.nftstorage.link"; + metadata.level = (await TheoryUnlockerGen1.tokenInfo(tokenId)).level; + return metadata + } catch (error) { + console.log(error) + } +} + +export function mapAvailableMarketItemsGen1 (TheoryUnlockerGen1) { + return async (marketItem) => { + const metadata = await getTokenMetadataByTokenIdGen1(TheoryUnlockerGen1, marketItem.tokenId) + return mapMarketItem(marketItem, metadata) + } +} + +export function mapOwnedTokenIdsAsMarketItemsGen1 (marketplaceContract, TheoryUnlockerGen1, account) { + return async (tokenId) => { + const metadata = await getTokenMetadataByTokenIdGen1(TheoryUnlockerGen1, tokenId) + const approveAddress = await TheoryUnlockerGen1.getApproved(tokenId) + const hasMarketApproval = approveAddress === marketplaceContract.address + const [foundMarketItem, hasFound] = await marketplaceContract.getLatestMarketItemByTokenId(tokenId) + const marketItem = hasFound ? foundMarketItem : {} + return mapMarketItem(marketItem, metadata, tokenId, account, hasMarketApproval) + } +} + +export async function getUniqueOwnedTokenIdsGen1 (TheoryUnlockerGen1, account) { + let myNftIds = [] + const OwnedTokenBalance = await TheoryUnlockerGen1.balanceOf(account); + const balToNum = OwnedTokenBalance.toNumber() + + for (let i = 0; i < balToNum; i++) { + const tokenId = await TheoryUnlockerGen1.tokenOfOwnerByIndex(account, i); + myNftIds[i] = tokenId; + } + + return [...new Map(myNftIds.map((item) => [item._hex, item])).values()] +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index bfa83d1..2e8dc6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8429,6 +8429,11 @@ detect-browser@5.2.0: resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.2.0.tgz#c9cd5afa96a6a19fda0bbe9e9be48a6b6e1e9c97" integrity sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA== +detect-browser@^5.1.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca" + integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w== + detect-indent@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208" @@ -17457,7 +17462,7 @@ react-dev-utils@^11.0.3: strip-ansi "6.0.0" text-table "0.2.0" -react-dom@^16.13.1: +react-dom@^16.13.1, react-dom@^16.8.6: version "16.14.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== @@ -17642,7 +17647,7 @@ react-transition-group@^4.4.2: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^16.13.1: +react@^16.13.1, react@^16.8.6: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== @@ -19391,7 +19396,7 @@ style-loader@1.3.0: loader-utils "^2.0.0" schema-utils "^2.7.0" -styled-components@^5.1.1: +styled-components@^5.1.1, styled-components@^5.3.3: version "5.3.5" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== @@ -20060,7 +20065,7 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -21787,6 +21792,18 @@ web3@^1.2.11: web3-shh "1.7.3" web3-utils "1.7.3" +web3modal@^1.9.7: + version "1.9.7" + resolved "https://registry.yarnpkg.com/web3modal/-/web3modal-1.9.7.tgz#d657b97e53faafae60c55038d046781083645423" + integrity sha512-z3XfY7cV8GwGvHP3WvrSxPU6/7ocwVyiU77U/Lxoa53AUSsOKl01V8ErZ8CkJSH41C3YgzwBaOETj0rC9uFBKg== + dependencies: + detect-browser "^5.1.0" + prop-types "^15.7.2" + react "^16.8.6" + react-dom "^16.8.6" + styled-components "^5.3.3" + tslib "^1.10.0" + webidl-conversions@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"