@ckb-ccc/connector-react 0.0.13-alpha.8 → 0.0.14-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @ckb-ccc/connector-react
 
+## 0.0.14-alpha.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @ckb-ccc/connector@0.0.14-alpha.0
+
+## 0.0.13
+
+### Patch Changes
+
+- [`9e6b9fd`](https://github.com/ckb-ecofund/ccc/commit/9e6b9fd40274015a0964dec8e0ee58dcbc06c786) Thanks [@Hanssen0](https://github.com/Hanssen0)! - fix(connector-react): if the filter is undefined, accept all
+
+- [`6d62032`](https://github.com/ckb-ecofund/ccc/commit/6d620326f42f8c48eff9deb95578cf28d7bf5c97) Thanks [@Hanssen0](https://github.com/Hanssen0)! - fix(core): recordCells should not add usableCells
+
+- [`3658797`](https://github.com/ckb-ecofund/ccc/commit/3658797e67c42c56b20fa66481d0455ed019e69f) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(core): node.js websocket
+
+- [#25](https://github.com/ckb-ecofund/ccc/pull/25) [`69c10fd`](https://github.com/ckb-ecofund/ccc/commit/69c10fdfcd507433c13b15d17015dca4687afb97) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(utxo-global): switchNetwork
+
+- [`44c7fee`](https://github.com/ckb-ecofund/ccc/commit/44c7feed37369836268fba21884418682f15254b) Thanks [@Hanssen0](https://github.com/Hanssen0)! - fix(core): completeInputs
+
+- [`079e20e`](https://github.com/ckb-ecofund/ccc/commit/079e20ef14cf9a7c06bbaddf3e92cbfbb005da11) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(core): more APIs. Since parsing.
+
+- [`ed154d1`](https://github.com/ckb-ecofund/ccc/commit/ed154d189e239907ad686ec51ac8133b6d5eb895) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(core): Signer.findCells
+
+- Updated dependencies [[`6d62032`](https://github.com/ckb-ecofund/ccc/commit/6d620326f42f8c48eff9deb95578cf28d7bf5c97), [`3658797`](https://github.com/ckb-ecofund/ccc/commit/3658797e67c42c56b20fa66481d0455ed019e69f), [`69c10fd`](https://github.com/ckb-ecofund/ccc/commit/69c10fdfcd507433c13b15d17015dca4687afb97), [`44c7fee`](https://github.com/ckb-ecofund/ccc/commit/44c7feed37369836268fba21884418682f15254b), [`079e20e`](https://github.com/ckb-ecofund/ccc/commit/079e20ef14cf9a7c06bbaddf3e92cbfbb005da11), [`ed154d1`](https://github.com/ckb-ecofund/ccc/commit/ed154d189e239907ad686ec51ac8133b6d5eb895)]:
+  - @ckb-ccc/connector@0.0.13
+
 ## 0.0.13-alpha.8
 
 ### Patch Changes

package/README.md

@@ -43,6 +43,18 @@
 
 This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
+## Use the Connector UI
+
+Before using the Connector, wrap your UI with the CCC Provider:
+
+```tsx
+<ccc.Provider>
+  {/* Your application */}
+</ccc.Provider>
+```
+
+Check [the document for @ckb-ccc/connector-react](https://docs.ckbccc.com/modules/_ckb_ccc_connector_react.index.ccc.html) for more information.
+
 <h3 align="center">
   Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.
 </h3>

package/dist/hooks/useCcc.d.ts

@@ -1,8 +1,8 @@
 import { ccc } from "@ckb-ccc/connector";
-import React from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 export declare function Provider({ children, connectorProps, name, icon, signerFilter, signersController, defaultClient, preferredNetworks, }: {
-    children: React.ReactNode;
-    connectorProps?: React.HTMLAttributes<{}>;
+    children: ReactNode;
+    connectorProps?: HTMLAttributes<{}>;
     name?: string;
     icon?: string;
     signerFilter?: (signerInfo: ccc.SignerInfo, wallet: ccc.Wallet) => Promise<boolean>;

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,KAON,MAAM,OAAO,CAAC;AA0Cf,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,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,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;CAC7C,qBAoFA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}
+{"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,EAAE,EAEZ,cAAc,EACd,SAAS,EAQV,MAAM,OAAO,CAAC;AA0Cf,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC;IACpC,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,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;CAC7C,qBAoFA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}

package/dist/hooks/useCcc.js

@@ -1,5 +1,5 @@
 import { ccc } from "@ckb-ccc/connector";
-import React, { createContext, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { Connector } from "../components/index.js";
 const CCC_CONTEXT = createContext(undefined);
 class SignersControllerWithFilter extends ccc.SignersController {
@@ -50,8 +50,7 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, s
         } },
         React.createElement(Connector, { name: name, icon: icon, signersController: signersController ?? defautlSignersController.current, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClose: () => setIsOpen(false), preferredNetworks: preferredNetworks, ...connectorProps,
             style: {
-                ...connectorProps?.style,
-                zIndex: connectorProps?.style?.zIndex ?? 999,
+                zIndex: 999,
                 ...(isOpen ? {} : { display: "none" }),
                 ...{
                     "--background": "#fff",
@@ -63,11 +62,12 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, s
                     color: "#1e1e1e",
                     "--tip-color": "#666",
                 },
+                ...connectorProps?.style,
             } }),
         children));
 }
 export function useCcc() {
-    const context = React.useContext(CCC_CONTEXT);
+    const context = useContext(CCC_CONTEXT);
     if (!context) {
         throw Error("The component which invokes the useCcc hook should be placed in a ccc.Provider.");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.13-alpha.8",
+  "version": "0.0.14-alpha.0",
   "description": "CCC - CKBer's Codebase. Common Chains Connector UI Component for React",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -35,8 +35,10 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "react": "^18",
-    "@ckb-ccc/connector": "0.0.13-alpha.8"
+    "@ckb-ccc/connector": "0.0.14-alpha.0"
+  },
+  "peerDependencies": {
+    "react": ">=16"
   },
   "scripts": {
     "build": "rimraf ./dist && tsc",

package/src/hooks/useCcc.tsx

@@ -1,7 +1,11 @@
 import { ccc } from "@ckb-ccc/connector";
 import React, {
+  CSSProperties,
+  HTMLAttributes,
+  ReactNode,
   createContext,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -58,8 +62,8 @@ export function Provider({
   defaultClient,
   preferredNetworks,
 }: {
-  children: React.ReactNode;
-  connectorProps?: React.HTMLAttributes<{}>;
+  children: ReactNode;
+  connectorProps?: HTMLAttributes<{}>;
   name?: string;
   icon?: string;
   signerFilter?: (
@@ -134,8 +138,7 @@ export function Provider({
         {...{
           ...connectorProps,
           style: {
-            ...connectorProps?.style,
-            zIndex: connectorProps?.style?.zIndex ?? 999,
+            zIndex: 999,
             ...(isOpen ? {} : { display: "none" }),
             ...({
               "--background": "#fff",
@@ -146,7 +149,8 @@ export function Provider({
               "--btn-secondary-hover": "#ccc",
               color: "#1e1e1e",
               "--tip-color": "#666",
-            } as React.CSSProperties),
+            } as CSSProperties),
+            ...connectorProps?.style,
           },
         }}
       />
@@ -156,7 +160,7 @@ export function Provider({
 }
 
 export function useCcc() {
-  const context = React.useContext(CCC_CONTEXT);
+  const context = useContext(CCC_CONTEXT);
   if (!context) {
     throw Error(
       "The component which invokes the useCcc hook should be placed in a ccc.Provider.",