updates

src/App.js

@@ -2,19 +2,89 @@ import './App.css';
 import Navbar from './components/Navbar_module/Navbar';
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import Home from './pages/Home/Home';
+import "@rainbow-me/rainbowkit/dist/index.css";
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import CloseIcon from '@mui/icons-material/Close';
+import { alchemyProvider } from "wagmi/providers/alchemy";
+import { publicProvider } from "wagmi/providers/public";
+import { darkTheme } from "@rainbow-me/rainbowkit";
+import { chain, configureChains, createClient, WagmiConfig } from "wagmi";
 
 
 function App() {
+  const BSCchain = {
+    id: 97,
+    name: "BSC test",
+    network: "BSC test",
+    iconUrl: "https://www.logo.wine/a/logo/Binance/Binance-Icon-Logo.wine.svg",
+    iconBackground: "#fff",
+    nativeCurrency: {
+      decimals: 18,
+      name: "Binance Smart Chain",
+      symbol: "BNB",
+    },
+    rpcUrls: {
+      default: "https://bsctestapi.terminet.io/rpc",
+    },
+    blockExplorers: {
+      default: { name: "SnowTrace", url: "https://bscscan.com" },
+      etherscan: { name: "SnowTrace", url: "https://bscscan.com" },
+    },
+    testnet: false,
+  };
+
+  const Avaxchain = {
+    id: 43114,
+    name: "Avalanche Network",
+    network: "Avalanche Network",
+    iconUrl: "https://cryptologos.cc/logos/avalanche-avax-logo.png",
+    iconBackground: "#fff",
+    nativeCurrency: {
+      decimals: 18,
+      name: "Avalanche",
+      symbol: "AVAX",
+    },
+    rpcUrls: {
+      default: "https://rpc.ankr.com/avalanche",
+    },
+    blockExplorers: {
+      default: { name: "SnowTrace", url: "https://snowtrace.io/" },
+      etherscan: { name: "SnowTrace", url: "https://snowtrace.io/" },
+    },
+    testnet: false,
+  };
+
+  const { chains, provider } = configureChains(
+    [Avaxchain, BSCchain, chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
+    [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), publicProvider()]
+  );
+
+  const { connectors } = getDefaultWallets({
+    appName: "baby-cracken",
+    chains,
+  });
+  const wagmiClient = createClient({
+    autoConnect: true,
+    connectors,
+    provider,
+  });
+
   return (
     <>
-
-      <Router>
+          <WagmiConfig client={wagmiClient}>
+            <RainbowKitProvider
+              chains={chains}
+              theme={darkTheme({ borderRadius: "medium" })}
+            >
+          <Router>
             <div>
               <Routes>
                 <Route exact path="/" element={<Home />} />
               </Routes>
             </div>
           </Router>
+          </RainbowKitProvider>
+          </WagmiConfig>
     </>
   );
 }

src/components/Navbar_module/Navbar.jsx

@@ -1,8 +1,14 @@
 import React, { useState } from "react";
 import logo from "../../images/logo.png";
 import './Navbar.css';
+import { ethers } from 'ethers';
 import { GiHamburgerMenu } from "react-icons/gi";
 import { NavLink } from "react-router-dom";
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import {useSigner, useProvider} from 'wagmi'
+import tokenAbi from '../../tokenAbi.json'
+import stakingAbi from '../../stakeAbi.json'
+import value from '../../value.json'
 
 const Navbar = () => {
   const [isOpen, setOpen] = useState(false);
@@ -12,6 +18,20 @@ const [active, setActive] = useState("1");
     setActive(event.target.id);
   };
 
+  const { data: signer, isError, isLoading } = useSigner()
+  const provider = useProvider();
+
+  const staking = new ethers.Contract(
+    value.stakingAddress,
+    stakingAbi,
+    signer,
+  )
+  const token = new ethers.Contract(
+    value.stakingToken,
+    tokenAbi,
+    signer,
+  )
+
   return (
     <nav className="main-nav">
       <div className="logo">
@@ -79,7 +99,8 @@ const [active, setActive] = useState("1");
         {/* hamburger menu code below */}
       </div>
        <div className="button">
-        <button className="contact-btn">connect wallet</button>
+        {/* <button className="contact-btn">connect wallet</button> */}
+        <ConnectButton/>
         <div className="ham">
           <GiHamburgerMenu onClick={() => setOpen(!isOpen)} />
         </div>

src/pages/Home/Card.js

@@ -5,7 +5,7 @@ import bitcoin from '../../images/bitcoin.png'
 import light from '../../images/light.png'
 import gift from '../../images/gift.png'
 
-function Card({ Active ,setIsOpen}) {
+function Card({ Active ,setIsOpen,onChangeInput,stakeToken}) {
 
   return (
     <div className='home__bottomCard'>

src/pages/Home/HomePage.jsx

@@ -1,17 +1,142 @@
-import React, { useState } from 'react'
+import React, { useState,useEffect } from 'react'
 import sandclock from '../../images/sandclock.png';
 import search from '../../images/search.png'
 import './HomePage.css';
+import "@rainbow-me/rainbowkit/dist/index.css";
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import CloseIcon from '@mui/icons-material/Close';
+import { alchemyProvider } from "wagmi/providers/alchemy";
+import { publicProvider } from "wagmi/providers/public";
+import { darkTheme } from "@rainbow-me/rainbowkit";
+import { chain, configureChains, createClient, WagmiConfig } from "wagmi";
+import tokenAbi from '../../tokenAbi.json'
+import stakingAbi from '../../stakeAbi.json'
+import value from '../../value.json'
 import Modal from './Modal'
-
+import {useSigner, useProvider} from 'wagmi'
+import { ethers } from 'ethers';
 import Card from './Card';
 
 function HomePage() {
-
+  const { data: signer, isError, isLoading } = useSigner()
   const [Active, setActive] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
+  const [myaddress, setMyaddress] = useState()
+  const [poolId, setPoolId] = useState(1)
+  const [errors, setError] = useState()
+  const [amount, setAmount] = useState(Number)
+  const [istokenapproved, settokenapproved] = useState(false)
+
+  const staking = new ethers.Contract(
+    value.stakingAddress,
+    stakingAbi,
+    signer,
+  )
+  const token = new ethers.Contract(
+    value.stakingToken,
+    tokenAbi,
+    signer,
+  )
+
+  function refreshData (signer) {
+    if(signer){
+      signer.getAddress().then((res)=>{setMyaddress(res)})
+      // getUserInfo()
+      // getUserLockTime()
+      // getPoolInfo()
+      // getTokenBalance()
+      // getWhiteListAddresses()
+      checkApproved()
+      // getClaimableTokens()
+    }
+  }
+
+  const checkApproved = async() => {
+    let userAddress = await signer.getAddress()
+    const isApproved = await token.allowance(userAddress, value.stakingAddress);
+    const totaltokenapproved = isApproved.toString()
+    if(totaltokenapproved.length > 2){
+      console.log("approved", totaltokenapproved);
+      settokenapproved(true)
+    }
+    else{
+      console.log("Not Approved",totaltokenapproved);
+      settokenapproved(false)
+
+    }
+  }
 
+  async function approve() {
+    if(!istokenapproved){
+      console.log('Not Approved')
+      try{
+        let _amount = ethers.utils.parseEther("10000000000000000000");
+        let tx = await token.approve(value.stakingAddress, _amount);
+        let reciept = await tx.wait();
+        console.log ("Approve Tx Receipt: ", reciept);
+      }catch (error) {
+        console.log (error);
+        // alert(error.data.message);
+      }
+    }
+    else{
+      console.log('already approved')
+    }
+
+  }
+
+  async function stakeTokens () {
+    // if(walletAddressInfo){
+      try{
+        if(amount === undefined){
+          alert("Enter Amount First")
+        }
+        else{
+          await approve()
+          let _amount = ethers.utils.parseEther(amount);
+          // console.log (_amount)
+          let tx = await staking.stakeTokens(poolId, _amount);
+          let reciept = await tx.wait();
+          console.log ("Stake Tx Receipt: ", reciept);
+          refreshData(signer)
+        }              
+      }catch (error) {
+        console.log (error);
+        try {
+          setError(error.error.data.message)
+        } catch {
+          setError("Something went wrong, please try again!")
+        }
+      }
+    // }
+    // else{
+    //   alert('Your Wallet Is Not Witelisted For Staking')
+    // }
+  }
+
+  const onChangeInput = ({target}) => {
+    switch (target.id) {
+      case "stake":
+        setAmount(target.value)
+          console.log("Amount:", amount);
+        break;
+
+      // case "unstake":
+      //   setWithdrawInput(target.value);
+      //   break;
+
+      // case "viewStruct":
+      //   setstakeDetails(target.value);
+      //   break;
+    default:
+    }
+  }
+
+
+
+  useEffect(()=>{
+    refreshData(signer)
+  },[signer, poolId])
 
   return (
     <div className='HomePage'>
@@ -54,26 +179,27 @@ function HomePage() {
             </div>
           </div>
           <div className='home__bottomGrid'>
+
             {Active ?
               <>
                 <Card Active={Active} setIsOpen={setIsOpen} />
             <Card Active={Active} setIsOpen={setIsOpen} />
             <Card Active={ Active} setIsOpen={setIsOpen} />
             <Card Active={ Active} setIsOpen={setIsOpen} />
-            <Card Active={ Active} setIsOpen={setIsOpen} />
+            <Card Active={ Active} approve={approve}  setIsOpen={setIsOpen} />
               </>
               :
               <>
                 <Card Active={Active} />
                 <Card Active={Active} />
-                <Card Active={ Active} />
+                <Card Active={ Active}/>
               </>
             }
           </div>
 
         </div>
       </div>
-      {isOpen && <Modal setIsOpen={setIsOpen} Active={ Active } />}
+      {isOpen && <Modal setIsOpen={setIsOpen} Active={ Active } onChangeInput ={onChangeInput} stakeTokens={stakeTokens}/>}
 
     </div>
   )

src/pages/Home/Modal.js

@@ -1,14 +1,22 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import './Modal.css'
+import { ethers } from 'ethers';
 import light from '../../images/light.png'
 import electro from '../../images/electro.png'
 import CloseIcon from '@mui/icons-material/Close';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 
-function Modal({setIsOpen}) {
+
+
+function Modal({setIsOpen,onChangeInput,stakeTokens}) {
 
   const [Active, setActive] = useState(true);
   const [perActive,setperActive] = useState("25")
 
+  const [istokenapproved, settokenapproved] = useState(false)
+
+  const [apy, setApy] = useState(0);
+
   return (
     <div className='modal__background'>
       <div className='modal__card'>
@@ -58,7 +66,7 @@ function Modal({setIsOpen}) {
             <div className='modal__descBar'>
               <div className='modal__selectBox'>
                 <form>
-                  <label for="cars" className='modal__selectLabel'>USDC</label>
+                  <label htmlFor="cars" className='modal__selectLabel'>USDC</label>
                   <select className='modal__selectDrop' id="cars" name="cars">
                     <option></option>
                     {/* <option value="volvo">Volvo</option>
@@ -69,7 +77,14 @@ function Modal({setIsOpen}) {
                 </form>
               </div>
               <div className='modal__value'>
-                0
+              <input 
+              type = "text" 
+              placeholder="Input amount" 
+              className= 'modal__input'
+              // value = {addressInput}
+              onChange = {onChangeInput}
+              id = "stake"
+            />
               </div>
             </div>
             <div className='modal__descOption'>
@@ -81,7 +96,7 @@ function Modal({setIsOpen}) {
             className={'modal__cardButton ' + (Active
             ? ''
             : 'modal--ended')}
-            onClick={() => setIsOpen(true)}>
+            onClick={stakeTokens}>
             {Active
               ? "Stake"
               : "Ended"}

src/stakeAbi.json

@@ -0,0 +1 @@
+[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":true,"internalType":"uint256","name":"pid","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Deposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":true,"internalType":"uint256","name":"pid","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"EmergencyWithdraw","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"}],"name":"OwnershipRenounced","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"}],"name":"TransferOwnerShip","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":true,"internalType":"uint256","name":"pid","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Withdraw","type":"event"},{"inputs":[{"internalType":"address","name":"_tokenAddress","type":"address"},{"internalType":"uint256","name":"_maxPoolSize","type":"uint256"},{"internalType":"uint256","name":"_maxContribution","type":"uint256"},{"internalType":"uint256","name":"_reward","type":"uint256"},{"internalType":"uint256","name":"_emergencyFees","type":"uint256"},{"internalType":"uint256","name":"_lockDays","type":"uint256"},{"internalType":"bool","name":"_poolType","type":"bool"},{"internalType":"bool","name":"_poolActive","type":"bool"}],"name":"addPool","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"address[]","name":"_whitelistAddresses","type":"address[]"}],"name":"addWhitelist","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"}],"name":"claimTokens","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"address","name":"_user","type":"address"}],"name":"claimableRewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"bool","name":"_lock","type":"bool"}],"name":"emergencyLock","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"}],"name":"emergencyWithdraw","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"address","name":"_user","type":"address"}],"name":"getUserLockTime","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"poolInfo","outputs":[{"internalType":"address","name":"tokenAddress","type":"address"},{"internalType":"uint256","name":"maxPoolSize","type":"uint256"},{"internalType":"uint256","name":"currentPoolSize","type":"uint256"},{"internalType":"uint256","name":"maxContribution","type":"uint256"},{"internalType":"uint256","name":"reward","type":"uint256"},{"internalType":"uint256","name":"emergencyFees","type":"uint256"},{"internalType":"uint256","name":"lockDays","type":"uint256"},{"internalType":"bool","name":"poolType","type":"bool"},{"internalType":"bool","name":"poolActive","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"poolLength","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"stakeTokens","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"}],"name":"unstakeTokens","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"uint256","name":"_lockDays","type":"uint256"}],"name":"updateLockDays","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"uint256","name":"_maxPoolSize","type":"uint256"}],"name":"updateMaxPoolSize","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"bool","name":"_poolActive","type":"bool"}],"name":"updatePoolActive","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"bool","name":"_poolType","type":"bool"}],"name":"updatePoolType","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_pid","type":"uint256"},{"internalType":"uint256","name":"_reward","type":"uint256"}],"name":"updateReward","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"usdcAddress","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"address","name":"","type":"address"}],"name":"userInfo","outputs":[{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"uint256","name":"stakingTime","type":"uint256"},{"internalType":"uint256","name":"rewardClaimed","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"address","name":"","type":"address"}],"name":"whitelistedAddress","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"withdrawEth","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_tokenAddress","type":"address"}],"name":"withdrawLockedTokens","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"}]