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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @ckb-ccc/connector-react
 
+## 0.0.14-alpha.2
+
+### Patch Changes
+
+- [#53](https://github.com/ckb-ecofund/ccc/pull/53) [`32bffff`](https://github.com/ckb-ecofund/ccc/commit/32bffff407934ec5d16bf7c5701b128d8b29c452) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(connector): select client
+
+- Updated dependencies [[`32bffff`](https://github.com/ckb-ecofund/ccc/commit/32bffff407934ec5d16bf7c5701b128d8b29c452)]:
+  - @ckb-ccc/connector@0.0.14-alpha.2
+
+## 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

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,25 @@
   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
 

package/dist/hooks/useCcc.d.ts

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

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,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"}
+{"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,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,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtE,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;CAC7C,qBAuFA;AAED,wBAAgB,MAAM;;;;;;;EAQrB"}

package/dist/hooks/useCcc.js

@@ -15,7 +15,7 @@ class SignersControllerWithFilter extends ccc.SignersController {
         return super.addSigner(walletName, icon, signerInfo, context);
     }
 }
-export function Provider({ children, connectorProps, name, icon, signerFilter, signersController, defaultClient, preferredNetworks, }) {
+export function Provider({ children, connectorProps, name, icon, signerFilter, signersController, defaultClient, clientOptions, preferredNetworks, }) {
     const [ref, setRef] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [_, setFlag] = useState(0);
@@ -48,7 +48,7 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, s
             wallet: ref?.wallet,
             signerInfo: ref?.signer,
         } },
-        React.createElement(Connector, { name: name, icon: icon, signersController: signersController ?? defautlSignersController.current, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClose: () => setIsOpen(false), preferredNetworks: preferredNetworks, ...connectorProps,
+        React.createElement(Connector, { name: name, icon: icon, signersController: signersController ?? defautlSignersController.current, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClose: () => setIsOpen(false), preferredNetworks: preferredNetworks, clientOptions: clientOptions, ...connectorProps,
             style: {
                 zIndex: 999,
                 ...(isOpen ? {} : { display: "none" }),
@@ -59,6 +59,8 @@ export function Provider({ children, connectorProps, name, icon, signerFilter, s
                     "--btn-primary-hover": "#efeeee",
                     "--btn-secondary": "#ddd",
                     "--btn-secondary-hover": "#ccc",
+                    "--icon-primary": "#1E1E1E",
+                    "--icon-secondary": "#666666",
                     color: "#1e1e1e",
                     "--tip-color": "#666",
                 },

package/package.json

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

package/src/hooks/useCcc.tsx

@@ -60,6 +60,7 @@ export function Provider({
   signerFilter,
   signersController,
   defaultClient,
+  clientOptions,
   preferredNetworks,
 }: {
   children: ReactNode;
@@ -72,6 +73,7 @@ export function Provider({
   ) => Promise<boolean>;
   signersController?: ccc.SignersController;
   defaultClient?: ccc.Client;
+  clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
   preferredNetworks?: ccc.NetworkPreference[];
 }) {
   const [ref, setRef] = useState<ccc.WebComponentConnector | null>(null);
@@ -135,6 +137,7 @@ export function Provider({
         onWillUpdate={() => setFlag((f) => f + 1)}
         onClose={() => setIsOpen(false)}
         preferredNetworks={preferredNetworks}
+        clientOptions={clientOptions}
         {...{
           ...connectorProps,
           style: {
@@ -147,6 +150,8 @@ export function Provider({
               "--btn-primary-hover": "#efeeee",
               "--btn-secondary": "#ddd",
               "--btn-secondary-hover": "#ccc",
+              "--icon-primary": "#1E1E1E",
+              "--icon-secondary": "#666666",
               color: "#1e1e1e",
               "--tip-color": "#666",
             } as CSSProperties),