From ff8fee11a0e574c2bf6527cbdbb3f43b44e2764e Mon Sep 17 00:00:00 2001 From: Decebal Dobrica <352761+decebal@users.noreply.github.com> Date: Sun, 17 Nov 2024 04:48:30 +0000 Subject: [PATCH] fix: lending page --- packages/nextjs/app/lend/page.tsx | 17 ++- packages/nextjs/components/lend/LoadNFTs.tsx | 137 ++++++++---------- packages/nextjs/hooks/useFetchNFTs.ts | 16 +- packages/nextjs/services/store/useNFTStore.ts | 11 +- packages/nextjs/types/NFT.ts | 9 ++ 5 files changed, 88 insertions(+), 102 deletions(-) create mode 100644 packages/nextjs/types/NFT.ts diff --git a/packages/nextjs/app/lend/page.tsx b/packages/nextjs/app/lend/page.tsx index a55cdd9..be927ef 100644 --- a/packages/nextjs/app/lend/page.tsx +++ b/packages/nextjs/app/lend/page.tsx @@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from "react"; import Image from "next/image"; import { parseEther } from "viem"; import { useAccount, useWalletClient, useWriteContract } from "wagmi"; +import { LoadNFTsComponent } from "~~/components/lend/LoadNFTs"; import { useScaffoldContract, useTransactor } from "~~/hooks/scaffold-eth"; import { useFetchNFTs } from "~~/hooks/useFetchNFTs"; import useNFTStore from "~~/services/store/useNFTStore"; @@ -70,12 +71,14 @@ const RentToOwnPage = () => { // 3. Get the RentToOwn contract using the constant // 4. Approve the NFT transfer console.log("Approving NFT transfer..."); - const approveTx = await writeContractAsync({ - address: MyNFT.address, - abi: MyNFT.abi, - functionName: "approve", - args: [RentToOwn.address, currentTokenId], - }); + const approveNFT = () => + writeContractAsync({ + address: MyNFT.address, + abi: MyNFT.abi, + functionName: "approve", + args: [RentToOwn.address, currentTokenId], + }); + const approveTx = await writeTx(approveNFT, { blockConfirmations: 1 }); console.log("Approval transaction:", approveTx); // 5. List the NFT @@ -110,6 +113,8 @@ const RentToOwnPage = () => {

Rent to Own NFTs

+ +

Your NFTs

{isLoading ? ( diff --git a/packages/nextjs/components/lend/LoadNFTs.tsx b/packages/nextjs/components/lend/LoadNFTs.tsx index 53d2a3d..fcba5bd 100644 --- a/packages/nextjs/components/lend/LoadNFTs.tsx +++ b/packages/nextjs/components/lend/LoadNFTs.tsx @@ -1,76 +1,61 @@ -// "use client"; -// -// import React, { useCallback, useState } from "react"; -// import { useScaffoldContract } from "~~/hooks/scaffold-eth"; -// -// const LoadNFTsComponent = () => { -// -// // eslint-disable-next-line @typescript-eslint/no-unused-vars -// const [nfts, setNfts] = useState([]); // Specify the type for nfts -// const [contractAddress, setContractAddress] = useState(""); // State for contract address input -// -// const { data: myNFTContract, isLoading: myNFTIsLoading } = useScaffoldContract({ -// contractName: "MyNFT", -// }); -// -// const loadNFTs = async (contractAddress: string): Promise => { -// if (myNFTIsLoading || !myNFTContract) { -// addErrorNotification("The NFT Contract is loading."); -// return []; -// } -// // Get the current token ID -// const currentTokenId = await myNFTContract.read.getCurrentTokenId(); -// // console.log("Current token ID:", currentTokenId.toString()); -// -// // Create NFT object -// const nfts: NFT[] = [ -// { -// name: await myNFTContract.read.name(), -// tokenId: currentTokenId.toString(), -// contractAddress: contractAddress, -// }, -// ]; -// -// // console.log("Found NFTs:", nfts); -// return nfts; -// }; -// -// const handleLoadNFTs = useCallback(async () => { -// if (!contractAddress) { -// alert("Please enter a valid contract address."); -// return; -// } -// -// try { -// const nfts = await loadNFTs(contractAddress); -// setNfts(nfts); -// } catch (error) { -// console.error("Error loading NFTs:", error); -// addErrorNotification("Failed to load NFTs. Check console for details."); -// } -// // eslint-disable-next-line react-hooks/exhaustive-deps -// }, [contractAddress, setContractAddress]); -// -// return ( -//
-//

Load NFTs from Contract

-//
-// setContractAddress(e.target.value)} -// className="flex-1 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-secondary" -// /> -// -//
-//
-// ); -// }; -// -// export default LoadNFTsComponent; +"use client"; + +import React, { useCallback, useState } from "react"; +import { useScaffoldContract } from "~~/hooks/scaffold-eth"; +import { useFetchNFTs } from "~~/hooks/useFetchNFTs"; +import useNFTStore from "~~/services/store/useNFTStore"; +import { notification } from "~~/utils/scaffold-eth"; + +export const LoadNFTsComponent = () => { + const { data: myNFTContract, isLoading: myNFTIsLoading } = useScaffoldContract({ + contractName: "MyNFT", + }); + const [contractAddress, setContractAddress] = useState(""); // State for contract address input + const { setNFTs, setLoading } = useNFTStore(); + const { fetchNFTs } = useFetchNFTs(); + + const handleLoadNFTs = useCallback(async () => { + if (myNFTIsLoading || !myNFTContract || !contractAddress) { + notification.error("Please enter a valid contract address."); + return; + } + + const loadNFTs = async () => { + setLoading(true); + try { + const fetchedNFTs = await fetchNFTs(contractAddress); + setNFTs(fetchedNFTs); + } catch (err: unknown) { + notification.error((err as Error)?.message); + } finally { + setLoading(false); + } + }; + + void loadNFTs(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [contractAddress]); + + return ( +
+

Load NFTs from Contract

+ {myNFTContract && ( +
+ setContractAddress(e.target.value)} + className="flex-1 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-secondary" + /> + +
+ )} +
+ ); +}; diff --git a/packages/nextjs/hooks/useFetchNFTs.ts b/packages/nextjs/hooks/useFetchNFTs.ts index 32ae699..d0165c5 100644 --- a/packages/nextjs/hooks/useFetchNFTs.ts +++ b/packages/nextjs/hooks/useFetchNFTs.ts @@ -1,28 +1,24 @@ import { useAccount } from "wagmi"; import { useScaffoldContract } from "~~/hooks/scaffold-eth"; +import { NFT } from "~~/types/NFT"; import { notification } from "~~/utils/scaffold-eth"; -interface NFT { - name: string; - tokenId: string; - tokenURI: string; - contractAddress: string; -} - export function useFetchNFTs() { const { address: connectedAddress } = useAccount(); const { data: myNFTContract } = useScaffoldContract({ contractName: "MyNFT", }); - const fetchNFTs = async (): Promise => { + const fetchNFTs = async (currentNftAddress?: string): Promise => { if (!myNFTContract || !connectedAddress) { notification.error("Contract not available."); return []; } + const nfts = []; + const contractAddress = currentNftAddress || myNFTContract.address; try { - const nfts = []; + //TODO use contractAddress to get tokenId, ownerOf, tokenURI and contract name // Fetch current token ID const currentTokenId = await myNFTContract.read.getCurrentTokenId(); @@ -37,7 +33,7 @@ export function useFetchNFTs() { name: await myNFTContract.read.name(), tokenId: `${i}`, tokenURI: tokenURI.toString(), - contractAddress: myNFTContract.address, + contractAddress, }); } } diff --git a/packages/nextjs/services/store/useNFTStore.ts b/packages/nextjs/services/store/useNFTStore.ts index 376b074..6ad12e1 100644 --- a/packages/nextjs/services/store/useNFTStore.ts +++ b/packages/nextjs/services/store/useNFTStore.ts @@ -1,15 +1,6 @@ import { create } from "zustand"; import { devtools, persist } from "zustand/middleware"; - -/** - * NFT type definition - */ -interface NFT { - name: string; - tokenId: string; - tokenURI: string; - contractAddress: string; -} +import { NFT } from "~~/types/NFT"; /** * Store shape definition diff --git a/packages/nextjs/types/NFT.ts b/packages/nextjs/types/NFT.ts new file mode 100644 index 0000000..f0d4ffd --- /dev/null +++ b/packages/nextjs/types/NFT.ts @@ -0,0 +1,9 @@ +/** + * NFT type definition + */ +export interface NFT { + name: string; + tokenId: string; + tokenURI: string; + contractAddress: string; +}