From e3798e5a6443053b22e2cb98f457052ae803f866 Mon Sep 17 00:00:00 2001 From: OwenLu Date: Tue, 12 Mar 2024 15:23:16 +0800 Subject: [PATCH 1/4] fix: css error --- dapp/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/styles/globals.css b/dapp/styles/globals.css index 1be0732..cc7547b 100644 --- a/dapp/styles/globals.css +++ b/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; From afc5e89ae4265d5b4b1fd467f9d6c7e792246e86 Mon Sep 17 00:00:00 2001 From: OwenLu Date: Tue, 12 Mar 2024 16:12:41 +0800 Subject: [PATCH 2/4] fix: hydration problem --- dapp/pages/index.tsx | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/dapp/pages/index.tsx b/dapp/pages/index.tsx index e75b6f7..891162d 100644 --- a/dapp/pages/index.tsx +++ b/dapp/pages/index.tsx @@ -10,7 +10,7 @@ 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 { useGetNFT } from '../hooks/openSeaApi'; import NFTCard from '../components/NFTCard'; import BouncingBall from '../components/BouncingBall'; import { useEthersSigner } from "../hooks/useEthersSigner"; @@ -18,6 +18,7 @@ import { NFTData, aquariumDataType, ApiResponse } from '../types/ensDataType'; import { type Chain } from 'viem' import { Token, TokenBody } from '../types/ensDataType'; import Link from 'next/link'; +import useIsMounted from '../hooks/useIsMounted'; const DEFAULT_ACCOUNT: TBAccountParams = { tokenContract: "0x55925EdAd7bE61EF7942ae479FA28Edca5C8B158", @@ -54,7 +55,7 @@ const Home: NextPage = () => { const chain = 'sepolia' const identifier = 1 const tba_contract_address = '0xAE9eb972D43eCaEC22eF02Afb1f856cF61f7F9F8' - const { nfts } = useGetNFT(chain, identifier, tba_contract_address); + // const { nfts } = useGetNFT(chain, identifier, tba_contract_address); const [isOpen, setIsOpen] = useState(true); const [addressInput, setAddressInput] = useState(''); const [BgimgUrl, setBgImgUrl] = useState('') @@ -69,6 +70,9 @@ const Home: NextPage = () => { chain: blastSepolia, implementationAddress: ACCOUNT_IMPLEMENTATION as `0x${string}` }); + const mounted = useIsMounted(); + + const getAccount = async () => { try { @@ -111,18 +115,20 @@ const Home: NextPage = () => { 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); + 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); + 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); @@ -158,9 +164,10 @@ const Home: NextPage = () => { console.log(nftImageUrls); }, [filteredItems, nftImageUrls]); - if (nfts === undefined) { - return null; - } + // if (nfts === undefined) { + // return null; + // } + return (
@@ -189,7 +196,7 @@ const Home: NextPage = () => { )}
setIsOpen(!isOpen)}> - + {mounted ? : null}
@@ -230,7 +237,7 @@ const Home: NextPage = () => { > - + {mounted ? : null} Date: Tue, 12 Mar 2024 16:41:27 +0800 Subject: [PATCH 3/4] refactor: delete unnecessary code --- dapp/pages/index.tsx | 112 ++----------------------------------------- 1 file changed, 4 insertions(+), 108 deletions(-) diff --git a/dapp/pages/index.tsx b/dapp/pages/index.tsx index 891162d..4ea092d 100644 --- a/dapp/pages/index.tsx +++ b/dapp/pages/index.tsx @@ -1,61 +1,21 @@ -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(''); const [BgimgUrl, setBgImgUrl] = useState('') @@ -63,53 +23,9 @@ const Home: NextPage = () => { const [FishTankFiltedItems, setFishTankFiltedItems] = useState([]); const [nftImageUrls, setNftImageUrls] = useState([]); 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 mounted = useIsMounted(); - - - 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]) - + // get nft by address input useEffect(() => { const fetchData = async () => { try { @@ -137,6 +53,7 @@ const Home: NextPage = () => { fetchData(); }, [addressInput]); + // get nft by user address useEffect(() => { const fetchData = async () => { try { @@ -146,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); @@ -164,15 +80,8 @@ const Home: NextPage = () => { console.log(nftImageUrls); }, [filteredItems, nftImageUrls]); - // if (nfts === undefined) { - // return null; - // } - - return (
- {/* - */} BlastFish @@ -281,19 +190,6 @@ const Home: NextPage = () => { address 1 - {/* {address && address ? ( - - My Aquarium - - ) : null} - */} From 6c2c797668649299018e42e61a277eefc6c1a37a Mon Sep 17 00:00:00 2001 From: OwenLu Date: Wed, 13 Mar 2024 10:55:14 +0800 Subject: [PATCH 4/4] refactor: delete unnecessary code - 2 --- dapp/hooks/useImgColor.tsx | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 dapp/hooks/useImgColor.tsx diff --git a/dapp/hooks/useImgColor.tsx b/dapp/hooks/useImgColor.tsx deleted file mode 100644 index 7793c16..0000000 --- a/dapp/hooks/useImgColor.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useState, useEffect } from "react"; -import getColors from 'get-image-colors'; - -type colorRawType = { - _rgb: [number, number, number, number], -} -const useImgColor = (imgUrl: string) => { - const [color, setColor] = useState>([]); - - useEffect(() => { - getColors(imgUrl) - .then((colors) => { - setColor(colors.map((clr) => ({ _rgb: clr._rgb._unclipped }))) - console.log(color) - }) - .catch((err) => { - // console.log(err); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [imgUrl]); - return color; -}; -export default useImgColor; \ No newline at end of file