Merge pull request #327 from djeck1432/fix/form_and_dashboard_styles

fix/form_and_dashboard_styles
djeck1432 · Dec 8, 2024 · 106906c · 106906c
2 parents e70906a + ef28738
commit 106906c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 31 deletions.
diff --git a/frontend/src/components/MultiplierSelector.jsx b/frontend/src/components/MultiplierSelector.jsx
@@ -5,27 +5,26 @@ import './multiplier.css';
 
 const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   const { data, isLoading, error } = useMaxMultiplier();
-  const [actualValue, setActualValue] = useState(0.0);
+  const [actualValue, setActualValue] = useState(1.0);
   const sliderRef = useRef(null);
   const isDragging = useRef(false);
 
   const maxMultiplier = useMemo(() => {
-    return Math.round(parseFloat((data?.[selectedToken]))) || 5.0;
+    return Math.round(parseFloat(data?.[selectedToken])) || 5.0;
   }, [data, selectedToken]);
 
-
   const mapSliderToValue = useCallback(
     (sliderPosition) => {
       const rect = sliderRef.current.getBoundingClientRect();
       const percentage = sliderPosition / rect.width;
-      const value = percentage * maxMultiplier;
-      return Math.max(0, Math.min(maxMultiplier, parseFloat(value.toFixed(1))));
+      const value = percentage * (maxMultiplier - 1) + 1;
+      return Math.max(1, Math.min(maxMultiplier, parseFloat(value.toFixed(1))));
     },
     [maxMultiplier]
   );
 
   const calculateSliderPercentage = useCallback(
-    (value) => Math.min(((value) / (maxMultiplier)) * 100, 100),
+    (value) => Math.min(((value - 1) / (maxMultiplier - 1)) * 100, 100),
     [maxMultiplier]
   );
 
@@ -95,12 +94,7 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
       <div className="slider-container">
         <div className="slider-with-tooltip">
           <div className="multiplier-slider-container">
-            <div
-              className="slider"
-              ref={sliderRef}
-              onMouseDown={handleMouseDown}
-              onTouchStart={handleTouchStart}
-            >
+            <div className="slider" ref={sliderRef} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart}>
               <div className="slider-track">
                 <div
                   className="slider-range"
@@ -121,11 +115,8 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
             </div>
           </div>
           <div className="mark-container">
-            {Array.from({ length: maxMultiplier + 1 }, (_, i) => i).map((mark) => (
-              <div
-                key={mark}
-                className={`mark-item ${actualValue >= mark && actualValue < mark + 1 ? 'active' : ''}`}
-              >
+            {Array.from({ length: maxMultiplier }, (_, i) => i + 1).map((mark) => (
+              <div key={mark} className={`mark-item ${actualValue >= mark && actualValue < mark + 1 ? 'active' : ''}`}>
                 <div className="marker" />
                 <span className="mark-label">{`x${mark}`}</span>
               </div>
@@ -137,4 +128,4 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   );
 };
 
-export default MultiplierSelector;
+export default MultiplierSelector;
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css
@@ -110,7 +110,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 80px;
   margin-bottom: 20px;
 }
 
@@ -330,7 +330,7 @@ input[type='number'].error {
   .form-token {
     max-width: 100%;
     overflow-x: scroll;
-    gap: 16px;
+    gap: 40px;
     scrollbar-width: none;
   }
 
@@ -465,6 +465,15 @@ input[type='number'].error {
   }
 }
 
+@media (max-width: 480px) {
+  .form-token {
+    max-width: 100%;
+    overflow-x: scroll;
+    gap: 16px;
+    scrollbar-width: none;
+  }
+}
+
 /* Tablet devices */
 @media screen and (min-width: 600px) and (max-width: 900px) {
 }

diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './dashboard.css';
 import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
-// import { ReactComponent as StrkIcon } from 'assets/icons/strk.svg';
+import { ReactComponent as StrkIcon } from 'assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from 'assets/icons/usd_coin.svg';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
 import { ReactComponent as CollateralIcon } from 'assets/icons/collateral_dynamic.svg';
@@ -13,10 +13,10 @@ import Spinner from 'components/spinner/Spinner';
 import useDashboardData from 'hooks/useDashboardData';
 import { useClosePosition } from 'hooks/useClosePosition';
 import Button from 'components/ui/Button/Button';
-
 import { useWalletStore } from 'stores/useWalletStore';
 import { ActionModal } from 'components/ui/ActionModal';
 import useTelegramNotification from 'hooks/useTelegramNotification';
+
 export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
   const [isCollateralActive, setIsCollateralActive] = useState(true);
@@ -74,16 +74,27 @@ export default function Component({ telegramId }) {
         return;
       }
 
-      const { health_ratio, current_sum, start_sum, borrowed } = data;
+      const { health_ratio, current_sum, start_sum, borrowed, multipliers } = data;
+
+      let currencyName = 'Ethereum';
+      let currencyIcon = EthIcon;
+
+      if (multipliers && multipliers.STRK) {
+        currencyName = 'STRK';
+        currencyIcon = StrkIcon;
+      } else if (multipliers && multipliers.ETH) {
+        currencyName = 'Ethereum';
+        currencyIcon = EthIcon;
+      }
 
       // Update card data using the new data structure
       const updatedCardData = [
         {
           title: 'Collateral & Earnings',
           icon: CollateralIcon,
           balance: current_sum,
-          currencyName: 'Ethereum',
-          currencyIcon: EthIcon,
+          currencyName: currencyName,
+          currencyIcon: currencyIcon,
         },
         {
           title: 'Borrow',
@@ -176,20 +187,22 @@ export default function Component({ telegramId }) {
                   </div>
                   <span>
                     <span className="balance-label">Balance: </span>
-                    <span className="balance-value">{cardData[0]?.balance || '0.00'}</span>
+                    <span className="balance-value">
+                      {cardData[0]?.balance ? Number(cardData[0].balance).toFixed(8) : '0.00'}
+                    </span>
                   </span>
                   <span>
                     <span className="balance-label">Start sum: </span>
                     <span className="balance-value">
                       <span className="currency-symbol">$</span>
-                      {startSum}
+                      {startSum ? Number(startSum).toFixed(8) : '0.00'}
                     </span>
                   </span>
                   <span>
                     <span className="balance-label">Current sum: </span>
                     <span className={currentSum === 0 ? 'current-sum-white' : getCurrentSumColor()}>
                       <span className="currency-symbol">$</span>
-                      {currentSum}
+                      {currentSum ? Number(currentSum).toFixed(8) : '0.00'}
                       {currentSum > startSum && currentSum !== 0 && <TrendingUp className="lucide-up-icon" />}
                       {currentSum < startSum && currentSum !== 0 && <TrendingDown className="lucide-down-icon" />}
                     </span>
@@ -207,7 +220,9 @@ export default function Component({ telegramId }) {
                   </div>
                   <span>
                     <span className="balance-label">Balance: </span>
-                    <span className="balance-value">{cardData[1]?.balance || '0.00'}</span>
+                    <span className="balance-value">
+                      {cardData[1]?.balance ? Number(cardData[1].balance).toFixed(8) : '0.00'}
+                    </span>
                   </span>
                 </div>
               </div>

diff --git a/frontend/src/pages/spotnet/dashboard/dashboard.css b/frontend/src/pages/spotnet/dashboard/dashboard.css
@@ -331,8 +331,6 @@ body {
   }
 
   .dashboard-container {
-    padding-left: 6px;
-    padding-right: 6px;
     width: 100%;
     max-width: 100%;
     margin: 0 auto;