Upgrade dependencies webpack craco

apps/ui/.eslintrc.json

@@ -50,7 +50,11 @@
       "error",
       { "ignoreClass": "fieldsOnly" }
     ],
-    "import/extensions": ["error", "always", { "ts": "never", "tsx": "never" }],
+    "import/extensions": [
+      "error",
+      "always",
+      { "ts": "never", "js": "never", "tsx": "never" }
+    ],
     "import/first": "error",
     "import/newline-after-import": "error",
     "import/no-absolute-path": "error",

apps/ui/.storybook/main.js

@@ -1,3 +1,5 @@
+const webpack = require("webpack");
+
 module.exports = {
   staticDirs: ["../public"],
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -20,8 +22,18 @@ module.exports = {
   },
   core: {
     disableTelemetry: true,
+    builder: "webpack5",
   },
   webpackFinal: async (config) => {
+    // Verbose output from Webpack to help debugging on CI
+    if (process.env.CI) config.stats = "verbose";
+
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        Buffer: ["buffer", "Buffer"],
+      }),
+    );
+
     config.externals = {
       "@certusone/wormhole-sdk": "{}",
     };

apps/ui/README.md

@@ -13,7 +13,6 @@ Run `yarn` to install all dependencies.
 Set required environmental variables:
 
 ```sh
-SKIP_PREFLIGHT_CHECK=true
 REACT_APP_AVALANCHE_DEVNET_RPC_URL=<ask for latest value>
 REACT_APP_POLYGON_DEVNET_RPC_URL=<ask for latest value>
 ```

apps/ui/craco.config.js

@@ -1,6 +1,6 @@
-const { addBeforeLoader, loaderByName, whenTest } = require("@craco/craco");
+const { whenTest } = require("@craco/craco");
 const SentryWebpackPlugin = require("@sentry/webpack-plugin");
-// const webpack = require("webpack");
+const webpack = require("webpack");
 
 module.exports = {
   babel: {
@@ -29,25 +29,18 @@ module.exports = {
   },
   webpack: {
     configure: (webpackConfig) => {
-      const wasmExtensionRegExp = /\.wasm$/;
-      webpackConfig.resolve.extensions.push(".wasm");
+      // Verbose output from Webpack to help debugging on CI
+      if (process.env.CI) webpackConfig.stats = "verbose";
 
-      webpackConfig.module.rules.forEach((rule) => {
-        (rule.oneOf || []).forEach((oneOf) => {
-          if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
-            oneOf.exclude.push(wasmExtensionRegExp);
-          }
-        });
+      webpackConfig.module.rules.push({
+        test: /\.wasm$/,
+        type: "webassembly/async",
       });
 
-      const wasmLoader = {
-        test: /\.wasm$/,
-        include: /node_modules\/(bridge|token-bridge)/,
-        loaders: ["wasm-loader"],
+      webpackConfig.experiments = {
+        asyncWebAssembly: true,
       };
 
-      addBeforeLoader(webpackConfig, loaderByName("file-loader"), wasmLoader);
-
       // Disable code splitting to prevent ChunkLoadError
       webpackConfig.optimization.runtimeChunk = false;
       webpackConfig.optimization.splitChunks = {
@@ -68,6 +61,27 @@ module.exports = {
           ? "static/js/[name].[hash].js"
           : "static/js/[name].[chunkhash].js";
 
+      // add polyfills that are not included in webpack 5
+      webpackConfig = {
+        ...webpackConfig,
+        ignoreWarnings: [/Failed to parse source map/],
+        resolve: {
+          ...webpackConfig.resolve,
+          fallback: {
+            fs: require.resolve("browserify-fs"),
+            path: require.resolve("path-browserify"),
+            stream: require.resolve("stream-browserify"),
+            crypto: require.resolve("crypto-browserify"),
+          },
+        },
+      };
+
+      webpackConfig.plugins.push(
+        new webpack.ProvidePlugin({
+          Buffer: ["buffer", "Buffer"],
+        }),
+      );
+
       if (process.env.NODE_ENV !== "development") {
         webpackConfig.devtool = "source-map";
 
@@ -84,6 +98,7 @@ module.exports = {
             release: process.env.SENTRY_RELEASE,
             include: "build",
             ignoreFile: ".gitignore",
+            urlPrefix: "~/static/js",
           }),
         ];
       }

apps/ui/package.json

@@ -3,9 +3,9 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "start": "NODE_ENV=development SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true craco start",
-    "build": "craco build",
-    "release": "SENTRY_RELEASE=$(git rev-parse --short HEAD) SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true craco build",
+    "start": "NODE_ENV=development DISABLE_ESLINT_PLUGIN=true craco start",
+    "build": "DISABLE_ESLINT_PLUGIN=true craco build",
+    "release": "SENTRY_RELEASE=$(git rev-parse --short HEAD) DISABLE_ESLINT_PLUGIN=true craco build && rm build/static/js/*.map && echo 'deleted sourcemaps files due to cloudflare file limits https://developers.cloudflare.com/pages/platform/limits/#file-size'",
     "test": "craco test --transformIgnorePatterns \"node_modules/(?!@project-serum/sol-wallet-adapter)/\"",
     "eject": "react-scripts eject",
     "format": "prettier --write \"./src/**/*.{ts,tsx}\" \".storybook/**/*.{js,ts,tsx}\"",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.2.6",
-    "@craco/craco": "^6.3.0",
+    "@craco/craco": "7.0.0-alpha.3",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^38.2.0",
     "@ethers-ancillary/bsc": "^0.0.3",
@@ -51,7 +51,9 @@
     "@solana/web3.js": "^1.33.0",
     "@swim-io/pool-math": "^0.1.1",
     "bn.js": "^5.2.0",
+    "browserify-fs": "^1.0.0",
     "constate": "^3.3.0",
+    "crypto-browserify": "^3.12.0",
     "decimal.js": "^10.3.1",
     "dexie": "^3.2.2",
     "ethers": "^5.4.4",
@@ -61,30 +63,31 @@
     "moment": "^2.29.1",
     "moralis": "^1.3.5",
     "node-sass": "^6",
+    "path-browserify": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "3.25.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "wasm-loader": "^1.3.0",
+    "react-scripts": "^5.0.1",
+    "stream-browserify": "^3.0.0",
     "web-vitals": "^1.0.1",
     "zustand": "^4.0.0-rc.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
     "@sentry/webpack-plugin": "^1.18.8",
-    "@storybook/addon-actions": "^6.5.2",
-    "@storybook/addon-docs": "^6.5.2",
-    "@storybook/addon-essentials": "^6.5.2",
-    "@storybook/addon-interactions": "^6.5.2",
-    "@storybook/addon-links": "^6.5.2",
-    "@storybook/builder-webpack4": "^6.5.2",
-    "@storybook/manager-webpack4": "^6.5.2",
-    "@storybook/node-logger": "^6.5.2",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.5.2",
-    "@storybook/testing-library": "^0.0.11",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -110,8 +113,7 @@
     "jest-mock-extended": "^2.0.5",
     "prettier": "^2.3.2",
     "typechain": "^5.1.2",
-    "typescript": "~4.2",
-    "webpack": "4.44.2"
+    "typescript": "~4.2"
   },
   "eslintConfig": {
     "overrides": [

apps/ui/src/components/AddForm.tsx

@@ -16,7 +16,7 @@ import {
 import type Decimal from "decimal.js";
 import type { FormEvent, ReactElement } from "react";
 import { useEffect, useMemo, useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import {
   ECOSYSTEM_IDS,

apps/ui/src/components/ConnectButton.tsx

@@ -2,7 +2,7 @@ import type { EuiButtonProps, PropsForButton } from "@elastic/eui";
 import { EuiButton, EuiHideFor, EuiIcon, EuiShowFor } from "@elastic/eui";
 import type { ReactElement } from "react";
 import { useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { EcosystemId } from "../config";
 import { Protocol } from "../config";

apps/ui/src/components/EnvSelector.tsx

@@ -10,7 +10,7 @@ import {
 import * as Sentry from "@sentry/react";
 import { useState } from "react";
 import type { ReactElement } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { isValidEnv } from "../config";
 import { selectEnvs } from "../core/selectors";

apps/ui/src/components/EstimatedTxFeesCallout.tsx

@@ -1,6 +1,6 @@
 import { EuiCallOut, EuiLoadingSpinner, EuiSpacer } from "@elastic/eui";
 import type { FC } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { decimalRemoveTrailingZero } from "../amounts";
 import { ECOSYSTEM_IDS } from "../config";

apps/ui/src/components/RecentInteractions.tsx

@@ -11,7 +11,7 @@ import type { AccountInfo as TokenAccountInfo } from "@solana/spl-token";
 import moment from "moment";
 import type { ReactElement } from "react";
 import { Fragment, useEffect, useMemo, useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { selectConfig } from "../core/selectors";
 import { useEnvironment } from "../core/store";

apps/ui/src/components/RemoveForm.tsx

@@ -16,7 +16,7 @@ import {
 import Decimal from "decimal.js";
 import type { FormEvent, ReactElement } from "react";
 import { useEffect, useMemo, useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { PoolSpec, TokenSpec } from "../config";
 import { EcosystemId, ecosystems } from "../config";

apps/ui/src/components/SolanaTpsWarning.tsx

@@ -2,7 +2,7 @@ import { EuiCallOut, EuiSpacer, EuiText } from "@elastic/eui";
 import { Connection } from "@solana/web3.js";
 import type { ReactElement } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { Protocol } from "../config";
 import { selectConfig } from "../core/selectors";

apps/ui/src/components/SwapForm.tsx

@@ -9,7 +9,7 @@ import {
 import type Decimal from "decimal.js";
 import type { FormEvent, ReactElement, ReactNode } from "react";
 import { useEffect, useState } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { PoolSpec } from "../config";
 import { EcosystemId } from "../config";

apps/ui/src/components/molecules/TokenAmountInput.tsx

@@ -10,7 +10,7 @@ import {
   EuiToolTip,
 } from "@elastic/eui";
 import type React from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { TokenSpec } from "../../config";
 import { getNativeTokenDetails } from "../../config";

apps/ui/src/contexts/evmConnection.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
 import { useContext, useMemo } from "react";
 import * as React from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { EvmEcosystemId } from "../config";
 import { EcosystemId, Env, Protocol, chains } from "../config";

apps/ui/src/contexts/solanaConnection.tsx

@@ -2,7 +2,7 @@
 import { Keypair } from "@solana/web3.js";
 import type { ReactElement, ReactNode } from "react";
 import { createContext, useContext, useEffect, useMemo } from "react";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { DEFAULT_ENV, Protocol, configs } from "../config";
 import { selectConfig } from "../core/selectors";

apps/ui/src/core/store/useEnvironment.ts

@@ -2,7 +2,7 @@ import { produce } from "immer";
 import create from "zustand";
 import type { GetState, SetState, StoreApi } from "zustand";
 import type { StateStorage } from "zustand/middleware";
-import { persist } from "zustand/middleware.js";
+import { persist } from "zustand/middleware";
 
 import { DEFAULT_ENV, isValidEnv } from "../../config";
 

apps/ui/src/core/store/useWalletAdapter.ts

@@ -2,7 +2,7 @@ import { produce } from "immer";
 import type { GetState, SetState } from "zustand";
 import create from "zustand";
 import type { StateStorage } from "zustand/middleware";
-import { persist } from "zustand/middleware.js";
+import { persist } from "zustand/middleware";
 
 import { Protocol } from "../../config";
 import { captureException } from "../../errors";

apps/ui/src/hooks/crossEcosystem/useChainsByEcosystem.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { ChainSpec, EvmSpec, SolanaSpec } from "../../config";
 import { EcosystemId, Protocol } from "../../config";

apps/ui/src/hooks/crossEcosystem/useTokensByEcosystem.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { TokenSpec } from "../../config";
 import { EcosystemId } from "../../config";

apps/ui/src/hooks/interaction/useCreateInteractionState.ts

@@ -1,6 +1,6 @@
 import type { AccountInfo as TokenAccount } from "@solana/spl-token";
 import type PoolMath from "@swim-io/pool-math";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import {
   usePoolMathByPoolIds,

apps/ui/src/hooks/interaction/useInteraction.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { selectConfig } from "../../core/selectors";
 import { useEnvironment } from "../../core/store";

apps/ui/src/hooks/interaction/useRequiredEcosystemsForInteraction.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { EcosystemId } from "../../config";
 import { selectConfig } from "../../core/selectors";

apps/ui/src/hooks/interaction/useRequiredPoolsForInteraction.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { PoolSpec } from "../../config";
 import { selectConfig } from "../../core/selectors";

apps/ui/src/hooks/interaction/useRequiredTokensForInteraction.ts

@@ -1,4 +1,4 @@
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { TokenSpec } from "../../config";
 import { selectConfig } from "../../core/selectors";

apps/ui/src/hooks/interaction/useSolanaPoolOperationsMutation.ts

@@ -1,6 +1,6 @@
 import type { AccountInfo as TokenAccount } from "@solana/spl-token";
 import { useMutation } from "react-query";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { useSolanaWallet, useSplTokenAccountsQuery } from "..";
 import type { TokenSpec } from "../../config";

apps/ui/src/hooks/interaction/useToSolanaTransferMutation.ts

@@ -5,7 +5,7 @@ import {
 import { Keypair } from "@solana/web3.js";
 import type { ethers } from "ethers";
 import { useMutation } from "react-query";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import type { EvmEcosystemId } from "../../config";
 import {

apps/ui/src/hooks/solana/useAccountNftsQuery.ts

@@ -3,7 +3,7 @@ import type { MetadataJson, MetadataJsonAttribute } from "@metaplex/js";
 import { PublicKey } from "@solana/web3.js";
 import type { UseQueryResult } from "react-query";
 import { useQuery } from "react-query";
-import shallow from "zustand/shallow.js";
+import shallow from "zustand/shallow";
 
 import { Protocol } from "../../config";
 import { useSolanaConnection } from "../../contexts";