diff --git a/src/pages/CoHarvest/components/Bidding/index.tsx b/src/pages/CoHarvest/components/Bidding/index.tsx index 98b5cb523..cc44c83c9 100644 --- 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 (
Co-Harvest #{round}
@@ -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 && } Place a bid + {loading && }  + {insufficientFund ? 'Insufficient Funds' : 'Place a bid'}
diff --git a/src/pages/CoHarvest/components/BiddingChart/index.module.scss b/src/pages/CoHarvest/components/BiddingChart/index.module.scss index daced9aed..a19700981 100644 --- 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 index b90819af0..2bba2b2b9 100644 --- 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 index db59ace2a..b8c2b7f23 100644 --- 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 index b49cc0f88..a96c075ca 100644 --- 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 (
-
{formatDisplayUsdt(volume, 3)}
+
{volume}
diff --git a/src/pages/CoHarvest/components/InputBalance/index.tsx b/src/pages/CoHarvest/components/InputBalance/index.tsx index d3822571d..3451d7153 100644 --- 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 (
- Balance:{' '} - + Balance: {toDisplay(balance)} ORAIX
{ @@ -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 new file mode 100644 index 000000000..4f1f6d6ba --- /dev/null +++ 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); + }); +});