@ckb-ccc/connector-react 0.0.5-alpha.8 → 0.0.5-alpha.9

package/dist/components/index.d.ts

@@ -2,5 +2,6 @@ import { ccc } from "@ckb-ccc/connector";
 import { EventName } from "@lit/react";
 export declare const Connector: import("@lit/react").ReactWebComponent<ccc.WebComponentConnector, {
     onWillUpdate: EventName<ccc.WillUpdateEvent>;
+    onClosed: EventName<ccc.ClosedEvent>;
 }>;
 //# 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,EAAE,SAAS,EAAmB,MAAM,YAAY,CAAC;AAGxD,eAAO,MAAM,SAAS;;EAOpB,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;;;EAQpB,CAAC"}

package/dist/components/index.js

@@ -8,5 +8,6 @@ export const Connector = createComponent({
     react: React,
     events: {
         onWillUpdate: "willUpdate",
+        onClosed: "closed",
     },
 });

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,qBAgDA;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,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"}

package/dist/hooks/useCcc.js

@@ -4,9 +4,13 @@ import { Connector } from "../components";
 const CCC_CONTEXT = createContext(undefined);
 export function Provider({ children, connectorProps, name, icon, signerFilter, client: clientArg, }) {
     const [ref, setRef] = useState(null);
+    const [isOpen, setIsOpen] = useState(false);
     const [_, setFlag] = useState(0);
     const client = useMemo(() => ref?.client ?? new ccc.ClientPublicTestnet(), [ref?.client]);
-    const open = useCallback(() => ref?.setIsOpen(true), [ref, ref?.setIsOpen]);
+    const open = useCallback(() => {
+        setIsOpen(true);
+        ref?.requestUpdate();
+    }, [setIsOpen, ref, ref?.requestUpdate]);
     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: {
@@ -17,10 +21,21 @@ 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), ...connectorProps,
+        React.createElement(Connector, { name: name, icon: icon, signerFilter: signerFilter, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClosed: () => setIsOpen(false), ...connectorProps,
             style: {
                 ...connectorProps?.style,
                 zIndex: connectorProps?.style?.zIndex ?? 999,
+                ...(isOpen ? {} : { display: "none" }),
+                ...{
+                    "--background": "#fff",
+                    "--divider": "#eee",
+                    "--btn-primary": "#f8f8f8",
+                    "--btn-primary-hover": "#efeeee",
+                    "--btn-secondary": "#ddd",
+                    "--btn-secondary-hover": "#ccc",
+                    color: "#1e1e1e",
+                    "--tip-color": "#666",
+                },
             },
             ...(clientArg ? { client: clientArg } : {}) }),
         children));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.5-alpha.8",
+  "version": "0.0.5-alpha.9",
   "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.5-alpha.8",
+    "@ckb-ccc/connector": "0.0.5-alpha.9",
     "@lit/react": "^1.0.5",
     "react": "^18"
   },
-  "gitHead": "f12b8758d8581bfae0c9a00abbb5f7d2c6d03147"
+  "gitHead": "086c38557153da6819615bdc08f80f56b00d79ca"
 }

package/src/components/index.ts

@@ -10,5 +10,6 @@ export const Connector = createComponent({
   react: React,
   events: {
     onWillUpdate: "willUpdate" as EventName<ccc.WillUpdateEvent>,
+    onClosed: "closed" as EventName<ccc.ClosedEvent>,
   },
 });

package/src/hooks/useCcc.tsx

@@ -33,13 +33,17 @@ export function Provider({
   client?: ccc.Client;
 }) {
   const [ref, setRef] = useState<WebComponentConnector | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
   const [_, setFlag] = useState(0);
 
   const client = useMemo(
     () => ref?.client ?? new ccc.ClientPublicTestnet(),
     [ref?.client],
   );
-  const open = useCallback(() => ref?.setIsOpen(true), [ref, ref?.setIsOpen]);
+  const open = useCallback(() => {
+    setIsOpen(true);
+    ref?.requestUpdate();
+  }, [setIsOpen, ref, ref?.requestUpdate]);
   const disconnect = useMemo(
     () => ref?.disconnect.bind(ref) ?? (() => {}),
     [ref, ref?.disconnect],
@@ -67,11 +71,23 @@ export function Provider({
         signerFilter={signerFilter}
         ref={setRef}
         onWillUpdate={() => setFlag((f) => f + 1)}
+        onClosed={() => setIsOpen(false)}
         {...{
           ...connectorProps,
           style: {
             ...connectorProps?.style,
             zIndex: connectorProps?.style?.zIndex ?? 999,
+            ...(isOpen ? {} : { display: "none" }),
+            ...({
+              "--background": "#fff",
+              "--divider": "#eee",
+              "--btn-primary": "#f8f8f8",
+              "--btn-primary-hover": "#efeeee",
+              "--btn-secondary": "#ddd",
+              "--btn-secondary-hover": "#ccc",
+              color: "#1e1e1e",
+              "--tip-color": "#666",
+            } as React.CSSProperties),
           },
           ...(clientArg ? { client: clientArg } : {}),
         }}