LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

nits + localization

Browse Source
This commit is contained in:
Aleka Cheung 2024-01-11 13:30:25 -05:00
parent 7eae69137b
commit 85cf0ecd77
No known key found for this signature in database
GPG Key ID: 53E472E5EF4F4102
9 changed files with 203 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -41,7 +41,7 @@
"@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^1.1.33",
"@dydxprotocol/v4-client-js": "^1.0.11",
"@dydxprotocol/v4-localization": "^1.1.7",
"@dydxprotocol/v4-localization": "^1.1.9",
"@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3",
"@radix-ui/react-accordion": "^1.1.2",

16
pnpm-lock.yaml generated
View File

@ -1,9 +1,5 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
'@0xsquid/sdk':
specifier: ^1.10.0
@ -33,8 +29,8 @@ dependencies:
specifier: ^1.0.11
version: 1.0.11
'@dydxprotocol/v4-localization':
specifier: ^1.1.7
version: 1.1.7
specifier: ^1.1.9
version: 1.1.9
'@ethersproject/providers':
specifier: ^5.7.2
version: 5.7.2
@ -1023,8 +1019,8 @@ packages:
- utf-8-validate
dev: false
/@dydxprotocol/v4-localization@1.1.7:
resolution: {integrity: sha512-pmRZTszmoee9Ml2v7E1wmIiaZCZpqQE66d/20I/xdnwwEIPt0iOriP59nlep+O/P1r9/Qxf/l+ZzvVbO720xjg==}
/@dydxprotocol/v4-localization@1.1.9:
resolution: {integrity: sha512-3wvgiX7Phq20Rd4JWx1qzLl8mNw5AaTAvCa9Inos7U6oPmPOTnsajHHgsEJSKjBkmcCZsl+sSbf5o6rW9cr0UA==}
dev: false
/@dydxprotocol/v4-proto@0.4.1:
@ -14813,3 +14809,7 @@ packages:
/zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
dev: true
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false

11
src/components/Table.tsx
View File

@ -33,19 +33,19 @@ import {
import { useAsyncList } from 'react-stately';
import { useBreakpoints } from '@/hooks';
import { useBreakpoints, useStringGetter } from '@/hooks';
import { MediaQueryKeys } from '@/hooks/useBreakpoints';
import { Checkbox } from '@/components/Checkbox';
import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins';
import { STRING_KEYS } from '@/constants/localization';
import { CaretIcon } from '@/icons';
import { Icon, IconName } from './Icon';
import { Tag } from './Tag';
import { MustBigNumber } from '@/lib/numbers';
import { Button } from './Button';
import { CaretIcon } from '@/icons';
export { TableCell } from './Table/TableCell';
export { TableColumnHeader } from './Table/TableColumnHeader';
@ -141,6 +141,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
}: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
const stringGetter = useStringGetter();
const currentBreakpoints = useBreakpoints();
const shownColumns = columns.filter(
@ -260,7 +261,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
onClick={() => setNumRowsToShow(data.length)}
slotRight={<CaretIcon />}
>
View more
{stringGetter({ key: STRING_KEYS.VIEW_MORE })}
</Styled.ViewMoreButton>
)}
</>

10
src/pages/Profile.tsx
View File

@ -31,6 +31,8 @@ import { truncateAddress } from '@/lib/wallet';
import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
import { MigratePanel } from './rewards/MigratePanel';
import { GovernancePanel } from './rewards/GovernancePanel';
import { StakingPanel } from './rewards/StakingPanel';
const ENS_CHAIN_ID = 1; // Ethereum
@ -177,7 +179,7 @@ const Profile = () => {
onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
/>
</Styled.EqualGrid>
<MigratePanel />
<DYDXBalancePanel />
@ -229,6 +231,9 @@ const Profile = () => {
withInnerBorders={false}
/>
</Styled.TablePanel>
<GovernancePanel />
<StakingPanel />
</Styled.MobileProfileLayout>
);
};
@ -242,6 +247,7 @@ Styled.MobileProfileLayout = styled.div`
gap: 1rem;
padding: 1.25rem 0.9rem;
max-width: 100vw;
`;
Styled.Header = styled.header`
@ -336,7 +342,7 @@ Styled.Details = styled(Details)`
Styled.RewardsPanel = styled(Panel)`
align-self: flex-start;
&,
> * {
height: 100%;

79
src/pages/rewards/GovernancePanel.tsx Normal file
View File

@ -0,0 +1,79 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { useDispatch } from 'react-redux';
import { ButtonAction, ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { DialogTypes } from '@/constants/dialogs';
import { useStringGetter, useURLConfigs } from '@/hooks';
import { Panel } from '@/components/Panel';
import { IconName } from '@/components/Icon';
import { IconButton } from '@/components/IconButton';
import { Link } from '@/components/Link';
import { openDialog } from '@/state/dialogs';
export const GovernancePanel = () => {
const stringGetter = useStringGetter();
const dispatch = useDispatch();
const { governanceLearnMore } = useURLConfigs();
return (
<Styled.Panel
slotHeaderContent={
<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
}
slotRight={
<Styled.Arrow>
<Styled.IconButton
action={ButtonAction.Base}
iconName={IconName.Arrow}
size={ButtonSize.Small}
/>
</Styled.Arrow>
}
onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
>
<Styled.Description>
{stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
<Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
</Link>
</Styled.Description>
</Styled.Panel>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Panel = styled(Panel)`
height: fit-content;
`;
Styled.Description = styled.div`
color: var(--color-text-0);
--link-color: var(--color-text-1);
a {
display: inline;
::before {
content: ' ';
}
}
`;
Styled.IconButton = styled(IconButton)`
color: var(--color-text-0);
--color-border: var(--color-layer-6);
`;
Styled.Arrow = styled.div`
padding-right: 1.5rem;
`;
Styled.Title = styled.h3`
font: var(--font-medium-book);
color: var(--color-text-2);
margin-bottom: -1rem;
`;

19
src/pages/rewards/RewardHistoryPanel.tsx
View File

@ -40,7 +40,7 @@ export const RewardHistoryPanel = () => {
);
return (
<Styled.Panel
<Panel
slotHeader={
<Styled.Header>
<Styled.Title>
@ -73,26 +73,21 @@ export const RewardHistoryPanel = () => {
) : (
<ComingSoon />
)}
</Styled.Panel>
</Panel>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Panel = styled(Panel)`
--panel-paddingX: 1.5rem;
--panel-paddingY: 1.25rem;
@media ${breakpoints.tablet} {
--panel-paddingY: 1.5rem;
}
`;
Styled.Header = styled.div`
${layoutMixins.spacedRow}
padding: 1rem 1.5rem 0;
padding: 1rem 1rem 0;
margin-bottom: -0.5rem;
@media ${breakpoints.notTablet} {
padding: 1.25rem 1.5rem 0;
}
`;
Styled.Title = styled.div`

98
src/pages/rewards/RewardsPage.tsx
View File

@ -1,13 +1,11 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { STRING_KEYS } from '@/constants/localization';
import { ButtonAction, ButtonSize } from '@/constants/buttons';
import { DialogTypes } from '@/constants/dialogs';
import { AppRoute } from '@/constants/routes';
import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
import { useBreakpoints, useStringGetter } from '@/hooks';
import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins';
@ -16,9 +14,6 @@ import { BackButton } from '@/components/BackButton';
import { Panel } from '@/components/Panel';
import { IconName } from '@/components/Icon';
import { IconButton } from '@/components/IconButton';
import { Link } from '@/components/Link';
import { openDialog } from '@/state/dialogs';
import { DYDXBalancePanel } from './DYDXBalancePanel';
import { MigratePanel } from './MigratePanel';
@ -26,24 +21,14 @@ import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
import { RewardsHelpPanel } from './RewardsHelpPanel';
import { TradingRewardsSummaryPanel } from './TradingRewardsSummaryPanel';
import { RewardHistoryPanel } from './RewardHistoryPanel';
import { GovernancePanel } from './GovernancePanel';
import { StakingPanel } from './StakingPanel';
const RewardsPage = () => {
const dispatch = useDispatch();
const stringGetter = useStringGetter();
const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
const { isTablet, isNotTablet } = useBreakpoints();
const navigate = useNavigate();
const panelArrow = (
<Styled.Arrow>
<Styled.IconButton
action={ButtonAction.Base}
iconName={IconName.Arrow}
size={ButtonSize.Small}
/>
</Styled.Arrow>
);
return (
<Styled.Page>
{isTablet && (
@ -55,42 +40,25 @@ const RewardsPage = () => {
<Styled.GridLayout>
{import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
{isTablet ? (
<Styled.LaunchIncentivesPanel />
) : (
<>
<Styled.LaunchIncentivesPanel />
<Styled.DYDXBalancePanel />
</>
)}
<Styled.TradingRewardsColumn>
<TradingRewardsSummaryPanel />
{isTablet && <RewardsHelpPanel />}
<RewardHistoryPanel/>
<RewardHistoryPanel />
</Styled.TradingRewardsColumn>
{isNotTablet && (
<Styled.OtherColumn>
<Styled.Panel
slotHeader={
<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
}
slotRight={panelArrow}
onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
>
<Styled.Description>
{stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
<Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
</Link>
</Styled.Description>
</Styled.Panel>
<Styled.Panel
slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
slotRight={panelArrow}
onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
>
<Styled.Description>
{stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
<Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
</Link>
</Styled.Description>
</Styled.Panel>
<GovernancePanel />
<StakingPanel />
<RewardsHelpPanel />
</Styled.OtherColumn>
)}
@ -129,15 +97,6 @@ Styled.MobileHeader = styled.header`
${layoutMixins.stickyHeader}
z-index: 2;
padding: 1.25rem 0;
margin-bottom: -1.5rem;
font: var(--font-large-medium);
color: var(--color-text-2);
background-color: var(--color-layer-2);
`;
Styled.Panel = styled(Panel)`
height: fit-content;
font: var(--font-large-medium);
color: var(--color-text-2);
@ -199,30 +158,3 @@ Styled.RewardHistoryHeader = styled.div`
padding: 1rem 1.5rem 0;
margin-bottom: -0.5rem;
`;
Styled.Title = styled.h3`
font: var(--font-medium-book);
color: var(--color-text-2);
margin-bottom: -1rem;
`;
Styled.Description = styled.div`
color: var(--color-text-0);
--link-color: var(--color-text-1);
a {
display: inline;
::before {
content: ' ';
}
}
`;
Styled.IconButton = styled(IconButton)`
color: var(--color-text-0);
--color-border: var(--color-layer-6);
`;
Styled.Arrow = styled.div`
padding-right: 1.5rem;
`;

77
src/pages/rewards/StakingPanel.tsx Normal file
View File

@ -0,0 +1,77 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { useDispatch } from 'react-redux';
import { ButtonAction, ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { DialogTypes } from '@/constants/dialogs';
import { useStringGetter, useURLConfigs } from '@/hooks';
import { Panel } from '@/components/Panel';
import { IconName } from '@/components/Icon';
import { IconButton } from '@/components/IconButton';
import { Link } from '@/components/Link';
import { openDialog } from '@/state/dialogs';
export const StakingPanel = () => {
const stringGetter = useStringGetter();
const dispatch = useDispatch();
const { stakingLearnMore } = useURLConfigs();
return (
<Styled.Panel
slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
slotRight={
<Styled.Arrow>
<Styled.IconButton
action={ButtonAction.Base}
iconName={IconName.Arrow}
size={ButtonSize.Small}
/>
</Styled.Arrow>
}
onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
>
<Styled.Description>
{stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
<Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
</Link>
</Styled.Description>
</Styled.Panel>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Panel = styled(Panel)`
height: fit-content;
`;
Styled.Description = styled.div`
color: var(--color-text-0);
--link-color: var(--color-text-1);
a {
display: inline;
::before {
content: ' ';
}
}
`;
Styled.IconButton = styled(IconButton)`
color: var(--color-text-0);
--color-border: var(--color-layer-6);
`;
Styled.Arrow = styled.div`
padding-right: 1.5rem;
`;
Styled.Title = styled.h3`
font: var(--font-medium-book);
color: var(--color-text-2);
margin-bottom: -1rem;
`;

35
src/pages/rewards/TradingRewardsSummaryPanel.tsx
View File

@ -2,7 +2,6 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux';
import { STRING_KEYS } from '@/constants/localization';
import breakpoints from '@/styles/breakpoints';
import { layoutMixins } from '@/styles/layoutMixins';
import { useStringGetter, useTokenConfigs } from '@/hooks';
@ -21,13 +20,7 @@ export const TradingRewardsSummaryPanel = () => {
const { chainTokenLabel } = useTokenConfigs();
return (
<Styled.Panel
slotHeader={
<Styled.Header>
<Styled.Title>Trading Rewards Summary</Styled.Title>
</Styled.Header>
}
>
<Panel slotHeader={<Styled.Header>Trading Reward Summary</Styled.Header>}>
<Styled.Content>
{currentWeekTradingReward ? (
<Styled.TradingRewardsDetails
@ -70,36 +63,16 @@ export const TradingRewardsSummaryPanel = () => {
<ComingSoon />
)}
</Styled.Content>
</Styled.Panel>
</Panel>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Panel = styled(Panel)`
--panel-paddingX: 1.5rem;
--panel-paddingY: 1.25rem;
@media ${breakpoints.tablet} {
--panel-paddingY: 1.5rem;
}
`;
Styled.Header = styled.div`
${layoutMixins.spacedRow}
gap: 1rem;
padding: var(--panel-paddingY) var(--panel-paddingX) 0;
`;
Styled.Title = styled.h3`
${layoutMixins.inlineRow}
font: var(--font-medium-book);
color: var(--color-text-2);
margin-bottom: -0.5rem;
img {
font-size: 1.5rem;
}
`;
Styled.Content = styled.div`
@ -137,10 +110,6 @@ Styled.Label = styled.div`
color: var(--color-text-1);
`;
Styled.ComingSoon = styled.div`
color: var(--color-text-0);
`;
Styled.TimePeriod = styled.div`
${layoutMixins.inlineRow}