From f3c55d042f9628a0661bcbc9f330bfc8dd7bd7ad Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Mon, 28 Oct 2024 20:50:35 +0100
Subject: [PATCH] extend veion dialog

---
 .../ui/app/_components/veion/ExtendVeion.tsx  | 212 +++++++++++++++---
 1 file changed, 177 insertions(+), 35 deletions(-)

diff --git a/packages/ui/app/_components/veion/ExtendVeion.tsx b/packages/ui/app/_components/veion/ExtendVeion.tsx
index 50a5d454b..4053a256d 100644
--- a/packages/ui/app/_components/veion/ExtendVeion.tsx
+++ b/packages/ui/app/_components/veion/ExtendVeion.tsx
@@ -1,40 +1,100 @@
 'use client';
 
-import { useState, useMemo } from 'react';
-
+import { useState, useEffect, useMemo } from 'react';
+import { format, addDays } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
 import { Button } from '@ui/components/ui/button';
+import { Calendar } from '@ui/components/ui/calendar';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle
 } from '@ui/components/ui/dialog';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@ui/components/ui/popover';
 import { Separator } from '@ui/components/ui/separator';
-
+import { Slider } from '@ui/components/ui/slider';
 import AutoLock from './AutoLock';
-import DateSlider from './LockDuration';
-import SliderComponent from '../popup/Slider';
+import CustomTooltip from '../CustomTooltip';
 
 interface ExtendVeionProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
+  currentVotingPower?: string;
+  currentLockDate?: string;
+  maxToken?: number;
 }
 
-export default function ExtendVeion({
+const ExtendVeion = ({
   isOpen,
-  onOpenChange
-}: ExtendVeionProps) {
-  const [veIonAmount, setVeIonAmount] = useState('');
-  const [utilization, setUtilization] = useState(0);
-  const [lockDuration, setLockDuration] = useState('');
+  onOpenChange,
+  currentVotingPower = '20.00',
+  currentLockDate = '28 Aug 2023',
+  maxToken = 100
+}: ExtendVeionProps) => {
   const [autoLock, setAutoLock] = useState(false);
-  const maxtoken = 100;
+  const [lockDuration, setLockDuration] = useState<string>('180');
+  const [lockDate, setLockDate] = useState<Date>(() =>
+    addDays(new Date(), 180)
+  );
+  const [selectedDuration, setSelectedDuration] = useState<number>(180);
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [veIonAmount, setVeIonAmount] = useState('0');
+  const [utilization, setUtilization] = useState(0);
+
+  const dateRange = useMemo(() => {
+    const today = new Date();
+    return {
+      minDate: addDays(today, 180),
+      maxDate: addDays(today, 730)
+    };
+  }, []);
 
-  // eslint-disable-next-line no-console
-  console.log('lockDuration', lockDuration);
-  useMemo(() => {
-    setUtilization(Number(((+veIonAmount / maxtoken) * 100).toFixed(0)) ?? 0);
-  }, [veIonAmount]);
+  const durationLabels = {
+    180: '180d',
+    365: '1y',
+    547: '1.5y',
+    730: '2y'
+  };
+
+  useEffect(() => {
+    const newDate = addDays(new Date(), selectedDuration);
+    setLockDate(newDate);
+    setLockDuration(selectedDuration.toString());
+  }, [selectedDuration]);
+
+  useEffect(() => {
+    setUtilization(Number(((+veIonAmount / maxToken) * 100).toFixed(0)) ?? 0);
+  }, [veIonAmount, maxToken]);
+
+  const handleDurationChange = (val: number[]) => {
+    const duration = val[0];
+    setSelectedDuration(duration);
+  };
+
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      setLockDate(date);
+      const durationInDays = Math.round(
+        (date.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
+      );
+      const clampedDuration = Math.max(180, Math.min(730, durationInDays));
+      setSelectedDuration(clampedDuration);
+      setLockDuration(clampedDuration.toString());
+      setIsCalendarOpen(false);
+    }
+  };
+
+  const handleUtilizationChange = (val: number[]) => {
+    const utilizationValue = val[0];
+    setUtilization(utilizationValue);
+    const veionval = (utilizationValue / 100) * maxToken;
+    setVeIonAmount(veionval.toString());
+  };
 
   return (
     <Dialog
@@ -47,20 +107,93 @@ export default function ExtendVeion({
         </DialogHeader>
 
         <div className="flex gap-5 text-xs">
-          <span className="text-white/50">Voting Power: 20.00 veION</span>
-          <span className="text-white/50">Locked Until: 28 Aug 2023</span>
+          <span className="text-white/50">
+            Voting Power: {currentVotingPower} veION
+          </span>
+          <span className="text-white/50">Locked Until: {currentLockDate}</span>
         </div>
 
         <div className="space-y-4">
-          <SliderComponent
-            currentUtilizationPercentage={utilization}
-            handleUtilization={(val?: number) => {
-              if (!val) return;
-              const veionval = (val / 100) * maxtoken;
-              setVeIonAmount(veionval.toString());
-            }}
-          />
-          <DateSlider setLockDuration={setLockDuration} />
+          {/* Amount Slider */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs text-white/60">
+              <p>AMOUNT</p>
+              <CustomTooltip content="Select the amount of tokens to lock" />
+            </div>
+            <Slider
+              value={[utilization]}
+              onValueChange={handleUtilizationChange}
+              max={100}
+              min={0}
+              step={1}
+              className="[&_[role=slider]]:bg-accent [&_[role=slider]]:border-0"
+            />
+            <div className="text-xs text-white/60">
+              {veIonAmount} / {maxToken} ION
+            </div>
+          </div>
+
+          {/* Lock Duration */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs text-white/60 tracking-wider">
+              <p>LOCK UNTIL</p>
+              <CustomTooltip content="A longer lock period gives you more veION for the same amount of LPs, which means a higher voting power." />
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="text-sm text-white/60">
+                {format(lockDate, 'dd. MM. yyyy')}
+              </div>
+              <Popover
+                open={isCalendarOpen}
+                onOpenChange={setIsCalendarOpen}
+              >
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="p-0 hover:bg-transparent"
+                  >
+                    <CalendarIcon className="h-4 w-4 text-white/60" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  className="w-auto p-0 bg-grayUnselect border-white/10"
+                  sideOffset={5}
+                >
+                  <Calendar
+                    mode="single"
+                    selected={lockDate}
+                    onSelect={handleDateSelect}
+                    disabled={{
+                      before: dateRange.minDate,
+                      after: dateRange.maxDate
+                    }}
+                    defaultMonth={dateRange.minDate}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+            <Slider
+              value={[selectedDuration]}
+              onValueChange={handleDurationChange}
+              max={730}
+              min={180}
+              step={1}
+              className="[&_[role=slider]]:bg-accent [&_[role=slider]]:border-0"
+            />
+            <div className="w-full flex justify-between text-xs text-white/60">
+              {Object.entries(durationLabels).map(([days, label]) => (
+                <span
+                  key={days}
+                  className={
+                    selectedDuration >= Number(days) ? 'text-accent' : ''
+                  }
+                >
+                  {label}
+                </span>
+              ))}
+            </div>
+          </div>
+
           <AutoLock
             autoLock={autoLock}
             setAutoLock={setAutoLock}
@@ -69,13 +202,20 @@ export default function ExtendVeion({
           <Separator className="bg-white/10" />
 
           <div className="space-y-2">
-            <div className="text-xs flex justify-between text-white/50">
-              <span>Voting Power</span>
-              <span>0.00 &rarr; 120</span>
+            <div className="flex justify-between text-xs text-white/50">
+              <div className="flex items-center gap-2">
+                VOTING POWER
+                <CustomTooltip content="Your voting power diminishes each day closer to the end of the token lock period." />
+              </div>
+              <span>
+                {currentVotingPower} → {veIonAmount} veION
+              </span>
             </div>
-            <div className="text-xs flex justify-between text-white/50">
-              <span>Locked Until</span>
-              <span>09 Sep 2023 &rarr; 09 Sep 2024</span>
+            <div className="flex justify-between text-xs text-white/50">
+              <span>LOCKED Until</span>
+              <span>
+                {currentLockDate} → {format(lockDate, 'dd MMM yyyy')}
+              </span>
             </div>
           </div>
 
@@ -84,4 +224,6 @@ export default function ExtendVeion({
       </DialogContent>
     </Dialog>
   );
-}
+};
+
+export default ExtendVeion;