Merge pull request #439 from wigwamapp/deps-upgrade-09-2024

Deps upgrade 09 2024

.ncurc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  reject: ["@tippyjs/react", "nanoid", "eslint"],
+  reject: ["@tippyjs/react", "nanoid", "eslint", "@metamask/eth-sig-util"],
 };

package.json

@@ -19,55 +19,55 @@
     "check-updates": "npx npm-check-updates"
   },
   "dependencies": {
-    "@amplitude/analytics-core": "2.2.8",
-    "@amplitude/analytics-types": "2.5.1",
+    "@amplitude/analytics-core": "2.5.2",
+    "@amplitude/analytics-types": "2.8.2",
     "@amplitude/ua-parser-js": "0.7.33",
-    "@dicebear/avataaars": "8.0.2",
-    "@dicebear/core": "8.0.2",
-    "@dicebear/personas": "8.0.2",
-    "@emotion/is-prop-valid": "1.2.2",
-    "@ensdomains/ens-avatar": "1.0.0-alpha.2.ethers.6",
-    "@ledgerhq/hw-app-eth": "6.36.1",
-    "@ledgerhq/hw-transport": "6.30.6",
+    "@dicebear/avataaars": "9.2.2",
+    "@dicebear/core": "9.2.2",
+    "@dicebear/personas": "9.2.2",
+    "@emotion/is-prop-valid": "1.3.1",
+    "@ensdomains/ens-avatar": "1.0.0",
+    "@ledgerhq/hw-app-eth": "6.38.1",
+    "@ledgerhq/hw-transport": "6.31.3",
     "@ledgerhq/hw-transport-webauthn": "5.36.0-deprecated",
-    "@ledgerhq/hw-transport-webhid": "6.28.6",
+    "@ledgerhq/hw-transport-webhid": "6.29.3",
     "@metamask/eth-sig-util": "7.0.2",
     "@metamask/safe-event-emitter": "3.1.1",
-    "@microlink/react-json-view": "1.23.0",
-    "@noble/hashes": "1.4.0",
-    "@radix-ui/react-accordion": "1.1.2",
-    "@radix-ui/react-avatar": "1.0.4",
-    "@radix-ui/react-checkbox": "1.0.4",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-dialog": "1.0.5",
-    "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-radio-group": "1.1.3",
-    "@radix-ui/react-scroll-area": "1.0.5",
-    "@radix-ui/react-switch": "1.0.3",
-    "@radix-ui/react-tabs": "1.0.4",
-    "@radix-ui/react-toast": "1.1.5",
-    "@radix-ui/react-toggle-group": "1.0.4",
-    "@scure/bip39": "1.3.0",
-    "@tanstack/react-virtual": "3.5.1",
+    "@microlink/react-json-view": "1.23.1",
+    "@noble/hashes": "1.5.0",
+    "@radix-ui/react-accordion": "1.2.0",
+    "@radix-ui/react-avatar": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.1",
+    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-popover": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.0",
+    "@radix-ui/react-scroll-area": "1.1.0",
+    "@radix-ui/react-switch": "1.1.0",
+    "@radix-ui/react-tabs": "1.1.0",
+    "@radix-ui/react-toast": "1.2.1",
+    "@radix-ui/react-toggle-group": "1.1.0",
+    "@scure/bip39": "1.4.0",
+    "@tanstack/react-virtual": "3.10.8",
     "@tippyjs/react": "4.2.5",
     "async-retry": "1.3.3",
-    "axios": "1.7.2",
+    "axios": "1.7.7",
     "axios-fetch-adapter": "./.vendor/axios-fetch-adapter",
     "bignumber.js": "9.1.2",
-    "boring-avatars": "1.10.2",
+    "boring-avatars": "1.11.2",
     "buffer": "6.0.3",
     "canvas-txt": "4.1.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
-    "date-fns": "3.6.0",
+    "date-fns": "4.1.0",
     "dequal": "2.0.3",
-    "dexie": "4.0.7",
+    "dexie": "4.0.8",
     "dexie-export-import": "4.1.2",
     "effector": "23.2.2",
     "eth-phishing-detect": "1.2.0",
     "eth-rpc-errors": "4.0.3",
-    "ethers": "6.13.0",
+    "ethers": "6.13.2",
     "expiry-map": "2.0.0",
     "final-form": "4.20.10",
     "final-form-focus": "1.1.2",
@@ -76,53 +76,53 @@
     "fuse.js": "7.0.0",
     "hashids": "2.3.0",
     "inter-ui": "4.0.2",
-    "jotai": "2.8.3",
+    "jotai": "2.10.0",
     "kdbxweb": "2.1.1",
     "mem": "9.0.2",
     "memoize-one": "6.0.0",
-    "multiformats": "13.1.1",
+    "multiformats": "13.3.0",
     "nanoid": "3.3.4",
     "pako": "2.1.0",
-    "qrcode.react": "3.1.0",
+    "qrcode.react": "4.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-final-form": "6.5.9",
     "react-merge-refs": "2.1.1",
-    "react-number-format": "5.4.0",
+    "react-number-format": "5.4.2",
     "react-transition-group": "4.4.5",
     "spacingjs": "1.0.8",
-    "superstruct": "1.0.4",
+    "superstruct": "2.0.2",
     "threads": "1.7.0",
-    "ts-pattern": "5.2.0",
-    "use-debounce": "10.0.1",
+    "ts-pattern": "5.3.1",
+    "use-debounce": "10.0.3",
     "use-force-update": "1.0.11",
     "use-resize-observer": "9.1.0",
     "webextension-polyfill": "0.12.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/runtime": "7.24.7",
+    "@babel/core": "7.25.2",
+    "@babel/runtime": "7.25.6",
     "@svgr/webpack": "8.1.0",
-    "@swc/core": "1.5.29",
+    "@swc/core": "1.7.26",
     "@swc/jest": "./.vendor/swc-jest",
-    "@tailwindcss/typography": "0.5.13",
-    "@testing-library/jest-dom": "6.4.6",
+    "@tailwindcss/typography": "0.5.15",
+    "@testing-library/jest-dom": "6.5.0",
     "@typechain/ethers-v6": "0.5.1",
     "@types/async-retry": "1.4.8",
-    "@types/chrome": "0.0.268",
+    "@types/chrome": "0.0.271",
     "@types/final-form-focus": "1.1.7",
     "@types/fontfaceobserver": "2.1.3",
-    "@types/jest": "29.5.12",
+    "@types/jest": "29.5.13",
     "@types/pako": "2.0.3",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.8",
     "@types/react-dom": "18.3.0",
-    "@types/react-transition-group": "4.4.10",
-    "@types/webextension-polyfill": "0.10.7",
+    "@types/react-transition-group": "4.4.11",
+    "@types/webextension-polyfill": "0.12.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "7.13.0",
-    "@typescript-eslint/parser": "7.13.0",
-    "autoprefixer": "10.4.19",
+    "@typescript-eslint/eslint-plugin": "8.6.0",
+    "@typescript-eslint/parser": "8.6.0",
+    "autoprefixer": "10.4.20",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",
@@ -132,33 +132,33 @@
     "dotenv": "16.4.5",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.36.1",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-webpack-plugin": "4.2.0",
     "fake-indexeddb": "6.0.0",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.6.0",
-    "husky": "9.0.11",
+    "husky": "9.1.6",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-webextension-mock": "3.9.0",
-    "lint-staged": "15.2.7",
-    "mini-css-extract-plugin": "2.9.0",
-    "postcss": "8.4.38",
+    "lint-staged": "15.2.10",
+    "mini-css-extract-plugin": "2.9.1",
+    "postcss": "8.4.47",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "react-error-guard": "1.1.4",
     "string-hash": "1.1.3",
     "swc-loader": "0.2.6",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "3.4.12",
     "terser-webpack-plugin": "5.3.10",
     "typechain": "8.3.2",
-    "typescript": "5.4.5",
+    "typescript": "5.5.x",
     "url-loader": "4.1.1",
-    "webpack": "5.92.0",
+    "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",
     "webpack-sources": "3.2.3",
@@ -170,11 +170,18 @@
   ],
   "resolutions": {
     "flux": "./.vendor/flux",
-    "axios": ">=1.6.4",
+    "axios": ">=1.7.4",
     "braces": ">=3.0.3",
     "@solana/web3.js": ">=1.87.7",
     "react": ">=18.3.1",
-    "react-dom": ">=18.3.1"
+    "react-dom": ">=18.3.1",
+    "elliptic": ">=6.5.7",
+    "ws": ">=8.17.1",
+    "dompurify": ">=3.1.3",
+    "fast-xml-parser": ">=4.4.1",
+    "micromatch": ">=4.0.8",
+    "@metamask/utils": "<=8.2.1",
+    "@metamask/abi-utils": "<=2.0.2"
   },
   "engines": {
     "node": ">=18.12.0"

src/app/components/blocks/NetworksButton.tsx

@@ -117,6 +117,7 @@ const NetworksModal: FC<
   const { confirm, alert } = useDialog();
 
   const [searchValue, setSearchValue] = useState("");
+  const [contentMounted, setContentMounted] = useState(false);
 
   const balancesMap = useMemo(
     () =>
@@ -238,6 +239,7 @@ const NetworksModal: FC<
   }, [searchValue, testnetsVisibility]);
 
   const rowVirtualizer = useVirtualizer({
+    enabled: contentMounted,
     count: filteredNetworkList.length,
     getScrollElement: () => scrollAreaRef.current,
     estimateSize: () => {
@@ -307,6 +309,8 @@ const NetworksModal: FC<
 
         <Command.List>
           <Command.Group className="relative">
+            <Mount onMountChange={(m) => setContentMounted(m)} />
+
             <ScrollAreaContainer
               ref={scrollAreaRef}
               className="w-full h-full box-content -mr-5 pr-5 grow"
@@ -485,3 +489,15 @@ function compareByInstalledNetworks(
 
   return 0;
 }
+
+const Mount: FC<{ onMountChange: (mounted: boolean) => void }> = ({
+  onMountChange,
+}) => {
+  useEffect(() => {
+    onMountChange(true);
+    return () => onMountChange(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+};

src/app/components/blocks/Sidebar.Links.tsx

@@ -16,9 +16,7 @@ import { ReactComponent as SettingsIcon } from "app/icons/Settings.svg";
 import { ReactComponent as SupportIcon } from "app/icons/Support.svg";
 import { ReactComponent as ActivityIcon } from "app/icons/ActivityIcon.svg";
 import { ReactComponent as RewardsIcon } from "app/icons/Rewards.svg";
-import { ReactComponent as BugIcon } from "app/icons/Bug.svg";
 import * as SupportAlert from "app/components/elements/SupportAlert";
-import * as FindBug from "app/components/elements/FindBug";
 import { useDialog } from "app/hooks/dialog";
 import { activityModalAtom, receiveModalAtom } from "app/atoms";
 import { useActivityBadge, useSwapBadge, useAccounts } from "app/hooks";
@@ -79,15 +77,15 @@ const useSidebarLinks = () => {
         label: "Rewards",
         Icon: RewardsIcon,
       },
-      {
-        label: "Bug bounty",
-        Icon: BugIcon,
-        action: () =>
-          alert({
-            title: <FindBug.Title />,
-            content: <FindBug.Content />,
-          }),
-      },
+      // {
+      //   label: "Bug bounty",
+      //   Icon: BugIcon,
+      //   action: () =>
+      //     alert({
+      //       title: <FindBug.Title />,
+      //       content: <FindBug.Content />,
+      //     }),
+      // },
       // {
       //   route: Page.Apps,
       //   label: "Apps",
@@ -100,7 +98,6 @@ const useSidebarLinks = () => {
     swapBadgeAmount,
     setActivityOpened,
     setReceiveOpened,
-    alert,
   ]);
 
   const NavLinksSecondary = useMemo(() => {

src/app/components/elements/AssetLogo.tsx

@@ -84,7 +84,7 @@ const AssetLogoAvatar: FC<
     );
 
     const cached = srcCache.get(seed);
-    const src = cached !== null ? cached ?? srcs[srcIndex] : null;
+    const src = cached !== null ? (cached ?? srcs[srcIndex]) : null;
 
     return src ? (
       <Avatar

src/app/components/elements/Avatar.tsx

@@ -13,8 +13,10 @@ import classNames from "clsx";
 
 import { ReactComponent as FallbackIconPrimitive } from "app/icons/Fallback.svg";
 
+export type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+
 export type LoadingStatus = {
-  state: AvatarPrimitive.ImageLoadingStatus;
+  state: ImageLoadingStatus;
   delayFinished: boolean;
 };
 
@@ -50,7 +52,7 @@ const Avatar = memo(
       ref,
     ) => {
       const [loadingState, setLoadingState] =
-        useState<AvatarPrimitive.ImageLoadingStatus>("idle");
+        useState<ImageLoadingStatus>("idle");
       const [delayFinished, setDelayFinished] = useState(false);
 
       const notLoaded = loadingState === "idle" || loadingState === "loading";

src/app/components/elements/NetworkIcon.tsx

@@ -69,7 +69,7 @@ const NetworkIconAvatar: FC<
   );
 
   const cached = srcCache.get(seed);
-  const src = cached !== null ? cached ?? srcs[srcIndex] : null;
+  const src = cached !== null ? (cached ?? srcs[srcIndex]) : null;
 
   return src ? (
     <Avatar

src/app/components/elements/NetworkSelect.tsx

@@ -55,7 +55,7 @@ const NetworkSelect: FC<NetworkSelectProps> = ({
   const allNetworks = useMemo(
     () =>
       !balancesMap?.size
-        ? allNetworksPure ?? []
+        ? (allNetworksPure ?? [])
         : (allNetworksPure ?? [])
             .map((n) => ({
               ...n,
@@ -72,7 +72,7 @@ const NetworkSelect: FC<NetworkSelectProps> = ({
 
   const handleNetworkChange = useCallback(
     (chainId: number) => {
-      changeInternalChainId && setChainId(chainId);
+      if (changeInternalChainId) setChainId(chainId);
       onChange?.(chainId);
     },
     [changeInternalChainId, setChainId, onChange],

src/app/components/elements/ProfileButton.tsx

@@ -212,7 +212,7 @@ const ProfilesModal: FC<SecondaryModalProps & { size?: Size }> = ({
   const changeAccount = useCallback(
     (address: string) => {
       setAccountAddress(address);
-      address !== currentAccount.address && onOpenChange?.(false);
+      if (address !== currentAccount.address) onOpenChange?.(false);
     },
     [currentAccount, onOpenChange, setAccountAddress],
   );

src/app/components/screens/approvals/Transaction.tsx

@@ -370,7 +370,7 @@ const ApproveTransaction: FC<ApproveTransactionProps> = ({ approval }) => {
   }
 
   useEffect(() => {
-    lastError && console.info(Object.values(lastError));
+    if (lastError) console.info(Object.values(lastError));
   }, [lastError]);
 
   const handleApprove = useCallback(

src/app/helpers.ts

@@ -6,7 +6,7 @@ import { Destination, toHash, navigate } from "lib/navigation";
 
 export async function openInTab(to?: Destination, merge?: boolean | string[]) {
   if (!isPopup()) {
-    to && navigate(to);
+    if (to) navigate(to);
     return;
   }