From f8fb159f37d8732fbbfbad4d7b215521a6726162 Mon Sep 17 00:00:00 2001 From: jandutkiewicz0309 Date: Mon, 2 Oct 2023 10:28:05 +0200 Subject: [PATCH 1/5] add download --- .../nightly-connect-wallet.css | 13 +++++++++ .../nightly-connect-wallet.ts | 28 +++++++++---------- .../nightly-selector/nightly-selector.ts | 11 ++++++++ 3 files changed, 38 insertions(+), 14 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 index f3319b3c..696f4f78 100644 --- 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 @@ -96,11 +96,24 @@ .nc_connectTryAgainButton { width: 128px; height: 32px; + background: var(--nc-color-elements-4); + color: var(--nc-color-elements-7); + border-radius: 8px; + margin-right: 16px; +} + +.nc_connectDownloadAppButton { + width: 138px; + height: 32px; background: var(--nc-color-primary); color: var(--nc-color-elements-7); border-radius: 8px; } +.nc_connectBottomButtonsContainer { + display: flex; +} + @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 index f6f06348..219ed183 100644 --- 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' @@ -11,11 +10,11 @@ export class NightlyConnectWallet extends LitElement { @property({ type: Boolean }) connecting = false - @property({ type: String }) - nameLink = '' + // @property({ type: String }) + // nameLink = '' - @property({ type: String }) - link = '' + // @property({ type: String }) + // link = '' @property({ type: String }) walletIcon = '' @@ -23,6 +22,9 @@ export class NightlyConnectWallet extends LitElement { @property({ type: String }) coinName = '' + @property({ type: Function }) + downloadApp: () => void = () => {} + @property() // eslint-disable-next-line @typescript-eslint/no-empty-function tryAgainClick = () => {} @@ -51,16 +53,14 @@ export class NightlyConnectWallet extends LitElement {

- Connecting takes too long? Make sure ${this.nameLink} is installed on your device. - ${this.link.length - ? unsafeHTML(`Otherwise, visit - ${this.nameLink} website - to download it.`) - : ''} + Connecting takes too long? Make sure Coinbase Wallet app is downloaded on your device.

- +
+ + +
` diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts index e644bdfa..ad14957c 100644 --- 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,15 @@ export class NightlySelector extends LitElement { this.onSelectWallet(this.currentWalletName) } + downloadApp = () => { + const a = document.createElement('a') + a.href = this.link + a.download = this.link + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + } + backToPage = () => { if (this.mobileQuery.matches) { this.setCurrentView(SelectorView.MOBILE_MAIN) @@ -157,6 +166,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 +218,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} From 7bb340d94f7c034e476eaf19fcd7fa5cdda1f083 Mon Sep 17 00:00:00 2001 From: jandutkiewicz0309 Date: Mon, 2 Oct 2023 10:34:27 +0200 Subject: [PATCH 2/5] fix --- .../nightly-connect-wallet/nightly-connect-wallet.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 index 219ed183..f923b7aa 100644 --- 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 @@ -10,19 +10,17 @@ export class NightlyConnectWallet extends LitElement { @property({ type: Boolean }) connecting = false - // @property({ type: String }) - // nameLink = '' - - // @property({ type: String }) - // link = '' - @property({ type: String }) walletIcon = '' + @property({ type: String }) + nameLink = '' + @property({ type: String }) coinName = '' @property({ type: Function }) + // eslint-disable-next-line @typescript-eslint/no-empty-function downloadApp: () => void = () => {} @property() @@ -53,7 +51,7 @@ export class NightlyConnectWallet extends LitElement {

- Connecting takes too long? Make sure Coinbase Wallet app is downloaded on your device. + Connecting takes too long? Make sure ${this.nameLink} app is downloaded on your device.

From 91f8733ea7397371c1c7ab19b8bd52d642d1a88f Mon Sep 17 00:00:00 2001 From: jandutkiewicz0309 Date: Mon, 2 Oct 2023 10:53:30 +0200 Subject: [PATCH 3/5] fix comment --- .../src/components/nightly-selector/nightly-selector.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts index ad14957c..5c0f9b27 100644 --- a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts +++ b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts @@ -128,12 +128,7 @@ export class NightlySelector extends LitElement { } downloadApp = () => { - const a = document.createElement('a') - a.href = this.link - a.download = this.link - document.body.appendChild(a) - a.click() - document.body.removeChild(a) + window.open(this.link, '_blank') } backToPage = () => { From 5b6d93787d5516b244da61640b2f3906ab8726ba Mon Sep 17 00:00:00 2001 From: jandutkiewicz0309 Date: Mon, 2 Oct 2023 11:13:05 +0200 Subject: [PATCH 4/5] fix button --- .../nightly-connect-wallet/nightly-connect-wallet.css | 5 +++-- 1 file changed, 3 insertions(+), 2 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 index 696f4f78..08a8841e 100644 --- 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,7 +94,7 @@ } .nc_connectTryAgainButton { - width: 128px; + width: 162px; height: 32px; background: var(--nc-color-elements-4); color: var(--nc-color-elements-7); @@ -103,7 +103,7 @@ } .nc_connectDownloadAppButton { - width: 138px; + width: 162px; height: 32px; background: var(--nc-color-primary); color: var(--nc-color-elements-7); @@ -111,6 +111,7 @@ } .nc_connectBottomButtonsContainer { + align-items: center; display: flex; } From 6e1a8e79f18a2e87d61c9df7f0d1a016c9190a63 Mon Sep 17 00:00:00 2001 From: jandutkiewicz0309 Date: Mon, 2 Oct 2023 11:23:09 +0200 Subject: [PATCH 5/5] fix font size --- .../components/nightly-connect-wallet/nightly-connect-wallet.css | 1 + 1 file changed, 1 insertion(+) 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 index 08a8841e..d19ba6e6 100644 --- 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 @@ -113,6 +113,7 @@ .nc_connectBottomButtonsContainer { align-items: center; display: flex; + font-size: var(--nc-font-size-3); } @media (max-width: 960px) {