improve universal claim ui

ionicprotocol · Nov 7, 2024 · d29f4bb · d29f4bb
1 parent e769972
commit d29f4bb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 69 deletions.
diff --git a/...components/veion/UniversalClaimDialog.tsx → .../app/_components/UniversalClaimDialog.tsx b/...components/veion/UniversalClaimDialog.tsx → .../app/_components/UniversalClaimDialog.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useState } from 'react';
+import React, { useState } from 'react';
 
 import Image from 'next/image';
 
@@ -24,64 +24,6 @@ import { useToast } from '@ui/hooks/use-toast';
 import type { CategoryReward } from '@ui/hooks/veion/useVeionUniversalClaim';
 import { useVeionUniversalClaim } from '@ui/hooks/veion/useVeionUniversalClaim';
 
-// Types
-interface ClaimContextType {
-  selectedRewards: Record<string, boolean>;
-  toggleReward: (id: string) => void;
-  clearSelections: () => void;
-  getSelectedCount: () => number;
-}
-
-// Context
-const ClaimContext = createContext<ClaimContextType | null>(null);
-
-export const useClaimContext = () => {
-  const context = useContext(ClaimContext);
-  if (!context) {
-    throw new Error('useClaimContext must be used within a ClaimProvider');
-  }
-  return context;
-};
-
-// Provider Component
-interface ClaimProviderProps {
-  children: React.ReactNode;
-}
-
-export const ClaimProvider = ({ children }: ClaimProviderProps) => {
-  const [selectedRewards, setSelectedRewards] = useState<
-    Record<string, boolean>
-  >({});
-
-  const toggleReward = (id: string) => {
-    setSelectedRewards((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  };
-
-  const clearSelections = () => {
-    setSelectedRewards({});
-  };
-
-  const getSelectedCount = () => {
-    return Object.values(selectedRewards).filter(Boolean).length;
-  };
-
-  return (
-    <ClaimContext.Provider
-      value={{
-        selectedRewards,
-        toggleReward,
-        clearSelections,
-        getSelectedCount
-      }}
-    >
-      {children}
-    </ClaimContext.Provider>
-  );
-};
-
 // Main Component
 interface ClaimDialogProps {
   isOpen: boolean;
@@ -90,7 +32,7 @@ interface ClaimDialogProps {
   mode?: 'all' | 'selective'; // selective allows choosing rewards, all claims everything
 }
 
-export const UniversalClaimDialog = ({
+const UniversalClaimDialog = ({
   isOpen,
   onClose,
   chainIds,
@@ -114,6 +56,7 @@ export const UniversalClaimDialog = ({
       setIsClaimLoading(true);
       if (mode === 'selective') {
         const selectedIds = Object.entries(selectedRewards)
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
           .filter(([_, isSelected]) => isSelected)
           .map(([id]) => id);
         await claimRewards(selectedIds);
@@ -168,12 +111,9 @@ export const UniversalClaimDialog = ({
         {isLoading ? (
           <div>Loading rewards...</div>
         ) : (
-          <div className="space-y-8">
+          <div className="space-y-4">
             {sections.map((section) => (
-              <div
-                key={section}
-                className="space-y-3"
-              >
+              <div key={section}>
                 <h3 className="text-lg font-semibold pl-4">{section}</h3>
                 <Table>
                   <TableHeader>
@@ -235,6 +175,21 @@ export const UniversalClaimDialog = ({
                           )}
                         </TableRow>
                       ))}
+                    {rewards.filter((r) => r.section === section).length ===
+                      0 && (
+                      <TableRow>
+                        <TableCell
+                          colSpan={mode === 'selective' ? 4 : 3}
+                          className="text-center text-sm text-gray-500"
+                        >
+                          <div className="flex flex-col items-center justify-center gap-2">
+                            <span className="text-white/50">
+                              No rewards available
+                            </span>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
                   </TableBody>
                 </Table>
               </div>

diff --git a/packages/ui/app/_components/veion/index.tsx b/packages/ui/app/_components/veion/index.tsx
@@ -18,4 +18,3 @@ export { default as VoteInput } from './VoteInput';
 export { default as InfoBlock } from './InfoBlock';
 export { default as EmissionsManagement } from './EmissionsManagement';
 export { default as GovernanceHeader } from './GovernanceHeader';
-export { default as UniversalClaimDialog } from './UniversalClaimDialog';
diff --git a/packages/ui/app/dashboard/page.tsx b/packages/ui/app/dashboard/page.tsx
@@ -10,6 +10,7 @@ import millify from 'millify';
 import { type Address, formatEther, formatUnits, parseEther } from 'viem';
 import { useChainId } from 'wagmi';
 
+import UniversalClaimDialog from '@ui/app/_components/UniversalClaimDialog';
 import { NO_COLLATERAL_SWAP, pools } from '@ui/constants/index';
 import { useMultiIonic } from '@ui/context/MultiIonicContext';
 import { useCurrentLeverageRatios } from '@ui/hooks/leverage/useCurrentLeverageRatio';
@@ -36,7 +37,6 @@ import NetworkSelector from '../_components/markets/NetworkSelector';
 import Loop from '../_components/popup/Loop';
 import Popup from '../_components/popup/page';
 import ResultHandler from '../_components/ResultHandler';
-import { UniversalClaimDialog } from '../_components/veion';
 
 import type { PopupMode } from '../_components/popup/page';
 

diff --git a/packages/ui/app/veion/governance/page.tsx b/packages/ui/app/veion/governance/page.tsx
@@ -11,11 +11,11 @@ import { useChainId } from 'wagmi';
 import NetworkSelector from '@ui/app/_components/markets/NetworkSelector';
 import FlatMap from '@ui/app/_components/points_comp/FlatMap';
 import ToggleLinks from '@ui/app/_components/ToggleLink';
+import UniversalClaimDialog from '@ui/app/_components/UniversalClaimDialog';
 import {
   MyVeionTable,
   DelegateVeIonTable,
-  GovernanceHeader,
-  UniversalClaimDialog
+  GovernanceHeader
 } from '@ui/app/_components/veion';
 import { Button } from '@ui/components/ui/button';
 import { Card, CardHeader, CardContent } from '@ui/components/ui/card';