Skip to content

Commit

Permalink
fix: stake page-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@ONEONUORA
ONEONUORA committed Dec 18, 2024
1 parent ebfa8a0 commit 5d10ee1
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 88 deletions.
2 changes: 2 additions & 0 deletions frontend/src/components/GasFee/gasfee.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rem 3rem;
padding-bottom: 1rem;
}

.gas-fee-circle {
Expand Down
154 changes: 76 additions & 78 deletions frontend/src/pages/vault/stake/Stake.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
import { ReactComponent as DAI } from '../../../assets/icons/dai.svg';
import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg'
import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg';
import MetricCard from 'components/StakeCard/MetricCard';
import STRK from '../../../assets/icons/strk.svg';
import USDCc from '../../../assets/icons/apy_icon.svg';
Expand All @@ -15,7 +15,7 @@ import BalanceCards from 'components/BalanceCards';
function Stake() {
const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
const [amount, setAmount] = useState('0');
const [showDrop, setShowDrop] = useState(false)
const [showDrop, setShowDrop] = useState(false);

const [balances, setBalances] = useState([
{ icon: <STTRK />, title: 'STRK', balance: '0.046731' },
Expand All @@ -26,7 +26,6 @@ function Stake() {
const networks = [{ name: 'Starknet', image: STRK }];
const handleChange = (network) => {
setSelectedNetwork(network.name);

};

const handleAmountChange = (e) => {
Expand All @@ -42,99 +41,98 @@ function Stake() {
<div className="stake-container">
<div className="balance-display-container">
<div className="large-screen-balance">
<div className='main-container'>
<div className='top-cards'>
<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={USDCc} />
</div>
</div>
</div>
<div className="mobile-screen-balance">
<BalanceCards
balances={balances}
setBalances={setBalances}
walletId={null}
/>
<BalanceCards balances={balances} setBalances={setBalances} walletId={null} />
</div>
</div>
<div className='form'>
<h1 className="stake-title">Please submit your leverage details</h1>
<div className="main-stake-card">
<div onClick={() => setShowDrop(!showDrop)} className={showDrop ? "clicked-network-selector-container" : "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 className="form">
<h1 className="stake-title">Please submit your leverage details</h1>
<div className="main-stake-card">
<div
onClick={() => setShowDrop(!showDrop)}
className={showDrop ? 'clicked-network-selector-container' : '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>
<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 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>

<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>
<div className="parent-divider1">
<div className="divider1"></div>
</div>

<div className="apy-rate">$0.00 APY / year</div>
<div className='parent-divider1' >
<div className="divider1"></div>
</div>

<GasFee/>
<GasFee />
</div>
</div>
<div className="can-stk">
<Button variant="secondary" size="lg" className="cancel">
{' '}
Cancel
</Button>
<Button variant="secondary" size="lg" className="stake-button1">
Stake
</Button>
</div>

</div>
<div className='can-stk'>
<Button variant="secondary" size="lg" className='cancel'> Cancel</Button>
<Button variant="secondary" size="lg" className="stake-button1">
Stake
</Button>

</div>

</div>
</div>
</VaultLayout>
);
}



export default Stake;
export default Stake;
18 changes: 8 additions & 10 deletions frontend/src/pages/vault/stake/stake.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,8 @@
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
justify-content: space-between;
width:100%;
margin-top: 2rem;
}
.cancel {
Expand Down Expand Up @@ -241,27 +242,24 @@

}

.parent-divider {
display: flex;
justify-items: auto;


}

.divider1 {
/* max-width: 100%; */
height: 1px;
width: 80%;
background: var(--footer-divider-bg);
margin:auto;
}


}

/* Desktop view */
@media (min-width:768px) {
.divider {
width: 100%;
.divider1 {
height: 1px;
width: 80%;
background: var(--footer-divider-bg);
margin:auto;

}
.stake-wrapper {
Expand Down

0 comments on commit 5d10ee1

Please sign in to comment.