degen-lab · BowTiedBlox · Mar 12, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/front-end/.prettierrc b/front-end/.prettierrc
@@ -1,5 +1,5 @@
 {
-    "singleQuote": true,
-    "bracketSpacing": true,
-    "printWidth": 120
-}
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "printWidth": 120
+}
diff --git a/front-end/package.json b/front-end/package.json
@@ -74,7 +74,8 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "eject": "react-app-rewired eject",
+    "fmt": "./node_modules/.bin/prettier --write ."
   },
   "eslintConfig": {
     "extends": [
@@ -95,6 +96,7 @@
     ]
   },
   "devDependencies": {
+    "prettier": "^3.2.5",
     "react-app-rewired": "^2.2.1",
     "react-router-dom": "^6.10.0"
   }

diff --git a/front-end/public/index.html b/front-end/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/front-end/src/components/LeftPanel.tsx b/front-end/src/components/LeftPanel.tsx
@@ -229,7 +229,7 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                 <ListItemButton
                   component={Link}
                   to={
-                    'https://stacksdegens.notion.site/Walkthrough-Decentralized-Stacking-Pool-c1c10e3393324297aa8dcc28c1fe253c?pvs=4'
+                    'https://degenlab.notion.site/Walkthrough-Decentralized-Stacking-Pool-c1c10e3393324297aa8dcc28c1fe253c'
                   }
                   target="_new"
                   className="padding-left-sidebar-main-sections"

diff --git a/front-end/src/components/MainPage.tsx b/front-end/src/components/MainPage.tsx
@@ -64,6 +64,7 @@ const MainPage = () => {
   const [currentCycle, setCurrentCycle] = useState<number>(0);
   const [preparePhaseStartBlockHeight, setPreparePhaseStartBlockHeight] = useState<number>(0);
   const [rewardPhaseStartBlockHeight, setRewardPhaseStartBlockHeigh] = useState<number>(0);
+  const [nextRewardPhaseStartBlockHeight, setNextRewardPhaseStartBlockHeigh] = useState<number>(0);
   const [stacksAmountThisCycle, setStacksAmountThisCycle] = useState<number | null>(null);
   const [lockedInPool, setLockedInPool] = useState<number>(0);
   const [delegatedToPool, setDelegatedToPool] = useState<number>(0);
@@ -118,7 +119,9 @@ const MainPage = () => {
       const blockInfoResult = await fetch(`${apiMapping.stackingInfo}`)
         .then((res) => res.json())
         .then((res) => res);
+
       if (await blockInfoResult) {
+        console.log(blockInfoResult);
         let cycleBlockNr =
           (blockInfoResult['next_cycle']['reward_phase_start_block_height'] -
             blockInfoResult['next_cycle']['prepare_phase_start_block_height']) *
@@ -127,6 +130,7 @@ const MainPage = () => {
         setCurrentCycle(blockInfoResult['current_cycle']['id']);
         setPreparePhaseStartBlockHeight(blockInfoResult['next_cycle']['prepare_phase_start_block_height']);
         setRewardPhaseStartBlockHeigh(blockInfoResult['next_cycle']['reward_phase_start_block_height'] - cycleBlockNr);
+        setNextRewardPhaseStartBlockHeigh(blockInfoResult['next_cycle']['reward_phase_start_block_height']);
       }
     };
     getCurrentBlockInfo();
@@ -137,6 +141,7 @@ const MainPage = () => {
       if (userSession.isUserSignedIn() && (currentRole === 'Stacker' || currentRole === 'Provider')) {
         const wallet = userSession.loadUserData().profile.stxAddress[localNetwork];
         const userLockedData = await readOnlyLockedBalanceUser(wallet, 'locked-balance');
+        console.log(userLockedData);
         const userDelegatedData = await readOnlyLockedBalanceUser(wallet, 'delegated-balance');
         const userUntilBurnHtData = await readOnlyLockedBalanceUser(wallet, 'until-burn-ht');
         setLockedInPool(userLockedData);
@@ -146,7 +151,7 @@ const MainPage = () => {
     };
 
     getLockedBalance();
-  }, [userAddress]);
+  }, []);
 
   useEffect(() => {
     const getReturnCovered = async () => {
@@ -389,6 +394,7 @@ const MainPage = () => {
               currentBurnBlockHeight={currentBurnBlockHeight}
               preparePhaseStartBlockHeight={preparePhaseStartBlockHeight}
               rewardPhaseStartBlockHeight={rewardPhaseStartBlockHeight}
+              nextRewardPhaseStartBlockHeight={nextRewardPhaseStartBlockHeight}
               currentRole={currentRole}
             />
           }
@@ -401,6 +407,7 @@ const MainPage = () => {
               currentCycle={currentCycle !== null ? currentCycle : 0}
               preparePhaseStartBlockHeight={preparePhaseStartBlockHeight !== null ? preparePhaseStartBlockHeight : 0}
               rewardPhaseStartBlockHeight={rewardPhaseStartBlockHeight !== null ? rewardPhaseStartBlockHeight : 0}
+              nextRewardPhaseStartBlockHeight={nextRewardPhaseStartBlockHeight !== null ? nextRewardPhaseStartBlockHeight : 0}
               connectedWallet={connectedWallet !== null ? connectedWallet : ''}
               explorerLink={explorerLink !== null ? explorerLink : ''}
               userAddress={userAddress !== null ? userAddress : ''}

diff --git a/front-end/src/components/appMenuSections/home/Home.tsx b/front-end/src/components/appMenuSections/home/Home.tsx
@@ -2,6 +2,7 @@ import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 import { useAppSelector } from '../../../redux/store';
 import colors from '../../../consts/colorPallete';
 import './styles.css';
+import { network } from '../../../consts/network';
 
 const Home = () => {
   const appCurrentTheme = useAppSelector(selectCurrentTheme);
@@ -15,7 +16,10 @@ const Home = () => {
         textAlign: 'center',
       }}
     >
-      <div style={{ color: colors[appCurrentTheme].colorWriting }} className="page-heading-title">
+      <div
+        style={{ color: colors[appCurrentTheme].colorWriting }}
+        className="page-heading-title"
+      >
         <h2>Stacks Decentralized Pools</h2>
         <h2>Home</h2>
       </div>
@@ -25,7 +29,8 @@ const Home = () => {
       </div>
       <div style={{ marginTop: 40 }}>
         <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
-          <div style={{ marginTop: 10 }}></div>- To install the Hiro Extension on your browser navigate to{' '}
+          <div style={{ marginTop: 10 }}></div>- To install the Hiro Extension
+          on your browser navigate to{' '}
           <a
             className="homePageLink"
             href="https://wallet.hiro.so/wallet/install-web"
@@ -40,63 +45,115 @@ const Home = () => {
 
       <div style={{ marginTop: 40 }}>
         <div>
-          <b>Connect to the pool using your Stacks account following these steps:</b>
+          <b>
+            Connect to the pool using your Stacks account following these steps:
+          </b>
         </div>
         <div style={{ marginTop: 40 }}>
-          <div style={{ marginTop: -30, textAlign: 'match-parent' }}></div>- Open Hiro/Leather Wallet extension.
+          <div style={{ marginTop: -30, textAlign: 'match-parent' }}></div>-
+          Open Hiro/Leather Wallet extension.
           <br></br>
           <div style={{ marginTop: 10 }}>
-            - Click the 3 dots in the upper right corner on the Hiro Wallet/Leather Extension.<br></br>
-            <div style={{ marginTop: 10 }}></div>- Click 'Change Network', then select 'Testnet'.<br></br>
-            <div style={{ marginTop: 10 }}></div> - Click the top right corner button of the Stacking Pool app in order
-            to connect your wallet.
+            - Click the 3 dots in the upper right corner on the Hiro
+            Wallet/Leather Extension.<br></br>
+            <div style={{ marginTop: 10 }}></div>- Click 'Change Network', then
+            select '{network}'.<br></br>
+            <div style={{ marginTop: 10 }}></div> - Click the top right corner
+            button of the Stacking Pool app in order to connect your wallet.
           </div>
         </div>
 
-        <div style={{ marginTop: 40 }}>
-          <b>Fund your account with testnet STX:</b>
+      <div style={{ marginTop: 40 }}>
+        <div>
+          <b>
+            Join Stacking Pool
+          </b>
         </div>
         <div style={{ marginTop: 40 }}>
-          <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
-            - In order to fund your account, navigate to{' '}
-            <a
-              className="homePageLink"
-              href="https://explorer.hiro.so/sandbox/faucet?chain=testnet"
-              target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange }}
-            >
-              https://explorer.hiro.so/sandbox/faucet?chain=testnet
-            </a>
-            .<br></br>
-            <div style={{ marginTop: 10 }}></div>- Click the 'Connect Stacks Wallet' button in order to connect to your
-            wallet. If you do not have a wallet, <br></br>follow the previous guide on how to create one.<br></br>
-            <div style={{ marginTop: 10 }}></div>- There, you can click on 'Request STX' in order to receive STX for
-            testing purposes.<br></br>Please note that the transfer requires a few minutes for you to get the STX.
+          <div style={{ marginTop: -30, textAlign: 'match-parent' }}></div>-
+          In the left menu select Stacking, then Dashboard
+          <br></br>
+          <div style={{ marginTop: 10 }}>
+            - Click `Allow Pool` Button  <br></br>
+          <div style={{ marginTop: 10 }}></div> 
+            - Afterward click `Join Pool` Button <br></br>(can be done in the same block, but in this order)
           </div>
         </div>
+      </div>
 
-        <div style={{ marginTop: 40 }}>
-          <b>Extra: liquidity-provider testing</b>
+      <div style={{ marginTop: 40 }}>
+        <div>
+          <b>
+            Delegate STX after joining
+          </b>
         </div>
         <div style={{ marginTop: 40 }}>
-          <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
-            - If you want to fit into the Liquidity Provider scenario navigate to{' '}
-            <a
-              className="homePageLink"
-              href="https://github.com/stacks-degens/starters-front-end#readme"
-              target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange }}
-            >
-              this link
-            </a>
-            . <br></br>
-            <div style={{ marginTop: 10 }}></div>- From the accounts list choose the `Deployer` one and copy its
-            `mnemonic`. <br></br>
-            <div style={{ marginTop: 10 }}></div>- Open your Hiro/Leather wallet and connect to the `Liquidity Provider`
-            account, <br></br> select `Use existing key` option and write the mnemonic copied before
+          <div style={{ marginTop: -30, textAlign: 'match-parent' }}></div>-
+          In the left menu select Stacking, then Profile
+          <br></br>
+          <div style={{ marginTop: 10 }}>
+            - Insert amount of STX to delegate and then click `Delegate` <br></br>
           </div>
         </div>
       </div>
+
+
+        {network !== 'mainnet' && (
+          <>
+            <div style={{ marginTop: 40 }}>
+              <b>Fund your account with testnet STX:</b>
+            </div>
+            <div style={{ marginTop: 40 }}>
+              <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
+                - In order to fund your account, navigate to{' '}
+                <a
+                  className="homePageLink"
+                  href="https://explorer.hiro.so/sandbox/faucet?chain=testnet"
+                  target="_blank"
+                  style={{ color: colors[appCurrentTheme].defaultOrange }}
+                >
+                  https://explorer.hiro.so/sandbox/faucet?chain=testnet
+                </a>
+                .<br></br>
+                <div style={{ marginTop: 10 }}></div>- Click the 'Connect Stacks
+                Wallet' button in order to connect to your wallet. If you do not
+                have a wallet, <br></br>follow the previous guide on how to
+                create one.<br></br>
+                <div style={{ marginTop: 10 }}></div>- There, you can click on
+                'Request STX' in order to receive STX for testing purposes.
+                <br></br>Please note that the transfer requires a few minutes
+                for you to get the STX.
+              </div>
+            </div>
+
+            <div style={{ marginTop: 40 }}>
+              <b>Extra: liquidity-provider testing</b>
+            </div>
+            <div style={{ marginTop: 40 }}>
+              <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
+                - If you want to fit into the Liquidity Provider scenario
+                navigate to{' '}
+                <a
+                  className="homePageLink"
+                  href="https://github.com/stacks-degens/starters-front-end#readme"
+                  target="_blank"
+                  style={{ color: colors[appCurrentTheme].defaultOrange }}
+                >
+                  this link
+                </a>
+                . <br></br>
+                <div style={{ marginTop: 10 }}></div>- From the accounts list
+                choose the `Deployer` one and copy its `mnemonic`. <br></br>
+                <div style={{ marginTop: 10 }}></div>- Open your Hiro/Leather
+                wallet and connect to the `Liquidity Provider` account,{' '}
+                <br></br> select `Use existing key` option and write the
+                mnemonic copied before
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
       <div style={{ marginTop: 30 }}>
         <br></br>
       </div>

diff --git a/front-end/src/components/appMenuSections/home/styles.css b/front-end/src/components/appMenuSections/home/styles.css
@@ -6,7 +6,9 @@
 .homePageLink:hover {
   border-bottom: 1px solid #ab4c2b;
   color: #ab4c2b !important;
-  transition: color 0.3s ease-in, border 0.3s ease-in;
+  transition:
+    color 0.3s ease-in,
+    border 0.3s ease-in;
 }
 
 .home-page-main-container {

diff --git a/front-end/src/components/appMenuSections/miningPool/MiningPoolStatus.tsx b/front-end/src/components/appMenuSections/miningPool/MiningPoolStatus.tsx
@@ -41,8 +41,8 @@ const MiningPoolStatus = () => {
         notifier['vote-status'].value === false
           ? 'Elections ended!'
           : parseInt(notifier['election-blocks-remaining'].value) > 0
-          ? 'Elections on-going!'
-          : 'Ended by time!'
+            ? 'Elections on-going!'
+            : 'Ended by time!',
       );
     };
     getNotifierStatus();

diff --git a/front-end/src/components/appMenuSections/miningPool/styles.css b/front-end/src/components/appMenuSections/miningPool/styles.css
@@ -10,7 +10,9 @@ table th {
 
 .css-11xur9t-MuiPaper-root-MuiTableContainer-root {
   border: 1px solid #f9b11c;
-  box-shadow: 1px 3px 4px #ed693c, -1px 0px 4px #fdc60b !important;
+  box-shadow:
+    1px 3px 4px #ed693c,
+    -1px 0px 4px #fdc60b !important;
   background-color: #fef9f7 !important;
 }
 

diff --git a/front-end/src/components/appMenuSections/voting/VotingNotifier.tsx b/front-end/src/components/appMenuSections/voting/VotingNotifier.tsx
@@ -133,8 +133,8 @@ const VotingNotifier = () => {
         notifier['vote-status'].value === false
           ? 'Elections ended!'
           : parseInt(notifier['election-blocks-remaining'].value) > 0
-          ? 'Elections on-going!'
-          : 'Ended by time!'
+            ? 'Elections on-going!'
+            : 'Ended by time!',
       );
       setElectionBlocksRemaining(parseInt(notifier['election-blocks-remaining'].value));
     };

diff --git a/front-end/src/components/reusableComponents/dashboard/styles.css b/front-end/src/components/reusableComponents/dashboard/styles.css
@@ -5,7 +5,9 @@
   flex-direction: column;
   overflow: hidden;
   border: 2px solid #f9b11c;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #fdc60b;
 }
 
 .footer-join-button-container {

diff --git a/front-end/src/components/reusableComponents/miningPool/styles.css b/front-end/src/components/reusableComponents/miningPool/styles.css
@@ -5,7 +5,9 @@
   flex-direction: column;
   overflow: hidden;
   border: 2px solid #f9b11c;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #fdc60b;
 }
 
 .footer-end-vote-button-container {

diff --git a/front-end/src/components/reusableComponents/profile/styles.css b/front-end/src/components/reusableComponents/profile/styles.css
@@ -14,7 +14,9 @@
   flex-direction: column;
   overflow: hidden;
   border: 2px solid #f9b11c;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #fdc60b;
 }
 
 .content-info-container {
@@ -36,15 +38,19 @@
   border-right: #ed693c;
   border-top: #fdc60b;
   border-bottom: #ed693c;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #fdc60b;
   position: relative;
   width: 85%;
   margin-inline: auto;
 }
 
 .intro-icon-container {
   border-radius: 10% 10% 30% 30% / 10% 10% 45% 45%;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #ed693c;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #ed693c;
   background-color: #fdc60b;
   height: 100px;
   width: 100px;

diff --git a/front-end/src/components/reusableComponents/voting/styles.css b/front-end/src/components/reusableComponents/voting/styles.css
@@ -5,7 +5,9 @@
   flex-direction: column;
   overflow: hidden;
   border: 2px solid #f9b11c;
-  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+  box-shadow:
+    1px 1px 4px #ed693c,
+    -1px -1px 4px #fdc60b;
 }
 
 .footer-end-vote-button-container {