@ckb-ccc/connector-react 0.0.4-alpha.0 → 0.0.4-alpha.10

package/README.md

@@ -0,0 +1,37 @@
+<h1 align="center" style="font-size: 48px;">
+  CCC Connector for React
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@ckb-ccc/connector-react"><img
+    alt="NPM Version" src="https://img.shields.io/npm/v/%40ckb-ccc%2Fconnector-react"
+  /></a>
+  <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 deployments" src="https://img.shields.io/github/deployments/ckb-ecofund/ccc/production" />
+  <a href="https://ckbccc-demo.vercel.app/"><img
+    alt="Demo" src="https://img.shields.io/website?url=https%3A%2F%2Fckbccc-demo.vercel.app%2F&label=Demo"
+  /></a>
+</p>
+
+<p align="center">
+  "Common Chains Connector" is where CCC begins.
+  <br />
+  CCC helps you to interoperate wallets from different chain ecosystems with CKB,
+  <br />
+  fully enabling CKB's cryptographic freedom power.
+</p>
+
+## Preview
+
+<p align="center">
+  <a href="https://ckbccc-demo.vercel.app/">
+    <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+  </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://ckbccc-demo.vercel.app/).
+
+<h3 align="center">
+  Read more about CCC on its <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.
+</h3>

package/dist/hooks/useCcc.d.ts

@@ -1,12 +1,14 @@
 import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { ReactNode } from "react";
-export declare function Provider({ children }: {
-    children: ReactNode;
+import React from "react";
+export declare function Provider({ children, connectorProps, }: {
+    children: React.ReactNode;
+    connectorProps?: React.HTMLAttributes<{}>;
 }): React.JSX.Element;
 export declare function useCcc(): {
     open: () => unknown;
     disconnect: () => unknown;
+    setClient: (client: ccc.Client) => unknown;
+    client: ccc.Client;
     wallet?: ccc.Wallet | undefined;
     signerInfo?: ccc.SignerInfo | undefined;
     status: ccc.ConnectorStatus;

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,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAe3D,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAgD7D;AAED,wBAAgB,MAAM;;;;;;EAErB"}
+{"version":3,"file":"useCcc.d.ts","sourceRoot":"","sources":["../../src/hooks/useCcc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAkC,MAAM,OAAO,CAAC;AAgBvD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;CAC3C,qBA6DA;AAED,wBAAgB,MAAM;;;;;;;;EAQrB"}

package/dist/hooks/useCcc.js

@@ -1,14 +1,10 @@
 import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { createContext, useState } from "react";
+import React, { createContext, useState } from "react";
 import { Connector } from "../components";
-const CCC_CONTEXT = createContext({
-    open: () => { },
-    disconnect: () => { },
-    status: ccc.ConnectorStatus.SelectingSigner,
-});
-export function Provider({ children }) {
+const CCC_CONTEXT = createContext(undefined);
+export function Provider({ children, connectorProps, }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [client, setClient] = useState(() => new ccc.ClientPublicTestnet());
     const [wallet, setWallet] = useState();
     const [signerInfo, setSignerInfo] = useState();
     const [status, setStatus] = useState(ccc.ConnectorStatus.SelectingSigner);
@@ -19,6 +15,8 @@ export function Provider({ children }) {
                 setSignerInfo(undefined);
                 setStatus(ccc.ConnectorStatus.SelectingSigner);
             },
+            setClient,
+            client,
             ...([
                 ccc.ConnectorStatus.SelectingSigner,
                 ccc.ConnectorStatus.Connecting,
@@ -33,12 +31,20 @@ export function Provider({ children }) {
                 }),
             status,
         } },
-        React.createElement(Connector, { isOpen: isOpen, wallet: wallet, signer: signerInfo, status: status, onClose: () => setIsOpen(false), onSignerChanged: ({ wallet, signerInfo }) => {
+        React.createElement(Connector, { isOpen: isOpen, client: client, wallet: wallet, signer: signerInfo, status: status, onClose: () => setIsOpen(false), onSignerChanged: ({ wallet, signerInfo }) => {
                 setWallet(wallet);
                 setSignerInfo(signerInfo);
-            }, onStatusChanged: ({ status }) => setStatus(status) }),
+            }, onStatusChanged: ({ status }) => setStatus(status), ...connectorProps,
+            style: {
+                ...connectorProps?.style,
+                zIndex: connectorProps?.style?.zIndex ?? 999,
+            } }),
         children));
 }
 export function useCcc() {
-    return React.useContext(CCC_CONTEXT);
+    const context = React.useContext(CCC_CONTEXT);
+    if (!context) {
+        throw Error("The component which invokes the useCcc hook should be placed in a ccc.Provider.");
+    }
+    return context;
 }

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.4-alpha.0",
+  "version": "0.0.4-alpha.10",
   "description": "Common Chains Connector UI Component for React",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
   "private": false,
-  "homepage": "https://github.com/Hanssen0/ccc",
+  "homepage": "https://github.com/ckb-ecofund/ccc",
   "repository": {
     "type": "git",
-    "url": "git://github.com/Hanssen0/ccc.git"
+    "url": "git://github.com/ckb-ecofund/ccc.git"
   },
   "main": "dist/index.js",
   "exports": {
@@ -38,9 +38,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/connector": "0.0.4-alpha.0",
+    "@ckb-ccc/connector": "0.0.4-alpha.10",
     "@lit/react": "^1.0.5",
     "react": "^18"
   },
-  "gitHead": "e49045ed4b2778c92d6f49b79c17125245141a21"
+  "gitHead": "dec13b260f57a1b244c69af5566e316a4c329e35"
 }

package/src/hooks/useCcc.tsx

@@ -1,22 +1,31 @@
 import { ccc } from "@ckb-ccc/connector";
-import * as React from "react";
-import { ReactNode, createContext, useState } from "react";
+import React, { createContext, useState } from "react";
 import { Connector } from "../components";
 
-const CCC_CONTEXT = createContext<{
-  open: () => unknown;
-  disconnect: () => unknown;
-  wallet?: ccc.Wallet;
-  signerInfo?: ccc.SignerInfo;
-  status: ccc.ConnectorStatus;
-}>({
-  open: () => {},
-  disconnect: () => {},
-  status: ccc.ConnectorStatus.SelectingSigner,
-});
+const CCC_CONTEXT = createContext<
+  | {
+      open: () => unknown;
+      disconnect: () => unknown;
+      setClient: (client: ccc.Client) => unknown;
+      client: ccc.Client;
+      wallet?: ccc.Wallet;
+      signerInfo?: ccc.SignerInfo;
+      status: ccc.ConnectorStatus;
+    }
+  | undefined
+>(undefined);
 
-export function Provider({ children }: { children: ReactNode }) {
+export function Provider({
+  children,
+  connectorProps,
+}: {
+  children: React.ReactNode;
+  connectorProps?: React.HTMLAttributes<{}>;
+}) {
   const [isOpen, setIsOpen] = useState(false);
+  const [client, setClient] = useState<ccc.Client>(
+    () => new ccc.ClientPublicTestnet(),
+  );
   const [wallet, setWallet] = useState<ccc.Wallet | undefined>();
   const [signerInfo, setSignerInfo] = useState<ccc.SignerInfo | undefined>();
   const [status, setStatus] = useState<ccc.ConnectorStatus>(
@@ -32,7 +41,9 @@ export function Provider({ children }: { children: ReactNode }) {
           setSignerInfo(undefined);
           setStatus(ccc.ConnectorStatus.SelectingSigner);
         },
+        setClient,
 
+        client,
         ...([
           ccc.ConnectorStatus.SelectingSigner,
           ccc.ConnectorStatus.Connecting,
@@ -50,6 +61,7 @@ export function Provider({ children }: { children: ReactNode }) {
     >
       <Connector
         isOpen={isOpen}
+        client={client}
         wallet={wallet}
         signer={signerInfo}
         status={status}
@@ -59,6 +71,13 @@ export function Provider({ children }: { children: ReactNode }) {
           setSignerInfo(signerInfo);
         }}
         onStatusChanged={({ status }) => setStatus(status)}
+        {...{
+          ...connectorProps,
+          style: {
+            ...connectorProps?.style,
+            zIndex: connectorProps?.style?.zIndex ?? 999,
+          },
+        }}
       />
       {children}
     </CCC_CONTEXT.Provider>
@@ -66,5 +85,11 @@ export function Provider({ children }: { children: ReactNode }) {
 }
 
 export function useCcc() {
-  return React.useContext(CCC_CONTEXT);
+  const context = React.useContext(CCC_CONTEXT);
+  if (!context) {
+    throw Error(
+      "The component which invokes the useCcc hook should be placed in a ccc.Provider.",
+    );
+  }
+  return context;
 }