From 18a51b850b52f034719226f8dcebde9c0bc91865 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 20 Oct 2021 12:01:41 -0300
Subject: [PATCH] Fix space between td, change amount precision

---
 .../common/TextWithTooltip/index.tsx           | 11 +++++++++--
 src/apps/explorer/const.ts                     |  2 +-
 .../orders/OrdersUserDetailsTable/index.tsx    | 17 +++++------------
 src/utils/format.ts                            | 18 +++++++++++++-----
 src/utils/operator.ts                          | 11 ++++++-----
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/apps/explorer/components/common/TextWithTooltip/index.tsx b/src/apps/explorer/components/common/TextWithTooltip/index.tsx
index 30664005f..2f5265d87 100644
--- a/src/apps/explorer/components/common/TextWithTooltip/index.tsx
+++ b/src/apps/explorer/components/common/TextWithTooltip/index.tsx
@@ -1,9 +1,16 @@
 import React from 'react'
 import { Placement } from '@popperjs/core'
+import styled from 'styled-components'
 
 import { Tooltip } from 'components/Tooltip'
 import { usePopperDefault } from 'hooks/usePopper'
 
+const Wrapper = styled.span`
+  > p {
+    margin: 0;
+  }
+`
+
 interface TextTooltipProps {
   children: React.ReactNode
   textInTooltip: string
@@ -17,9 +24,9 @@ export const TextWithTooltip: React.FC<TextTooltipProps> = ({
 }): JSX.Element => {
   const { tooltipProps, targetProps } = usePopperDefault<HTMLInputElement>(tooltipPlacement)
   return (
-    <span className="wrap-text-tooltip">
+    <Wrapper>
       <Tooltip {...tooltipProps}>{textInTooltip}</Tooltip>
       <p {...targetProps}>{children}</p>
-    </span>
+    </Wrapper>
   )
 }
diff --git a/src/apps/explorer/const.ts b/src/apps/explorer/const.ts
index 5a3da8c69..ed0ee67d4 100644
--- a/src/apps/explorer/const.ts
+++ b/src/apps/explorer/const.ts
@@ -9,7 +9,7 @@ export const DISPLAY_TEXT_COPIED_CHECK = 1000 // in ms
 
 // formatSmart related constants
 export const LOW_PRECISION_DECIMALS = 2 // display stuff with up to 2 digits: 123.432452 => 123.43
-export const DEFAULT_PRECISION_DECIMALS = 4 // display stuff with up to 4 digits: 0.8319079051029 => 0.8319
+export const MIDDLE_PRECISION_DECIMALS = 4 // display stuff with up to 4 digits: 0.8319079051029 => 0.8319
 export const HIGH_PRECISION_DECIMALS = 8 // display stuff with up to 8 digits: 0.8319079051029 => 0.83190790
 export const HIGH_PRECISION_SMALL_LIMIT = '0.00000001' // what is considered too small. See https://github.com/gnosis/dex-js/blob/master/src/utils/format.ts#L78-L80
 export const PERCENTAGE_PRECISION = -2 // assumes 100% === 1; 1/10^-2 => 100
diff --git a/src/components/orders/OrdersUserDetailsTable/index.tsx b/src/components/orders/OrdersUserDetailsTable/index.tsx
index eb9796bfa..7747b70e9 100644
--- a/src/components/orders/OrdersUserDetailsTable/index.tsx
+++ b/src/components/orders/OrdersUserDetailsTable/index.tsx
@@ -154,25 +154,18 @@ const RowOrder: React.FC<RowProps> = ({ order, isPriceInverted }) => {
         <HeaderTitle>Sell Amount</HeaderTitle>
         <HeaderValue>
           <TextWithTooltip
-            textInTooltip={`${formattedAmount(
-              sellToken,
-              sellAmount.plus(order.feeAmount),
-              FormatAmountPrecision.highPrecision,
-            )} ${sellToken?.symbol}`}
+            textInTooltip={`${formattedAmount(sellToken, sellAmount.plus(order.feeAmount))} ${sellToken?.symbol}`}
           >
-            {formattedAmount(sellToken, sellAmount.plus(order.feeAmount))} {sellToken?.symbol}
+            {formattedAmount(sellToken, sellAmount.plus(order.feeAmount), FormatAmountPrecision.highPrecision)}{' '}
+            {sellToken?.symbol}
           </TextWithTooltip>
         </HeaderValue>
       </td>
       <td>
         <HeaderTitle>Buy amount</HeaderTitle>
         <HeaderValue>
-          <TextWithTooltip
-            textInTooltip={`${formattedAmount(buyToken, buyAmount, FormatAmountPrecision.highPrecision)} ${
-              buyToken?.symbol
-            }`}
-          >
-            {formattedAmount(buyToken, buyAmount)} {buyToken?.symbol}
+          <TextWithTooltip textInTooltip={`${formattedAmount(buyToken, buyAmount)} ${buyToken?.symbol}`}>
+            {formattedAmount(buyToken, buyAmount, FormatAmountPrecision.highPrecision)} {buyToken?.symbol}
           </TextWithTooltip>
         </HeaderValue>
       </td>
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 089d95aae..af7e548c5 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -11,12 +11,12 @@ import {
   MINIMUM_ATOM_VALUE,
 } from 'const'
 import {
-  DEFAULT_PRECISION_DECIMALS,
+  MIDDLE_PRECISION_DECIMALS,
   HIGH_PRECISION_DECIMALS,
   HIGH_PRECISION_SMALL_LIMIT,
   NO_ADJUSTMENT_NEEDED_PRECISION,
 } from 'apps/explorer/const'
-import { batchIdToDate } from './time'
+import { FormatAmountPrecision, batchIdToDate } from 'utils'
 
 export {
   formatSmart,
@@ -306,11 +306,19 @@ export function formatExecutedPriceToDisplay(
  * @param amount BigNumber integer amount
  * @param token Erc20 token
  */
-export function defaultAmountFormatPrecision(amount: BigNumber, token: TokenErc20 | null): string {
+export function formattingAmountPrecision(
+  amount: BigNumber,
+  token: TokenErc20 | null,
+  typePrecision: FormatAmountPrecision,
+): string {
+  const typeFormatPrecision = {
+    [FormatAmountPrecision.highPrecision]: HIGH_PRECISION_DECIMALS,
+    [FormatAmountPrecision.middlePrecision]: MIDDLE_PRECISION_DECIMALS,
+  }
   return formatSmart({
     amount: amount.toString(10),
     precision: token?.decimals || 0,
-    decimals: DEFAULT_PRECISION_DECIMALS,
-    smallLimit: getMinimumRepresentableValue(DEFAULT_PRECISION_DECIMALS),
+    decimals: typeFormatPrecision[typePrecision],
+    smallLimit: getMinimumRepresentableValue(typeFormatPrecision[typePrecision]),
   })
 }
diff --git a/src/utils/operator.ts b/src/utils/operator.ts
index 5cf64fa26..e81ffeba3 100644
--- a/src/utils/operator.ts
+++ b/src/utils/operator.ts
@@ -7,7 +7,7 @@ import { FILLED_ORDER_EPSILON, ONE_BIG_NUMBER, ZERO_BIG_NUMBER } from 'const'
 
 import { Order, OrderStatus, RawOrder, RawTrade, Trade } from 'api/operator/types'
 
-import { defaultAmountFormatPrecision, formatSmartMaxPrecision } from './format'
+import { formattingAmountPrecision, formatSmartMaxPrecision } from 'utils'
 
 function isOrderFilled(order: RawOrder): boolean {
   let amount, executedAmount
@@ -242,22 +242,23 @@ export function isTokenErc20(token: TokenErc20 | null | undefined): token is Tok
 }
 
 export enum FormatAmountPrecision {
-  defaultPrecision,
+  middlePrecision,
   highPrecision,
+  maxPrecision,
 }
 
 export function formattedAmount(
   erc20: TokenErc20 | null | undefined,
   amount: BigNumber,
-  typePrecision: FormatAmountPrecision = FormatAmountPrecision.defaultPrecision,
+  typePrecision: FormatAmountPrecision = FormatAmountPrecision.maxPrecision,
 ): string {
   if (!isTokenErc20(erc20)) return '-'
 
   if (!erc20.decimals) return amount.toString(10)
 
-  return typePrecision === FormatAmountPrecision.highPrecision
+  return typePrecision === FormatAmountPrecision.maxPrecision
     ? formatSmartMaxPrecision(amount, erc20)
-    : defaultAmountFormatPrecision(amount, erc20)
+    : formattingAmountPrecision(amount, erc20, typePrecision)
 }
 
 function getReceiverAddress({ owner, receiver }: RawOrder): string {