From f787641067395104f4be71a46371a22d1b128f0c Mon Sep 17 00:00:00 2001 From: Malin Antonsson Date: Mon, 3 Oct 2022 14:16:53 +0200 Subject: [PATCH] feat: liquidity provision health --- .../components/market-list/health-bar.scss | 127 +++++++++--------- .../app/components/market-list/health-bar.tsx | 44 +++--- .../components/market-list/health-dialog.tsx | 89 ++++++++++++ .../components/market-list/market-list.tsx | 39 +++++- 4 files changed, 217 insertions(+), 82 deletions(-) create mode 100644 apps/liquidity-provision-dashboard/src/app/components/market-list/health-dialog.tsx diff --git a/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.scss b/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.scss index 88a739797..64e02aec8 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.scss +++ b/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.scss @@ -1,128 +1,133 @@ .App { - font-family: sans-serif; - text-align: center; + font-family: sans-serif; + text-align: center; - width: 300px; - margin: auto; + width: 300px; + margin: auto; } .health { - width: 100%; + width: 100%; } .health-wrapper { - padding: 8px 0; - position: relative; + padding: 8px 0; + position: relative; } .health-inner { - overflow: hidden; - position: relative; - height: 16px; - width: 100%; + overflow: hidden; + position: relative; + height: 16px; + width: 100%; } .health-full { - background: #f5f5f5; - height: 100%; + background: #f5f5f5; + height: 100%; } .health-committed { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; } .health-committed--continuous { - background-color: #00a88a; + background-color: #00a88a; } .health-committed--auction { - background-color: #fb8e7f; + background-color: #fb8e7f; } .health-committed--open { - background-color: #68e2e4; + background-color: #68e2e4; } .health-target-container { - position: absolute; - left: 50%; - top: 0; - transform: translateX(-50%); - padding: 0 5px; + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + padding: 0 5px; } .health-target { - width: 2px; - height: 32px; - background-color: black; + width: 2px; + height: 32px; + background-color: black; } .health-copy { - font-size: 8px; - line-height: 144%; - font-weight: 500; + font-size: 8px; + line-height: 144%; + font-weight: 500; } .health-size--large .health-inner { - height: 32px; + height: 32px; } .health-size--large .health-target { - height: 72px; + height: 72px; } .health-size--large .health-wrapper { - padding: 20px 0; + padding: 20px 0; } .health-size--large .health-copy { - font-size: 12px; + font-size: 12px; } .health-tooltip { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -120%); - border: 1px solid #bfccd6; - background-color: #fff; + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -120%); + border: 1px solid #bfccd6; + background-color: #fff; +} + +.health-committed-tooltip { + min-width: 90px; } .health-committed-tooltip, .health-target-tooltip { - padding: 8px; - display: flex; - flex-direction: column; + padding: 8px; + display: flex; + flex-direction: column; + z-index: 1; } .health-tooltip::before, .health-tooltip::after { - content: " "; - position: absolute; - left: calc(50% - 8px); - bottom: 1px; - width: 0; - height: 0; - transform: translate(50%, 100%); + content: ' '; + position: absolute; + left: calc(50% - 8px); + bottom: 1px; + width: 0; + height: 0; + transform: translate(50%, 100%); } .health-tooltip::before { - bottom: -1px; - border: 4px solid; - border-color: #bfccd6 transparent transparent transparent; + bottom: -1px; + border: 4px solid; + border-color: #bfccd6 transparent transparent transparent; } .health-tooltip::after { - border: 4px solid; - border-color: white transparent transparent transparent; + border: 4px solid; + border-color: white transparent transparent transparent; } .health-tooltip-copy { - font-size: 8px; - line-height: 1.2em; - font-weight: 500; -} \ No newline at end of file + font-size: 8px; + line-height: 1.2em; + font-weight: 500; +} diff --git a/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.tsx b/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.tsx index c2c2f71f9..a16886635 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/market-list/health-bar.tsx @@ -2,36 +2,48 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import { useState } from 'react'; -import type { MarketTradingMode } from '@vegaprotocol/types'; -// import { MarketTradingModeMapping } from '@vegaprotocol/types'; +//import type { MarketTradingMode } from '@vegaprotocol/types'; +import { MarketTradingMode } from '@vegaprotocol/types'; import './health-bar.scss'; -enum marketTradingModeClassname { - TRADING_MODE_CONTINUOUS = 'continuous', - TRADING_MODE_MONITORING_AUCTION = 'auction', - TRADING_MODE_OPENING_AUCTION = 'open', - TRADING_MODE_BATCH_AUCTION = 'batch', - TRADING_MODE_NO_TRADING = 'none', -} +// enum marketTradingModeClassname { +// TRADING_MODE_CONTINUOUS = 'continuous', +// TRADING_MODE_MONITORING_AUCTION = 'auction', +// TRADING_MODE_OPENING_AUCTION = 'open', +// TRADING_MODE_BATCH_AUCTION = 'batch', +// TRADING_MODE_NO_TRADING = 'none', +// } -enum sizes { - small = 'small', - large = 'large', +const marketTradingModeClassname = { + [MarketTradingMode.TRADING_MODE_CONTINUOUS]: 'continuous', + [MarketTradingMode.TRADING_MODE_MONITORING_AUCTION]: 'auction', + [MarketTradingMode.TRADING_MODE_OPENING_AUCTION]: 'open', + [MarketTradingMode.TRADING_MODE_BATCH_AUCTION]: 'batch', + [MarketTradingMode.TRADING_MODE_NO_TRADING]: 'none', +}; + +console.log('marketTradingModeClassname: ', marketTradingModeClassname); + +interface Node { + commitmentAmount: string; + fee: string; } export default function Health({ status, target, committed, - size = sizes.small, + committedEdges = [], + size = 'small', isExpanded = false, }: { status: MarketTradingMode; - size: sizes | undefined; committed: string; target: string; - isExpanded: boolean | undefined; + committedEdges?: Node[]; + isExpanded?: boolean; + size?: 'small' | 'large'; }) { const [isTargetTooltipShowing, setIsTargetTooltipShowing] = useState(isExpanded); @@ -56,7 +68,7 @@ export default function Health({ console.log('targetPercent: ', targetPercent); return ( -
+
void; +} + +const ROWS = [ + { + key: '1', + title: 'Continuous', + copy: 'Markets that have committed liquidity equal or greater than the target stake are trading continuously.', + data: { + status: MarketTradingMode.TRADING_MODE_CONTINUOUS, + target: '171320', + committed: '220000', + }, + }, + { + key: '2', + title: 'Liquidity auction', + copy: 'Markets below the target stake will see trading suspended and go into liquidity auction.', + data: { + status: MarketTradingMode.TRADING_MODE_MONITORING_AUCTION, + target: '171320', + committed: '150000', + }, + }, + { + key: '3', + title: 'Opening auction', + copy: 'A newly created market looking for a target liquidity amount to start trading.', + data: { + status: MarketTradingMode.TRADING_MODE_OPENING_AUCTION, + target: '171320', + committed: '140000', + }, + }, +]; + +export default function HealthDialog({ onChange, isOpen }: HealthDialogProps) { + return ( + +

+ {t('Health')} +

+

+ {t( + 'Market health is a representation of market and liquidity status and how close that market is to moving from one fee level to another.' + )} +

+ + + + + + + + {ROWS.map((r) => { + return ( + + + + + ); + })} + +
{t('Market status')}{t('Liquidity status')}
+

{t(r.title)}

+

{t(r.copy)}

+ 		+ +
+ + ); +} diff --git a/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx b/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx index e38ef3005..8685a0b3b 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef, useEffect } from 'react'; +import { useCallback, useRef, useEffect, useState } from 'react'; import { AgGridReact, AgGridColumn } from 'ag-grid-react'; import type { AgGridReact as AgGridReactType } from 'ag-grid-react'; import type { @@ -9,6 +9,7 @@ import type { import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; import { formatNumber, t } from '@vegaprotocol/react-helpers'; +import { Icon } from '@vegaprotocol/ui-toolkit'; import { formatWithAsset, @@ -20,6 +21,7 @@ import type { MarketTradingMode } from '@vegaprotocol/types'; import { MarketTradingModeMapping } from '@vegaprotocol/types'; import HealthBar from './health-bar'; +import HealthDialog from './health-dialog'; // #BFCCD6 const agGridVariables = ` @@ -76,14 +78,14 @@ const healthCellRenderer = ({ value, data }: GroupCellRendererParams) => { status={value} target={data.data.targetStake} committed={committed} - size={undefined} - isExpanded={false} + committedEdges={data.liquidityProvisionsConnection?.edges} />
); }; const MarketList = ({ data }: { data: MarketsListData }) => { + const [isHealthDialogOpen, setIsHealthDialogOpen] = useState(false); const gridRef = useRef(null); const localData = formatMarketLists(data); @@ -157,7 +159,19 @@ const MarketList = ({ data }: { data: MarketsListData }) => { /> { + return ( +
+ {t('Health')}{' '} + +
+ ); + }} field="tradingMode" headerTooltip={t('This is the health tooltip')} cellRenderer={healthCellRenderer} @@ -170,9 +184,24 @@ const MarketList = ({ data }: { data: MarketsListData }) => { headerTooltip={t('This is the APY tooltip')} /> + + { + setIsHealthDialogOpen(!isHealthDialogOpen); + }} + />
); }; - +{ + /* */ +} export default MarketList;