Merge pull request #288 from chigozzdevv/feat/Add-staking-page-for-de…

…sktop

Added staking page feature

frontend/src/App.jsx

@@ -16,7 +16,7 @@ import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore'; 
 import { Notifier } from 'components/Notifier/Notifier';
 import { useConnectWallet } from 'hooks/useConnectWallet';
-
+import Stake from 'pages/vault/stake/Stake';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore(); 
@@ -90,6 +90,8 @@ function App() {
           <Route path="/withdraw" element={<Withdraw />} />
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
+
+            <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />

frontend/src/components/GasFee/GasFee.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
+import './gasfee.css';
+
+
+export default function GasFee() {
+    return (
+        <div className="main-card-footer">
+            <div className="divider"></div>
+            <div className="gas-fee-container">
+                <div className="gas-fee-circle">
+                    <SettingIcon className="gas-fee-icon" />
+                </div>
+                <div className="gas-fee-title">Gas fee: 0.00 STRK</div>
+            </div>
+        </div>
+    );
+}

frontend/src/components/GasFee/gasfee.css

@@ -0,0 +1,31 @@
+.gas-fee-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.gas-fee-circle {
+    width: 32px;
+    height: 32px;
+    background-color: var(--footer-divider-bg);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
+.gas-fee-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+}
+
+.gas-fee-title {
+    color: var(--stormy-gray);
+    font-size: 12px;
+    font-weight: 400;
+}

frontend/src/components/NavigationLinks.jsx

@@ -11,6 +11,10 @@ const NavigationLinks = ({ onNavClick }) => (
     <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
       Dashboard
     </NavLink>
+    <div className="nav-divider"></div>
+    <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
+      Vault
+    </NavLink>
   </div>
 );
 

frontend/src/components/StakeCard/MetricCard.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './metricCard.css';
+
+export default function MetricCard({ icon= 1, title, value }) {
+  return (
+    <div className="stake-card">
+      <div className="card-header">
+        <img src={icon} className="card-icon" />
+        <span className="label">{title}</span>
+      </div>
+      <div className="card-value">
+        <span className="top-card-value">{value}</span>
+      </div>
+    </div>
+  );
+}

frontend/src/components/StakeCard/metricCard.css

@@ -0,0 +1,14 @@
+.stake-card {
+  width: 309px;
+  background: var(--header-button-bg);
+  border: var(--midnight-purple-border);
+  border-radius: 900px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.stake-card .img {
+  margin-right: 100px;
+}

frontend/src/pages/vault/VaultLayout.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import './vaultLayout.css';
+
+export function VaultLayout({ children }) {
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar-content">
+          <h2 className="sidebar-title">Vault</h2>
+          <nav className="sidebar-nav">
+            <NavLink
+              to="/"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Home
+            </NavLink>
+            <NavLink
+              to="/stake"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Stake
+            </NavLink>
+            <NavLink
+              to="/withdraw"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Withdraw
+            </NavLink>
+          </nav>
+        </div>
+      </aside>
+
+      <main className="main-content">
+        {children}
+        <Outlet />
+      </main>
+    </div>
+  );
+}

frontend/src/pages/vault/stake/Stake.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import STRK from '../../../assets/icons/strk.svg';
+import USDC from '../../../assets/icons/apy_icon.svg';
+import './stake.css';
+import { VaultLayout } from '../VaultLayout';
+import { Button } from 'components/ui/Button';
+import MetricCard from 'components/StakeCard/MetricCard';
+import GasFee from 'components/GasFee/GasFee';
+
+function Stake() {
+  const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
+  const [amount, setAmount] = useState('0');
+
+  const networks = [{ name: 'Starknet', image: STRK }];
+
+  const handleChange = (e) => {
+    setSelectedNetwork(e.target.value);
+  };
+
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    const regex = /^\d*\.?\d*$/;
+    if (regex.test(value)) {
+      setAmount(value);
+    }
+  };
+
+  return (
+    <VaultLayout>
+      <div className="stake-wrapper">
+        <div className="stake-container">
+          <div className='main-container'>
+            <div className="top-cards">
+              <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
+              <MetricCard title="APY Balance" value="0.046731" icon={USDC} />
+            </div>
+          </div>
+
+          <h1 className="stake-title">Please submit your leverage details</h1>
+
+          <div className="main-card">
+            <div className="network-selector-container">
+              <div className="network-selector">
+                <div className="selected-network">
+                  <img
+                    src={networks.find((network) => network.name === selectedNetwork)?.image}
+                    alt={selectedNetwork}
+                    className="network-icon"
+                  />
+                  <span>{selectedNetwork}</span>
+                </div>
+                <svg
+                  className="chevron"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 9L12 15L18 9"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+
+              <div className="network-dropdown">
+                {networks.map((network) => (
+                  <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
+                    <img src={network.image} alt={network.name} className="network-icon" />
+                    <span>{network.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="amount-input" aria-labelledby="amount-input-label">
+              <input
+                type="text"
+                id="amount-field"
+                value={amount}
+                onChange={handleAmountChange}
+                pattern="^\d*\.?\d*$"
+                className="amount-field"
+                aria-describedby="currency-symbol"
+                placeholder="0.00"
+              />
+              <span id="currency-symbol" className="currency">STRK</span>
+            </div>
+
+            <div className="apy-rate">$0.00 APY / year</div>
+            <GasFee />
+          </div>
+
+          <Button variant="secondary" size="lg" className="stake-button">
+            Stake
+          </Button>
+        </div>
+      </div>
+    </VaultLayout>
+  );
+}
+
+export default Stake;