feat: Khie the P2P wallet connecting protocol

.changeset/calm-peers-pair.md

@@ -0,0 +1,6 @@
+---
+"@ckb-ccc/libp2p": patch
+---
+
+feat(libp2p): add peer pairing and JSON-RPC services and transports for Khie
+connections.

.changeset/fresh-khie-owners.md

@@ -0,0 +1,10 @@
+---
+"@ckb-ccc/connector": patch
+"@ckb-ccc/connector-react": major
+---
+
+refactor(connector): emit owned wallet and signer connections, remove deprecated compatibility APIs, require setClient callers to transfer Client ownership, and release connections from the React Provider.
+
+See the [Connector 2.0 migration guide](https://docs.ckbccc.com/en/docs/migration/connector-v2)
+for the required `setClient`, connection event, Client ownership, and removed
+property changes.

.changeset/gentle-signals-connect.md

@@ -0,0 +1,6 @@
+---
+"@ckb-ccc/core": minor
+---
+
+feat(core): add `SignerJsonRpc` and `buildSignerJsonRpcHandler` for remote
+signers, plus an `AbortSignal.any` compatibility helper.

.changeset/small-names-pair.md

@@ -0,0 +1,6 @@
+---
+"@ckb-ccc/connector": minor
+---
+
+feat(connector): add Khie peer-to-peer wallet connections, supporting pairing
+codes from either the wallet or the connector.

packages/app/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  allowedDevOrigins: ["192.168.*.*"],
+  allowedDevOrigins: ["192.168.*.*", "*.trycloudflare.com"],
   experimental: {
     // Work around Next.js 16.3's incompatibility with TypeScript 7's dual-version aliases.
     // https://github.com/vercel/next.js/issues/96589

packages/app/package.json

@@ -10,26 +10,37 @@
     "url": "git://github.com/ckb-devrel/ccc.git"
   },
   "scripts": {
-    "dev": "next dev --webpack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint ./src",
     "format": "prettier --write ./src"
   },
   "dependencies": {
+    "@chainsafe/libp2p-noise": "^17.0.0",
+    "@chainsafe/libp2p-yamux": "^8.0.1",
     "@ckb-ccc/connector-react": "workspace:*",
+    "@ckb-ccc/libp2p": "workspace:*",
     "@ckb-ccc/lumos-patches": "workspace:*",
     "@ckb-ccc/ssri": "workspace:*",
     "@ckb-ccc/type-id": "workspace:*",
     "@ckb-lumos/ckb-indexer": "0.24.0-next.2",
     "@ckb-lumos/common-scripts": "0.24.0-next.2",
     "@ckb-lumos/config-manager": "0.24.0-next.2",
     "@ckb-lumos/helpers": "0.24.0-next.2",
+    "@libp2p/circuit-relay-v2": "^4.2.11",
+    "@libp2p/identify": "^4.1.12",
+    "@libp2p/interface": "^3.2.5",
+    "@libp2p/webrtc": "^6.0.29",
+    "@libp2p/websockets": "^10.1.19",
+    "@multiformats/multiaddr": "^13.0.3",
     "@scure/bip32": "^2.0.0",
     "@scure/bip39": "^2.0.0",
+    "core-js": "^3.50.0",
+    "libp2p": "^3.3.8",
     "lucide-react": "^1.21.0",
     "next": "16.3.4",
-    "qrcode.react": "^4.2.0",
+    "qr": "^0.6.0",
     "react": "19.2.8",
     "react-dom": "19.2.8"
   },

packages/app/src/app/module-workspace.tsx

@@ -13,13 +13,17 @@ export const ModuleWorkspace = memo(function ModuleWorkspace({
   client,
   log,
   module,
+  setClient,
   signer,
+  wallet,
 }: {
   active: boolean;
   client: ccc.Client;
   log: DemoLogger;
   module?: DemoModule;
+  setClient: (owner: ccc.Owner<ccc.Client>) => unknown;
   signer?: ccc.Signer;
+  wallet?: ccc.Wallet;
 }) {
   const Module = module?.component;
   const slotRef = useRef<HTMLDivElement>(null);
@@ -56,7 +60,9 @@ export const ModuleWorkspace = memo(function ModuleWorkspace({
             client={client}
             log={log}
             module={module}
+            setClient={setClient}
             signer={signer}
+            wallet={wallet}
             workspaceRef={workspaceRef}
           />
         </div>
@@ -69,13 +75,17 @@ function MountedModuleWorkspace({
   client,
   log,
   module,
+  setClient,
   signer,
+  wallet,
   workspaceRef,
 }: {
   client: ccc.Client;
   log: DemoLogger;
   module: DemoModule;
+  setClient: (owner: ccc.Owner<ccc.Client>) => unknown;
   signer?: ccc.Signer;
+  wallet?: ccc.Wallet;
   workspaceRef: React.RefObject<HTMLElement | null>;
 }) {
   const Module = module.component;
@@ -140,7 +150,9 @@ function MountedModuleWorkspace({
 
       <header className="workspace-header">
         <span className="workspace-header-glyph-viewport" aria-hidden="true">
-          <span className="workspace-header-glyph">啟</span>
+          <span className="workspace-header-glyph">
+            {module.id === "khie" ? "契" : "啟"}
+          </span>
         </span>
         <div className="workspace-title">
           <span className="section-index">
@@ -179,9 +191,11 @@ function MountedModuleWorkspace({
         <Module
           client={client}
           log={moduleLog}
+          setClient={setClient}
           show={show}
           signer={signer}
           submitTransaction={submitTransaction}
+          wallet={wallet}
         />
         <ModuleReadout
           label={readout.label}

packages/app/src/app/modules.ts

@@ -32,6 +32,8 @@ import {
   IssueXUdtTypeIdModule,
 } from "./modules/issue-xudt-module";
 import { KeystoreModule } from "./modules/keystore-module";
+import { KhieIcon } from "./modules/khie/khie-icon";
+import { KhieModule } from "./modules/khie/khie-module";
 import { MintSporeModule } from "./modules/mint-spore-module";
 import { MnemonicModule } from "./modules/mnemonic-module";
 import { NervosDaoModule } from "./modules/nervos-dao-module";
@@ -57,8 +59,10 @@ export type SubmitTransaction = (
 export type ModuleRuntimeProps = {
   client: ccc.Client;
   log: (message: string, level?: DemoLogLevel) => void;
+  setClient: (owner: ccc.Owner<ccc.Client>) => unknown;
   show: ShowModuleReadout;
   signer?: ccc.Signer;
+  wallet?: ccc.Wallet;
   submitTransaction: SubmitTransaction;
 };
 
@@ -116,6 +120,15 @@ function defineModules(definitions: readonly DemoModuleDefinition[]) {
 }
 
 export const demoModules: readonly DemoModule[] = defineModules([
+  {
+    name: "Khie",
+    description:
+      "Khie is a peer-to-peer protocol that connects wallets and applications. To connect, select Khie in the application's connector, then either use the connector to scan the wallet's pairing code or use the wallet to scan the connector's pairing code. For wallets without native Khie support, this module lets them connect to remote applications through Khie.\n\nKhie (契, /kʰje/) is Hakka for bond, agreement, or connection.",
+    group: "Wallet",
+    icon: KhieIcon,
+    access: "signer",
+    component: KhieModule,
+  },
   {
     name: "Hash",
     description: