diff --git a/package-lock.json b/package-lock.json index c2e98552..f349772b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4773,6 +4773,16 @@ "@types/react": "^16" } }, + "@types/react-lazy-load-image-component": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.2.tgz", + "integrity": "sha512-4NLJsMJVrMv18FuMIkUUBVj/PH9A+BvLKrZC75EWiEFn1IsMrZHgL1tVKw5QBfoa0Qjz6SkWIzEvwcyZ8PgnIg==", + "dev": true, + "requires": { + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@types/react-redux": { "version": "7.1.23", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", diff --git a/package.json b/package.json index b304154b..d5e00d7f 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ ] }, "devDependencies": { - "@types/gtag.js": "0.0.10" + "@types/gtag.js": "0.0.10", + "@types/react-lazy-load-image-component": "^1.5.2" } } diff --git a/src/hooks/useNFT.ts b/src/hooks/useNFT.ts index c45a64ae..1d1bf04f 100644 --- a/src/hooks/useNFT.ts +++ b/src/hooks/useNFT.ts @@ -1,6 +1,6 @@ import {useEffect} from "react"; import {RigelNFT, RigelNFTTwo} from "../utils/Contracts"; -import { SMARTSWAPNFTSALES, SMARTSWAPNFTTWO} from "../utils/addresses"; +import { IPFS, SMARTSWAPNFTSALES, SMARTSWAPNFTTWO} from "../utils/addresses"; import {useActiveWeb3React} from "../utils/hooks/useActiveWeb3React"; import {getERC20Token, useProvider} from "../utils/utilsFunctions"; import {useSelector} from "react-redux"; @@ -25,7 +25,10 @@ export const useNft = (id: number) => { const [prices, setPrices] = useState({firstTokenPrice: '', secondTokenPrice: ''}); const [unsoldItems, setUnsoldItems] = useState(0); const [nftId, setNftId, nftIdRef] = useState([]); + const [nftClass, setNftClass, nftClassRef] = useState(); const [loadData, setLoadData] = useState(false); + const [mint, setMint] = useState(false); + const [nftNameInfo,setID] = useState(0); const trxState = useSelector((state) => state.application.modal?.trxState); @@ -38,68 +41,66 @@ export const useNft = (id: number) => { useEffect(() => { + setLoadData(true); if (chainId === SupportedChainId.POLYGONTEST || chainId === Number(SupportedChainId.POLYGON)) { const nftArray = getNftTokenPolygon(id); + setNftClass(id); setNftId(nftArray); } else if (chainId === SupportedChainId.BINANCETEST || chainId === Number(SupportedChainId.BINANCE)) { const nftArray = getNftToken(id); - setNftId(nftArray); + setNftId(nftArray) + setNftClass(id); } const fetchNftData = async () => { if (chainId !== undefined) { - try { + // try { const nftContract = await RigelNFT(validSmartAddress, library); + const purchaseData = await nftContract.nftsPurchaseData(nftClassRef.current); + const checkMint = await nftContract.checkStatus() - const purchaseData = await nftContract.nftPurchaseData(nftIdRef.current[0]); - - const tokenOne = await getERC20Token(purchaseData.token1, library); + const tokenA = await nftContract.tokenA(); + const tokenB = await nftContract.tokenB(); + setMint(checkMint) + const tokenOne = await getERC20Token(tokenA, library); const [tokenOneSymbol, tokenOneBalance, tokenOneDecimals] = await Promise.all( [tokenOne.symbol(), tokenOne.balanceOf(account), tokenOne.decimals()]); - setFirstToken({symbol: tokenOneSymbol, balance: parseFloat(ethers.utils.formatUnits(tokenOneBalance, tokenOneDecimals)).toFixed(4), - address: purchaseData.token1}); + address: tokenA}); - const tokenTwo = await getERC20Token(purchaseData.token2, library); + const tokenTwo = await getERC20Token(tokenB, library); const [tokenTwoSymbol, tokenTwoBalance, tokenTwoDecimals] = await Promise.all( [tokenTwo.symbol(), tokenTwo.balanceOf(account), tokenTwo.decimals()]); + setID(purchaseData.nextAvailableID.toString()) setSecondToken({symbol: tokenTwoSymbol, balance: parseFloat(ethers.utils.formatUnits(tokenTwoBalance, tokenTwoDecimals)).toFixed(4), - address: purchaseData.token2}); - - setPrices({firstTokenPrice: formatAmount(purchaseData.token1Price, tokenOneDecimals), - secondTokenPrice: formatAmount(purchaseData.token2Price, tokenTwoDecimals)}); - - const allID = nftIdRef.current; - - for (let i = allID[0]; i <= allID.slice(-1)[0]; i++) { - const views = await nftContract.sold(i); - if (!views) { - setUnsoldItems(i); - break; - } - } + address: tokenB}); + setPrices({firstTokenPrice: formatAmount(purchaseData.tokenPrice, tokenOneDecimals), + secondTokenPrice: formatAmount(purchaseData.tokenPrice, tokenTwoDecimals)}); + + const views = await nftContract.getAllNFTsSoldFromClass(id); + if (views) { + setUnsoldItems(views.all.toString()); + // break; + } setLoadData(false); - } catch (e) { - console.log(e.message); - setLoadData(false); - } } }; fetchNftData(); }, [account, chainId, stateChanged]); - - return {firstToken, secondToken, prices, unsoldItems, nftId, loadData} + + return {firstToken, secondToken, prices, unsoldItems, nftId, loadData,mint,nftNameInfo} }; export const useNFTAllowance = ( checkTokenApproval: number, - token1Price: string, - token2Price: string, + tokenPrice: string, currency: string, - id: number + id: number, + tokenA:string, + tokenB:string ) => { const { account, chainId, library } = useActiveWeb3React(); const [hasTokenABeenApproved, setHasTokenABeenApproved] = useState(false); @@ -108,28 +109,24 @@ export const useNFTAllowance = ( useEffect( () => { const getAllowance = async () => { - if (account) { + if (account && tokenPrice) { + // try { setLoadInfo(true); - const nftContract = await RigelNFT(SMARTSWAPNFTSALES[chainId as number], library); - const nftToken = await nftContract.nftPurchaseData(id); - - if (nftToken.token1 && nftToken.token2) { - const [tokenA, tokenB] = await Promise.all([ - getERC20Token(nftToken.token1 as string, library), - getERC20Token(nftToken.token2 as string, library), + + if (tokenA && tokenB) { + const [tokenAData, tokenBData] = await Promise.all([ + getERC20Token(tokenA as string, library), + getERC20Token(tokenB as string, library), ]); - const [allowanceA, allowanceB, decimalsA, decimalsB] = await Promise.all([ - tokenA.allowance(account, SMARTSWAPNFTSALES[chainId as number]), - tokenB.allowance(account, SMARTSWAPNFTSALES[chainId as number]), - tokenA.decimals(), - tokenB.decimals() + tokenAData.allowance(account, SMARTSWAPNFTSALES[chainId as number]), + tokenBData.allowance(account, SMARTSWAPNFTSALES[chainId as number]), + tokenAData.decimals(), + tokenBData.decimals() ]); - - const isTokenAApproved = allowanceA.toString() > parseFloat(ethers.utils.parseUnits(token1Price, decimalsA).toString()); - const isTokenBApproved = allowanceB.toString() > parseFloat(ethers.utils.parseUnits(token2Price, decimalsB).toString()); - + const isTokenAApproved = allowanceA.toString() > parseFloat(ethers.utils.parseUnits(tokenPrice, decimalsA).toString()); + const isTokenBApproved = allowanceB.toString() > parseFloat(ethers.utils.parseUnits(tokenPrice, decimalsB).toString()); setHasTokenABeenApproved(isTokenAApproved); setHasTokenBBeenApproved(isTokenBApproved); setLoadInfo(false); @@ -140,13 +137,13 @@ export const useNFTAllowance = ( } }; getAllowance(); - }, [checkTokenApproval, currency, id, account]); + }, [checkTokenApproval, currency, id, account,tokenPrice]); return { hasTokenABeenApproved, hasTokenBBeenApproved, loadInfo }; }; -export const useNftName = (id: number) => { +export const useNftName = (id: number,nftID:number) => { const { chainId, library } = useActiveWeb3React(); const [name, setName] = useState(''); const [nftImage, setNftImage] = useState(''); @@ -158,48 +155,40 @@ export const useNftName = (id: number) => { const lib = library ? library : prov; let validSmartAddress: string; - if (SMARTSWAPNFTTWO[ChainId as number] !== "0x") { - validSmartAddress = SMARTSWAPNFTTWO[ChainId as number]; + if (SMARTSWAPNFTSALES[ChainId as number] !== "0x") { + validSmartAddress = SMARTSWAPNFTSALES[ChainId as number]; } + useEffect(() => { setLoading(true); const fetchDetails = async () => { - - if (ChainId === SupportedChainId.POLYGONTEST || ChainId === Number(SupportedChainId.POLYGON)) { - const nftArray = getNftTokenPolygon(id); + let nftArray + if (chainId === SupportedChainId.POLYGONTEST || chainId === Number(SupportedChainId.POLYGON)) { + nftArray = getNftTokenPolygon(id); setNftId(nftArray); - } else if (ChainId === SupportedChainId.BINANCETEST || ChainId === Number(SupportedChainId.BINANCE)) { - const nftArray = getNftToken(id); + + } else if (chainId === SupportedChainId.BINANCETEST || chainId === Number(SupportedChainId.BINANCE)) { + nftArray = getNftToken(id); setNftId(nftArray); } - try { - const nftContract = await RigelNFTTwo(validSmartAddress, lib); - - const nftDetails = await nftContract.uri(nftIdRef.current[0]); - const newArray = nftDetails.split('/'); - - let url; - - if (ChainId === SupportedChainId.BINANCETEST) { - url = `https://ipfs.io/ipfs/${newArray[2]}/${nftIdRef.current[0]}.json`; - } else { - url = `https://ipfs.io/ipfs/${newArray[2]}/RigelJson/${nftIdRef.current[0]}.json`; - } + const chain = chainId ?? ChainId as number + let url=`https://ipfs.io/ipfs/${IPFS[chain]}/${nftArray[0]}.json` const data = await fetch(url); const jsonData = await data.json(); - const nftName = jsonData.name; - setName(nftName); + const totalName = nftName.split("#")[0] + `#${nftID}`; + setName(totalName); const imageArr = jsonData.image.split('/'); let imageUrl; if (ChainId === SupportedChainId.BINANCETEST) { - imageUrl = `https://ipfs.io/ipfs/${imageArr[2]}/${nftIdRef.current[0]}.png`; + imageUrl = `https://ipfs.io/ipfs/${imageArr[2]}`; + // imageUrl = `https://ipfs.io/ipfs/Qmc52oSqkRbJi5w7et2JJaKzAMgkYFuveb7opiLxbDXnsr` } else { - imageUrl = `https://ipfs.io/ipfs/${imageArr[2]}/Rigel/${nftIdRef.current[0]}.png`; + imageUrl = `https://ipfs.io/ipfs/${imageArr[2]}`; } setNftImage(imageUrl); setLoading(false); @@ -211,7 +200,7 @@ export const useNftName = (id: number) => { }; fetchDetails(); - }, [ChainId, library]); + }, [ChainId, library,id,nftID]); return {name, nftImage, loading} diff --git a/src/pages/Nft/Components/FeaturedNft.tsx/index.tsx b/src/pages/Nft/Components/FeaturedNft.tsx/index.tsx index 0ec54ec1..086c7523 100644 --- a/src/pages/Nft/Components/FeaturedNft.tsx/index.tsx +++ b/src/pages/Nft/Components/FeaturedNft.tsx/index.tsx @@ -26,9 +26,9 @@ export const FeaturedNft = function ({ id }: {id: number}) { const { chainId, account } = useActiveWeb3React(); const [isMobileDevice] = useMediaQuery("(max-width: 750px)"); - const { firstToken, secondToken ,prices, unsoldItems , nftId, loadData} = useNft(id); + const { firstToken, secondToken ,prices, unsoldItems , nftId, loadData,mint,nftNameInfo} = useNft(id); - const {name, nftImage, loading} = useNftName(id); + const {name, nftImage, loading} = useNftName(id,nftNameInfo); const rgpPrice = (100.54 * parseFloat(prices.firstTokenPrice)).toFixed(2); @@ -122,7 +122,7 @@ export const FeaturedNft = function ({ id }: {id: number}) { - setOpenPerchaseModal(false)} id={1} image={nftImage} name={name} /> + setOpenPerchaseModal(false)} id={1} image={nftImage} name={name} mint ={mint} /> diff --git a/src/pages/Nft/Components/Nft/index.tsx b/src/pages/Nft/Components/Nft/index.tsx index b7e6085d..4c9c7c6f 100644 --- a/src/pages/Nft/Components/Nft/index.tsx +++ b/src/pages/Nft/Components/Nft/index.tsx @@ -26,10 +26,10 @@ export const Nft = function ({ nftName, image, number, id, priceUSD, priceRGP, i const [ purchaseModal,setOpenPerchaseModal] = useState(false); const [isMobileDevice] = useMediaQuery("(max-width: 767px)"); - const { firstToken, secondToken ,prices, unsoldItems , nftId, loadData} = useNft(id); + const { firstToken, secondToken ,prices, unsoldItems , nftId, loadData,mint,nftNameInfo} = useNft(id); const { account } = useActiveWeb3React(); - const {name, nftImage, loading} = useNftName(id); + const {name, nftImage, loading} = useNftName(id,nftNameInfo); const rgpPrice = (100.54 * parseFloat(prices.firstTokenPrice)).toFixed(2); @@ -84,7 +84,7 @@ export const Nft = function ({ nftName, image, number, id, priceUSD, priceRGP, i Sold: {loadData ? : - {unsoldItems - nftId[0]} of {nftId.length} } + {unsoldItems} of {nftId.length} } @@ -137,6 +137,7 @@ export const Nft = function ({ nftName, image, number, id, priceUSD, priceRGP, i id={id} image={nftImage} name={name} + mint={mint} /> ) diff --git a/src/pages/Nft/Modals/ComfirmPurchase.tsx b/src/pages/Nft/Modals/ComfirmPurchase.tsx index ad4103f3..790babec 100644 --- a/src/pages/Nft/Modals/ComfirmPurchase.tsx +++ b/src/pages/Nft/Modals/ComfirmPurchase.tsx @@ -15,6 +15,13 @@ import {useActiveWeb3React} from "../../../utils/hooks/useActiveWeb3React"; import {useDispatch} from "react-redux"; import {RigelNFT} from "../../../utils/Contracts"; import { GNFTFailedApprovalTransaction, GNFTFailedTransaction, GNFTSuccessfullyApprovalTransaction, GNFTSuccessfullyTransaction } from '../../../components/G-analytics/gNFTs'; +import { Web3Provider } from '@ethersproject/providers'; +import { createAlchemyWeb3 } from '@alch/alchemy-web3'; +import { Percent } from '@uniswap/sdk-core'; +import JSBI from 'jsbi'; +import { ethers } from 'ethers'; +import { useUserGasPricePercentage } from '../../../state/gas/hooks'; +import { calculateGas } from '../../Swap/components/sendToken'; type comfirmPurchaseModalProps = { @@ -22,11 +29,12 @@ type comfirmPurchaseModalProps = { close: () => void, id: number, image: string, - name: string + name: string, + mint?:boolean } const ComfirmPurchase = ({ isOpen, - close, id, image, name }: + close, id, image, name, mint }: comfirmPurchaseModalProps) => { const { chainId, library, account } = useActiveWeb3React(); const textColor = useColorModeValue("#333333", "#F1F5F8"); @@ -34,15 +42,12 @@ const ComfirmPurchase = ({ isOpen, const [currency, setCurrency] = useState(''); const [checkTokenApproval, setCheckTokenApproval] = useState(0); const dispatch = useDispatch(); - const {firstToken, secondToken, prices, unsoldItems, nftId} = useNft(id); - - - const {hasTokenABeenApproved, hasTokenBBeenApproved, loadInfo} = useNFTAllowance(checkTokenApproval, prices.firstTokenPrice, - prices.secondTokenPrice, currency, nftId[0]); + const {hasTokenABeenApproved, hasTokenBBeenApproved, loadInfo} = useNFTAllowance(checkTokenApproval, prices.firstTokenPrice, currency, nftId[0],firstToken.address,secondToken.address); const [error, setError] = useState(''); + useEffect(() => { if (currency === firstToken.symbol && parseFloat(firstToken.balance) < parseFloat(prices.firstTokenPrice)) { setError(`Insufficient ${firstToken.symbol}`) @@ -54,6 +59,9 @@ const ComfirmPurchase = ({ isOpen, }, [currency]); + + + const approveTokens = async (address: string, symbol: string) => { if (account) { const token = await getERC20Token(address, library); @@ -100,7 +108,7 @@ const ComfirmPurchase = ({ isOpen, }) ); } - } catch (err) { + } catch (err:any) { console.log(err); GNFTFailedApprovalTransaction( "NFT", @@ -126,9 +134,18 @@ const ComfirmPurchase = ({ isOpen, trxState: TrxState.WaitingForConfirmation, }) ); - const nftContract = await RigelNFT(SMARTSWAPNFTSALES[chainId as number], library); + console.log({firstToken,secondToken}) - const data = await nftContract.buy(unsoldItems, currency === 'USDT' ? secondToken.address : firstToken.address); + const isEIP1559 = await library?.getFeeData(); + // const { format1, format2, format3 } = await calculateGas( + // useUserGasPricePercentage, + // library, + // chainId as number + // ); + const nftContract = await RigelNFT(SMARTSWAPNFTSALES[chainId as number], library); + // const data = await nftContract._mintBatch(account,["1"],["1"], "0x0000000000000000000000000000000000000000000000000000000000000000") + console.log({firstToken,secondToken}) + const data = await nftContract.mint(id, currency === 'USDT' ? secondToken.address : firstToken.address) const { confirmations } = await data.wait(3); const { hash } = data; @@ -155,7 +172,7 @@ const ComfirmPurchase = ({ isOpen, dispatch( addToast({ - message: `Successfully Purchased RIGEL GIFT CARD ${unsoldItems} NFT`, + message: `Successfully Purchased RIGEL GIFT CARD ${id} NFT`, URL: explorerLink, }) ); @@ -163,7 +180,7 @@ const ComfirmPurchase = ({ isOpen, } - } catch (e) { + } catch (e:any) { console.log(e); GNFTFailedTransaction( "NFT", @@ -208,7 +225,7 @@ const ComfirmPurchase = ({ isOpen, logo {name} - NFT ID: {unsoldItems} + NFT ID: {id} Created by: RigelProtocol @@ -256,7 +273,10 @@ const ComfirmPurchase = ({ isOpen, ≈ - {error ?