Merge pull request #3 from aki-0517/feat/user-list

Feat/user list

packages/nextjs/app/user/list/page.tsx

@@ -1,37 +1,25 @@
-import type { NextPage } from "next";
-import { CardList } from "~~/components/CardList";
+'use client';
+
+import type { NextPage } from 'next';
+import { useAccount } from 'wagmi';
+import { CardList } from '~~/components/CardList';
+import { useERC721List } from '~~/hooks/scaffold-eth/useERC721List';
 
 const UserListPage: NextPage = () => {
-  const cards = [
-    {
-      title: "引換券",
-      issueDate: "2024.12.05",
-      amount: 7000,
-      expiryDate: "2025.06.30",
-      usageScope: "店舗全体",
-    },
-    {
-      title: "引換券",
-      issueDate: "2024.12.05",
-      amount: 7000,
-      expiryDate: "2025.06.30",
-      usageScope: "店舗全体",
-    },
-    {
-      title: "引換券",
-      issueDate: "2024.12.05",
-      amount: 7000,
-      expiryDate: "2025.06.30",
-      usageScope: "店舗全体",
-    },
-    {
-      title: "引換券",
-      issueDate: "2024.12.05",
-      amount: 7000,
-      expiryDate: "2025.06.30",
-      usageScope: "店舗全体",
-    },
-  ];
+  const { address } = useAccount();
+  const { vouchers } = useERC721List(address || '');
+
+  const cards = vouchers?.map((voucher) => {
+    const amount = voucher.amount;
+    return {
+      title: voucher.title,
+      issueDate: voucher.issueDate.toString(),
+      amount: Number(amount),
+      expiryDate: voucher.expiryDate.toString(),
+      usageScope: voucher.usageScope,
+    };
+  }) || [];
+
 
   return <CardList cards={cards} />;
 };

packages/nextjs/components/Header.tsx

@@ -90,17 +90,10 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-10 h-10">
+          <div className="flex relative w-20 h-10">
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
-          <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
-            <span className="text-xs">Ethereum dev stack</span>
-          </div>
         </Link>
-        {/* <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
-          <HeaderMenuLinks />
-        </ul> */}
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />

packages/nextjs/hooks/scaffold-eth/useERC721List.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useScaffoldReadContract } from './useScaffoldReadContract';
+import { BigNumber } from 'ethers';
+
+interface Voucher {
+  title: string;
+  issueDate: BigNumber;
+  amount: BigNumber;
+  expiryDate: BigNumber;
+  usageScope: string;
+}
+
+export const useERC721List = ( ownerAddress: string) => {
+
+  // Fetch the list of vouchers owned by the specified address
+  const { data: vouchers } = useScaffoldReadContract({
+    contractName: "ExpirableERC721",
+    functionName: "listVouchers",
+    args: [ownerAddress],
+  });
+
+
+  return {
+    vouchers: vouchers as Voucher[] | undefined,
+  };
+};

packages/nextjs/hooks/scaffold-eth/useERC721Mintbatch.ts

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
+
+/**
+ * Custom hook to interact with the mintBatch function of the ExpirableERC721 contract.
+ */
+export const useERC721MintBatch = () => {
+  const [isMinting, setIsMinting] = useState(false);
+  const { writeContractAsync } = useScaffoldWriteContract("ExpirableERC721");
+
+  /**
+   * Function to mint a batch of ERC721 tokens.
+   * @param to Address to mint the tokens to.
+   * @param numberOfTokens Number of tokens to mint.
+   * @param title Title of the voucher.
+   * @param issueDate Issue date of the voucher.
+   * @param amount Amount associated with the voucher.
+   * @param expiryDate Expiry date of the voucher.
+   * @param usageScope Usage scope of the voucher.
+   */
+  const mintBatch = async (
+    to: string,
+    numberOfTokens: bigint,
+    title: string,
+    issueDate: bigint,
+    amount: bigint,
+    expiryDate: bigint,
+    usageScope: string
+  ) => {
+    setIsMinting(true);
+    try {
+      await writeContractAsync({
+        functionName: "mintBatch",
+        args: [to, numberOfTokens, title, issueDate, amount, expiryDate, usageScope],
+      });
+    } catch (error) {
+      console.error("Error minting batch:", error);
+    } finally {
+      setIsMinting(false);
+    }
+  };
+
+  return { mintBatch, isMinting };
+};