fixed fetch nfts & tokens 🪙

Open-Sorcerer · Sep 23, 2023 · 4ec3a6b · 4ec3a6b
1 parent 600cfc2
commit 4ec3a6b
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 81 deletions.
diff --git a/src/app/nfts/page.tsx b/src/app/nfts/page.tsx
@@ -9,7 +9,6 @@ const Nfts = () => {
   return (
     <div className="w-full h-full relative mb-40">
       <section className="my-5 ">
-        <h1 className="text-4xl font-bold mb-16">Your NFTs</h1>
         <NftList />
       </section>
   </div>

diff --git a/src/app/tokens/page.tsx b/src/app/tokens/page.tsx
@@ -1,67 +1,47 @@
 
 'use client'
+import { Loading } from '@components/Loading';
 import useTokens from '@hooks/useTokens'
 import Image from 'next/image'
 import { useEffect } from 'react';
-const Tokens = () => {
 
-  const tokensList = [
-    {
-      name: "Solana",
-      quantity: 1.01,
-      balance: 20,
-    },
-    {
-      name: "Filecoin",
-      quantity: 500,
-      balance: 203,
-    },
-    {
-      name: "AVAX",
-      quantity: 30,
-      balance: 200,
-    },
-    {
-      name: "Polygon",
-      quantity: 1.01,
-      balance: 20,
-    },
-  ]
+const Tokens = () => {
 
   const tokensByOwner = useTokens();
-  console.log(tokensByOwner.tokens);
-
+  // console.log(tokensByOwner.tokens);
+  // While loading return Loader
+  if (tokensByOwner.loading) {
+    return <Loading stuff="Tokens"/>;
+  }
   return (
-    <div className="h-full relative mb-40">
+    <div className="h-full relative mb-10">
       <section className="m-5">
-        <div className='w-full h-fit flex flex-col gap-1 mb-12'>
-        <h1 className="text-2xl font-bold ">$ 5000.69</h1>
-        <h2 className="text-xl font-bold text-green-500">+ $ 0.01</h2>
+        <div className='w-full h-fit flex flex-col gap-1'>
+        {/* <h1 className="text-2xl font-bold ">$ 5000.69</h1> */}
+        {/* <h2 className="text-xl font-bold text-green-500">+ $ 0.01</h2> */}
         </div>
         <div className='w-full h-full flex flex-col gap-3'>
           {
-            tokensList.map((item: any) => {
+            tokensByOwner.tokens.map((item: any) => {
               return (
                 <div className="w-full h-fit flex flex-row justify-between  items-center bg-gradient-to-br from-black to-matte-black px-10 py-5 rounded-lg shadow-xl shadow-black" key={item.name}>
                   <div className='flex w-fit h-full flex-row justify-start items-center gap-3'>
                     <div className='w-12 h-12 relative'>
-                      <Image src='/sol.png' fill={true}
+                      <img src={item.imageURI} 
+                        // fill={true}
                         style={{ objectFit: "contain" }}
                         loading="lazy" alt='tokenDP' className='rounded-full ring-1 ring-amber-500' />
                     </div>
                     <div className='flex flex-col w-fit h-full items-start justify-start'>
-                      <h2 className='text-base font-semibold'>{item.name}</h2>
-                      <h2 className='text-base font-semibold'>{item.quantity}</h2>
+                      <h2 className='text-base font-semibold'>{item.tokenName}</h2>
+                      <h2 className='text-base font-semibold'>{item.amount/Math.pow(10,item.decimals)}</h2>
                     </div>
                   </div>
-                  <h2 className='text-lg font-medium'>${" "}{item.balance.toFixed(2)}</h2>
+                  {/* <h2 className='text-lg font-medium'>${" "}{item.balance.toFixed(2)}</h2> */}
                 </div>
               )
             })
           }
-          {/* {tokensByOwner.tokens.map((item:any)=>{
-            return (<div key={item}>{item}</div>)
-          })} */}
         </div>
       </section>
     </div>

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -1,10 +1,13 @@
 import Image from "next/image"
 
-export function Loading() {
+export function Loading(props: any) {
+  const {stuff} = props;
   return (
-    <div className="flex justify-center flex-col text-center text-sm items-center h-[150px] w-full my-10 max-h-screen gap-4">
-      <Image src={'/loader.gif'} height={100} width={100} alt='loading nfts' className='invert'/>
-      <p>Fetching your NFTs ...</p>
+    <div className="w-full h-full flex justify-center items-center">
+      <div className="flex justify-center flex-col text-center text-sm items-center h-[150px] w-full my-10 max-h-screen gap-4">
+        <Image src={'/loader.gif'} height={100} width={100} alt='loading nfts' className='invert'/>
+        <p>Fetching your {stuff} ...</p>
+      </div>
     </div>
   );
 }
diff --git a/src/components/nft/NftList.tsx b/src/components/nft/NftList.tsx
@@ -51,7 +51,7 @@ export const NftList = () => {
 
   // While loading return Loader
   if (nfts.loading) {
-    return <Loading />;
+    return <Loading stuff="NFTs"/>;
   }
 
   // If no NFTs of collection return message

diff --git a/src/hooks/useTokens.ts b/src/hooks/useTokens.ts
@@ -21,30 +21,14 @@ const useTokens = (reload?: number) => {
         let tokens = (await getTokensByOwner(publicKey!.toBase58()))
 
         console.log("filtered: ", tokens);
-
-        // filtered = await Promise.all(
-        //   filtered.map(async (nft: any) => {
-        //     if (!nft.content.metadata.attributes) {
-        //       console.log("fetching separate");
-        //       const { data } = await axios.get(nft.content.json_uri);
-
-        //       return {
-        //         ...nft,
-        //         content: {
-        //           ...nft.content,
-        //           metadata: {
-        //             ...nft.content.metadata,
-        //             attributes: data.attributes,
-        //           },
-        //           files: [...nft.content.files, { uri: data.image }],
-        //         },
-        //       };
-        //     }
-
-        //     return nft;
-        //   })
-        // );
-        setTokens(tokens!);
+        const supportedTokensArray = Object.keys(tokens).map((tokenName) => {
+          const tokenData = tokens[tokenName];
+          return {
+            ...tokenData,
+          };
+        });
+
+        setTokens(supportedTokensArray);
         setLoading(false);
       } catch (error) {
         console.log(error);
@@ -54,7 +38,7 @@ const useTokens = (reload?: number) => {
     };
 
     if (publicKey) {
-      console.log("fetching tokens");
+      console.log("Fetching Tokens");
       fetchTokens();
     }
   }, [connection, publicKey, reload]);

diff --git a/src/utils/tokens.ts b/src/utils/tokens.ts
@@ -1,19 +1,28 @@
 const getTokensByOwner = async (owner: string) => {
   const url = `https://api.helius.xyz/v0/addresses/${owner}/balances?api-key=${process.env.NEXT_PUBLIC_HELIUS_API}`;
-  const token_url = `https://api.helius.xyz/v0/token-metadata?api-key=${process.env.NEXT_PUBLIC_HELIUS_API}`;
+  // const token_url = `https://api.helius.xyz/v0/token-metadata?api-key=${process.env.NEXT_PUBLIC_HELIUS_API}`;
   const response = await fetch(url);
   const data = await response.json();
   console.log("balances: ", data);
 
-  const supportedTokenAddresses = [
-    "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU", // USDC
-    "Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB", // USDT
-    "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263", // bonk
-  ];
-
   // filter the above supportedTokenAddresses in the data we got and the native balance
 
-  const supportedTokenAddressesMetadata = {
+  // const supportedTokenAddresses = [
+  //   "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU", // USDC
+  //   "Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB", // USDT
+  //   "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263", // bonk
+  // ];
+  const supportedTokenAddressesMetadata: Record<string, {
+    address: string;
+    tokenName: string;
+    imageURI: string;
+  }> = {
+    // Solana: {
+    //   address: "native",
+    //   tokenName: "Sol",
+    //   imageURI:
+    //     "https://images.xnftdata.com/cdn-cgi/image/fit=crop,width=100,height=100,quality=85/https://assets.coingecko.com/coins/images/4128/large/solana.png",
+    // },
     USDC: {
       address: "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU",
       tokenName: "USDC",
@@ -32,12 +41,30 @@ const getTokensByOwner = async (owner: string) => {
       imageURI:
         "https://arweave.net/hQiPZOsRZXGXBJd_82PhVdlM_hACsT_q6wqwf5cSY7I",
     },
-    Solana: {
-      tokenName: "Sol",
-      imageURI:
-        "https://images.xnftdata.com/cdn-cgi/image/fit=crop,width=100,height=100,quality=85/https://assets.coingecko.com/coins/images/4128/large/solana.png",
-    },
   };
+
+  const supportedTokens: Record<string, any> = {};
+  supportedTokens["Sol"] = {
+    tokenName: "Sol",
+    imageURI:
+      "https://images.xnftdata.com/cdn-cgi/image/fit=crop,width=100,height=100,quality=85/https://assets.coingecko.com/coins/images/4128/large/solana.png",
+    amount: data.nativeBalance,
+    decimals: 9
+  }
+
+  for (const tokenName in supportedTokenAddressesMetadata) {
+    const tokenAddress = supportedTokenAddressesMetadata[tokenName].address;
+    const matchingToken = data.tokens.find((token: any) => token.mint === tokenAddress);
+    if (matchingToken) {
+      supportedTokens[tokenName] = {
+        ...matchingToken,
+        ...supportedTokenAddressesMetadata[tokenName]
+      };
+    }
+  }
+
+  console.log("Supported Tokens:", supportedTokens);
+  return supportedTokens;
 };
 
 export default getTokensByOwner;