From c8895aa84b6b7bd428c0048f1183dda683a1d7f1 Mon Sep 17 00:00:00 2001
From: Hanssen0 <hanssen0@hanssen0.com>
Date: Sun, 29 Sep 2024 00:32:34 +0800
Subject: [PATCH] feat(connector): Powered by CCC

---
 .changeset/angry-taxis-swim.md                |  6 +++++
 packages/connector-react/src/hooks/useCcc.tsx |  3 +++
 packages/connector/src/connector/index.ts     |  3 +++
 packages/connector/src/scenes/connected.ts    | 22 ++++++++++++++++++-
 packages/demo/src/app/layoutProvider.tsx      |  1 +
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/angry-taxis-swim.md

diff --git a/.changeset/angry-taxis-swim.md b/.changeset/angry-taxis-swim.md
new file mode 100644
index 00000000..12156a7e
--- /dev/null
+++ b/.changeset/angry-taxis-swim.md
@@ -0,0 +1,6 @@
+---
+"@ckb-ccc/connector": patch
+"@ckb-ccc/connector-react": patch
+---
+
+feat(connector): Powered by CCC
diff --git a/packages/connector-react/src/hooks/useCcc.tsx b/packages/connector-react/src/hooks/useCcc.tsx
index c01e1759..1ec2ec92 100644
--- a/packages/connector-react/src/hooks/useCcc.tsx
+++ b/packages/connector-react/src/hooks/useCcc.tsx
@@ -55,6 +55,7 @@ class SignersControllerWithFilter extends ccc.SignersController {
 export function Provider({
   children,
   connectorProps,
+  hideMark,
   name,
   icon,
   signerFilter,
@@ -65,6 +66,7 @@ export function Provider({
 }: {
   children: ReactNode;
   connectorProps?: HTMLAttributes<{}>;
+  hideMark?: boolean,
   name?: string;
   icon?: string;
   signerFilter?: (
@@ -128,6 +130,7 @@ export function Provider({
       }}
     >
       <Connector
+        hideMark={hideMark}
         name={name}
         icon={icon}
         signersController={
diff --git a/packages/connector/src/connector/index.ts b/packages/connector/src/connector/index.ts
index 22e2980f..ea35532c 100644
--- a/packages/connector/src/connector/index.ts
+++ b/packages/connector/src/connector/index.ts
@@ -11,6 +11,8 @@ import { SignersController } from "../signers/index.js";
 
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
+  @property()
+  public hideMark: any | undefined | null;
   @property()
   public name?: string;
   @property()
@@ -151,6 +153,7 @@ export class WebComponentConnector extends LitElement {
         ${this.wallet && this.signer
           ? html`
               <ccc-connected-scene
+                ?hideMark=${this.hideMark}
                 .wallet=${this.wallet}
                 .signer=${this.signer.signer}
                 .clientOptions=${this.clientOptions}
diff --git a/packages/connector/src/scenes/connected.ts b/packages/connector/src/scenes/connected.ts
index f0322681..0f924b56 100644
--- a/packages/connector/src/scenes/connected.ts
+++ b/packages/connector/src/scenes/connected.ts
@@ -22,6 +22,8 @@ export function formatString(
 
 @customElement("ccc-connected-scene")
 export class ConnectedScene extends LitElement {
+  @property()
+  public hideMark: any | undefined | null;
   @property()
   public wallet?: ccc.Wallet;
   @property()
@@ -108,6 +110,10 @@ export class ConnectedScene extends LitElement {
             ${DISCONNECT_SVG} Disconnect
           </ccc-button>
 
+          ${this.hideMark == null
+            ? html`<a href="https://github.com/ckb-ecofund/ccc" class="mark">Powered by CCC</a>`
+            : ""}
+
           <div
             class="switch-btn-container ${this.clientOptions
               ? "cursor-pointer"
@@ -227,7 +233,6 @@ export class ConnectedScene extends LitElement {
     .switch-btn-container {
       width: 100%;
       margin-top: 1.2rem;
-      margin-bottom: 0.2rem;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -269,6 +274,21 @@ export class ConnectedScene extends LitElement {
     .sm-chain-logo {
       width: 1.125rem;
     }
+
+    .mark {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: 0.2;
+      margin: 0;
+      margin-top: 0.25rem;
+      margin-bottom: -1.05rem;
+      color: var(--tip-color);
+      font-size: 0.6rem;
+    }
+
+    .mark:hover {
+      opacity: 0.5;
+    }
   `;
 
   updated() {
diff --git a/packages/demo/src/app/layoutProvider.tsx b/packages/demo/src/app/layoutProvider.tsx
index 3a235059..b4282273 100644
--- a/packages/demo/src/app/layoutProvider.tsx
+++ b/packages/demo/src/app/layoutProvider.tsx
@@ -267,6 +267,7 @@ export function LayoutProvider({ children }: { children: ReactNode }) {
           network: "btc",
         },
       ]}
+      hideMark // Hide "Powered by CCC"
     */
       clientOptions={[
         {