Merge pull request #213 from argentlabs/fix/sn-react-type-issue

fix: `connectionStatus` compatibility with `starknet-react`

Author: Aleksandar Cakalic

src/connectors/connector.ts

@@ -23,15 +23,18 @@ export type ConnectorData = {
 }
 
 /** Connector events. */
-export interface ConnectorEvents {
+export interface BaseConnectorEvents {
   /** Emitted when account or network changes. */
   change(data: ConnectorData): void
   /** Emitted when connection is established. */
   connect(data: ConnectorData): void
   /** Emitted when connection is lost. */
   disconnect(): void
+}
+
+interface ConnectorEvents extends BaseConnectorEvents {
   /** Emitted when `shouldEmit` is true, used for StarknetReactWrapper */
-  connectionStatus(s: "init" | "success" | "fail" | "fallback"): void
+  connectionStatus?(s: "init" | "success" | "fail" | "fallback"): void
 }
 
 export type ConnectArgs = {
@@ -65,6 +68,10 @@ export abstract class Connector extends EventEmitter<ConnectorEvents> {
   abstract request<T extends RpcMessage["type"]>(
     call: RequestFnCall<T>,
   ): Promise<RpcTypeToMessageMap[T]["result"]>
+  /** Handle starknet-react type compatibility */
+  eventNames(): (keyof BaseConnectorEvents)[] {
+    return ["change", "connect", "disconnect"]
+  }
 }
 
 export abstract class StarknetkitConnector extends Connector {

src/starknet-react/index.tsx

@@ -62,7 +62,13 @@ function StarknetReactWrapper({
 
   useEffect(() => {
     if (mainConnector && isCompound) {
-      mainConnector.on("connectionStatus", function (newStatus) {
+      const onConnectionStatus = (
+        cb: (status: "init" | "success" | "fail" | "fallback") => void,
+      ) => {
+        mainConnector?.on("connectionStatus", cb as any)
+      }
+
+      onConnectionStatus(function (newStatus) {
         if (newStatus !== "fallback") {
           setStatus((prevStatus) => {
             if (prevStatus === "none" && newStatus === "fail") {
@@ -97,7 +103,13 @@ function StarknetReactWrapper({
       resolve = res
       reject = rej
 
-      mainConnector?.on("connectionStatus", async (status) => {
+      const onConnectionStatus = (
+        cb: (status: "init" | "success" | "fail" | "fallback") => void,
+      ) => {
+        mainConnector?.on("connectionStatus", cb as any)
+      }
+
+      onConnectionStatus((status) => {
         if (status === "fallback") {
           reject({ message: ERROR_MAPPING["0001"] })
         }