Implement brave wallet connect and address detection

apps/web/src/components/Wallet.vue

@@ -5,11 +5,17 @@
       <button @click="selectProvider('MetaMask')">
         Select MetaMask
       </button>
+      <button
+        class="brave-btn"
+        @click="selectProvider('BraveWallet')"
+      >
+        Select Brave Wallet
+      </button>
       <button
         class="coinbase-btn"
         @click="selectProvider('CoinbaseWallet')"
       >
-        Select CoinbaseWallet
+        Select Coinbase Wallet
       </button>
       <button
         class="ledger-btn"
@@ -294,6 +300,10 @@ button {
   width: 750px;
 }
 
+.brave-btn {
+  background-color: rgb(228, 169, 123);
+}
+
 .coinbase-btn {
   background-color: blue;
 }

apps/web/src/composables/braveWallet.ts

@@ -0,0 +1,66 @@
+import { ethers } from 'ethers'
+import { LoginCredentials } from '@casimir/types'
+import { EthersProvider } from '@/interfaces'
+import useAuth from '@/composables/auth'
+import useEthers from '@/composables/ethers'
+
+const { createSiweMessage, signInWithEthereum } = useAuth()
+const { getEthersBalance } = useEthers()
+
+export default function useBraveWallet() {
+
+    function detectBraveWalletAndGetProvider() {
+        const { ethereum } = window
+        if (ethereum?.isBraveWallet) {
+            return ethereum
+        } else {
+            window.open('https://brave.com/download/', '_blank')
+        }
+    }
+
+    async function getAddress() : Promise<string | undefined> {
+        try {
+            await window.ethereum.enable()
+            const selectedAddress = window.ethereum.selectedAddress
+            return selectedAddress
+        } catch (err) {
+            console.log('Error connecting to Brave Wallet:', err)
+        }
+    }
+
+    async function getBraveAddressWithBalance() {
+        const braveWalletProvider = detectBraveWalletAndGetProvider()
+        if (braveWalletProvider) {
+            const address = await getAddress()
+            const balance = await getEthersBalance(address as string)
+            return [{ address, balance }]
+        }
+    }
+
+    async function loginWithBraveWallet(loginCredentials: LoginCredentials) {
+    const { provider, address, currency } = loginCredentials
+    const trustWalletProvider = detectBraveWalletAndGetProvider()
+    const web3Provider: ethers.providers.Web3Provider = new ethers.providers.Web3Provider(trustWalletProvider as EthersProvider)
+    try {
+      const message = await createSiweMessage(address, 'Sign in with Ethereum to the app.')
+      const signer = web3Provider.getSigner()
+      const signedMessage = await signer.signMessage(message)
+      const ethersLoginResponse = await signInWithEthereum({ 
+        address,
+        currency,
+        message, 
+        provider, 
+        signedMessage
+      })
+      return await ethersLoginResponse.json()
+    } catch(err) {
+        console.log('Error logging in: ', err)
+        return err
+    }
+    }
+
+    return {
+        getBraveAddressWithBalance,
+        loginWithBraveWallet
+    }
+}

apps/web/src/composables/wallet.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import useBraveWallet from '@/composables/braveWallet'
 import useEthers from '@/composables/ethers'
 import useLedger from '@/composables/ledger'
 import useSolana from '@/composables/solana'
@@ -37,6 +38,7 @@ const selectedCurrency = ref<Currency>('')
 const toAddress = ref<string>('0x728474D29c2F81eb17a669a7582A2C17f1042b57')
 
 export default function useWallet() {
+  const { getBraveAddressWithBalance, loginWithBraveWallet } = useBraveWallet()
   const { estimateEIP1559GasFee, ethersProviderList, getEthersAddress, getEthersAddressWithBalance, getEthersBalance, sendEthersTransaction, signEthersMessage, loginWithEthers, getEthersBrowserProviderSelectedCurrency, switchEthersNetwork } = useEthers()
   const { getLedgerAddress, loginWithLedger, sendLedgerTransaction, signLedgerMessage } = useLedger()
   const { solanaProviderList, getSolanaAddress, sendSolanaTransaction, signSolanaMessage } = useSolana()
@@ -321,6 +323,10 @@ export default function useWallet() {
         setSelectedProvider(provider)
         const ethersAddresses = await getEthersAddressWithBalance(provider) as CryptoAddress[]
         setUserAddresses(ethersAddresses)
+      } else if (provider ==='BraveWallet') {
+        setSelectedProvider(provider)
+        const braveAddresses = await getBraveAddressWithBalance() as CryptoAddress[]
+        setUserAddresses(braveAddresses)
       } else if (provider === 'Ledger') {
         setSelectedProvider(provider)
         const ledgerAddresses = await getLedgerAddress[currency]() as CryptoAddress[]

apps/web/src/interfaces/BrowserProviders.ts

@@ -1,5 +1,6 @@
 import { EthersProvider } from '@/interfaces/EthersProvider'
 
+// TODO: Add other browser providers here and set their types accordingly?? (BraveWallet, TrustWallet)
 export interface BrowserProviders {
   MetaMask?: EthersProvider
   CoinbaseWallet?: EthersProvider

common/types/src/interfaces/ProviderString.ts

@@ -1,6 +1,7 @@
 import { BrowserProviders } from '@/interfaces/index'
 export type ProviderString =
   | keyof BrowserProviders
+  | 'BraveWallet'
   | 'IoPay'
   | 'Ledger'
   | 'Trezor'