署名の検証を追加

frontend/src/pages/api/points/checkout.ts

@@ -1,6 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type { NextApiRequest, NextApiResponse } from "next";
 import { Stripe } from "stripe";
+import { ethers } from "ethers";
 
 const UNIT_AMOUNT_STD = 5; // 1ポイントあたりの価格（単位：円）
 
@@ -23,13 +24,14 @@ export default async function handler(
   // todo: 購入ポイント数の価格計算
   const unit_amount = Number(amount) * UNIT_AMOUNT_STD;
 
-  // todo: signatureからウォレットアドレスを複合
+  const walletAddress = ethers.utils.verifyMessage(amount, signature);
+
   // ここのmetadataがwebhookで飛んでくるので、それでどのアドレスにいくらポイント付与するかがわかる
-  const walletAddress = "0x019281ce34F8b8739991713D5E09D0C290B53886";
   const metadata = {
     walletAddress,
     amount, // number型で送信してもwebhook経由で取得するとstring型に変換されてしまうのでstring型のままで送信
   };
+  console.log("metadata:", metadata);
 
   const session = await stripeClient.checkout.sessions.create({
     mode: "payment",

frontend/src/pages/purchase-points/purchase.tsx

@@ -1,6 +1,13 @@
-import { Container, Button, useDisclosure, Input, Text, Flex } from "@chakra-ui/react";
+import {
+  Container,
+  Button,
+  useDisclosure,
+  Input,
+  Text,
+  Flex,
+} from "@chakra-ui/react";
 import { useAddress } from "@thirdweb-dev/react";
-import React, { FC, useCallback, useState  } from "react";
+import React, { FC, useCallback, useState } from "react";
 import { useLocale } from "src/hooks/useLocale";
 import { ConnectWalletModal } from "./../../components/molecules/web3/ConnectWalletModal";
 
@@ -14,9 +21,9 @@ const User: FC = () => {
     onClose: onConnectWalletClose,
   } = useDisclosure();
   const [connecting, setConnecting] = useState<boolean>(false);
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState("");
   const [isValid, setIsValid] = useState(true);
-  const [valueURL, setValueURL] = useState('');
+  const [valueURL, setValueURL] = useState("");
 
   const handleOpenConnectWallet = useCallback(() => {
     onConnectWalletOpen();
@@ -26,61 +33,71 @@ const User: FC = () => {
   const handlePayment = async () => {
     const isNumeric = /^-?\d*\.?\d+$/.test(value);
     setIsValid(isNumeric);
-    if(isNumeric){
+    if (isNumeric) {
       try {
-        const response = await fetch(`/api/points/checkout?amount=${value}&signature=${address}`);
+        // todo: 署名をダミーデータから変更
+        const response = await fetch(
+          `/api/points/checkout?amount=${value}&signature=0x681c1341f66238f9e2c44a9e98a3c8eceb0d27ca031dee628490d7772f13a19f31ce708d13be3a662fd43ebd12ddaf0e208869af422a20070ca254da629fe0a61c`
+        );
         const data = await response.json();
         // データを処理する
         console.log(data.sessionURL);
         setValueURL(data.sessionURL);
         window.location.href = data.sessionURL;
       } catch (error) {
-        console.error('Error:', error);
+        console.error("Error:", error);
       }
     }
   };
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
-
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setValue(event.target.value);
+
   return (
     <Container maxWidth={1000} mt={{ base: 5, md: 10 }}>
-        {address ?
-            <>
-
-
-                  <Text pb={5}>{t.PURCHASE}</Text>
-                  <Flex mb={5}>
-                      <Input w={500} value={value} onChange={handleChange} placeholder={t.POINTS_TO_BE_PURCHASED}/>
-                      <Text pl={1}>pt</Text>
-                  </Flex>
-                  {!isValid && <Text pb={5} color="red">{t.INCORRECT_INPUT}</Text>}
-                  <Button
-                      backgroundColor="yellow.900"
-                      color="white"
-                      onClick={handlePayment}
-                  >
-                      {t.PAYMENT}
-                  </Button>
-
-            </>
-            : 
-            <Button
-                backgroundColor="yellow.900"
-                color="white"
-                onClick={handleOpenConnectWallet}
-            >
-                {t.SIGN_IN}
-            </Button>
-        }
-        {(!address || connecting) && (
-            <ConnectWalletModal
-                setConnecting={setConnecting}
-                onClose={onConnectWalletClose}
-                isOpen={isConnectWalletOpen}
+      {address ? (
+        <>
+          <Text pb={5}>{t.PURCHASE}</Text>
+          <Flex mb={5}>
+            <Input
+              w={500}
+              value={value}
+              onChange={handleChange}
+              placeholder={t.POINTS_TO_BE_PURCHASED}
             />
-        )}
+            <Text pl={1}>pt</Text>
+          </Flex>
+          {!isValid && (
+            <Text pb={5} color="red">
+              {t.INCORRECT_INPUT}
+            </Text>
+          )}
+          <Button
+            backgroundColor="yellow.900"
+            color="white"
+            onClick={handlePayment}
+          >
+            {t.PAYMENT}
+          </Button>
+        </>
+      ) : (
+        <Button
+          backgroundColor="yellow.900"
+          color="white"
+          onClick={handleOpenConnectWallet}
+        >
+          {t.SIGN_IN}
+        </Button>
+      )}
+      {(!address || connecting) && (
+        <ConnectWalletModal
+          setConnecting={setConnecting}
+          onClose={onConnectWalletClose}
+          isOpen={isConnectWalletOpen}
+        />
+      )}
     </Container>
   );
 };
 
-export default User;
+export default User;