fix tables

ionicprotocol · Dec 5, 2024 · 674c605 · 674c605
1 parent f4f1eff
commit 674c605
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 69 deletions.
diff --git a/packages/ui/app/_components/CommonTable.tsx b/packages/ui/app/_components/CommonTable.tsx
@@ -24,6 +24,7 @@ import {
   TableHeader,
   TableRow
 } from '@ui/components/ui/table';
+import type { MarketRowData } from '@ui/hooks/market/useMarketData';
 
 import ResultHandler from './ResultHandler';
 
@@ -46,6 +47,11 @@ export const sortingFunctions = {
 
 type SortingType = keyof typeof sortingFunctions;
 
+export interface MarketCellProps {
+  row: Row<any>;
+  getValue: () => any;
+}
+
 export type EnhancedColumnDef<T> = Omit<
   ColumnDef<T, unknown>,
   'header' | 'sortingFn'

diff --git a/packages/ui/app/_components/MaxDeposit.tsx b/packages/ui/app/_components/MaxDeposit.tsx
@@ -2,6 +2,7 @@ import {
   useState,
   useMemo,
   useRef,
+  useEffect,
   type SetStateAction,
   type Dispatch
 } from 'react';
@@ -16,6 +17,7 @@ import { Button } from '@ui/components/ui/button';
 import { Card, CardContent } from '@ui/components/ui/card';
 import { Input } from '@ui/components/ui/input';
 
+import { PrecisionSlider } from './PrecisionSlider';
 import TokenSelector from './stake/TokenSelector';
 
 import { icErc20Abi } from '@ionicprotocol/sdk';
@@ -40,6 +42,9 @@ interface IMaxDeposit {
   useUnderlyingBalance?: boolean;
   footerText?: string;
   decimals?: number;
+  // Added slider props
+  useSlider?: boolean;
+  sliderStep?: number;
 }
 
 function MaxDeposit({
@@ -56,9 +61,13 @@ function MaxDeposit({
   setMaxTokenForUtilization,
   useUnderlyingBalance = false,
   footerText,
-  decimals: propDecimals
+  decimals: propDecimals,
+  // Added slider props with defaults
+  useSlider = false,
+  sliderStep = 1
 }: IMaxDeposit) {
   const [bal, setBal] = useState<IBal>();
+  const [utilizationPercentage, setUtilizationPercentage] = useState(0);
   const { address } = useAccount();
 
   // For regular token balance
@@ -120,6 +129,15 @@ function MaxDeposit({
     setMaxTokenForUtilization
   ]);
 
+  // Added effect to update utilization percentage
+  useEffect(() => {
+    if (bal && amount) {
+      const percentage =
+        (Number(amount) / Number(formatUnits(bal.value, bal.decimals))) * 100;
+      setUtilizationPercentage(percentage);
+    }
+  }, [amount, bal]);
+
   function handlInpData(e: React.ChangeEvent<HTMLInputElement>) {
     if (
       bal &&
@@ -140,6 +158,14 @@ function MaxDeposit({
     });
   }
 
+  // Added slider handler
+  function handleSliderChange(value: number) {
+    if (!handleInput || !bal) return;
+    const maxValue = Number(formatUnits(bal.value, bal.decimals));
+    const newAmount = (value / 100) * maxValue;
+    handleInput(newAmount.toString());
+  }
+
   const newRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<boolean>(false);
 
@@ -235,6 +261,39 @@ function MaxDeposit({
             )}
           </div>
         </div>
+        {useSlider && (
+          <div className="mt-4 space-y-2">
+            <PrecisionSlider
+              value={utilizationPercentage}
+              onChange={handleSliderChange}
+              max={100}
+              min={0}
+              step={sliderStep}
+            />
+            <div className="w-full flex justify-between text-xs text-white/60">
+              <span
+                className={utilizationPercentage >= 25 ? 'text-accent' : ''}
+              >
+                25%
+              </span>
+              <span
+                className={utilizationPercentage >= 50 ? 'text-accent' : ''}
+              >
+                50%
+              </span>
+              <span
+                className={utilizationPercentage >= 75 ? 'text-accent' : ''}
+              >
+                75%
+              </span>
+              <span
+                className={utilizationPercentage >= 100 ? 'text-accent' : ''}
+              >
+                100%
+              </span>
+            </div>
+          </div>
+        )}
         {footerText && (
           <div className="flex w-full mt-2 items-center justify-between text-[11px] text-white/40">
             <span>{footerText}</span>

diff --git a/packages/ui/app/_components/veion/AddLiquidityDialog.tsx b/packages/ui/app/_components/veion/AddLiquidityDialog.tsx
@@ -17,7 +17,7 @@ import { useVeIONContext } from '@ui/context/VeIonContext';
 import { useVeIONActions } from '@ui/hooks/veion/useVeIONActions';
 
 import BuyIonSection from './BuyIonSection';
-import MaxDeposit from '../stake/MaxDeposit';
+import MaxDeposit from '../MaxDeposit';
 
 const Widget = dynamic(() => import('../stake/Widget'), {
   ssr: false
@@ -112,7 +112,6 @@ export default function AddLiquidityDialog({
               handleInput={handleIonInput}
               chain={currentChain}
               useSlider
-              size={16}
             />
 
             <MaxDeposit
@@ -122,7 +121,6 @@ export default function AddLiquidityDialog({
               tokenName="eth"
               chain={currentChain}
               useSlider
-              size={16}
             />
 
             <Button

diff --git a/packages/ui/app/_components/veion/DelegateVeIonTable.tsx b/packages/ui/app/_components/veion/DelegateVeIonTable.tsx
@@ -9,7 +9,7 @@ import CommonTable from '../CommonTable';
 import { TableActionButton } from '../TableActionButton';
 import TokenPair from '../TokenPair';
 
-import type { ColumnDef } from '@tanstack/react-table';
+import type { EnhancedColumnDef, MarketCellProps } from '../CommonTable';
 
 // Types
 type BaseVeionData = {
@@ -99,12 +99,14 @@ function DelegateVeionTable({
     return colors[Math.floor(Math.random() * colors.length)];
   };
 
-  const columns: ColumnDef<DelegateVeionData>[] = [
+  // Delegate VeION Table Configuration
+  const delegateVeionColumns: EnhancedColumnDef<DelegateVeionData>[] = [
     {
-      accessorKey: 'id',
-      header: 'ID',
-      cell: ({ row }) => (
-        <div className="flex items-center gap-2">
+      id: 'id',
+      header: <div className="pl-6">ID</div>,
+      sortingFn: 'numerical',
+      cell: ({ row }: MarketCellProps) => (
+        <div className="flex items-center gap-2 pl-6">
           <div
             className="w-2 h-2 rounded-full"
             style={{ backgroundColor: getRandomColor() }}
@@ -116,9 +118,10 @@ function DelegateVeionTable({
       )
     },
     {
-      accessorKey: 'tokensLocked',
+      id: 'tokensLocked',
       header: 'TOKENS LOCKED',
-      cell: ({ row }) => (
+      sortingFn: 'numerical',
+      cell: ({ row }: MarketCellProps) => (
         <div className="flex items-center gap-3">
           <TokenPair
             token1="ion"
@@ -137,10 +140,12 @@ function DelegateVeionTable({
       )
     },
     {
-      accessorKey: 'lockedBLP.amount',
+      id: 'lockedBLPAmount',
+      accessorFn: (row: DelegateVeionData) => row.lockedBLP.amount,
       header: 'LP',
-      cell: ({ row }) => (
-        <div className="flex flex-col">
+      sortingFn: 'numerical',
+      cell: ({ row }: MarketCellProps) => (
+        <div className="flex flex-col items-start">
           <div className="text-xs font-semibold text-white/80">
             {row.original.lockedBLP.amount}
           </div>
@@ -149,16 +154,18 @@ function DelegateVeionTable({
       )
     },
     {
-      accessorKey: 'lockExpires.date',
+      id: 'lockExpiresDate',
+      accessorFn: (row: DelegateVeionData) => row.lockExpires.date,
       header: 'LOCK EXPIRES',
-      cell: ({ row }) => (
+      cell: ({ row }: MarketCellProps) => (
         <TimeRemaining lockExpiryDate={row.original.lockExpires.date} />
       )
     },
     {
-      accessorKey: 'votingPower',
+      id: 'votingPower',
       header: 'VOTING POWER',
-      cell: ({ row }) => (
+      sortingFn: 'numerical',
+      cell: ({ row }: MarketCellProps) => (
         <div className="flex flex-col">
           <div className="text-xs font-semibold text-white/80">
             {row.getValue('votingPower')}
@@ -170,22 +177,24 @@ function DelegateVeionTable({
       )
     },
     {
-      accessorKey: 'delegatedTo',
+      id: 'delegatedTo',
       header: 'DELEGATED TO',
-      cell: ({ row }) => (
-        <div className="text-xs font-semibold text-white/80">
+      sortingFn: 'alphabetical',
+      cell: ({ row }: MarketCellProps) => (
+        <div className="text-xs font-semibold text-white/80 pl-6">
           {row.getValue('delegatedTo') || '-'}
         </div>
       )
     },
     {
       id: 'actions',
-      cell: ({ row }) => {
+      header: 'ACTIONS',
+      cell: ({ row }: MarketCellProps) => {
         const data = row.original;
         const isProcessing = processingId === data.id;
 
         return (
-          <div className="flex justify-end">
+          <div className="flex justify-end pr-6">
             {data.readyToDelegate ? (
               <TableActionButton
                 width="100px"
@@ -213,7 +222,7 @@ function DelegateVeionTable({
     <div>
       <CommonTable
         data={data}
-        columns={columns}
+        columns={delegateVeionColumns}
         isLoading={false}
       />
     </div>

diff --git a/packages/ui/app/_components/veion/EmissionsManagement.tsx b/packages/ui/app/_components/veion/EmissionsManagement.tsx
@@ -22,7 +22,7 @@ import EmissionsManagementFooter from './EmissionsManagementFooter';
 import VoteInput from './VoteInput';
 import CommonTable from '../CommonTable';
 
-import type { ColumnDef } from '@tanstack/react-table';
+import type { EnhancedColumnDef } from '../CommonTable';
 
 interface EmissionsManagementTableProps {
   tokenId: number;
@@ -84,10 +84,10 @@ function EmissionsManagement({
     }
   };
 
-  const columns = useMemo<ColumnDef<VoteMarket>[]>(
+  const columns = useMemo<EnhancedColumnDef<VoteMarket>[]>(
     () => [
       {
-        accessorKey: 'asset',
+        id: 'asset',
         header: 'ASSET',
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
@@ -105,7 +105,7 @@ function EmissionsManagement({
         )
       },
       {
-        accessorKey: 'totalVotes',
+        id: 'totalVotes',
         header: 'TOTAL VOTES',
         cell: ({ row }) => {
           const totalVotes = row.original.totalVotes;
@@ -122,7 +122,7 @@ function EmissionsManagement({
         }
       },
       {
-        accessorKey: 'myVotes',
+        id: 'myVotes',
         header: 'MY VOTES',
         cell: ({ row }) => {
           const myVotes = row.original.myVotes;
@@ -139,7 +139,7 @@ function EmissionsManagement({
         }
       },
       {
-        accessorKey: 'supply',
+        id: 'supply',
         header: 'SUPPLY %',
         cell: ({ row }) => (
           <VoteInput
@@ -150,7 +150,7 @@ function EmissionsManagement({
         )
       },
       {
-        accessorKey: 'borrow',
+        id: 'borrow',
         header: 'BORROW %',
         cell: ({ row }) => (
           <VoteInput
@@ -161,7 +161,7 @@ function EmissionsManagement({
         )
       },
       {
-        accessorKey: 'autoVote',
+        id: 'autoVote',
         header: 'AUTO VOTE',
         cell: ({ row }) => (
           <Checkbox

diff --git a/packages/ui/app/_components/veion/GetVeIONDialog.tsx b/packages/ui/app/_components/veion/GetVeIONDialog.tsx
@@ -20,9 +20,9 @@ import { getToken, getAvailableStakingToken } from '@ui/utils/getStakingTokens';
 import AutoLock from './AutoLock';
 import CustomTooltip from '../CustomTooltip';
 import { LockDurationPicker } from '../LockDurationPicker';
+import MaxDeposit from '../MaxDeposit';
 import NetworkDropdown from '../NetworkDropdown';
 import { usePrecisionSlider } from '../PrecisionSlider';
-import MaxDeposit from '../stake/MaxDeposit';
 
 interface GetVeIONDialogProps {
   isOpen: boolean;
@@ -101,8 +101,7 @@ export default function GetVeIONDialog({
                 headerText="LOCK AMOUNT"
                 max={veIonBalance}
                 amount={amount}
-                tokenName="ion"
-                pairedToken="weth"
+                tokenName="ion/weth"
                 token={getToken(currentChain)}
                 handleInput={(val?: string) => setAmount(val || '0')}
                 chain={currentChain}

diff --git a/packages/ui/app/_components/veion/ManageDialog/IncreaseLockedAmount.tsx b/packages/ui/app/_components/veion/ManageDialog/IncreaseLockedAmount.tsx
@@ -8,8 +8,8 @@ import { useVeIONManage } from '@ui/hooks/veion/useVeIONManage';
 import { getAvailableStakingToken, getToken } from '@ui/utils/getStakingTokens';
 
 import CustomTooltip from '../../CustomTooltip';
+import MaxDeposit from '../../MaxDeposit';
 import { usePrecisionSlider, PrecisionSlider } from '../../PrecisionSlider';
-import MaxDeposit from '../../stake/MaxDeposit';
 
 type IncreaseLockedAmountProps = {
   chain: string;

diff --git a/packages/ui/app/_components/veion/MarketSelector.tsx b/packages/ui/app/_components/veion/MarketSelector.tsx
@@ -27,8 +27,8 @@ import {
 import { useVeIONContext } from '@ui/context/VeIonContext';
 import { getToken } from '@ui/utils/getStakingTokens';
 
+import MaxDeposit from '../MaxDeposit';
 import NetworkDropdown from '../NetworkDropdown';
-import MaxDeposit from '../stake/MaxDeposit';
 
 const sides = [
   { id: 'lend', name: 'Lend' },
@@ -148,8 +148,7 @@ const MarketSelector = ({ isAcknowledged }: { isAcknowledged: boolean }) => {
           headerText="LOCK AMOUNT"
           max={veIonBalance}
           amount={amount}
-          tokenName="ion"
-          pairedToken="weth"
+          tokenName="ion/weth"
           token={getToken(currentChain)}
           handleInput={(val?: string) => setAmount(val || '0')}
           chain={currentChain}