Merge pull request #24 from stacks-degens/stacking-dashboard

Stacking dashboard
degen-lab · Jun 16, 2023 · 67b316c · 67b316c
2 parents 672dbec + 5111514
commit 67b316c
Show file tree

Hide file tree

Showing 3 changed files with 284 additions and 1 deletion.
diff --git a/src/components/stacking/dashboard/DashboardStacking.tsx b/src/components/stacking/dashboard/DashboardStacking.tsx
@@ -1,5 +1,58 @@
+import { useEffect, useState } from 'react';
+import { selectCurrentTheme, selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
+import { useAppSelector } from '../../../redux/store';
+import { UserRole } from '../../../redux/reducers/user-state';
+import './styles.css';
+import colors from '../../../consts/colorPallete';
+import DashboardStackingInfo from './DashboardStackingInfo';
+
 const DashboardStacking = () => {
-  return <div>stacking dashboard</div>;
+  const currentRole: UserRole = useAppSelector(selectCurrentUserRole);
+  const [userAddress, setUserAddress] = useState<string | null>(null);
+  const userSession = useAppSelector(selectUserSessionState);
+
+  const appCurrentTheme = useAppSelector(selectCurrentTheme);
+
+  const dashboardStackingMapping: Record<UserRole, React.ReactElement> = {
+    Viewer: <div></div>,
+    NormalUser: <div></div>,
+    Waiting: <div></div>,
+    Pending: <div></div>,
+    Miner: <div></div>,
+  };
+
+  useEffect(() => {
+    if (userSession.isUserSignedIn()) {
+      const args = userSession.loadUserData().profile.stxAddress.testnet;
+      console.log('address', args);
+      setUserAddress(args);
+    } else {
+      console.log('not signed in');
+    }
+  }, [userAddress]);
+
+  return (
+    <div className="dashboard-page-main-container">
+      <div style={{ color: colors[appCurrentTheme].colorWriting }} className="page-heading-title">
+        <h2>Decentralized Stacking Pool</h2>
+        <h2>Dashboard</h2>
+      </div>
+      {/* <div>{dashboardStackingMapping[currentRole]}</div> */}
+      <div className="principal-content-profile-page">
+        <div className={'main-info-container-normal-user'}>
+          <DashboardStackingInfo currentRole={currentRole} />
+          {/* <DashboardInfoContainer
+            notifier={currentNotifier}
+            minersList={minersList}
+            blocksWon={blocksWon}
+            stacksRewards={stacksRewards}
+            userAddress={userAddress}
+            currentRole={currentRole}
+          /> */}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default DashboardStacking;
diff --git a/src/components/stacking/dashboard/DashboardStackingInfo.tsx b/src/components/stacking/dashboard/DashboardStackingInfo.tsx
@@ -0,0 +1,89 @@
+import { selectCurrentTheme, selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
+import { useAppSelector } from '../../../redux/store';
+import { UserRole } from '../../../redux/reducers/user-state';
+import './styles.css';
+import colors from '../../../consts/colorPallete';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+
+interface DashboardStackingInfoProps {
+  currentRole: UserRole;
+}
+
+const DashboardStackingInfo = ({ currentRole }: DashboardStackingInfoProps) => {
+  const appCurrentTheme = useAppSelector(selectCurrentTheme);
+  return (
+    <div
+      style={{ backgroundColor: colors[appCurrentTheme].infoContainers, color: colors[appCurrentTheme].colorWriting }}
+      className="info-container-dashboard-page"
+    >
+      <div
+        style={{
+          backgroundColor: colors[appCurrentTheme].infoContainers,
+          color: colors[appCurrentTheme].colorWriting,
+          borderBottom: `1px solid ${colors[appCurrentTheme].colorWriting}`,
+        }}
+        className="heading-info-container"
+      >
+        <div className="heading-title-info-container">
+          <div style={{ color: colors[appCurrentTheme].defaultYellow }} className="heading-icon-info-container">
+            <AccountCircleIcon className="icon-info-container yellow-icon" />
+          </div>
+          <div className="title-info-container">INFO</div>
+        </div>
+      </div>
+      <div
+        style={{ backgroundColor: colors[appCurrentTheme].infoContainers, color: colors[appCurrentTheme].colorWriting }}
+        className="content-info-container-normal-user"
+      >
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">Liquidity Provider: </span>
+          <div className="result-of-content-section"></div>
+        </div>
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">List of stackers: </span>
+        </div>
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">Number of Slots Won: </span>
+          <span className="result-of-content-section"></span>
+        </div>
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">Bitcoin Rewards: </span>
+          <span className="result-of-content-section"></span>
+        </div>
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">Total stacked this cycle: </span>
+          <span className="result-of-content-section"></span>
+        </div>
+      </div>
+      {currentRole === 'NormalUser' && (
+        // <div>
+        <div className="footer-join-button-container">
+          <button
+            className={appCurrentTheme === 'light' ? 'customButton' : 'customDarkButton'}
+            onClick={() => {
+              // if (userAddress !== null) {
+              // }
+            }}
+          >
+            Delegate pox-2
+          </button>
+        </div>
+      )}
+      {currentRole === 'NormalUser' && (
+        <div className="footer-join-button-container margin-top-10">
+          <button
+            className={appCurrentTheme === 'light' ? 'customButton' : 'customDarkButton'}
+            onClick={() => {
+              // if (userAddress !== null) {
+              // }
+            }}
+          >
+            Join Pool
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DashboardStackingInfo;
diff --git a/src/components/stacking/dashboard/styles.css b/src/components/stacking/dashboard/styles.css
@@ -0,0 +1,141 @@
+.dashboard-page-main-container {
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
+
+.dashboard-page-main-container .page-heading-title {
+  height: 100px;
+}
+
+.dashboard-page-main-container .principal-content-profile-page {
+  height: calc(100vh - 160px);
+  margin: 0;
+  width: 100%;
+}
+
+.info-container-dashboard-page {
+  width: 470px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 2px solid #f9b11c;
+  box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b;
+}
+
+.footer-join-button-container {
+  height: 50px;
+  margin-top: -25px;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.margin-top-10 {
+  margin-top: -10px;
+}
+
+@media screen and (max-width: 575px) {
+  /* the container with the information */
+  .dashboard-page-main-container .main-info-container-normal-user {
+    width: 90%;
+  }
+
+  /* the sections I'm displaying in the main container */
+  .dashboard-page-main-container .content-sections-title-info-container span {
+    font-size: 14px;
+  }
+
+  /* the result of the section above */
+  .dashboard-page-main-container .title-info-container {
+    font-size: 14px;
+  }
+
+  /* the result of the section above */
+  .result-of-content-section {
+    font-size: 10.6px;
+  }
+}
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  .dashboard-page-main-container .page-heading-title {
+    height: 120px;
+  }
+
+  .dashboard-page-main-container .page-heading-title h2 {
+    font-size: 30px;
+  }
+
+  .dashboard-page-main-container .main-info-container-normal-user {
+    margin-top: 80px;
+  }
+
+  .dashboard-page-main-container .info-container-dashboard-page {
+    width: 500px;
+  }
+
+  .dashboard-page-main-container .title-info-container {
+    font-size: 20px;
+  }
+
+  .dashboard-page-main-container .content-sections-title-info-container span {
+    font-size: 22px;
+  }
+
+  .result-of-content-section {
+    font-size: 17.5px;
+  }
+
+  .info-container-dashboard-page .footer-join-button-container {
+    margin-top: -15px;
+    margin-bottom: 10px;
+  }
+
+  .info-container-dashboard-page .footer-join-button-container button {
+    font-size: 20px;
+    padding-block: 15px;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1180px) {
+  .dashboard-page-main-container .main-info-container-normal-user {
+    margin-top: 90px;
+  }
+
+  .dashboard-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+
+  .dashboard-page-main-container .content-sections-title-info-container span,
+  .dashboard-page-main-container .title-info-container,
+  .result-of-content-section {
+    font-size: 20px;
+  }
+
+  .dashboard-page-main-container .info-container-dashboard-page {
+    width: 560px;
+  }
+}
+
+@media screen and (min-width: 1181px) {
+  .dashboard-page-main-container .main-info-container-normal-user {
+    margin-top: 90px;
+  }
+
+  .dashboard-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+
+  .dashboard-page-main-container .content-sections-title-info-container span,
+  .dashboard-page-main-container .title-info-container,
+  .result-of-content-section {
+    font-size: 20px;
+  }
+
+  .dashboard-page-main-container .info-container-dashboard-page {
+    width: 560px;
+  }
+}