Merge pull request #253 from DanielEmmanuel1/Deon-OD

feat: Draft PR For [FRONTEND] Form page (desktop) task

frontend/src/components/BalanceCards.jsx

@@ -36,8 +36,10 @@ const BalanceCards = ({ walletId }) => {
         ) : (
           <div className="balance-item" key={balance.title}>
             <label htmlFor={balance.title} className={'balance-title'}>
-              {balance.icon}
-              {balance.title} Balance:
+              <p className='balance-icon-wrapper'>
+                {balance.icon}
+              </p>
+              <span>{balance.title} Balance</span>
             </label>
             <label htmlFor={balance.title}>{balance.balance}</label>
           </div>
@@ -47,4 +49,4 @@ const BalanceCards = ({ walletId }) => {
   );
 };
 
-export default BalanceCards;
+export default BalanceCards;

frontend/src/components/MultiplierSelector.jsx

@@ -1,61 +1,75 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import './multiplier.css';
 
+const MultiplierSelector = ({ min = 0, max = 10, step = 1, defaultValue = 1, setSelectedMultiplier, selectedToken }) => {
+    const { data, isLoading, error } = useMaxMultiplier();
+    const [value, setValue] = useState(defaultValue);
 
-const MultiplierSelector = ({ setSelectedMultiplier, selectedToken, sliderValue }) => {
-  const { data, isLoading, error } = useMaxMultiplier();
-  const [actualValue, setActualValue] = useState(1.0);
 
-  const maxMultiplier = useMemo(() => {
-    return data?.[selectedToken] || 5.0;
-  }, [data, selectedToken]);
+    const maxMultiplier = useMemo(() => {
+        return data?.[selectedToken] || 11.0;
+    }, [data, selectedToken]);
 
-  const mapSliderToValue = (sliderValue) => {
-    return maxMultiplier - sliderValue + 1;
-  };
+    const handleMultiplierChange = useCallback((e) => {
+        setValue(Number(e.target.value));
+        setSelectedMultiplier(value);
+    }, [setSelectedMultiplier, value]);
 
-  const handleMultiplierChange = useCallback((e) => {
-    const sliderValue = parseFloat(e.target.value);
-    const value = mapSliderToValue(sliderValue).toFixed(1);
-    setActualValue(value);
-    setSelectedMultiplier(value);
-  }, [setSelectedMultiplier, maxMultiplier]);
+    const steps = Array.from(
+        { length: Math.floor((max - min) / step) + 1 },
+        (_, i) => min + (i * step)
+    );
 
-  const getSliderPercentage = useCallback(() => {
-    return (((maxMultiplier - actualValue + 1) - 1) / (maxMultiplier - 1)) * 100;
-  }, [actualValue, maxMultiplier]);
+    console.log(maxMultiplier);
+    const TOTAL_MARKS = 11;
 
-  if (isLoading) return <div className='slider-skeleton'>Loading multiplier data...</div>;
-  if (error) return <div className='error-message'>Error loading multiplier data: {error.message}</div>;
+    const getTrackPercentage = useCallback(() => {
+        return ((value - min + 0.15) / (max - min + 0.25)) * 100;
+    }, [value, min, max]);
 
-  return (
-    <div className='multiplier-card'>
-      <div className='slider-container'>
-        <div className='slider-labels'>
-          <span>Max</span>
-          <span>Low</span>
-        </div>
-        <div className='slider-with-tooltip'>
-          <div 
-            className='slider-tooltip' 
-            style={{ left: `${getSliderPercentage()}%` }}
-          >
-            {sliderValue}x
-          </div>
-          <input
-            type='range'
-            min='1'
-            max={maxMultiplier}
-            step='0.1'
-            value={maxMultiplier - actualValue + 1}
-            onChange={handleMultiplierChange}
-            className='multiplier-slider'
-          />
+    if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
+    if (error) return <div className="error-message">Error loading multiplier data: {error.message}</div>;
+
+    return (
+        <div className="step-slider-container">
+            <div className="slider-labels">
+                <span>Min</span>
+                <span>Max</span>
+            </div>
+            <div className="slider-wrapper">
+                <div
+                    className="slider-track-fill"
+                    style={{ 'width': `${getTrackPercentage()}%` }}
+                />
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={value}
+                    onChange={handleMultiplierChange}
+                    className="step-slider"
+                />
+                <div className="step-markers">
+                    {steps.map((stepValue) => (
+                        <div
+                            key={stepValue}
+                            className={`step-mark ${stepValue === value ? 'active' : ''}`}
+                        />
+                    ))}
+                </div>
+                <div className="step-multipliers">
+                    {Array.from({ length: TOTAL_MARKS }).map((_, index) => (
+                        <div
+                            key={index}
+                            className={`step-multiplier ${index === value ? 'active' : ''}`}
+                        >x{index}</div>
+                    ))}
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
 
-export default MultiplierSelector;
+export default MultiplierSelector;

frontend/src/components/SlideBarFour.jsx

@@ -0,0 +1,82 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
+import './slider-three.css';
+
+const StepSlider = ({ min = 0, max = 10, step = 1, defaultValue = 1, setSelectedMultiplier, selectedToken }) => {
+    const { data, isLoading, error } = useMaxMultiplier();
+    const [value, setValue] = useState(defaultValue);
+
+
+    const maxMultiplier = useMemo(() => {
+        return data?.[selectedToken] || 11.0;
+    }, [data, selectedToken]);
+
+    const handleMultiplierChange = useCallback((e) => {
+        setValue(Number(e.target.value));
+        setSelectedMultiplier(value);
+    }, [setSelectedMultiplier, value]);
+
+    const steps = Array.from(
+        { length: Math.floor((max - min) / step) + 1 },
+        (_, i) => min + (i * step)
+    );
+
+    const TOTAL_MARKS = 11;
+
+    const getTrackPercentage = useCallback(() => {
+        return ((value - min) / (max - min)) * 100;
+    }, [value, min, max]);
+
+    const getCurrentMark = useCallback(() => {
+        const invertedValue = maxMultiplier - actualValue + 1;
+        const markIndex = Math.round((invertedValue - 1) * (TOTAL_MARKS - 1) / (maxMultiplier - 1));
+        return Math.min(Math.max(0, markIndex), TOTAL_MARKS - 1);
+    }, [value, maxMultiplier, TOTAL_MARKS]);
+
+    if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
+    if (error) return <div className="error-message">Error loading multiplier data: {error.message}</div>;
+
+    const currentMark = getCurrentMark();
+
+    return (
+        <div className="step-slider-container">
+            <div className="slider-labels">
+                <span>Min</span>
+                <span>Max</span>
+            </div>
+            <div className="slider-wrapper">
+                <div
+                    className="slider-track-fill"
+                    style={{ 'width': `${getTrackPercentage()}%` }}
+                />
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={value}
+                    onChange={handleMultiplierChange}
+                    className="step-slider"
+                />
+                <div className="step-markers">
+                    {steps.map((stepValue) => (
+                        <div
+                            key={stepValue}
+                            className={`step-mark ${stepValue === currentMark ? 'active' : ''}`}
+                        />
+                    ))}
+                </div>
+                <div className="step-multipliers">
+                    {Array.from({ length: TOTAL_MARKS }).map((_, index) => (
+                        <div
+                            key={index}
+                            className={`step-multiplier ${index === currentMark ? 'active' : ''}`}
+                        >x{index}</div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StepSlider;

frontend/src/components/TokenSelector.jsx

@@ -11,25 +11,30 @@ const Tokens = [
   { id: 'daiOption', component: <DAI />, label: 'DAI' },
 ];
 
-const TokenSelector = ({ setSelectedToken }) => (
-  <div className='form-token'>
-    {Tokens.map((token) => (
-      <div className='token-card flex' key={token.id}>
-        <input
-          type='radio'
-          id={token.id}
-          name='token-options'
-          value={token.label}
-          onChange={() => setSelectedToken(token.label)}
-        />
-        <label htmlFor={token.id}>
-          <h5>
-            {token.component} {token.label}
-          </h5>
-        </label>
-      </div>
-    ))}
-  </div>
-);
+const TokenSelector = ({ setSelectedToken, currentToken }) => {
+  const handleSelectedToken = (token) => {
+    setSelectedToken(token);
+  }
+  return (
+    <div className="form-token">
+      {Tokens.map((token) => (
+        <div className="token-card flex" key={token.id}>
+          <input
+            type="radio"
+            id={token.id}
+            name="token-options"
+            value={token.label}
+            onChange={() => handleSelectedToken(token.label)}
+          />
+          <label htmlFor={token.id} className={token.label === currentToken ? 'strk-token' : ''}>
+            <h5>
+              <span className='token'>{token.component}</span> {token.label}
+            </h5>
+          </label>
+        </div>
+      ))}
+    </div>
+  )
+};
 
-export default TokenSelector;
+export default TokenSelector;