Enable frontier wallet injected connector option

packages/connectkit/src/assets/logos.tsx

@@ -759,7 +759,7 @@ export const Frontier = ({ ...props }) => (
     viewBox="0 0 88 88"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    style={{ background: '#CC703C' }}
+    style={{ background: '#CC703C', borderRadius: '999px' }}
   >
     <path
       d="M63.6429 20L63.3645 20.7254L62.4521 23.0445L61.8461 24.5395C57.2427 35.7491 53.6629 41.0688 49.8557 41.0688C48.8938 41.0936 47.9371 40.9212 47.0465 40.5625C46.156 40.2038 45.3512 39.6667 44.6834 38.9852L44.1979 38.5518C42.9885 37.4538 42.4799 37.1831 41.3154 37.1832C40.7094 37.1832 39.6238 37.9435 38.2521 39.7303C36.4147 42.2912 34.8522 45.0327 33.59 47.9106L33.4353 48.2482L49.7645 48.2483L47.7312 52.4075H32.4845L32.4843 69.44L28 69.44L28.0001 20L63.6429 20ZM57.2889 24.1518L32.4843 24.1518L32.4843 40.6262C35.4564 35.5545 38.2816 33.0086 41.32 33.0086C42.3421 32.9765 43.3595 33.1534 44.3082 33.5284C45.2569 33.9034 46.1159 34.468 46.8311 35.1865L47.3323 35.6335C48.4611 36.6585 48.8956 36.8941 49.8604 36.8941C50.9211 36.8957 53.7433 32.4855 57.2889 24.1518Z"

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

@@ -8,6 +8,7 @@ import {
   isInjectedConnector,
   isMetaMaskConnector,
   isTrust,
+  isFrontier,
 } from './../../../utils';
 
 import { useConnect } from '../../../hooks/useConnect';
@@ -82,15 +83,17 @@ const Wallets: React.FC = () => {
   const shouldShowInjectedConnector = () => {
     // Only display if an injected connector is detected
     const { ethereum } = window;
-
     const needsInjectedWalletFallback =
       (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();
+      isTrust() ||
+      isFrontier();
+
+    //!ethereum?.isBraveWallet; // TODO: Add this line when Brave is supported
 
     return needsInjectedWalletFallback;
   };

packages/connectkit/src/utils/index.ts

@@ -195,6 +195,13 @@ const isRabby = () => {
       ethereum?.providers.find((provider) => provider.isRabby))
   );
 };
+const isFrontier = () => {
+  if (typeof window === 'undefined') return false;
+  const { ethereum } = window as any;
+  const isFrontier = Boolean(ethereum?.isFrontier);
+  if (isFrontier) return true;
+  return false;
+};
 
 const isTrust = () => {
   if (typeof window === 'undefined') return false;
@@ -265,5 +272,6 @@ export {
   isRabby,
   isTrust,
   isTokenPocket,
+  isFrontier,
   flattenChildren,
 };

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

@@ -1,23 +1,28 @@
 import { WalletProps } from './../wallet';
 
-import { isAndroid } from '../../utils';
+import { isAndroid, isFrontier } from '../../utils';
 import Logos from './../../assets/logos';
 
 export const frontier = (): WalletProps => {
+  const isInstalled = isFrontier();
   return {
     id: 'frontier',
-    name: 'Frontier',
+    name: 'Frontier Wallet',
     logos: {
       default: <Logos.Frontier />,
     },
+    shortName: 'Frontier',
     logoBackground: '#CC703C',
     scannable: false,
+    installed: isInstalled,
     downloadUrls: {
       download: 'https://connect.family.co/v0/download/frontier',
       ios: 'https://apps.apple.com/app/frontier-crypto-defi-wallet/id1482380988',
       android:
         'https://play.google.com/store/apps/details?id=com.frontierwallet',
       website: 'https://frontier.xyz/',
+      chrome:
+        'https://chrome.google.com/webstore/detail/frontier-wallet/kppfdiipphfccemcignhifpjkapfbihd',
     },
     createUri: (uri: string) => {
       return isAndroid() ? uri : `frontier://wc?uri=${encodeURIComponent(uri)}`;