Add "assignButtons" method to the kit.

Creit-Tech · Feb 20, 2025 · 5579675 · 5579675
1 parent 0cdcd9f
commit 5579675
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -44,10 +44,11 @@
 <body>
 
 <header>
+  <div id='buttonWrapper'></div>
   <div>
-<!--    <h3 style='margin: 0; line-height: 100%;'>Dev site</h3>-->
+    <button id='externalConnect'>Connect</button>
+    <button id='externalDisconnect'>Disconnect</button>
   </div>
-  <div id='buttonWrapper'></div>
 </header>
 
 <main>
@@ -158,6 +159,16 @@
   document.querySelector('#removeButton').addEventListener('click', function(e) {
     kit.removeButton();
   });
+
+  kit.assignButtons({
+    connectEl: '#externalConnect',
+    disconnectEl: '#externalDisconnect',
+    onConnect: ({ address }) => {
+      console.log('Address requested: ', address);
+      document.querySelector('#publicKey').setAttribute('value', address);
+    },
+    onDisconnect: () => console.log('Disconnected from the button'),
+  })
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -37,17 +37,17 @@
   "dependencies": {
     "@albedo-link/intent": "0.12.0",
     "@creit.tech/xbull-wallet-connect": "0.3.0",
-    "@ledgerhq/hw-app-str": "^7.0.4",
-    "@ledgerhq/hw-transport": "^6.31.4",
-    "@ledgerhq/hw-transport-webusb": "^6.29.4",
+    "@ledgerhq/hw-app-str": "7.0.4",
+    "@ledgerhq/hw-transport": "6.31.4",
+    "@ledgerhq/hw-transport-webusb": "6.29.4",
     "@lobstrco/signer-extension-api": "1.0.0-beta.0",
     "@ngneat/elf": "2.5.1",
     "@ngneat/elf-devtools": "1.3.0",
     "@ngneat/elf-entities": "5.0.2",
     "@ngneat/elf-persist-state": "1.2.1",
-    "@stellar/freighter-api": "3.0.0",
-    "@trezor/connect-plugin-stellar": "^9.0.6",
-    "@trezor/connect-web": "^9.4.7",
+    "@stellar/freighter-api": "4.0.0",
+    "@trezor/connect-plugin-stellar": "9.0.6",
+    "@trezor/connect-web": "9.4.7",
     "@walletconnect/modal": "2.6.2",
     "@walletconnect/sign-client": "2.11.2",
     "buffer": "6.0.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/stellar-wallets-kit.ts b/src/stellar-wallets-kit.ts
@@ -156,6 +156,59 @@ export class StellarWalletsKit implements KitActions {
     return !!this.buttonElement;
   }
 
+  /**
+   * This method allows developers to set their own buttons (for connection and disconnection) on their website
+   * while letting the kit handle the logic behind opening the modal, setting and removing the address from the storage, etc
+   */
+  public assignButtons(params: {
+    connectEl: HTMLElement | string;
+    disconnectEl?: HTMLElement | string;
+    onConnect: (response: { address: string }) => void;
+    onDisconnect: () => void;
+  }): void {
+    const connectEl: HTMLElement =
+      typeof params.connectEl === 'string'
+        ? (document.querySelector(params.connectEl) as HTMLElement)
+        : params.connectEl;
+
+    if (!connectEl) throw new Error('connectEl is not available');
+
+    connectEl.addEventListener(
+      'click',
+      () => {
+        this.openModal({
+          onWalletSelected: option => {
+            setSelectedModuleId(option.id);
+            this.getAddress().then((r: { address: string }) => params.onConnect(r));
+          },
+        }).then();
+      },
+      false
+    );
+
+    if (!params.disconnectEl) return;
+
+    const disconnectEl: HTMLElement =
+      typeof params.disconnectEl === 'string'
+        ? (document.querySelector(params.disconnectEl) as HTMLElement)
+        : params.disconnectEl;
+
+    if (!disconnectEl) throw new Error('disconnectEl is not available');
+
+    disconnectEl.addEventListener(
+      'click',
+      () => {
+        params.onDisconnect();
+        removeAddress();
+
+        if (this.selectedModule.disconnect) {
+          this.selectedModule.disconnect().then();
+        }
+      },
+      false
+    );
+  }
+
   public async createButton(params: {
     container: HTMLElement;
     onConnect: (response: { address: string }) => void;