Merge pull request #983 from miamisan/feat/improved-otc-trade-page

Feat/improved otc trade page

src/api/spotPrice.ts

@@ -59,7 +59,6 @@ export const getSpotPrice =
         spotPrice = res.amount.div(BN_10.pow(res.decimals))
       }
     } catch (e) {}
-
     return { tokenIn, tokenOut, spotPrice }
   }
 

src/components/Button/Button.styled.ts

@@ -166,6 +166,26 @@ const variantStyles: Record<ButtonVariant, SerializedStyles> = {
       border: 1px solid ${theme.colors.brightBlue100};
     }
   `,
+  mutedSecondary: css`
+    font-weight: 500;
+    border-radius: 4px;
+    background: rgba(${theme.rgbColors.primaryA15}, 0.12);
+    color: ${theme.colors.brightBlue300};
+    border: 1px solid rgba(${theme.rgbColors.brightBlue300}, 0.4);
+    box-shadow: unset;
+
+    :hover {
+      color: ${theme.colors.white};
+      background: rgba(${theme.rgbColors.primaryA15}, 0.24);
+      border: 1px solid rgba(${theme.rgbColors.brightBlue300}, 0.8);
+    }
+
+    :active {
+      background: ${theme.colors.brightBlue400};
+      color: ${theme.colors.white};
+      border: 1px solid ${theme.colors.brightBlue100};
+    }
+  `,
   error: css`
     border-radius: 4px;
     background: rgba(${theme.rgbColors.red100}, 0.25);
@@ -185,6 +205,26 @@ const variantStyles: Record<ButtonVariant, SerializedStyles> = {
       border: 1px solid ${theme.colors.red400};
     }
   `,
+  mutedError: css`
+    font-weight: 500;
+    border-radius: 4px;
+    background: rgba(${theme.rgbColors.red100}, 0.2);
+    color: ${theme.colors.red400};
+    border: 1px solid rgba(${theme.rgbColors.red400}, 0.5);
+    box-shadow: unset;
+
+    :hover {
+      color: ${theme.colors.white};
+      background: rgba(${theme.rgbColors.red100}, 0.4);
+      border: 1px solid rgba(${theme.rgbColors.red400}, 0.8);
+    }
+
+    :active {
+      background: ${theme.colors.red100};
+      color: ${theme.colors.white};
+      border: 1px solid ${theme.colors.red400};
+    }
+  `,
   gradient: css`
     background: ${theme.gradients.pinkLightPink};
     color: ${theme.colors.white};
@@ -317,6 +357,11 @@ const sizeStyles: Record<ButtonSize, SerializedStyles> = {
     font-size: 12px;
     line-height: 12px;
   `,
+  compact: css`
+    padding: 6px 12px;
+    font-size: 12px;
+    line-height: 16px;
+  `,
   micro: css`
     padding: 2px 10px;
     font-size: 12px;

src/components/Button/Button.tsx

@@ -5,13 +5,15 @@ import { SButton, SButtonTransparent, SContent } from "./Button.styled"
 export type ButtonVariant =
   | "primary"
   | "secondary"
+  | "mutedSecondary"
   | "error"
+  | "mutedError"
   | "gradient"
   | "outline"
   | "transparent"
   | "blue"
   | "green"
-export type ButtonSize = "small" | "medium" | "micro"
+export type ButtonSize = "small" | "medium" | "compact" | "micro"
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: ButtonVariant

src/components/Table/EmptyState.tsx

@@ -18,16 +18,18 @@ export const EmptyState = ({
   navigateTo,
   btnText,
   desc,
+  colSpan,
 }: {
   navigateTo?: string
   btnText?: string
   desc: ReactNode
+  colSpan?: number
 }) => {
   const navigate = useNavigate()
 
   return (
     <tr sx={{ height: 250 }}>
-      <td colSpan={4}>
+      <td colSpan={colSpan || 4}>
         <SEmptyState>
           {desc}
           {navigateTo && btnText && (

src/components/Table/Table.styled.ts

@@ -3,7 +3,7 @@ import styled from "@emotion/styled"
 import { theme } from "theme"
 
 export const TableContainer = styled.div`
-  background: #111320;
+  background: ${theme.colors.darkBlue700};
   overflow: hidden;
   position: relative;
 

src/components/Table/Table.tsx

@@ -18,17 +18,16 @@ export const TableAction = (props: TableActionProps) => {
       {...props}
       isLoading={props.isLoading}
       disabled={props.disabled}
-      size="small"
+      size="compact"
       variant={props.variant}
-      sx={{ p: "9px 12px" }}
-      css={{
-        whiteSpace: "nowrap",
-      }}
       onClick={(e) => {
         e.stopPropagation()
         e.preventDefault()
         props.onClick?.()
       }}
+      css={{
+        whiteSpace: "nowrap",
+      }}
     >
       {props.icon && <Icon size={16} icon={props.icon} />}
       {props.children}

src/components/Table/TableSkeleton.tsx

@@ -54,7 +54,7 @@ export const TableSkeleton = ({
           {!hideHeader && (
             <TableHeaderContent>
               {table.getHeaderGroups().map((hg) => (
-                <TableRow key={hg.id}>
+                <TableRow key={hg.id} header>
                   {hg.headers.map((header) => (
                     <TableSortHeader
                       key={header.id}

src/i18n/locales/en/translations.json

@@ -300,10 +300,13 @@
   "liquidity.pool.positions.farming": "Locked in farms",
   "otc.header.title": "Over-the-Counter Trading",
   "otc.header.titleAlt": "OTC Trading",
-  "otc.header.switch": "Show my orders",
+  "otc.header.search": "Search Orders",
+  "otc.header.myOrders": "My orders",
+  "otc.header.all": "All",
+  "otc.header.partiallyFillable": "Partially Fillable",
   "otc.header.totalValue": "Value in OTC",
-  "otc.header.placeOrder": "Place an order",
-  "otc.order.place.title": "New order",
+  "otc.header.placeOrder": "Place order",
+  "otc.order.place.title": "Place Order",
   "otc.order.place.desc": "Enter the assets and amounts of your order.",
   "otc.order.place.offerTitle": "Offer",
   "otc.order.place.getTitle": "You get",
@@ -312,8 +315,9 @@
   "otc.order.place.partialDesc": "Allow users to fill the order in parts smaller than the full amount.",
   "otc.order.place.fee": "Order fees",
   "otc.order.place.feeValue": "≈ {{ amount, bignumber }} {{ symbol }}",
-  "otc.order.place.confirm": "Place order",
+  "otc.order.place.confirm": "Create New Order",
   "otc.order.place.validation.notEnoughBalance": "Insufficient balance.",
+  "otc.order.place.validation.sameAssets": "Cannot place order for the same asset.",
   "otc.order.place.toast.onLoading": "<0>Placing an OTC order for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
   "otc.order.place.toast.onSuccess": "<0>OTC order placed for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
   "otc.order.fill.title": "Fill order",
@@ -326,17 +330,21 @@
   "otc.order.fill.validation.orderTooBig": "The amount exceeds the size of the order.",
   "otc.order.fill.toast.onLoading": "<0>Filling an OTC order for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
   "otc.order.fill.toast.onSuccess": "<0>OTC order filled for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
+  "otc.order.partialFill.title": "Partial Fill Order",
+  "otc.order.partialFill.confirm": "Partial Fill Order",
   "otc.order.cancel.title": "Cancel OTC order?",
   "otc.order.cancel.recap": "You've sold {{ sold, bignumber }} {{ symbol }} of {{ total, bignumber }} {{ symbol }}",
   "otc.order.cancel.confirm": "Cancel order",
   "otc.order.cancel.toast.onLoading": "<0>Cancelling an OTC order for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
   "otc.order.cancel.toast.onSuccess": "<0>OTC order cancelled for </0><1>{{ amount, bignumber }} {{ symbol }}</1>.",
   "otc.order.capacity": "{{ filled, compact }}%",
   "otc.order.remaining": "{{ filled, bignumber }} / {{ initial, bignumber }} {{ symbol }}",
-  "otc.offers.table.header.offering": "Offering",
+  "otc.orders.noOrders": "You don't have any active orders.",
+  "otc.offers.table.header.offer": "Offer",
   "otc.offers.table.header.accepting": "Accepting",
   "otc.offers.table.header.assets": "Assets",
-  "otc.offers.table.header.price": "Price",
+  "otc.offers.table.header.orderPrice": "Order Price",
+  "otc.offers.table.header.marketPrice": "Market Price",
   "otc.offers.table.header.status": "Order status",
   "otc.offers.table.actions.fill": "Fill order",
   "otc.offers.table.actions.cancel": "Cancel order",

src/sections/trade/sections/otc/OtcPage.tsx

@@ -1,13 +1,13 @@
 import { OtcHeader } from "sections/trade/sections/otc/header/OtcHeader"
 import { OtcOrderTable } from "sections/trade/sections/otc/orders/OtcOrders"
-
 import { useState } from "react"
 import { useOrdersTableData } from "./orders/OtcOrdersData.utils"
 
 export const OtcPage = () => {
   const [filter, setFilter] = useState({
     showMyOrders: false,
     showPartial: false,
+    searchVal: "",
   })
   const order = useOrdersTableData()
 
@@ -16,6 +16,7 @@ export const OtcPage = () => {
       <OtcHeader
         showMyOrders={filter.showMyOrders}
         showPartial={filter.showPartial}
+        searchVal={filter.searchVal}
         onShowMyOrdersChange={(value) =>
           setFilter((prev) => ({
             ...prev,
@@ -28,11 +29,18 @@ export const OtcPage = () => {
             showPartial: value,
           }))
         }
+        onSearchChange={(value) =>
+          setFilter((prev) => ({
+            ...prev,
+            searchVal: value,
+          }))
+        }
       />
       <OtcOrderTable
         data={order.data}
         showMyOrders={filter.showMyOrders}
         showPartial={filter.showPartial}
+        searchVal={filter.searchVal}
       />
     </>
   )

src/sections/trade/sections/otc/capacity/OrderCapacity.styled.ts

@@ -4,12 +4,12 @@ import { theme } from "theme"
 export const SContainer = styled.div<{ modal: boolean }>`
   font-family: "ChakraPetch";
   background: rgba(10, 12, 22, 0.69);
-
   position: relative;
   text-align: center;
-  margin: ${(p) => (p.modal ? "0 0 20px" : "0")};
   width: 100%;
 
+  padding: ${(p) => (p.modal ? "20px 0" : "20px 10px")};
+
   @media ${theme.viewport.gte.sm} {
     background: inherit;
   }
@@ -19,13 +19,13 @@ export const SBarContainer = styled.div<{ modal: boolean }>`
   position: relative;
   width: 100%;
   height: ${(p) => (p.modal ? "11px" : "7px")};
-  border-radius: 2px;
+  border-radius: 5px;
   background-color: rgba(84, 99, 128, 0.35);
 `
 
 export const SBar = styled.div<{ filled: string }>`
   height: 100%;
-  border-radius: 2px;
+  border-radius: 5px;
   width: ${(p) => p.filled}%;
   -webkit-mask: linear-gradient(#fff 0 0);
   mask: linear-gradient(#fff 0 0);

src/sections/trade/sections/otc/capacity/OrderCapacity.tsx

@@ -1,5 +1,4 @@
 import { SBar, SBarContainer, SContainer } from "./OrderCapacity.styled"
-import { useTranslation } from "react-i18next"
 import { Text } from "components/Typography/Text/Text"
 import BigNumber from "bignumber.js"
 
@@ -10,7 +9,6 @@ export const OrderCapacity = (props: {
   modal?: boolean
   roundingMode?: BigNumber.RoundingMode
 }) => {
-  const { t } = useTranslation()
   const { modal = false, roundingMode = 1 } = props
 
   const filled = props.total.minus(props.free)
@@ -21,31 +19,20 @@ export const OrderCapacity = (props: {
 
   return (
     <SContainer modal={modal}>
-      <div sx={{ flex: "row-reverse", align: "center" }}>
+      <div sx={{ flex: "row", align: "center" }}>
+        <SBarContainer modal={modal}>
+          <SBar filled={filledPct.toFixed()} />
+        </SBarContainer>
         <Text
-          fs={modal ? 13 : 11}
+          fs={modal ? 13 : 12}
           fw={500}
-          sx={{ ml: 5, width: 25 }}
           color="brightBlue100"
           as="span"
+          sx={{ ml: 10 }}
         >
-          {t("otc.order.capacity", { filled: filledPct })}
+          {filledPct.toFixed(0)}%
         </Text>
-        <SBarContainer modal={modal}>
-          <SBar filled={filledPct.toFixed()} />
-        </SBarContainer>
       </div>
-      {!modal && (
-        <div>
-          <Text fs={12} fw={500} color="basic400" as="span">
-            {t("otc.order.remaining", {
-              filled: props.total.minus(props.free),
-              initial: props.total,
-              symbol: props.symbol,
-            })}
-          </Text>
-        </div>
-      )}
     </SContainer>
   )
 }