diff --git a/frontend/src/assets/icons/alert_hexagon.svg b/frontend/src/assets/icons/alert_hexagon.svg new file mode 100644 index 00000000..fb9d57ec --- /dev/null +++ b/frontend/src/assets/icons/alert_hexagon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/strk.svg b/frontend/src/assets/icons/strk.svg index d9d7281d..a41f1a27 100644 --- a/frontend/src/assets/icons/strk.svg +++ b/frontend/src/assets/icons/strk.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/BalanceCards.jsx b/frontend/src/components/BalanceCards.jsx new file mode 100644 index 00000000..d2730bf2 --- /dev/null +++ b/frontend/src/components/BalanceCards.jsx @@ -0,0 +1,37 @@ +import React, { useEffect, 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 { ReactComponent as DAI } from '../assets/icons/dai.svg'; +import { getBalances } from '../utils/wallet'; + +const BalanceCards = ({ walletId }) => { + const [balances, setBalances] = useState([ + { icon: , title: 'ETH', balance: '0.00' }, + { icon: , title: 'USDC', balance: '0.00' }, + { icon: , title: 'STRK', balance: '0.00' }, + { icon: , title: 'DAI', balance: '0.00' }, + ]); + + useEffect(() => { + getBalances(walletId, setBalances); + }, [walletId]); + + + return ( +
+ {balances.map((balance) => ( +
+ + +
+ ))} +
+ ) +}; + +export default BalanceCards; \ No newline at end of file diff --git a/frontend/src/components/CardGradients.jsx b/frontend/src/components/CardGradients.jsx new file mode 100644 index 00000000..87510669 --- /dev/null +++ b/frontend/src/components/CardGradients.jsx @@ -0,0 +1,8 @@ +const CardGradients = ({ additionalClassName }) => ( +
+
+
+
+ ); + + export default CardGradients; \ No newline at end of file diff --git a/frontend/src/components/StarMaker.jsx b/frontend/src/components/StarMaker.jsx new file mode 100644 index 00000000..45ef886d --- /dev/null +++ b/frontend/src/components/StarMaker.jsx @@ -0,0 +1,15 @@ +import { ReactComponent as Star } from "../assets/particles/star.svg"; + +const StarMaker = ({ starData }) => ( + starData.map((star, index) => ( + + )) + ); + + export default StarMaker; \ No newline at end of file diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx index 5175ebb3..68f81038 100644 --- a/frontend/src/pages/forms/Form.jsx +++ b/frontend/src/pages/forms/Form.jsx @@ -1,31 +1,28 @@ import './form.css'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import TokenSelector from '../../components/TokenSelector'; +import BalanceCards from '../../components/BalanceCards'; import MultiplierSelector from '../../components/MultiplierSelector'; -import { connectWallet, getBalances } from '../../utils/wallet'; +import { connectWallet } from '../../utils/wallet'; import { handleTransaction } from '../../utils/transaction'; import Spinner from '../../components/spinner/Spinner'; -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 { ReactComponent as DAI } from '../../assets/icons/dai.svg'; +import StarMaker from '../../components/StarMaker'; +import CardGradients from '../../components/CardGradients'; +import { ReactComponent as AlertHexagon } from '../../assets/icons/alert_hexagon.svg'; const Form = ({ walletId, setWalletId }) => { - const [balances, setBalances] = useState([ - { icon: , title: 'ETH', balance: '0.00' }, - { icon: , title: 'USDC', balance: '0.00' }, - { icon: , title: 'STRK', balance: '0.00' }, - { icon: , title: 'DAI', balance: '0.00' }, - ]); + const starData = [ + { top: 35, left: 12, size: 12 }, + { top: 90, left: 7, size: 7,}, + { top: 40, left: 80, size: 7 }, + { top: 75, left: 90, size: 9 }, + ] const [tokenAmount, setTokenAmount] = useState(''); const [selectedToken, setSelectedToken] = useState(''); const [selectedMultiplier, setSelectedMultiplier] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); - - useEffect(() => { - getBalances(walletId, setBalances); - }, [walletId]); + const [alertMessage, setAlertMessage] = useState(''); const connectWalletHandler = async () => { try { @@ -50,6 +47,14 @@ const Form = ({ walletId, setWalletId }) => { e.preventDefault(); let connectedWalletId = walletId; + + + if(tokenAmount === '' || selectedToken === '' || selectedMultiplier === '') { + setAlertMessage('Please fill the form'); + } else { + setAlertMessage(''); + } + if (!connectedWalletId) { connectedWalletId = await connectWalletHandler(); } @@ -68,11 +73,13 @@ const Form = ({ walletId, setWalletId }) => { return (
{/* The rest of the UI stays largely unchanged */} +

Submit your leverage details

+ {alertMessage &&

{alertMessage}

}
@@ -91,6 +98,8 @@ const Form = ({ walletId, setWalletId }) => {
+ +
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css index 4e5b1a6b..8d1a2254 100644 --- a/frontend/src/pages/forms/form.css +++ b/frontend/src/pages/forms/form.css @@ -87,6 +87,14 @@ background: var(--secondary-color); } +.token-card:has(input[type="radio"]:checked) h5 { + color: black; +} + +.token-card:has(input[type="radio"]:checked) h5 svg path { + fill: black; +} + /* .token-card:active { background: var(--blue-color); border-radius: 8px; @@ -119,6 +127,9 @@ padding: 10px; } +.token-label-component svg { + fill: red; +} .form-wrapper > *{ color: white; @@ -160,7 +171,8 @@ width: 120px; height: 15px; text-align: center; - font-size: 15px; font-size: 15px; + font-weight: bold; + font-size: 11px; border-radius: 5px 5px 0 0; display: flex; align-items: center; @@ -172,12 +184,10 @@ .recommended-item { display: flex; align-items: flex-end !important; - font-size: 28px !important; + font-size: 20px; } - - .multiplier-item label{ border: 1px solid var(--blue-color); width: 120px; @@ -190,6 +200,7 @@ .multiplier-item:not(.recommended-item) label { align-items: center; + font-size: 21px; } input[type="radio"]{ @@ -207,7 +218,7 @@ input[type="radio"]{ .multiplier-item input[type="radio"]:checked + label { border-color: var(--blue-color); - box-shadow: 0 4px 8px var(--blue-color); + box-shadow: 0 4px 20px var(--blue-color); } input[type="number"]::-webkit-outer-spin-button, @@ -299,4 +310,81 @@ input[type="number"].error { height: 22px; font-size: 15px; } +} + +.forms-gradient .card-gradient:nth-child(1){ + position: absolute; + top: 240px; + left: -156px; + width: 232px; + height: 208px; + flex-shrink: 0; + border-radius: 2000px; + background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%)); + filter: blur(111px); +} + +.forms-gradient .card-gradient:nth-child(2){ + position: absolute; + right: -70px; + bottom: -55px; + width: 232px; + height: 208px; + flex-shrink: 0; + border-radius: 2000px; + background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%)); + /* Blur */ + filter: blur(123px); +} + +.form-alert{ + display: flex; + align-items: center; +} + +.form-alert-hex{ + margin-left: auto; +} + +.balance-container{ + display: flex; + margin-bottom: 60px; + justify-content: space-between; +} + +.balance-item{ + display: flex; + flex-direction: column; + background-color: #74D6FD80; + height: 129px; + width: 300px; + align-items: center; + border-radius: 8px; + border: 0.5px solid #4e7787; + justify-content: center; + background: linear-gradient(150deg, #74D6FD80 1.13%, #0B0C1080 103.45%); + margin-right: 20px; + box-shadow: 3.75px 3.75px 9.38px 0px #99EAFF40 inset; +} + +.balance-item label:nth-child(1){ + font-size: 20px; + color: var(--secondary); + letter-spacing: 0.5px; +} + +.balance-item label:nth-child(2){ + font-size: 32px; + color: var(--secondary); +} + +.balance-title{ + display: flex; + align-items: center; +} + +.balance-title svg{ + margin-right: 5px; + height: 25px; + width: 24px ; } \ No newline at end of file