feat(connector): Powered by CCC

ckb-devrel · Sep 28, 2024 · c8895aa · c8895aa
1 parent a1861b6
commit c8895aa
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 1 deletion.
diff --git a/.changeset/angry-taxis-swim.md 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
@@ -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
@@ -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
@@ -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
@@ -267,6 +267,7 @@ export function LayoutProvider({ children }: { children: ReactNode }) {
           network: "btc",
         },
       ]}
+      hideMark // Hide "Powered by CCC"
     */
       clientOptions={[
         {
-Original file line number
+Diff line change
@@ Expand Up @@
               network: "btc",
             },
           ]}
+          hideMark // Hide "Powered by CCC"
         */
           clientOptions={[
             {
@@ Expand Down @@