feat: connect front to api

lfglabs-dev · Jun 11, 2024 · fafad20 · fafad20
1 parent 5507f66
commit fafad20
Show file tree

Hide file tree

Showing 36 changed files with 1,719 additions and 296 deletions.
diff --git a/app/components/button.tsx b/app/components/button.tsx
@@ -5,7 +5,7 @@ import styles from "../styles/components/button.module.css";
 import { CircularProgress } from "@mui/material";
 
 type ButtonProps = {
-  onClick: () => void;
+  onClick?: () => void;
   children: string;
   icon?: React.ReactNode;
   width?: number;
@@ -24,7 +24,9 @@ const Button: FunctionComponent<ButtonProps> = ({
   const iconColor = variation === "default" ? "#4C6449" : "#1E2A3B";
   return (
     <div
-      className={`${styles.svgBorder} ${styles[variation]}`}
+      className={`${styles.svgBorder} ${styles[variation]} ${
+        onClick ? "cursor-pointer" : ""
+      }`}
       onClick={onClick}
       style={{ width: `${width ? width + "px" : "auto"} ` }}
     >

diff --git a/app/components/connection/selectNetwork.tsx → app/components/connection/connectModal.tsx b/app/components/connection/selectNetwork.tsx → app/components/connection/connectModal.tsx
@@ -17,7 +17,7 @@ type StarknetWalletConnectProps = {
   onWalletConnected: (network: NetworkType) => void;
 };
 
-const SelectNetwork: FunctionComponent<StarknetWalletConnectProps> = ({
+const ConnectModal: FunctionComponent<StarknetWalletConnectProps> = ({
   closeModal,
   open,
   onWalletConnected,
@@ -67,21 +67,19 @@ const SelectNetwork: FunctionComponent<StarknetWalletConnectProps> = ({
                 <span className={styles.titleBlue}>network</span>
               </div>
               <div className={styles.selectNetwork}>
-                {/* <EthereumConnect
-                  title="EVM wallet"
-                  onWalletConnected={onWalletConnected}
-                /> */}
                 <Button
                   onClick={connectEvm}
                   icon={<img src="/visuals/ethFilledIcon.svg" />}
                   width={300}
+                  variation="default-overlay"
                 >
                   EVM wallet
                 </Button>
                 <Button
                   onClick={() => setOpenStarknetModal(true)}
                   icon={<img src="/visuals/starknetIcon.svg" />}
                   width={300}
+                  variation="default-overlay"
                 >
                   Starknet wallet
                 </Button>
@@ -103,4 +101,4 @@ const SelectNetwork: FunctionComponent<StarknetWalletConnectProps> = ({
   );
 };
 
-export default SelectNetwork;
+export default ConnectModal;
diff --git a/app/components/countdown.tsx b/app/components/countdown.tsx
@@ -4,13 +4,27 @@ import React, { FunctionComponent, useEffect, useState } from "react";
 import styles from "../styles/components/countdown.module.css";
 import { formatTime } from "@/utils/stringService";
 
-// type CountdownProps = {};
+type CountdownProps = {
+  timestamp: number;
+};
 
-const Countdown: FunctionComponent = () => {
+const Countdown: FunctionComponent<CountdownProps> = ({ timestamp }) => {
+  const countdownDuration = 300; // todo: 5mn, move this into env variables ?
   const [timeRemaining, setTimeRemaining] = useState(120); // in seconds
   const formattedTime = formatTime(timeRemaining);
   const [minutes, seconds] = formattedTime.split(":");
 
+  useEffect(() => {
+    // any time the timestamp is updated we update the timeRemaining
+    const now = new Date().getTime(); // Current time in milliseconds
+    const timestampExpiration = timestamp + countdownDuration * 1000; // Expiration time based on the received timestamp
+    const secondsUntilExpiration = Math.floor(
+      (timestampExpiration - now) / 1000
+    );
+
+    setTimeRemaining(secondsUntilExpiration > 0 ? secondsUntilExpiration : 0);
+  }, [timestamp]);
+
   useEffect(() => {
     const timer = setInterval(() => {
       setTimeRemaining((prevTime) => (prevTime > 0 ? prevTime - 1 : 0));

diff --git a/app/components/resetEvm.tsx b/app/components/resetEvm.tsx
diff --git a/app/components/resetStarknet.tsx b/app/components/resetStarknet.tsx
diff --git a/app/components/stats.tsx b/app/components/stats.tsx
@@ -2,29 +2,42 @@
 
 import React, { FunctionComponent } from "react";
 import styles from "../styles/components/stats.module.css";
+import { ethers } from "ethers";
+import { minifyAddress } from "@/utils/stringService";
 
 type StatsProps = {
   isConnected: boolean;
+  remainingClicks: number;
+  totalClicks: number;
+  totalPlayers: number;
+  isFinished: boolean;
+  currentWinner?: string;
 };
 
-const Stats: FunctionComponent<StatsProps> = ({ isConnected }) => {
-  const remainingClicks: number = 0;
-  const timeClicked: number = 0;
-  const totalParticipants = 126702;
-
-  //todo: add a function that will get totalParticipants and time clicked
-
+const Stats: FunctionComponent<StatsProps> = ({
+  isConnected,
+  remainingClicks,
+  totalClicks,
+  totalPlayers,
+  isFinished,
+  currentWinner,
+}) => {
+  const getExplorerLink = (address: string) => {
+    ethers.isAddress(address)
+      ? `https://etherscan.io/address/${address}`
+      : `https://starkscan.co/contract/${address}`;
+  };
   return (
     <div className={styles.statsSections}>
       <div className={styles.statsSection}>
         <p>Time clicked</p>
-        <p>{timeClicked !== 0 ? timeClicked.toLocaleString("en-US") : "--"}</p>
+        <p>{totalClicks !== 0 ? totalClicks.toLocaleString("en-US") : "--"}</p>
       </div>
       <div className={styles.statsSection}>
         <p>Total participants</p>
-        <p>{totalParticipants.toLocaleString("en-US")}</p>
+        <p>{totalPlayers.toLocaleString("en-US")}</p>
       </div>
-      {isConnected ? (
+      {isConnected && !isFinished ? (
         <div className={styles.statsSection}>
           <p>Click number</p>
           <p>
@@ -34,6 +47,30 @@ const Stats: FunctionComponent<StatsProps> = ({ isConnected }) => {
           </p>
         </div>
       ) : null}
+      {isFinished ? (
+        <div className={styles.statsSection}>
+          <p>Reward</p>
+          <p>5 ETH</p>
+        </div>
+      ) : null}
+
+      {isFinished ? (
+        <div className={styles.winnerWrapper}>
+          <div className={styles.winnerSection}>
+            <p>
+              Congratulations! The winner will receive their funds at this
+              address
+            </p>
+            <div
+              className="cursor-pointer flex flex-row items-center gap-3"
+              onClick={() => getExplorerLink(currentWinner as string)}
+            >
+              <p>{minifyAddress(currentWinner)}</p>
+              <img alt="arrow icon" src="/visuals/arrowIcon.svg" width={15} />
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };