core: add injected wallet discovery hook

packages/core/src/connectors/discovery.ts

@@ -0,0 +1,124 @@
+import type { StarknetWindowObject } from "get-starknet-core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { Connector } from "./base";
+import { injected } from "./helpers";
+
+export type UseInjectedConnectorsProps = {
+  /** List of recommended connectors to display. */
+  recommended?: Connector[];
+  /** Whether to include recommended connectors in the list. */
+  includeRecommended?: "always" | "onlyIfNoConnectors";
+  /** How to order connectors. */
+  order?: "random" | "alphabetical";
+};
+
+export type UseInjectedConnectorsResult = {
+  /** Connectors list. */
+  connectors: Connector[];
+};
+
+export function useInjectedConnectors({
+  recommended,
+  includeRecommended = "always",
+  order = "alphabetical",
+}: UseInjectedConnectorsProps): UseInjectedConnectorsResult {
+  const [injectedConnectors, setInjectedConnectors] = useState<Connector[]>([]);
+
+  const refreshConnectors = useCallback(() => {
+    const wallets = scanObjectForWallets(window);
+    const connectors = wallets.map((wallet) => injected({ id: wallet.id }));
+    setInjectedConnectors(connectors);
+  }, [setInjectedConnectors]);
+
+  useEffect(() => {
+    refreshConnectors();
+  }, [refreshConnectors]);
+
+  const connectors = useMemo(() => {
+    return mergeConnectors(injectedConnectors, recommended ?? [], {
+      includeRecommended,
+      order,
+    });
+  }, [injectedConnectors, recommended, includeRecommended, order]);
+
+  return { connectors };
+}
+
+function mergeConnectors(
+  injected: Connector[],
+  recommended: Connector[],
+  {
+    includeRecommended,
+    order,
+  }: Required<Pick<UseInjectedConnectorsProps, "includeRecommended" | "order">>,
+): Connector[] {
+  const injectedIds = new Set(injected.map((connector) => connector.id));
+  const allConnectors = injected;
+  const shouldAddRecommended =
+    includeRecommended === "always" ||
+    (includeRecommended === "onlyIfNoConnectors" && injected.length === 0);
+  if (shouldAddRecommended) {
+    allConnectors.push(
+      ...recommended.filter((connector) => !injectedIds.has(connector.id)),
+    );
+  }
+
+  if (order === "random") {
+    return shuffle(allConnectors);
+  }
+  return allConnectors.sort((a, b) => a.id.localeCompare(b.id));
+}
+
+function shuffle<T>(arr: T[]): T[] {
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    // @ts-ignore: not important
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+export function scanObjectForWallets(
+  // biome-ignore lint: window could contain anything
+  obj: Record<string, any>,
+): StarknetWindowObject[] {
+  return Object.values(
+    Object.getOwnPropertyNames(obj).reduce<
+      Record<string, StarknetWindowObject>
+    >((wallets, key) => {
+      if (key.startsWith("starknet")) {
+        const wallet = obj[key];
+
+        if (isWalletObject(wallet) && !wallets[wallet.id]) {
+          wallets[wallet.id] = wallet;
+        }
+      }
+      return wallets;
+    }, {}),
+  );
+}
+
+// biome-ignore lint: window could contain anything
+function isWalletObject(wallet: any): wallet is StarknetWindowObject {
+  try {
+    return (
+      wallet &&
+      [
+        // wallet's must have methods/members, see IStarknetWindowObject
+        "request",
+        "isConnected",
+        "provider",
+        "enable",
+        "isPreauthorized",
+        "on",
+        "off",
+        "version",
+        "id",
+        "name",
+        "icon",
+      ].every((key) => key in wallet)
+    );
+  } catch (err) {}
+  return false;
+}

packages/core/src/connectors/helpers.ts

@@ -0,0 +1,27 @@
+import { InjectedConnector } from "./injected";
+
+export function argent(): InjectedConnector {
+  return new InjectedConnector({
+    options: {
+      id: "argentX",
+      name: "Argent",
+    },
+  });
+}
+
+export function braavos(): InjectedConnector {
+  return new InjectedConnector({
+    options: {
+      id: "braavos",
+      name: "Braavos",
+    },
+  });
+}
+
+export function injected({ id }: { id: string }): InjectedConnector {
+  return new InjectedConnector({
+    options: {
+      id,
+    },
+  });
+}

packages/core/src/connectors/index.ts

@@ -1,36 +1,13 @@
 export { Connector } from "./base";
 export { InjectedConnector, type InjectedConnectorOptions } from "./injected";
-
+export {
+  type UseInjectedConnectorsProps,
+  type UseInjectedConnectorsResult,
+  useInjectedConnectors,
+} from "./discovery";
 export {
   MockConnector,
   type MockConnectorAccounts,
   type MockConnectorOptions,
 } from "./mock";
-
-import { InjectedConnector } from "./injected";
-
-export function argent(): InjectedConnector {
-  return new InjectedConnector({
-    options: {
-      id: "argentX",
-      name: "Argent",
-    },
-  });
-}
-
-export function braavos(): InjectedConnector {
-  return new InjectedConnector({
-    options: {
-      id: "braavos",
-      name: "Braavos",
-    },
-  });
-}
-
-export function injected({ id }: { id: string }): InjectedConnector {
-  return new InjectedConnector({
-    options: {
-      id,
-    },
-  });
-}
+export { argent, braavos, injected } from "./helpers";

website/components/starknet/provider.tsx

@@ -8,12 +8,22 @@ import {
   argent,
   braavos,
 } from "@starknet-react/core";
-import { useMemo } from "react";
+import { useInjectedConnectors } from "@/../packages/core/dist";
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
   const chains = [goerli, mainnet];
   const providers = [publicProvider()];
-  const connectors = useMemo(() => shuffle([argent(), braavos()]), []);
+  const { connectors } = useInjectedConnectors({
+    // Show these connectors if the user has no connector installed.
+    recommended: [
+      argent(),
+      braavos(),
+    ],
+    // Hide recommended connectors if the user has any connector installed.
+    includeRecommended: "onlyIfNoConnectors",
+    // Randomize the order of the connectors.
+    order: "random"
+  });
 
   return (
     <StarknetConfig
@@ -25,12 +35,3 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
     </StarknetConfig>
   );
 }
-
-function shuffle<T>(arr: T[]): T[] {
-  for (let i = arr.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    // @ts-ignore: not important
-    [arr[i], arr[j]] = [arr[j], arr[i]];
-  }
-  return arr;
-}