From 74a3aa8566c173c1d8bc779f9be60330a280062d Mon Sep 17 00:00:00 2001 From: Ciaran McGhie Date: Wed, 22 Mar 2023 11:33:46 +0000 Subject: [PATCH] refactor(ui-toolkit): move healthbar to ui-toolkit (#3121) --- .../dashboard/market-list/market-list.tsx | 5 +- .../app/components/detail/market/market.tsx | 6 +- .../app/components/health-bar/health-bar.tsx | 213 ------------------ .../src/app/components/health-bar/index.tsx | 1 - .../health-dialog/health-dialog.tsx | 7 +- .../src/app/lib/utils.tsx | 13 ++ .../src/components/healthbar/healthbar.tsx | 203 +++++++++++++++++ .../src/components/healthbar/index.ts | 1 + libs/ui-toolkit/src/components/index.ts | 1 + 9 files changed, 227 insertions(+), 223 deletions(-) delete mode 100644 apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx delete mode 100644 apps/liquidity-provision-dashboard/src/app/components/health-bar/index.tsx create mode 100644 libs/ui-toolkit/src/components/healthbar/healthbar.tsx create mode 100644 libs/ui-toolkit/src/components/healthbar/index.ts diff --git a/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx b/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx index 06924c615..4a413dcf4 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx @@ -18,6 +18,7 @@ import type * as Schema from '@vegaprotocol/types'; import { AsyncRenderer, Icon, + HealthBar, TooltipCellComponent, } from '@vegaprotocol/ui-toolkit'; import type { GetRowIdParams, RowClickedEvent } from 'ag-grid-community'; @@ -27,9 +28,9 @@ import { AgGridColumn } from 'ag-grid-react'; import { useCallback, useState } from 'react'; import { Grid } from '../../grid'; -import { HealthBar } from '../../health-bar'; import { HealthDialog } from '../../health-dialog'; import { Status } from '../../status'; +import { intentForStatus } from '../../../lib/utils'; import { formatDistanceToNow } from 'date-fns'; export const MarketList = () => { @@ -273,13 +274,13 @@ export const MarketList = () => { data: Market; }) => ( )} sortable={false} diff --git a/apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx b/apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx index ee465081d..9a371165a 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx @@ -1,13 +1,13 @@ import { useState } from 'react'; import { t } from '@vegaprotocol/i18n'; -import { Icon } from '@vegaprotocol/ui-toolkit'; +import { Icon, HealthBar } from '@vegaprotocol/ui-toolkit'; import { formatWithAsset } from '@vegaprotocol/liquidity'; import type * as Schema from '@vegaprotocol/types'; -import { HealthBar } from '../../health-bar'; import { HealthDialog } from '../../health-dialog'; import { Last24hVolume } from '../last-24h-volume'; import { Status } from '../../status'; +import { intentForStatus } from '../../../lib/utils'; interface Levels { fee: string; @@ -92,10 +92,10 @@ export const Market = ({ {tradingMode && settlementAsset?.decimals && feeLevels && ( )} diff --git a/apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx b/apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx deleted file mode 100644 index 947f5fc72..000000000 --- a/apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import classNames from 'classnames'; -import type * as Schema from '@vegaprotocol/types'; -import { addDecimalsFormatNumber } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; -import { BigNumber } from 'bignumber.js'; -import type { ReactNode } from 'react'; - -import { getColorForStatus } from '../../lib/utils'; - -import { Indicator } from '../indicator'; - -const Remainder = () => ( -
-); - -const COPY_CLASS = - 'text-sm font-medium whitespace-nowrap text-white font-alpha calt'; - -const Tooltip = ({ - children, - isExpanded, -}: { - children: ReactNode; - isExpanded: boolean; -}) => { - return ( -
- {children} -
- ); -}; - -const Target = ({ - targetPercent, - isLarge, - children, -}: { - targetPercent: number; - isLarge: boolean; - children: ReactNode; -}) => { - return ( -
-
- {children} -
- ); -}; - -const Level = ({ - children, - commitmentAmount, - total, - backgroundColor, - opacity, -}: { - children: ReactNode; - commitmentAmount: number; - total: number; - backgroundColor: string; - opacity: number; -}) => { - const width = new BigNumber(commitmentAmount) - .div(total) - .multipliedBy(100) - .toNumber(); - - return ( -
-
- - {children} -
- ); -}; - -const Full = () => ( -
-); - -interface Levels { - fee: string; - commitmentAmount: number; -} - -export const HealthBar = ({ - status, - target = '0', - decimals, - levels, - size = 'small', - isExpanded = false, -}: { - status: Schema.MarketTradingMode; - target: string; - decimals: number; - levels: Levels[]; - isExpanded?: boolean; - size?: 'small' | 'large'; -}) => { - const targetNumber = parseInt(target, 10); - - const committedNumber = levels - .reduce((total, current) => { - return total.plus(current.commitmentAmount); - }, new BigNumber(0)) - .toNumber(); - - const total = - targetNumber * 2 >= committedNumber ? targetNumber * 2 : committedNumber; - const targetPercent = (targetNumber / total) * 100; - const isLarge = size === 'large'; - const backgroundColor = getColorForStatus(status); - - return ( -
-
-
- - -
- {levels.map((p, index) => { - const { commitmentAmount, fee } = p; - const prevLevel = levels[index - 1]?.commitmentAmount; - const opacity = 1 - 0.2 * index; - return ( - - -
- -
-
- - {fee}% {t('Fee')} - - - {prevLevel - ? addDecimalsFormatNumber(prevLevel, decimals) - : '0'}{' '} - - {addDecimalsFormatNumber(commitmentAmount, decimals)} - -
- - - ); - })} - {(total !== committedNumber || levels.length === 0) && ( - - )} -
-
- - - -
- -
- - {t('Target stake')} {addDecimalsFormatNumber(target, decimals)} - - - -
-
- ); -}; diff --git a/apps/liquidity-provision-dashboard/src/app/components/health-bar/index.tsx b/apps/liquidity-provision-dashboard/src/app/components/health-bar/index.tsx deleted file mode 100644 index 635dc36e5..000000000 --- a/apps/liquidity-provision-dashboard/src/app/components/health-bar/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './health-bar'; diff --git a/apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx b/apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx index d383e9357..89635e313 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx @@ -1,9 +1,8 @@ import { t } from '@vegaprotocol/i18n'; -import { Dialog } from '@vegaprotocol/ui-toolkit'; +import { Dialog, HealthBar } from '@vegaprotocol/ui-toolkit'; import * as Schema from '@vegaprotocol/types'; import classNames from 'classnames'; - -import { HealthBar } from '../health-bar'; +import { intentForStatus } from '../../lib/utils'; interface HealthDialogProps { isOpen: boolean; @@ -96,9 +95,9 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => { diff --git a/apps/liquidity-provision-dashboard/src/app/lib/utils.tsx b/apps/liquidity-provision-dashboard/src/app/lib/utils.tsx index 2dcceaf98..727ca9f52 100644 --- a/apps/liquidity-provision-dashboard/src/app/lib/utils.tsx +++ b/apps/liquidity-provision-dashboard/src/app/lib/utils.tsx @@ -1,4 +1,5 @@ import * as Schema from '@vegaprotocol/types'; +import { Intent } from '@vegaprotocol/ui-toolkit'; const marketTradingModeStyle = { [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: '#00D46E', @@ -10,3 +11,15 @@ const marketTradingModeStyle = { export const getColorForStatus = (status: Schema.MarketTradingMode) => marketTradingModeStyle[status]; + +const marketTradingModeIntent = { + [Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS]: Intent.Success, + [Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION]: Intent.Danger, + [Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION]: Intent.Primary, + [Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION]: Intent.Danger, + [Schema.MarketTradingMode.TRADING_MODE_NO_TRADING]: Intent.Danger, +}; + +export const intentForStatus = (status: Schema.MarketTradingMode) => { + return marketTradingModeIntent[status]; +}; diff --git a/libs/ui-toolkit/src/components/healthbar/healthbar.tsx b/libs/ui-toolkit/src/components/healthbar/healthbar.tsx new file mode 100644 index 000000000..525360418 --- /dev/null +++ b/libs/ui-toolkit/src/components/healthbar/healthbar.tsx @@ -0,0 +1,203 @@ +import classNames from 'classnames'; +import { addDecimalsFormatNumber } from '@vegaprotocol/utils'; +import { t } from '@vegaprotocol/i18n'; +import { BigNumber } from 'bignumber.js'; +import { getIntentBackground, Intent } from '../../utils/intent'; +import { Indicator } from '../indicator'; +import { Tooltip } from '../tooltip'; + +const Remainder = () => ( +
+); + +const Target = ({ + target, + decimals, + isLarge, +}: { + isLarge: boolean; + target: string; + decimals: number; +}) => { + return ( + +
+ +
+ + {t('Target stake')} {addDecimalsFormatNumber(target, decimals)} + + + } + > +
+
+
+ + ); +}; + +const Level = ({ + commitmentAmount, + rangeLimit, + opacity, + fee, + prevLevel, + decimals, + intent, +}: { + commitmentAmount: number; + rangeLimit: number; + opacity: number; + fee: string; + prevLevel: number; + decimals: number; + intent: Intent; +}) => { + const width = new BigNumber(commitmentAmount) + .div(rangeLimit) + .multipliedBy(100) + .toNumber(); + + const tooltipContent = ( + <> +
+ +
+ + {fee}% {t('Fee')} + +
+ + {prevLevel ? addDecimalsFormatNumber(prevLevel, decimals) : '0'} -{' '} + {addDecimalsFormatNumber(commitmentAmount, decimals)} + +
+ + ); + + return ( + +
+
+
+ + ); +}; + +const Full = () => ( +
+); + +interface Levels { + fee: string; + commitmentAmount: number; +} + +export const HealthBar = ({ + target = '0', + decimals, + levels, + size = 'small', + intent, +}: { + target: string; + decimals: number; + levels: Levels[]; + size?: 'small' | 'large'; + intent: Intent; +}) => { + const targetNumber = parseInt(target, 10); + const rangeLimit = targetNumber * 2; + + let lastVisibleLevel = 0; + const committedNumber = levels + .reduce((total, current, index) => { + const newTotal = total.plus(current.commitmentAmount); + if (total.isLessThan(rangeLimit) && newTotal.isGreaterThan(rangeLimit)) { + lastVisibleLevel = index; + } + return newTotal; + }, new BigNumber(0)) + .toNumber(); + + const isLarge = size === 'large'; + const showRemainder = committedNumber < rangeLimit || levels.length === 0; + const showOverflow = !showRemainder && lastVisibleLevel < levels.length - 1; + + return ( +
+
+
+ + +
+ {levels.map((p, index) => { + const { commitmentAmount, fee } = p; + const prevLevel = levels[index - 1]?.commitmentAmount; + const opacity = 1 - 0.2 * index; + return index <= lastVisibleLevel ? ( + + ) : null; + })} + {showRemainder && } + {showOverflow && ( + +
...
+ + )} +
+
+ +
+
+ ); +}; diff --git a/libs/ui-toolkit/src/components/healthbar/index.ts b/libs/ui-toolkit/src/components/healthbar/index.ts new file mode 100644 index 000000000..3011e2c6e --- /dev/null +++ b/libs/ui-toolkit/src/components/healthbar/index.ts @@ -0,0 +1 @@ +export * from './healthbar'; diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts index 4cb56fa2b..35579f75c 100644 --- a/libs/ui-toolkit/src/components/index.ts +++ b/libs/ui-toolkit/src/components/index.ts @@ -46,3 +46,4 @@ export * from './traffic-light'; export * from './vega-icons'; export * from './vega-logo'; export * from './viewing-as-user'; +export * from './healthbar';