Merge branch 'master' into @esteban/refresh-assets-after-swap

lavamoat/build-webpack/policy.json

@@ -220,6 +220,15 @@
         "util.deprecate": true
       }
     },
+    "circular-dependency-plugin": {
+      "builtin": {
+        "path.relative": true,
+        "util._extend": true
+      },
+      "globals": {
+        "process.cwd": true
+      }
+    },
     "copy-webpack-plugin": {
       "builtin": {
         "crypto.createHash": true,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser-extension",
   "license": "GPL-3.0-only",
-  "version": "1.1.8",
+  "version": "1.1.11",
   "scripts": {
     "//enable dev mode": "",
     "devmode:on": "sed -i'' -e 's/IS_DEV.*/IS_DEV=true/g' .env",

scripts/webpack.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require('webpack');
-// const CircularDependencyPlugin = require('circular-dependency-plugin')
+const CircularDependencyPlugin = require('circular-dependency-plugin')
 
 const config = require('../webpack.config');
 const DepShieldPlugin = require('../DepShield');
@@ -16,6 +16,9 @@ require('ts-loader');
 require('typescript');
 const TerserPlugin = require('terser-webpack-plugin');
 
+const MAX_CYCLES = 8;
+let numCyclesDetected = 0;
+
 webpack({ ...config, 
   optimization: {
     minimize: true,
@@ -33,19 +36,31 @@ webpack({ ...config,
   mode: 'production',
   plugins: [
     ...config.plugins,
-    // new CircularDependencyPlugin({
-    //   // exclude detection of files based on a RegExp
-    //   exclude: /node_modules/,
-    //   // include specific files based on a RegExp
-    //   include: /src/,
-    //   // add errors to webpack instead of warnings
-    //   failOnError: true,
-    //   // allow import cycles that include an asyncronous import,
-    //   // e.g. via import(/* webpackMode: "weak" */ './file.js')
-    //   allowAsyncCycles: false,
-    //   // set the current working directory for displaying module paths
-    //   cwd: process.cwd(),
-    // }),
+    new CircularDependencyPlugin({
+      // exclude detection of files based on a RegExp
+      exclude: /node_modules/,
+      // include specific files based on a RegExp
+      include: /src/,
+      onStart({ compilation }) {
+        numCyclesDetected = 0;
+      },
+      onDetected({ module: webpackModuleRecord, paths, compilation }) {
+        numCyclesDetected++;
+        compilation.warnings.push(new Error(paths.join(' -> ')))
+      },
+      onEnd({ compilation }) {
+        if (numCyclesDetected > MAX_CYCLES) {
+          compilation.errors.push(new Error(
+            `Detected ${numCyclesDetected} cycles which exceeds configured limit of ${MAX_CYCLES}`
+          ));
+        }
+      },
+      // allow import cycles that include an asyncronous import,
+      // e.g. via import(/* webpackMode: "weak" */ './file.js')
+      allowAsyncCycles: false,
+      // set the current working directory for displaying module paths
+      cwd: process.cwd(),
+    }),
     new DepShieldPlugin({
       failOnError: true,
       cwd: process.cwd(),

src/core/state/index.ts

@@ -11,7 +11,6 @@ export {
 } from './currentSettings';
 export { deviceIdStore, useDeviceIdStore } from './device';
 export { gasStore, useGasStore } from './gas';
-export { syncStores } from './internal/syncStores';
 export { nonceStore, useNonceStore } from './nonce';
 export {
   notificationWindowStore,

src/entries/background/index.ts

@@ -3,7 +3,7 @@ import { uuid4 } from '@sentry/utils';
 import { initFCM } from '~/core/firebase/fcm';
 import { initializeMessenger } from '~/core/messengers';
 import { initializeSentry } from '~/core/sentry';
-import { syncStores } from '~/core/state';
+import { syncStores } from '~/core/state/internal/syncStores';
 import { createWagmiClient } from '~/core/wagmi';
 
 import { handleInstallExtension } from './handlers/handleInstallExtension';

src/entries/popup/components/ImportWallet/ImportWalletSelection.tsx

@@ -161,9 +161,21 @@ export const ImportWalletSelection = ({ onboarding = false }) => {
                   color="labelTertiary"
                   align="center"
                 >
-                  {i18n.t('import_wallet_selection.description', {
-                    count: hasRecentlyUsedWallet ? accountsToImport.length : 0,
-                  })}
+                  {i18n.t(
+                    // eslint-disable-next-line no-nested-ternary
+                    hasRecentlyUsedWallet
+                      ? accountsToImport.length > 1
+                        ? 'import_wallet_selection.description.other'
+                        : 'import_wallet_selection.description.one'
+                      : 'import_wallet_selection.description.zero',
+                    (hasRecentlyUsedWallet &&
+                      accountsToImport.length > 0 && {
+                        count: hasRecentlyUsedWallet
+                          ? accountsToImport.length
+                          : 0,
+                      }) ||
+                      undefined,
+                  )}
                 </Text>
               </Box>
             )}

src/entries/popup/hooks/useWalletsSummary.ts

@@ -112,15 +112,15 @@ export const useWalletsSummary = ({ addresses }: { addresses: Address[] }) => {
 
   const walletsSummary: { [key: Address]: WalletSummary } = useMemo(
     () =>
-      addresses.reduce((prev: { [key: Address]: WalletSummary }, address) => {
+      addresses?.reduce((prev: { [key: Address]: WalletSummary }, address) => {
         prev[address] = parseAddressSummary({
           address,
           addysSummary: data,
           currentCurrency,
           nativeAssets,
         });
         return prev;
-      }, {}),
+      }, {}) || [],
     [addresses, currentCurrency, data, nativeAssets],
   );
 

src/entries/popup/index.ts

@@ -3,7 +3,7 @@ import './global.css';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { syncStores } from '~/core/state';
+import { syncStores } from '~/core/state/internal/syncStores';
 import { initThemingBody, initThemingCritical } from '~/design-system';
 
 import { App } from './App';

src/entries/popup/pages/home/index.tsx

@@ -211,7 +211,7 @@ function Content({ children }: PropsWithChildren) {
   return (
     <Box
       background="surfacePrimaryElevated"
-      style={{ flex: 1, position: 'relative', contentVisibility: 'auto' }}
+      style={{ flex: 1, position: 'relative', contentVisibility: 'visible' }}
     >
       {/** spring transformY to imitate scroll bounce*/}
       <Box height="full" as={motion.div} style={{ y }}>

src/entries/popup/pages/hw/addByIndexSheet.tsx

@@ -28,7 +28,7 @@ import { useDebounce } from '../../hooks/useDebounce';
 import { useNativeAssetForNetwork } from '../../hooks/useNativeAssetForNetwork';
 import usePrevious from '../../hooks/usePrevious';
 
-import { AccountIndex } from './walletList';
+import { AccountIndex } from './walletList/AccountIndex';
 
 export const AddByIndexSheet = ({
   show,

src/entries/popup/pages/hw/walletList/AccountIndex.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { i18n } from '~/core/languages';
+import { Box, Inline, Text } from '~/design-system';
+
+import {
+  accountIndexHiddenHoverSiblingStyle,
+  accountIndexHiddenHoverStyle,
+  accountIndexHoverContainerStyle,
+} from './walletList.css';
+
+export const AccountIndex = ({ index }: { index: number }) => {
+  return (
+    <Box
+      borderRadius="8px"
+      borderWidth="2px"
+      borderColor={'separatorSecondary'}
+      padding={'6px'}
+      marginTop={'-5px'}
+      className={accountIndexHoverContainerStyle}
+    >
+      <Inline space="2px">
+        <Box
+          className={clsx([
+            accountIndexHiddenHoverStyle,
+            'account-index-hidden',
+          ])}
+        >
+          <Text
+            size="11pt"
+            weight="bold"
+            color={'labelTertiary'}
+            align="center"
+          >
+            {i18n.t('hw.index_label')}
+          </Text>
+        </Box>
+        <Box className={accountIndexHiddenHoverSiblingStyle}>
+          <Text
+            size="11pt"
+            weight="bold"
+            color={'labelTertiary'}
+            align="center"
+          >
+            # {index}
+          </Text>
+        </Box>
+      </Inline>
+    </Box>
+  );
+};

src/entries/popup/pages/hw/walletList/index.tsx

@@ -1,5 +1,4 @@
 import { Address } from '@wagmi/core';
-import clsx from 'clsx';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -32,55 +31,10 @@ import { useWalletsSummary } from '../../../hooks/useWalletsSummary';
 import { ROUTES } from '../../../urls';
 import { AddByIndexSheet } from '../addByIndexSheet';
 
-import {
-  accountIndexHiddenHoverSiblingStyle,
-  accountIndexHiddenHoverStyle,
-  accountIndexHoverContainerStyle,
-} from './walletList.css';
+import { AccountIndex } from './AccountIndex';
 
 type Vendor = 'Ledger' | 'Trezor';
 
-export const AccountIndex = ({ index }: { index: number }) => {
-  return (
-    <Box
-      borderRadius="8px"
-      borderWidth="2px"
-      borderColor={'separatorSecondary'}
-      padding={'6px'}
-      marginTop={'-5px'}
-      className={accountIndexHoverContainerStyle}
-    >
-      <Inline space="2px">
-        <Box
-          className={clsx([
-            accountIndexHiddenHoverStyle,
-            'account-index-hidden',
-          ])}
-        >
-          <Text
-            size="11pt"
-            weight="bold"
-            color={'labelTertiary'}
-            align="center"
-          >
-            {i18n.t('hw.index_label')}
-          </Text>
-        </Box>
-        <Box className={accountIndexHiddenHoverSiblingStyle}>
-          <Text
-            size="11pt"
-            weight="bold"
-            color={'labelTertiary'}
-            align="center"
-          >
-            # {index}
-          </Text>
-        </Box>
-      </Inline>
-    </Box>
-  );
-};
-
 const WalletListHW = () => {
   const [showAddByIndexSheet, setShowAddByIndexSheet] =
     useState<boolean>(false);

src/entries/popup/pages/messages/SendTransaction/index.tsx

@@ -109,16 +109,15 @@ export function SendTransaction({
           chainId: txData.chainId as ChainId,
           transaction,
         });
-      }
-
-      approveRequest(result.hash);
-      setWaitingForDevice(false);
+        approveRequest(result.hash);
+        setWaitingForDevice(false);
 
-      analytics.track(event.dappPromptSendTransactionApproved, {
-        chainId: txData.chainId,
-        dappURL: appHost,
-        dappName: appName,
-      });
+        analytics.track(event.dappPromptSendTransactionApproved, {
+          chainId: txData.chainId,
+          dappURL: appHost,
+          dappName: appName,
+        });
+      }
     } finally {
       setWaitingForDevice(false);
       setLoading(false);

static/manifest.json

@@ -67,7 +67,7 @@
     "notifications"
   ],
   "short_name": "Rainbow",
-  "version": "1.1.8",
+  "version": "1.1.11",
   "web_accessible_resources": [
     {
       "matches": [