Merge pull request #543 from oraichain/hotfix/coharvest

hotfix style and check volume chart
oraidex · Jan 12, 2024 · 33d18c4 · 33d18c4
2 parents ee60c8e + 6a87a81
commit 33d18c4
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 15 deletions.
diff --git a/src/pages/CoHarvest/components/Bidding/index.tsx b/src/pages/CoHarvest/components/Bidding/index.tsx
@@ -80,6 +80,8 @@ const Bidding = ({ isEnd, round, isStarted }: { isEnd: boolean; round: number; i
 
   const potentialReturnUSD = new BigDecimal(returnAmountUsd).add(residueBidAmountUsd).toNumber();
 
+  const insufficientFund = amount && amount > toDisplay(balance);
+
   return (
     <div className={styles.bidding}>
       <div className={styles.title}>Co-Harvest #{round}</div>
@@ -157,9 +159,10 @@ const Bidding = ({ isEnd, round, isStarted }: { isEnd: boolean; round: number; i
             }
           }}
           icon={null}
-          disabled={!isStarted || isEnd || loading || !amount} // || !Number(estimateReceive)
+          disabled={!isStarted || isEnd || loading || !amount || insufficientFund} // || !Number(estimateReceive)
         >
-          {loading && <Loader width={22} height={22} />}&nbsp;Place a bid
+          {loading && <Loader width={22} height={22} />}&nbsp;
+          {insufficientFund ? 'Insufficient Funds' : 'Place a bid'}
         </Button>
       </div>
     </div>

diff --git a/src/pages/CoHarvest/components/BiddingChart/index.module.scss b/src/pages/CoHarvest/components/BiddingChart/index.module.scss
@@ -27,6 +27,10 @@
     font-weight: 600;
     line-height: 150%; /* 27px */
 
+    @include mobile {
+      font-size: 14px;
+    }
+
     .titleLeft {
       flex: 1;
       display: flex;
@@ -59,8 +63,9 @@
         align-items: center;
 
         @include mobile {
-          font-size: 16px;
+          font-size: 13px;
         }
+
         .usd {
           @include theme {
             color: theme-get('sea-stone-200');
@@ -69,6 +74,10 @@
           font-size: 18px;
           font-weight: 600;
           line-height: 150%;
+
+          @include mobile {
+            font-size: 13px;
+          }
         }
       }
     }

diff --git a/src/pages/CoHarvest/components/BiddingChart/index.tsx b/src/pages/CoHarvest/components/BiddingChart/index.tsx
@@ -8,6 +8,7 @@ import { memo, useState } from 'react';
 import ChartColumn from '../ChartColumn';
 import { TooltipIconBtn } from '../Tooltip';
 import styles from './index.module.scss';
+import { formatNumberKMB } from 'pages/CoHarvest/helpers';
 
 const BiddingChart = (props: { round: number; bidInfo }) => {
   const { round, bidInfo } = props;
@@ -56,7 +57,7 @@ const BiddingChart = (props: { round: number; bidInfo }) => {
               key={key}
               data={{
                 percent: e.percentage,
-                volume: getUsd(e.total_bid_amount, ORAIX_TOKEN_INFO, prices),
+                volume: formatNumberKMB(getUsd(e.total_bid_amount, ORAIX_TOKEN_INFO, prices)),
                 interest: e.slot
               }}
             />

diff --git a/src/pages/CoHarvest/components/ChartColumn/index.module.scss b/src/pages/CoHarvest/components/ChartColumn/index.module.scss
@@ -18,7 +18,7 @@
     letter-spacing: 0.013px;
     writing-mode: vertical-lr;
 
-    height: 50px;
+    height: 60px;
   }
 
   .percentWrapper {

diff --git a/src/pages/CoHarvest/components/ChartColumn/index.tsx b/src/pages/CoHarvest/components/ChartColumn/index.tsx
@@ -11,7 +11,7 @@ const ChartColumn = ({ data }: { data: ChartColumnType }) => {
   const { percent, volume, interest } = data;
   return (
     <div className={styles.chartColumn}>
-      <div className={styles.volume}>{formatDisplayUsdt(volume, 3)}</div>
+      <div className={styles.volume}>{volume}</div>
       <div className={styles.percentWrapper}>
         <div className={styles.percent} style={{ height: `${percent}%` }}></div>
       </div>

diff --git a/src/pages/CoHarvest/components/InputBalance/index.tsx b/src/pages/CoHarvest/components/InputBalance/index.tsx
@@ -19,15 +19,7 @@ const InputBalance = ({ amount, onChangeAmount, disable = false, balance }: Inpu
   return (
     <div className={styles.inputBalance}>
       <div className={styles.title}>
-        Balance:{' '}
-        <TokenBalance
-          balance={{
-            amount: balance,
-            denom: 'ORAIX',
-            decimals: 6
-          }}
-          className={styles.token}
-        />
+        Balance: <span className={styles.token}>{toDisplay(balance)} ORAIX</span>
       </div>
       <div className={styles.input}>
         <NumberFormat

diff --git a/src/pages/CoHarvest/helpers/index.ts b/src/pages/CoHarvest/helpers/index.ts
@@ -1,3 +1,4 @@
+import { formatDisplayUsdt } from 'pages/Pools/helpers';
 import { MONTHS_ARR, TIMER } from '../constants';
 
 export const formatCountdownTime = (milliseconds: number) => {
@@ -127,3 +128,18 @@ export const getUTCTime = (date: Date | number) => {
 
   return `${utcHours}:${utcMinutes}:${utcSeconds}`;
 };
+
+export const formatNumberKMB = (num: number) => {
+  if (num >= 1e9) {
+    return '$' + (num / 1e9).toFixed(2) + 'B';
+  }
+
+  if (num >= 1e6) {
+    return '$' + (num / 1e6).toFixed(2) + 'M';
+  }
+
+  if (num >= 1e3) {
+    return '$' + (num / 1e3).toFixed(2) + 'K';
+  }
+  return formatDisplayUsdt(num, 2);
+};
diff --git a/src/tests/coharvest.spec.ts b/src/tests/coharvest.spec.ts
@@ -0,0 +1,17 @@
+import { formatNumberKMB } from 'pages/CoHarvest/helpers';
+
+describe('Co Harvest', () => {
+  it.each([
+    [0.001234, '$0.0012'],
+    [2, '$2'],
+    [2.1, '$2.1'],
+    [2.129, '$2.13'],
+    [1000, '$1.00K'],
+    [1239.567, '$1.24K'],
+    [999999.99999, '$1000.00K'],
+    [1231567, '$1.23M'],
+    [1234567891.111, '$1.23B']
+  ])('test formatNumberKMB should formats %s to %s', (input, expected) => {
+    expect(formatNumberKMB(input)).toBe(expected);
+  });
+});