+
{
/>
diff --git a/frontend/src/pages/spotnet/dashboard/add_deposit.css b/frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.css
similarity index 77%
rename from frontend/src/pages/spotnet/dashboard/add_deposit.css
rename to frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.css
index 7e4a0833..133ebba5 100644
--- a/frontend/src/pages/spotnet/dashboard/add_deposit.css
+++ b/frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.css
@@ -1,13 +1,5 @@
-body {
- font-family:
- 'Rethink Sans',
- -apple-system,
- Roboto,
- Helvetica,
- sans-serif;
- }
.deposit-wrapper {
- background: url('../../../../public/background.png') no-repeat;
+ background: url('../../../../../public/background.png') no-repeat;
background-size: cover;
background-position: center 39%;
min-height: 100vh;
@@ -19,6 +11,8 @@ body {
transition: all 0.2s ease-in-out;
padding-bottom:4rem;
}
+
+
.deposit-container {
display: flex;
@@ -58,7 +52,7 @@ body {
}
.deposit-title2 {
- font-size: 14px;
+ font-size: 20px;
font-weight: 400;
color: var(--primary);
text-align: center;
@@ -84,17 +78,46 @@ body {
border:none;
}
- .token-select-dep{
- color: #83919F;
- padding:15px 8px;
- margin-left:2rem;
- }
+
.deposit-token{
border: none;
border-radius:8px;
background-color: white;
}
+ .currency-deposit {
+ position: absolute;
+ color: var(--dark-gray);
+ right: 27%;
+ top: 18%;
+ transform: translateY(-50%);
+ opacity: 0.5;
+ font-size: 16px;
+ line-height: 20.83px;
+ z-index: 999999;
+ }
+
+ .amount-input-deposit {
+ position: relative;
+ width: 100%;
+ max-width: 400px;
+ margin: 2rem auto;
+ text-align: center;
+ font-weight: 600;
+ font-size: 64px;
+ }
+
+ .amount-field-deposit {
+ background: transparent;
+ border: none;
+ color: var(--gray);
+ font-size: 64px;
+ font-weight: 600;
+ outline: none;
+ text-align: center;
+ width: 100%;
+ }
+
.amount-stack-card {
background: var(--footer-divider-bg);
@@ -177,22 +200,7 @@ body {
height: 16px;
}
- .deposit-button {
- position: relative;
- display: inline-block;
- font-weight: 600;
- /* width: 642px; */
- width: 100%;
- height: 60px;
- background: none;
- color: var(--primary);
- font-size: 16px;
- cursor: pointer;
- border: none;
- padding: 16px 24px 16px 24px;
- z-index: 1;
- overflow: hidden;
- }
+
.deposit-button::before {
content: '';
@@ -247,19 +255,58 @@ body {
.deposit-container {
margin-left: 0px;
}
+
+ .token-select-dep{
+ color: #83919F;
+ padding:20px 10px;
+
+ }
+
+ .dep-button{
+ display: flex;
+ gap: 8px;
+ }
+
+ .deposit-cancel-button {
+ position: relative;
+
+ font-weight: 600;
+ /* width: 642px; */
+ width: 167px;
+ height: 60px;
+ background: none;
+ color: var(--primary);
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ padding: 16px 24px 16px 24px;
+ z-index: 1;
+ overflow: hidden;
+ }
+
+ .deposit-button {
+ position: relative;
+
+ font-weight: 600;
+ /* width: 642px; */
+ width: 167px;
+ height: 60px;
+ background: none;
+ color: var(--primary);
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ padding: 16px 24px 16px 24px;
+ z-index: 1;
+ overflow: hidden;
+ }
}
@media (max-width: 680px){
.deposit-container {
- /* margin-top: -120px;
- margin-left: 0px; */
}
- /* .deposital-title {
- font-size: 24px;
- } */
-
.deposital-title {
margin: 0;
}
@@ -502,5 +549,49 @@ body {
.mobile-screen-btns{
width: 280px;
}
+
+
+ }
+
+ @media (min-width:768px) {
+ .token-select-dep{
+ color: #83919F;
+ padding:20px 0px;
+
+ }
+
+ .deposit-button {
+ position: relative;
+ display: inline-block;
+ font-weight: 600;
+ /* width: 642px; */
+ width: 100%;
+ height: 60px;
+ background: none;
+ color: var(--primary);
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ padding: 16px 24px 16px 24px;
+ z-index: 1;
+ overflow: hidden;
+ }
+
+ .deposit-cancel-button {
+ position: relative;
+ display: none;
+ font-weight: 600;
+ /* width: 642px; */
+ width: 100%;
+ height: 60px;
+ background: none;
+ color: var(--primary);
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ padding: 16px 24px 16px 24px;
+ z-index: 1;
+ overflow: hidden;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.jsx b/frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.jsx
new file mode 100644
index 00000000..daa8aa45
--- /dev/null
+++ b/frontend/src/pages/spotnet/dashboard/add-deposit/AddDeposit.jsx
@@ -0,0 +1,62 @@
+
+import React, { useState } from 'react';
+import Card from 'components/Card/Card';
+import TokenSelectorDeposit from 'components/TokenSelector/TokenSelector';
+import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
+import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
+import './AddDeposit.css';
+
+export default function AddDeposit() {
+
+ const [amount, setAmount] = useState('0');
+ const handleAmountChange = (e) => {
+ const value = e.target.value;
+ const regex = /^\d*\.?\d*$/;
+ if (regex.test(value)) {
+ setAmount(value);
+ }
+ };
+
+ return (
+
+
+
zkLend Deposit
+
+
Pls make a deposit
+
+
+
+
+
+
+
+
+
+ STRK
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
From cf0d2c6c2575995f1b8419ba24f83579f6660a2d Mon Sep 17 00:00:00 2001
From: Stephanie Nwankwo <63151237+GoSTEAN@users.noreply.github.com>
Date: Sat, 21 Dec 2024 10:22:26 +0000
Subject: [PATCH 3/3] fixed:add-deposit-page
---
frontend/src/pages/forms/Form.jsx | 4 +-
.../dashboard/add-deposit/AddDeposit.css | 274 ++----------------
.../dashboard/add-deposit/AddDeposit.jsx | 17 +-
frontend/src/utils/regex.js | 5 +
4 files changed, 32 insertions(+), 268 deletions(-)
create mode 100644 frontend/src/utils/regex.js
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 8a0d817f..7e7cbd27 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -2,7 +2,6 @@ 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 STRK } from '../../assets/icons/strk.svg';
-import TokenSelector from 'components/TokenSelector';
import BalanceCards from 'components/BalanceCards';
import MultiplierSelector from 'components/MultiplierSelector';
import { handleTransaction } from 'services/transaction';
@@ -19,6 +18,7 @@ import { useCheckPosition } from 'hooks/useClosePosition';
import { useNavigate } from 'react-router-dom';
import { ActionModal } from 'components/ui/ActionModal';
import { useHealthFactor } from 'hooks/useHealthRatio';
+import TokenSelectorDeposit from 'components/TokenSelector/TokenSelector';
const Form = () => {
const navigate = useNavigate();
@@ -123,7 +123,7 @@ const Form = () => {
)}
-
+
{
const value = e.target.value;
- const regex = /^\d*\.?\d*$/;
- if (regex.test(value)) {
+ if (validateNumberInput(value)) {
setAmount(value);
}
};
@@ -29,9 +29,8 @@ export default function AddDeposit() {