diff --git a/.env.development b/.env.development index 51a14a0..003f967 100644 --- a/.env.development +++ b/.env.development @@ -2,7 +2,7 @@ NEXT_PUBLIC_CENNZ_API_ENDPOINT=wss://nikau.centrality.me/public/ws NEXT_PUBLIC_NFT_STORAGE_API_KEY= NEXT_PUBLIC_PINATA_PIN_ENDPOINT=https://api.pinata.cloud NEXT_PUBLIC_PINATA_JWT= -NEXT_PUBLIC_SUPPORTED_ASSETS=16000,16001 +NEXT_PUBLIC_SUPPORTED_ASSETS=16000,16001,17001,17002,17004 NEXT_PUBLIC_IMAGE_CDN=https://ik.imagekit.io/i4ryln6htzn NEXT_PUBLIC_PINATA_GATEWAY=https://litho.mypinata.cloud NEXT_FEATURED_COLLECTION_ID=226 diff --git a/components/SupportedAssetsProvider.tsx b/components/SupportedAssetsProvider.tsx index e17551a..17e11b5 100644 --- a/components/SupportedAssetsProvider.tsx +++ b/components/SupportedAssetsProvider.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import Web3Context from "./Web3Context"; import SupportedAssetsContext from "./SupportedAssetsContext"; import { u8aToString } from "@polkadot/util"; +import { tokenLogoURLs } from "../utils/assetHelpers"; const SupportedAssetIds = process.env.NEXT_PUBLIC_SUPPORTED_ASSETS && @@ -11,6 +12,7 @@ export type SupportedAssetInfo = { id: number; symbol: string; decimals: number; + logoURL: string; }; const SupportedAssetsProvider = ({ children }) => { @@ -38,6 +40,7 @@ const SupportedAssetsProvider = ({ children }) => { id: Number(tokenId), symbol: u8aToString(symbol), decimals: decimalPlaces.toNumber(), + logoURL: tokenLogoURLs[u8aToString(symbol)], }; }); } else { @@ -47,6 +50,7 @@ const SupportedAssetsProvider = ({ children }) => { id: tokenId.toString(), symbol: u8aToString(symbol), decimals: decimalPlaces.toNumber(), + logoURL: tokenLogoURLs[symbol], }; }); } diff --git a/components/Web3.tsx b/components/Web3.tsx index b24f497..b804090 100644 --- a/components/Web3.tsx +++ b/components/Web3.tsx @@ -73,7 +73,6 @@ const Web3: React.FC> = ({ children }) => { React.useState(false); const [isRefresh, setIsRefresh] = React.useState(false); const [api, setAPI] = React.useState(null); - const [cennzUSDPrice, setCennzUSDPrice] = React.useState(null); const getAccountAssets = async (address: string) => { await api.isReady; @@ -81,10 +80,11 @@ const Web3: React.FC> = ({ children }) => { const tokenMap = {}; assets.forEach((asset) => { const [tokenId, { symbol, decimalPlaces }] = asset; - tokenMap[tokenId] = { - symbol: hexToString(symbol.toJSON()), - decimalPlaces: decimalPlaces.toNumber(), - }; + if (hexToString(symbol.toJSON()) !== "") + tokenMap[tokenId] = { + symbol: hexToString(symbol.toJSON()), + decimalPlaces: decimalPlaces.toNumber(), + }; }); const balanceSubscriptionArg = Object.keys(tokenMap).map( (tokenId, index) => { @@ -98,11 +98,13 @@ const Web3: React.FC> = ({ children }) => { const userBalances = {}; Object.keys(tokenMap).forEach((tokenId) => { const token = tokenMap[tokenId]; - userBalances[token.symbol] = { - balance: balances[token.index] / Math.pow(10, token.decimalPlaces), - tokenId, - decimalPlaces: token.decimalPlaces, - }; + if (balances[token.index] / Math.pow(10, token.decimalPlaces) > 0) + userBalances[token.symbol] = { + balance: + balances[token.index] / Math.pow(10, token.decimalPlaces), + tokenId, + decimalPlaces: token.decimalPlaces, + }; }); setBalances(userBalances); @@ -234,19 +236,6 @@ const Web3: React.FC> = ({ children }) => { useEffect(() => { if (!wallet) { setWallet(store.get("CENNZNET-EXTENSION")); - if (cennzUSDPrice === null) { - try { - const coinGeckoUrl = - "https://api.coingecko.com/api/v3/simple/price?ids=centrality&vs_currencies=usd"; - axios.get(coinGeckoUrl).then(function (response) { - const { data } = response; - const price = data.centrality.usd; - setCennzUSDPrice(price); - }); - } catch (e) { - console.log("Error setting conversion rate"); - } - } } }); @@ -262,7 +251,6 @@ const Web3: React.FC> = ({ children }) => { accounts, selectedAccount, api, - cennzUSDPrice, }} > {children} diff --git a/components/Web3Context.tsx b/components/Web3Context.tsx index 5d330d5..9dc5eee 100644 --- a/components/Web3Context.tsx +++ b/components/Web3Context.tsx @@ -11,7 +11,6 @@ const Web3Context = React.createContext({ signer: null, accounts: null, api: null, - cennzUSDPrice: null, }); export default Web3Context; diff --git a/components/sell/FixedPrice.tsx b/components/sell/FixedPrice.tsx index 0f70e98..d41967d 100644 --- a/components/sell/FixedPrice.tsx +++ b/components/sell/FixedPrice.tsx @@ -1,6 +1,5 @@ import React, { useCallback, useMemo } from "react"; import Link from "next/link"; - import Text from "../Text"; import Web3Context from "../Web3Context"; import Image from "next/image"; @@ -12,6 +11,7 @@ import { isValidAddressPolkadotAddress } from "../../utils/chainHelper"; import dayjs from "dayjs"; import { BLOCK_TIME } from "../../pages/sell"; import TxStatusModal from "./TxStatusModal"; +import { coinGeckoIds, convertToUSD } from "../../utils/assetHelpers"; const sell = async ( api, @@ -78,23 +78,18 @@ const FixedPrice: React.FC = ({ }, [supportedAssets]); React.useEffect(() => { - const price = web3Context.cennzUSDPrice; - if ( - fixedPrice !== "-1" && - price && - paymentAsset && - paymentAsset.symbol === "CENNZ" - ) { - const conversionRateCal = Number(fixedPrice) * price; - let conversionRate = "-1"; - if (!isNaN(conversionRateCal)) { - conversionRate = conversionRateCal.toFixed(2); + if (fixedPrice !== "-1" && paymentAsset) { + const coinGeckoId = coinGeckoIds[paymentAsset.symbol]; + if (coinGeckoId) { + (async () => { + let converted = await convertToUSD(coinGeckoId, fixedPrice); + setConvertedRate(converted); + })(); + } else { + setConvertedRate("-1"); } - setConvertedRate(conversionRate); - } else if (paymentAsset && paymentAsset.symbol !== "CENNZ") { - setConvertedRate("-1"); } - }, [fixedPrice, paymentAsset, web3Context.cennzUSDPrice]); + }, [fixedPrice, paymentAsset]); const tokenId = useMemo(() => { if (web3Context.api) { @@ -123,6 +118,7 @@ const FixedPrice: React.FC = ({ } const priceInUnit = +price.value * 10 ** paymentAsset.decimals; + if (priceInUnit <= 0) { setError("Please provide a proper price"); return; @@ -159,7 +155,7 @@ const FixedPrice: React.FC = ({ tokenId, buyerAddress, paymentAsset.id, - priceInUnit, + String(priceInUnit), duration ); setTxMessage("New listing created"); diff --git a/components/sell/Select.tsx b/components/sell/Select.tsx index 25b3166..d6ab87e 100644 --- a/components/sell/Select.tsx +++ b/components/sell/Select.tsx @@ -50,6 +50,13 @@ const TokenSelect: React.FC = ({ }} key={token.symbol} > +
+ CENNZ balance +
{token.symbol} diff --git a/components/sell/TimedAuction.tsx b/components/sell/TimedAuction.tsx index 2be0703..1bcb80f 100644 --- a/components/sell/TimedAuction.tsx +++ b/components/sell/TimedAuction.tsx @@ -11,6 +11,7 @@ import { SupportedAssetInfo } from "../SupportedAssetsProvider"; import dayjs from "dayjs"; import { BLOCK_TIME } from "../../pages/sell"; import TxStatusModal from "./TxStatusModal"; +import { coinGeckoIds, convertToUSD } from "../../utils/assetHelpers"; const openAuction = async ( api, @@ -75,23 +76,18 @@ const TimedAuction: React.FC = ({ }, [supportedAssets]); React.useEffect(() => { - const price = web3Context.cennzUSDPrice; - if ( - reservedPrice !== "-1" && - price && - paymentAsset && - paymentAsset.symbol === "CENNZ" - ) { - const conversionRateCal = Number(reservedPrice) * price; - let conversionRate = "-1"; - if (!isNaN(conversionRateCal)) { - conversionRate = conversionRateCal.toFixed(2); + if (reservedPrice !== "-1" && paymentAsset) { + const coinGeckoId = coinGeckoIds[paymentAsset.symbol]; + if (coinGeckoId) { + (async () => { + let converted = await convertToUSD(coinGeckoId, reservedPrice); + setConvertedRate(converted); + })(); + } else { + setConvertedRate("-1"); } - setConvertedRate(conversionRate); - } else if (paymentAsset && paymentAsset.symbol !== "CENNZ") { - setConvertedRate("-1"); } - }, [reservedPrice, paymentAsset, web3Context.cennzUSDPrice]); + }, [reservedPrice, paymentAsset]); const tokenId = useMemo(() => { if (web3Context.api) { @@ -147,7 +143,7 @@ const TimedAuction: React.FC = ({ web3Context.signer, tokenId, paymentAsset.id, - priceInUnit, + String(priceInUnit), duration ); setModalState("success"); diff --git a/components/wallet/ConnectedWalletModal.tsx b/components/wallet/ConnectedWalletModal.tsx index 28d4ad2..c904875 100644 --- a/components/wallet/ConnectedWalletModal.tsx +++ b/components/wallet/ConnectedWalletModal.tsx @@ -5,6 +5,7 @@ import Modal from "../Modal"; import Text from "../Text"; import Web3Context from "../Web3Context"; import copyTextToClipboard from "../../utils/copyTextToClipboard"; +import { tokenLogoURLs } from "../../utils/assetHelpers"; interface Props { closeModal: () => void; @@ -21,13 +22,6 @@ const ConnectedWalletModal: React.FC = ({ 8 )}...${web3Context.selectedAccount.substr(-8)}`; - // web3Context.accounts - const tokenLogoURLs = { - CENNZ: "/cennznet-logo.svg", - CPAY: "/cpay-logo.svg", - cUSD: "/cusd-logo.svg", - }; - return ( { const buyExtrinsic = await api.tx.nft.buy(listingId); @@ -362,24 +362,26 @@ const NFTDetail: React.FC<{}> = () => { if ( paymentAsset && paymentAsset.symbol && - paymentAsset.symbol === "CENNZ" && - listingInfo + listingInfo && + conversionRate === -1 ) { - const price = web3Context.cennzUSDPrice; - if (conversionRate === -1) { - try { - let conversionRateCal = - (listingInfo.valueForConversion / 10 ** paymentAsset.decimals) * - price; - conversionRateCal = Number(conversionRateCal.toFixed(2)); - setConversionRate(conversionRateCal); - } catch (e) { - console.log("Error setting conversion rate"); - } + try { + const coinGeckoId = coinGeckoIds[paymentAsset.symbol]; + (async () => { + let converted; + if (reservePrice === 0) { + converted = await convertToUSD(coinGeckoId, fixedPrice); + } else if (fixedPrice === 0) { + converted = await convertToUSD(coinGeckoId, reservePrice); + } + setConversionRate(+converted); + })(); + } catch (e) { + console.log("Error setting conversion rate"); } } //return undefined; - }, [listingInfo, paymentAsset, web3Context.cennzUSDPrice]); + }, [listingInfo, paymentAsset]); const endTime = useMemo(() => { if (listingInfo && web3Context.api) { @@ -452,7 +454,7 @@ const NFTDetail: React.FC<{}> = () => { web3Context.selectedAccount, web3Context.signer, listingInfo.listingId, - priceInUnit + String(priceInUnit) ); setTxMessage("Bid placed"); setModalState("success"); diff --git a/public/cusd-logo.svg b/public/cusd-logo.svg deleted file mode 100644 index d095888..0000000 --- a/public/cusd-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/dai-logo.svg b/public/dai-logo.svg new file mode 100644 index 0000000..2ae2e32 --- /dev/null +++ b/public/dai-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/public/ethereum-logo.svg b/public/ethereum-logo.svg new file mode 100644 index 0000000..45b3820 --- /dev/null +++ b/public/ethereum-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/usdc-logo.svg b/public/usdc-logo.svg new file mode 100644 index 0000000..5dfea92 --- /dev/null +++ b/public/usdc-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/utils/assetHelpers.ts b/utils/assetHelpers.ts new file mode 100644 index 0000000..6df5316 --- /dev/null +++ b/utils/assetHelpers.ts @@ -0,0 +1,32 @@ +import axios from "axios"; + +const tokenLogoURLs = { + CENNZ: "/cennznet-logo.svg", + CPAY: "/cpay-logo.svg", + ETH: "/ethereum-logo.svg", + DAI: "/dai-logo.svg", + USDC: "/usdc-logo.svg", +}; + +const coinGeckoIds = { + CENNZ: "centrality", + ETH: "ethereum", + USDC: "usd-coin", + DAI: "dai", +}; + +function convertToUSD(coinGeckoId, priceToConvert) { + let conversionRate = "-1"; + const coinGeckoUrl = `https://api.coingecko.com/api/v3/simple/price?ids=${coinGeckoId}&vs_currencies=usd`; + return axios.get(coinGeckoUrl).then(function (response) { + const { data } = response; + const price = data[coinGeckoId].usd; + const conversionRateCal = Number(priceToConvert) * price; + if (!isNaN(conversionRateCal)) { + conversionRate = conversionRateCal.toFixed(2); + } + return conversionRate; + }); +} + +export { tokenLogoURLs, coinGeckoIds, convertToUSD };