@ckb-ccc/connector-react 0.0.4-alpha.8 → 0.0.4

package/dist/components/index.d.ts

@@ -1,8 +1,6 @@
 import { ccc } from "@ckb-ccc/connector";
-import { type EventName } from "@lit/react";
+import { EventName } from "@lit/react";
 export declare const Connector: import("@lit/react").ReactWebComponent<ccc.WebComponentConnector, {
-    onSignerChanged: EventName<ccc.SignerChangedEvent>;
-    onStatusChanged: EventName<ccc.StatusChangedEvent>;
-    onClose: EventName<ccc.CloseEvent>;
+    onWillUpdate: EventName<ccc.WillUpdateEvent>;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;EASpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAmB,MAAM,YAAY,CAAC;AAGxD,eAAO,MAAM,SAAS;;EAOpB,CAAC"}

package/dist/components/index.js

@@ -7,8 +7,6 @@ export const Connector = createComponent({
     elementClass: ccc.WebComponentConnector,
     react: React,
     events: {
-        onSignerChanged: "signerChanged",
-        onStatusChanged: "statusChanged",
-        onClose: "close",
+        onWillUpdate: "willUpdate",
     },
 });

package/dist/hooks/useCcc.d.ts

@@ -1,14 +1,15 @@
 import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { ReactNode } from "react";
-export declare function Provider({ children }: {
-    children: ReactNode;
+import React from "react";
+export declare function Provider({ children, connectorProps, }: {
+    children: React.ReactNode;
+    connectorProps?: React.HTMLAttributes<{}>;
 }): React.JSX.Element;
 export declare function useCcc(): {
     open: () => unknown;
     disconnect: () => unknown;
+    setClient: (client: ccc.Client) => unknown;
+    client: ccc.Client;
     wallet?: ccc.Wallet | undefined;
     signerInfo?: ccc.SignerInfo | undefined;
-    status: ccc.ConnectorStatus;
 };
 //# sourceMappingURL=useCcc.d.ts.map

package/dist/hooks/useCcc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCcc.d.ts","sourceRoot":"","sources":["../../src/hooks/useCcc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAe3D,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAgD7D;AAED,wBAAgB,MAAM;;;;;;EAErB"}
+{"version":3,"file":"useCcc.d.ts","sourceRoot":"","sources":["../../src/hooks/useCcc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAwD,MAAM,OAAO,CAAC;AAe7E,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;CAC3C,qBA4CA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}

package/dist/hooks/useCcc.js

@@ -1,44 +1,33 @@
 import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { createContext, useState } from "react";
+import React, { createContext, useCallback, useMemo, useState } from "react";
 import { Connector } from "../components";
-const CCC_CONTEXT = createContext({
-    open: () => { },
-    disconnect: () => { },
-    status: ccc.ConnectorStatus.SelectingSigner,
-});
-export function Provider({ children }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [wallet, setWallet] = useState();
-    const [signerInfo, setSignerInfo] = useState();
-    const [status, setStatus] = useState(ccc.ConnectorStatus.SelectingSigner);
+const CCC_CONTEXT = createContext(undefined);
+export function Provider({ children, connectorProps, }) {
+    const [ref, setRef] = useState(null);
+    const [_, setFlag] = useState(0);
+    const client = useMemo(() => ref?.client ?? new ccc.ClientPublicTestnet(), [ref?.client]);
+    const open = useCallback(() => ref?.setIsOpen(true), [ref, ref?.setIsOpen]);
+    const disconnect = useMemo(() => ref?.disconnect.bind(ref) ?? (() => { }), [ref, ref?.disconnect]);
+    const setClient = useMemo(() => ref?.setClient.bind(ref) ?? (() => { }), [ref, ref?.setClient]);
     return (React.createElement(CCC_CONTEXT.Provider, { value: {
-            open: () => setIsOpen(true),
-            disconnect: () => {
-                setWallet(undefined);
-                setSignerInfo(undefined);
-                setStatus(ccc.ConnectorStatus.SelectingSigner);
-            },
-            ...([
-                ccc.ConnectorStatus.SelectingSigner,
-                ccc.ConnectorStatus.Connecting,
-            ].includes(status)
-                ? {
-                    wallet: undefined,
-                    signerInfo: undefined,
-                }
-                : {
-                    wallet,
-                    signerInfo,
-                }),
-            status,
+            open,
+            disconnect,
+            setClient,
+            client,
+            wallet: ref?.wallet,
+            signerInfo: ref?.signer,
         } },
-        React.createElement(Connector, { isOpen: isOpen, wallet: wallet, signer: signerInfo, status: status, onClose: () => setIsOpen(false), onSignerChanged: ({ wallet, signerInfo }) => {
-                setWallet(wallet);
-                setSignerInfo(signerInfo);
-            }, onStatusChanged: ({ status }) => setStatus(status) }),
+        React.createElement(Connector, { ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), ...connectorProps,
+            style: {
+                ...connectorProps?.style,
+                zIndex: connectorProps?.style?.zIndex ?? 999,
+            } }),
         children));
 }
 export function useCcc() {
-    return React.useContext(CCC_CONTEXT);
+    const context = React.useContext(CCC_CONTEXT);
+    if (!context) {
+        throw Error("The component which invokes the useCcc hook should be placed in a ccc.Provider.");
+    }
+    return context;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.4-alpha.8",
+  "version": "0.0.4",
   "description": "Common Chains Connector UI Component for React",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -38,9 +38,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/connector": "0.0.4-alpha.8",
+    "@ckb-ccc/connector": "0.0.4",
     "@lit/react": "^1.0.5",
     "react": "^18"
   },
-  "gitHead": "98556e415832a41aeedb467e8a72b8861fe6a32d"
+  "gitHead": "76485b6b76ce3c97d5acebd42decbafd546aa433"
 }

package/src/components/index.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { ccc } from "@ckb-ccc/connector";
-import { createComponent, type EventName } from "@lit/react";
+import { EventName, createComponent } from "@lit/react";
 import * as React from "react";
 
 export const Connector = createComponent({
@@ -9,8 +9,6 @@ export const Connector = createComponent({
   elementClass: ccc.WebComponentConnector,
   react: React,
   events: {
-    onSignerChanged: "signerChanged" as EventName<ccc.SignerChangedEvent>,
-    onStatusChanged: "statusChanged" as EventName<ccc.StatusChangedEvent>,
-    onClose: "close" as EventName<ccc.CloseEvent>,
+    onWillUpdate: "willUpdate" as EventName<ccc.WillUpdateEvent>,
   },
 });

package/src/hooks/useCcc.tsx

@@ -1,64 +1,65 @@
-import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { ReactNode, createContext, useState } from "react";
+import { WebComponentConnector, ccc } from "@ckb-ccc/connector";
+import React, { createContext, useCallback, useMemo, useState } from "react";
 import { Connector } from "../components";
 
-const CCC_CONTEXT = createContext<{
-  open: () => unknown;
-  disconnect: () => unknown;
-  wallet?: ccc.Wallet;
-  signerInfo?: ccc.SignerInfo;
-  status: ccc.ConnectorStatus;
-}>({
-  open: () => {},
-  disconnect: () => {},
-  status: ccc.ConnectorStatus.SelectingSigner,
-});
+const CCC_CONTEXT = createContext<
+  | {
+      open: () => unknown;
+      disconnect: () => unknown;
+      setClient: (client: ccc.Client) => unknown;
+      client: ccc.Client;
+      wallet?: ccc.Wallet;
+      signerInfo?: ccc.SignerInfo;
+    }
+  | undefined
+>(undefined);
 
-export function Provider({ children }: { children: ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [wallet, setWallet] = useState<ccc.Wallet | undefined>();
-  const [signerInfo, setSignerInfo] = useState<ccc.SignerInfo | undefined>();
-  const [status, setStatus] = useState<ccc.ConnectorStatus>(
-    ccc.ConnectorStatus.SelectingSigner,
+export function Provider({
+  children,
+  connectorProps,
+}: {
+  children: React.ReactNode;
+  connectorProps?: React.HTMLAttributes<{}>;
+}) {
+  const [ref, setRef] = useState<WebComponentConnector | null>(null);
+  const [_, setFlag] = useState(0);
+
+  const client = useMemo(
+    () => ref?.client ?? new ccc.ClientPublicTestnet(),
+    [ref?.client],
+  );
+  const open = useCallback(() => ref?.setIsOpen(true), [ref, ref?.setIsOpen]);
+  const disconnect = useMemo(
+    () => ref?.disconnect.bind(ref) ?? (() => {}),
+    [ref, ref?.disconnect],
+  );
+  const setClient = useMemo(
+    () => ref?.setClient.bind(ref) ?? (() => {}),
+    [ref, ref?.setClient],
   );
 
   return (
     <CCC_CONTEXT.Provider
       value={{
-        open: () => setIsOpen(true),
-        disconnect: () => {
-          setWallet(undefined);
-          setSignerInfo(undefined);
-          setStatus(ccc.ConnectorStatus.SelectingSigner);
-        },
+        open,
+        disconnect,
+        setClient,
 
-        ...([
-          ccc.ConnectorStatus.SelectingSigner,
-          ccc.ConnectorStatus.Connecting,
-        ].includes(status)
-          ? {
-              wallet: undefined,
-              signerInfo: undefined,
-            }
-          : {
-              wallet,
-              signerInfo,
-            }),
-        status,
+        client,
+        wallet: ref?.wallet,
+        signerInfo: ref?.signer,
       }}
     >
       <Connector
-        isOpen={isOpen}
-        wallet={wallet}
-        signer={signerInfo}
-        status={status}
-        onClose={() => setIsOpen(false)}
-        onSignerChanged={({ wallet, signerInfo }) => {
-          setWallet(wallet);
-          setSignerInfo(signerInfo);
+        ref={setRef}
+        onWillUpdate={() => setFlag((f) => f + 1)}
+        {...{
+          ...connectorProps,
+          style: {
+            ...connectorProps?.style,
+            zIndex: connectorProps?.style?.zIndex ?? 999,
+          },
         }}
-        onStatusChanged={({ status }) => setStatus(status)}
       />
       {children}
     </CCC_CONTEXT.Provider>
@@ -66,5 +67,11 @@ export function Provider({ children }: { children: ReactNode }) {
 }
 
 export function useCcc() {
-  return React.useContext(CCC_CONTEXT);
+  const context = React.useContext(CCC_CONTEXT);
+  if (!context) {
+    throw Error(
+      "The component which invokes the useCcc hook should be placed in a ccc.Provider.",
+    );
+  }
+  return context;
 }

package/tsconfig.base.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "jsx": "react",
+    "incremental": true,
+    "allowJs": true,
+    "importHelpers": false,
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+    "alwaysStrict": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.commonjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist.commonjs"
+  }
+}