From a46512f29b11c6a2357bf97814d30b8c18be5b6c Mon Sep 17 00:00:00 2001 From: Bill He Date: Wed, 4 Oct 2023 12:47:02 -0400 Subject: [PATCH] address comments --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- src/components/Link.tsx | 6 +++--- src/components/Panel.tsx | 4 +++- src/pages/rewards/RewardsPage.tsx | 23 +++++++++++++---------- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index e76c169..cb5c058 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@cosmjs/tendermint-rpc": "^0.31.0", "@dydxprotocol/v4-abacus": "^0.6.3", "@dydxprotocol/v4-client-js": "^0.36.1", - "@dydxprotocol/v4-localization": "^0.1.18", + "@dydxprotocol/v4-localization": "^0.1.23", "@ethersproject/providers": "^5.7.2", "@js-joda/core": "^5.5.3", "@radix-ui/react-collapsible": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8a538bb..5c03d6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,8 +33,8 @@ dependencies: specifier: ^0.36.1 version: 0.36.1 '@dydxprotocol/v4-localization': - specifier: ^0.1.18 - version: 0.1.18 + specifier: ^0.1.23 + version: 0.1.23 '@ethersproject/providers': specifier: ^5.7.2 version: 5.7.2 @@ -1010,8 +1010,8 @@ packages: - utf-8-validate dev: false - /@dydxprotocol/v4-localization@0.1.18: - resolution: {integrity: sha512-KUfa5ZF9DiAP7UfmG7bLFUT9oeuP7xHAESnR6sXX1Ujr8b6TPEnVsmA+3splysZe8WyNbeAe0nxZZAwp2RBWVw==} + /@dydxprotocol/v4-localization@0.1.23: + resolution: {integrity: sha512-TaEey7dINwxELlEyA8XsQ4GQLfJ7e1b434bafpnlG9ccW1sIW7TYTsfaSkck2egR4R736hA7k5WvVy0aI/0TFw==} dev: false /@dydxprotocol/v4-proto@0.2.1: diff --git a/src/components/Link.tsx b/src/components/Link.tsx index ee5bef0..bbf89a0 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -12,7 +12,7 @@ type ElementProps = { }; children: React.ReactNode; href?: string; - onClick?: () => void; + onClick?: (e: MouseEvent) => void; withIcon?: boolean; }; @@ -37,12 +37,12 @@ export const Link = forwardRef( ref={ref} className={className} href={href} - onClick={() => { + onClick={(e: MouseEvent) => { if (analyticsConfig) { console.log(analyticsConfig); } - onClick?.(); + onClick?.(e); }} rel="noopener noreferrer" target="_blank" diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 6873f96..cd33955 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -11,6 +11,7 @@ type PanelProps = { children?: React.ReactNode; href?: string; onHeaderClick?: () => void; + onClick?: () => void; }; type PanelStyleProps = { @@ -24,10 +25,11 @@ export const Panel = ({ children, href, onHeaderClick, + onClick, hasSeparator, className, }: PanelProps & PanelStyleProps) => ( - + {href ? ( {slotHeader ? ( diff --git a/src/pages/rewards/RewardsPage.tsx b/src/pages/rewards/RewardsPage.tsx index 16ea531..ba23c74 100644 --- a/src/pages/rewards/RewardsPage.tsx +++ b/src/pages/rewards/RewardsPage.tsx @@ -1,14 +1,14 @@ import styled, { AnyStyledComponent } from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; -import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { STRING_KEYS } from '@/constants/localization'; import { ButtonAction, ButtonSize, ButtonState, ButtonType } from '@/constants/buttons'; import { DialogTypes } from '@/constants/dialogs'; -import { breakpoints } from '@/styles'; import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks'; +import { breakpoints } from '@/styles'; import { layoutMixins } from '@/styles/layoutMixins'; import { Details } from '@/components/Details'; @@ -29,8 +29,6 @@ import { DYDXBalancePanel } from './DYDXBalancePanel'; // TODO: replace placeholder URL with real URLs when avaialble const GOVERNANCE_HELP_URL = 'https://help.dydx.exchange/'; const STAKING_HELP_URL = 'https://help.dydx.exchange/'; -// const MIGRATE_HELP_URL = 'https://help.dydx.exchange/'; -// const BRIDGE_URL = 'https://bridge.dydx.exchange/'; export const RewardsPage = () => { const dispatch = useDispatch(); @@ -39,7 +37,7 @@ export const RewardsPage = () => { const selectedNetwork = useSelector(getSelectedNetwork); - // const chainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId); + // const chainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId); // const { balance } = useAccountBalance({ // addressOrDenom: import.meta.env.VITE_V3_TOKEN_ADDRESS, @@ -50,7 +48,6 @@ export const RewardsPage = () => { // const tokenBalance = import.meta.env.VITE_V3_TOKEN_ADDRESS ? balance : 0; - return ( {/* {isNotTablet ? ( @@ -141,18 +138,18 @@ export const RewardsPage = () => { {stringGetter({ key: STRING_KEYS.GOVERNANCE })}} + onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} > {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })} - + e.stopPropagation()}> {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} size={ButtonSize.Small} /> @@ -160,16 +157,18 @@ export const RewardsPage = () => { {stringGetter({ key: STRING_KEYS.STAKING })}} + onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} > {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })} - {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → + e.stopPropagation()}> + {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → + dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} size={ButtonSize.Small} /> @@ -249,6 +248,10 @@ Styled.PanelRow = styled(Styled.Row)` max-width: min(100vw, var(--content-max-width)); align-items: flex-start; + > section { + cursor: pointer; + } + @media ${breakpoints.tablet} { grid-auto-flow: row; grid-template-columns: 1fr;