From a3a3e09994edce0253304c3d31214d2d6f171581 Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Wed, 8 Jan 2025 21:58:27 +0100
Subject: [PATCH] update confirm dialog, remove auto vote

---
 .../ui/app/veion/governance/vote/page.tsx     | 16 -------
 .../components/veion/EmissionsManagement.tsx  | 20 +--------
 .../veion/EmissionsManagementFooter.tsx       | 21 +---------
 .../veion/VoteConfirmationDialog.tsx          | 42 +++++++++++++------
 .../ui/context/EmissionsManagementContext.tsx |  4 --
 5 files changed, 31 insertions(+), 72 deletions(-)

diff --git a/packages/ui/app/veion/governance/vote/page.tsx b/packages/ui/app/veion/governance/vote/page.tsx
index 4545deb580..34f015dfd9 100644
--- a/packages/ui/app/veion/governance/vote/page.tsx
+++ b/packages/ui/app/veion/governance/vote/page.tsx
@@ -25,8 +25,6 @@ const Vote: React.FC = () => {
   const initialId = searchParams.get('id') || lockedData[0].id;
 
   const [showPendingOnly, setShowPendingOnly] = useState<boolean>(false);
-  const [showAutoOnly, setShowAutoOnly] = useState<boolean>(false);
-  const { currentChain } = useVeIONContext();
 
   const selectedData = useMemo(
     () => lockedData.find((item) => item.id === initialId),
@@ -97,19 +95,6 @@ const Vote: React.FC = () => {
         <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between">
           <CardTitle>Emissions Management</CardTitle>
           <div className="flex items-center space-x-2 mt-2 md:mt-0">
-            <label
-              htmlFor="pending-votes"
-              className="text-sm text-white/80"
-            >
-              Auto vote only
-            </label>
-            <Switch
-              id="pending-votes"
-              checked={showAutoOnly}
-              onCheckedChange={setShowAutoOnly}
-              className="data-[state=checked]:bg-green-500 "
-              aria-label="Toggle auto votes only"
-            />
             <label
               htmlFor="pending-votes"
               className="text-sm text-white/80 pl-4"
@@ -129,7 +114,6 @@ const Vote: React.FC = () => {
           <EmissionsProvider>
             <EmissionsManagement
               tokenId={0}
-              showAutoOnly={showAutoOnly}
               showPendingOnly={showPendingOnly}
             />
           </EmissionsProvider>
diff --git a/packages/ui/components/veion/EmissionsManagement.tsx b/packages/ui/components/veion/EmissionsManagement.tsx
index 2a78f29dc5..197c4cd693 100644
--- a/packages/ui/components/veion/EmissionsManagement.tsx
+++ b/packages/ui/components/veion/EmissionsManagement.tsx
@@ -30,7 +30,6 @@ import TokenBalance from '../markets/Cells/TokenBalance';
 
 interface EmissionsManagementTableProps {
   tokenId: number;
-  showAutoOnly: boolean;
   showPendingOnly: boolean;
 }
 
@@ -38,7 +37,6 @@ type AssetTypeFilter = 'all' | 'supply' | 'borrow';
 
 function EmissionsManagement({
   tokenId,
-  showAutoOnly,
   showPendingOnly
 }: EmissionsManagementTableProps) {
   const { currentChain } = useVeIONContext();
@@ -67,11 +65,6 @@ function EmissionsManagement({
         return false;
       }
 
-      // Filter for auto votes if showAutoOnly is true
-      if (showAutoOnly && !row.autoVote) {
-        return false;
-      }
-
       // Filter for pending votes if showPendingOnly is true
       if (showPendingOnly && row.voteValue !== '') {
         return false;
@@ -87,7 +80,7 @@ function EmissionsManagement({
 
       return true;
     });
-  }, [marketRows, showAutoOnly, showPendingOnly, searchTerm, assetTypeFilter]);
+  }, [marketRows, showPendingOnly, searchTerm, assetTypeFilter]);
 
   const columns = useMemo<EnhancedColumnDef<VoteMarketRow>[]>(
     () => [
@@ -199,17 +192,6 @@ function EmissionsManagement({
             isDisabled={isVoting}
           />
         )
-      },
-      {
-        id: 'autoVote',
-        header: 'AUTO VOTE',
-        cell: ({ row }) => (
-          <Checkbox
-            checked={row.original.autoVote}
-            disabled={isVoting}
-            className="data-[state=checked]:bg-green-500"
-          />
-        )
       }
     ],
     [isVoting]
diff --git a/packages/ui/components/veion/EmissionsManagementFooter.tsx b/packages/ui/components/veion/EmissionsManagementFooter.tsx
index a8d2803b8b..c884ce8848 100644
--- a/packages/ui/components/veion/EmissionsManagementFooter.tsx
+++ b/packages/ui/components/veion/EmissionsManagementFooter.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Card } from '@ui/components/ui/card';
-import { Checkbox } from '@ui/components/ui/checkbox';
 import { useEmissionsContext } from '@ui/context/EmissionsManagementContext';
 import VoteConfirmationDialog from './VoteConfirmationDialog';
 import { MarketSide } from '@ui/hooks/veion/useVeIONVote';
@@ -15,7 +14,6 @@ function EmissionsManagementFooter({
   isVoting = false
 }: EmissionsManagementFooterProps) {
   const { votes, resetVotes, marketRows } = useEmissionsContext();
-  const [autoRepeat, setAutoRepeat] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const hasVotes = Object.keys(votes).length > 0;
 
@@ -28,7 +26,6 @@ function EmissionsManagementFooter({
           marketAddress: row.marketAddress,
           side: row.side,
           voteValue: row.voteValue,
-          autoVote: row.autoVote,
           asset: row.asset
         };
       }
@@ -40,7 +37,6 @@ function EmissionsManagementFooter({
         marketAddress: `0x${string}`;
         side: MarketSide;
         voteValue: string;
-        autoVote: boolean;
         asset: string;
       }
     >
@@ -48,7 +44,6 @@ function EmissionsManagementFooter({
 
   const handleFullReset = () => {
     resetVotes();
-    setAutoRepeat(false);
   };
 
   const handleVoteClick = () => {
@@ -65,21 +60,7 @@ function EmissionsManagementFooter({
   return (
     <>
       <Card className="fixed bottom-4 left-4 right-4 p-4 bg-[#35363D] border-t border-white/10 z-10">
-        <div className="flex items-center justify-between max-w-7xl mx-auto">
-          <div className="flex items-center gap-4">
-            <Checkbox
-              id="auto-repeat"
-              checked={autoRepeat}
-              onCheckedChange={(checked) => setAutoRepeat(checked as boolean)}
-              disabled={isVoting}
-            />
-            <label
-              htmlFor="auto-repeat"
-              className={`text-sm text-white/80 cursor-pointer ${isVoting ? 'opacity-50' : ''}`}
-            >
-              Auto-repeat this voting choice each future period
-            </label>
-          </div>
+        <div className="flex justify-end w-full">
           <div className="flex items-center gap-4">
             <button
               onClick={handleFullReset}
diff --git a/packages/ui/components/veion/VoteConfirmationDialog.tsx b/packages/ui/components/veion/VoteConfirmationDialog.tsx
index c13f4bea90..0c9ae72ed1 100644
--- a/packages/ui/components/veion/VoteConfirmationDialog.tsx
+++ b/packages/ui/components/veion/VoteConfirmationDialog.tsx
@@ -10,7 +10,8 @@ import {
   AlertDialogTitle
 } from '@ui/components/ui/alert-dialog';
 import { ScrollArea } from '@ui/components/ui/scroll-area';
-import { Check, X } from 'lucide-react';
+import { Info } from 'lucide-react';
+import Image from 'next/image';
 import { MarketSide } from '@ui/hooks/veion/useVeIONVote';
 
 type VoteRecord = Record<
@@ -19,7 +20,6 @@ type VoteRecord = Record<
     marketAddress: `0x${string}`;
     side: MarketSide;
     voteValue: string;
-    autoVote: boolean;
     asset: string;
   }
 >;
@@ -44,7 +44,11 @@ const VoteConfirmationDialog: React.FC<VoteConfirmationDialogProps> = ({
   return (
     <AlertDialog
       open={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={(open) => {
+        if (!isVoting) {
+          onClose();
+        }
+      }}
     >
       <AlertDialogContent className="max-w-2xl">
         <AlertDialogHeader>
@@ -54,7 +58,15 @@ const VoteConfirmationDialog: React.FC<VoteConfirmationDialogProps> = ({
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <ScrollArea className="h-96 rounded-md border border-white/10 my-4">
+        <div className="flex items-center gap-2 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <Info className="h-4 w-4 text-blue-500" />
+          <p className="text-sm text-blue-100">
+            Your choices will automatically apply to future epochs unless
+            modified
+          </p>
+        </div>
+
+        <ScrollArea className="h-96 rounded-md border border-white/10">
           <div className="p-4">
             <div className="space-y-4">
               {voteEntries.map(([key, vote]) => (
@@ -64,6 +76,13 @@ const VoteConfirmationDialog: React.FC<VoteConfirmationDialogProps> = ({
                 >
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
+                      <Image
+                        src={`/img/symbols/32/color/${vote.asset.toLowerCase()}.png`}
+                        alt={vote.asset}
+                        width={24}
+                        height={24}
+                        className="rounded-full"
+                      />
                       <span className="text-sm font-medium text-white/90">
                         {vote.asset}
                       </span>
@@ -82,14 +101,6 @@ const VoteConfirmationDialog: React.FC<VoteConfirmationDialogProps> = ({
                       <span className="text-sm font-medium text-white/90">
                         {vote.voteValue}%
                       </span>
-                      <div className="flex items-center gap-1 text-xs text-white/60">
-                        Auto Vote:
-                        {vote.autoVote ? (
-                          <Check className="w-4 h-4 text-green-500" />
-                        ) : (
-                          <X className="w-4 h-4 text-red-500" />
-                        )}
-                      </div>
                     </div>
                   </div>
                 </div>
@@ -99,7 +110,12 @@ const VoteConfirmationDialog: React.FC<VoteConfirmationDialogProps> = ({
         </ScrollArea>
 
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={isVoting}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel
+            disabled={isVoting}
+            className="hover:bg-gray-900"
+          >
+            Cancel
+          </AlertDialogCancel>
           <AlertDialogAction
             onClick={async (e) => {
               e.preventDefault();
diff --git a/packages/ui/context/EmissionsManagementContext.tsx b/packages/ui/context/EmissionsManagementContext.tsx
index 9cc5066f5d..9f362c474a 100644
--- a/packages/ui/context/EmissionsManagementContext.tsx
+++ b/packages/ui/context/EmissionsManagementContext.tsx
@@ -28,7 +28,6 @@ type MarketMetrics = {
     percentage: string;
     value: string;
   };
-  autoVote: boolean;
   voteValue: string;
 };
 
@@ -53,7 +52,6 @@ export type VoteMarketRow = {
     percentage: string;
     value: string;
   };
-  autoVote: boolean;
   voteValue: string;
 };
 
@@ -124,7 +122,6 @@ export const EmissionsProvider: React.FC<{
                 percentage: (Math.random() * 50).toFixed(2) + '%',
                 value: (Math.random() * 10000).toFixed(0)
               },
-              autoVote: Math.random() > 0.5,
               voteValue: ''
             };
 
@@ -144,7 +141,6 @@ export const EmissionsProvider: React.FC<{
                 percentage: (Math.random() * 50).toFixed(2) + '%',
                 value: (Math.random() * 10000).toFixed(0)
               },
-              autoVote: Math.random() > 0.5,
               voteValue: ''
             };