From 5d86696294d9a3181d0b7cd802bfd08e3bb97281 Mon Sep 17 00:00:00 2001
From: Najatul Muslim Dinatra <najatulmuslimdinatra@gmail.com>
Date: Thu, 8 Aug 2024 23:10:14 +0700
Subject: [PATCH] on progress integration

---
 apps/web/src/app/api/submit-bottle/route.ts |  11 +-
 apps/web/src/app/pages/topbarContent.tsx    | 115 ++++++++++++--------
 2 files changed, 81 insertions(+), 45 deletions(-)

diff --git a/apps/web/src/app/api/submit-bottle/route.ts b/apps/web/src/app/api/submit-bottle/route.ts
index 36b3647..ae547ac 100644
--- a/apps/web/src/app/api/submit-bottle/route.ts
+++ b/apps/web/src/app/api/submit-bottle/route.ts
@@ -3,14 +3,21 @@ import { ethers } from "ethers";
 import tokenJson from "../../../../../../out/BottleToken.sol/XottleToken.json";
 
 const provider = new ethers.providers.JsonRpcProvider(
-  `https://lisk-testnet.gateway.tatum.io`
+  `https://lisk-sepolia.drpc.org/`
 );
 const wallet = new ethers.Wallet(
   process.env.LISK_TESTNET_PRIVATE_KEY as string,
   provider
 );
 
-const tokenAddress = "0xCa4972A5EE99d35e8D3E827Dce8C8B9870BaEBc4";
+console.log(process.env.LISK_TESTNET_PRIVATE_KEY);
+if (!provider || !process.env.LISK_TESTNET_PRIVATE_KEY) {
+  throw new Error(
+    "Environment variables LISK_TESTNET_RPC_URL and LISK_TESTNET_PRIVATE_KEY must be set"
+  );
+}
+
+const tokenAddress = "0xCB7220aFd984F6377104F731676bB67Fb170a9Dd";
 const tokenContract = new ethers.Contract(tokenAddress, tokenJson.abi, wallet);
 
 export const userBottleCounts: Record<string, number> = {};
diff --git a/apps/web/src/app/pages/topbarContent.tsx b/apps/web/src/app/pages/topbarContent.tsx
index 1d8931c..6b1c302 100644
--- a/apps/web/src/app/pages/topbarContent.tsx
+++ b/apps/web/src/app/pages/topbarContent.tsx
@@ -1,61 +1,90 @@
-"use client"
-
-import { Scanner } from '@yudiel/react-qr-scanner';
-import React, { useState } from 'react';
-
-
-
+"use client";
 
+import { Scanner } from "@yudiel/react-qr-scanner";
+import { ethers } from "ethers";
+import React, { useState, useEffect } from "react";
 
+declare global {
+  interface Window {
+    ethereum: any;
+  }
+}
 
 const Content_top = () => {
-
   const [scanResult, setScanResult] = useState<string | null>(null);
   const [message, setMessage] = useState("");
   const [userAddress, setUserAddress] = useState<string | null>(null);
 
-  const handleScan = async (result: any) => {
-    if (result) {
-      setScanResult(result.text);
-  
-      const amount = "1"; // Example bottle amount
-  
-      if (userAddress) {
+  useEffect(() => {
+    const connectWallet = async () => {
+      if (window.ethereum) {
         try {
-          const response = await fetch("/api/submit-bottle", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              userAddress,
-              amount,
-              spenderAddress: userAddress,
-            }),
+          const accounts = await window.ethereum.request({
+            method: "eth_requestAccounts",
           });
-  
-          if (response.ok) {
-            const data = await response.json();
-            setMessage("Bottle submitted successfully!");
-          } else {
-            const errorData = await response.json();
-            //setMessage(Error: ${errorData.error});
-            console.log("error")
-          }
-        } catch (error: any) {
-          //setMessage(Error: ${error.message});
+          setUserAddress(accounts[0]);
+        } catch (error) {
+          console.error("Error connecting wallet:", error);
         }
       } else {
-        setMessage("Please connect your wallet.");
+        alert("Please install MetaMask");
       }
+    };
+    connectWallet();
+  }, []);
+
+  const handleScan = async (result: any) => {
+    if (result) {
+      console.log("result", result);
+      setScanResult(result.text);
+      hitSubmitBottle();
+    }
+  };
+
+  const hitSubmitBottle = async () => {
+    if (userAddress) {
+      try {
+        const amount = "1";
+        const response = await fetch("/api/submit-bottle", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userAddress,
+            amount,
+            spenderAddress: userAddress,
+          }),
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          console.log(data);
+          console.log("Bottle submmited");
+          setMessage("Bottle submitted successfully!");
+        } else {
+          const errorData = await response.json();
+          //setMessage(Error: ${errorData.error});
+          console.log("error");
+        }
+      } catch (error: any) {
+        //setMessage(Error: ${error.message});
+      }
+    } else {
+      setMessage("Please connect your wallet.");
     }
   };
 
   const [isButtonClicked, setIsButtonClicked] = useState(false);
 
-  const handleClick = () => {
+  const handleClick = async () => {
     setIsButtonClicked(true);
-    handleScan(scanResult);
+    // const Ethereum = (window as any).ethereum;
+    // const provider = new ethers.providers.Web3Provider(Ethereum);
+    // const Account_ = provider.getSigner();
+    // const address = await Account_.getAddress();
+
+    // setUserAddress(address);
   };
 
   return (
@@ -67,12 +96,12 @@ const Content_top = () => {
       {!isButtonClicked ? (
         <button onClick={handleClick}>Scan Now</button>
       ) : (
-        <div id='CamScan'>
-          <Scanner onScan={(result) => console.log(result)} />
+        <div id="CamScan">
+          <Scanner onScan={handleScan} />
         </div>
       )}
     </div>
   );
-}
+};
 
-export default Content_top;
\ No newline at end of file
+export default Content_top;