Skip to content

Commit

Permalink
chore: update trading rewards table styling, pr followups (#602)
Browse files Browse the repository at this point in the history
  • Loading branch information
@moo-onthelawn
moo-onthelawn authored Jun 3, 2024
1 parent 548bb2a commit 4596f24
Show file tree
Hide file tree
Showing 6 changed files with 360 additions and 262 deletions.
32 changes: 20 additions & 12 deletions src/components/visx/TimeSeriesChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { LinearGradient } from '@visx/gradient';
import { ParentSize } from '@visx/responsive';
Expand Down Expand Up @@ -141,17 +141,32 @@ export const TimeSeriesChart = <Datum extends {}>({
const latestDatum = data?.[data.length - 1];

// Chart state
const getClampedZoomDomain = useCallback(
(unclamped: number) => {
return clamp(
Math.max(1e-320, Math.min(Number.MAX_SAFE_INTEGER, unclamped)),
minZoomDomain,
xAccessor(latestDatum) - xAccessor(earliestDatum)
);
},
[earliestDatum, latestDatum, minZoomDomain, xAccessor]
);

const [zoomDomain, setZoomDomain] = useState<number | undefined>(
defaultZoomDomain ?? xAccessor(latestDatum) - xAccessor(earliestDatum)
defaultZoomDomain
? getClampedZoomDomain(defaultZoomDomain)
: xAccessor(latestDatum) - xAccessor(earliestDatum)
);

const [zoomDomainAnimateTo, setZoomDomainAnimateTo] = useState<number | undefined>();

useEffect(() => {
if (defaultZoomDomain) {
setZoomDomainAnimateTo(defaultZoomDomain);
const clampedZoomDomain = getClampedZoomDomain(defaultZoomDomain);
setZoomDomain(clampedZoomDomain);
setZoomDomainAnimateTo(clampedZoomDomain);
}
}, [defaultZoomDomain]);
}, [defaultZoomDomain, getClampedZoomDomain]);

useEffect(() => {
onZoom?.({ zoomDomain });
Expand Down Expand Up @@ -219,14 +234,7 @@ export const TimeSeriesChart = <Datum extends {}>({
const onWheel = ({ deltaY }: React.WheelEvent) => {
if (!zoomDomain) return;

setZoomDomain(
clamp(
Math.max(1e-320, Math.min(Number.MAX_SAFE_INTEGER, zoomDomain * Math.exp(deltaY / 1000))),
minZoomDomain,
xAccessor(latestDatum) - xAccessor(earliestDatum)
)
);

setZoomDomain(getClampedZoomDomain(zoomDomain * Math.exp(deltaY / 1000)));
setZoomDomainAnimateTo(undefined);

// TODO: scroll horizontally to pan
Expand Down
124 changes: 41 additions & 83 deletions src/pages/token/rewards/RewardHistoryPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,73 @@
import { useCallback, useState } from 'react';

import styled from 'styled-components';

import {
HISTORICAL_TRADING_REWARDS_PERIODS,
HistoricalTradingRewardsPeriod,
HistoricalTradingRewardsPeriods,
} from '@/constants/abacus';
import { HistoricalTradingRewardsPeriod } from '@/constants/abacus';
import { STRING_KEYS } from '@/constants/localization';

import { useEnvConfig } from '@/hooks/useEnvConfig';
import { useStringGetter } from '@/hooks/useStringGetter';

import breakpoints from '@/styles/breakpoints';
import { layoutMixins } from '@/styles/layoutMixins';

import { Output, OutputType } from '@/components/Output';
import { Panel } from '@/components/Panel';
import { ToggleGroup } from '@/components/ToggleGroup';
import { WithTooltip } from '@/components/WithTooltip';
import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTable';

import abacusStateManager from '@/lib/abacus';

export const RewardHistoryPanel = () => {
const stringGetter = useStringGetter();
const rewardsHistoryStartDate = useEnvConfig('rewardsHistoryStartDateMs');

const [selectedPeriod, setSelectedPeriod] = useState<HistoricalTradingRewardsPeriods>(
abacusStateManager.getHistoricalTradingRewardPeriod() || HistoricalTradingRewardsPeriod.WEEKLY
);

const onSelectPeriod = useCallback((periodName: string) => {
const thisSelectedPeriod =
HISTORICAL_TRADING_REWARDS_PERIODS[
periodName as keyof typeof HISTORICAL_TRADING_REWARDS_PERIODS
];
setSelectedPeriod(thisSelectedPeriod);
abacusStateManager.setHistoricalTradingRewardPeriod(thisSelectedPeriod);
}, []);

return (
<Panel
slotHeader={
<$Header>
<$Title>
<WithTooltip tooltip="reward-history">
<h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
</WithTooltip>
<span>
{stringGetter({
key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION,
params: {
REWARDS_HISTORY_START_DATE: (
<$Output
type={OutputType.Date}
value={Number(rewardsHistoryStartDate)}
timeOptions={{ useUTC: true }}
/>
),
},
})}
</span>
</$Title>
<ToggleGroup
items={[
{
value: HistoricalTradingRewardsPeriod.MONTHLY.name,
label: stringGetter({ key: STRING_KEYS.MONTHLY }),
},
{
value: HistoricalTradingRewardsPeriod.WEEKLY.name,
label: stringGetter({ key: STRING_KEYS.WEEKLY }),
},
{
value: HistoricalTradingRewardsPeriod.DAILY.name,
label: stringGetter({ key: STRING_KEYS.DAILY }),
},
]}
value={selectedPeriod.name}
onValueChange={onSelectPeriod}
/>
</$Header>
}
>
<TradingRewardHistoryTable period={selectedPeriod} />
</Panel>
<$RewardHistoryContainer>
<$Header>
<$Title>{stringGetter({ key: STRING_KEYS.TRADING_REWARD_HISTORY })}</$Title>
</$Header>
<$TradingRewardHistoryTable period={HistoricalTradingRewardsPeriod.DAILY} />
<$Description>
{stringGetter({
key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION,
params: {
REWARDS_HISTORY_START_DATE: (
<$Output
type={OutputType.Date}
value={Number(rewardsHistoryStartDate)}
timeOptions={{ useUTC: true }}
/>
),
},
})}
</$Description>
</$RewardHistoryContainer>
);
};
const $Header = styled.div`
${layoutMixins.spacedRow}

padding: 1rem 1rem 0;
margin-bottom: -0.5rem;
const $RewardHistoryContainer = styled.div`
display: flex;
flex-direction: column;
gap: var(--gap);
`;

const $Header = styled.div`
@media ${breakpoints.notTablet} {
padding: 1.25rem 1.5rem 0;
margin-bottom: -0.5rem;
}
`;

const $Title = styled.div`
${layoutMixins.column}
color: var(--color-text-0);
font: var(--font-small-book);
font: var(--font-large-book);
color: var(--color-text-2);
`;

h3 {
font: var(--font-medium-book);
color: var(--color-text-2);
}
const $TradingRewardHistoryTable = styled(TradingRewardHistoryTable)`
--computed-radius: 0.875rem;
`;

const $Output = styled(Output)`
display: inline;
`;

const $Description = styled.span`
font: var(--font-mini-book);
color: var(--color-text-0);
padding: 0 8rem;
text-align: center;
`;
47 changes: 34 additions & 13 deletions src/pages/token/rewards/RewardsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ const RewardsPage = () => {
const { isTablet, isNotTablet } = useBreakpoints();
const navigate = useNavigate();

const showChartPanel = testFlags.tradingRewardsRehaul;

return (
<div>
{isTablet && (
Expand All @@ -39,22 +41,25 @@ const RewardsPage = () => {
/>
)}
<DetachedSection>
<$GridLayout showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}>
<$GridLayout
showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}
showChartPanel={showChartPanel}
>
{import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <$MigratePanel />}

{isTablet ? (
<$LaunchIncentivesPanel />
) : (
<>
{testFlags.tradingRewardsRehaul && <$TradingRewardsChartPanel />}
{showChartPanel && <$TradingRewardsChartPanel />}
<$LaunchIncentivesPanel />
{testFlags.enableStaking ? <$StakingPanel /> : <$DYDXBalancePanel />}
</>
)}

<$TradingRewardsColumn>
<TradingRewardsSummaryPanel />
{isTablet && testFlags.tradingRewardsRehaul && <TradingRewardsChartPanel />}
{isTablet && showChartPanel && <TradingRewardsChartPanel />}
{isTablet && <RewardsHelpPanel />}
<RewardHistoryPanel />
</$TradingRewardsColumn>
Expand All @@ -72,7 +77,7 @@ const RewardsPage = () => {

export default RewardsPage;

const $GridLayout = styled.div<{ showMigratePanel?: boolean }>`
const $GridLayout = styled.div<{ showMigratePanel?: boolean; showChartPanel?: boolean }>`
--gap: 1.5rem;
display: grid;
grid-template-columns: 2fr 1fr;
Expand All @@ -83,9 +88,8 @@ const $GridLayout = styled.div<{ showMigratePanel?: boolean }>`
gap: var(--gap);
}
// xccx figure out migrate
${({ showMigratePanel }) =>
showMigratePanel
${({ showMigratePanel, showChartPanel }) =>
showMigratePanel && showChartPanel
? css`
grid-template-areas:
'migrate migrate'
Expand All @@ -94,12 +98,25 @@ const $GridLayout = styled.div<{ showMigratePanel?: boolean }>`
'balance balance'
'rewards other';
`
: css`
grid-template-areas:
'chart chart'
'incentives balance'
'rewards other';
`}
: showMigratePanel
? css`
grid-template-areas:
'migrate migrate'
'incentives balance'
'rewards other';
`
: showChartPanel
? css`
grid-template-areas:
'chart chart'
'incentives balance'
'rewards other';
`
: css`
grid-template-areas:
'incentives balance'
'rewards other';
`}
@media ${breakpoints.notTablet} {
padding: 1rem;
Expand All @@ -114,6 +131,10 @@ const $GridLayout = styled.div<{ showMigratePanel?: boolean }>`
grid-template-areas:
'incentives'
'rewards';
> :last-child {
margin-bottom: var(--gap);
}
}
`;

Expand Down
Loading

0 comments on commit 4596f24

Please sign in to comment.