Add connect to TrustWallet browser extension

apps/web/src/components/Wallet.vue

@@ -2,6 +2,12 @@
   <div>
     <h5>Connect Wallet to Log In or Add Account</h5>
     <div>
+      <button
+        class="trust-btn"
+        @click="selectProvider('TrustWallet')"
+      >
+        Select Trust Wallet
+      </button>
       <button @click="selectProvider('MetaMask')">
         Select MetaMask
       </button>
@@ -292,6 +298,10 @@ button {
   background-color: blue;
 }
 
+.trust-btn {
+  background-color: rgb(61, 61, 228);
+}
+
 .iopay-btn {
   background-color: rgb(0, 218, 180);
 }

apps/web/src/composables/ethers.ts

@@ -17,7 +17,7 @@ const ethereum: any = window.ethereum
 const availableProviders = ref<BrowserProviders>(getBrowserProviders(ethereum))
 
 export default function useEthers() {
-  const ethersProviderList = ['MetaMask', 'CoinbaseWallet']
+  const ethersProviderList = ['CoinbaseWallet', 'MetaMask' /*, 'TrustWallet' */]
 
   async function addEthersNetwork (providerString: ProviderString, network: any) {
     const provider = availableProviders.value[providerString as keyof BrowserProviders]
@@ -118,6 +118,25 @@ export default function useEthers() {
     }
   }
 
+  async function getTrustWalletAddressWithBalance() {
+    const trustWalletProvider = detectTrustWalletAndGetProvider()
+    if (trustWalletProvider) {
+      const address = (await requestEthersAccount(trustWalletProvider))[0]
+      const balance = await getEthersBalance(address)
+      return [{ address, balance }]
+    }
+  }
+
+  function detectTrustWalletAndGetProvider() {
+    const { ethereum } = window
+    const providers = ethereum?.providers
+    if (providers) {
+      for (const provider of providers) {
+        if (provider.isTrustWallet) return provider
+      }
+    }
+  }
+
   async function getEthersBalance(address: string, ) {
     const provider = new ethers.providers.JsonRpcProvider(ethereumURL)
     const balance = await provider.getBalance(address)
@@ -258,6 +277,7 @@ export default function useEthers() {
     getEthersBrowserSigner,
     getEthersBrowserProviderSelectedCurrency,
     getGasPriceAndLimit,
+    getTrustWalletAddressWithBalance,
     loginWithEthers,
     signEthersMessage,
     sendEthersTransaction,

apps/web/src/composables/wallet.ts

@@ -36,7 +36,7 @@ const selectedCurrency = ref<Currency>('')
 const toAddress = ref<string>('0x728474D29c2F81eb17a669a7582A2C17f1042b57')
 
 export default function useWallet() {
-  const { estimateEIP1559GasFee, ethersProviderList, getEthersAddress, getEthersAddressWithBalance, getEthersBalance, sendEthersTransaction, signEthersMessage, loginWithEthers, getEthersBrowserProviderSelectedCurrency, switchEthersNetwork } = useEthers()
+  const { estimateEIP1559GasFee, ethersProviderList, getEthersAddress, getEthersAddressWithBalance, getEthersBalance, getTrustWalletAddressWithBalance, sendEthersTransaction, signEthersMessage, loginWithEthers, getEthersBrowserProviderSelectedCurrency, switchEthersNetwork } = useEthers()
   const { solanaProviderList, getSolanaAddress, sendSolanaTransaction, signSolanaMessage } = useSolana()
   const { getLedgerAddress, loginWithLedger, sendLedgerTransaction, signLedgerMessage } = useLedger()
   const { getTrezorAddress, loginWithTrezor, sendTrezorTransaction, signTrezorMessage } = useTrezor()
@@ -324,6 +324,10 @@ export default function useWallet() {
         setSelectedProvider(provider)
         const trezorAddresses = await getTrezorAddress[currency]() as CryptoAddress[]
         setUserAddresses(trezorAddresses)
+      } else if (provider === 'TrustWallet') {
+        setSelectedProvider(provider)
+        const trustWalletAddresses = await getTrustWalletAddressWithBalance() as CryptoAddress[]
+        setUserAddresses(trustWalletAddresses)
       }
     } catch (error) {
       console.error('There was an error in selectProvider :>> ', error)

common/types/src/interfaces/ProviderString.ts

@@ -4,6 +4,7 @@ export type ProviderString =
   | 'IoPay'
   | 'Ledger'
   | 'Trezor'
+  | 'TrustWallet'
   | 'WalletConnect'
   |  'Phantom'
   | ''