core: add legacy connector adapter

change/@starknet-react-core-683ce251-dd83-4e84-a241-b4e6117f44af.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "core: add legacy connector adapter",
+  "packageName": "@starknet-react/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

docs/components/starknet/provider.tsx

@@ -27,6 +27,7 @@ export function StarknetProvider({
     includeRecommended: "always",
     // Randomize the order of the connectors.
     order: "alphabetical",
+    shimLegacyConnectors: ["okxwallet"],
   });
 
   return (

packages/core/src/connectors/discovery.ts

@@ -2,7 +2,7 @@ import type { StarknetWindowObject } from "get-starknet-core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import type { Connector } from "./base";
-import { injected } from "./helpers";
+import { injected, legacyInjected } from "./helpers";
 
 export type UseInjectedConnectorsProps = {
   /** List of recommended connectors to display. */
@@ -11,6 +11,8 @@ export type UseInjectedConnectorsProps = {
   includeRecommended?: "always" | "onlyIfNoConnectors";
   /** How to order connectors. */
   order?: "random" | "alphabetical";
+  /** Shim the following legacy connectors if they are detected. */
+  shimLegacyConnectors?: string[];
 };
 
 export type UseInjectedConnectorsResult = {
@@ -22,14 +24,20 @@ export function useInjectedConnectors({
   recommended,
   includeRecommended = "always",
   order = "alphabetical",
+  shimLegacyConnectors = [],
 }: UseInjectedConnectorsProps): UseInjectedConnectorsResult {
   const [injectedConnectors, setInjectedConnectors] = useState<Connector[]>([]);
 
   const refreshConnectors = useCallback(() => {
     const wallets = scanObjectForWallets(window);
-    const connectors = wallets.map((wallet) => injected({ id: wallet.id }));
+    const connectors = wallets.map((wallet) => {
+      if (shimLegacyConnectors.includes(wallet.id)) {
+        return legacyInjected({ id: wallet.id });
+      }
+      return injected({ id: wallet.id });
+    });
     setInjectedConnectors(connectors);
-  }, []);
+  }, [shimLegacyConnectors.includes]);
 
   useEffect(() => {
     refreshConnectors();

packages/core/src/connectors/helpers.ts

@@ -1,4 +1,5 @@
 import { InjectedConnector } from "./injected";
+import { LegacyInjectedConnector } from "./legacy";
 
 export function argent(): InjectedConnector {
   return new InjectedConnector({
@@ -25,3 +26,13 @@ export function injected({ id }: { id: string }): InjectedConnector {
     },
   });
 }
+
+export function legacyInjected({
+  id,
+}: { id: string }): LegacyInjectedConnector {
+  return new LegacyInjectedConnector({
+    options: {
+      id,
+    },
+  });
+}

packages/core/src/connectors/index.ts

@@ -1,5 +1,9 @@
 export { Connector, type ConnectArgs } from "./base";
 export { InjectedConnector, type InjectedConnectorOptions } from "./injected";
+export {
+  LegacyInjectedConnector,
+  type LegacyInjectedConnectorOptions,
+} from "./legacy";
 export {
   type UseInjectedConnectorsProps,
   type UseInjectedConnectorsResult,
@@ -10,4 +14,4 @@ export {
   type MockConnectorAccounts,
   type MockConnectorOptions,
 } from "./mock";
-export { argent, braavos, injected } from "./helpers";
+export { argent, braavos, injected, legacyInjected } from "./helpers";