Refactor GmDepositWithdrawalBox

Author: midas-myth

src/components/Synthetics/GmSwap/GmSwapBox/GmDepositWithdrawalBox/GmDepositWithdrawalBox.tsx

@@ -49,6 +49,7 @@ import { Swap } from "../Swap";
 import { Mode, Operation } from "../types";
 import { useGmWarningState } from "../useGmWarningState";
 import { InfoRows } from "./InfoRows";
+import { TokenInputState } from "./types";
 import { useDepositWithdrawalAmounts } from "./useDepositWithdrawalAmounts";
 import { useDepositWithdrawalFees } from "./useDepositWithdrawalFees";
 import { useGmDepositWithdrawalBoxState } from "./useGmDepositWithdrawalBoxState";
@@ -195,17 +196,21 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
     shortTokenInputState,
     // undefined when not paying with GM
     fromMarketTokenInputState,
-  } = useMemo(() => {
+  } = useMemo((): Partial<{
+    longTokenInputState: TokenInputState;
+    shortTokenInputState: TokenInputState;
+    fromMarketTokenInputState: TokenInputState;
+  }> => {
     if (!marketInfo) {
       return {};
     }
 
     const inputs: {
       address: string;
       value: string;
-      amount?: bigint;
-      isMarketToken?: boolean;
-      usd?: bigint;
+      amount: bigint | undefined;
+      isMarketToken: boolean;
+      usd: bigint | undefined;
       setValue: (val: string) => void;
     }[] = [];
 
@@ -560,12 +565,12 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
 
   const handleFirstTokenInputValueChange = useCallback(
     (e) => {
-      if (firstToken) {
+      if (firstTokenAddress) {
         setFirstTokenInputValue(e.target.value);
-        onFocusedCollateralInputChange(firstToken.address);
+        onFocusedCollateralInputChange(firstTokenAddress);
       }
     },
-    [firstToken, onFocusedCollateralInputChange, setFirstTokenInputValue]
+    [firstTokenAddress, onFocusedCollateralInputChange, setFirstTokenInputValue]
   );
 
   const marketTokenInputClickMax = useCallback(() => {
@@ -630,6 +635,7 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
 
   // #region Effects
   useUpdateInputAmounts({
+    chainId,
     marketToken,
     marketInfo,
     fromMarketTokenInputState,
@@ -851,11 +857,7 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
             shouldShowWarningForExecutionFee={shouldShowWarningForExecutionFee}
           />
         </div>
-        {/* <SwitchToSettlementChainWarning topic="liquidity" /> */}
-        <div className="Exchange-swap-button-container mb-14 border-b border-stroke-primary pb-14">
-          {/* <SwitchToSettlementChainButtons>{}</SwitchToSettlementChainButtons> */}
-          {submitButton}
-        </div>
+        <div className="Exchange-swap-button-container mb-14 border-b border-stroke-primary pb-14">{submitButton}</div>
         <InfoRows fees={fees} executionFee={executionFee} isDeposit={isDeposit} />
       </form>
     </>

src/components/Synthetics/GmSwap/GmSwapBox/GmDepositWithdrawalBox/types.ts

@@ -1,13 +1,10 @@
-import { TokenData } from "domain/synthetics/tokens";
-
 export type TokenInputState = {
   address: string;
   value: string;
-  amount?: bigint | undefined;
-  usd?: bigint | undefined;
-  token?: TokenData | undefined;
+  amount: bigint | undefined;
+  usd: bigint | undefined;
   setValue: (val: string) => void;
-  isMarketToken?: boolean;
+  isMarketToken: boolean;
 };
 
 export type GmOrGlvPaySource = "settlementChain" | "gmxAccount" | "sourceChain";

src/components/Synthetics/GmSwap/GmSwapBox/GmDepositWithdrawalBox/useDepositWithdrawalAmounts.tsx

@@ -100,11 +100,12 @@ export function useDepositWithdrawalAmounts({
       }
 
       const longTokenAmount = marketInfo.isSameCollaterals ? halfOfLong ?? 0n : longTokenInputState?.amount ?? 0n;
-      const shortTokenAmount = marketInfo.isSameCollaterals
-        ? longTokenInputState?.amount !== undefined
-          ? longTokenInputState?.amount - longTokenAmount
-          : undefined ?? 0n
-        : shortTokenInputState?.amount ?? 0n;
+      const shortTokenAmount =
+        (marketInfo.isSameCollaterals
+          ? longTokenInputState?.amount !== undefined
+            ? longTokenInputState?.amount - longTokenAmount
+            : 0n
+          : shortTokenInputState?.amount) ?? 0n;
 
       return getWithdrawalAmounts({
         marketInfo,

src/components/Synthetics/GmSwap/GmSwapBox/GmDepositWithdrawalBox/useUpdateInputAmounts.tsx

@@ -4,10 +4,13 @@ import { GlvInfo, MarketInfo } from "domain/synthetics/markets/types";
 import { TokenData } from "domain/synthetics/tokens";
 import type { DepositAmounts, WithdrawalAmounts } from "domain/synthetics/trade";
 import { formatAmountFree } from "lib/numbers";
+import { ContractsChainId } from "sdk/configs/chains";
+import { getToken } from "sdk/configs/tokens";
 
 import { TokenInputState } from "./types";
 
 export function useUpdateInputAmounts({
+  chainId,
   marketToken,
   marketInfo,
   longTokenInputState,
@@ -25,6 +28,7 @@ export function useUpdateInputAmounts({
   setFirstTokenInputValue,
   setSecondTokenInputValue,
 }: {
+  chainId: ContractsChainId;
   marketToken: TokenData | undefined;
   glvToken: TokenData | undefined;
   marketInfo: MarketInfo | undefined;
@@ -48,9 +52,9 @@ export function useUpdateInputAmounts({
         return;
       }
 
-      const longToken = longTokenInputState?.token;
-      const shortToken = shortTokenInputState?.token;
-      const fromMarketToken = fromMarketTokenInputState?.token;
+      const longToken = longTokenInputState ? getToken(chainId, longTokenInputState.address) : undefined;
+      const shortToken = shortTokenInputState ? getToken(chainId, shortTokenInputState.address) : undefined;
+      const fromMarketToken = marketToken;
 
       if (isDeposit) {
         if (["longCollateral", "shortCollateral"].includes(focusedInput)) {
@@ -185,6 +189,7 @@ export function useUpdateInputAmounts({
       glvInfo,
       glvToken,
       glvTokenAmount,
+      chainId,
     ]
   );
 }