get live data

packages/web/components/Player/Section/PlayerMeToken.tsx

@@ -26,6 +26,7 @@ import { switchChainOnMetaMask } from 'utils/metamask';
 import {
   approveMeTokens,
   burn,
+  getCollateralData,
   getErc20TokenData,
   getMeTokenFor,
   getMeTokenInfo,
@@ -63,6 +64,11 @@ type SwapProps = {
   provider: any;
 };
 
+type LiveCollateralData = {
+  image: string;
+  currentPrice: string;
+};
+
 const MeTokenSwap: React.FC<SwapProps> = ({
   symbol,
   profilePicture,
@@ -71,6 +77,8 @@ const MeTokenSwap: React.FC<SwapProps> = ({
   owner,
   provider,
 }) => {
+  const [liveCollateralData, setLiveCollateralData] =
+    useState<LiveCollateralData>();
   const [collateralTokenData, setCollateralTokenData] = useState<any>();
   const [meTokenData, setMeTokenData] = useState<any>();
   const [transactionType, toggleTransactionType] = useState<string>('mint');
@@ -81,6 +89,14 @@ const MeTokenSwap: React.FC<SwapProps> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const toast = useToast();
 
+  useEffect(() => {
+    if (!collateral) return;
+    const getLiveData = async () => {
+      setLiveCollateralData(await getCollateralData(collateral));
+    };
+    getLiveData();
+  }, [collateral]);
+
   useEffect(() => {
     if (!metokenAddress || !collateral) return;
     const getInAndOutTokenData = async () => {
@@ -293,7 +309,7 @@ const MeTokenSwap: React.FC<SwapProps> = ({
                 <Flex
                   justify="space-between"
                   align="center"
-                  p="0.5"
+                  p="1"
                   pt="2"
                   pb="2"
                 >
@@ -308,6 +324,16 @@ const MeTokenSwap: React.FC<SwapProps> = ({
                       onChange={(e) => handleSetAmount(e.target.value)}
                       name="Amount"
                     />
+                    <Text
+                      color="gray"
+                      fontSize={'12'}
+                      textAlign={'left'}
+                      ml={2.5}
+                    >
+                      {transactionType === 'mint'
+                        ? roundNumber(collateralTokenData.balance)
+                        : roundNumber(meTokenData.balance)}
+                    </Text>
                   </Box>
                   {transactionType === 'mint' ? (
                     <Wrap align="center">
@@ -324,10 +350,15 @@ const MeTokenSwap: React.FC<SwapProps> = ({
                       >
                         Max
                       </Button>
+                      <Image
+                        src={liveCollateralData?.image}
+                        height="36px"
+                        width="36px"
+                        borderRadius={50}
+                        mx="auto"
+                        alt="profile picture"
+                      />
                       <Text color="black">{collateralTokenData.symbol}</Text>
-                      <Text color="black">
-                        {roundNumber(collateralTokenData.balance)}
-                      </Text>
                     </Wrap>
                   ) : (
                     <Wrap align="center">
@@ -344,10 +375,15 @@ const MeTokenSwap: React.FC<SwapProps> = ({
                       >
                         Max
                       </Button>
+                      <Image
+                        src={profilePicture}
+                        height="36px"
+                        width="36px"
+                        borderRadius={50}
+                        mx="auto"
+                        alt="profile picture"
+                      />
                       <Text color="black">{symbol}</Text>
-                      <Text color="black">
-                        {roundNumber(meTokenData.balance)}
-                      </Text>
                     </Wrap>
                   )}
                 </Flex>
@@ -374,13 +410,28 @@ const MeTokenSwap: React.FC<SwapProps> = ({
                 <Flex justify="space-between" align="center" p="2">
                   <Box>
                     <Text color="black">{roundNumber(previewAmount)}</Text>
+                    <Text
+                      color="gray"
+                      fontSize={'12'}
+                      textAlign={'left'}
+                      ml={1}
+                    >
+                      {transactionType === 'mint'
+                        ? roundNumber(meTokenData.balance)
+                        : roundNumber(collateralTokenData.balance)}
+                    </Text>
                   </Box>
                   {transactionType === 'burn' ? (
                     <Wrap align="center">
+                      <Image
+                        src={liveCollateralData?.image}
+                        height="36px"
+                        width="36px"
+                        borderRadius={50}
+                        mx="auto"
+                        alt="profile picture"
+                      />
                       <Text color="black">{collateralTokenData.symbol}</Text>
-                      <Text color="black">
-                        {roundNumber(collateralTokenData.balance)}
-                      </Text>
                     </Wrap>
                   ) : (
                     <Wrap align="center">
@@ -529,7 +580,7 @@ export const PlayerMeTokens: React.FC<Props> = ({
   const { provider } = useWeb3();
 
   useEffect(() => {
-    if (!player?.ethereumAddress) return;
+    if (!player) return;
     const getTokenByOwner = async () => {
       await getMeTokenFor(player?.ethereumAddress).then((r) => {
         setMeTokenAddress(r === nullMeToken ? 'Create meToken' : r);
@@ -540,11 +591,7 @@ export const PlayerMeTokens: React.FC<Props> = ({
   }, [player?.ethereumAddress]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (
-      !meTokenAddress ||
-      meTokenAddress === 'Create meToken' ||
-      !player?.ethereumAddress
-    )
+    if (!meTokenAddress || meTokenAddress === 'Create meToken' || !player)
       return;
     const getInfoByToken = async () => {
       await getMeTokenInfo(meTokenAddress, player?.ethereumAddress).then((r) =>
@@ -576,7 +623,7 @@ export const PlayerMeTokens: React.FC<Props> = ({
           </>
         ) : (
           <>
-            {meTokenData && (
+            {meTokenData && player && provider && (
               <>
                 <MeTokenBlock
                   profilePicture={meTokenData?.profilePicture || ''}

packages/web/utils/meTokens.tsx

@@ -14,6 +14,27 @@ export const foundryFacet = '0xA56AAF637b057a5EDf7b7252D0B7280042E71335';
 export const metokenDiamond = '0x0B4ec400e8D10218D0869a5b0036eA4BCf92d905';
 export const nullMeToken = '0x0000000000000000000000000000000000000000';
 
+const COINGECKO_API_URL = 'https://api.coingecko.com/api/v3/coins/';
+const COINQUERY = '?localization=false&tickers=true&market_data=true';
+export const DAIADDRESS = '0x6B175474E89094C44Da98b954EedeAC495271d0F';
+
+export const getCollateralData = async (collateralTokenAddress: string) => {
+  let id;
+  switch (collateralTokenAddress) {
+    case DAIADDRESS:
+      id = 'dai';
+      break;
+    default:
+      id = 'dai';
+  }
+  const tokenResponse = await fetch(`${COINGECKO_API_URL}${id}${COINQUERY}`);
+  const tokenJson = await tokenResponse.json();
+  return {
+    image: tokenJson.image.small,
+    currentPrice: tokenJson.market_data.current_price.usd,
+  };
+};
+
 const { mainnetRPC } = CONFIG;
 
 // Use mainnet provider for reads, to ensure anyone can view the profile regardless of Netork.
@@ -39,6 +60,7 @@ export const getMeTokenFor = async (ownerAddress: string) => {
     mainnetProvider.getSigner(ownerAddress),
   );
   const meTokenAddress = await registry.getOwnerMeToken(ownerAddress);
+
   return meTokenAddress;
 };
 
@@ -53,11 +75,13 @@ export const getErc20TokenData = async (
     mainnetProvider.getSigner(owner),
   );
 
-  return {
-    symbol: `$${await erc20.symbol()}`,
-    name: await erc20.name(),
-    balance: await erc20.balanceOf(owner),
+  const tokenData = {
+    symbol: (await erc20.symbol()) || '',
+    name: (await erc20.name()) || '',
+    balance: (await erc20.balanceOf(owner)) || '',
   };
+
+  return { ...tokenData };
 };
 
 export const getMeTokenInfo = async (tokenAddress: string, owner: string) => {