undelegate

packages/ui/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

packages/ui/components/veion/DelegateVeIonTable.tsx

@@ -8,23 +8,35 @@ import type {
 } from '@ui/components/CommonTable';
 import TokenPair from '@ui/components/TokenPair';
 import { useVeIONContext } from '@ui/context/VeIonContext';
-import { useToast } from '@ui/hooks/use-toast';
 import type { DelegateVeionData } from '@ui/types/veION';
 
 import { DelegatedToCell } from './DelegatedToCell';
 import PositionTitle from './PositionTitle';
+import UndelegateDialog from './UndelegateDIalog';
 
 interface DelegateVeionTableProps {
   onUndelegateSuccess?: () => void;
 }
 
 function DelegateVeionTable({ onUndelegateSuccess }: DelegateVeionTableProps) {
-  const { toast } = useToast();
-  const [processingId, setProcessingId] = useState<string | null>(null);
+  const [selectedPosition, setSelectedPosition] =
+    useState<DelegateVeionData | null>(null);
+  const [isUndelegateDialogOpen, setIsUndelegateDialogOpen] = useState(false);
+
   const {
     locks: { delegatedLocks, isLoading }
   } = useVeIONContext();
 
+  const handleUndelegateClick = (position: DelegateVeionData) => {
+    setSelectedPosition(position);
+    setIsUndelegateDialogOpen(true);
+  };
+
+  const handleDialogClose = () => {
+    setSelectedPosition(null);
+    setIsUndelegateDialogOpen(false);
+  };
+
   const delegateVeionColumns: EnhancedColumnDef<DelegateVeionData>[] = [
     {
       id: 'id',
@@ -109,15 +121,13 @@ function DelegateVeionTable({ onUndelegateSuccess }: DelegateVeionTableProps) {
       enableSorting: false,
       cell: ({ row }: MarketCellProps) => {
         const data = row.original;
-        const isProcessing = processingId === data.id;
 
         return (
           <div className="flex gap-2 w-full pr-6">
             <ActionButton
               half={false}
-              action={() => {}}
-              disabled={isProcessing}
-              label={isProcessing ? 'Undelegating...' : 'Undelegate'}
+              action={() => handleUndelegateClick(data)}
+              label="Undelegate"
             />
           </div>
         );
@@ -132,6 +142,24 @@ function DelegateVeionTable({ onUndelegateSuccess }: DelegateVeionTableProps) {
         columns={delegateVeionColumns}
         isLoading={isLoading}
       />
+
+      {selectedPosition && (
+        <UndelegateDialog
+          isOpen={isUndelegateDialogOpen}
+          onClose={handleDialogClose}
+          position={{
+            id: selectedPosition.id,
+            chainId: selectedPosition.chainId,
+            delegation: {
+              delegatedTo: selectedPosition.delegation.delegatedTo.map(
+                (bigintValue: bigint) => Number(bigintValue)
+              ),
+              amounts: selectedPosition.delegation.delegatedAmounts // Add this line
+            }
+          }}
+          onSuccess={onUndelegateSuccess}
+        />
+      )}
     </div>
   );
 }

packages/ui/components/veion/DelegatedToCell.tsx

@@ -2,6 +2,14 @@ import React from 'react';
 
 import Image from 'next/image';
 
+import { formatUnits } from 'viem';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@ui/components/ui/tooltip';
 import { getChainName } from '@ui/constants/mock';
 import { cn } from '@ui/lib/utils';
 import type { ChainId } from '@ui/types/veION';
@@ -27,18 +35,22 @@ interface BadgePositionTitleProps {
   position: number;
   size?: Size;
   className?: string;
+  amount?: string; // Add this
 }
 
 const BadgePositionTitle = ({
   chainId,
   position,
   size = 'md',
-  className
+  className,
+  amount
 }: BadgePositionTitleProps) => {
   const chainName = getChainName(chainId);
   const imageSize = imageSizes[size];
 
-  return (
+  const formattedAmount = amount ? formatUnits(BigInt(amount), 18) : undefined;
+
+  const badge = (
     <div
       className={cn(
         'flex items-center rounded-full bg-white/10 hover:bg-white/15 transition-colors',
@@ -56,34 +68,55 @@ const BadgePositionTitle = ({
       <div className="font-semibold text-white/80">#{position}</div>
     </div>
   );
+
+  if (!formattedAmount) return badge;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{badge}</TooltipTrigger>
+        <TooltipContent>
+          <p>Delegated: {Number(formattedAmount).toFixed(4)} BLP</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 };
 
-// Container component for multiple badges
+// Update BadgeGrid props to include amounts
 interface BadgeGridProps {
   delegatedTo: number[];
+  delegatedAmounts?: string[]; // Add this
   chainId: ChainId;
   size?: Size;
 }
 
-const BadgeGrid = ({ delegatedTo, chainId, size = 'md' }: BadgeGridProps) => {
+const BadgeGrid = ({
+  delegatedTo,
+  delegatedAmounts,
+  chainId,
+  size = 'md'
+}: BadgeGridProps) => {
   return (
     <div className="flex flex-wrap gap-2">
-      {delegatedTo.map((id: number) => (
+      {delegatedTo.map((id: number, index: number) => (
         <BadgePositionTitle
           key={id}
           chainId={chainId}
           position={id}
           size={size}
+          amount={delegatedAmounts?.[index]}
         />
       ))}
     </div>
   );
 };
 
-// Updated cell component
+// Update cell component to pass amounts
 const DelegatedToCell = ({ row }: MarketCellProps) => (
   <BadgeGrid
     delegatedTo={row.original.delegation.delegatedTo}
+    delegatedAmounts={row.original.delegation.delegatedAmounts}
     chainId={row.original.chainId}
   />
 );