Merge pull request #68 from nightly-labs/connect-fix-nightly-wallets

add download
nightly-labs · Oct 2, 2023 · e2727eb · e2727eb
2 parents c6d0f49 + 6e1a8e7
commit e2727eb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.css b/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.css
@@ -94,13 +94,28 @@
 }
 
 .nc_connectTryAgainButton {
-  width: 128px;
+  width: 162px;
+  height: 32px;
+  background: var(--nc-color-elements-4);
+  color: var(--nc-color-elements-7);
+  border-radius: 8px;
+  margin-right: 16px;
+}
+
+.nc_connectDownloadAppButton {
+  width: 162px;
   height: 32px;
   background: var(--nc-color-primary);
   color: var(--nc-color-elements-7);
   border-radius: 8px;
 }
 
+.nc_connectBottomButtonsContainer {
+  align-items: center;
+  display: flex;
+  font-size: var(--nc-font-size-3);
+}
+
 @media (max-width: 960px) {
   .nc_connectWrapper {
     height: 368px;

diff --git a/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.ts b/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.ts
@@ -1,6 +1,5 @@
 import { LitElement, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { tailwindElement } from '../../shared/tailwind.element'
 import style from './nightly-connect-wallet.css'
 
@@ -12,17 +11,18 @@ export class NightlyConnectWallet extends LitElement {
   connecting = false
 
   @property({ type: String })
-  nameLink = ''
-
-  @property({ type: String })
-  link = ''
+  walletIcon = ''
 
   @property({ type: String })
-  walletIcon = ''
+  nameLink = ''
 
   @property({ type: String })
   coinName = ''
 
+  @property({ type: Function })
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  downloadApp: () => void = () => {}
+
   @property()
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   tryAgainClick = () => {}
@@ -51,16 +51,14 @@ export class NightlyConnectWallet extends LitElement {
         </div>
         <div class="nc_connectBottomInfo">
           <p class="nc_connectBottomInfoText">
-            Connecting takes too long? Make sure ${this.nameLink} is installed on your device.
-            ${this.link.length
-              ? unsafeHTML(`Otherwise, visit
-            <a class="nc_connectWalletLink" href="${this.link}"
-              >${this.nameLink} website</a
-            >
-            to download it.`)
-              : ''}
+            Connecting takes too long? Make sure ${this.nameLink} app is downloaded on your device.
           </p>
-          <button class="nc_connectTryAgainButton" @click=${this.tryAgainClick}>Try again</button>
+          <div class="nc_connectBottomButtonsContainer">
+            <button class="nc_connectTryAgainButton" @click=${this.tryAgainClick}>Try again</button>
+            <button class="nc_connectDownloadAppButton" @click=${this.downloadApp}>
+              Download app
+            </button>
+          </div>
         </div>
       </div>
     `

diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts
@@ -127,6 +127,10 @@ export class NightlySelector extends LitElement {
     this.onSelectWallet(this.currentWalletName)
   }
 
+  downloadApp = () => {
+    window.open(this.link, '_blank')
+  }
+
   backToPage = () => {
     if (this.mobileQuery.matches) {
       this.setCurrentView(SelectorView.MOBILE_MAIN)
@@ -157,6 +161,7 @@ export class NightlySelector extends LitElement {
     this.handleClose = this.handleClose.bind(this)
     this.onSelectWallet = this.onSelectWallet.bind(this)
     this.tryAgainClick = this.tryAgainClick.bind(this)
+    this.downloadApp = this.downloadApp.bind(this)
     this.backToPage = this.backToPage.bind(this)
     this.returnToMobileInit = this.returnToMobileInit.bind(this)
     this.goToMobileAll = this.goToMobileAll.bind(this)
@@ -208,6 +213,7 @@ export class NightlySelector extends LitElement {
         .connecting=${this.connecting}
         .tryAgainClick=${this.tryAgainClick}
         .goBack=${this.backToPage}
+        .downloadApp=${this.downloadApp}
         .link=${this.link}
         .nameLink=${this.currentWalletName}
         .walletIcon=${this.walletIcon}