CleverProgrammers · Strong10mede · Apr 16, 2023 · Apr 16, 2023 · May 18, 2023
diff --git a/components/Asset.js b/components/Asset.js
@@ -13,7 +13,7 @@ const styles = {
 
 const Asset = ({ coin, price, setData }) => {
   const setGraphColor = () => {
-    if (coin.change < 0) {
+    if (coin.percentage < 0) {
       return "#ef4b09";
     } else {
       return "#00ff1a";
@@ -67,9 +67,9 @@ const Asset = ({ coin, price, setData }) => {
         <div>{coin.name}</div>
         <div
           className={styles.percent}
-          style={{ color: coin.change < 0 ? "#ef4b09" : "green" }}
+          style={{ color: coin.percentage < 0 ? "#ef4b09" : "green" }}
         >
-          {coin.change}%
+          {coin.percentage}%
         </div>
       </div>
     </div>

diff --git a/components/AvailableBets.js b/components/AvailableBets.js
@@ -18,45 +18,50 @@ import { useGlobalState } from "../hooks";
 import { getSolAmount, getCanEnterBet } from "../utils";
 import { IoMdClose } from "react-icons/io";
 
-const AvailableBets = ({
-  setSelectedBet,
-  setShowModal,
-}) => {
-
-
-
-  // Static
-  const allBets = []
-
-  const staticCloseBet = () => {
-    console.log("Closing bet")
-  }
-  const staticClaimBet = () => {
-    console.log("Claiming bet")
-  }
+const AvailableBets = ({ setSelectedBet, setShowModal }) => {
+  const { allBets, closeBet, claimBet } = useGlobalState();
+  //solana stuff
 
   return (
     <div className={styles.availableBetsContainer}>
       <p className={styles.availableBetsTitle}>Available Bets</p>
       {allBets?.map((bet) => {
         return (
-          <div
-            key={bet.id.toString()}
-            className={styles.availableBetsItem}
-          >
-            <p className={styles.stockName}>
-              AMC
-            </p>
+          <div key={bet.id.toString()} className={styles.availableBetsItem}>
+            <p className={styles.stockName}>AMC</p>
             <div className={styles.currentStockPrice}>
               <p className={styles.currentStockPriceTitle}>
                 CURRENT POT AMOUNT
               </p>
-              <p className={styles.currentStockPriceAmount}>{getSolAmount(bet.amount)} SOL</p>
+              <p className={styles.currentStockPriceAmount}>
+                {getSolAmount(bet.amount)} SOL
+              </p>
             </div>
             {console.log(Object.keys(bet.state)[0].toUpperCase())}
+            {/*Have button that changes depending on the state of the bet */}
+            {Object.keys(bet.state)[0].toUpperCase() == "STARTED" ? (
+              <div className={styles.button} onClick={() => claimBet(bet)}>
+                CLAIM
+              </div>
+            ) : Object.keys(bet.state)[0].toUpperCase() == "PLAYERAWON" ? (
+              <div className={styles.availableBetsTitle}>PLAYER A WON</div>
+            ) : Object.keys(bet.state)[0].toUpperCase() == "PLAYERBWON" ? (
+              <div className={styles.availableBetsTitle}>PLAYER A WON</div>
+            ) : (
+              <div
+                className={styles.button}
+                onClick={() => {
+                  setSelectedBet(bet);
+                  setShowModal(true);
+                }}
+              >
+                ENTER
+              </div>
+            )}
 
-            <IoMdClose className="hover:text-[#ffffff] text-2xl mr-4"
-              onClick={() => staticCloseBet(bet)}
+            <IoMdClose
+              className="hover:text-[#ffffff] text-2xl mr-4"
+              onClick={() => closeBet(bet)}
             />
           </div>
         );
@@ -65,11 +70,8 @@ const AvailableBets = ({
       {allBets?.length === 0 && (
         <p className={styles.noAvailableBetsTitle}>No Available Bets</p>
       )}
-
     </div>
   );
-}
-
-export default AvailableBets
-
+};
 
+export default AvailableBets;
diff --git a/components/CustomModal.js b/components/CustomModal.js
@@ -31,19 +31,19 @@ const CustomModal = ({
   const [p2Guess, setP2Guess] = useState(0);
   const [low, setLow] = useState(selectedBet.low);
 
+  const { enterBet } = useGlobalState();
 
-  // Static 
-  const staticEnterbet = () => {
-    console.log("Closing bet")
-  }
-
+  useEffect(() => {
+    setHigh(selectedBet.high);
+    setLow(selectedBet.low);
+    // setSol(selectedBet.sol);
+  }, [selectedBet]);
 
   const onClose = () => {
-    setHigh(selectedBet.high)
-    setLow(selectedBet.low)
-    setShowModal(false)
-  }
-
+    setHigh(selectedBet.high);
+    setLow(selectedBet.low);
+    setShowModal(false);
+  };
 
   return (
     <Modal
@@ -53,9 +53,14 @@ const CustomModal = ({
     >
       <div className="flex flex-col justify-center items-center">
         <h1 className="text-[#ffffff] text-2xl">{selectedBet.stockName}</h1>
-        <p className="text-[#ffffff]">Length of Bet: 2 minutes {selectedBet.timeType}</p>
+        <p className="text-[#ffffff]">
+          Length of Bet: 2 minutes {selectedBet.timeType}
+        </p>
         <p className="text-[#ffffff]">Stock price: $4.9</p>
-        <p className="text-[#ffffff]">Entrance fee: {selectedBet ? getSolAmount(selectedBet.amount) : new BigNum} SOL</p>
+        <p className="text-[#ffffff]">
+          Entrance fee:{" "}
+          {selectedBet ? getSolAmount(selectedBet.amount) : new BigNum()} SOL
+        </p>
       </div>
 
       <div className={styles.formButtons}>
@@ -92,26 +97,31 @@ const CustomModal = ({
             value={p2Guess}
           />
         </div>
-        <div className="flex flex-row justify-between w-full px-2"> <input
-          type="submit"
-          value="Submit"
-          className={`${styles.button
+        <div className="flex flex-row justify-between w-full px-2">
+          {" "}
+          <input
+            type="submit"
+            value="Submit"
+            className={`${
+              styles.button
             }${" bg-[#5cdb5c] w-1/2 text-center mt-8 self-center px-2"}`}
-          onClick={(e) => {
-            e.preventDefault()
-            staticEnterBet(Number(p2Guess), selectedBet)
-          }}
-        /> <input
+            onClick={(e) => {
+              e.preventDefault();
+              enterBet(Number(p2Guess), selectedBet);
+            }}
+          />{" "}
+          <input
             type="submit"
             value="Cancel"
-            className={`${styles.button
-              }${" bg-[#ef4b09] w-1/2 text-center mt-8 self-center px-2"}`}
+            className={`${
+              styles.button
+            }${" bg-[#ef4b09] w-1/2 text-center mt-8 self-center px-2"}`}
             onClick={onClose}
-          /></div>
-
+          />
+        </div>
       </form>
     </Modal>
   );
-}
+};
 
-export default CustomModal
+export default CustomModal;
diff --git a/components/Header.js b/components/Header.js
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from "react";
 import Image from "next/image";
 import { AiOutlineSearch } from "react-icons/ai";
-
+import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 
 const styles = {
   container: "flex w-screen h-16 bg-black px-24 py-3 mb-5 fixed",
@@ -13,11 +13,11 @@ const styles = {
   searchInputWrapper: "text-gray-400 text-lg w-full",
   searchInput: "bg-transparent outline-none w-full",
   rightHeader: "flex items-center justify-end text-white gap-8",
-  menuItem: "cursor-pointer font-bold hover:text-green-500 duration-300 text-2xl",
+  menuItem:
+    "cursor-pointer font-bold hover:text-green-500 duration-300 text-2xl",
 };
 
 const Header = () => {
-
   return (
     <div className={styles.container}>
       <div className={styles.leftHeader}>{/* LOGO */}</div>
@@ -32,7 +32,7 @@ const Header = () => {
       <div className={styles.rightHeader}>
         <div className={styles.menuItem}>Rewards</div>
         <div className={styles.menuItem}>Portfolio</div>
-        <div className={styles.menuItem}>Connect Wallet</div>
+        <WalletMultiButton className={styles.menuItem} />
       </div>
     </div>
   );

diff --git a/components/PortfolioChart.js b/components/PortfolioChart.js
@@ -13,24 +13,24 @@ import React from "react";
 
 const PortfolioChart = ({ data }) => {
   const setGraphColor = () => {
-    if (data.change < 0) {
+    if (data.percentage < 0) {
       return "#ef4b09";
     } else {
       return "#00ff1a";
     }
   };
   const lineGraph = {
     labels: [
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sept",
-      "Oct",
-      "Noz",
-      "Dec",
-      "Jan",
+      "May 01, 2023",
+      "May 02, 2023",
+      "May 03, 2023",
+      "May 04, 2023",
+      "May 05, 2023",
+      "May 08, 2023",
+      "May 09, 2023",
+      "May 10, 2023",
+      "May 11, 2023",
+      "May 12, 2023",
     ],
     datasets: [
       {

diff --git a/data/asset.seed.js b/data/asset.seed.js
@@ -1,63 +1,90 @@
 export const STOCKDATA = [
   {
-    data: [10, 22, 34, 55, 72, 11, 22, 45, 92],
+    data: [5.65, 5.5, 5.74, 5.92, 5.89, 5.9, 5.54, 5.49, 5.34, 5.2, 5.14, 4.96],
     name: "AMC",
     priceKey: "E4m5GPq53mayAxMSH8NwPuC75m83mQ47zpdtNDtxVzPf",
-    price: 3.9,
-    change: -1,
+    price: 4.96,
+    change: 0.18,
+    percentage: -3.5,
+    ourpred: 4.86,
   },
   {
-    data: [18, 29, 64, 54, 49, 51, 66, 33, 42],
+    data: [
+      28077.6, 28669.1, 29023.6, 28842.1, 29513.2, 27670.6, 27634.9, 27603.3,
+      26983.5, 26799.2, 27183.9, 27035.3,
+    ],
     name: "BTC",
     priceKey: "HovQMDrbAgAYPCmHVSrezcSmkMtXSSUsLDFANExrZh2J",
-    price: "16,876",
-    change: 3,
+    price: "27035.3",
+    change: 148.6,
+    percentage: -0.55,
+    ourpred: 27082.2,
   },
   {
-    data: [33, 80, 44, 55, 20, 37, 40, 14, 33],
+    data: [
+      102.05, 103.63, 103.65, 104.0, 105.65, 105.83, 106.62, 110.19, 112.18,
+      110.26, 111.2, 113.4,
+    ],
     name: "AMZN",
     priceKey: "dZsHZaX1xYQE35pNNdnDYTYMkU6q1abz1xKw2sSg1XU",
-    price: 85,
-    change: 8,
+    price: 113.4,
+    change: 2.2,
+    percentage: 1.98,
+    ourpred: 114.6,
   },
   {
-    data: [11, 0, 34, 56, 32, 44, 67, 54, 31],
+    data: [
+      107.2, 105.32, 105.41, 104.69, 105.57, 107.77, 107.35, 111.75, 116.57,
+      117.51, 116.51, 119.51,
+    ],
     name: "GOOG",
     priceKey: "CZDpZ7KeMansnszdEGZ55C4HjGsMSQBzxPu6jqRm6ZrU",
     price: 89,
-    change: 9,
+    change: 3.0,
+    percentage: 2.57,
+    ourpred: 123.67,
   },
 ];
 export const CRYPTODATA = [
   {
-    data: [10, 22, 34, 55, 72, 11, 22, 45, 92],
-    name: "BSE",
-    price: 40,
-    change: 9,
+    data: [
+      1896.48, 1870.99, 1847.48, 1846.56, 1840.92, 1794.71, 1807.31, 1794.95,
+      1799.36, 1817, 11, 1823.98,
+    ],
+    name: "Ehtereum",
+    price: 1823.98,
+    change: 6.87,
+    percentage: 0.38,
   },
   {
-    data: [18, 29, 64, 54, 49, 51, 66, 33, 42],
-    name: "NSE",
-    price: 10,
-    change: 9,
+    data: [
+      1.0019, 1.0015, 1.0009, 1.0004, 1.0007, 1.0005, 1.0006, 1.0006, 1.0004,
+      1.0002, 1.0001,
+    ],
+    name: "Tether",
+    price: 1.0001,
+    change: 0.0001,
+    percentage: -0.01,
   },
   {
-    data: [33, 80, 44, 55, 20, 37, 40, 14, 33],
-    name: "SOL",
-    price: 33,
-    change: -2,
+    data: [
+      321.9, 320.9, 313.79, 312.21, 314.3, 307.5, 308.6, 310.71, 312.09, 313.4,
+      311.3,
+    ],
+    name: "BNB",
+    price: 311.3,
+    change: 2.1,
+    percentage: -0.67,
   },
   {
-    data: [11, 0, 34, 56, 32, 44, 67, 54, 31],
-    name: "GOT",
-    price: 70,
-    change: 9,
+    data: [
+      0.9982, 0.9987, 0.9992, 0.9994, 0.9993, 0.9995, 0.9995, 0.9995, 0.9996,
+      0.9997, 0.9998,
+    ],
+    name: "USDC",
+    price: 0.0001,
+    change: 0.0001,
   },
 ];
 
-export const STOCKNAMES = [
-  "AMZN",
-  "AMC",
-  "BTC",
-  "GOOGLE",
-]
+export const STOCKNAMES = ["AMZN", "AMC", "BTC", "GOOGLE"];