Merge pull request #77 from telosnetwork/feature/brave-wallet-support

Brave Wallet Support (mobile)

Author: donnyquixotic

src/features/bridge/ui/AccountModal.tsx

@@ -3,7 +3,7 @@ import {groupBy} from 'lodash-es';
 import {observer} from 'mobx-react';
 import React, {useEffect, useRef, useState} from 'react';
 
-import { WalletType } from '@/core/config/createWallets';
+import { BraveWallet, WalletType } from '@/core/config/createWallets';
 import {transactionStore} from '@/core/stores/transactionStore';
 import {uiStore, WalletTab} from '@/core/stores/uiStore';
 import {walletStore} from '@/core/stores/walletStore';
@@ -154,23 +154,26 @@ const WalletItem: React.FC<{
 }> = observer(({wallet}) => {
   const mobile = isMobile();
 
-  if (wallet.type === 'Brave' || (wallet.type === 'Core' && mobile)) {
+  if (wallet.type === 'Core' && mobile) {
     // https://github.com/telosnetwork/telos-bridge/issues/20
     return null;
   }
 
   let buttonText;
+  const win = window as any;
 
-  const isSafePal = (window as any).ethereum.isSafePal;
+  const isSafePal = win.ethereum?.isSafePal;
+  const isBraveBrowser = win.navigator.brave;
+  const isBraveWallet = win.ethereum?.isBraveWallet;
 
   if (wallet.isConnecting) {
     buttonText = 'Connecting...';
   } else if (wallet.isConnected && wallet.address) {
     buttonText = `${formatAddress(wallet.address, 16)}`;
   // handle safepal extension conflict
-  }else if (wallet.type === WalletType.METAMASK && isSafePal){
+  } else if (wallet.type === WalletType.METAMASK && isSafePal){
     buttonText = `Get MetaMask Wallet`;
-  } else if (wallet.isAvailable) {
+  } else if (wallet.isAvailable || (wallet.type === WalletType.BRAVE && isBraveWallet)) {
     buttonText = `Connect ${wallet.type}`;
   } else if (!mobile) {
     buttonText = `Get ${wallet.type} Wallet`;
@@ -188,7 +191,10 @@ const WalletItem: React.FC<{
       window.open('https://metamask.app.link/dapp/bridge.telos.net');
       return;
     }
-    if (wallet.isAvailable) {
+    if (isBraveBrowser && isBraveWallet){
+      (wallet as BraveWallet).setProvider(WalletType.BRAVE, win.ethereum);
+    }
+    if (wallet.isAvailable || isBraveWallet) {
       wallet.connect();
       return;
     }
@@ -201,6 +207,8 @@ const WalletItem: React.FC<{
       window.open('https://phantom.app/ul/');
     }else if (wallet.type === WalletType.SAFEPAL){
       window.open('https://www.safepal.com/en/download');
+    }else if (wallet.type === WalletType.BRAVE){
+      window.open((wallet as any).url);
     }
   }
 

src/features/core/config/createWallets.ts

@@ -2,15 +2,16 @@ import {ChainId} from '@layerzerolabs/lz-sdk';
 import { toEvmChainId } from '@layerzerolabs/ui-core';
 import {Wallet} from '@layerzerolabs/ui-wallet';
 import {
-  BraveWallet,
   CoinbaseWallet,
   CoreWallet,
+  ExternalWallet,
   InjectedWallet,
   MetaMaskWallet,
   PhantomWallet as PhantomWalletEvm,
   ProviderIdentityFlag,
   WalletConnect,
 } from '@layerzerolabs/ui-wallet-evm';
+import { isMobile } from '../utils/platform';
 
 type ArrayOneOrMore<T> = {
   0: T;
@@ -36,6 +37,13 @@ class SafePal extends InjectedWallet {
   readonly icon = "https://pbs.twimg.com/profile_images/1676254262505123840/NhRRmBnl_400x400.png";
 }
 
+export class BraveWallet extends ExternalWallet {
+  type = WalletType.BRAVE;
+  identityFlag = ProviderIdentityFlag.BraveWallet;
+  readonly url = "https://brave.com/wallet/";
+  readonly icon = "https://icons-ckg.pages.dev/lz-light/wallets/brave.svg";
+}
+
 enum ChainListId {
   TELOS = 40,
   POLYGON = 137,
@@ -51,7 +59,10 @@ export function createWallets(chains: ChainId[]): Record<string, Wallet<unknown>
   wallets.metamaskWallet = new MetaMaskWallet();
   wallets.coinbaseWallet = new CoinbaseWallet();
   wallets.coreWallet = new CoreWallet();
-  wallets.braveWallet = new BraveWallet();
+  // Brave wallet only supported on mobile at the moment, see https://github.com/telosnetwork/teloscan/issues/544
+  if (isMobile()){
+    wallets.braveWallet = new BraveWallet();
+  }
   wallets.phantomEvm = new PhantomWalletEvm();
   wallets.safePal = new SafePal();