feat(wallets): add key to identify wallets

airgap-it · Jun 16, 2021 · c53b6de · c53b6de
1 parent 8777460
commit c53b6de
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/scripts/generate-wallet-list.ts b/scripts/generate-wallet-list.ts
@@ -5,6 +5,7 @@ import { ExtensionApp, WebApp, App, AppBase, DesktopApp } from '../src/ui/alert/
 
 export const extensionList: ExtensionApp[] = [
   {
+    key: 'temple_chrome',
     id: 'ookjlbkiijinhpmnjffcofjonbfbgaoc',
     name: 'Temple Wallet',
     shortName: 'Temple',
@@ -13,6 +14,7 @@ export const extensionList: ExtensionApp[] = [
     link: 'https://templewallet.com/'
   },
   {
+    key: 'spire_chrome',
     id: 'gpfndedineagiepkpinficbcbbgjoenn',
     name: 'Spire',
     shortName: 'Spire',
@@ -24,6 +26,7 @@ export const extensionList: ExtensionApp[] = [
 
 export const webList: WebApp[] = [
   {
+    key: 'kukai_web',
     name: 'Kukai Wallet',
     shortName: 'Kukai',
     color: '',
@@ -40,6 +43,7 @@ export const webList: WebApp[] = [
 
 export const desktopList: DesktopApp[] = [
   {
+    key: 'galleon_desktop',
     name: 'Galleon',
     shortName: 'Galleon',
     color: '',
@@ -50,6 +54,7 @@ export const desktopList: DesktopApp[] = [
 
 export const iosList: App[] = [
   {
+    key: 'airgap_ios',
     name: 'AirGap Wallet',
     shortName: 'AirGap',
     color: 'rgb(4, 235, 204)',

diff --git a/src/ui/alert/Pairing.ts b/src/ui/alert/Pairing.ts
@@ -24,6 +24,7 @@ export enum WalletType {
 }
 
 export interface AppBase {
+  key: string
   name: string
   shortName: string
   color: string
@@ -56,6 +57,7 @@ export interface App extends AppBase {
 }
 
 export interface PairingAlertWallet {
+  key: string
   name: string
   shortName?: string
   color?: string
@@ -152,6 +154,7 @@ export class Pairing {
               const ext = extensionList.find((extEl) => extEl.id === app.id)
 
               return {
+                key: ext?.key ?? app.id,
                 name: app.name ?? ext?.name,
                 logo: app.iconUrl ?? ext?.logo,
                 shortName: app.shortName ?? ext?.shortName,
@@ -174,6 +177,7 @@ export class Pairing {
             ...extensionList
               .filter((app) => defaultExtensions.some((extId) => extId === app.id))
               .map((app) => ({
+                key: app.key,
                 name: app.name,
                 shortName: app.shortName,
                 color: app.color,
@@ -190,6 +194,7 @@ export class Pairing {
           type: WalletType.DESKTOP,
           wallets: [
             ...desktopList.map((app) => ({
+              key: app.key,
               name: app.name,
               shortName: app.shortName,
               color: app.color,
@@ -223,6 +228,7 @@ export class Pairing {
           title: 'Mobile Wallets',
           type: WalletType.IOS,
           wallets: iOSList.map((app) => ({
+            key: app.key,
             name: app.name,
             shortName: app.shortName,
             color: app.color,
@@ -288,6 +294,7 @@ export class Pairing {
     network: NetworkType
   ): Promise<PairingAlertWallet[]> {
     return webList.map((app) => ({
+      key: app.key,
       name: app.name,
       shortName: app.shortName,
       color: app.color,

diff --git a/src/ui/alert/PairingAlert.ts b/src/ui/alert/PairingAlert.ts
@@ -64,9 +64,9 @@ export const preparePairingAlert = async (
 
     list.wallets.forEach(async (wallet) => {
       const altTag = `Open in ${wallet.name}`
-      const randomId = await generateGUID()
+      const walletKey = wallet.key
       const x = `
-			<a tabindex="0" alt="${altTag}" id="wallet_${randomId}"
+			<a tabindex="0" alt="${altTag}" id="wallet_${walletKey}"
 			 target="_blank" class="beacon-selection__list${wallet.enabled ? '' : ' disabled'}">
 			 <div class="beacon-selection__name">${wallet.name}
 			 ${wallet.enabled ? '' : '<p>Not installed</p>'}
@@ -86,7 +86,7 @@ export const preparePairingAlert = async (
 
       listEl.appendChild(el)
 
-      const walletEl = shadowRoot.getElementById(`wallet_${randomId}`)
+      const walletEl = shadowRoot.getElementById(`wallet_${walletKey}`)
 
       if (walletEl) {
         walletEl.addEventListener('click', async () => {