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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ckb-ccc/connector-react
 
+## 0.0.14-alpha.1
+
+### Patch Changes
+
+- [#48](https://github.com/ckb-ecofund/ccc/pull/48) [`4fb114b`](https://github.com/ckb-ecofund/ccc/commit/4fb114bc421c7250eed7388c16f1c026875153e6) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(okx): make okx wallet happy
+
+- Updated dependencies [[`4fb114b`](https://github.com/ckb-ecofund/ccc/commit/4fb114bc421c7250eed7388c16f1c026875153e6)]:
+  - @ckb-ccc/connector@0.0.14-alpha.1
+
+## 0.0.14-alpha.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @ckb-ccc/connector@0.0.14-alpha.0
+
 ## 0.0.13
 
 ### Patch Changes

package/README.md

@@ -15,6 +15,9 @@
   <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
   <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
   <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+  <a href="https://live.ckbccc.com/"><img
+    alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+  /></a>
   <a href="https://app.ckbccc.com/"><img
     alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
   /></a>
@@ -33,15 +36,37 @@
   Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+  <a href="https://live.ckbccc.com/">
+    <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+  </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
   <a href="https://app.ckbccc.com/">
-    <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+    <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
   </a>
 </p>
 
-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.
+For non-developers, you can also [try CCC's app 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>.

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",
+  "version": "0.0.14-alpha.1",
   "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"
+    "@ckb-ccc/connector": "0.0.14-alpha.1"
+  },
+  "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.",