text: import React, { useState, useEffect } from "react";
  import Select from "react-select";
  import { actionCreators } from "../store";
  import { bindActionCreators } from "redux";
  import { useDispatch, useSelector } from "react-redux";
  import StakeModal from "../components/stakeModal";
  import { setUserMetadata } from "../adapters/moralis";
  import {
    getBalance,
    getMyStake,
    getStake,
    mintSpect,
  } from "../adapters/contracts";
  import { useMoralis } from "react-moralis";
  import GlobalLoader from "../components/globalLoader";
  import { customStyles, designOptions } from "../utils/constants";
  import { fromWei } from "../utils/formatter";
  
  const Staking = () => {
    const profile = useSelector((state) => state.profile);
    const [showModal, setShowModal] = useState(false);
    const [loading, setLoading] = useState(true);
    const [refresh, setRefresh] = useState(false);
    const dispatch = useDispatch();
    const stake = useSelector((state) => state.stake);
    const { updateTotal, updateLocked, updateBalance } = bindActionCreators(
      actionCreators,
      dispatch
    );
  
    const contract = useSelector((state) => state.contracts.tokenContract);
    const userContract = useSelector((state) => state.contracts.userContract);
  
    const { setEmail, setProfileJobType } = bindActionCreators(
      actionCreators,
      dispatch
    );
    const { user } = useMoralis();
    useEffect(() => {
      console.log("hi");
      setLoading(true);
      setEmail(user?.get("email"));
      setProfileJobType({
        label: user?.get("preference"),
        value: user?.get("preference"),
      });
      userContract
        .getMyStake()
        .then((res) => {
          updateTotal(parseInt(fromWei(res)));
        })
        .catch((err) => {
          updateTotal(0);
        });
      userContract
        .getMyLockedStake()
        .then((res) => {
          updateLocked(parseInt(fromWei(res)));
        })
        .catch((err) => {
          updateLocked(0);
        });
      getBalance(user?.get("ethAddress"), contract).then((res) => {
        updateBalance(parseInt(fromWei(res)));
      });
      setLoading(false);
    }, [user, refresh]);
  
    if (loading) {
      return <GlobalLoader />;
    }
    return (
      <div className="text-gray-500 font-mono p-3 h-full text-base">
        <StakeModal
          showModal={showModal}
          setShowModal={setShowModal}
          setLoading={setLoading}
          setRefresh={setRefresh}
          refresh={refresh}
        />
        <span className=" text-2xl">Profile</span>
        <div className="flex flex-row mt-12 text-xl">
          <div className="flex flex-col mr-12">
            <span className="font-bold">Total Stake</span>
            <span className="flex">{stake.total} DSpect</span>
          </div>
          <div className="flex flex-col mr-12">
            <span className="font-bold">Total Locked Stake</span>
            <span className="flex justify-center">{stake.locked} DSpect</span>
          </div>
          <div className="flex flex-col mr-12">
            <span className="font-bold">Available Tokens</span>
            <span className="flex justify-center">{stake.balance} DSpect</span>
          </div>
          <div className="flex flex-col mr-12">
            <span className="font-bold">Add to stake</span>
            <button
              className="flex justify-center transform transition duration-500 ease-linear hover:scale-110"
              onClick={() => setShowModal(true)}
            >
              <svg
                className="w-8 h-8 mr-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </button>
          </div>
          <div className="flex flex-col mr-12">
            <span className="font-bold">Mint DSpect</span>
            <button
              className="flex justify-center transform transition duration-500 ease-linear hover:scale-110"
              onClick={() => {
                setLoading(true);
                mintSpect(contract).then(() => {
                  setLoading(false);
                  setRefresh(!refresh);
                });
              }}
            >
              <svg
                className="w-8 h-8"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
                />
              </svg>
            </button>
          </div>
        </div>
        <div className="flex flex-row p-5">
          <div className="flex flex-col w-2/3">
            <div className="p-2">Email Address</div>
            <input
              type="text"
              className="flex-1 p-2 bg-transparent outline-none w-3/4 border-1 border-ronchi-300 rounded-xl focus:shadow"
              value={profile.email}
              onChange={(evt) => setEmail(evt.target.value)}
            />
            <div className="p-2">Job Preference</div>
            <Select
              value={profile.jobType}
              options={designOptions}
              className="flex-1"
              classNamePrefix="select"
              styles={customStyles}
              className="w-3/4 border-1 p-1 border-ronchi-300 mt-4 rounded-xl focus:shadow"
              onChange={(evt) => setProfileJobType(evt)}
            />
            <button
              className="border-1 border-gray-500 px-2 w-1/5 rounded-xl mt-2 transition-colors duration-1000 ease-in-out hover:bg-gray-500 hover:text-ronchi-50"
              onClick={() => {
                setLoading(true);
                setUserMetadata(profile.email, profile.jobType.value).then(() => {
                  setLoading(false);
                });
              }}
            >
              Submit
            </button>
          </div>
          <div className="flex flex-col w-1/3 mr-4">
            <span className="font-bold font-xl">Profile</span>
            Enter your email address to receive all the project updates and also
            provide your job type preference to view those jobs in your dashboard.
          </div>
        </div>
      </div>
    );
  };
  
  export default Staking;
  