refactor: implement suggestions

NFT/src/components/Layout.tsx

@@ -18,7 +18,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
     wallet,
     network,
     walletBalance,
-    refetchBalnce,
+    refetchBalance,
   } = useActiveWallet();
   const router = useRouter();
   const isMobile = useMedia("(max-width: 640px)", false);
@@ -44,7 +44,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
     if (CURRENT_ENVIRONMENT === "testnet") {
       router.push(NFTRoutes.faucet);
     }
-    await refetchBalnce();
+    await refetchBalance();
   };
 
   const showTopUpButton = walletBalance?.lt(TOP_UP_AMOUNT);

NFT/src/components/NFTCard.tsx

@@ -40,16 +40,12 @@ export const NFTCard = ({
           );
         }}
       >
-        <Box display="flex" justifyContent="center"><NFTImage src={`${GATEWAY_URL}/ipfs/${cid}/${fileCid}`} /></Box>
+        <Box display="flex" justifyContent="center">
+          <NFTImage src={`${GATEWAY_URL}/ipfs/${cid}/${fileCid}`} />
+        </Box>
         <CardContent sx={{ paddingBottom: "0px", paddingLeft: "0px" }}>
-          <Text className="text-2xl">
-            {nftName}
-          </Text>
-          {showDescription && (
-            <Text>
-              {nftDescription}
-            </Text>
-          )}
+          <Text className="text-2xl">{nftName}</Text>
+          {showDescription && <Text>{nftDescription}</Text>}
         </CardContent>
       </CardActionArea>
     </Card>

NFT/src/hooks/useActiveWallet.tsx

@@ -22,7 +22,7 @@ export const useActiveWallet = () => {
   return {
     wallet,
     walletBalance: balance,
-    refetchBalnce: refetch,
+    refetchBalance: refetch,
     isPending:
       isWalletLoading ||
       isConnectedLoading,

NFT/src/pages/api/files/[filter].ts

@@ -3,20 +3,35 @@ import { NextApiRequest, NextApiResponse } from "next";
 
 const pinata = new pinataSDK({ pinataJWTKey: process.env.PINATA_JWT });
 
-export const getNFTMetadata  = async (filter?: PinataMetadataFilter) => {
-  const metadata = filter;
-  // TODO: support pagination for an explore page
-  const nftData = await pinata.pinList({ metadata, status: "pinned" });
-  return nftData;
+export const getNFTMetadata = async (filter?: PinataMetadataFilter) => {
+  try {
+    const metadata = filter;
+    // TODO: support pagination for an explore page
+    const nftData = await pinata.pinList({ metadata, status: "pinned" });
+    return nftData;
+  } catch {
+    throw new Error("Could not fetch nft data from ipfs");
+  }
 };
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  if (req.method === "GET") {
-    const metadata = JSON.parse(req.query.filter as string);
-    const nftData = await getNFTMetadata(metadata);
-    res.json(nftData.rows);
+  try {
+    if (req.method === "GET") {
+      const filter = req.query.filter;
+      if (typeof filter !== "string" || typeof filter !== undefined) {
+        throw new Error(`Invalid filter ${filter}`);
+      }
+      const metadata = JSON.parse(filter);
+      const nftData = await getNFTMetadata(metadata);
+      res.json(nftData.rows);
+    } else {
+      res.status(405).send("Method Not Allowed");
+    }
+  } catch (error) {
+    console.error(error);
+    res.status(500).send("Server Error");
   }
 }

NFT/src/pages/api/files/index.ts

@@ -44,7 +44,7 @@ export default async function handler(
   try {
     if (req.method === "POST") {
       const form = formidable({ keepExtensions: true });
-      form.parse(req, async (err, fields, files) => {
+      form.parse(req, async (err, _fields, files) => {
         if (err || !files.file || files.file.length === 0) {
           console.error({ err });
           return res.status(500).send("Upload Error");
@@ -59,9 +59,11 @@ export default async function handler(
         // TODO: support pagination for an explore page
         const nftData = await pinata.pinList({ hashContains, status: "pinned" });
         res.json(nftData.rows);
+    } else {
+      res.status(405).send("Method Not Alllowed");
     }
   } catch (error) {
     console.error(error);
-    res.status(500).send("Server Error");
+    res.status(500).send(`Server Error: ${error}`);
   }
 }

NFT/src/pages/api/metadata.ts

@@ -1,16 +1,31 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import pinataSDK from "@pinata/sdk";
+import type { PinataMetadata } from "@pinata/sdk";
 
 const pinata = new pinataSDK({ pinataJWTKey: process.env.PINATA_JWT });
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
+  try {
     if (req.method === "PUT") {
-        const { ipfsHash, metadata } = JSON.parse(req.body);
+      const { ipfsHash, metadata } = JSON.parse(req.body);
 
-        const response = await pinata.hashMetadata(ipfsHash, metadata);
-        return res.send(response);
+      if (typeof ipfsHash !== "string") {
+        throw new Error("Invalid ipfs hash");
+      }
+      if (typeof metadata !== "object") {
+        throw new Error("Invalid pinata metadata");
+      }
+
+      const response = await pinata.hashMetadata(ipfsHash, metadata);
+      res.send(response);
+    } else {
+      res.status(405).send("Method Not Allowed");
     }
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(`Server error: ${error}`);
+  }
 }

NFT/src/pages/api/unpin.ts

@@ -7,10 +7,17 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
+  try {
     if (req.method === "POST") {
-        const { ipfsHash } = JSON.parse(req.body);
+      const { ipfsHash } = JSON.parse(req.body);
 
-        const response = await pinata.unpin(ipfsHash);
-        return res.send(response);
+      const response = await pinata.unpin(ipfsHash);
+      return res.send(response);
+    } else {
+      res.status(405).send("Method Not Allowed");
     }
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(`Server Error: ${error}`);
+  }
 }

NFT/src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { FuelLogo } from "@/components/FuelLogo";
 import { HomeCard } from "@/components/HomeCard";
+import { Text } from "@/components/Text";
 import { Box, Grid, Stack } from "@mui/material";
 
 export default function Home() {
@@ -11,18 +12,9 @@ export default function Home() {
             from-zinc-900
             to-zinc-950/80"
       >
-        <Box
-          display="flex"
-          alignContent="center"
-          flexWrap="wrap"
-          justifyContent="center"
-          alignItems="center"
-          paddingTop="4px"
-          paddingBottom="4px"
-          width="stretch"
-        >
+        <Box className="flex content-center flex-wrap justify-center items-center py-1 w-full">
           <FuelLogo />
-          <div className="text-3xl text-whit font-sans">Sway Applications</div>
+          <Text className="text-3xl">Sway Applications</Text>
         </Box>
       </nav>
       <div className="min-h-screen items-center p-20 flex flex-col gap-6">

NFT/src/pages/nft/faucet.tsx

@@ -4,10 +4,10 @@ import { TESTNET_FAUCET_LINK } from "@/lib";
 import { useEffect } from "react";
 
 export default function Faucet() {
-  const { wallet, refetchBalnce } = useActiveWallet();
+  const { wallet, refetchBalance } = useActiveWallet();
 
   useEffect(() => {
-    const interval = setInterval(refetchBalnce, 500);
+    const interval = setInterval(refetchBalance, 500);
     return () => clearInterval(interval);
   }, []);
 

NFT/src/pages/nft/index.tsx

@@ -1,5 +1,3 @@
-import { Grid, Stack } from "@mui/material";
-import { NFTCard } from "@/components/NFTCard";
 import { useGetNFTData } from "@/hooks/useGetNFTData";
 import { Text } from "@/components/Text";
 import { QueryClient, dehydrate } from "@tanstack/react-query";

NFT/src/pages/nft/mint/[id]/[fileId].tsx

@@ -67,7 +67,7 @@ export default function Mint() {
     if (nftData.length && nftData[0].metadata.keyvalues.minter) {
       setMinterAddress(nftData[0].metadata.keyvalues.minter);
     }
-  }, [nftData, nftData.length]);
+  }, [nftData]);
 
   const mint = useMint();