Add support for ETH/USDC/DAI

.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

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],
             };
           });
         }

components/Web3.tsx

@@ -73,18 +73,18 @@ const Web3: React.FC<React.PropsWithChildren<{}>> = ({ 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;
     const assets = await api.rpc.genericAsset.registeredAssets();
     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<React.PropsWithChildren<{}>> = ({ 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<React.PropsWithChildren<{}>> = ({ 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<React.PropsWithChildren<{}>> = ({ children }) => {
         accounts,
         selectedAccount,
         api,
-        cennzUSDPrice,
       }}
     >
       {children}

components/Web3Context.tsx

@@ -11,7 +11,6 @@ const Web3Context = React.createContext({
   signer: null,
   accounts: null,
   api: null,
-  cennzUSDPrice: null,
 });
 
 export default Web3Context;

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<Props> = ({
   }, [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<Props> = ({
       }
 
       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<Props> = ({
             tokenId,
             buyerAddress,
             paymentAsset.id,
-            priceInUnit,
+            String(priceInUnit),
             duration
           );
           setTxMessage("New listing created");

components/sell/Select.tsx

@@ -50,6 +50,13 @@ const TokenSelect: React.FC<SelectProps> = ({
                   }}
                   key={token.symbol}
                 >
+                  <div className="h-12 w-12 bg-gray-200 mr-4 flex items-center justify-center">
+                    <img
+                      src={token.logoURL || "/cennznet-logo.svg"}
+                      alt="CENNZ balance"
+                      className="h-6 w-6 object-contain"
+                    />
+                  </div>
                   <Text variant="subtitle1" className="group-hover:text-white">
                     {token.symbol}
                   </Text>

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<Props> = ({
   }, [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<Props> = ({
             web3Context.signer,
             tokenId,
             paymentAsset.id,
-            priceInUnit,
+            String(priceInUnit),
             duration
           );
           setModalState("success");

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<Props> = ({
     8
   )}...${web3Context.selectedAccount.substr(-8)}`;
 
-  // web3Context.accounts
-  const tokenLogoURLs = {
-    CENNZ: "/cennznet-logo.svg",
-    CPAY: "/cpay-logo.svg",
-    cUSD: "/cusd-logo.svg",
-  };
-
   return (
     <Modal
       onClose={closeModal}

pages/nft/[collectionId]/[seriesId]/[serialNumber].tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 import Web3Context from "../../../../components/Web3Context";
 import Text from "../../../../components/Text";
 import SupportedAssetsContext from "../../../../components/SupportedAssetsContext";
@@ -13,6 +12,7 @@ import getMetadata from "../../../../utils/getMetadata";
 import NFTRenderer from "../../../../components/nft/NFTRenderer";
 import NFT from "../../../../components/nft";
 import axios from "axios";
+import { coinGeckoIds, convertToUSD } from "../../../../utils/assetHelpers";
 
 const buyWithFixedPrice = async (api, account, signer, listingId) => {
   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");