Enable Trust Wallet connector option (#242)

* Enable Trust Wallet connector option

* display trust wallet injected connector

* update isTrust check

* isTrust check + comment

---------

Co-authored-by: chris <[email protected]>
Co-authored-by: Lochie Axon <[email protected]>

packages/connectkit/src/components/Pages/Connectors/index.tsx

@@ -7,6 +7,7 @@ import {
   isWalletConnectConnector,
   isInjectedConnector,
   isMetaMaskConnector,
+  isTrust,
 } from './../../../utils';
 
 import { useConnect } from '../../../hooks/useConnect';
@@ -83,11 +84,13 @@ const Wallets: React.FC = () => {
     const { ethereum } = window;
 
     const needsInjectedWalletFallback =
-      typeof window !== 'undefined' &&
-      ethereum &&
-      !isMetaMask() &&
-      !isCoinbaseWallet();
-    //!ethereum?.isBraveWallet; // TODO: Add this line when Brave is supported
+      (typeof window !== 'undefined' &&
+        ethereum &&
+        !isMetaMask() &&
+        !isCoinbaseWallet()) ||
+      // Trust wallet is a special case that requires further debugging to fix.
+      // For now, we'll just show the injected wallet option if it's available.
+      isTrust();
 
     return needsInjectedWalletFallback;
   };

packages/connectkit/src/utils/index.ts

@@ -2,6 +2,13 @@ import { detect } from 'detect-browser';
 import React from 'react';
 import supportedConnectors from '../constants/supportedConnectors';
 
+declare global {
+  interface Window {
+    trustWallet: any;
+    trustwallet: any;
+  }
+}
+
 const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
 
 const truncateEthAddress = (address?: string, separator: string = '••••') => {
@@ -133,6 +140,8 @@ const isMetaMask = () => {
 
   if (isPhantom()) return false;
 
+  if (isTrust()) return false;
+
   return true;
 };
 
@@ -187,12 +196,25 @@ const isRabby = () => {
   );
 };
 
+const isTrust = () => {
+  if (typeof window === 'undefined') return false;
+  const { ethereum } = window;
+
+  return !!(
+    ethereum?.isTrust ||
+    (ethereum?.providers &&
+      ethereum?.providers.find((provider) => provider.isTrust)) ||
+    window.trustWallet?.isTrust ||
+    window.trustwallet?.isTrust
+  );
+};
+
 const isTokenPocket = () => {
   if (typeof window === 'undefined') return false;
   const { ethereum } = window;
 
   return Boolean(ethereum?.isTokenPocket);
-}
+};
 
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
 function flattenChildren(children: React.ReactNode): ReactChildArray {
@@ -241,6 +263,7 @@ export {
   isFrame,
   isPhantom,
   isRabby,
+  isTrust,
   isTokenPocket,
   flattenChildren,
 };

packages/connectkit/src/wallets/connectors/trust.tsx

@@ -1,9 +1,9 @@
 import { WalletProps } from './../wallet';
 
-import { isAndroid } from '../../utils';
+import { isAndroid, isTrust } from '../../utils';
 import Logos from './../../assets/logos';
-
 export const trust = (): WalletProps => {
+  const isInstalled = isTrust();
   return {
     id: 'trust',
     name: 'Trust Wallet',
@@ -19,6 +19,7 @@ export const trust = (): WalletProps => {
         'https://play.google.com/store/apps/details?id=com.wallet.crypto.trustapp',
       ios: 'https://apps.apple.com/app/trust-crypto-bitcoin-wallet/id1288339409',
     },
+    installed: isInstalled,
     createUri: (uri: string) => {
       return isAndroid()
         ? uri