@ckb-ccc/connector-react 1.1.8 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @ckb-ccc/connector-react
 
+## 2.0.0
+
+### Major Changes
+
+- [#503](https://github.com/ckb-devrel/ccc/pull/503) [`2001c3b`](https://github.com/ckb-devrel/ccc/commit/2001c3b47c1eca82485621e3541c393b5ccf6a3e) Thanks [@Hanssen0](https://github.com/Hanssen0)! - 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.
+
+### Minor Changes
+
+- [#498](https://github.com/ckb-devrel/ccc/pull/498) [`c75b49e`](https://github.com/ckb-devrel/ccc/commit/c75b49e282991949e2240779608a4c5b2277a34e) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(connector-react): control Web Component Client requests in the Provider, manage ownership transferred through setClient, and add useBorrowedOrOwned for an internally owned fallback to an optional borrowed value
+
+### Patch Changes
+
+- Updated dependencies [[`2001c3b`](https://github.com/ckb-devrel/ccc/commit/2001c3b47c1eca82485621e3541c393b5ccf6a3e), [`230cf6c`](https://github.com/ckb-devrel/ccc/commit/230cf6c870680faeb560628aa989d92ba66ddf10), [`251232a`](https://github.com/ckb-devrel/ccc/commit/251232abcae0320eb9b991b5f8a05b655f45d426), [`7e38c51`](https://github.com/ckb-devrel/ccc/commit/7e38c51a38d45e92b96639bdce575880ba88ee9b)]:
+  - @ckb-ccc/connector@2.0.0
+
+## 1.1.9
+
+### Patch Changes
+
+- [#482](https://github.com/ckb-devrel/ccc/pull/482) [`403ac43`](https://github.com/ckb-devrel/ccc/commit/403ac439826c2b028ee8360881b9d723ca123509) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(connector): styling variables for hovered button
+- Updated dependencies [[`403ac43`](https://github.com/ckb-devrel/ccc/commit/403ac439826c2b028ee8360881b9d723ca123509)]:
+  - @ckb-ccc/connector@1.3.0
+
 ## 1.1.8
 
 ### Patch Changes

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
 import { ccc } from "@ckb-ccc/connector";
+import { EventName } from "@lit/react";
 export declare const Connector: import("@lit/react").ReactWebComponent<ccc.WebComponentConnector, {
-    onWillUpdate: string;
-    onClose: string;
+    onClose: EventName<ccc.ConnectorCloseEvent>;
+    onSelectClient: EventName<ccc.SelectClientEvent>;
+    onConnection: EventName<ccc.ConnectorConnectionEvent>;
 }>;
 //# 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,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAIzC,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,EAAE,SAAS,EAAmB,MAAM,YAAY,CAAC;AAGxD,eAAO,MAAM,SAAS;aAMF,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;oBAElC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;kBAEhC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC;EAEzD,CAAC"}

package/dist/components/index.js

@@ -7,7 +7,11 @@ export const Connector = createComponent({
     elementClass: ccc.WebComponentConnector,
     react: React,
     events: {
-        onWillUpdate: "willUpdate",
-        onClose: "close",
+        onClose: ccc.ConnectorCloseEvent
+            .eventName,
+        onSelectClient: ccc.SelectClientEvent
+            .eventName,
+        onConnection: ccc.ConnectorConnectionEvent
+            .eventName,
     },
 });

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useBorrowedOrOwned.js";
 export * from "./useCcc.js";
 export * from "./useSigner.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
+export * from "./useBorrowedOrOwned.js";
 export * from "./useCcc.js";
 export * from "./useSigner.js";

package/dist/hooks/useBorrowedOrOwned.d.ts

@@ -0,0 +1,7 @@
+import { ccc } from "@ckb-ccc/connector";
+/**
+ * Opens and owns a fallback value after the component commits, while returning
+ * a borrowed value whenever one is provided.
+ */
+export declare function useBorrowedOrOwned<T>(borrowed: T | undefined, open: () => ccc.Owner<T>): T | undefined;
+//# sourceMappingURL=useBorrowedOrOwned.d.ts.map

package/dist/hooks/useBorrowedOrOwned.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBorrowedOrOwned.d.ts","sourceRoot":"","sources":["../../src/hooks/useBorrowedOrOwned.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAGzC;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,GAAG,SAAS,EACvB,IAAI,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GACvB,CAAC,GAAG,SAAS,CAUf"}

package/dist/hooks/useBorrowedOrOwned.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+/**
+ * Opens and owns a fallback value after the component commits, while returning
+ * a borrowed value whenever one is provided.
+ */
+export function useBorrowedOrOwned(borrowed, open) {
+    const [owned, setOwned] = useState();
+    useEffect(() => {
+        const owner = open();
+        setOwned(owner.value);
+        return () => void owner.dispose().catch(() => { });
+    }, [open]);
+    return borrowed ?? owned;
+}

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, hideMark, name, icon, signerFilter, signersController, defaultClient, clientOptions, preferredNetworks, }: {
+export declare function Provider({ children, connectorProps, hideMark, name, icon, signerFilter, signersController, defaultClient, clientOptions, }: {
     children: ReactNode;
     connectorProps?: HTMLAttributes<{}>;
     hideMark?: boolean;
@@ -14,14 +14,13 @@ export declare function Provider({ children, connectorProps, hideMark, name, ico
         client: ccc.Client;
         name: string;
     }[];
-    preferredNetworks?: ccc.NetworkPreference[];
-}): React.JSX.Element;
+}): React.JSX.Element | null;
 export declare function useCcc(): {
     isOpen: boolean;
     open: () => unknown;
     close: () => unknown;
     disconnect: () => unknown;
-    setClient: (client: ccc.Client) => unknown;
+    setClient: (owner: ccc.Owner<ccc.Client>) => void;
     client: ccc.Client;
     wallet?: ccc.Wallet;
     signerInfo?: ccc.SignerInfo;

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;AA4Cf,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,qBA8FA;AAED,wBAAgB,MAAM;YAhKR,OAAO;UACT,MAAM,OAAO;WACZ,MAAM,OAAO;gBACR,MAAM,OAAO;eACd,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO;YAClC,GAAG,CAAC,MAAM;aACT,GAAG,CAAC,MAAM;iBACN,GAAG,CAAC,UAAU;EAiKhC"}
+{"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;AAiDf,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;CACvE,4BAuIA;AAED,wBAAgB,MAAM;YAvMR,OAAO;UACT,MAAM,OAAO;WACZ,MAAM,OAAO;gBACR,MAAM,OAAO;eACd,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI;YACzC,GAAG,CAAC,MAAM;aACT,GAAG,CAAC,MAAM;iBACN,GAAG,CAAC,UAAU;EAwMhC"}

package/dist/hooks/useCcc.js

@@ -1,6 +1,10 @@
 import { ccc } from "@ckb-ccc/connector";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { Connector } from "../components/index.js";
+import { useBorrowedOrOwned } from "./useBorrowedOrOwned.js";
+function openDefaultClient() {
+    return ccc.ClientPublicTestnet.open();
+}
 const CCC_CONTEXT = createContext(undefined);
 class SignersControllerWithFilter extends ccc.SignersController {
     constructor(filter) {
@@ -15,12 +19,55 @@ class SignersControllerWithFilter extends ccc.SignersController {
         return super.addSigner(walletName, icon, signerInfo, context);
     }
 }
-export function Provider({ children, connectorProps, hideMark, name, icon, signerFilter, signersController, defaultClient, clientOptions, preferredNetworks, }) {
+export function Provider({ children, connectorProps, hideMark, name, icon, signerFilter, signersController, defaultClient, clientOptions, }) {
     const [ref, setRef] = useState(null);
+    const connectionOwner = useRef(undefined);
+    const [connection, setConnection] = useState();
     const [isOpen, setIsOpen] = useState(false);
-    const [_, setFlag] = useState(0);
-    const defaultSignersController = useRef(undefined);
-    const client = useMemo(() => ref?.client ?? new ccc.ClientPublicTestnet(), [ref?.client]);
+    const defaultSignersController = useMemo(() => new SignersControllerWithFilter(signerFilter), [signerFilter]);
+    const initialClient = useBorrowedOrOwned(defaultClient ?? clientOptions?.[0]?.client, openDefaultClient);
+    const [selectedClient, setSelectedClient] = useState();
+    const adoptedClientOwner = useRef(undefined);
+    const client = selectedClient ?? initialClient;
+    const setClient = useCallback((resource) => {
+        const owner = resource.map((value) => value);
+        const previous = adoptedClientOwner.current;
+        adoptedClientOwner.current = owner;
+        if (previous)
+            void previous.dispose().catch(() => { });
+        setSelectedClient(owner.value);
+    }, []);
+    const onSelectClient = useCallback((event) => {
+        setSelectedClient(event.client);
+    }, []);
+    const onConnection = useCallback((event) => {
+        event.stopPropagation();
+        if (event.connectionOwner && !event.connectionOwner.isValid) {
+            return;
+        }
+        const owner = event.connectionOwner?.map((connection) => connection);
+        const previous = connectionOwner.current;
+        connectionOwner.current = owner;
+        const connection = owner?.value;
+        setConnection(connection);
+        connection?.signerInfo.signer.onReplaced(() => {
+            if (connectionOwner.current === owner) {
+                connectionOwner.current = undefined;
+                setConnection(undefined);
+            }
+            void owner?.dispose().catch(() => { });
+        });
+        if (previous) {
+            void previous.dispose().catch(() => { });
+        }
+    }, []);
+    useEffect(() => () => {
+        const owner = connectionOwner.current;
+        connectionOwner.current = undefined;
+        void owner?.dispose().catch(() => { });
+        void adoptedClientOwner.current?.dispose().catch(() => { });
+        adoptedClientOwner.current = undefined;
+    }, []);
     const open = useCallback(() => {
         setIsOpen(true);
         ref?.requestUpdate();
@@ -30,20 +77,8 @@ export function Provider({ children, connectorProps, hideMark, name, icon, signe
         ref?.requestUpdate();
     }, [setIsOpen, ref, ref?.requestUpdate]);
     const disconnect = useMemo(() => ref?.disconnect.bind(ref) ?? (() => { }), [ref, ref?.disconnect]);
-    const setClient = useMemo(() => ref?.setClient.bind(ref) ?? (() => { }), [ref, ref?.setClient]);
-    useEffect(() => {
-        if (defaultClient) {
-            setClient(defaultClient);
-        }
-    }, [setClient]);
-    useEffect(() => {
-        if (!defaultSignersController.current) {
-            defaultSignersController.current = new SignersControllerWithFilter(signerFilter);
-        }
-        else {
-            defaultSignersController.current.filter = signerFilter;
-        }
-    }, [signerFilter]);
+    if (!client)
+        return null;
     return (React.createElement(CCC_CONTEXT.Provider, { value: {
             isOpen,
             open,
@@ -51,10 +86,10 @@ export function Provider({ children, connectorProps, hideMark, name, icon, signe
             disconnect,
             setClient,
             client,
-            wallet: ref?.wallet,
-            signerInfo: ref?.signer,
+            wallet: connection?.wallet,
+            signerInfo: connection?.signerInfo,
         } },
-        React.createElement(Connector, { hideMark: hideMark, name: name, icon: icon, signersController: signersController ?? defaultSignersController.current, ref: setRef, onWillUpdate: () => setFlag((f) => f + 1), onClose: close, preferredNetworks: preferredNetworks, clientOptions: clientOptions, ...connectorProps,
+        React.createElement(Connector, { client: client, hideMark: hideMark, name: name, icon: icon, signersController: signersController ?? defaultSignersController, ref: setRef, onClose: close, onConnection: onConnection, clientOptions: clientOptions, ...connectorProps,
             style: {
                 zIndex: 999,
                 ...(isOpen ? {} : { display: "none" }),
@@ -65,13 +100,16 @@ export function Provider({ children, connectorProps, hideMark, name, icon, signe
                     "--btn-primary-hover": "#efeeee",
                     "--btn-secondary": "#ddd",
                     "--btn-secondary-hover": "#ccc",
+                    "--btn-color": "currentColor",
+                    "--btn-color-hover": "var(--btn-color)",
                     "--icon-primary": "#1E1E1E",
                     "--icon-secondary": "#666666",
                     color: "#1e1e1e",
                     "--tip-color": "#666",
+                    "--tip-color-hover": "var(--tip-color)",
                 },
                 ...connectorProps?.style,
-            } }),
+            }, onSelectClient: onSelectClient }),
         children));
 }
 export function useCcc() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector-react",
-  "version": "1.1.8",
+  "version": "2.0.0",
   "description": "CCC - CKBer's Codebase. Common Chains Connector UI Component for React",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@ckb-ccc/connector": "1.2.0"
+    "@ckb-ccc/connector": "2.0.0"
   },
   "peerDependencies": {
     "@types/react": ">=16",

package/src/components/index.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { ccc } from "@ckb-ccc/connector";
-import { createComponent } from "@lit/react";
+import { EventName, createComponent } from "@lit/react";
 import * as React from "react";
 
 export const Connector = createComponent({
@@ -9,7 +9,11 @@ export const Connector = createComponent({
   elementClass: ccc.WebComponentConnector,
   react: React,
   events: {
-    onWillUpdate: "willUpdate",
-    onClose: "close",
+    onClose: ccc.ConnectorCloseEvent
+      .eventName as EventName<ccc.ConnectorCloseEvent>,
+    onSelectClient: ccc.SelectClientEvent
+      .eventName as EventName<ccc.SelectClientEvent>,
+    onConnection: ccc.ConnectorConnectionEvent
+      .eventName as EventName<ccc.ConnectorConnectionEvent>,
   },
 });

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from "./useBorrowedOrOwned.js";
 export * from "./useCcc.js";
 export * from "./useSigner.js";

package/src/hooks/useBorrowedOrOwned.ts

@@ -0,0 +1,21 @@
+import { ccc } from "@ckb-ccc/connector";
+import { useEffect, useState } from "react";
+
+/**
+ * Opens and owns a fallback value after the component commits, while returning
+ * a borrowed value whenever one is provided.
+ */
+export function useBorrowedOrOwned<T>(
+  borrowed: T | undefined,
+  open: () => ccc.Owner<T>,
+): T | undefined {
+  const [owned, setOwned] = useState<T>();
+
+  useEffect(() => {
+    const owner = open();
+    setOwned(owner.value);
+    return () => void owner.dispose().catch(() => {});
+  }, [open]);
+
+  return borrowed ?? owned;
+}

package/src/hooks/useCcc.tsx

@@ -12,6 +12,11 @@ import React, {
   useState,
 } from "react";
 import { Connector } from "../components/index.js";
+import { useBorrowedOrOwned } from "./useBorrowedOrOwned.js";
+
+function openDefaultClient(): ccc.Owner<ccc.Client> {
+  return ccc.ClientPublicTestnet.open();
+}
 
 const CCC_CONTEXT = createContext<
   | {
@@ -19,7 +24,7 @@ const CCC_CONTEXT = createContext<
       open: () => unknown;
       close: () => unknown;
       disconnect: () => unknown;
-      setClient: (client: ccc.Client) => unknown;
+      setClient: (owner: ccc.Owner<ccc.Client>) => void;
       client: ccc.Client;
       wallet?: ccc.Wallet;
       signerInfo?: ccc.SignerInfo;
@@ -29,7 +34,7 @@ const CCC_CONTEXT = createContext<
 
 class SignersControllerWithFilter extends ccc.SignersController {
   constructor(
-    public filter?: (
+    public readonly filter?: (
       signerInfo: ccc.SignerInfo,
       wallet: ccc.Wallet,
     ) => Promise<boolean>,
@@ -64,7 +69,6 @@ export function Provider({
   signersController,
   defaultClient,
   clientOptions,
-  preferredNetworks,
 }: {
   children: ReactNode;
   connectorProps?: HTMLAttributes<{}>;
@@ -78,19 +82,75 @@ export function Provider({
   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);
-  const [isOpen, setIsOpen] = useState(false);
-  const [_, setFlag] = useState(0);
-  const defaultSignersController = useRef<
-    SignersControllerWithFilter | undefined
+  const connectionOwner = useRef<
+    ccc.Owner<ccc.ConnectorConnection> | undefined
   >(undefined);
+  const [connection, setConnection] = useState<ccc.ConnectorConnection>();
+  const [isOpen, setIsOpen] = useState(false);
+  const defaultSignersController = useMemo(
+    () => new SignersControllerWithFilter(signerFilter),
+    [signerFilter],
+  );
 
-  const client = useMemo(
-    () => ref?.client ?? new ccc.ClientPublicTestnet(),
-    [ref?.client],
+  const initialClient = useBorrowedOrOwned(
+    defaultClient ?? clientOptions?.[0]?.client,
+    openDefaultClient,
+  );
+  const [selectedClient, setSelectedClient] = useState<ccc.Client>();
+  const adoptedClientOwner = useRef<ccc.Owner<ccc.Client> | undefined>(
+    undefined,
   );
+  const client = selectedClient ?? initialClient;
+
+  const setClient = useCallback((resource: ccc.Owner<ccc.Client>) => {
+    const owner = resource.map((value) => value);
+
+    const previous = adoptedClientOwner.current;
+    adoptedClientOwner.current = owner;
+    if (previous) void previous.dispose().catch(() => {});
+    setSelectedClient(owner.value);
+  }, []);
+
+  const onSelectClient = useCallback((event: ccc.SelectClientEvent) => {
+    setSelectedClient(event.client);
+  }, []);
+
+  const onConnection = useCallback((event: ccc.ConnectorConnectionEvent) => {
+    event.stopPropagation();
+    if (event.connectionOwner && !event.connectionOwner.isValid) {
+      return;
+    }
+    const owner = event.connectionOwner?.map((connection) => connection);
+    const previous = connectionOwner.current;
+    connectionOwner.current = owner;
+    const connection = owner?.value;
+    setConnection(connection);
+
+    connection?.signerInfo.signer.onReplaced(() => {
+      if (connectionOwner.current === owner) {
+        connectionOwner.current = undefined;
+        setConnection(undefined);
+      }
+      void owner?.dispose().catch(() => {});
+    });
+    if (previous) {
+      void previous.dispose().catch(() => {});
+    }
+  }, []);
+
+  useEffect(
+    () => () => {
+      const owner = connectionOwner.current;
+      connectionOwner.current = undefined;
+      void owner?.dispose().catch(() => {});
+      void adoptedClientOwner.current?.dispose().catch(() => {});
+      adoptedClientOwner.current = undefined;
+    },
+    [],
+  );
+
   const open = useCallback(() => {
     setIsOpen(true);
     ref?.requestUpdate();
@@ -103,25 +163,7 @@ export function Provider({
     () => ref?.disconnect.bind(ref) ?? (() => {}),
     [ref, ref?.disconnect],
   );
-  const setClient = useMemo(
-    () => ref?.setClient.bind(ref) ?? (() => {}),
-    [ref, ref?.setClient],
-  );
-
-  useEffect(() => {
-    if (defaultClient) {
-      setClient(defaultClient);
-    }
-  }, [setClient]);
-  useEffect(() => {
-    if (!defaultSignersController.current) {
-      defaultSignersController.current = new SignersControllerWithFilter(
-        signerFilter,
-      );
-    } else {
-      defaultSignersController.current.filter = signerFilter;
-    }
-  }, [signerFilter]);
+  if (!client) return null;
 
   return (
     <CCC_CONTEXT.Provider
@@ -133,21 +175,19 @@ export function Provider({
         setClient,
 
         client,
-        wallet: ref?.wallet,
-        signerInfo: ref?.signer,
+        wallet: connection?.wallet,
+        signerInfo: connection?.signerInfo,
       }}
     >
       <Connector
+        client={client}
         hideMark={hideMark}
         name={name}
         icon={icon}
-        signersController={
-          signersController ?? defaultSignersController.current
-        }
+        signersController={signersController ?? defaultSignersController}
         ref={setRef}
-        onWillUpdate={() => setFlag((f) => f + 1)}
         onClose={close}
-        preferredNetworks={preferredNetworks}
+        onConnection={onConnection}
         clientOptions={clientOptions}
         {...{
           ...connectorProps,
@@ -161,14 +201,18 @@ export function Provider({
               "--btn-primary-hover": "#efeeee",
               "--btn-secondary": "#ddd",
               "--btn-secondary-hover": "#ccc",
+              "--btn-color": "currentColor",
+              "--btn-color-hover": "var(--btn-color)",
               "--icon-primary": "#1E1E1E",
               "--icon-secondary": "#666666",
               color: "#1e1e1e",
               "--tip-color": "#666",
+              "--tip-color-hover": "var(--tip-color)",
             } as CSSProperties),
             ...connectorProps?.style,
           },
         }}
+        onSelectClient={onSelectClient}
       />
       {children}
     </CCC_CONTEXT.Provider>