Merge pull request #137 from Cerebellum-Network/release/0.24.0

Release 0.24.0

.env.dev

@@ -6,6 +6,8 @@ REACT_APP_ENV=development
 REACT_APP_SUPPORT_SERVICE="Discord"
 REACT_APP_SUPPORT_URL="https://cere.network/discord"
 
+REACT_APP_WALLET_CONNECT_V2_TOKEN="1c577e873c4c74d6a6a870a8c8128232"
+
 ## These are only required if using Sentry for error logging
 REACT_APP_SENTRY_DSN_URL="https://3d39fa05d843482eb93377947b435b5b@o318183.ingest.sentry.io/5987177"
 SENTRY_AUTH_TOKEN="db67ae12222811ecabd2564b6436d30d"

.env.prod

@@ -6,6 +6,8 @@ REACT_APP_ENV=production
 REACT_APP_SUPPORT_SERVICE="Discord"
 REACT_APP_SUPPORT_URL="https://cere.network/discord"
 
+REACT_APP_WALLET_CONNECT_V2_TOKEN="1c577e873c4c74d6a6a870a8c8128232"
+
 ## These are only required if using Sentry for error logging
 REACT_APP_SENTRY_DSN_URL="https://3d39fa05d843482eb93377947b435b5b@o318183.ingest.sentry.io/5987177"
 SENTRY_AUTH_TOKEN="db67ae12222811ecabd2564b6436d30d"

.env.stage

@@ -6,6 +6,8 @@ REACT_APP_ENV=staging
 REACT_APP_SUPPORT_SERVICE="Discord"
 REACT_APP_SUPPORT_URL="https://cere.network/discord"
 
+REACT_APP_WALLET_CONNECT_V2_TOKEN="1c577e873c4c74d6a6a870a8c8128232"
+
 ## These are only required if using Sentry for error logging
 REACT_APP_SENTRY_DSN_URL="https://3d39fa05d843482eb93377947b435b5b@o318183.ingest.sentry.io/5987177"
 SENTRY_AUTH_TOKEN="db67ae12222811ecabd2564b6436d30d"

.github/workflows/dev.yaml

@@ -10,7 +10,7 @@ jobs:
     uses: Cerebellum-Network/reusable-workflows/.github/workflows/build-and-upload-static.yaml@1.0.0
     with:
       runs-on: '["self-hosted", "cere-network-xlarge-workers"]'
-      build_container: 'node:14-buster'
+      build_container: 'node:16-buster'
       deploy_container: 'ubuntu:20.04'
       install_packages_command: 'cp .env.dev .env; sh ./scripts/copy-dev-config.sh; yarn install'
       build_command: 'yarn build'

.github/workflows/prod.yaml

@@ -9,7 +9,7 @@ jobs:
     uses: Cerebellum-Network/reusable-workflows/.github/workflows/build-and-upload-static.yaml@1.0.0
     with:
       runs-on: '["self-hosted", "cere-network-xlarge-workers"]'
-      build_container: 'node:14-buster'
+      build_container: 'node:16-buster'
       deploy_container: 'ubuntu:20.04'
       install_packages_command: 'cp .env.prod .env; sh ./scripts/copy-prod-config.sh; yarn install'
       build_command: 'yarn build'

.github/workflows/stage.yaml

@@ -10,7 +10,7 @@ jobs:
     uses: Cerebellum-Network/reusable-workflows/.github/workflows/build-and-upload-static.yaml@1.0.0
     with:
       runs-on: '["self-hosted", "cere-network-xlarge-workers"]'
-      build_container: 'node:14-buster'
+      build_container: 'node:16-buster'
       deploy_container: 'ubuntu:20.04'
       install_packages_command: 'cp .env.stage .env; sh ./scripts/copy-stage-config.sh; yarn install'
       build_command: 'yarn build'

.nvm

@@ -0,0 +1 @@
+16

CHANGELOG.md

@@ -3,6 +3,9 @@
 ## vNext
 ...
 
+## v0.24.0
+- Migrated to WalletConnect v2
+
 ## v0.23.0
 - Disabled WalletConnect v1
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine AS builder
+FROM node:16-alpine AS builder
 RUN apk --no-cache add git
 WORKDIR /app
 COPY package.json ./

config/chainbridge-runtime-config.cere.dev.js

@@ -17,7 +17,7 @@ window.__RUNTIME_CONFIG__ = {
         bridgeAddress: "0x80C8ee1C89c574eB97B3783f0B9C9483EdF8B92E",
         erc20HandlerAddress: "0x53cc2228587EAca7CcE3189f24BC9bd490E43C48",
         rpcUrl:
-          "https://polygon-mumbai.infura.io/v3/178b87e860404572bc217ca53fe594bd",
+          "https://polygon-mumbai.infura.io/v3/0aca1499facc499bb195d2d437f78603",
         blockExplorer: "https://mumbai.polygonscan.com/tx",
         type: "Ethereum",
         nativeTokenSymbol: "MATIC",
@@ -28,8 +28,8 @@ window.__RUNTIME_CONFIG__ = {
         tokens: [
           {
             address: "0xcD54b7066839B25A0E5fDf76866D338cc7257179",
-            name: cereTokenName,
-            symbol: cereTokenSymbol,
+            name: "CN",
+            symbol: "CS",
             imageUri: "CEREIcon",
             resourceId:
               "0x000000000000000000000000000000c76ebe4a02bbc34786d860b355f5a5ce00",
@@ -103,8 +103,8 @@ window.__RUNTIME_CONFIG__ = {
         tokens: [
           {
             address: "0xb8A59CEF67d12C5C75836aEfF1d97943F5A9F662",
-            name: cereTokenName,
-            symbol: cereTokenSymbol,
+            name: "CN",
+            symbol: "CS",
             imageUri: "CEREIcon",
             resourceId:
               "0x000000000000000000000000000000c76ebe4a02bbc34786d860b355f5a5ce00",

config/chainbridge-runtime-config.cere.stage.js

@@ -17,7 +17,7 @@ window.__RUNTIME_CONFIG__ = {
         bridgeAddress: "0xBDc040b15561CFC9ED1Ce049DE8bEAbf0b520b33",
         erc20HandlerAddress: "0x8Ee8876d13e79b846fb6c3e5Ffe226a2e111387a",
         rpcUrl:
-          "https://polygon-mumbai.infura.io/v3/178b87e860404572bc217ca53fe594bd",
+          "https://polygon-mumbai.infura.io/v3/0aca1499facc499bb195d2d437f78603",
         blockExplorer: "https://mumbai.polygonscan.com/tx",
         type: "Ethereum",
         nativeTokenSymbol: "MATIC",
@@ -28,8 +28,8 @@ window.__RUNTIME_CONFIG__ = {
         tokens: [
           {
             address: "0xd111d479e23A8342A81ad595Ea1CAF229B3528c3",
-            name: cereTokenName,
-            symbol: cereTokenSymbol,
+            name: "CN",
+            symbol: "CS",
             imageUri: "CEREIcon",
             resourceId:
               "0x000000000000000000000000000000c76ebe4a02bbc34786d860b355f5a5ce00",

package.json

@@ -1,20 +1,24 @@
 {
   "name": "@Cerebellum-Network/chainbridge-ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "private": true,
+  "engines": {
+    "node": "^16.0.0"
+  },
   "dependencies": {
     "@celo-tools/celo-ethers-wrapper": "0.0.5",
     "@chainsafe/chainbridge-contracts": "1.0.5",
     "@chainsafe/common-components": "1.0.26",
     "@chainsafe/common-theme": "1.0.10",
-    "@chainsafe/web3-context": "1.2.0",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.3",
     "@material-ui/styles": "4.10.0",
     "@polkadot/api": "8.2.1",
     "@polkadot/extension-dapp": "0.37.1",
     "@sentry/react": "7.7.0",
-    "bnc-onboard": "1.39.1",
+    "@web3-onboard/injected-wallets": "^2.9.0",
+    "@web3-onboard/react": "^2.8.5",
+    "@web3-onboard/walletconnect": "^2.3.8",
     "clsx": "1.1.1",
     "dayjs": "1.9.1",
     "ethers": "5.4.5",
@@ -27,6 +31,7 @@
     "react-ga4": "1.4.1",
     "react-toast-notifications": "2.4.0",
     "semver": "6.3.0",
+    "url": "^0.11.0",
     "yup": "0.29.3"
   },
   "devDependencies": {
@@ -91,33 +96,13 @@
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "2.3.8",
     "ts-pnp": "1.1.6",
-    "typescript": "4.0.3",
+    "typescript": "^5.1.3",
     "url-loader": "2.3.0",
     "webpack": "5.74.0",
     "webpack-dev-server": "4.9.3",
     "webpack-manifest-plugin": "5.0.0",
     "workbox-webpack-plugin": "4.3.1"
   },
-  "resolutions": {
-    "bnc-onboard/**/axios": "0.27.2",
-    "bnc-onboard/**/async": "3.2.4",
-    "bnc-onboard/**/yargs-parser": "21.1.1",
-    "bnc-onboard/**/ws": "8.8.1",
-    "bnc-onboard/**/trim-newlines": "4.0.2",
-    "bnc-onboard/**/elliptic": "6.5.4",
-    "bnc-onboard/**/node-fetch": "3.2.10",
-    "bnc-onboard/**/underscore": "1.13.4",
-    "bnc-onboard/**/json-schema": "0.4.0",
-    "bnc-onboard/**/path-parse": "1.0.7",
-    "bnc-onboard/**/simple-get": "4.0.1",
-    "bnc-onboard/**/lodash": "4.17.21",
-    "bnc-onboard/**/y18n": "5.0.8",
-    "bnc-onboard/**/minimist": "1.2.6",
-    "bnc-onboard/**/semver-regex": "4.0.5",
-    "bnc-onboard/**/ansi-regex": "6.0.1",
-    "bnc-onboard/**/cross-fetch": "3.1.5",
-    "bnc-onboard/**/hosted-git-info": "5.1.0"
-  },
   "scripts": {
     "start": "yarn setup:copy-dev-config && node scripts/start",
     "build": "node --max-old-space-size=4096 scripts/build",

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src ws://localhost:3000 http://localhost:3000 ws://127.0.0.1:9944 wss://*.cere.network https://*.infura.io https://*.google-analytics.com wss://*.walletconnect.org https://*.walletconnect.com https://*.sentry.io https://*.etherchain.org; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googletagmanager.com">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src ws://localhost:3000 http://localhost:3000 ws://127.0.0.1:9944 wss://*.cere.network https://*.infura.io https://*.google-analytics.com wss://*.walletconnect.com https://*.walletconnect.com https://*.sentry.io https://*.etherchain.org; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.walletconnect.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googletagmanager.com">
     <meta http-equiv="Strict-Transport-Security" content="max-age=63072000; includeSubDomains; preload">
     <meta http-equiv="Referrer-Policy" content="no-referrer, strict-origin-when-cross-origin">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico?v=6" />

src/App.tsx

@@ -13,10 +13,10 @@ import { ChainbridgeProvider } from "./Contexts/ChainbridgeContext";
 import AppWrapper from "./Layouts/AppWrapper";
 import { NetworkManagerProvider } from "./Contexts/NetworkManagerContext";
 import { chainbridgeConfig } from "./chainbridgeConfig";
-import { Web3Provider } from "@chainsafe/web3-context";
-import { utils } from "ethers";
+import { Web3OnboardProvider } from '@web3-onboard/react'
 import "@chainsafe/common-theme/dist/font-faces.css";
 import { localStorageVars, blockchainChainIds } from "./Constants/constants";
+import { web3Onboard } from "./web3-onboard";
 
 const { UNHANDLED_REJECTION, ONBOARD_SELECTED_WALLET } = localStorageVars;
 
@@ -68,19 +68,6 @@ const App: React.FC<{}> = () => {
     }
   });
 
-  const tokens = chainbridgeConfig.chains
-    .filter((c) => c.type === "Ethereum")
-    .reduce((tca, bc: any) => {
-      if (bc.networkId) {
-        return {
-          ...tca,
-          [bc.networkId]: bc.tokens,
-        };
-      } else {
-        return tca;
-      }
-    }, {});
-
   return (
     <ErrorBoundary
       fallback={({ error, componentStack, eventId, resetError }) => (
@@ -104,29 +91,8 @@ const App: React.FC<{}> = () => {
       <ThemeSwitcher themes={{ light: lightTheme }}>
         <CssBaseline />
         <ToasterProvider autoDismiss>
-          <Web3Provider
-            tokensToWatch={tokens}
-            networkIds={[networkId]}
-            onboardConfig={{
-              dappId: process.env.REACT_APP_BLOCKNATIVE_DAPP_ID,
-              walletSelect: {
-                wallets: [
-                  { walletName: "metamask", preferred: true },
-                ],
-              },
-              subscriptions: {
-                network: (newNetworkId) => {
-                  console.log("network onboard subscription: ", { networkId, newNetworkId });
-                  const supported = chainbridgeConfig.chains.find(chain => chain.networkId === newNetworkId);
-                  if (supported) setNetworkId(newNetworkId);
-                },
-                balance: (amount) =>
-                  amount && console.log("balance onboard subscription: ", utils.formatEther(amount)),
-              },
-            }}
-            checkNetwork={false}
-            gasPricePollingInterval={120}
-            gasPriceSetting="fast"
+          <Web3OnboardProvider
+            web3Onboard={web3Onboard}
           >
             <NetworkManagerProvider>
               <ChainbridgeProvider chains={chains}>
@@ -137,7 +103,7 @@ const App: React.FC<{}> = () => {
                 </Router>
               </ChainbridgeProvider>
             </NetworkManagerProvider>
-          </Web3Provider>
+          </Web3OnboardProvider>
         </ToasterProvider>
       </ThemeSwitcher>
     </ErrorBoundary>