From c424b95f53bd3a979b25920727e75c27e91426c5 Mon Sep 17 00:00:00 2001
From: ChefEric <173023571+chef-eric@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:16:58 +0800
Subject: [PATCH] fix: ton swap details deopdown UI (#11208)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on refactoring the `AdvancedSwapDetailsDropdown`
component to use a named export and updating the imports in `SwapForm`.
Additionally, it modifies the styling of the `AdvancedDetailsFooter`
component.

### Detailed summary
- Changed `AdvancedSwapDetailsDropdown` from default export to named
export.
- Updated import statement for `AdvancedSwapDetailsDropdown` in
`SwapForm`.
- Added import for `PricingAndSlippage` in `SwapForm`.
- Removed unused import of `formatAmount` in `SwapForm`.
- Adjusted CSS for `AdvancedDetailsFooter` in
`AdvancedSwapDetailsDropdown`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->
---
 apps/ton/src/views/TONSwap/AdvancedSwapDetailsDropdown.tsx | 7 +------
 apps/ton/src/views/TONSwap/SwapForm.tsx                    | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/ton/src/views/TONSwap/AdvancedSwapDetailsDropdown.tsx b/apps/ton/src/views/TONSwap/AdvancedSwapDetailsDropdown.tsx
index 5d98b295c39a1..a0c111cb4bb02 100644
--- a/apps/ton/src/views/TONSwap/AdvancedSwapDetailsDropdown.tsx
+++ b/apps/ton/src/views/TONSwap/AdvancedSwapDetailsDropdown.tsx
@@ -4,17 +4,12 @@ import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDet
 
 const AdvancedDetailsFooter = styled.div<{ show: boolean }>`
   margin-top: ${({ show }) => (show ? '16px' : 0)};
-  padding-top: 16px;
-  padding-bottom: 16px;
   width: 100%;
   border-radius: 20px;
   background-color: ${({ theme }) => theme.colors.invertedContrast};
-
-  transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')};
-  transition: transform 300ms ease-in-out;
 `
 
-export default function AdvancedSwapDetailsDropdown({ trade, ...rest }: AdvancedSwapDetailsProps) {
+export const AdvancedSwapDetailsDropdown = ({ trade, ...rest }: AdvancedSwapDetailsProps) => {
   const lastTrade = usePreviousValue(trade)
 
   return (
diff --git a/apps/ton/src/views/TONSwap/SwapForm.tsx b/apps/ton/src/views/TONSwap/SwapForm.tsx
index f7003e6294ac0..47cc2e0b25741 100644
--- a/apps/ton/src/views/TONSwap/SwapForm.tsx
+++ b/apps/ton/src/views/TONSwap/SwapForm.tsx
@@ -14,18 +14,18 @@ import { independentFieldAtom, inputCurrencyAtom, outputCurrencyAtom, typedValue
 import { TransactionActionType } from 'components/Modals/ActionModal'
 import { SwapCommitButton } from 'components/TonSwap/SwapCommitButton'
 import { SwapUIV2 } from 'components/widgets/swap-v2'
+import { PricingAndSlippage } from 'components/TonSwap/PricingAndSlippage'
 import { useSwapActionHandlers } from 'hooks/swap/useSwapActionHandlers'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { balanceAtom } from 'ton/logic/balanceAtom'
 import { Field } from 'types'
 import { Rounding, _10000 } from '@pancakeswap/swap-sdk-core'
-import { formatAmount, formatFraction } from '@pancakeswap/utils/formatFractions'
+import { formatFraction } from '@pancakeswap/utils/formatFractions'
 import { tryParseAmount } from 'utils/tryParseAmount'
 import { useSwap } from 'ton/logic/swap/useSwap'
 import { RefreshButton } from '@pancakeswap/widgets-internal'
 import { useBestTrade } from 'hooks/swap/useBestTrade'
-import { PricingAndSlippage } from 'components/TonSwap/PricingAndSlippage'
-import AdvancedSwapDetailsDropdown from './AdvancedSwapDetailsDropdown'
+import { AdvancedSwapDetailsDropdown } from './AdvancedSwapDetailsDropdown'
 
 export const SwapForm = () => {
   const { t } = useTranslation()