From 5384d5511f167cb45814077eb3977e5565664321 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:18:21 +1100
Subject: [PATCH 1/8] refactor: make generic slide transition route

---
 .../MultiHopTrade/MultiHopTrade.tsx           |  7 ++--
 ...ListRoute.tsx => SlideTransitionRoute.tsx} | 32 +++++++++++--------
 src/components/MultiHopTrade/types.ts         |  1 +
 3 files changed, 24 insertions(+), 16 deletions(-)
 rename src/components/MultiHopTrade/components/{QuoteList/QuoteListRoute.tsx => SlideTransitionRoute.tsx} (54%)

diff --git a/src/components/MultiHopTrade/MultiHopTrade.tsx b/src/components/MultiHopTrade/MultiHopTrade.tsx
index 1b606e660b7..57e1ef60e95 100644
--- a/src/components/MultiHopTrade/MultiHopTrade.tsx
+++ b/src/components/MultiHopTrade/MultiHopTrade.tsx
@@ -12,7 +12,8 @@ import { useAppDispatch, useAppSelector } from 'state/store'
 
 import { LimitOrder } from './components/LimitOrder/LimitOrder'
 import { MultiHopTradeConfirm } from './components/MultiHopTradeConfirm/MultiHopTradeConfirm'
-import { QuoteListRoute } from './components/QuoteList/QuoteListRoute'
+import { QuoteList } from './components/QuoteList/QuoteList'
+import { SlideTransitionRoute } from './components/SlideTransitionRoute'
 import { Claim } from './components/TradeInput/components/Claim/Claim'
 import { TradeInput } from './components/TradeInput/TradeInput'
 import { VerifyAddresses } from './components/VerifyAddresses/VerifyAddresses'
@@ -155,9 +156,11 @@ const TradeRoutes = memo(({ isCompact }: TradeRoutesProps) => {
             <VerifyAddresses />
           </Route>
           <Route key={TradeRoutePaths.QuoteList} path={TradeRoutePaths.QuoteList}>
-            <QuoteListRoute
+            <SlideTransitionRoute
               height={tradeInputRef.current?.offsetHeight ?? '500px'}
               width={tradeInputRef.current?.offsetWidth ?? 'full'}
+              component={QuoteList}
+              parentRoute={TradeRoutePaths.Input}
             />
           </Route>
           <Route key={TradeRoutePaths.Claim} path={TradeRoutePaths.Claim}>
diff --git a/src/components/MultiHopTrade/components/QuoteList/QuoteListRoute.tsx b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
similarity index 54%
rename from src/components/MultiHopTrade/components/QuoteList/QuoteListRoute.tsx
rename to src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
index 96d4ee53b69..96ecc4bd7be 100644
--- a/src/components/MultiHopTrade/components/QuoteList/QuoteListRoute.tsx
+++ b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
@@ -1,40 +1,44 @@
+import type { CardProps } from '@chakra-ui/react'
 import { Center, Flex, useMediaQuery } from '@chakra-ui/react'
+import type { FC } from 'react'
 import { useCallback, useState } from 'react'
 import { useHistory } from 'react-router'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
-import { TradeRoutePaths } from 'components/MultiHopTrade/types'
+import type { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { breakpoints } from 'theme/theme'
 
-import { QuoteList } from './QuoteList'
+type SlideTransitionComponentProps = {
+  onBack?: () => void
+  isLoading: boolean
+} & CardProps
 
-type QuoteListRouteProps = {
+type SlideTransitionRouteProps = {
   height: string | number
   width: string | number
+  component: FC<SlideTransitionComponentProps>
+  parentRoute: TradeRoutePaths
 }
 
-export const QuoteListRoute = ({
+export const SlideTransitionRoute = ({
   width: initialWidth,
   height: initialHeight,
-}: QuoteListRouteProps) => {
+  component: Component,
+  parentRoute,
+}: SlideTransitionRouteProps) => {
   const [width] = useState(initialWidth)
   const [height] = useState(initialHeight)
   const history = useHistory()
   const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`)
 
-  const handleCloseCompactQuoteList = useCallback(() => {
-    history.push({ pathname: TradeRoutePaths.Input })
-  }, [history])
+  const handleClose = useCallback(() => {
+    history.push({ pathname: parentRoute })
+  }, [history, parentRoute])
 
   return (
     <TradeSlideTransition>
       <Flex width='full' justifyContent='center' maxWidth={isSmallerThanXl ? '500px' : undefined}>
         <Center width='inherit'>
-          <QuoteList
-            onBack={handleCloseCompactQuoteList}
-            isLoading={false}
-            height={height}
-            width={width}
-          />
+          <Component onBack={handleClose} isLoading={false} height={height} width={width} />
         </Center>
       </Flex>
     </TradeSlideTransition>
diff --git a/src/components/MultiHopTrade/types.ts b/src/components/MultiHopTrade/types.ts
index 11aebb2aae9..cb22516318a 100644
--- a/src/components/MultiHopTrade/types.ts
+++ b/src/components/MultiHopTrade/types.ts
@@ -10,6 +10,7 @@ export enum TradeRoutePaths {
   QuoteList = '/trade/quote-list',
   Claim = '/trade/claim',
   LimitOrder = '/trade/limit-order',
+  LimitOrderQuoteList = '/trade/limit-order-quote-list',
 }
 
 export type GetReceiveAddressArgs = {

From ef776471ee1c8dac3eaa1a788d5ed2f297aa2154 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:01:03 +1100
Subject: [PATCH 2/8] chore: wip

---
 .../components/LimitOrder/LimitOrder.tsx      | 12 ++-
 .../components/LimitOrder/LimitOrderList.tsx  | 82 ++++++++++---------
 .../LimitOrder/components/LimitOrderInput.tsx | 13 ++-
 .../components/LimitOrder/types.ts            |  1 +
 src/components/MultiHopTrade/types.ts         |  1 -
 5 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
index 9d66342d95e..7090dcff4f0 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
@@ -1,11 +1,13 @@
 import { Flex } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { MemoryRouter, Route, Switch, useLocation } from 'react-router'
-import type { TradeInputTab } from 'components/MultiHopTrade/types'
+import { type TradeInputTab, TradeRoutePaths } from 'components/MultiHopTrade/types'
 
+import { SlideTransitionRoute } from '../SlideTransitionRoute'
 import { LimitOrderConfirm } from './components/LimitOrderConfirm'
 import { LimitOrderInput } from './components/LimitOrderInput'
 import { LimitOrderStatus } from './components/LimitOrderStatus'
+import { LimitOrderList } from './LimitOrderList'
 import { LimitOrderRoutePaths } from './types'
 
 const LimitOrderRouteEntries = [
@@ -60,6 +62,14 @@ export const LimitOrder = ({ isCompact, tradeInputRef, onChangeTab }: LimitOrder
             path={LimitOrderRoutePaths.Status}
             render={renderLimitOrderStatus}
           />
+          <Route key={LimitOrderRoutePaths.QuoteList} path={LimitOrderRoutePaths.QuoteList}>
+            <SlideTransitionRoute
+              height={tradeInputRef.current?.offsetHeight ?? '500px'}
+              width={tradeInputRef.current?.offsetWidth ?? 'full'}
+              component={LimitOrderList}
+              parentRoute={TradeRoutePaths.LimitOrder}
+            />
+          </Route>
         </Flex>
       </Switch>
     </MemoryRouter>
diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index 8b76984137c..751d3a1d36d 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -14,19 +14,21 @@ import type { FC } from 'react'
 import { usdcAssetId } from 'test/mocks/accounts'
 import { Text } from 'components/Text'
 
+import { WithBackButton } from '../WithBackButton'
 import { LimitOrderCard } from './components/LimitOrderCard'
 import { LimitOrderStatus } from './types'
 
 type LimitOrderListProps = {
   isLoading: boolean
   cardProps?: CardProps
+  onBack?: () => void
 }
 
 const textColorBaseProps = {
   color: 'text.base',
 }
 
-export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps }) => {
+export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) => {
   // FIXME: Use real data
   const MockOpenOrderCard = () => (
     <LimitOrderCard
@@ -57,46 +59,48 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps }) => {
   return (
     <Card {...cardProps}>
       <CardHeader px={0} pt={4} h='full'>
-        <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
-          <TabList gap={4} flex='0 0 auto' mb={2} ml={6}>
-            <Tab
-              p={0}
-              fontSize='md'
-              fontWeight='bold'
-              color='text.subtle'
-              _selected={textColorBaseProps}
-            >
-              <Text translation='limitOrders.openOrders' />
-            </Tab>
-            <Tab
-              p={0}
-              fontSize='md'
-              fontWeight='bold'
-              color='text.subtle'
-              _selected={textColorBaseProps}
-            >
-              <Text translation='limitOrders.orderHistory' />
-            </Tab>
-          </TabList>
+        <WithBackButton onBack={onBack}>
+          <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
+            <TabList gap={4} flex='0 0 auto' mb={2} ml={6}>
+              <Tab
+                p={0}
+                fontSize='md'
+                fontWeight='bold'
+                color='text.subtle'
+                _selected={textColorBaseProps}
+              >
+                <Text translation='limitOrders.openOrders' />
+              </Tab>
+              <Tab
+                p={0}
+                fontSize='md'
+                fontWeight='bold'
+                color='text.subtle'
+                _selected={textColorBaseProps}
+              >
+                <Text translation='limitOrders.orderHistory' />
+              </Tab>
+            </TabList>
 
-          <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
-            <TabPanel px={0}>
-              <CardBody px={0} overflowY='auto' flex='1 1 auto'>
-                {Array.from({ length: 3 }).map((_, index) => (
-                  <MockOpenOrderCard key={index} />
-                ))}
-              </CardBody>
-            </TabPanel>
+            <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
+              <TabPanel px={0}>
+                <CardBody px={0} overflowY='auto' flex='1 1 auto'>
+                  {Array.from({ length: 3 }).map((_, index) => (
+                    <MockOpenOrderCard key={index} />
+                  ))}
+                </CardBody>
+              </TabPanel>
 
-            <TabPanel px={0}>
-              <CardBody px={0} overflowY='auto' flex='1 1 auto'>
-                {Array.from({ length: 2 }).map((_, index) => (
-                  <MockHistoryOrderCard key={index} />
-                ))}
-              </CardBody>
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+              <TabPanel px={0}>
+                <CardBody px={0} overflowY='auto' flex='1 1 auto'>
+                  {Array.from({ length: 2 }).map((_, index) => (
+                    <MockHistoryOrderCard key={index} />
+                  ))}
+                </CardBody>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </WithBackButton>
       </CardHeader>
     </Card>
   )
diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx
index 869b72687fa..7fe56d287cf 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx
@@ -1,11 +1,10 @@
-import { Divider, Stack } from '@chakra-ui/react'
+import { Divider, Stack, useMediaQuery } from '@chakra-ui/react'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { foxAssetId, fromAccountId, usdcAssetId } from '@shapeshiftoss/caip'
 import { isLedger } from '@shapeshiftoss/hdwallet-ledger'
 import { SwapperName } from '@shapeshiftoss/swapper'
 import type { Asset } from '@shapeshiftoss/types'
 import { bnOrZero, toBaseUnit } from '@shapeshiftoss/utils'
-import { noop } from 'lodash'
 import type { FormEvent } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
@@ -34,6 +33,7 @@ import {
   selectShouldShowTradeQuoteOrAwaitInput,
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
+import { breakpoints } from 'theme/theme'
 
 import { SharedTradeInput } from '../../SharedTradeInput/SharedTradeInput'
 import { SharedTradeInputBody } from '../../SharedTradeInput/SharedTradeInputBody'
@@ -67,6 +67,7 @@ export const LimitOrderInput = ({
   const { manualReceiveAddress, walletReceiveAddress } = useReceiveAddress({
     fetchUnchainedAddress: Boolean(wallet && isLedger(wallet)),
   })
+  const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`, { ssr: false })
 
   const [sellAsset, setSellAsset] = useState(localAssetData[usdcAssetId] ?? defaultAsset)
   const [buyAsset, setBuyAsset] = useState(localAssetData[foxAssetId] ?? defaultAsset)
@@ -97,6 +98,11 @@ export const LimitOrderInput = ({
     selectIsAnyAccountMetadataLoadedForChainId(state, isAnyAccountMetadataLoadedForChainIdFilter),
   )
 
+  const handleOpenCompactQuoteList = useCallback(() => {
+    if (!isCompact && !isSmallerThanXl) return
+    history.push({ pathname: LimitOrderRoutePaths.QuoteList })
+  }, [history, isCompact, isSmallerThanXl])
+
   const isVotingPowerLoading = useMemo(
     () => isSnapshotApiQueriesPending && votingPower === undefined,
     [isSnapshotApiQueriesPending, votingPower],
@@ -319,7 +325,7 @@ export const LimitOrderInput = ({
         isError={false}
         isLoading={isLoading}
         manualAddressEntryDescription={undefined}
-        onRateClick={noop}
+        onRateClick={handleOpenCompactQuoteList}
         quoteStatusTranslation={'trade.previewTrade'}
         rate={activeQuote?.rate}
         receiveAddress={manualReceiveAddress ?? walletReceiveAddress}
@@ -336,6 +342,7 @@ export const LimitOrderInput = ({
   }, [
     activeQuote?.rate,
     buyAsset,
+    handleOpenCompactQuoteList,
     hasUserEnteredAmount,
     isCompact,
     isLoading,
diff --git a/src/components/MultiHopTrade/components/LimitOrder/types.ts b/src/components/MultiHopTrade/components/LimitOrder/types.ts
index 364792d8f32..0fb6366a9a1 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/types.ts
+++ b/src/components/MultiHopTrade/components/LimitOrder/types.ts
@@ -2,6 +2,7 @@ export enum LimitOrderRoutePaths {
   Input = '/trade/limit-order/input',
   Confirm = '/trade/limit-order/confirm',
   Status = '/trade/limit-order/status',
+  QuoteList = '/trade/limit-order-quote-list',
 }
 
 export enum LimitOrderStatus {
diff --git a/src/components/MultiHopTrade/types.ts b/src/components/MultiHopTrade/types.ts
index cb22516318a..11aebb2aae9 100644
--- a/src/components/MultiHopTrade/types.ts
+++ b/src/components/MultiHopTrade/types.ts
@@ -10,7 +10,6 @@ export enum TradeRoutePaths {
   QuoteList = '/trade/quote-list',
   Claim = '/trade/claim',
   LimitOrder = '/trade/limit-order',
-  LimitOrderQuoteList = '/trade/limit-order-quote-list',
 }
 
 export type GetReceiveAddressArgs = {

From 6a849c8f271ed2a52d6da775afdcce2361e37ae3 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:31:13 +1100
Subject: [PATCH 3/8] fix: route + header styling

---
 src/assets/translations/en/main.json          |   3 +-
 .../components/LimitOrder/LimitOrder.tsx      |   4 +-
 .../components/LimitOrder/LimitOrderList.tsx  | 111 ++++++++++--------
 .../components/SlideTransitionRoute.tsx       |   8 +-
 4 files changed, 74 insertions(+), 52 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 932270a395f..0e916623402 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -2717,7 +2717,8 @@
       "filled": "Filled",
       "cancelled": "Cancelled",
       "expired": "Expired"
-    }
+    },
+    "orders": "Orders"
   },
   "thorFees": {
     "title": "Here from THORSwap?",
diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
index 7090dcff4f0..48c49d40d8a 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { MemoryRouter, Route, Switch, useLocation } from 'react-router'
-import { type TradeInputTab, TradeRoutePaths } from 'components/MultiHopTrade/types'
+import { type TradeInputTab } from 'components/MultiHopTrade/types'
 
 import { SlideTransitionRoute } from '../SlideTransitionRoute'
 import { LimitOrderConfirm } from './components/LimitOrderConfirm'
@@ -67,7 +67,7 @@ export const LimitOrder = ({ isCompact, tradeInputRef, onChangeTab }: LimitOrder
               height={tradeInputRef.current?.offsetHeight ?? '500px'}
               width={tradeInputRef.current?.offsetWidth ?? 'full'}
               component={LimitOrderList}
-              parentRoute={TradeRoutePaths.LimitOrder}
+              parentRoute={LimitOrderRoutePaths.Input}
             />
           </Route>
         </Flex>
diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index 751d3a1d36d..0c4e1ce80fa 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -1,8 +1,11 @@
 import type { CardProps } from '@chakra-ui/react'
 import {
+  Box,
   Card,
   CardBody,
   CardHeader,
+  Flex,
+  Heading,
   Tab,
   TabList,
   TabPanel,
@@ -10,7 +13,7 @@ import {
   Tabs,
 } from '@chakra-ui/react'
 import { foxAssetId } from '@shapeshiftoss/caip'
-import type { FC } from 'react'
+import { type FC, useMemo } from 'react'
 import { usdcAssetId } from 'test/mocks/accounts'
 import { Text } from 'components/Text'
 
@@ -24,11 +27,19 @@ type LimitOrderListProps = {
   onBack?: () => void
 }
 
-const textColorBaseProps = {
-  color: 'text.base',
-}
-
 export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) => {
+  const textColorBaseProps = useMemo(() => {
+    return {
+      color: 'text.base',
+      ...(onBack && {
+        bg: 'blue.500',
+        px: 4,
+        py: 2,
+        borderRadius: 'full',
+      }),
+    }
+  }, [onBack])
+
   // FIXME: Use real data
   const MockOpenOrderCard = () => (
     <LimitOrderCard
@@ -58,49 +69,57 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
 
   return (
     <Card {...cardProps}>
-      <CardHeader px={0} pt={4} h='full'>
-        <WithBackButton onBack={onBack}>
-          <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
-            <TabList gap={4} flex='0 0 auto' mb={2} ml={6}>
-              <Tab
-                p={0}
-                fontSize='md'
-                fontWeight='bold'
-                color='text.subtle'
-                _selected={textColorBaseProps}
-              >
-                <Text translation='limitOrders.openOrders' />
-              </Tab>
-              <Tab
-                p={0}
-                fontSize='md'
-                fontWeight='bold'
-                color='text.subtle'
-                _selected={textColorBaseProps}
-              >
-                <Text translation='limitOrders.orderHistory' />
-              </Tab>
-            </TabList>
+      <CardHeader px={0} pt={4} h='full' display='flex' flexDirection='column'>
+        <Flex width='full' alignItems='center' mb={4} position='relative'>
+          <Box position='absolute' left={0}>
+            <WithBackButton onBack={onBack} />
+          </Box>
+          {onBack && (
+            <Heading width='full' textAlign='center' fontSize='md'>
+              <Text translation='limitOrders.orders' />
+            </Heading>
+          )}
+        </Flex>
+        <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
+          <TabList gap={4} flex='0 0 auto' mb={2} ml={6}>
+            <Tab
+              p={0}
+              fontSize='md'
+              fontWeight='bold'
+              color={onBack ? 'text.base' : 'text.subtle'}
+              _selected={textColorBaseProps}
+            >
+              <Text translation='limitOrders.openOrders' />
+            </Tab>
+            <Tab
+              p={0}
+              fontSize='md'
+              fontWeight='bold'
+              color={onBack ? 'text.base' : 'text.subtle'}
+              _selected={textColorBaseProps}
+            >
+              <Text translation='limitOrders.orderHistory' />
+            </Tab>
+          </TabList>
 
-            <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
-              <TabPanel px={0}>
-                <CardBody px={0} overflowY='auto' flex='1 1 auto'>
-                  {Array.from({ length: 3 }).map((_, index) => (
-                    <MockOpenOrderCard key={index} />
-                  ))}
-                </CardBody>
-              </TabPanel>
+          <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
+            <TabPanel px={0}>
+              <CardBody px={0} overflowY='auto' flex='1 1 auto'>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <MockOpenOrderCard key={index} />
+                ))}
+              </CardBody>
+            </TabPanel>
 
-              <TabPanel px={0}>
-                <CardBody px={0} overflowY='auto' flex='1 1 auto'>
-                  {Array.from({ length: 2 }).map((_, index) => (
-                    <MockHistoryOrderCard key={index} />
-                  ))}
-                </CardBody>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </WithBackButton>
+            <TabPanel px={0}>
+              <CardBody px={0} overflowY='auto' flex='1 1 auto'>
+                {Array.from({ length: 2 }).map((_, index) => (
+                  <MockHistoryOrderCard key={index} />
+                ))}
+              </CardBody>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </CardHeader>
     </Card>
   )
diff --git a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
index 96ecc4bd7be..534633b3f6d 100644
--- a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
+++ b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
@@ -7,6 +7,8 @@ import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransit
 import type { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { breakpoints } from 'theme/theme'
 
+import type { LimitOrderRoutePaths } from './LimitOrder/types'
+
 type SlideTransitionComponentProps = {
   onBack?: () => void
   isLoading: boolean
@@ -16,7 +18,7 @@ type SlideTransitionRouteProps = {
   height: string | number
   width: string | number
   component: FC<SlideTransitionComponentProps>
-  parentRoute: TradeRoutePaths
+  parentRoute: TradeRoutePaths | LimitOrderRoutePaths
 }
 
 export const SlideTransitionRoute = ({
@@ -30,7 +32,7 @@ export const SlideTransitionRoute = ({
   const history = useHistory()
   const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`)
 
-  const handleClose = useCallback(() => {
+  const handleBack = useCallback(() => {
     history.push({ pathname: parentRoute })
   }, [history, parentRoute])
 
@@ -38,7 +40,7 @@ export const SlideTransitionRoute = ({
     <TradeSlideTransition>
       <Flex width='full' justifyContent='center' maxWidth={isSmallerThanXl ? '500px' : undefined}>
         <Center width='inherit'>
-          <Component onBack={handleClose} isLoading={false} height={height} width={width} />
+          <Component onBack={handleBack} isLoading={false} height={height} width={width} />
         </Center>
       </Flex>
     </TradeSlideTransition>

From 55587c0b1e604195bdc931652465878725dcecff Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:48:07 +1100
Subject: [PATCH 4/8] chore: style improvements

---
 .../components/LimitOrder/LimitOrderList.tsx              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index 0c4e1ce80fa..e3ec16799a8 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -70,7 +70,7 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
   return (
     <Card {...cardProps}>
       <CardHeader px={0} pt={4} h='full' display='flex' flexDirection='column'>
-        <Flex width='full' alignItems='center' mb={4} position='relative'>
+        <Flex width='full' alignItems='center' mb={4} position='relative' mx={4}>
           <Box position='absolute' left={0}>
             <WithBackButton onBack={onBack} />
           </Box>
@@ -81,7 +81,7 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
           )}
         </Flex>
         <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
-          <TabList gap={4} flex='0 0 auto' mb={2} ml={6}>
+          <TabList gap={4} flex='0 0 auto' mb={2} ml={4}>
             <Tab
               p={0}
               fontSize='md'
@@ -103,7 +103,7 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
           </TabList>
 
           <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
-            <TabPanel px={0}>
+            <TabPanel px={0} py={0}>
               <CardBody px={0} overflowY='auto' flex='1 1 auto'>
                 {Array.from({ length: 5 }).map((_, index) => (
                   <MockOpenOrderCard key={index} />
@@ -111,7 +111,7 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
               </CardBody>
             </TabPanel>
 
-            <TabPanel px={0}>
+            <TabPanel px={0} py={0}>
               <CardBody px={0} overflowY='auto' flex='1 1 auto'>
                 {Array.from({ length: 2 }).map((_, index) => (
                   <MockHistoryOrderCard key={index} />

From ac141b8162b0311eb77ab785c2dc99b394db781f Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:10:41 +1100
Subject: [PATCH 5/8] fix: more style improvements

---
 .../components/LimitOrder/LimitOrderList.tsx  | 53 ++++++++++---------
 .../components/QuoteList/QuoteList.tsx        | 17 ++----
 .../components/SlideTransitionRoute.tsx       | 15 ++++--
 .../components/CollapsibleQuoteList.tsx       | 12 ++++-
 4 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index e3ec16799a8..ebffed1bcfb 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -69,7 +69,7 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
 
   return (
     <Card {...cardProps}>
-      <CardHeader px={0} pt={4} h='full' display='flex' flexDirection='column'>
+      <CardHeader px={0} pt={4} display='flex' flexDirection='column'>
         <Flex width='full' alignItems='center' mb={4} position='relative' mx={4}>
           <Box position='absolute' left={0}>
             <WithBackButton onBack={onBack} />
@@ -80,29 +80,30 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
             </Heading>
           )}
         </Flex>
-        <Tabs variant='unstyled' display='flex' flexDirection='column' h='full'>
-          <TabList gap={4} flex='0 0 auto' mb={2} ml={4}>
-            <Tab
-              p={0}
-              fontSize='md'
-              fontWeight='bold'
-              color={onBack ? 'text.base' : 'text.subtle'}
-              _selected={textColorBaseProps}
-            >
-              <Text translation='limitOrders.openOrders' />
-            </Tab>
-            <Tab
-              p={0}
-              fontSize='md'
-              fontWeight='bold'
-              color={onBack ? 'text.base' : 'text.subtle'}
-              _selected={textColorBaseProps}
-            >
-              <Text translation='limitOrders.orderHistory' />
-            </Tab>
-          </TabList>
-
-          <TabPanels flex='1' overflowY='auto' minH={0} px={2}>
+      </CardHeader>
+      <Tabs variant='unstyled' display='flex' flexDirection='column' overflowY='auto'>
+        <TabList gap={4} flex='0 0 auto' mb={2} ml={4}>
+          <Tab
+            p={0}
+            fontSize='md'
+            fontWeight='bold'
+            color={onBack ? 'text.base' : 'text.subtle'}
+            _selected={textColorBaseProps}
+          >
+            <Text translation='limitOrders.openOrders' />
+          </Tab>
+          <Tab
+            p={0}
+            fontSize='md'
+            fontWeight='bold'
+            color={onBack ? 'text.base' : 'text.subtle'}
+            _selected={textColorBaseProps}
+          >
+            <Text translation='limitOrders.orderHistory' />
+          </Tab>
+        </TabList>
+        <CardBody flex='1' overflowY='auto' minH={0} px={2} py={0}>
+          <TabPanels>
             <TabPanel px={0} py={0}>
               <CardBody px={0} overflowY='auto' flex='1 1 auto'>
                 {Array.from({ length: 5 }).map((_, index) => (
@@ -119,8 +120,8 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
               </CardBody>
             </TabPanel>
           </TabPanels>
-        </Tabs>
-      </CardHeader>
+        </CardBody>
+      </Tabs>
     </Card>
   )
 }
diff --git a/src/components/MultiHopTrade/components/QuoteList/QuoteList.tsx b/src/components/MultiHopTrade/components/QuoteList/QuoteList.tsx
index b6aeb7b4916..fd00d3b3bba 100644
--- a/src/components/MultiHopTrade/components/QuoteList/QuoteList.tsx
+++ b/src/components/MultiHopTrade/components/QuoteList/QuoteList.tsx
@@ -1,6 +1,5 @@
 import type { CardProps } from '@chakra-ui/react'
 import { Card, CardBody, CardHeader, Heading } from '@chakra-ui/react'
-import { useMemo } from 'react'
 import { Text } from 'components/Text'
 
 import { TradeQuotes } from '../TradeInput/components/TradeQuotes/TradeQuotes'
@@ -9,20 +8,10 @@ import { WithBackButton } from '../WithBackButton'
 type QuoteListProps = {
   onBack?: () => void
   isLoading: boolean
-} & CardProps
-
-export const QuoteList: React.FC<QuoteListProps> = props => {
-  const { onBack, isLoading, cardProps } = useMemo(() => {
-    const { onBack, isLoading, ...cardProps } = props
-
-    return {
-      onBack,
-      isLoading,
-      cardProps,
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, Object.values(props))
+  cardProps?: CardProps
+}
 
+export const QuoteList: React.FC<QuoteListProps> = ({ onBack, isLoading, cardProps }) => {
   return (
     <Card {...cardProps}>
       <CardHeader px={6} pt={4}>
diff --git a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
index 534633b3f6d..71f8bbb285b 100644
--- a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
+++ b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
@@ -1,7 +1,7 @@
 import type { CardProps } from '@chakra-ui/react'
 import { Center, Flex, useMediaQuery } from '@chakra-ui/react'
 import type { FC } from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useHistory } from 'react-router'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
 import type { TradeRoutePaths } from 'components/MultiHopTrade/types'
@@ -12,7 +12,8 @@ import type { LimitOrderRoutePaths } from './LimitOrder/types'
 type SlideTransitionComponentProps = {
   onBack?: () => void
   isLoading: boolean
-} & CardProps
+  cardProps?: CardProps
+}
 
 type SlideTransitionRouteProps = {
   height: string | number
@@ -36,11 +37,19 @@ export const SlideTransitionRoute = ({
     history.push({ pathname: parentRoute })
   }, [history, parentRoute])
 
+  const cardProps: CardProps = useMemo(
+    () => ({
+      width,
+      height,
+    }),
+    [width, height],
+  )
+
   return (
     <TradeSlideTransition>
       <Flex width='full' justifyContent='center' maxWidth={isSmallerThanXl ? '500px' : undefined}>
         <Center width='inherit'>
-          <Component onBack={handleBack} isLoading={false} height={height} width={width} />
+          <Component onBack={handleBack} isLoading={false} cardProps={cardProps} />
         </Center>
       </Flex>
     </TradeSlideTransition>
diff --git a/src/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList.tsx b/src/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList.tsx
index 847b6c253ab..6fe970df5d6 100644
--- a/src/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList.tsx
+++ b/src/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList.tsx
@@ -1,4 +1,5 @@
 import type { CardProps } from '@chakra-ui/react'
+import { useMemo } from 'react'
 
 import { QuoteList } from '../../QuoteList/QuoteList'
 import { HorizontalCollapse } from './HorizontalCollapse'
@@ -18,9 +19,18 @@ export const CollapsibleQuoteList: React.FC<CollapsibleQuoteListProps> = ({
   isLoading,
   ml,
 }) => {
+  const cardProps: CardProps = useMemo(
+    () => ({
+      ml,
+      height,
+      width,
+    }),
+    [ml, height, width],
+  )
+
   return (
     <HorizontalCollapse isOpen={isOpen} width={width} height={height}>
-      <QuoteList ml={ml} isLoading={isLoading} height={height} />
+      <QuoteList cardProps={cardProps} isLoading={isLoading} />
     </HorizontalCollapse>
   )
 }

From f1264e0e89884de90082811ca562ece796e02243 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:26:34 +1100
Subject: [PATCH 6/8] fix: more style improvements

---
 .../components/LimitOrder/LimitOrderList.tsx  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index ebffed1bcfb..82246c569f4 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -69,19 +69,20 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
 
   return (
     <Card {...cardProps}>
-      <CardHeader px={0} pt={4} display='flex' flexDirection='column'>
-        <Flex width='full' alignItems='center' mb={4} position='relative' mx={4}>
-          <Box position='absolute' left={0}>
-            <WithBackButton onBack={onBack} />
-          </Box>
-          {onBack && (
+      {onBack && (
+        <CardHeader px={0} display='flex' flexDirection='column' pb={0}>
+          <Flex width='full' alignItems='center' mb={4} position='relative' mx={4}>
+            <Box position='absolute' left={0}>
+              <WithBackButton onBack={onBack} />
+            </Box>
             <Heading width='full' textAlign='center' fontSize='md'>
               <Text translation='limitOrders.orders' />
             </Heading>
-          )}
-        </Flex>
-      </CardHeader>
-      <Tabs variant='unstyled' display='flex' flexDirection='column' overflowY='auto'>
+          </Flex>
+        </CardHeader>
+      )}
+
+      <Tabs variant='unstyled' display='flex' flexDirection='column' overflowY='auto' mt={4}>
         <TabList gap={4} flex='0 0 auto' mb={2} ml={4}>
           <Tab
             p={0}

From c969ab08866e6b47718d4a7b71898bb23390f631 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Wed, 6 Nov 2024 09:41:04 +1100
Subject: [PATCH 7/8] chore: update imports

---
 .../MultiHopTrade/components/LimitOrder/LimitOrderList.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index 82246c569f4..57bf6dac738 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -13,7 +13,8 @@ import {
   Tabs,
 } from '@chakra-ui/react'
 import { foxAssetId } from '@shapeshiftoss/caip'
-import { type FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { usdcAssetId } from 'test/mocks/accounts'
 import { Text } from 'components/Text'
 

From 2299b23e8f81aeada33843d518e4aa4bfdfdf786 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:19:36 +1100
Subject: [PATCH 8/8] chore: remove relative position

---
 .../components/LimitOrder/LimitOrderList.tsx         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
index 57bf6dac738..2ab86205b4c 100644
--- a/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
+++ b/src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx
@@ -1,6 +1,5 @@
 import type { CardProps } from '@chakra-ui/react'
 import {
-  Box,
   Card,
   CardBody,
   CardHeader,
@@ -71,14 +70,15 @@ export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps, onBack }) =
   return (
     <Card {...cardProps}>
       {onBack && (
-        <CardHeader px={0} display='flex' flexDirection='column' pb={0}>
-          <Flex width='full' alignItems='center' mb={4} position='relative' mx={4}>
-            <Box position='absolute' left={0}>
+        <CardHeader px={4} display='flex' flexDirection='column' pb={0} width='100%'>
+          <Flex width='100%' alignItems='center'>
+            <Flex flex='1' justifyContent='flex-start'>
               <WithBackButton onBack={onBack} />
-            </Box>
-            <Heading width='full' textAlign='center' fontSize='md'>
+            </Flex>
+            <Heading flex='2' textAlign='center' fontSize='md'>
               <Text translation='limitOrders.orders' />
             </Heading>
+            <Flex flex='1' />
           </Flex>
         </CardHeader>
       )}