chore: trade details

apps/web/src/views/Swap/V3Swap/components/RoutesBreakdown.tsx

@@ -12,13 +12,14 @@ import { RouteDisplayEssentials, RouteDisplayModal } from './RouteDisplayModal'
 
 interface Props {
   routes?: RouteDisplayEssentials[]
+  wrapperStyle?: React.CSSProperties
 }
 
 const RouteInfoContainer = styled(RowBetween)`
   padding: 4px 24px 0;
 `
 
-export const RoutesBreakdown = memo(function RoutesBreakdown({ routes = [] }: Props) {
+export const RoutesBreakdown = memo(function RoutesBreakdown({ routes = [], wrapperStyle }: Props) {
   const [wallchainStatus] = useWallchainStatus()
   const { t } = useTranslation()
   const routeDisplayModal = useModalV2()
@@ -32,7 +33,7 @@ export const RoutesBreakdown = memo(function RoutesBreakdown({ routes = [] }: Pr
 
   return (
     <>
-      <RouteInfoContainer>
+      <RouteInfoContainer style={wrapperStyle}>
         <span style={{ display: 'flex', alignItems: 'center' }}>
           <Text fontSize="14px" color="textSubtle">
             {deferWallchainStatus === 'found' ? t('Bonus Route') : t('Route')}
@@ -69,12 +70,12 @@ export const RoutesBreakdown = memo(function RoutesBreakdown({ routes = [] }: Pr
   )
 })
 
-export const XRoutesBreakdown = memo(function XRoutesBreakdown() {
+export const XRoutesBreakdown = memo(function XRoutesBreakdown({ wrapperStyle }: Props) {
   const { t } = useTranslation()
 
   return (
     <>
-      <RouteInfoContainer>
+      <RouteInfoContainer style={wrapperStyle}>
         <span style={{ display: 'flex', alignItems: 'center' }}>
           <Text fontSize="14px" color="textSubtle">
             {t('Route')}

apps/web/src/views/SwapSimplify/V4Swap/RefreshButton.tsx

@@ -0,0 +1,22 @@
+import { ChainId } from '@pancakeswap/sdk'
+import { IconButton } from '@pancakeswap/uikit'
+
+import RefreshIcon from 'components/Svg/RefreshIcon'
+import { CHAIN_REFRESH_TIME } from 'config/constants/exchange'
+
+export const RefreshButton: React.FC<{ refreshDisabled: boolean; onRefresh: () => void; chainId?: ChainId }> = ({
+  refreshDisabled,
+  onRefresh,
+  chainId,
+}) => {
+  return (
+    <IconButton variant="text" scale="sm" onClick={onRefresh} data-dd-action-name="Swap refresh button">
+      <RefreshIcon
+        disabled={refreshDisabled}
+        color="textSubtle"
+        width="20px"
+        duration={chainId && CHAIN_REFRESH_TIME[chainId] ? CHAIN_REFRESH_TIME[chainId] / 1000 : undefined}
+      />
+    </IconButton>
+  )
+}

apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx

@@ -66,7 +66,11 @@ export const TradeDetails = memo(function TradeDetails({ loaded, order }: Props)
           hasStablePair={hasStablePool}
           gasTokenSelector={isPaymasterAvailable && <GasTokenSelector currency={order?.trade.inputAmount.currency} />}
         />
-        {isXOrder(order) ? <XRoutesBreakdown /> : <RoutesBreakdown routes={order?.trade?.routes} />}
+        {isXOrder(order) ? (
+          <XRoutesBreakdown wrapperStyle={{ padding: 0 }} />
+        ) : (
+          <RoutesBreakdown routes={order?.trade?.routes} wrapperStyle={{ padding: 0 }} />
+        )}
       </AutoColumn>
     </AdvancedDetailsFooter>
   )

apps/web/src/views/SwapSimplify/V4Swap/index.tsx

@@ -1,10 +1,8 @@
 import { SmartRouter } from '@pancakeswap/smart-router/evm'
-import { FlexGap, IconButton } from '@pancakeswap/uikit'
+import { FlexGap } from '@pancakeswap/uikit'
 import { useUserSlippage } from '@pancakeswap/utils/user'
 import { SwapUIV2 } from '@pancakeswap/widgets-internal'
 import { RiskDetailsPanel, useShouldRiskPanelDisplay } from 'components/AccessRisk/SwapRevampRiskDisplay'
-import RefreshIcon from 'components/Svg/RefreshIcon'
-import { CHAIN_REFRESH_TIME } from 'config/constants/exchange'
 import { useCurrency } from 'hooks/Tokens'
 import { useActiveChainId } from 'hooks/useActiveChainId'
 import { useCurrencyUsdPrice } from 'hooks/useCurrencyUsdPrice'
@@ -22,6 +20,7 @@ import { ButtonAndDetailsPanel } from './ButtonAndDetailsPanel'
 import { CommitButton } from './CommitButton'
 import { FormMain } from './FormMainV4'
 import { PricingAndSlippage } from './PricingAndSlippage'
+import { RefreshButton } from './RefreshButton'
 import { SwapSelection } from './SwapSelectionTab'
 import { TradeDetails } from './TradeDetails'
 
@@ -147,26 +146,16 @@ export function V4SwapForm() {
             onClick={(e) => {
               e.stopPropagation()
             }}
+            justifyContent="center"
+            alignItems="center"
           >
-            <IconButton variant="text" scale="sm" onClick={refreshOrder} data-dd-action-name="Swap refresh button">
-              <RefreshIcon
-                disabled={refreshDisabled}
-                color="textSubtle"
-                width="24px"
-                duration={
-                  activeChianId && CHAIN_REFRESH_TIME[activeChianId]
-                    ? CHAIN_REFRESH_TIME[activeChianId] / 1000
-                    : undefined
-                }
-              />
-            </IconButton>
+            <RefreshButton onRefresh={refreshOrder} refreshDisabled={refreshDisabled} chainId={activeChianId} />
             <PricingAndSlippage priceLoading={!tradeLoaded} price={executionPrice ?? undefined} showSlippage={false} />
           </FlexGap>
         }
         tradeDetails={<TradeDetails loaded={tradeLoaded} order={bestOrder} />}
         shouldRenderDetails={Boolean(executionPrice) && Boolean(bestOrder) && !isWrapping}
       />
-      {/* <TradeDetails loaded={tradeLoaded} order={bestOrder} /> */}
     </SwapUIV2.SwapFormWrapper>
   )
 }