start loop leverage at 2x

ionicprotocol · Dec 5, 2024 · f08bf33 · f08bf33
1 parent c2a6c7a
commit f08bf33
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 88 deletions.
diff --git a/packages/ui/app/_components/dialogs/loop/BorrowActions.tsx b/packages/ui/app/_components/dialogs/loop/BorrowActions.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 import { type Address } from 'viem';
 import { useChainId } from 'wagmi';
 
+import { Slider } from '@ui/components/ui/slider';
 import { useFusePoolData } from '@ui/hooks/useFusePoolData';
 import type { MarketData } from '@ui/types/TokensDataMap';
 
-import Range from '../../Range';
 import ResultHandler from '../../ResultHandler';
 import Amount from '../manage/Amount';
 
@@ -49,7 +49,13 @@ function BorrowActions({
     chainId,
     true
   );
-  const maxLoop = 2;
+  const maxAllowedLoop = 3;
+
+  const marks = Array.from({ length: 8 }, (_, i) => ({
+    value: i + 2,
+    label: `${i + 2}x`,
+    isDisabled: i + 2 > maxAllowedLoop
+  }));
 
   return (
     <ResultHandler isLoading={isLoadingMarketData}>
@@ -87,54 +93,34 @@ function BorrowActions({
             <div className="mr-6 text-sm">
               LOOP
               <div className="text-lg font-bold">
-                {(currentLeverage - 1).toFixed(1)}
+                {currentLeverage.toFixed(1)}x
               </div>
             </div>
 
-            <div className="w-full">
-              <div className="relative h-[20px] mb-2 text-xs md:text-sm">
-                {[
-                  '1x',
-                  '2x',
-                  '3x',
-                  '4x',
-                  '5x',
-                  '6x',
-                  '7x',
-                  '8x',
-                  '9x',
-                  '10x'
-                ].map((label, i) => (
-                  <span
-                    className={`absolute top-0 cursor-pointer translate-x-[-50%] ${
-                      currentPositionLeverage &&
-                      currentPositionLeverage === i + 1 &&
-                      'text-lime'
-                    } ${i > maxLoop && 'text-white/20'} ${
-                      currentLeverage === i + 1 && '!text-accent'
-                    } `}
-                    key={`label-${label}`}
-                    onClick={() =>
-                      setCurrentLeverage(i > maxLoop ? maxLoop + 1 : i + 1)
-                    }
-                    style={{ left: `${(i / 9) * 100}%` }}
-                  >
-                    {label}
-                  </span>
-                ))}
-              </div>
-
-              <Range
-                currentValue={currentLeverage - 1}
+            <div className="w-full space-y-4">
+              <Slider
+                defaultValue={[2]}
                 max={9}
-                min={1}
-                setCurrentValue={(val: number) =>
-                  setCurrentLeverage(val > maxLoop ? maxLoop + 1 : val + 1)
-                }
+                min={2}
                 step={1}
+                marks={marks}
+                value={[currentLeverage]}
+                currentPosition={currentPositionLeverage}
+                onMarkClick={(value) => {
+                  if (value >= 2 && value <= maxAllowedLoop) {
+                    setCurrentLeverage(value);
+                  }
+                }}
+                onValueChange={(value) => {
+                  const newValue = value[0];
+                  if (newValue >= 2 && newValue <= maxAllowedLoop) {
+                    setCurrentLeverage(newValue);
+                  }
+                }}
+                className="w-full"
               />
 
-              <div className="flex justify-between pt-2 text-white/50 text-xs">
+              <div className="flex justify-between text-white/50 text-xs">
                 <span>{'<'} Repay</span>
                 <span>Borrow {'>'}</span>
               </div>

diff --git a/packages/ui/app/_components/dialogs/loop/index.tsx b/packages/ui/app/_components/dialogs/loop/index.tsx
@@ -125,7 +125,7 @@ export default function Loop({
         : undefined,
       chainId
     );
-  const [currentLeverage, setCurrentLeverage] = useState<number>(1);
+  const [currentLeverage, setCurrentLeverage] = useState<number>(2);
   const { data: borrowApr } = useGetPositionBorrowApr({
     amount: amountAsBInt,
     borrowMarket: selectedBorrowAsset?.cToken ?? ('' as Address),

diff --git a/packages/ui/components/ui/slider.tsx b/packages/ui/components/ui/slider.tsx
@@ -6,55 +6,88 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 
 import { cn } from '@ui/lib/utils';
 
+type Mark = {
+  value: number;
+  label: string;
+  isDisabled?: boolean;
+};
+
+interface SliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  marks?: Mark[];
+  onMarkClick?: (value: number) => void;
+  currentPosition?: number;
+}
+
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, value, ...props }, ref) => {
-  const percentage = value ? value[0] : 0;
-  const getColor = () => (percentage <= 50 ? 'bg-accent' : 'bg-lime');
-  const getTextColor = () => (percentage <= 50 ? 'text-accent' : 'text-lime');
-  const percentages = [0, 20, 40, 60, 80, 100];
-
-  return (
-    <div className="space-y-2">
-      <div className="relative w-full h-4">
-        {percentages.map((percent) => (
-          <span
-            key={percent}
-            className={cn(
-              'absolute text-xs text-white/25 -translate-x-1/2',
-              percentage === percent && getTextColor()
-            )}
-            style={{ left: `${percent}%` }}
-          >
-            {percent}%
-          </span>
-        ))}
-      </div>
-      <SliderPrimitive.Root
-        ref={ref}
-        className={cn(
-          'relative flex w-full touch-none select-none items-center',
-          className
+  SliderProps
+>(
+  (
+    { className, value, marks, onMarkClick, currentPosition, ...props },
+    ref
+  ) => {
+    const percentage = value ? value[0] : 0;
+    const getColor = () => (percentage <= 50 ? 'bg-accent' : 'bg-lime');
+
+    return (
+      <div className="space-y-2">
+        {marks && (
+          <div className="relative w-full h-4">
+            {marks.map((mark) => {
+              const position =
+                ((mark.value - (props.min || 0)) /
+                  ((props.max || 100) - (props.min || 0))) *
+                100;
+              return (
+                <span
+                  key={mark.value}
+                  className={cn(
+                    'absolute text-xs -translate-x-1/4',
+                    mark.isDisabled
+                      ? 'text-white/20 cursor-not-allowed'
+                      : 'cursor-pointer',
+                    currentPosition === mark.value && 'text-lime',
+                    value && value[0] === mark.value && '!text-accent'
+                  )}
+                  style={{ left: `${position}%` }}
+                  onClick={() => {
+                    if (!mark.isDisabled && onMarkClick) {
+                      onMarkClick(mark.value);
+                    }
+                  }}
+                >
+                  {mark.label}
+                </span>
+              );
+            })}
+          </div>
         )}
-        value={value}
-        {...props}
-      >
-        <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-graylite">
-          <SliderPrimitive.Range
-            className={cn('absolute h-full', getColor())}
-          />
-        </SliderPrimitive.Track>
-        <SliderPrimitive.Thumb
+        <SliderPrimitive.Root
+          ref={ref}
           className={cn(
-            'block h-4 w-4 rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
-            getColor()
+            'relative flex w-full touch-none select-none items-center',
+            className
           )}
-        />
-      </SliderPrimitive.Root>
-    </div>
-  );
-});
+          value={value}
+          {...props}
+        >
+          <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-graylite">
+            <SliderPrimitive.Range
+              className={cn('absolute h-full', getColor())}
+            />
+          </SliderPrimitive.Track>
+          <SliderPrimitive.Thumb
+            className={cn(
+              'block h-4 w-4 rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+              getColor()
+            )}
+          />
+        </SliderPrimitive.Root>
+      </div>
+    );
+  }
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };