feat: add limit order view UI

src/assets/translations/en/main.json

@@ -2690,5 +2690,19 @@
       "noActiveProposals": "No active proposals available",
       "noClosedProposals": "No closed proposals available"
     }
+  },
+  "limitOrders": {
+    "listTitle": "Limit Orders",
+    "limitPrice": "Limit Price",
+    "expiresIn": "Expires In",
+    "filled": "Filled",
+    "openOrders": "Open Orders",
+    "orderHistory": "Order History",
+    "status": {
+      "open": "Open",
+      "filled": "Filled",
+      "cancelled": "Cancelled",
+      "expired": "Expired"
+    }
   }
 }

src/components/AssetHeader/WatchAssetButton.tsx

@@ -11,6 +11,10 @@ type WatchAssetButtonProps = Partial<BoxProps> & {
   assetId: AssetId
 }
 
+const hoverBgProps = {
+  bg: 'background.button.secondary.hover',
+}
+
 export const WatchAssetButton: React.FC<WatchAssetButtonProps> = ({ assetId, ...props }) => {
   const appDispatch = useAppDispatch()
   const isAssetIdWatched = useAppSelector(state => selectIsAssetIdWatched(state, assetId))
@@ -31,9 +35,8 @@ export const WatchAssetButton: React.FC<WatchAssetButtonProps> = ({ assetId, ...
       alignItems='center'
       minWidth='auto'
       borderRadius='full'
-      bg='var(--chakra-colors-background-button-secondary-base)'
-      // eslint-disable-next-line react-memo/require-usememo
-      _hover={{ bg: 'var(--chakra-colors-background-button-secondary-hover)' }}
+      bg='background.button.secondary.base'
+      _hover={hoverBgProps}
       p={2}
       ml={2}
       aria-label='favorite asset'

src/components/MultiHopTrade/components/LimitOrder/LimitOrder.tsx

@@ -44,7 +44,7 @@ export const LimitOrder = ({ isCompact, tradeInputRef, onChangeTab }: LimitOrder
   return (
     <MemoryRouter initialEntries={LimitOrderRouteEntries} initialIndex={0}>
       <Switch location={location}>
-        <Box flex={1} width='full' maxWidth='500px'>
+        <Box flex={1} width='full'>
           <Route
             key={LimitOrderRoutePaths.Input}
             path={LimitOrderRoutePaths.Input}

src/components/MultiHopTrade/components/LimitOrder/LimitOrderList.tsx

@@ -0,0 +1,103 @@
+import type { CardProps } from '@chakra-ui/react'
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from '@chakra-ui/react'
+import { foxAssetId } from '@shapeshiftoss/caip'
+import type { FC } from 'react'
+import { usdcAssetId } from 'test/mocks/accounts'
+import { Text } from 'components/Text'
+
+import { LimitOrderCard } from './components/LimitOrderCard'
+import { LimitOrderStatus } from './types'
+
+type LimitOrderListProps = {
+  isLoading: boolean
+  cardProps?: CardProps
+}
+
+const textColorBaseProps = {
+  color: 'text.base',
+}
+
+export const LimitOrderList: FC<LimitOrderListProps> = ({ cardProps }) => {
+  // FIXME: Use real data
+  const MockOpenOrderCard = () => (
+    <LimitOrderCard
+      id='1'
+      sellAmount={7000000}
+      buyAmount={159517.575}
+      buyAssetId={usdcAssetId}
+      sellAssetId={foxAssetId}
+      expiry={7}
+      filledDecimalPercentage={0.0888}
+      status={LimitOrderStatus.Open}
+    />
+  )
+
+  const MockHistoryOrderCard = () => (
+    <LimitOrderCard
+      id='2'
+      sellAmount={5000000}
+      buyAmount={120000.0}
+      buyAssetId={usdcAssetId}
+      sellAssetId={foxAssetId}
+      expiry={0}
+      filledDecimalPercentage={1.0}
+      status={LimitOrderStatus.Filled}
+    />
+  )
+
+  return (
+    <Card {...cardProps}>
+      <CardHeader px={6} pt={4}>
+        <Tabs variant='unstyled'>
+          <TabList gap={4}>
+            <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>
+            <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>
+      </CardHeader>
+    </Card>
+  )
+}

src/components/MultiHopTrade/components/LimitOrder/components/CollapsibleLimitOrderList.tsx

@@ -0,0 +1,35 @@
+import type { CardProps } from '@chakra-ui/react'
+import { useMemo } from 'react'
+
+import { HorizontalCollapse } from '../../TradeInput/components/HorizontalCollapse'
+import { LimitOrderList } from '../LimitOrderList'
+
+export type CollapsibleLimitOrderListProps = {
+  isOpen: boolean
+  width: string | number
+  height: string | number
+  isLoading: boolean
+  ml: CardProps['ml']
+}
+
+export const CollapsibleLimitOrderList: React.FC<CollapsibleLimitOrderListProps> = ({
+  isOpen,
+  width,
+  height,
+  isLoading,
+  ml,
+}) => {
+  const cardProps: CardProps = useMemo(
+    () => ({
+      ml,
+      height,
+    }),
+    [ml, height],
+  )
+
+  return (
+    <HorizontalCollapse isOpen={isOpen} width={width} height={height}>
+      <LimitOrderList isLoading={isLoading} cardProps={cardProps} />
+    </HorizontalCollapse>
+  )
+}

src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderCard.tsx

@@ -0,0 +1,161 @@
+import { Box, Button, Center, Flex, Progress, Tag } from '@chakra-ui/react'
+import type { AssetId } from '@shapeshiftoss/caip'
+import { ethAssetId } from '@shapeshiftoss/caip'
+import { type FC, useCallback, useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { Amount } from 'components/Amount/Amount'
+import { AssetIconWithBadge } from 'components/AssetIconWithBadge'
+import { SwapBoldIcon } from 'components/Icons/SwapBold'
+import { RawText, Text } from 'components/Text'
+import { selectAssetById } from 'state/slices/selectors'
+import { useAppSelector } from 'state/store'
+
+import { LimitOrderStatus } from '../types'
+
+export interface LimitOrderCardProps {
+  id: string
+  buyAmount: number
+  sellAmount: number
+  buyAssetId: AssetId
+  sellAssetId: AssetId
+  expiry: number
+  filledDecimalPercentage: number
+  status: LimitOrderStatus
+}
+
+const buttonBgHover = {
+  bg: 'background.button.secondary.hover',
+}
+
+export const LimitOrderCard: FC<LimitOrderCardProps> = ({
+  id,
+  buyAmount,
+  sellAmount,
+  buyAssetId,
+  sellAssetId,
+  expiry,
+  filledDecimalPercentage,
+  status,
+}) => {
+  const translate = useTranslate()
+
+  const buyAsset = useAppSelector(state => selectAssetById(state, buyAssetId))
+  const sellAsset = useAppSelector(state => selectAssetById(state, sellAssetId))
+
+  const handleCancel = useCallback(() => {
+    console.log(`Cancel limit order ${id}`)
+  }, [id])
+
+  const formattedPercentage = (filledDecimalPercentage * 100).toFixed(2)
+  const limitPrice = (buyAmount / sellAmount).toFixed(6)
+
+  const tagColorScheme = useMemo(() => {
+    switch (status) {
+      case LimitOrderStatus.Open:
+        return 'blue'
+      case LimitOrderStatus.Filled:
+        return 'green'
+      case LimitOrderStatus.Cancelled:
+        return 'red'
+      case LimitOrderStatus.Expired:
+        return 'yellow'
+      default:
+        return 'gray'
+    }
+  }, [status])
+
+  const barColorScheme = useMemo(() => {
+    switch (status) {
+      case LimitOrderStatus.Open:
+      case LimitOrderStatus.Filled:
+        return 'green'
+      case LimitOrderStatus.Cancelled:
+        return 'red'
+      case LimitOrderStatus.Expired:
+        return 'yellow'
+      default:
+        return 'gray'
+    }
+  }, [status])
+
+  if (!buyAsset || !sellAsset) return null
+
+  return (
+    <Box
+      key={id}
+      borderRadius='2xl'
+      p={4}
+      width='100%'
+      border='1px solid'
+      borderColor='whiteAlpha.100'
+      mb={4}
+    >
+      <Flex direction='column' gap={4}>
+        {/* Asset amounts row */}
+        <Flex justify='space-between' align='flex-start'>
+          <Flex>
+            <AssetIconWithBadge size='lg' assetId={ethAssetId}>
+              <Center borderRadius='full' boxSize='100%' bg='purple.500'>
+                <SwapBoldIcon boxSize='100%' />
+              </Center>
+            </AssetIconWithBadge>
+            <Flex direction='column' align='flex-start' ml={4}>
+              <Amount.Crypto
+                value={sellAmount.toString()}
+                symbol={sellAsset.symbol}
+                color='gray.500'
+                fontSize='xl'
+              />
+              <Amount.Crypto value={buyAmount.toString()} symbol={buyAsset.symbol} fontSize='xl' />
+            </Flex>
+          </Flex>
+          <Tag colorScheme={tagColorScheme}>{translate(`limitOrders.status.${status}`)}</Tag>
+        </Flex>
+
+        {/* Price row */}
+        <Flex justify='space-between' align='center'>
+          <Text color='gray.500' translation='limitOrders.limitPrice' />
+          <Flex justify='flex-end'>
+            <RawText mr={1}>{`1 ${sellAsset.symbol} =`}</RawText>
+            <Amount.Crypto value={limitPrice} symbol={buyAsset.symbol} />
+          </Flex>
+        </Flex>
+
+        {/* Expiry row */}
+        <Flex justify='space-between' align='center'>
+          <Text color='gray.500' translation='limitOrders.expiresIn' />
+          <RawText>{`${expiry} days`}</RawText>
+        </Flex>
+
+        {/* Filled row */}
+        <Flex justify='space-between' align='center'>
+          <Text color='gray.500' translation='limitOrders.filled' />
+          <Flex align='center' gap={4} width='60%'>
+            <Progress
+              value={filledDecimalPercentage * 100}
+              width='100%'
+              borderRadius='full'
+              colorScheme={barColorScheme}
+            />
+            <RawText>{`${formattedPercentage}%`}</RawText>
+          </Flex>
+        </Flex>
+
+        {/* Cancel button */}
+        {status === LimitOrderStatus.Open && (
+          <Button
+            colorScheme='red'
+            width='100%'
+            mt={2}
+            color='red.500'
+            onClick={handleCancel}
+            bg='background.button.secondary.base'
+            _hover={buttonBgHover}
+          >
+            <Text translation='common.cancel' />
+          </Button>
+        )}
+      </Flex>
+    </Box>
+  )
+}

src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx

@@ -30,6 +30,7 @@ import { SharedTradeInput } from '../../SharedTradeInput/SharedTradeInput'
 import { SharedTradeInputBody } from '../../SharedTradeInput/SharedTradeInputBody'
 import { SharedTradeInputFooter } from '../../SharedTradeInput/SharedTradeInputFooter/SharedTradeInputFooter'
 import { LimitOrderRoutePaths } from '../types'
+import { CollapsibleLimitOrderList } from './CollapsibleLimitOrderList'
 import { LimitOrderBuyAsset } from './LimitOrderBuyAsset'
 import { LimitOrderConfig } from './LimitOrderConfig'
 
@@ -41,9 +42,6 @@ type LimitOrderInputProps = {
   onChangeTab: (newTab: TradeInputTab) => void
 }
 
-// TODO: Implement me
-const CollapsibleLimitOrderList = () => <></>
-
 export const LimitOrderInput = ({
   isCompact,
   tradeInputRef,
@@ -276,7 +274,7 @@ export const LimitOrderInput = ({
       <SharedTradeInput
         bodyContent={bodyContent}
         footerContent={footerContent}
-        hasUserEnteredAmount={hasUserEnteredAmount}
+        shouldOpenSideComponent={true}
         headerRightContent={headerRightContent}
         isCompact={isCompact}
         isLoading={isLoading}

src/components/MultiHopTrade/components/LimitOrder/types.ts

@@ -3,3 +3,10 @@ export enum LimitOrderRoutePaths {
   Confirm = '/trade/limit-order/confirm',
   Status = '/trade/limit-order/status',
 }
+
+export enum LimitOrderStatus {
+  Open = 'open',
+  Filled = 'filled',
+  Cancelled = 'cancelled',
+  Expired = 'expired',
+}