From b94a610d18ea27760a9a9cd6099db7e509d8600d Mon Sep 17 00:00:00 2001 From: Grandschtroumpf Date: Fri, 13 Dec 2024 11:20:01 +0100 Subject: [PATCH 01/14] Create Strategy Table List --- src/assets/icons/grid.svg | 6 + src/assets/icons/table.svg | 8 ++ src/components/activity/ActivityTable.tsx | 6 +- src/components/common/FiatPrice.tsx | 23 +++ src/components/common/PairLogoName.tsx | 4 +- src/components/common/radio/RadioGroup.tsx | 4 +- src/components/explorer/ExplorerTabs.tsx | 2 + .../strategies/StrategySelectLayout.tsx | 43 ++++++ .../overview/StrategyContent.module.css | 47 ++++++ .../strategies/overview/StrategyContent.tsx | 18 ++- .../strategies/overview/StrategyTable.tsx | 134 ++++++++++++++++++ .../overview/strategyBlock/StrategyBlock.tsx | 9 +- .../strategyBlock/StrategyBlockHeader.tsx | 46 +++--- .../strategyBlock/StrategyBlockTradeCount.tsx | 4 +- .../overview/strategyBlock/StrategyGraph.tsx | 5 +- src/libs/routing/routes/explorer.ts | 6 +- src/libs/routing/routes/myStrategies.ts | 1 + src/pages/explorer/type/overview/index.tsx | 3 + src/pages/strategies/index.tsx | 4 +- src/pages/strategies/overview/index.tsx | 3 + 20 files changed, 331 insertions(+), 45 deletions(-) create mode 100644 src/assets/icons/grid.svg create mode 100644 src/assets/icons/table.svg create mode 100644 src/components/common/FiatPrice.tsx create mode 100644 src/components/strategies/StrategySelectLayout.tsx create mode 100644 src/components/strategies/overview/StrategyTable.tsx diff --git a/src/assets/icons/grid.svg b/src/assets/icons/grid.svg new file mode 100644 index 000000000..d3547d226 --- /dev/null +++ b/src/assets/icons/grid.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/table.svg b/src/assets/icons/table.svg new file mode 100644 index 000000000..d64c82724 --- /dev/null +++ b/src/assets/icons/table.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/activity/ActivityTable.tsx b/src/components/activity/ActivityTable.tsx index 7c1f1935f..1da91f057 100644 --- a/src/components/activity/ActivityTable.tsx +++ b/src/components/activity/ActivityTable.tsx @@ -181,7 +181,7 @@ export const ActivityId: FC = ({ activity, size }) => { }; interface ActivityIconProps { - activity: Activity; + activity: { action: ActivityAction }; size: number; className?: string; } @@ -317,7 +317,7 @@ interface ActionIconProps { action: ActivityAction; size: string | number; } -const iconColor = (action: ActivityAction) => { +export const iconColor = (action: ActivityAction) => { if (action === 'buy') return `bg-buy/10 text-buy`; if (action === 'sell') return `bg-sell/10 text-sell`; if (action === 'create') return `bg-success/10 text-success`; @@ -325,7 +325,7 @@ const iconColor = (action: ActivityAction) => { return `bg-white/10 text-white`; }; -const ActionIcon: FC = ({ action, size }) => { +export const ActionIcon: FC = ({ action, size }) => { const className = `size-${size}`; if (action === 'create') return ; if (action === 'transfer') return ; diff --git a/src/components/common/FiatPrice.tsx b/src/components/common/FiatPrice.tsx new file mode 100644 index 000000000..5fca45673 --- /dev/null +++ b/src/components/common/FiatPrice.tsx @@ -0,0 +1,23 @@ +import { useFiatCurrency } from 'hooks/useFiatCurrency'; +import { useGetTokenPrice } from 'libs/queries'; +import { SafeDecimal } from 'libs/safedecimal'; +import { Token } from 'libs/tokens'; +import { FC } from 'react'; +import { cn, getFiatDisplayValue } from 'utils/helpers'; + +interface Props { + token?: Token; + amount: SafeDecimal | string | number; + className?: string; +} +export const FiatPrice: FC = ({ token, amount, className }) => { + const query = useGetTokenPrice(token?.address); + const { selectedFiatCurrency: currentCurrency } = useFiatCurrency(); + const loading = !token || query.isPending; + const value = new SafeDecimal(query.data?.[currentCurrency] || 0).mul(amount); + return ( + + {getFiatDisplayValue(value, currentCurrency)} + + ); +}; diff --git a/src/components/common/PairLogoName.tsx b/src/components/common/PairLogoName.tsx index 9df70754a..7c891e150 100644 --- a/src/components/common/PairLogoName.tsx +++ b/src/components/common/PairLogoName.tsx @@ -16,7 +16,7 @@ export const PairLogoName: FC = ({ return ( <> -

+ {baseToken.symbol} {baseToken.isSuspicious && ( @@ -26,7 +26,7 @@ export const PairLogoName: FC = ({ {quoteToken.isSuspicious && ( )} -

+ ); }; diff --git a/src/components/common/radio/RadioGroup.tsx b/src/components/common/radio/RadioGroup.tsx index 852235c1d..806e2c482 100644 --- a/src/components/common/radio/RadioGroup.tsx +++ b/src/components/common/radio/RadioGroup.tsx @@ -13,7 +13,7 @@ export const RadioGroup: FC = ({ children, ...props }) => { role="group" {...props} className={cn( - 'text-14 relative flex items-center rounded-full bg-black p-2', + 'text-14 relative flex items-center rounded-full bg-black px-6 py-4', props.className )} > @@ -30,6 +30,7 @@ interface RadioProps { onChange?: (value?: string) => any; className?: string; 'data-testid'?: string; + 'aria-label'?: string; } export const Radio: FC = (props) => { @@ -45,6 +46,7 @@ export const Radio: FC = (props) => { onChange={() => props.onChange?.(props.value)} className={style.radio} data-testid={props['data-testid']} + aria-label={props['aria-label']} />