ion/eth -> ion/mode

ionicprotocol · Feb 3, 2025 · 8dac44f · 8dac44f
1 parent 8386bbb
commit 8dac44f
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 106 deletions.
diff --git a/packages/ui/app/veion/page.tsx b/packages/ui/app/veion/page.tsx
@@ -38,8 +38,7 @@ export default function VeIon() {
   const chainId = useChainId();
   const searchParams = useSearchParams();
   const querychain = searchParams.get('chain');
-  const queryToken = searchParams.get('token');
-  const selectedtoken = queryToken ?? 'eth';
+  const selectedtoken = querychain === '8453' ? 'eth' : 'mode';
   const chain = querychain ? querychain : String(chainId);
 
   return (
@@ -105,6 +104,7 @@ export default function VeIon() {
               onClick: () => setIsAddLiquidityOpen(true),
               get: 'vAMM'
             }}
+            chain={+chain}
           />
 
           <LPRow
@@ -123,6 +123,7 @@ export default function VeIon() {
               onClick: () => setIsMigrateOpen(true),
               get: 'vAMM'
             }}
+            chain={+chain}
           />
 
           <LPRow
@@ -142,6 +143,7 @@ export default function VeIon() {
               onClick: () => setIsDialogOpen(true),
               get: 'veION'
             }}
+            chain={+chain}
           />
         </div>
       </CardContent>
@@ -152,11 +154,6 @@ export default function VeIon() {
         </Button>
       </Link>
 
-      <GetVeIONDialog
-        isOpen={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        selectedToken={selectedtoken as 'eth' | 'mode' | 'weth'}
-      />
       <AddLiquidityDialog
         isOpen={isAddLiquidityOpen}
         onOpenChange={setIsAddLiquidityOpen}
@@ -165,6 +162,12 @@ export default function VeIon() {
       <MigrateIonDialog
         isOpen={isMigrateOpen}
         onOpenChange={setIsMigrateOpen}
+        selectedToken={selectedtoken as 'eth' | 'mode' | 'weth'}
+      />
+      <GetVeIONDialog
+        isOpen={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        selectedToken={selectedtoken as 'eth' | 'mode' | 'weth'}
       />
     </Card>
   );

diff --git a/packages/ui/components/TokenPair.tsx b/packages/ui/components/TokenPair.tsx
@@ -18,7 +18,7 @@ const TokenPair = ({
       className="rounded-full"
     />
     <Image
-      src={`/img/logo/${token2.toLowerCase()}.svg`}
+      src={`/img/logo/${token2.toUpperCase()}.png`}
       alt={`${token2} logo`}
       width={size}
       height={size}

diff --git a/packages/ui/components/dialogs/VeIon/MigrateIonDialog.tsx b/packages/ui/components/dialogs/VeIon/MigrateIonDialog.tsx
@@ -24,11 +24,13 @@ import {
 interface MigrateIonDialogProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
+  selectedToken: 'eth' | 'mode' | 'weth';
 }
 
 export default function MigrateIonDialog({
   isOpen,
-  onOpenChange
+  onOpenChange,
+  selectedToken
 }: MigrateIonDialogProps) {
   const { isConnected, address, chainId } = useAccount();
   const [amount, setAmount] = useState<string>('');
@@ -37,8 +39,14 @@ export default function MigrateIonDialog({
   const { currentChain } = useVeIONContext();
   const { removeLiquidity, isPending } = useVeIONActions();
 
-  const stakingContractAddress = getStakingToContract(currentChain, 'eth');
-  const stakingTokenAddress = getAvailableStakingToken(currentChain, 'eth');
+  const stakingContractAddress = getStakingToContract(
+    currentChain,
+    selectedToken
+  );
+  const stakingTokenAddress = getAvailableStakingToken(
+    currentChain,
+    selectedToken
+  );
 
   const allStakedAmount = useReadContract({
     abi: StakingContractAbi,
@@ -75,7 +83,7 @@ export default function MigrateIonDialog({
 
       await removeLiquidity({
         liquidity: amount,
-        selectedToken: 'eth'
+        selectedToken
       });
 
       allStakedAmount.refetch();
@@ -100,7 +108,7 @@ export default function MigrateIonDialog({
           <MaxDeposit
             amount={amount}
             handleInput={(val?: string) => setAmount(val || '')}
-            tokenName="ion/eth"
+            tokenName={`ion/${selectedToken}`}
             token={stakingTokenAddress}
             chain={currentChain}
             max={

diff --git a/packages/ui/components/veion/DelegateVeIonTable.tsx b/packages/ui/components/veion/DelegateVeIonTable.tsx
@@ -66,9 +66,7 @@ function DelegateVeionTable({ onUndelegateSuccess }: DelegateVeionTableProps) {
             <div className="text-xs font-semibold text-white/80">
               {row.getValue('tokensLocked')}
             </div>
-            <div className="text-xs font-semibold text-white/40">
-              Balancer LP
-            </div>
+            <div className="text-xs font-semibold text-white/40">Aero LP</div>
           </div>
         </div>
       )

diff --git a/packages/ui/components/veion/LPRow.tsx b/packages/ui/components/veion/LPRow.tsx
@@ -1,4 +1,5 @@
 import { ArrowRight } from 'lucide-react';
+import { mode } from 'viem/chains';
 
 import { Button } from '@ui/components/ui/button';
 import { Card, CardContent } from '@ui/components/ui/card';
@@ -19,49 +20,63 @@ type Detail = {
   get: string;
 };
 
-const LPRow = ({ summary, detail }: { summary: Summary; detail: Detail }) => (
-  <div className="grid grid-cols-6 gap-3">
-    <Card className="md:col-span-2 col-span-3 bg-graylite">
-      <CardContent className="space-y-3 p-5">
-        <p className="text-gray-400 text-xxs font-light">{summary.title}</p>
-        <div className="flex md:gap-3 items-center">
-          <TokenPair
-            token1="ion"
-            token2="eth"
-          />
-          <p className="text-white font-semibold text-lg">{summary.amount}</p>
-          {summary.Icon}
-        </div>
-      </CardContent>
-    </Card>
+const LPRow = ({
+  summary,
+  detail,
+  chain
+}: {
+  summary: Summary;
+  detail: Detail;
+  chain: number;
+}) => {
+  const token2 = chain == mode.id ? 'mode' : 'eth';
 
-    <Card className="md:col-span-4 col-span-6 bg-graylite">
-      <CardContent className="space-y-3 p-5">
-        <div className="text-gray-400  flex justify-between items-center text-xxs">
-          <p className="font-light">{detail.title}</p>
-          <p className="">GET</p>
-        </div>
-        <div className="flex items-center justify-between gap-2 xl:gap-6">
-          <div className="flex items-center">
+  return (
+    <div className="grid grid-cols-6 gap-3">
+      <Card className="md:col-span-2 col-span-3 bg-graylite">
+        <CardContent className="space-y-3 p-5">
+          <p className="text-gray-400 text-xxs font-light">{summary.title}</p>
+          <div className="flex md:gap-3 items-center">
             <TokenPair
               token1="ion"
-              token2="eth"
+              token2={token2}
             />
-            <p className="text-white font-medium text-md ml-2 text-lg">
-              ION/WETH
+            <p className="text-white font-semibold text-lg">{summary.amount}</p>
+            {summary.Icon}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="md:col-span-4 col-span-6 bg-graylite">
+        <CardContent className="space-y-3 p-5">
+          <div className="text-gray-400 flex justify-between items-center text-xxs">
+            <p className="font-light">{detail.title}</p>
+            <p className="">GET</p>
+          </div>
+          <div className="flex items-center justify-between gap-2 xl:gap-6">
+            <div className="flex items-center">
+              <TokenPair
+                token1="ion"
+                token2={token2}
+              />
+              <p className="text-white font-medium text-md ml-2 text-lg">
+                ION/{token2.toUpperCase()}
+              </p>
+              <Button
+                className={`${detail.buttonClass} bg-accent text-grayUnselect text-xs font-bold ml-6 hover:bg-accent/80`}
+                onClick={detail.onClick}
+              >
+                {detail.buttonText} <ArrowRight />
+              </Button>
+            </div>
+            <p className="text-white font-medium text-md text-lg">
+              {detail.get}
             </p>
-            <Button
-              className={`${detail.buttonClass} bg-accent text-grayUnselect text-xs font-bold ml-6 hover:bg-accent/80 `}
-              onClick={detail.onClick}
-            >
-              {detail.buttonText} <ArrowRight />
-            </Button>
           </div>
-          <p className="text-white font-medium text-md text-lg">{detail.get}</p>
-        </div>
-      </CardContent>
-    </Card>
-  </div>
-);
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
 
 export default LPRow;
diff --git a/packages/ui/components/veion/MyVeionTable.tsx b/packages/ui/components/veion/MyVeionTable.tsx
@@ -64,9 +64,7 @@ function MyVeionTable() {
             <div className="text-xs font-semibold text-white/80">
               {row.getValue('tokensLocked')}
             </div>
-            <div className="text-xs font-semibold text-white/40">
-              Balancer LP
-            </div>
+            <div className="text-xs font-semibold text-white/40">Aero LP</div>
           </div>
         </div>
       )

diff --git a/packages/ui/hooks/useLiquidityCalculations.ts b/packages/ui/hooks/useLiquidityCalculations.ts
@@ -1,4 +1,3 @@
-// useLiquidityCalculations.ts
 import { useMemo } from 'react';
 
 import { formatEther, parseUnits, type Address } from 'viem';
@@ -9,7 +8,8 @@ import {
   getReservesABI,
   getReservesContract,
   getReservesArgs,
-  getToken
+  getToken,
+  getPoolToken
 } from '@ui/utils/getStakingTokens';
 
 interface UseLiquidityCalculationsProps {
@@ -23,7 +23,6 @@ export function useLiquidityCalculations({
   chainId,
   selectedToken
 }: UseLiquidityCalculationsProps) {
-  // Fetch reserves data
   const reserves = useReadContract({
     abi: getReservesABI(chainId),
     address: getReservesContract(chainId),
@@ -37,17 +36,23 @@ export function useLiquidityCalculations({
     }
   });
 
-  // Fetch balances
+  // Fetch ION balance
   const { data: ionBalance, refetch: refetchIonBalance } = useBalance({
     address,
     token: getToken(chainId),
     chainId
   });
 
+  // Fetch selected token balance with correct token address
   const { data: selectedTokenBalance, refetch: refetchSelectedTokenBalance } =
     useBalance({
       address,
-      ...(selectedToken !== 'eth' && { token: getToken(chainId) }),
+      // For ETH, don't provide a token address
+      // For MODE, use the correct MODE token address from getPoolToken
+      // For WETH, use the WETH address from getPoolToken
+      ...(selectedToken !== 'eth' && {
+        token: getPoolToken(selectedToken)
+      }),
       chainId
     });
 
@@ -59,9 +64,25 @@ export function useLiquidityCalculations({
     ]);
   };
 
-  // Process reserve data considering chain specifics
+  const calculateTokenAmount = (ionAmount: string): string => {
+    if (!processedReserves || !ionAmount || processedReserves.ion === 0n)
+      return '';
+
+    try {
+      const parsedIonAmount = parseUnits(ionAmount, 18);
+      const tokenVal =
+        (parsedIonAmount * processedReserves.token) / processedReserves.ion;
+      return formatEther(tokenVal);
+    } catch (error) {
+      console.warn('Error calculating token amount:', error);
+      return '';
+    }
+  };
+
   const processedReserves = useMemo(() => {
-    if (reserves.status !== 'success' || !reserves.data) return null;
+    if (reserves.status !== 'success' || !reserves.data) {
+      return null;
+    }
 
     const resData = reserves.data as
       | [bigint, bigint, bigint]
@@ -74,29 +95,18 @@ export function useLiquidityCalculations({
       };
     }
 
-    return {
+    const result = {
       ion: resData[0],
       token: resData[1]
     };
-  }, [reserves.status, reserves.data, chainId]);
 
-  const calculateTokenAmount = (ionAmount: string): string => {
-    if (!processedReserves || !ionAmount || processedReserves.ion === 0n)
-      return '';
-
-    try {
-      const parsedIonAmount = parseUnits(ionAmount, 18);
-      const tokenVal =
-        (parsedIonAmount * processedReserves.token) / processedReserves.ion;
-      return formatEther(tokenVal);
-    } catch (error) {
-      console.warn('Error calculating token amount:', error);
-      return '';
-    }
-  };
+    return result;
+  }, [reserves.status, reserves.data, chainId]);
 
   const getMaximumIonInput = (): string => {
-    if (!processedReserves || !selectedTokenBalance || !ionBalance) return '0';
+    if (!processedReserves || !selectedTokenBalance || !ionBalance) {
+      return '0';
+    }
 
     try {
       const maxIonBasedOnBalance = ionBalance.value;

diff --git a/packages/ui/hooks/veion/useMarketRows.ts b/packages/ui/hooks/veion/useMarketRows.ts
@@ -16,7 +16,6 @@ import { multipliers } from '@ui/utils/multipliers';
 import { useVoteData } from './useVoteData';
 
 import type { FlywheelReward } from '@ionicprotocol/types';
-import { useVeAPR } from './useVeAPR';
 
 export const useMarketRows = (
   chain: number | string,