address comments

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",

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:

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<HTMLAnchorElement, ElementProps & StyleProps>(
       ref={ref}
       className={className}
       href={href}
-      onClick={() => {
+      onClick={(e: MouseEvent) => {
         if (analyticsConfig) {
           console.log(analyticsConfig);
         }
 
-        onClick?.();
+        onClick?.(e);
       }}
       rel="noopener noreferrer"
       target="_blank"

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) => (
-  <Styled.Panel>
+  <Styled.Panel onClick={onClick}>
     {href ? (
       <Link to={href}>
         {slotHeader ? (

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 (
     <Styled.Page>
       {/* {isNotTablet ? (
@@ -141,18 +138,18 @@ export const RewardsPage = () => {
 
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
         >
           <Styled.Row>
             <Styled.Description>
               {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-              <Link href={GOVERNANCE_HELP_URL}>
+              <Link href={GOVERNANCE_HELP_URL} onClick={(e) => e.stopPropagation()}>
                 {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
               </Link>
             </Styled.Description>
             <Styled.IconButton
               action={ButtonAction.Base}
               iconName={IconName.Arrow}
-              onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
               size={ButtonSize.Small}
             />
           </Styled.Row>
@@ -160,16 +157,18 @@ export const RewardsPage = () => {
 
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
         >
           <Styled.Row>
             <Styled.Description>
               {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-              <Link href={STAKING_HELP_URL}>{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →</Link>
+              <Link href={STAKING_HELP_URL} onClick={(e) => e.stopPropagation()}>
+                {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+              </Link>
             </Styled.Description>
             <Styled.IconButton
               action={ButtonAction.Base}
               iconName={IconName.Arrow}
-              onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
               size={ButtonSize.Small}
             />
           </Styled.Row>
@@ -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;