feat: migrate to vite + web3-onboard upgrades (#780)

* wip * chore: revert `VITE_` to `REACT_APP_` env vars * test: fix jest * test: fix cypress * fixup * fixup * fixup * fixup * fixup * fix: esm imports * fix(vercel): support esm * fix: use cjs * fixup * ci: increase heap size * fix serve command * ci: fix e2e tests * fix: svg icons * chore: replace react-popper with react-tooltip * fixup * fixup
across-protocol · Jul 6, 2023 · a417240 · a417240 · vercel · Jul 6, 2023
1 parent 8f50482
commit a417240
Show file tree

Hide file tree

Showing 31 changed files with 4,246 additions and 6,022 deletions.
diff --git a/.github/workflows/lint-test.yaml b/.github/workflows/lint-test.yaml
@@ -46,11 +46,13 @@ jobs:
         run: yarn cypress install
       - name: Build app
         env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
           REACT_APP_PUBLIC_INFURA_ID: ${{ secrets.CYPRESS_PUBLIC_INFURA_ID }}
           REACT_APP_PUBLIC_ONBOARD_API_KEY: ${{ secrets.CYPRESS_PUBLIC_ONBOARD_API_KEY }}
           REACT_APP_REWARDS_API_URL: ${{ secrets.CYPRESS_REWARDS_API_URL }}
           REACT_APP_CHAIN_137_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_137_PROVIDER_URL }}
           REACT_APP_CHAIN_42161_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_42161_PROVIDER_URL }}
+          REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.CYPRESS_WALLET_CONNECT_PROJECT_ID }}
           REACT_APP_MOCK_SERVERLESS: true
         run: yarn build
       - name: Run hardhat mainnet fork

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -80,9 +80,4 @@ Cypress.Commands.add("connectInjectedWallet", (connectWalletElementDataId) => {
     .find(".wallets-container")
     .contains("Detected Wallet")
     .click();
-
-  cy.get("onboard-v2")
-    .shadow()
-    .find(".button-container.absolute.svelte-ro440k")
-    .click();
 });
diff --git a/cypress/utils/CustomizedBridge.js b/cypress/utils/CustomizedBridge.js
@@ -38,6 +38,8 @@ class CustomizedBridge extends Eip1193Bridge {
       method = args[0];
       params = args[1];
     }
+    console.log("method -------", method);
+    console.log("params -------", params);
 
     // Implemented by UMA
     if (method === "eth_call") {
@@ -83,6 +85,7 @@ class CustomizedBridge extends Eip1193Bridge {
         return result;
       }
     } catch (error) {
+      console.error("error received", method, params, error);
       if (isCallbackForm) {
         callback(error, null);
       } else {

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/logo-small.png" />
+    <link rel="icon" href="/logo-small.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1"
@@ -21,24 +21,25 @@
       property="og:description"
       content="Across is the fastest, cheapest and most secure cross-chain bridge for Ethereum, Arbitrum, Optimism, Polygon and other Layer 1 and Layer 2 networks. Transfer tokens with Across."
     />
-    <meta property="og:image" content="%PUBLIC_URL%/logo-small.png" />
+    <meta property="og:image" content="/logo-small.png" />
     <meta name="twitter:site" content="Across" />
     <meta
       name="twitter:card"
       content="Across is the fastest, cheapest and most secure cross-chain bridge for Ethereum, Arbitrum, Optimism, Polygon and other Layer 1 and Layer 2 networks. Transfer tokens with Across."
     />
     <meta name="twitter:creator" content="@UMAprotocol" />
-    <meta name="twitter:image" content="%PUBLIC_URL%/logo-small.png" />
+    <meta name="twitter:image" content="/logo-small.png" />
     <meta name="robots" content="index, follow" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo-small.png" />
+    <link rel="apple-touch-icon" href="/logo-small.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="banner"></div>
     <div id="super-header"></div>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <div id="modal"></div>
     <!--
       This HTML file is a template.

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,4 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 
 module.exports = {
   preset: "ts-jest",
@@ -7,5 +7,14 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   transform: {
     "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.svg$": "jest-transform-stub",
+    "^.+\\.png$": "jest-transform-stub",
+  },
+  moduleNameMapper: {
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^assets/(.*)$": "<rootDir>/src/assets/$1",
+    "^data/(.*)$": "<rootDir>/src/data/$1",
   },
 };
diff --git a/package.json b/package.json
@@ -13,20 +13,17 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@google-cloud/logging": "^10.1.1",
-    "@popperjs/core": "^2.11.6",
     "@reach/dialog": "^0.16.2",
     "@sentry/react": "^7.37.2",
     "@uma/sdk": "^0.22.2",
-    "@web3-onboard/coinbase": "^2.1.0",
-    "@web3-onboard/core": "^2.8.0",
-    "@web3-onboard/gnosis": "^2.1.0",
-    "@web3-onboard/injected-wallets": "^2.1.0",
-    "@web3-onboard/react": "^2.3.0",
-    "@web3-onboard/walletconnect": "^2.1.0",
+    "@web3-onboard/coinbase": "^2.2.4",
+    "@web3-onboard/core": "^2.20.4",
+    "@web3-onboard/gnosis": "^2.1.10",
+    "@web3-onboard/injected-wallets": "^2.10.1",
+    "@web3-onboard/react": "^2.8.9",
+    "@web3-onboard/walletconnect": "^2.4.0",
     "axios": "^0.27.2",
-    "bnc-notify": "^1.9.1",
-    "bnc-onboard": "^1.39.0",
-    "buffer": "^6.0.3",
+    "bnc-notify": "^1.9.8",
     "copy-to-clipboard": "^3.3.3",
     "downshift": "^6.1.7",
     "ethers": "5.7.2",
@@ -40,22 +37,22 @@
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-lottie": "^1.2.3",
-    "react-popper": "^2.3.0",
     "react-pro-sidebar": "^0.7.1",
     "react-query": "^3.34.16",
     "react-router-dom": "^5.3.0",
     "react-router-sitemap": "^1.2.0",
-    "react-scripts": "4.0.3",
     "react-slider": "^2.0.4",
+    "react-tooltip": "^5.18.0",
     "superstruct": "^0.15.4",
     "typescript": "^4.1.2"
   },
   "scripts": {
-    "start": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && react-scripts start",
-    "build": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && react-scripts build",
+    "start": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite",
+    "dev": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite --port $PORT",
+    "build": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && tsc && vite build",
     "analyze": "yarn build --stats && webpack-bundle-analyzer build/bundle-stats.json -m server -r build/bundle-stats.html",
-    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && react-scripts test",
-    "serve": "serve -s build",
+    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && jest --env jsdom src",
+    "serve": "vite preview --port 3000",
     "test-api": "jest test/api",
     "eject": "react-scripts eject",
     "lint": "eslint src api cypress test",
@@ -89,6 +86,8 @@
   "devDependencies": {
     "@amplitude/ampli": "^1.27.1",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@ethersproject/experimental": "^5.6.3",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -115,6 +114,7 @@
     "@types/react-router-dom": "^5.3.1",
     "@types/react-slider": "^1.3.1",
     "@vercel/node": "^2.5.13",
+    "@vitejs/plugin-react": "^4.0.1",
     "axios-mock-adapter": "^1.21.2",
     "babel-cli": "^6.26.0",
     "babel-node": "^0.0.1-security",
@@ -123,16 +123,26 @@
     "babel-register": "^6.26.0",
     "chromatic": "^6.17.4",
     "cypress": "^10.4.0",
+    "eslint": "^8.44.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "hardhat": "^2.12.7",
     "husky": "^8.0.0",
+    "jest": "^29.5.0",
     "jest-environment-hardhat": "^1.1.8",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-transform-stub": "^2.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.4.1",
     "serve": "^14.0.1",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "vite": "^4.3.9",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
     "webpack-bundle-analyzer": "^4.7.0"
   },
   "babel": {

diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
diff --git a/src/components/Section/index.ts b/src/components/Section/index.ts
diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { ReactComponent as Arrow } from "assets/icons/arrow-16.svg";
 import Modal from "components/Modal";
 import { Text } from "components/Text";
-import { PopperTooltip } from "components/Tooltip";
+import { Tooltip } from "components/Tooltip";
 import { QUERIESV2 } from "utils";
 import { ReactComponent as II } from "assets/icons/info-16.svg";
 import { useSelector } from "./useSelector";
@@ -101,7 +101,7 @@ const Selector = <ElementValue,>({
                     element.suffix
                   )}
                   {element.disabled ? (
-                    <PopperTooltip
+                    <Tooltip
                       title={element.disabledTooltip?.title ?? "Not supported."}
                       body={
                         element.disabledTooltip?.description ??
@@ -112,7 +112,7 @@ const Selector = <ElementValue,>({
                       <InfoIconWrapper>
                         <InfoIcon />
                       </InfoIconWrapper>
-                    </PopperTooltip>
+                    </Tooltip>
                   ) : idx === selectedIndex ? (
                     <ActiveIcon>
                       <ActiveSelectedIcon />

diff --git a/src/components/Tooltip/Tooltip.styles.tsx b/src/components/Tooltip/Tooltip.styles.tsx
@@ -1,6 +1,15 @@
 import styled from "@emotion/styled";
+import { Tooltip } from "react-tooltip";
 import { ReactComponent as RoundedCheckmark16 } from "assets/icons/rounded-checkmark-16.svg";
 
+export const StyledTooltip = styled(Tooltip)`
+  z-index: 5;
+  padding: 0;
+  margin: 0;
+  box-shadow: 0;
+  border-radius: 50%;
+`;
+
 export const Wrapper = styled.div`
   padding: 16px;
   max-width: 320px;