Unstake feature for end of active round

packages/react-app/src/components/Rounds.jsx

@@ -18,12 +18,11 @@ const Rounds = ({
   address,
   readContracts,
   writeContracts,
-  unstake,
   migrate,
   round,
   latestRound,
+  roundEnded,
   mainnetProvider,
-  unstakeUsers,
   userSigner,
   targetNetwork,
   roundData,
@@ -32,14 +31,22 @@ const Rounds = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [stakingType, setStakingType] = useState("self");
 
-  // console.log("view new data ", data, error);
+  const unstake = async amount => {
+    tx(writeContracts.IDStaking.unstake(round + "", ethers.utils.parseUnits(amount)));
+  };
+
+  const unstakeUsers = async users => {
+    tx(writeContracts.IDStaking.unstakeUsers(round + "", users));
+  };
 
   return (
     <>
       <div className="text-gray-600 body-font">
         <StakeItem
           icon={<UserOutlined style={{ fontSize: "25px" }} />}
           title="Self Staking"
+          roundEnded={roundEnded}
+          unstake={unstake}
           description="Stake GTC on yourself"
           amount={getSelfStakeAmount(roundData)}
           buttonText={getSelfStakeAmount(roundData) ? "Modify Stake" : "Stake"}
@@ -51,6 +58,8 @@ const Rounds = ({
 
         <StakeItemCommunity
           icon={<UsergroupAddOutlined style={{ fontSize: "25px" }} />}
+          roundEnded={roundEnded}
+          unstakeUsers={unstakeUsers}
           title="Community Staking"
           description="Stake GTC on other people"
           amount={getCommunityStakeAmount(roundData)}

packages/react-app/src/components/StakeItem.jsx

@@ -1,6 +1,7 @@
 import React from "react";
+import UnstakeButton from "./UnstakeButton";
 
-const StakeItem = ({ icon, title, description, amount, buttonText, buttonHandler }) => {
+const StakeItem = ({ icon, roundEnded, unstake, title, description, amount, buttonText, buttonHandler }) => {
   return (
     <div className="flex items-start md:items-center mx-auto border-b pb-10 mb-10 border-divider flex-col md:flex-row">
       <div className="flex flex-1 items-center justify-start">
@@ -16,12 +17,16 @@ const StakeItem = ({ icon, title, description, amount, buttonText, buttonHandler
         <h2 className="text-gray-900 text-lg title-font font-medium mb-0">{amount} GTC</h2>
         <span className="leading-relaxed text-base">Staked</span>
       </div>
-      <button
-        onClick={buttonHandler}
-        className="flex md:max-w-button w-full justify-center text-white text-center bg-purple-connectPurple border-0 py-2 focus:outline-none hover:bg-indigo-600 rounded-sm text-lg font-miriam-libre"
-      >
-        <span>{buttonText}</span>
-      </button>
+      {roundEnded ? (
+        <UnstakeButton amount={amount} handler={() => unstake(amount)} />
+      ) : (
+        <button
+          onClick={buttonHandler}
+          className="flex md:max-w-button w-full justify-center text-white text-center bg-purple-connectPurple border-0 py-2 focus:outline-none hover:bg-indigo-600 rounded-sm text-lg font-miriam-libre"
+        >
+          <span>{buttonText}</span>
+        </button>
+      )}
     </div>
   );
 };

packages/react-app/src/components/StakeItemCommunity.jsx

@@ -3,17 +3,26 @@ import React from "react";
 // Format User Address
 import DisplayAddressEns from "./DisplayAddressEns";
 import { formatAmountUnits } from "./StakingModal/utils";
+import UnstakeButton from "./UnstakeButton";
 
 const StakeItemCommunity = ({
   icon,
   title,
+  roundEnded,
   description,
   amount,
+  unstakeUsers,
   buttonText,
   buttonHandler,
   roundData,
   mainnetProvider,
 }) => {
+  const unstakeHandler = async () => {
+    const users = roundData.map(i => i?.to?.address);
+
+    await unstakeUsers(users);
+  };
+
   return (
     <div className="border-divider border-b">
       <div className="flex items-start md:items-center mx-auto pb-4 flex-col md:flex-row">
@@ -30,12 +39,16 @@ const StakeItemCommunity = ({
           <h2 className="text-gray-900 text-lg title-font font-medium mb-0">{amount} GTC</h2>
           <span className="leading-relaxed text-base">Staked</span>
         </div>
-        <button
-          onClick={buttonHandler}
-          className="flex md:max-w-button w-full justify-center text-white text-center bg-purple-connectPurple border-0 py-2 focus:outline-none hover:bg-indigo-600 rounded-sm text-lg font-miriam-libre"
-        >
-          <span>{buttonText}</span>
-        </button>
+        {roundEnded ? (
+          <UnstakeButton amount={amount} handler={unstakeHandler} />
+        ) : (
+          <button
+            onClick={buttonHandler}
+            className="flex md:max-w-button w-full justify-center text-white text-center bg-purple-connectPurple border-0 py-2 focus:outline-none hover:bg-indigo-600 rounded-sm text-lg font-miriam-libre"
+          >
+            <span>{buttonText}</span>
+          </button>
+        )}
       </div>
 
       {/* List all users staked on  */}

packages/react-app/src/components/UnstakeButton.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const UnstakeButton = ({ amount = 0, handler }) => {
+  const noBalance = amount === 0;
+
+  return (
+    <button
+      onClick={noBalance ? null : handler}
+      className={`flex md:max-w-button w-full justify-center text-white text-center border-0 py-2 focus:outline-none rounded-sm text-lg font-miriam-libre ${
+        noBalance ? "bg-grayBtn" : "bg-dustRed"
+      }`}
+    >
+      <span>{noBalance ? "Stake" : "Unstake All"}</span>
+    </button>
+  );
+};
+
+export default UnstakeButton;

packages/react-app/src/contracts/hardhat_contracts.json

@@ -569,7 +569,7 @@
       "chainId": "5",
       "contracts": {
         "IDStaking": {
-          "address": "0xA9757F8bA79341553D6728080A352EB8281d47eF",
+          "address": "0xe3d7684C87c6dD50602B34D3CDAc99752950c1a1",
           "abi": [
             {
               "inputs": [

packages/react-app/src/views/StakeDashboard.jsx

@@ -87,14 +87,6 @@ function StakeDashboard({
     tx(writeContracts.Token.mintAmount(ethers.utils.parseUnits("1000")));
   };
 
-  const unstake = async (id, amount) => {
-    tx(writeContracts.IDStaking.unstake(id + "", ethers.utils.parseUnits(amount)));
-  };
-
-  const unstakeUsers = async (id, users) => {
-    tx(writeContracts.IDStaking.unstakeUsers(id + "", users));
-  };
-
   const migrate = async id => {
     tx(writeContracts.IDStaking.migrateStake(id + ""));
   };
@@ -131,6 +123,9 @@ function StakeDashboard({
     },
   });
 
+  const roundEndTimestamp = moment.unix((start || zero).add(duration || zero).toString());
+  const roundEnded = moment.unix(moment().toString()).unix() >= roundEndTimestamp.unix();
+
   return (
     <>
       <Navbar
@@ -166,7 +161,7 @@ function StakeDashboard({
           {roundInView ? (
             <p className="font-miriam-libre text-base text-left mb-4">
               {moment.unix((start || zero).toString()).format("MMMM Do YYYY (h:mm:ss a)")} {" - "}
-              {moment.unix((start || zero).add(duration || zero).toString()).format("MMMM Do YYYY (h:mm:ss a)")}
+              {roundEndTimestamp.format("MMMM Do YYYY (h:mm:ss a)")}
             </p>
           ) : (
             <></>
@@ -181,12 +176,11 @@ function StakeDashboard({
                     tx={tx}
                     key={roundInView}
                     round={roundInView}
-                    unstake={unstake}
                     address={address}
                     migrate={migrate}
+                    roundEnded={roundEnded}
                     latestRound={latestRound}
                     tokenSymbol={tokenSymbol}
-                    unstakeUsers={unstakeUsers}
                     readContracts={readContracts}
                     writeContracts={writeContracts}
                     mainnetProvider={mainnetProvider}

packages/react-app/tailwind.config.js

@@ -19,6 +19,8 @@ module.exports = {
         asideBG: "#F6F0FF",
         orange: colors.orange,
         signout: "#FF4D4F",
+        grayBtn: "#BFBFBF",
+        dustRed: "#F5222D",
         purple: {
           darkpurple: "#0E0333",
           connectPurple: "#6F3FF5",