Merge pull request #25 from stacks-degens/stacking-profile-page

Stacking profile page

src/components/stacking/dashboard/DashboardStackingInfo.tsx

@@ -1,4 +1,4 @@
-import { selectCurrentTheme, selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
+import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 import { useAppSelector } from '../../../redux/store';
 import { UserRole } from '../../../redux/reducers/user-state';
 import './styles.css';

src/components/stacking/profile/AboutContainerStacking.tsx

@@ -0,0 +1,79 @@
+import { CallMade } from '@mui/icons-material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import './styles.css';
+import colors from '../../../consts/colorPallete';
+import { useAppSelector } from '../../../redux/store';
+import { selectCurrentTheme } from '../../../redux/reducers/user-state';
+
+interface IAboutContainerStackingProps {
+  currentRole: string;
+  // connectedWallet: string | null;
+  // explorerLink: string | undefined;
+}
+
+const AboutContainerStacking = ({ currentRole }: IAboutContainerStackingProps) => {
+  const appCurrentTheme = useAppSelector(selectCurrentTheme);
+  return (
+    <div
+      style={{ backgroundColor: colors[appCurrentTheme].infoContainers, color: colors[appCurrentTheme].colorWriting }}
+      className="info-container-profile-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 bold-font">ABOUT</div>
+        </div>
+      </div>
+      <div
+        style={{ backgroundColor: colors[appCurrentTheme].infoContainers, color: colors[appCurrentTheme].colorWriting }}
+        className={currentRole === 'Miner' ? 'content-info-container' : 'content-info-container-normal-user'}
+      >
+        <div className="content-sections-title-info-container bottom-margins">
+          <span className="bold-font">Connected wallet:</span>
+          <div className="write-just-on-one-line result-of-content-section"></div>
+        </div>
+        <div className="content-sections-title-info-container bottom-margins">
+          <span className="bold-font">Role: </span>
+          <span className="result-of-content-section"></span>
+        </div>
+        <div className="content-sections-title-info-container bottom-margins">
+          <span className="bold-font">Link to explorer: </span>
+          <button
+            className="button-with-no-style"
+            style={{
+              backgroundColor: colors[appCurrentTheme].accent2,
+              color: colors[appCurrentTheme].secondary,
+            }}
+          >
+            <a
+              className="custom-link result-of-content-section"
+              style={{ backgroundColor: colors[appCurrentTheme].accent2, color: colors[appCurrentTheme].secondary }}
+              target="_blank"
+              rel="noreferrer"
+              href=""
+              // href={explorerLink !== undefined ? explorerLink : ''}
+            >
+              <span className="flex-center">
+                Visit
+                <span className="flex-center left-margins result-of-content-section">
+                  <CallMade className="custom-icon" />
+                </span>
+              </span>
+            </a>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutContainerStacking;

src/components/stacking/profile/ProfileStacking.tsx

@@ -1,5 +1,36 @@
+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';
+import { useState } from 'react';
+import RoleIntroStacking from './RoleIntroStacking';
+import StackerProfile from './StackerProfile';
+
 const ProfileStacking = () => {
-  return <div>stacking profile</div>;
+  // I will need the currentRole, the connectedWallet and linkToExplorer
+
+  const currentRole: UserRole = useAppSelector(selectCurrentUserRole);
+  const [userAddress, setUserAddress] = useState<string | null>(null);
+  const userSession = useAppSelector(selectUserSessionState);
+
+  const appCurrentTheme = useAppSelector(selectCurrentTheme);
+  return (
+    <div
+      className="profile-page-main-container"
+      style={{
+        backgroundColor: colors[appCurrentTheme].accent2,
+        color: colors[appCurrentTheme].colorWriting,
+      }}
+    >
+      <div style={{ color: colors[appCurrentTheme].colorWriting }} className="page-heading-title">
+        <h2>Decentralized Stacking Pool</h2>
+        <h2>Profile</h2>
+      </div>
+      {currentRole === 'Miner' ? <StackerProfile currentRole={currentRole} /> : ''}
+    </div>
+  );
 };
 
 export default ProfileStacking;

src/components/stacking/profile/RoleIntroStacking.tsx

@@ -0,0 +1,39 @@
+import { SelfImprovement } from '@mui/icons-material';
+import colors from '../../../consts/colorPallete';
+import { selectCurrentTheme } from '../../../redux/reducers/user-state';
+import { useAppSelector } from '../../../redux/store';
+
+interface IRoleIntroStackingProps {
+  currentRole: string;
+  // positiveVotes: number | null;
+  // positiveVotesThreshold: number | null;
+  // negativeVotes: number | null;
+  // negativeVotesThreshold: number | null;
+  // blocksLeftUntilJoin: number | null;
+}
+
+const RoleIntroStacking = ({ currentRole }: IRoleIntroStackingProps) => {
+  const appCurrentTheme = useAppSelector(selectCurrentTheme);
+  return (
+    <div
+      className="intro-container-profile-page"
+      style={{
+        background: `linear-gradient(135deg, ${colors[appCurrentTheme].defaultYellow} 30%, ${colors[appCurrentTheme].defaultOrange}) 60%`,
+        color: colors[appCurrentTheme].introRoleWriting,
+      }}
+    >
+      <filter id="round">
+        <div className="intro-icon-container">
+          <SelfImprovement className="role-icon" />
+        </div>
+      </filter>
+      <div className="intro-informations-profile-page">
+        <div className="intro-sides"></div>
+        <h3 className="intro-center-side ">{currentRole}</h3>
+        <div className="intro-sides"></div>
+      </div>
+    </div>
+  );
+};
+
+export default RoleIntroStacking;

src/components/stacking/profile/StackerProfile.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import {
+  readOnlyGetAllTotalWithdrawals,
+  ReadOnlyAllDataWaitingMiners,
+  readOnlyGetRemainingBlocksJoin,
+} from '../../../consts/readOnly';
+import { selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
+import { useAppSelector } from '../../../redux/store';
+import AboutContainer from '../../reusableComponents/profile/AboutContainer';
+import ActionsContainer from '../../reusableComponents/profile/ActionsContainer';
+import RoleIntro from '../../reusableComponents/profile/RoleIntro';
+import { principalCV, ClarityValue, listCV, cvToJSON } from '@stacks/transactions';
+import './styles.css';
+import RoleIntroStacking from './RoleIntroStacking';
+import AboutContainerStacking from './AboutContainerStacking';
+
+interface IStackerProfileProps {
+  currentRole: string;
+  // connectedWallet: string | null;
+  // explorerLink: string | undefined;
+}
+
+const StackerProfile = ({ currentRole }: IStackerProfileProps) => {
+  const userSession = useAppSelector(selectUserSessionState);
+  // const currentRole = useAppSelector(selectCurrentUserRole);
+  const [totalWithdrawals, setTotalWithdrawals] = useState<number | null>(null);
+
+  return (
+    <div>
+      <div className="principal-content-profile-page">
+        <RoleIntroStacking currentRole={currentRole} />
+        <div className={currentRole === 'Miner' ? 'main-info-container' : 'main-info-container-normal-user'}>
+          <AboutContainerStacking currentRole={currentRole} />
+          {/* {currentRole === 'Miner' && <ActionsContainer currentNotifier={currentNotifier} userAddress={userAddress} />} */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StackerProfile;

src/components/stacking/profile/styles.css

@@ -0,0 +1,123 @@
+.yellow-icon {
+  color: #f9b11c !important;
+}
+
+.info-container-profile-page {
+  background-color: #f9b11c;
+  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;
+}
+
+.content-info-container {
+  padding: 10px 20px 20px 20px;
+  background-color: #f9b11c;
+  background-color: #fef9f7;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 300px;
+}
+
+.intro-container-profile-page {
+  height: 60px;
+  border-radius: 3px;
+  padding: 10px;
+  border: 1px solid;
+  border-left: #fdc60b;
+  border-right: #ed693c;
+  border-top: #fdc60b;
+  border-bottom: #ed693c;
+  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;
+  background-color: #fdc60b;
+  height: 100px;
+  width: 100px;
+  position: absolute;
+  top: -60px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.role-icon {
+  height: 90% !important;
+  width: 90% !important;
+}
+
+.intro-informations-profile-page {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.main-info-container {
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  margin-inline: auto;
+}
+
+.main-info-container-normal-user {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  width: 80%;
+  margin-inline: auto;
+}
+
+.principal-content-profile-page {
+  margin-top: 90px;
+  width: 90%;
+  margin-inline: auto;
+}
+
+.page-heading-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.page-heading-title h2 {
+  margin-bottom: 0;
+}
+
+.intro-sides {
+  align-items: center;
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  width: 165px;
+}
+
+.intro-center-side {
+  align-items: end;
+  height: 100% !important;
+  display: flex;
+}
+
+.footer-button-container {
+  height: 50px;
+  margin-top: 5px;
+  margin-bottom: -15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}