Merge pull request #223 from XLabs/wallet-connect-v2

Switch WalletConnect to v2

.github/workflows/preview.yml

@@ -101,6 +101,7 @@ jobs:
           REACT_APP_CLUSTER: ${{ vars.REACT_APP_CLUSTER }}
           REACT_APP_SOLANA_API_URL: ${{ vars.REACT_APP_SOLANA_API_URL }}
           REACT_APP_COVALENT_API_KEY: ${{ secrets.REACT_APP_COVALENT_API_KEY }}
+          REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }}
         run: |
           pushd public
           npm run set-version

.github/workflows/production.yml

@@ -110,6 +110,7 @@ jobs:
           REACT_APP_SOLANA_API_URL: ${{ vars.REACT_APP_SOLANA_API_URL }}
           REACT_APP_COVALENT_API_KEY: ${{ secrets.REACT_APP_COVALENT_API_KEY }}
           REACT_APP_TRM_API_KEY: ${{ secrets.REACT_APP_TRM_API_KEY }}
+          REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }}
         run: |
           echo 'REACT_APP_VERSION=$npm_package_version' > .env
           npm run build

.github/workflows/testnet.yml

@@ -71,6 +71,7 @@ jobs:
           REACT_APP_CLUSTER: testnet
           REACT_APP_SOLANA_API_URL: ${{ vars.REACT_APP_SOLANA_API_URL }}
           REACT_APP_COVALENT_API_KEY: ${{ secrets.REACT_APP_COVALENT_API_KEY }}
+          REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }}
         run: |
           pushd public
           npm run set-version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xlabs/portal-bridge-ui",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "private": true,
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.9.20",

src/contexts/AlgorandWalletContext.tsx

@@ -2,6 +2,21 @@ import { AlgorandWallet } from "@xlabs-libs/wallet-aggregator-algorand";
 import { CHAIN_ID_ALGORAND } from "@xlabs-libs/wallet-aggregator-core";
 import { useWallet } from "@xlabs-libs/wallet-aggregator-react";
 import { useMemo } from "react";
+import {
+  AlgorandLedgerWallet,
+  DeflyWallet,
+  MyAlgoWallet,
+  PeraWallet,
+} from "@xlabs-libs/wallet-aggregator-algorand";
+
+export const getAlgorandWallets = (): AlgorandWallet[] => {
+  return [
+    new MyAlgoWallet(),
+    new PeraWallet(),
+    new DeflyWallet({}),
+    new AlgorandLedgerWallet(),
+  ];
+};
 
 export const useAlgorandWallet = () => {
   const wallet = useWallet(CHAIN_ID_ALGORAND);

src/contexts/EthereumProviderContext.tsx

@@ -1,6 +1,10 @@
 import { isEVMChain } from "@certusone/wormhole-sdk";
 import { ChainId } from "@xlabs-libs/wallet-aggregator-core";
-import { EVMWallet } from "@xlabs-libs/wallet-aggregator-evm";
+import {
+  EVMWallet,
+  InjectedWallet,
+  WalletConnectWallet,
+} from "@xlabs-libs/wallet-aggregator-evm";
 import { useWallet } from "@xlabs-libs/wallet-aggregator-react";
 import { ethers } from "ethers";
 import { useEffect, useMemo, useState } from "react";
@@ -16,6 +20,29 @@ interface IEthereumContext {
   wallet: EVMWallet | undefined;
 }
 
+export const getEvmWallets = (): EVMWallet[] => {
+  return [
+    new InjectedWallet(),
+    new WalletConnectWallet({
+      connectorOptions: {
+        projectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID || "",
+        showQrModal: true,
+        qrModalOptions: {
+          explorerAllowList: [],
+          explorerDenyList: [],
+          themeMode: 'light'
+        },
+        metadata: {
+          url: "https://portalbridge.com",
+          name: "Wormhole Portal Bridge",
+          description: "Wormhole Portal Bridge",
+          icons: ["https://portalbridge.com/favicon.ico"],
+        },
+      },
+    }),
+  ];
+};
+
 export const useEthereumProvider = (chainId: ChainId): IEthereumContext => {
   const wallet = useWallet<EVMWallet>(chainId);
 

src/index.js

@@ -1,11 +1,5 @@
 import { CssBaseline } from "@material-ui/core";
 import { ThemeProvider } from "@material-ui/core/styles";
-import {
-  AlgorandLedgerWallet,
-  DeflyWallet,
-  MyAlgoWallet,
-  PeraWallet,
-} from "@xlabs-libs/wallet-aggregator-algorand";
 import {
   CHAIN_ID_ALGORAND,
   CHAIN_ID_APTOS,
@@ -17,10 +11,6 @@ import {
   CHAIN_ID_TERRA2,
   CHAIN_ID_XPLA,
 } from "@xlabs-libs/wallet-aggregator-core";
-import {
-  InjectedWallet,
-  WalletConnectLegacyWallet,
-} from "@xlabs-libs/wallet-aggregator-evm";
 import { WalletContextProvider } from "@xlabs-libs/wallet-aggregator-react";
 import { SnackbarProvider } from "notistack";
 import ReactDOM from "react-dom";
@@ -29,8 +19,10 @@ import { HashRouter } from "react-router-dom";
 import App from "./App";
 import ErrorBoundary from "./ErrorBoundary";
 import BackgroundImage from "./components/BackgroundImage";
+import { getAlgorandWallets } from "./contexts/AlgorandWalletContext";
 import { getWrappedWallets as getWrappedAptosWallets } from "./contexts/AptosWalletContext";
 import { BetaContextProvider } from "./contexts/BetaContext";
+import { getEvmWallets } from "./contexts/EthereumProviderContext";
 import { getInjectiveWallets } from "./contexts/InjectiveWalletContext";
 import { getNearWallets } from "./contexts/NearWalletContext";
 import { getWrappedWallets as getWrappedSolanaWallets } from "./contexts/SolanaWalletContext";
@@ -42,13 +34,8 @@ import { store } from "./store";
 
 const AGGREGATOR_WALLETS_BUILDER = async () => {
   return {
-    [CHAIN_ID_ALGORAND]: [
-      new MyAlgoWallet(),
-      new PeraWallet(),
-      new DeflyWallet(),
-      new AlgorandLedgerWallet(),
-    ],
-    [CHAIN_ID_ETH]: [new InjectedWallet(), new WalletConnectLegacyWallet()],
+    [CHAIN_ID_ALGORAND]: getAlgorandWallets(),
+    [CHAIN_ID_ETH]: getEvmWallets(),
     [CHAIN_ID_SOLANA]: getWrappedSolanaWallets(),
     [CHAIN_ID_APTOS]: getWrappedAptosWallets(),
     [CHAIN_ID_INJECTIVE]: getInjectiveWallets(),

src/muiTheme.js

@@ -69,6 +69,9 @@ export const theme = responsiveFontSizes(
         letterSpacing: -1.02,
       },
     },
+    zIndex: {
+      modal: 50,
+    },
     overrides: {
       MuiCssBaseline: {
         "@global": {