transferボタン追加、user画面編集

aki-0517 · Dec 6, 2024 · d320df9 · d320df9
1 parent 64099ec
commit d320df9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 669 deletions.
diff --git a/packages/nextjs/app/enterpreneur/create/page.tsx b/packages/nextjs/app/enterpreneur/create/page.tsx
@@ -9,6 +9,9 @@ import { Typography } from "@mui/material";
 import { Card } from "~~/components/Card";
 import { CardList } from "~~/components/CardList";
 import DividerWithText from "~~/components/DividerWithText";
+import { useAccount } from "wagmi";
+import { useERC721List } from "~~/hooks/scaffold-eth/useERC721List";
+import Button from "@mui/material/Button";
 
 // タブの種類を表すユニオン型を定義
 type TabType = "割引券" | "引換券" | "会員券";
@@ -24,41 +27,24 @@ const content = {
 export default function TicketTabs() {
   const [value, setValue] = useState<TabType>("割引券");
 
+  const { address } = useAccount();
+  const { vouchers } = useERC721List(address || '');
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     const tabLabels: TabType[] = ["割引券", "引換券", "会員券"];
     setValue(tabLabels[newValue]);
   };
 
-  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 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 (
     <div>
@@ -72,6 +58,17 @@ export default function TicketTabs() {
       </Box>
       <DividerWithText />
       <CardList cards={cards} />
+      <Button
+          variant="contained"
+          color="error"
+          sx={{
+            fontWeight: "bold",
+            display: "block", // 中央揃えのためにブロック要素に
+            margin: "100px auto", // 上下に20pxのマージンを追加、左右は自動で中央揃え
+          }}
+        >
+          クーポンを送る
+        </Button>
     </div>
   );
 }
diff --git a/packages/nextjs/app/user/list/page.tsx b/packages/nextjs/app/user/list/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button, Typography } from '@mui/material';
 import type { NextPage } from 'next';
 import { useAccount } from 'wagmi';
 import { CardList } from '~~/components/CardList';
@@ -21,7 +22,24 @@ const UserListPage: NextPage = () => {
   }) || [];
 
 
-  return <CardList cards={cards} />;
+  return (
+  <div>
+    <Typography variant="h5" sx={{ textAlign: "center", mt: 5 }}>
+        取得クーポン一覧
+      </Typography>
+      <CardList cards={cards} />
+      <Button
+          variant="contained"
+          color="error"
+          sx={{
+            fontWeight: "bold",
+            display: "block", // 中央揃えのためにブロック要素に
+            margin: "100px auto", // 上下に20pxのマージンを追加、左右は自動で中央揃え
+          }}
+        >
+          クーポンを売る
+        </Button>
+  </div>) ;
 };
 
 export default UserListPage;
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -21,7 +21,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
       <div className={`flex flex-col min-h-screen `}>
         <Header />
         <main className="relative flex flex-col flex-1">{children}</main>
-        <Footer />
+        {/* <Footer /> */}
       </div>
       <Toaster />
     </>