Owen/refactor

dapp/pages/index.tsx

@@ -1,128 +1,50 @@
-import { SetStateAction, useEffect, useState, useCallback } from 'react';
+import { SetStateAction, useEffect, useState } from 'react';
 import type { NextPage } from 'next';
 import Image from 'next/image'
 import Head from 'next/head';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { Container, Paper, TextField, Button, Typography, Grid, Box } from '@mui/material';
 import { useAccount } from 'wagmi'
-import { TokenboundClient } from '@tokenbound/sdk'
-import { type TBAccountParams } from "@tokenbound/sdk/dist/src";
 import AquariumBag from '../components/AquariumBag';
 import SidebarMenu from '../components/SidebarMenu';
 import WrapWalletLink from '../components/WrapWalletLink';
-import { useGetNFT } from '../hooks/openSeaApi';
-import NFTCard from '../components/NFTCard';
 import BouncingBall from '../components/BouncingBall';
-import { useEthersSigner } from "../hooks/useEthersSigner";
-import { NFTData, aquariumDataType, ApiResponse } from '../types/ensDataType';
-import { type Chain } from 'viem'
+import { ApiResponse } from '../types/ensDataType';
 import { Token, TokenBody } from '../types/ensDataType';
 import Link from 'next/link';
+import useIsMounted from '../hooks/useIsMounted';
 
-const DEFAULT_ACCOUNT: TBAccountParams = {
-  tokenContract: "0x55925EdAd7bE61EF7942ae479FA28Edca5C8B158",
-  tokenId: "1"
-}
 
 const Home: NextPage = () => {
-  const blastSepolia = {
-    id: 168587773,
-    name: "BlastSepolia",
-    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-    rpcUrls: {
-      default: {
-        http: [
-          "https://greatest-methodical-sailboat.blast-sepolia.quiknode.pro/ad167749d76a32bdcee95bb1ddaadc3aa68ea097/",
-        ],
-      },
-      public: {
-        http: [
-          "https://greatest-methodical-sailboat.blast-sepolia.quiknode.pro/ad167749d76a32bdcee95bb1ddaadc3aa68ea097/",
-        ],
-      },
-    },
-    blockExplorers: {
-      default: {
-        name: "Blast Sepolia Explorer",
-        url: "https://testnet.blastscan.io/",
-      },
-    },
-    testnet: true,
-    network: "blastSepolia",
-  } as const satisfies Chain;
-
-  const chain = 'sepolia'
-  const identifier = 1
-  const tba_contract_address = '0xAE9eb972D43eCaEC22eF02Afb1f856cF61f7F9F8'
-  const { nfts } = useGetNFT(chain, identifier, tba_contract_address);
   const [isOpen, setIsOpen] = useState(true);
   const [addressInput, setAddressInput] = useState<string>('');
   const [BgimgUrl, setBgImgUrl] = useState('')
   const [filteredItems, setFilteredItems] = useState<Token[]>([]);
   const [FishTankFiltedItems, setFishTankFiltedItems] = useState<Token[]>([]);
   const [nftImageUrls, setNftImageUrls] = useState<string[]>([]);
   const { address } = useAccount(); // user's wallet address
-  const signer = useEthersSigner({ chainId: 168587773 });
-  const ACCOUNT_IMPLEMENTATION = `0x8da2Df669b3A0453b1BB4c26AcC44D10E68CA685`;
-  const tokenboundClient = new TokenboundClient({
-    signer: signer,
-    chain: blastSepolia,
-    implementationAddress: ACCOUNT_IMPLEMENTATION as `0x${string}`
-  });
-
-  const getAccount = async () => {
-    try {
-      const tokenboundAccount = tokenboundClient.getAccount({
-        tokenContract: '0x55925EdAd7bE61EF7942ae479FA28Edca5C8B158',
-        tokenId: '1',
-      })
-      console.log('Deployed?', tokenboundAccount)
-
-      const isAccountDeployed = await tokenboundClient.checkAccountDeployment({
-        accountAddress: tokenboundAccount,
-      })
-
-      console.log('IS SAPIENZ 0 DEPLOYED?', isAccountDeployed)
-
-      const nft = await tokenboundClient.getNFT({
-        accountAddress: tokenboundAccount,
-      })
-
-      const { tokenContract, tokenId, chainId } = nft
-
-      console.log({ tokenContract, tokenId, chainId })
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  const createAccount = useCallback(async () => {
-    if (!tokenboundClient || !address) return
-    const createdAccount = await tokenboundClient.createAccount({
-      tokenContract: '0x55925EdAd7bE61EF7942ae479FA28Edca5C8B158',
-      tokenId: '1',
-      chainId: 168587773,
-    })
-    alert(`new account: ${createdAccount.txHash}`)
-  }, [tokenboundClient])
+  const mounted = useIsMounted();
 
+  // get nft by address input
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch(`https://api.routescan.io/v2/network/testnet/evm/168587773/address/${addressInput}/erc721-holdings?limit=25`);
         if (!response.ok) {
-          throw new Error('Network response was not ok');
+          console.error('Network response was not ok');
         }
         const data: ApiResponse = await response.json();
-        const fishNFTFilter = data.items.filter(item => item.tokenAddress === "0x26076EF77D3b41aC8BDFD5C318bd5157C64AB757");
-        setFilteredItems(fishNFTFilter);
-
-        const fishUrls: string[] = [];
-        for (const item of fishNFTFilter) {
-          const tokenBody: TokenBody = JSON.parse(item.tokenBody);
-          fishUrls.push(tokenBody.image);
+        if (data.items && data.items.length > 0) {
+          const fishNFTFilter = data.items.filter(item => item.tokenAddress === "0x26076EF77D3b41aC8BDFD5C318bd5157C64AB757");
+          setFilteredItems(fishNFTFilter);
+
+          const fishUrls: string[] = [];
+          for (const item of fishNFTFilter) {
+            const tokenBody: TokenBody = JSON.parse(item.tokenBody);
+            fishUrls.push(tokenBody.image);
+          }
+          setNftImageUrls(fishUrls);
         }
-        setNftImageUrls(fishUrls);
 
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -131,6 +53,7 @@ const Home: NextPage = () => {
     fetchData();
   }, [addressInput]);
 
+  // get nft by user address
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -140,7 +63,6 @@ const Home: NextPage = () => {
         }
         const data: ApiResponse = await response.json();
         console.log(data);
-
         const fishTankFilter = data.items.filter(item => item.tokenAddress === "0x55925EdAd7bE61EF7942ae479FA28Edca5C8B158");
         console.log(fishTankFilter);
         setFishTankFiltedItems(fishTankFilter);
@@ -158,14 +80,8 @@ const Home: NextPage = () => {
     console.log(nftImageUrls);
   }, [filteredItems, nftImageUrls]);
 
-  if (nfts === undefined) {
-    return null;
-  }
-
   return (
     <main className="...">
-      {/* <button onClick={() => createAccount()}> Create TBA</button>
-      <button onClick={() => getAccount()}> Get TBA</button> */}
       <BouncingBall filteredItems={filteredItems} />
       <Head>
         <title>BlastFish</title>
@@ -189,7 +105,7 @@ const Home: NextPage = () => {
       )}
       <div className="...">
         <div onClick={() => setIsOpen(!isOpen)}>
-          <WrapWalletLink />
+          {mounted ? <WrapWalletLink /> : null}
         </div>
         <AquariumBag filteredItems={filteredItems} />
         <Link href="/mintpage">
@@ -230,7 +146,7 @@ const Home: NextPage = () => {
               ></Image>
               <Container sx={{ py: 2 }} maxWidth="md">
                 <Grid container justifyContent="center" alignItems="center">
-                  <ConnectButton />
+                  {mounted ? <ConnectButton /> : null}
                 </Grid>
                 <TextField
                   fullWidth
@@ -274,19 +190,6 @@ const Home: NextPage = () => {
                     address 1
                   </Button>
                 </Box>
-                {/* {address && address ? (
-                  <Typography
-                    variant="h3"
-                    align="center"
-                    sx={{
-                      color: "white",
-                      mb: "1rem",
-                    }}
-                  >
-                    My Aquarium
-                  </Typography>
-                ) : null}
-                <NFTCard ethAddress={""} onTbaAddChange={setTbaTokenId} /> */}
               </Container>
             </Paper>
           </Box>

dapp/styles/globals.css

@@ -269,7 +269,7 @@ body {
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: end;
+  align-items: flex-end;
   font-size: 2rem;
   color: #fff;
   margin-bottom: 1rem;