update switch chain error requirements check

scripts/inject-smartbanner.js

@@ -32,20 +32,20 @@ if (
     /* hardcoded injection depending on whether the app is available on App Store and/or Google Play */
 
     if (SMARTBANNER_APPSTORE_URL) {
-      smartbanner = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n${smartbanner}`;
+      smartbanner = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n` + smartbanner;
     }
     if (SMARTBANNER_GOOGLEPLAY_URL) {
-      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n${smartbanner}`;
+      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n` + smartbanner;
     }
     if (SMARTBANNER_APPSTORE_URL) {
       if (SMARTBANNER_GOOGLEPLAY_URL) {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n${smartbanner}`;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n` + smartbanner;
       } else {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n${smartbanner}`;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n` + smartbanner;
       }
     } else {
       if (SMARTBANNER_GOOGLEPLAY_URL) {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n${smartbanner}`;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n` + smartbanner;
       }
     }
 

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/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/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 })}