@ckb-ccc/connector-react 0.0.3 → 0.0.4-alpha.1

package/README.md

@@ -0,0 +1,32 @@
+<h1 align="center" style="font-size: 64px;">
+  CCC
+</h1>
+
+<p align="center">
+  <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">
+  <img alt="Demo" src="https://img.shields.io/website?url=https%3A%2F%2Fckbccc-demo.vercel.app%2F&label=Demo">
+</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/components/index.d.ts

@@ -1,7 +1,8 @@
-import { CloseEvent, ConnectedEvent, WebComponentConnector } from "@ckb-ccc/connector";
+import { ccc } from "@ckb-ccc/connector";
 import { type EventName } from "@lit/react";
-export declare const Connector: import("@lit/react").ReactWebComponent<WebComponentConnector, {
-    onConnected: EventName<ConnectedEvent>;
-    onClose: EventName<CloseEvent>;
+export declare const Connector: import("@lit/react").ReactWebComponent<ccc.WebComponentConnector, {
+    onSignerChanged: EventName<ccc.SignerChangedEvent>;
+    onStatusChanged: EventName<ccc.StatusChangedEvent>;
+    onClose: EventName<ccc.CloseEvent>;
 }>;
 //# 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,EACL,UAAU,EACV,cAAc,EACd,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7D,eAAO,MAAM,SAAS;;;EAQpB,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,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;EASpB,CAAC"}

package/dist/components/index.js

@@ -1,13 +1,14 @@
 "use client";
-import { WebComponentConnector, } from "@ckb-ccc/connector";
+import { ccc } from "@ckb-ccc/connector";
 import { createComponent } from "@lit/react";
 import * as React from "react";
 export const Connector = createComponent({
     tagName: "ccc-connector",
-    elementClass: WebComponentConnector,
+    elementClass: ccc.WebComponentConnector,
     react: React,
     events: {
-        onConnected: "connected",
+        onSignerChanged: "signerChanged",
+        onStatusChanged: "statusChanged",
         onClose: "close",
     },
 });

package/dist/hooks/useCcc.d.ts

@@ -1,4 +1,4 @@
-import { SignerInfo } from "@ckb-ccc/connector";
+import { ccc } from "@ckb-ccc/connector";
 import * as React from "react";
 import { ReactNode } from "react";
 export declare function Provider({ children }: {
@@ -7,6 +7,8 @@ export declare function Provider({ children }: {
 export declare function useCcc(): {
     open: () => unknown;
     disconnect: () => unknown;
-    signerInfo?: SignerInfo | undefined;
+    wallet?: ccc.Wallet | undefined;
+    signerInfo?: ccc.SignerInfo | undefined;
+    status: ccc.ConnectorStatus;
 };
 //# sourceMappingURL=useCcc.d.ts.map

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,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAS3D,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAoB7D;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,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"}

package/dist/hooks/useCcc.js

@@ -1,16 +1,42 @@
+import { ccc } from "@ckb-ccc/connector";
 import * as React from "react";
 import { createContext, useState } from "react";
 import { Connector } from "../components";
-const CCC_CONTEXT = createContext({ open: () => { }, disconnect: () => { } });
+const CCC_CONTEXT = createContext({
+    open: () => { },
+    disconnect: () => { },
+    status: ccc.ConnectorStatus.SelectingSigner,
+});
 export function Provider({ children }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [wallet, setWallet] = useState();
     const [signerInfo, setSignerInfo] = useState();
+    const [status, setStatus] = useState(ccc.ConnectorStatus.SelectingSigner);
     return (React.createElement(CCC_CONTEXT.Provider, { value: {
             open: () => setIsOpen(true),
-            disconnect: () => setSignerInfo(undefined),
-            signerInfo,
+            disconnect: () => {
+                setWallet(undefined);
+                setSignerInfo(undefined);
+                setStatus(ccc.ConnectorStatus.SelectingSigner);
+            },
+            ...([
+                ccc.ConnectorStatus.SelectingSigner,
+                ccc.ConnectorStatus.Connecting,
+            ].includes(status)
+                ? {
+                    wallet: undefined,
+                    signerInfo: undefined,
+                }
+                : {
+                    wallet,
+                    signerInfo,
+                }),
+            status,
         } },
-        React.createElement(Connector, { isOpen: isOpen, onClose: () => setIsOpen(false), onConnected: ({ signerInfo }) => setSignerInfo(signerInfo) }),
+        React.createElement(Connector, { isOpen: isOpen, wallet: wallet, signer: signerInfo, status: status, onClose: () => setIsOpen(false), onSignerChanged: ({ wallet, signerInfo }) => {
+                setWallet(wallet);
+                setSignerInfo(signerInfo);
+            }, onStatusChanged: ({ status }) => setStatus(status) }),
         children));
 }
 export function useCcc() {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "0.0.3",
+  "version": "0.0.4-alpha.1",
   "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.3",
+    "@ckb-ccc/connector": "0.0.4-alpha.1",
     "@lit/react": "^1.0.5",
     "react": "^18"
   },
-  "gitHead": "9df1bbe0007136568914d8a73fe39f898d636a12"
+  "gitHead": "7dab1a1d6e3e380b26f43d0d0308bd4da1617029"
 }

package/src/components/index.ts

@@ -1,19 +1,16 @@
 "use client";
 
-import {
-  CloseEvent,
-  ConnectedEvent,
-  WebComponentConnector,
-} from "@ckb-ccc/connector";
+import { ccc } from "@ckb-ccc/connector";
 import { createComponent, type EventName } from "@lit/react";
 import * as React from "react";
 
 export const Connector = createComponent({
   tagName: "ccc-connector",
-  elementClass: WebComponentConnector,
+  elementClass: ccc.WebComponentConnector,
   react: React,
   events: {
-    onConnected: "connected" as EventName<ConnectedEvent>,
-    onClose: "close" as EventName<CloseEvent>,
+    onSignerChanged: "signerChanged" as EventName<ccc.SignerChangedEvent>,
+    onStatusChanged: "statusChanged" as EventName<ccc.StatusChangedEvent>,
+    onClose: "close" as EventName<ccc.CloseEvent>,
   },
 });

package/src/hooks/useCcc.tsx

@@ -1,4 +1,4 @@
-import { SignerInfo } from "@ckb-ccc/connector";
+import { ccc } from "@ckb-ccc/connector";
 import * as React from "react";
 import { ReactNode, createContext, useState } from "react";
 import { Connector } from "../components";
@@ -6,25 +6,59 @@ import { Connector } from "../components";
 const CCC_CONTEXT = createContext<{
   open: () => unknown;
   disconnect: () => unknown;
-  signerInfo?: SignerInfo;
-}>({ open: () => {}, disconnect: () => {} });
+  wallet?: ccc.Wallet;
+  signerInfo?: ccc.SignerInfo;
+  status: ccc.ConnectorStatus;
+}>({
+  open: () => {},
+  disconnect: () => {},
+  status: ccc.ConnectorStatus.SelectingSigner,
+});
 
 export function Provider({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useState(false);
-  const [signerInfo, setSignerInfo] = useState<SignerInfo | undefined>();
+  const [wallet, setWallet] = useState<ccc.Wallet | undefined>();
+  const [signerInfo, setSignerInfo] = useState<ccc.SignerInfo | undefined>();
+  const [status, setStatus] = useState<ccc.ConnectorStatus>(
+    ccc.ConnectorStatus.SelectingSigner,
+  );
 
   return (
     <CCC_CONTEXT.Provider
       value={{
         open: () => setIsOpen(true),
-        disconnect: () => setSignerInfo(undefined),
-        signerInfo,
+        disconnect: () => {
+          setWallet(undefined);
+          setSignerInfo(undefined);
+          setStatus(ccc.ConnectorStatus.SelectingSigner);
+        },
+
+        ...([
+          ccc.ConnectorStatus.SelectingSigner,
+          ccc.ConnectorStatus.Connecting,
+        ].includes(status)
+          ? {
+              wallet: undefined,
+              signerInfo: undefined,
+            }
+          : {
+              wallet,
+              signerInfo,
+            }),
+        status,
       }}
     >
       <Connector
         isOpen={isOpen}
+        wallet={wallet}
+        signer={signerInfo}
+        status={status}
         onClose={() => setIsOpen(false)}
-        onConnected={({ signerInfo }) => setSignerInfo(signerInfo)}
+        onSignerChanged={({ wallet, signerInfo }) => {
+          setWallet(wallet);
+          setSignerInfo(signerInfo);
+        }}
+        onStatusChanged={({ status }) => setStatus(status)}
       />
       {children}
     </CCC_CONTEXT.Provider>