chore: fix some issue

rango-exchange · Dec 18, 2023 · d53f73b · d53f73b
1 parent 1e46939
commit d53f73b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 23 deletions.
diff --git a/components/common/IconStatus/index.tsx b/components/common/IconStatus/index.tsx
@@ -8,7 +8,12 @@ function IconStatus(props: PropsType) {
 
   return (
     <>
-      <StatusIcon size="1.25rem" className={`${hasTitle ? 'mr-5' : ''}`} />
+      <StatusIcon
+        size="1.25rem"
+        className={`${title === 'Running' ? 'animate-spin' : ''} ${
+          hasTitle ? 'mr-5' : ''
+        }`}
+      />
       {hasTitle && <div className={`text-14 md:text-16 ${color}`}>{title}</div>}
     </>
   );

diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx
@@ -13,7 +13,6 @@ function TokenCell(props: CellProps) {
     column.tokenType === 'destination'
       ? lastStep?.toToken
       : firstStep?.fromToken;
-  const amount = token?.realAmount ? token.realAmount : token?.expectedAmount;
 
   const { blockchain, blockchainLogo, logo, name, symbol } = token || {};
 
@@ -41,19 +40,15 @@ function TokenCell(props: CellProps) {
           <div className="text-14 leading-14 md:leading-16 md:text-16 flex items-center">
             <span
               className={`mr-5 ${
-                column.tokenType === 'source'
-                  ? 'text-primary-500'
-                  : 'text-neutral-400'
+                token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
               }`}>
-              {`${column.tokenType === 'destination' ? '~' : ''}${parseFloat(
-                Number(amount).toFixed(3),
+              {`${!token?.realAmount ? '~' : ''}${parseFloat(
+                Number(token?.realAmount || token?.expectedAmount).toFixed(3),
               )}`}
             </span>
             <span
               className={`${
-                column.tokenType === 'source'
-                  ? 'text-primary-500'
-                  : 'text-neutral-400'
+                token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
               }`}>
               {symbol || name}
             </span>

diff --git a/components/common/Table/index.tsx b/components/common/Table/index.tsx
@@ -4,6 +4,7 @@ import TableBody from './TableBody';
 
 function Table(props: TableProps) {
   const { data } = props;
+
   return (
     <div className="w-full">
       <TableHead />

diff --git a/components/home/ChartBox/Chart.tsx b/components/home/ChartBox/Chart.tsx
@@ -7,7 +7,6 @@ import {
   Tooltip,
 } from '@visx/xychart';
 import { customTheme, daysFilter, getDayOfMonth } from './Chart.helper';
-import dayjs from 'dayjs';
 import { CustomTick } from './CustomTick';
 import { ChartProps } from './Chart.type';
 import isMobile from 'is-mobile';
@@ -97,20 +96,16 @@ const Chart = (props: ChartProps) => {
         <Tooltip
           snapTooltipToDatumX
           snapTooltipToDatumY
-          showVerticalCrosshair
+          showDatumGlyph
+          applyPositionStyle={true}
+          style={{
+            background: 'transparent',
+          }}
+          unstyled={false}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           renderTooltip={({ tooltipData }: any) => (
-            <div className="text-12">
-              <div className="mb-1">Swaps</div>
-
-              <div className="mb-1">
-                {dayjs(
-                  tooltipData.nearestDatum.datum.date.split('T')[0],
-                ).format('dddd, YYYY MMMM DD')}
-              </div>
-              <div className="mb-1">
-                Count: {tooltipData.nearestDatum.datum.count}
-              </div>
+            <div className="bg-tooltipBackground px-[8px] py-[4px] rounded-[8px] text-baseForeground text-12">
+              {tooltipData.nearestDatum.datum.count}
             </div>
           )}
         />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -117,6 +117,7 @@ module.exports = {
         backgroundRunning: '#C8E2FF',
         failed: '#FF3B3B',
         backgroundFailed: '#FFD7D7',
+        tooltipBackground: '#2B3462',
 
         primary: {
           500: '#010101',