From 6e34c371c43229ab1efcd661e10768c348419da5 Mon Sep 17 00:00:00 2001
From: Tien Nguyen <dinhtiennguyen.1202@gmail.com>
Date: Mon, 20 Jan 2025 17:18:16 +0700
Subject: [PATCH] fix: notify title, button style

---
 .../Earns/PositionDetail/ClaimFeeModal/index.tsx      | 11 +++++++----
 src/pages/Earns/PositionDetail/LeftSection.tsx        |  1 +
 src/pages/Earns/PositionDetail/styles.tsx             |  5 ++++-
 src/state/transactions/type.ts                        |  2 +-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx b/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx
index 25585d0e5e..b421608a74 100644
--- a/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx
+++ b/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx
@@ -59,6 +59,9 @@ export default function ClaimFeeModal({
 
   const contract = useSigningContract(nftManagerContract, NonfungiblePositionManagerABI)
 
+  const isToken0Native = isNativeToken(position.token0Address, position.chainId as keyof typeof WETH)
+  const isToken1Native = isNativeToken(position.token1Address, position.chainId as keyof typeof WETH)
+
   const handleCollectFees = useCallback(async () => {
     if (!library || !contract) return
     const accounts = await library.listAccounts()
@@ -75,8 +78,6 @@ export default function ClaimFeeModal({
     const calldatas = []
 
     try {
-      const isToken0Native = isNativeToken(position.token0Address, position.chainId as keyof typeof WETH)
-      const isToken1Native = isNativeToken(position.token1Address, position.chainId as keyof typeof WETH)
       const involvesETH = isToken0Native || isToken1Native
       const collectParams = {
         tokenId,
@@ -118,8 +119,8 @@ export default function ClaimFeeModal({
           tokenAmountOut: formatDisplayNumber(feeInfo.amount1, { significantDigits: 4 }),
           tokenAddressIn: position.token0Address,
           tokenAddressOut: position.token1Address,
-          tokenSymbolIn: position.token0Symbol,
-          tokenSymbolOut: position.token1Symbol,
+          tokenSymbolIn: isToken0Native ? 'ETH' : position.token0Symbol,
+          tokenSymbolOut: isToken1Native ? 'ETH' : position.token1Symbol,
           arbitrary: {
             token_1: position.token0Symbol,
             token_2: position.token1Symbol,
@@ -144,6 +145,8 @@ export default function ClaimFeeModal({
     feeInfo.amount1,
     feeInfo.balance0,
     feeInfo.balance1,
+    isToken0Native,
+    isToken1Native,
     library,
     nftManagerContract,
     onClose,
diff --git a/src/pages/Earns/PositionDetail/LeftSection.tsx b/src/pages/Earns/PositionDetail/LeftSection.tsx
index 0d0b7d3b34..9f34d7038c 100644
--- a/src/pages/Earns/PositionDetail/LeftSection.tsx
+++ b/src/pages/Earns/PositionDetail/LeftSection.tsx
@@ -246,6 +246,7 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
           <PositionAction
             small
             outline
+            mobileAutoWidth
             loading={claiming}
             disabled={(!feeInfo || feeInfo.totalValue === 0) && !claiming}
             onClick={() => feeInfo && feeInfo.totalValue !== 0 && !claiming && setOpenClaimFeeModal(true)}
diff --git a/src/pages/Earns/PositionDetail/styles.tsx b/src/pages/Earns/PositionDetail/styles.tsx
index 939808e628..8185951e11 100644
--- a/src/pages/Earns/PositionDetail/styles.tsx
+++ b/src/pages/Earns/PositionDetail/styles.tsx
@@ -126,6 +126,7 @@ export const PositionAction = styled.button<{
   small?: boolean
   disabled?: boolean
   loading?: boolean
+  mobileAutoWidth?: boolean
 }>`
   border-radius: 24px;
   padding: 10px 18px;
@@ -140,7 +141,9 @@ export const PositionAction = styled.button<{
   ${({ outline }) => outline && 'background-color: transparent;'}
   ${({ outline, theme }) => outline && `color: ${theme.primary};`}
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme, mobileAutoWidth }) =>
+    !mobileAutoWidth &&
+    theme.mediaWidth.upToSmall`
     width: 100%;
   `}
 
diff --git a/src/state/transactions/type.ts b/src/state/transactions/type.ts
index 7adc30e559..0e9c9d2a63 100644
--- a/src/state/transactions/type.ts
+++ b/src/state/transactions/type.ts
@@ -135,7 +135,7 @@ export enum TRANSACTION_TYPE {
   ELASTIC_REMOVE_LIQUIDITY = 'Elastic Remove Liquidity',
   ELASTIC_INCREASE_LIQUIDITY = 'Elastic Increase Liquidity',
   ELASTIC_ZAP_IN_LIQUIDITY = 'Elastic Zap-in Liquidity',
-  COLLECT_FEE = 'Collect Fee',
+  COLLECT_FEE = 'Collected Fee',
 
   STAKE = 'Stake Into Farm',
   UNSTAKE = 'Unstake From Farm',