Merge pull request #127 from BrunoAmbricca/feat/form-page-enhancements

Form Page Enhancements

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: <ETH />, title: 'ETH', balance: '0.00' },
+        { icon: <USDC />, title: 'USDC', balance: '0.00' },
+        { icon: <STRK />, title: 'STRK', balance: '0.00' },
+        { icon: <DAI />, title: 'DAI', balance: '0.00' },
+    ]);
+
+    useEffect(() => {
+        getBalances(walletId, setBalances);
+    }, [walletId]);
+
+
+    return (
+        <div className="balance-container">
+            {balances.map((balance) => (
+            <div className={"balance-item"} key={balance.title}>
+                <label htmlFor={balance.title} className={"balance-title"}>
+                {balance.icon}{balance.title} Balance:
+                </label>
+                <label htmlFor={balance.title}>
+                {balance.balance}
+                </label>
+            </div>
+            ))}
+        </div>
+    )
+};
+
+export default BalanceCards;

frontend/src/components/CardGradients.jsx

@@ -0,0 +1,8 @@
+const CardGradients = ({ additionalClassName }) => (
+    <div className={`card-gradients ${additionalClassName}`}>
+        <div className="card-gradient"></div>
+        <div className="card-gradient"></div>
+    </div>
+  );
+
+  export default CardGradients;

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) => (
+        <Star key={index} style={{
+            position: 'absolute',
+            top: `${star.top}%`,
+            left: `${star.left}%`,
+            width: `${star.size}%`,
+            height: `${star.size}%`
+        }}/>
+    ))
+  );
+
+  export default StarMaker;

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: <ETH />, title: 'ETH', balance: '0.00' },
-        { icon: <USDC />, title: 'USDC', balance: '0.00' },
-        { icon: <STRK />, title: 'STRK', balance: '0.00' },
-        { icon: <DAI />, 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 (
         <div className="form-container container">
             {/* The rest of the UI stays largely unchanged */}
+            <BalanceCards walletId={walletId}/>
             <form onSubmit={handleSubmit}>
                 <div className="form-wrapper">
                     <div className="form-title">
                         <h1>Submit your leverage details</h1>
                     </div>
+                    {alertMessage && <p className="error-message form-alert">{alertMessage} <AlertHexagon className="form-alert-hex"/></p>}
                     <label>Select Token</label>
                     <TokenSelector setSelectedToken={setSelectedToken} />
                     <div className="token-label">
@@ -91,6 +98,8 @@ const Form = ({ walletId, setWalletId }) => {
                     <div className="submit">
                         <button type="submit" className='form-button'>Submit</button>
                     </div>
+                    <CardGradients additionalClassName={"forms-gradient"}/>
+                    <StarMaker starData={starData}/>
                 </div>
             </form>
             <Spinner loading={loading} />

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 ;
 }