update switch chain error requirements check

* ✏️ Liquid staking language and localization

* import nits

package.json

@@ -42,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.25",
+    "@dydxprotocol/v4-localization": "^1.1.26",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -36,8 +36,8 @@ dependencies:
     specifier: ^1.0.20
     version: 1.0.20
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.25
-    version: 1.1.25
+    specifier: ^1.1.26
+    version: 1.1.26
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1323,8 +1323,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.25:
-    resolution: {integrity: sha512-84BJMybnZBrRnDpnHlMUcOYT1r0ODtgcdgrjdzTw8b0sViTY6ne9ob690fcn/vQO+6sEdDsdt+08ud0H+ZvyYg==}
+  /@dydxprotocol/v4-localization@1.1.26:
+    resolution: {integrity: sha512-u+J1J5Up8McwZOcDaG9GrH/A8p4vD2NU2CT2hPdYyKgEd28XeAYvv7bNAQRKdiBaqTePbbF5uB6TMAQnEGnb1A==}
     dev: false
 
   /@dydxprotocol/v4-proto@4.0.0-dev.0:
@@ -8882,7 +8882,7 @@ packages:
     resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
     dependencies:
       cosmos-directory-types: 0.0.6
-      node-fetch-native: 1.6.1
+      node-fetch-native: 1.6.2
     dev: false
 
   /cosmos-directory-types@0.0.6:
@@ -12892,6 +12892,10 @@ packages:
     resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
     dev: false
 
+  /node-fetch-native@1.6.2:
+    resolution: {integrity: sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==}
+    dev: false
+
   /node-fetch@2.6.12:
     resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
     engines: {node: 4.x || >=6.0.0}

src/components/Details.tsx

@@ -133,7 +133,6 @@ const detailsLayoutVariants = {
   row: css`
     ${layoutMixins.row}
     align-self: stretch;
-    white-space: nowrap;
   `,
 
   rowColumns: css`
@@ -160,16 +159,12 @@ const itemLayoutVariants: Record<string, FlattenInterpolation<ThemeProps<any>>>
 
     ${layoutMixins.spacedRow}
     gap: 0.5rem;
-    align-items: start;
-    padding: 0.5rem 0;
 
     min-height: var(--details-item-height);
 
-    > :first-child > abbr {
-      min-width: auto;
-    }
-
     > :last-child {
+      align-self: stretch;
+
       ${layoutMixins.row}
       ${layoutMixins.stickyRight}
 
@@ -222,6 +217,8 @@ Styled.Details = styled.dl<{
   --details-grid-numColumns: 2;
 
   ${({ layout }) => layout && detailsLayoutVariants[layout]}
+
+  white-space: nowrap;
 `;
 
 Styled.Item = styled.div<{
@@ -234,7 +231,7 @@ Styled.Item = styled.div<{
   ${({ justifyItems }) =>
     justifyItems === 'end' &&
     css`
-      > :nth-child(even) {
+      &:nth-child(even) {
         justify-items: end;
         text-align: end;
       }
@@ -246,7 +243,6 @@ Styled.Item = styled.div<{
     {
       column: css`
         &:not(:hover) > :first-child {
-          white-space: nowrap;
           overflow-x: hidden;
           text-overflow: ellipsis;
         }

src/components/DetailsDialog.tsx

@@ -26,7 +26,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
       placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar}
     >
       <Styled.Content>
-        <Styled.Details withSeparators justifyItems="end" items={items} />
+        <Styled.Details withSeparators items={items} />
 
         <Styled.Footer>{slotFooter}</Styled.Footer>
       </Styled.Content>

src/constants/wallets.ts

@@ -40,6 +40,7 @@ export enum WalletErrorType {
   // General
   ChainMismatch,
   UserCanceled,
+  SwitchChainMethodMissing,
 
   // Non-Deterministic
   NonDeterministicWallet,

src/hooks/usePotentialMarkets.tsx

@@ -88,7 +88,7 @@ export const usePotentialMarketsContext = () => {
         impactNotional: 10_000,
       },
       1: {
-        label: 'Mid-cap',
+        label: stringGetter({ key: STRING_KEYS.MID_CAP }),
         initialMarginFraction: 0.1,
         maintenanceMarginFraction: 0.05,
         impactNotional: 5_000,

src/hooks/useWalletConnection.ts

@@ -163,17 +163,20 @@ export const useWalletConnection = () => {
           }
         }
       } catch (error) {
-        throw Object.assign(
-          new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
-          {
-            walletConnectionType: walletConnection?.type,
-          }
-        );
+        const { isErrorExpected } = parseWalletError({ error, stringGetter });
+        if (!isErrorExpected) {
+          throw Object.assign(
+            new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
+            {
+              walletConnectionType: walletConnection?.type,
+            }
+          );
+        }
       }
 
       return {
         walletType,
-        walletConnectionType: walletConnection.type,
+        walletConnectionType: walletConnection?.type,
       };
     },
     [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]

src/lib/wallet/index.ts

@@ -92,6 +92,10 @@ export const getWalletErrorType = ({ error }: { error: Error }) => {
     return WalletErrorType.ChainMismatch;
   }
 
+  if (messageLower.includes('Missing or invalid. request() method: wallet_switchEthereumChain')) {
+    return WalletErrorType.SwitchChainMethodMissing;
+  }
+
   // ImToken - User canceled
   if (messageLower.includes('用户取消了操作')) {
     return WalletErrorType.UserCanceled;
@@ -113,13 +117,18 @@ export const parseWalletError = ({
 }) => {
   const walletErrorType = getWalletErrorType({ error });
   let message;
+  let isErrorExpected;
 
   switch (walletErrorType) {
     case WalletErrorType.ChainMismatch:
-    case WalletErrorType.UserCanceled: {
+    case WalletErrorType.UserCanceled:
+    case WalletErrorType.SwitchChainMethodMissing: {
+      isErrorExpected = true;
+      message = error.message;
       break;
     }
     default: {
+      isErrorExpected = false;
       message = stringGetter({
         key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
         params: {
@@ -132,5 +141,6 @@ export const parseWalletError = ({
   return {
     walletErrorType,
     message,
+    isErrorExpected,
   };
 };

src/pages/token/Governance.tsx

@@ -19,7 +19,7 @@ export default () => {
       <Styled.HeaderSection>
         <ContentSectionHeader
           title={stringGetter({ key: STRING_KEYS.GOVERNANCE })}
-          subtitle="Participate in the ecosystem by voting on Governance proposals or submitting your own."
+          subtitle={stringGetter({ key: STRING_KEYS.GOVERNANCE_PAGE_SUBTITLE })}
         />
       </Styled.HeaderSection>
 

src/pages/token/Token.tsx

@@ -59,7 +59,7 @@ export default () => {
                           <Icon iconName={IconName.CurrencySign} />
                         </Styled.IconContainer>
                       ),
-                      label: 'Staking Rewards', // stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
+                      label: stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
                       href: TokenRoute.StakingRewards,
                       tag: stringGetter({ key: STRING_KEYS.NEW }),
                     },

src/pages/token/staking/StakingPage.tsx

@@ -5,18 +5,21 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DetachedSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+import { useStringGetter } from '@/hooks';
 
 import { StakingPanel } from './StakingPanel';
 import { StrideStakingPanel } from './StrideStakingPanel';
 import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
+import { STRING_KEYS } from '@/constants/localization';
 
 export default () => {
+  const stringGetter = useStringGetter();
   return (
     <DetachedSection>
       <Styled.HeaderSection>
         <ContentSectionHeader
-          title="Staking Rewards"
-          subtitle="Stake to earn APR. Unstaking can take up to 30 days."
+          title={stringGetter({ key: STRING_KEYS.STAKING_REWARDS })}
+          subtitle={stringGetter({ key: STRING_KEYS.STAKING_PAGE_SUBTITLE })}
         />
       </Styled.HeaderSection>
 

src/pages/token/staking/StakingPanel.tsx

@@ -23,7 +23,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
       className={className}
       slotHeaderContent={
         <Styled.Header>
-          <Styled.Title>Stake with Keplr</Styled.Title>
+          <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKE_WITH_KEPLR })}</Styled.Title>
           <Styled.Img src="/third-party/keplr.png" alt={stringGetter({ key: STRING_KEYS.KEPLR })} />
         </Styled.Header>
       }

src/pages/token/staking/StrideStakingPanel.tsx

@@ -24,7 +24,7 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
       slotHeaderContent={
         <Styled.Header>
           <Styled.Title>
-            Liquid Stake with Stride
+            {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_W_STRIDE })}
             <Tag isHighlighted>{stringGetter({ key: STRING_KEYS.NEW })}</Tag>
           </Styled.Title>
           <Styled.Img src="/third-party/stride.png" alt="Stride" />
@@ -33,7 +33,10 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
       onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavStride }))}
     >
       <Styled.Description>
-        {`Stake your ${chainTokenLabel} tokens for st${chainTokenLabel} which you can deploy around the ecosystem.`}
+        {stringGetter({
+          key: STRING_KEYS.LIQUID_STAKE_STRIDE_DESCRIPTION,
+          params: { TOKEN_DENOM: chainTokenLabel },
+        })}
         <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
           {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
         </Link>

src/views/dialogs/ExternalLinkDialog.tsx

@@ -15,6 +15,7 @@ type ElementProps = {
   link: string;
   linkDescription?: string;
   title?: ReactNode;
+  slotContent?: ReactNode;
   setIsOpen: (open: boolean) => void;
 };
 
@@ -24,6 +25,7 @@ export const ExternalLinkDialog = ({
   link,
   linkDescription,
   title,
+  slotContent,
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   return (
@@ -36,6 +38,7 @@ export const ExternalLinkDialog = ({
       }
     >
       <Styled.Content>
+        {slotContent}
         <p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
         <Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
           {buttonText ?? stringGetter({ key: STRING_KEYS.CONTINUE })}

src/views/dialogs/ExternalNavKeplrDialog.tsx

@@ -1,6 +1,9 @@
+import { useCallback } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
 
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 
@@ -9,6 +12,8 @@ import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 
+import { closeDialog, openDialog } from '@/state/dialogs';
+
 import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
@@ -18,9 +23,21 @@ type ElementProps = {
 export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { keplrDashboard, accountExportLearnMore } = useURLConfigs();
-
+  const dispatch = useDispatch();
   const { isTablet } = useBreakpoints();
 
+  const onExternalNavDialog = useCallback(() => {
+    dispatch(closeDialog());
+    dispatch(
+      openDialog({
+        type: DialogTypes.ExternalLink,
+        dialogProps: {
+          link: keplrDashboard,
+        },
+      })
+    );
+  }, [dispatch]);
+
   return (
     <Dialog
       isOpen
@@ -29,7 +46,11 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
       placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
       <Styled.Content>
-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={keplrDashboard}>
+        <Styled.Button
+          type={ButtonType.Button}
+          size={ButtonSize.XLarge}
+          onClick={onExternalNavDialog}
+        >
           <span>
             {stringGetter({
               key: STRING_KEYS.NAVIGATE_TO_KEPLR,
@@ -46,7 +67,11 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
           />
         </Styled.Button>
 
-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={accountExportLearnMore}>
+        <Styled.Button
+          type={ButtonType.Link}
+          size={ButtonSize.XLarge}
+          href={accountExportLearnMore}
+        >
           <span>
             {stringGetter({
               key: STRING_KEYS.LEARN_TO_EXPORT,

src/views/dialogs/ExternalNavStrideDialog.tsx

@@ -33,15 +33,22 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
         dialogProps: {
           buttonText: (
             <Styled.Span>
-              Liquid Stake on Stride <Icon iconName={IconName.LinkOut} />
+              {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE })}
+              <Icon iconName={IconName.LinkOut} />
             </Styled.Span>
           ),
           link: strideZoneApp,
-          title: 'Liquid staking and leaving website',
+          title: stringGetter({ key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING }),
+          slotContent: stringGetter({
+            key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING_DESCRIPTION,
+            params: {
+              CTA: stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE }),
+            },
+          }),
         },
       })
     );
-  }, [dispatch]);
+  }, [dispatch, stringGetter]);
 
   return (
     <Dialog
@@ -57,7 +64,12 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
           onClick={openExternalNavDialog}
         >
           <span>
-            <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>, Navigate to Stride Zone.
+            {stringGetter({
+              key: STRING_KEYS.NAVIGATE_TO_STRIDE,
+              params: {
+                STRONG_YES: <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>,
+              },
+            })}
           </span>
 
           <Styled.IconButton

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -44,7 +44,6 @@ export const GenerateKeys = ({
   onKeysDerived = () => {},
 }: ElementProps) => {
   const stringGetter = useStringGetter();
-  const { isMobile } = useBreakpoints();
 
   const [shouldRememberMe, setShouldRememberMe] = useState(false);
 
@@ -66,17 +65,30 @@ export const GenerateKeys = ({
 
     try {
       await matchNetwork?.();
+      return true;
     } catch (error) {
-      const { message, walletErrorType } = parseWalletError({ error, stringGetter });
+      const { message, walletErrorType, isErrorExpected } = parseWalletError({
+        error,
+        stringGetter,
+      });
+
+      if (!isErrorExpected) {
+        log('GenerateKeys/switchNetwork', error, { walletErrorType });
+      }
 
       if (message) {
-        log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
-        throw error;
       }
+
+      return false;
     }
   };
 
+  const switchNetworkAndDeriveKeys = async () => {
+    const networkSwitched = await switchNetwork();
+    if (networkSwitched) await deriveKeys();
+  };
+
   // 2. Derive keys from EVM account
   const { getWalletFromEvmSignature } = useDydxClient();
   const { getSubaccounts } = useAccounts();
@@ -154,11 +166,16 @@ export const GenerateKeys = ({
       setStatus(EvmDerivedAccountStatus.Derived);
     } catch (error) {
       setStatus(EvmDerivedAccountStatus.NotDerived);
-      const { message, walletErrorType } = parseWalletError({ error, stringGetter });
+      const { message, walletErrorType, isErrorExpected } = parseWalletError({
+        error,
+        stringGetter,
+      });
 
       if (message) {
         setError(message);
-        log('GenerateKeys/deriveKeys', error, { walletErrorType });
+        if (!isErrorExpected) {
+          log('GenerateKeys/deriveKeys', error, { walletErrorType });
+        }
       }
     }
   };
@@ -231,7 +248,7 @@ export const GenerateKeys = ({
           {!isMatchingNetwork ? (
             <Button
               action={ButtonAction.Primary}
-              onClick={() => switchNetwork().then(deriveKeys).then(onKeysDerived)}
+              onClick={() => switchNetworkAndDeriveKeys().then(onKeysDerived)}
               state={{ isLoading: isSwitchingNetwork }}
             >
               {stringGetter({ key: STRING_KEYS.SWITCH_NETWORK })}