@ckb-ccc/connector-react 0.0.8-alpha.4 → 0.0.9-alpha.0

package/dist/hooks/useCcc.d.ts

@@ -1,12 +1,13 @@
 import { ccc } from "@ckb-ccc/connector";
 import React from "react";
-export declare function Provider({ children, connectorProps, name, icon, signerFilter, client: clientArg, }: {
+export declare function Provider({ children, connectorProps, name, icon, signerFilter, defaultClient, preferredNetworks, }: {
     children: React.ReactNode;
     connectorProps?: React.HTMLAttributes<{}>;
     name?: string;
     icon?: string;
     signerFilter?: (signerInfo: ccc.SignerInfo, wallet: ccc.Wallet) => Promise<boolean>;
-    client?: ccc.Client;
+    defaultClient?: ccc.Client;
+    preferredNetworks?: ccc.NetworkPreference[];
 }): React.JSX.Element;
 export declare function useCcc(): {
     open: () => unknown;

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,EAAyB,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAwD,MAAM,OAAO,CAAC;AAe7E,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EAAE,SAAS,GAClB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CACb,UAAU,EAAE,GAAG,CAAC,UAAU,EAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;CACrB,qBAgEA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}
+{"version":3,"file":"useCcc.d.ts","sourceRoot":"","sources":["../../src/hooks/useCcc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAMN,MAAM,OAAO,CAAC;AAef,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CACb,UAAU,EAAE,GAAG,CAAC,UAAU,EAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;CAC7C,qBAsEA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}

package/dist/hooks/useCcc.js

@@ -1,8 +1,8 @@
 import { ccc } from "@ckb-ccc/connector";
-import React, { createContext, useCallback, useMemo, useState } from "react";
+import React, { createContext, useCallback, useEffect, useMemo, useState, } from "react";
 import { Connector } from "../components";
 const CCC_CONTEXT = createContext(undefined);
-export function Provider({ children, connectorProps, name, icon, signerFilter, client: clientArg, }) {
+export function Provider({ children, connectorProps, name, icon, signerFilter, defaultClient, preferredNetworks, }) {
     const [ref, setRef] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [_, setFlag] = useState(0);
@@ -13,6 +13,11 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, c
     }, [setIsOpen, ref, ref?.requestUpdate]);
     const disconnect = useMemo(() => ref?.disconnect.bind(ref) ?? (() => { }), [ref, ref?.disconnect]);
     const setClient = useMemo(() => ref?.setClient.bind(ref) ?? (() => { }), [ref, ref?.setClient]);
+    useEffect(() => {
+        if (defaultClient) {
+            setClient(defaultClient);
+        }
+    }, [setClient]);
     return (React.createElement(CCC_CONTEXT.Provider, { value: {
             open,
             disconnect,
@@ -21,7 +26,7 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, c
             wallet: ref?.wallet,
             signerInfo: ref?.signer,
         } },
-        React.createElement(Connector, { name: name, icon: icon, signerFilter: signerFilter, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClosed: () => setIsOpen(false), ...connectorProps,
+        React.createElement(Connector, { name: name, icon: icon, signerFilter: signerFilter, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClosed: () => setIsOpen(false), preferredNetworks: preferredNetworks, ...connectorProps,
             style: {
                 ...connectorProps?.style,
                 zIndex: connectorProps?.style?.zIndex ?? 999,
@@ -36,8 +41,7 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, c
                     color: "#1e1e1e",
                     "--tip-color": "#666",
                 },
-            },
-            ...(clientArg ? { client: clientArg } : {}) }),
+            } }),
         children));
 }
 export function useCcc() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.8-alpha.4",
+  "version": "0.0.9-alpha.0",
   "description": "CCC - CKBer's Codebase. 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.8-alpha.4",
+    "@ckb-ccc/connector": "0.0.9-alpha.0",
     "@lit/react": "^1.0.5",
     "react": "^18"
   },
-  "gitHead": "444a378be18f46f5d13b18848fa90829755d5ff8"
+  "gitHead": "ac4435006da9c9e48b3b66fc329e6f539156b252"
 }

package/src/hooks/useCcc.tsx

@@ -1,5 +1,11 @@
 import { WebComponentConnector, ccc } from "@ckb-ccc/connector";
-import React, { createContext, useCallback, useMemo, useState } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { Connector } from "../components";
 
 const CCC_CONTEXT = createContext<
@@ -20,7 +26,8 @@ export function Provider({
   name,
   icon,
   signerFilter,
-  client: clientArg,
+  defaultClient,
+  preferredNetworks,
 }: {
   children: React.ReactNode;
   connectorProps?: React.HTMLAttributes<{}>;
@@ -30,7 +37,8 @@ export function Provider({
     signerInfo: ccc.SignerInfo,
     wallet: ccc.Wallet,
   ) => Promise<boolean>;
-  client?: ccc.Client;
+  defaultClient?: ccc.Client;
+  preferredNetworks?: ccc.NetworkPreference[];
 }) {
   const [ref, setRef] = useState<WebComponentConnector | null>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -53,6 +61,12 @@ export function Provider({
     [ref, ref?.setClient],
   );
 
+  useEffect(() => {
+    if (defaultClient) {
+      setClient(defaultClient);
+    }
+  }, [setClient]);
+
   return (
     <CCC_CONTEXT.Provider
       value={{
@@ -72,6 +86,7 @@ export function Provider({
         ref={setRef}
         onWillUpdate={() => setFlag((f) => f + 1)}
         onClosed={() => setIsOpen(false)}
+        preferredNetworks={preferredNetworks}
         {...{
           ...connectorProps,
           style: {
@@ -89,7 +104,6 @@ export function Provider({
               "--tip-color": "#666",
             } as React.CSSProperties),
           },
-          ...(clientArg ? { client: clientArg } : {}),
         }}
       />
       {children}