Merge pull request #51 from neu-fi/45-improve-the-performance-of-my-c…

…ards-page

Performance improved

packages/frontend/components/CardList.tsx

@@ -1,6 +1,6 @@
 import Card, { ICard } from "@/components/Card";
 import { useBingoContract } from "@/hooks/useBingoContract";
-import { checkIfNetworkIsCorrect, errorSlicing, getToken } from "@/utils/utils";
+import { isNetworkCorrect, errorSlicing, getToken, svg } from "@/utils/utils";
 import { Contract } from "ethers";
 import { PropsWithChildren, useEffect, useState } from "react";
 import { useSigner, useAccount } from "wagmi";
@@ -44,7 +44,7 @@ export default function CardList(props: PropsWithChildren<CardListProps>) {
   const contract: Contract | undefined = useBingoContract(signer.data);
 
   useEffect(() => {
-    if (!checkIfNetworkIsCorrect()) {
+    if (!isNetworkCorrect()) {
       return;
     }
 

packages/frontend/components/contract/DrawnCountDown.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useProvider } from "wagmi";
 import { useBingoContract } from "@/hooks/useBingoContract";
 import {
-  checkIfNetworkIsCorrect,
+  isNetworkCorrect,
   timestampToCountdown,
   toastOptions,
 } from "@/utils/utils";
@@ -28,7 +28,7 @@ export const DrawnCountDown = () => {
   }
 
   useEffect(() => {
-    if (!checkIfNetworkIsCorrect()) {
+    if (!isNetworkCorrect()) {
       return;
     }
     async function getDrawTime() {

packages/frontend/components/contract/GetDrawnNumbers.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useProvider } from "wagmi";
 import DrawnNumbersTable from "@/components/DrawnNumbersTable";
 import { useBingoContract } from "@/hooks/useBingoContract";
 import { BigNumber, Event, Contract } from "ethers";
 import { toast } from "react-toastify";
-import { errorSlicing, toastOptions } from "@/utils/utils";
-import { checkIfNetworkIsCorrect } from "../../utils/utils";
+import { errorSlicing, toastOptions, isNetworkCorrect } from "@/utils/utils";
 
 type GetDrawnNumbersProps = {};
 
@@ -18,7 +17,7 @@ export const GetDrawnNumbers = (props: GetDrawnNumbersProps) => {
   const contract: Contract | undefined = useBingoContract(provider);
 
   useEffect(() => {
-    if (!checkIfNetworkIsCorrect()) {
+    if (!isNetworkCorrect()) {
       return;
     }
 

packages/frontend/utils/utils.ts

@@ -85,10 +85,18 @@ export async function getToken(
 ): Promise<ICard> {
   try {
     const tokenURIBase64 = await contract.tokenURI(tokenId);
-    const tokenURI = await getTokenDataJSON(tokenURIBase64);
+    let tokenURI = JSON.parse(
+      Buffer.from(tokenURIBase64.split(",")[1], "base64").toString()
+    );
+    tokenURI.image = Buffer.from(
+      tokenURI.image.split(",")[1],
+      "base64"
+    ).toString();
+
     const coveredNumbersCount = Number(
       (await contract.coveredNumbers(tokenId)).toString()
     );
+
     const card: ICard = {
       id: tokenId,
       coveredNumbersCount,
@@ -100,16 +108,7 @@ export async function getToken(
   }
 }
 
-export async function getTokenDataJSON(tokenURI: URL) {
-  return await fetch(tokenURI).then(async (res) => {
-    let data = await res.json();
-    let image = await fetch(data.image).then((res) => res.text());
-    data.image = image;
-    return data;
-  });
-}
-
-export function checkIfNetworkIsCorrect() {
+export function isNetworkCorrect() {
   const network = getNetwork();
   if (network.chain && network.chain.id !== NETWORK_ID) {
     toast.error(`Please switch to ${NETWORK_NAME}`, toastOptions);