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": {