From 058cb705dc6eef2637be1518104081349abf1e32 Mon Sep 17 00:00:00 2001
From: thomas <thomas.se.wagner@tum.de>
Date: Sun, 17 Mar 2024 06:25:49 +0100
Subject: [PATCH] first frontend integration

---
 frontend/package.json              |  1 +
 frontend/src/components/Navbar.tsx | 91 +++++++++++++++++++++++++++++-
 2 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 03cfbe7..49ce852 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "antd": "^5.15.2",
+    "hardhat-ethers": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index d760c93..4dcffe6 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -2,6 +2,18 @@ import { Button, Modal, notification } from "antd";
 import React, { useState } from "react";
 import { useSDK } from "@metamask/sdk-react";
 import { Typography } from "antd";
+import { FhenixClient, generatePermit } from 'fhenixjs';
+import { Contract, Eip1193Provider, ethers } from 'ethers';
+import type { SupportedProvider, HardhatEthersProvider } from "fhenixjs";
+import { BrowserProvider } from "ethers";
+
+
+type ExtendedProvider = SupportedProvider & {
+  getTransactionReceipt(txHash: string): Promise<ethers.TransactionReceipt>;
+  send(method: string, params: any[] | Record<string, any>): Promise<any>;
+  getSigner(): Promise<any>;
+  getBalance(address: string): Promise<any>;
+};
 
 
 const Navbar: React.FC = () => {
@@ -9,12 +21,45 @@ const Navbar: React.FC = () => {
 
   const { Text, Link } = Typography;
   const [account, setAccount] = useState<string>();
-  const { sdk, connected, connecting, provider, chainId } = useSDK();
+  const { sdk, connected, connecting, chainId } = useSDK();
   const metaMaskAccount = (
     <Button shape="round" type="primary" className={"bg-primary"}>
       {account}
     </Button>
   );
+  var provider =  new BrowserProvider(window.ethereum as Eip1193Provider);
+  // const client = new FhenixClient({provider});
+
+  //const provider = new BrowserProvider(window.ethereum);
+
+
+  const abi = ["function startGame() public", "function joinGame() public", "function bet() public"]
+  //const signer = account;
+
+  //const signer = await provider.getSigner();
+
+
+  const contract = new Contract("0x0", abi);
+  //const auctionContract = new ethers.Contract(TokenContractDeployment.address, ExampleToken.abi, signer);
+
+
+  function getProvider() {
+    if (provider === null) {
+      // @ts-ignore
+      provider = new BrowserProvider(window.ethereum);
+    }
+    return provider;
+  }
+
+  //function initFHEClient() {
+  //  fheClient.value = new FhenixClient({ provider: provider as HardhatEthersProvider as SupportedProvider });
+  //}
+  
+  //function getFheClient() {
+  //  return fheClient.value;
+ // }
+
+
   const connect = async () => {
     try {
       const accounts = await sdk?.connect();
@@ -27,6 +72,48 @@ const Navbar: React.FC = () => {
     }
   };
 
+  const startGame = async () => {
+    try {
+      provider = getProvider();
+      const signer = await provider.getSigner();
+      const contract = new Contract("0x82FBF91aE0093Eeac15D7941cD2a2Db6B4bbbAd2", abi, signer);
+      const tx = await contract.startGame();
+      await tx.wait();
+      console.log(tx);
+    } catch (err) {
+      console.warn("failed to start game..", err);
+      openNotification();
+    }
+  }
+
+  const joinGame = async () => {
+    try {
+      provider = getProvider();
+      const signer = await provider.getSigner();
+      const contract = new Contract("0x82FBF91aE0093Eeac15D7941cD2a2Db6B4bbbAd2", abi, signer);
+      const tx = await contract.joinGame();
+      await tx.wait();
+      console.log(tx);
+    } catch (err) {
+      console.warn("failed to join game..", err);
+      openNotification();
+    }
+  }
+
+  const bet = async () => {
+    try {
+      provider = getProvider();
+      const signer = await provider.getSigner();
+      const contract = new Contract("0x82FBF91aE0093Eeac15D7941cD2a2Db6B4bbbAd2", abi, signer);
+      const tx = await contract.joinGame();
+      await tx.wait();
+      console.log(tx);
+    } catch (err) {
+      console.warn("failed to join game..", err);
+      openNotification();
+    }
+  }
+
   const openNotification = () => {
     api.info({
       message: `Connection failed`,
@@ -41,7 +128,7 @@ const Navbar: React.FC = () => {
         <Button type={"primary"} className="text-table_black bg-white">
           {account}
         </Button>
-        <Button type={"primary"} className="text-table_black bg-white">
+        <Button type={"primary"} className="text-table_black bg-white" onClick={joinGame}>
           {account}
         </Button>