chore

Author: neikop

apps/kyberswap-interface/src/components/LimitOrder/Form/MarketPrice.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/macro'
 import { useState } from 'react'
 import { Repeat } from 'react-feather'
 
-import { removeTrailingZero } from 'components/LimitOrder/utils'
 import Skeleton from 'components/Skeleton'
 import { HStack } from 'components/Stack'
 import { BaseTradeInfo } from 'hooks/useBaseTradeInfo'
+import { formatDisplayNumber } from 'utils/numbers'
 
 type MarketPriceProps = {
   price?: BaseTradeInfo
@@ -16,15 +16,9 @@ type MarketPriceProps = {
 
 const MarketPrice = ({ price, loading, symbolIn, symbolOut }: MarketPriceProps) => {
   const [showInverted, setShowInverted] = useState(false)
-  let formattedPrice
-
-  try {
-    if (price) {
-      formattedPrice = showInverted
-        ? removeTrailingZero(price.invertRate.toPrecision(6))
-        : removeTrailingZero(price.marketRate.toPrecision(6))
-    }
-  } catch (error) {}
+  const formattedPrice = price
+    ? formatDisplayNumber(showInverted ? price.invertRate : price.marketRate, { significantDigits: 6 })
+    : undefined
 
   const ready = Boolean(price?.marketRate && price?.invertRate && formattedPrice && !loading)
 

apps/kyberswap-interface/src/components/LimitOrder/components.tsx

@@ -15,22 +15,7 @@ const Label = ({ children, className, style, ...rest }: React.HTMLAttributes<HTM
   </div>
 )
 
-type SummaryRowType = { label: ReactNode; content: ReactNode }
-
-type OrderSummaryProps = {
-  title?: ReactNode
-  inputCurrency: ReactNode
-  outputCurrency: ReactNode
-  currencyIn?: Currency
-  currencyOut?: Currency
-  rateInfo?: RateInfo
-  order?: LimitOrder
-  expires?: ReactNode
-  marketRate?: ReactNode
-  className?: string
-}
-
-const SummaryRow = ({ label, content }: SummaryRowType) => (
+const SummaryRow = ({ label, content }: { label: ReactNode; content: ReactNode }) => (
   <HStack className="min-h-6 w-full items-center justify-between gap-3 max-sm:flex-col max-sm:items-start">
     <div className="text-sm text-subText">{label}</div>
     <HStack className="min-w-0 flex-1 justify-end text-right text-sm font-medium max-sm:justify-start max-sm:text-left">
@@ -46,17 +31,14 @@ const formatRateValue = (value?: string | number) => {
   return removeTrailingZero(numberValue.toPrecision(6))
 }
 
-const RateValue = ({
-  currencyIn,
-  currencyOut,
-  rateInfo,
-  order,
-}: {
+type RateValueProps = {
   currencyIn?: Currency
   currencyOut?: Currency
   rateInfo?: RateInfo
   order?: LimitOrder
-}) => {
+}
+
+const RateValue = ({ currencyIn, currencyOut, rateInfo, order }: RateValueProps) => {
   const [showInverted, setShowInverted] = useState(false)
 
   let baseSymbol: string | undefined
@@ -105,6 +87,19 @@ const RateValue = ({
   )
 }
 
+type OrderSummaryProps = {
+  title?: ReactNode
+  inputCurrency: ReactNode
+  outputCurrency: ReactNode
+  currencyIn?: Currency
+  currencyOut?: Currency
+  rateInfo?: RateInfo
+  order?: LimitOrder
+  expires?: ReactNode
+  marketRate?: ReactNode
+  className?: string
+}
+
 export const OrderSummary = ({
   title,
   inputCurrency,