From 7acfd012f87a736c8bfb66660bcef40d493eb535 Mon Sep 17 00:00:00 2001 From: "Kujtim.Prenku" Date: Wed, 7 Sep 2022 13:46:47 +0200 Subject: [PATCH 01/18] Align colors of icons. --- packages/modal-ui-js/src/lib/components/WalletAccount.ts | 2 +- .../modal-ui-js/src/lib/components/WalletConnectionFailed.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/modal-ui-js/src/lib/components/WalletAccount.ts b/packages/modal-ui-js/src/lib/components/WalletAccount.ts index f9964782d..fe5f92e8f 100644 --- a/packages/modal-ui-js/src/lib/components/WalletAccount.ts +++ b/packages/modal-ui-js/src/lib/components/WalletAccount.ts @@ -21,7 +21,7 @@ export async function renderWalletAccount(
${module?.metadata.name}

${module?.metadata.name}

-
Connection Successful
+
Connection Successful
diff --git a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts index 9d7993245..df49fbf65 100644 --- a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts +++ b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts @@ -30,9 +30,9 @@ export async function renderWalletConnectionFailed(
*/ - - Connection Failed

${err && err.message ? err.message : ""}

${ From 628f67f4a0cc0f94909b8fc037d30ba9dfb46122 Mon Sep 17 00:00:00 2001 From: "Kujtim.Prenku" Date: Wed, 7 Sep 2022 13:48:47 +0200 Subject: [PATCH 02/18] Show connected view instead of closing the modal when a connected option is clicked. --- packages/modal-ui-js/src/lib/render-modal.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index 9f1be37bb..377411d89 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -12,6 +12,7 @@ import { renderWalletConnecting } from "./components/WalletConnecting"; import { renderWalletConnectionFailed } from "./components/WalletConnectionFailed"; import { renderWalletNotInstalled } from "./components/WalletNotInstalled"; import { modalState } from "./modal"; +import { renderWalletAccount } from "./components/WalletAccount"; export type HardwareWalletAccountState = HardwareWalletAccount & { selected: boolean; @@ -70,6 +71,13 @@ export async function connectToWallet(module: ModuleState) { return; } + const { selectedWalletId } = modalState.selector.store.getState() + + if (selectedWalletId) { + renderWalletAccount(module); + return; + } + try { if (module.type === "injected" && !module.metadata.available) { return renderWalletNotInstalled(module); From 2ccd45107c9f170f69abe853679dfb0a1e60de8e Mon Sep 17 00:00:00 2001 From: "Kujtim.Prenku" Date: Wed, 7 Sep 2022 14:14:38 +0200 Subject: [PATCH 03/18] Aligned error messages with the other modal-ui package --- packages/modal-ui-js/src/lib/render-modal.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index 377411d89..148fd62ad 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -71,7 +71,7 @@ export async function connectToWallet(module: ModuleState) { return; } - const { selectedWalletId } = modalState.selector.store.getState() + const { selectedWalletId } = modalState.selector.store.getState(); if (selectedWalletId) { renderWalletAccount(module); @@ -115,7 +115,13 @@ export async function connectToWallet(module: ModuleState) { modalState.container.children[0].classList.remove("open"); } catch (err) { - await renderWalletConnectionFailed(module, err as Error); + const { name } = module.metadata; + const message = err instanceof Error ? err.message : "Something went wrong"; + + await renderWalletConnectionFailed( + module, + new Error(`Failed to sign in with ${name}: ${message}`) + ); } } From ea82fc36063931f1e1edcc1c2f0d0383b66de851 Mon Sep 17 00:00:00 2001 From: "Kujtim.Prenku" Date: Wed, 7 Sep 2022 14:29:57 +0200 Subject: [PATCH 04/18] Fixed if check to correctly check if the selectedWallet id is equal to the clicked option. --- packages/modal-ui-js/src/lib/render-modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index 148fd62ad..dca7f491c 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -73,7 +73,7 @@ export async function connectToWallet(module: ModuleState) { const { selectedWalletId } = modalState.selector.store.getState(); - if (selectedWalletId) { + if (selectedWalletId === module.id) { renderWalletAccount(module); return; } From 3c75fc6e35feb57423344ef36738ce54b9195e43 Mon Sep 17 00:00:00 2001 From: Haris Valjevcic Date: Wed, 7 Sep 2022 15:00:30 +0200 Subject: [PATCH 05/18] Change paddign from em to px --- packages/modal-ui-js/src/lib/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index 82301dcad..cf1023d7f 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -413,6 +413,7 @@ display: block; margin: 75px auto 12px auto; border: 0.1em solid var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); + padding: 8px 24px; } .nws-modal-wrapper .nws-modal .nws-modal-body button.get-wallet { From 4bc856f4678d48faf5d0e1631ccecd6fa9c9f669 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Wed, 7 Sep 2022 19:33:44 +0200 Subject: [PATCH 06/18] Missing vanlla content added. --- .../src/lib/components/WhatIsAWallet.ts | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts index d4d2ba60b..f22b6c145 100644 --- a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts @@ -18,20 +18,34 @@ export async function renderWhatIsAWallet() {
-
+ +

Secure & Manage Your Digital Assets

Safely store and transfer your crypto and NFTs.

+
-
-

Log In to Any NEAR App

-

No need to create new accounts or credentials. Connect your wallet and you are good to go!

-
-
+
+

Log In to Any NEAR App

+

No need to create new accounts or credentials. Connect your wallet and you are good to go!

+
+
+ +
+ +
+ +
+

+ Use a wallet to secure and manage your NEAR assets, and to log in + to any NEAR app without the need for usernames and passwords. +

+
+ `; From bf05998e62ae3a8ba1093aa7c23201922e9ece67 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Wed, 7 Sep 2022 19:35:49 +0200 Subject: [PATCH 07/18] Responsive and mobile improvements and fixes --- .gitignore | 1 + .../lib/components/WalletConnectionFailed.ts | 2 +- packages/modal-ui-js/src/lib/styles.css | 409 ++++++++++-------- .../src/lib/components/AlertMessage.tsx | 2 +- .../src/lib/components/WalletHome.tsx | 2 + .../modal-ui/src/lib/components/styles.css | 68 ++- 6 files changed, 296 insertions(+), 188 deletions(-) diff --git a/.gitignore b/.gitignore index bb357a557..2bf0fbe45 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,4 @@ Thumbs.db .angular .npmrc +.vscode/settings.json diff --git a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts index df49fbf65..8ca682b3d 100644 --- a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts +++ b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts @@ -19,7 +19,7 @@ export async function renderWalletConnectionFailed( -
+
${ module.metadata.name diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index cf1023d7f..1568f4a32 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -106,10 +106,10 @@ .nws-modal-wrapper .nws-modal { background: var(--wallet-selector-content-bg, var(--content-bg)); - width: 812px; max-width: 812px; - height: auto; - max-height: 70vh; + height: 70vh; + max-height: 520px; + width: 100%; border-radius: 16px; position: absolute; left: 50%; @@ -242,7 +242,6 @@ } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list .single-wallet.sidebar.selected-wallet { - z-index: -1; padding: 12px; background-color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); } @@ -314,7 +313,11 @@ .nws-modal-wrapper .nws-modal .modal-right { width: 65%; padding: 32px; - overflow: hidden; + overflow: auto; +} + +.nws-modal-wrapper .nws-modal .modal-right::-webkit-scrollbar { + width: 10px; } .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper, @@ -326,6 +329,11 @@ padding: 0 28px; } +.nws-modal-wrapper .nws-modal .connecting-wrapper-err { + margin-top: 45px; + padding: 0 28px; +} + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper { padding: 0; } @@ -411,7 +419,7 @@ line-height: 24px; border-color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); display: block; - margin: 75px auto 12px auto; + margin: 25px auto 12px auto; border: 0.1em solid var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); padding: 8px 24px; } @@ -1046,181 +1054,226 @@ margin-right: 5px; } +/************* Responsive and mobile **********/ -@media (min-width: 769px) { - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-mobile { - display: none; - } +@media (min-width: 577px) { + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-mobile { + display: none; + } } - -/*************Queries for mobile **********/ +@media (min-width: 769px) { + .button-spacing { + margin: 90px + } +} @media (max-width: 768px) { - - .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper, - .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper, - .nws-modal-wrapper .nws-modal .connecting-wrapper, - .nws-modal-wrapper .nws-modal .wallet-not-installed-wrapper, - .nws-modal-wrapper .nws-modal .switch-network-message-wrapper { - margin-top: 20px; - padding: 0; - } - - .nws-modal-wrapper .wallet-not-installed-wrapper>p { - margin: 20px 0px 30px 0px; - max-width: 500px; - } - - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-hide { - display: none; - } - - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-mobile p { - font-size: 14px; - margin-bottom: 0; - text-align: center; - max-width: 600px; - margin: auto; - } - - .nws-modal-wrapper .nws-modal-overlay { - background: var(--wallet-selector-backdrop-bg, var(--bottom-section)); - height: 100%; - width: 100%; - position: absolute; - } - - .nws-modal-wrapper .nws-modal .modal-left { - padding: 32px 12px; - } - - .nws-modal-wrapper .nws-modal { - width: 100%; - display: block; - overflow: auto; - } - - .nws-modal-wrapper .nws-modal .modal-left { - width: 100%; - background-color: var(--wallet-selector-content-bg, var(--content-bg)); - } - - .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body { - display: flex; - overflow: auto; - } - - .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body .wallet-options-wrapper { - display: flex; - margin: auto; - } - - .nws-modal-wrapper .nws-modal .modal-right { - width: 100%; - background-color: var(--wallet-selector-mobile-bottom-section, var(--bottom-section)); - } - - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-header h3.middleTitle { - text-align: center; - font-size: 16px; - margin: 4px auto; - } - - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .content { - font-size: 14px; - text-align: center; - color: var(--mobile-text); - margin: 0 - } - - .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body { - margin-top: 10px; - padding: 0; - } - - .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton { - margin: 25px auto 12px auto; - } - - .nws-modal-wrapper .nws-modal .modal-header { - display: block; - font-size: 18px; - text-align: center; - } - - .nws-modal-wrapper .nws-modal .nws-modal-header .close-button { - position: absolute; - right: 30px; - top: 30px; - } - - .nws-modal-wrapper .nws-modal .nws-modal-header h2 { - font-size: 18px; - text-align: center; - } - - .nws-modal-wrapper .nws-modal .wallet-options-wrapper .description { - display: none; - } - - .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list { - display: flex; - overflow-x: auto; - } - - .nws-modal-wrapper .nws-modal .info { - display: none; - width: 90px; - } - - .single-wallet { - display: block; - width: 85px; - } - - .single-wallet.sidebar .icon { - width: 56px; - height: 56px; - margin: auto; - } - - .single-wallet.sidebar .content { - width: auto; - } - - .single-wallet .content .title { - margin-top: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper { - margin-top: 0; - } - - .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-image, - .nws-modal-wrapper .specify-path-wrapper .change-path-wrapper { - margin-top: 30px; - margin-bottom: 30px; - } - - .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description>p { - max-width: 450px; - margin-left: auto; - margin-right: auto; - } - - ::-webkit-scrollbar { - height: 4px; - width: 4px; - background: var(--backdrop-bg); - - } - - ::-webkit-scrollbar-thumb:horizontal { - background: var(--close-button-fill-icon-color); - border-radius: 10px; - } + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper { + margin-top: 45px; + } + + .button-spacing { + margin: 45px + } + + .nws-modal-wrapper .nws-modal { + height: auto; + } + + .nws-modal-wrapper .nws-modal .modal-left { + width: 40%; + border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); + padding: 32px 16px; + height: 100%; + max-height: 70vh; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .modal-right { + width: 60%; + padding: 32px 16px; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper { + padding: 0 0 0 10px; + } + + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-image { + margin-top: 30px; + margin-bottom: 35px; + } +} + + + + +@media (max-width: 576px) { + + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper, + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper, + .nws-modal-wrapper .nws-modal .connecting-wrapper, + .nws-modal-wrapper .nws-modal .wallet-not-installed-wrapper, + .nws-modal-wrapper .nws-modal .switch-network-message-wrapper { + margin-top: 20px; + padding: 0; + } + + .nws-modal-wrapper .wallet-not-installed-wrapper>p { + margin: 20px 0px 30px 0px; + max-width: 500px; + } + + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-hide { + display: none; + } + + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-mobile p { + font-size: 14px; + margin-bottom: 0; + text-align: center; + max-width: 600px; + margin: auto; + } + + .nws-modal-wrapper .nws-modal-overlay { + background: var(--wallet-selector-backdrop-bg, var(--bottom-section)); + height: 100%; + width: 100%; + position: absolute; + } + + .nws-modal-wrapper .nws-modal .modal-left { + padding: 32px 12px; + } + + .nws-modal-wrapper .nws-modal { + width: 100%; + display: block; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .modal-left { + width: 100%; + background-color: var(--wallet-selector-content-bg, var(--content-bg)); + } + + .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body { + display: flex; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body .wallet-options-wrapper { + display: flex; + margin: auto; + } + + .nws-modal-wrapper .nws-modal .modal-right { + width: 100%; + background-color: var(--wallet-selector-mobile-bottom-section, var(--bottom-section)); + } + + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-header h3.middleTitle { + text-align: center; + font-size: 16px; + margin: 4px auto; + } + + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .content { + font-size: 14px; + text-align: center; + color: var(--mobile-text); + margin: 0 + } + + .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body { + margin-top: 10px; + padding: 0; + } + + .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton { + margin: 25px auto 12px auto; + } + + .nws-modal-wrapper .nws-modal .modal-header { + display: block; + font-size: 18px; + text-align: center; + } + + .nws-modal-wrapper .nws-modal .nws-modal-header .close-button { + position: absolute; + right: 30px; + top: 30px; + } + + .nws-modal-wrapper .nws-modal .nws-modal-header h2 { + font-size: 18px; + text-align: center; + } + + .nws-modal-wrapper .nws-modal .wallet-options-wrapper .description { + display: none; + } + + .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list { + display: flex; + overflow-x: auto; + } + + .nws-modal-wrapper .nws-modal .info { + display: none; + width: 90px; + } + + .single-wallet { + display: block; + width: 85px; + } + + .single-wallet.sidebar .icon { + width: 56px; + height: 56px; + margin: auto; + } + + .single-wallet.sidebar .content { + width: auto; + } + + .single-wallet .content .title { + margin-top: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper { + margin-top: 0; + } + + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-image, + .nws-modal-wrapper .specify-path-wrapper .change-path-wrapper { + margin-top: 30px; + margin-bottom: 30px; + } + + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description>p { + max-width: 450px; + margin-left: auto; + margin-right: auto; + } + + ::-webkit-scrollbar { + height: 4px; + width: 4px; + background: var(--backdrop-bg); + + } + + ::-webkit-scrollbar-thumb:horizontal { + background: var(--close-button-fill-icon-color); + border-radius: 10px; + } } diff --git a/packages/modal-ui/src/lib/components/AlertMessage.tsx b/packages/modal-ui/src/lib/components/AlertMessage.tsx index 7412ef0c6..534aea559 100644 --- a/packages/modal-ui/src/lib/components/AlertMessage.tsx +++ b/packages/modal-ui/src/lib/components/AlertMessage.tsx @@ -19,7 +19,7 @@ export const AlertMessage: React.FC<AlertMessageProps> = ({ return ( <Fragment> <ModalHeader title= -
+
{module?.metadata.name} diff --git a/packages/modal-ui/src/lib/components/WalletHome.tsx b/packages/modal-ui/src/lib/components/WalletHome.tsx index dfe843c1c..d655d6d76 100644 --- a/packages/modal-ui/src/lib/components/WalletHome.tsx +++ b/packages/modal-ui/src/lib/components/WalletHome.tsx @@ -118,6 +118,7 @@ export const WalletHome: React.FC = ({ description="No need to create new accounts or credentials. Connect your wallet and you are good to go!" icon={Icon} /> +
+

Use a wallet to secure and manage your NEAR assets, and to log in to any NEAR app without the need for usernames and passwords. diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index 06390219b..a648fa4b4 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -106,10 +106,10 @@ .nws-modal-wrapper .nws-modal { background: var(--wallet-selector-content-bg, var(--content-bg)); - width: 812px; + width: 100%; max-width: 812px; - height: auto; - max-height: 70vh; + height: 70vh; + max-height: 520px; border-radius: 16px; position: absolute; left: 50%; @@ -242,7 +242,6 @@ } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list .single-wallet.sidebar.selected-wallet { - z-index: -1; padding: 12px; background-color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); } @@ -314,7 +313,11 @@ .nws-modal-wrapper .nws-modal .modal-right { width: 65%; padding: 32px; - overflow: hidden; + overflow: auto; +} + +.nws-modal-wrapper .nws-modal .modal-right::-webkit-scrollbar { + width: 10px; } .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper, @@ -326,6 +329,11 @@ padding: 0 28px; } +.nws-modal-wrapper .nws-modal .connecting-wrapper-err { + margin-top: 45px; + padding: 0 28px; +} + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper { padding: 0; } @@ -411,7 +419,7 @@ line-height: 24px; border-color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); display: block; - margin: 75px auto 12px auto; + margin: 25px auto 12px auto; border: 0.1em solid var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); } @@ -1043,17 +1051,61 @@ margin-right: 5px; } +/************* Responsive and mobile **********/ -@media (min-width: 769px) { +@media (min-width: 577px) { .nws-modal-wrapper .nws-modal .modal-right .nws-modal-body .what-wallet-mobile { display: none; } } +@media (min-width: 769px) { + .button-spacing { + margin: 90px + } +} -/*************Queries for mobile **********/ @media (max-width: 768px) { + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper { + margin-top: 45px; + } + + .button-spacing { + margin: 45px + } + + .nws-modal-wrapper .nws-modal { + height: auto; + } + + .nws-modal-wrapper .nws-modal .modal-left { + width: 40%; + border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); + padding: 32px 16px; + height: 100%; + max-height: 70vh; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .modal-right { + width: 60%; + padding: 32px 16px; + overflow: auto; + } + + .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper { + padding: 0 0 0 10px; + } + + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-image { + margin-top: 30px; + margin-bottom: 35px; + } +} + + +@media (max-width: 576px) { .nws-modal-wrapper .nws-modal .wallet-home-wrapper .get-wallet-wrapper, .nws-modal-wrapper .nws-modal .wallet-home-wrapper .wallet-info-wrapper, From 28b6373888f503f86b5122ed1a90279362951576 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Thu, 8 Sep 2022 11:42:39 +0200 Subject: [PATCH 08/18] Sender failed and get wallet margins fix --- .gitignore | 1 + .vscode/settings.json | 7 ++++++- packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts | 2 +- packages/modal-ui/src/lib/components/ConnectionResult.tsx | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 2bf0fbe45..a212369e5 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,4 @@ Thumbs.db .angular .npmrc .vscode/settings.json +.vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json index a4a8998a1..be3eb5cd9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,10 @@ "source.fixAll.eslint": true }, - "typescript.tsdk": "node_modules/typescript/lib" + "typescript.tsdk": "node_modules/typescript/lib", + "workbench.colorCustomizations": { + "activityBar.background": "#659bc4", + "titleBar.activeBackground": "#473d6a", + "titleBar.activeForeground": "#FDFAFE" + } } diff --git a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts index f22b6c145..48b8e997c 100644 --- a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts @@ -34,7 +34,7 @@ export async function renderWhatIsAWallet() {

-
+
diff --git a/packages/modal-ui/src/lib/components/ConnectionResult.tsx b/packages/modal-ui/src/lib/components/ConnectionResult.tsx index b98055f18..c9670793c 100644 --- a/packages/modal-ui/src/lib/components/ConnectionResult.tsx +++ b/packages/modal-ui/src/lib/components/ConnectionResult.tsx @@ -15,7 +15,7 @@ export const ConnectionResult: React.FC = ({ onRetry, }) => { return ( -
+
{err ? (
From b98002506206c29a5c2a9e55836099d4eb555d30 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Thu, 8 Sep 2022 13:16:42 +0200 Subject: [PATCH 09/18] small lint fix --- packages/modal-ui/src/lib/components/WalletHome.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/modal-ui/src/lib/components/WalletHome.tsx b/packages/modal-ui/src/lib/components/WalletHome.tsx index d655d6d76..c80550771 100644 --- a/packages/modal-ui/src/lib/components/WalletHome.tsx +++ b/packages/modal-ui/src/lib/components/WalletHome.tsx @@ -118,7 +118,7 @@ export const WalletHome: React.FC = ({ description="No need to create new accounts or credentials. Connect your wallet and you are good to go!" icon={Icon} /> -
+
-
-

Use a wallet to secure and manage your NEAR assets, and to log in to any NEAR app without the need for usernames and passwords. From 0121a20d2e5df988a69bffb986b54a83d1c17e14 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Thu, 8 Sep 2022 16:04:08 +0200 Subject: [PATCH 10/18] Mobile overlay and modal position changed --- packages/modal-ui-js/src/lib/styles.css | 39 ++++++++----------- .../modal-ui/src/lib/components/styles.css | 24 +++++------- 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index 1568f4a32..482e5bcb2 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -1077,10 +1077,6 @@ margin: 45px } - .nws-modal-wrapper .nws-modal { - height: auto; - } - .nws-modal-wrapper .nws-modal .modal-left { width: 40%; border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); @@ -1117,7 +1113,10 @@ .nws-modal-wrapper .nws-modal .wallet-not-installed-wrapper, .nws-modal-wrapper .nws-modal .switch-network-message-wrapper { margin-top: 20px; - padding: 0; + } + + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title h2 { + text-align: center; } .nws-modal-wrapper .wallet-not-installed-wrapper>p { @@ -1133,30 +1132,24 @@ font-size: 14px; margin-bottom: 0; text-align: center; - max-width: 600px; margin: auto; } - .nws-modal-wrapper .nws-modal-overlay { - background: var(--wallet-selector-backdrop-bg, var(--bottom-section)); - height: 100%; - width: 100%; - position: absolute; - } - - .nws-modal-wrapper .nws-modal .modal-left { - padding: 32px 12px; - } - .nws-modal-wrapper .nws-modal { - width: 100%; - display: block; - overflow: auto; + width: 100%; + display: block; + overflow: auto; + bottom: 0; + height: 500px; + background: var(--wallet-selector-mobile-bottom-section, var(--bottom-section)); + border-radius: 16px 16px 0px 0px; } - .nws-modal-wrapper .nws-modal .modal-left { - width: 100%; - background-color: var(--wallet-selector-content-bg, var(--content-bg)); + .nws-modal-wrapper .nws-modal .modal-left { + width: 100%; + background-color: var(--wallet-selector-content-bg, var(--content-bg)); + height: auto; + padding: 32px 12px; } .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body { diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index a648fa4b4..b2b02a4a4 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -1075,9 +1075,6 @@ margin: 45px } - .nws-modal-wrapper .nws-modal { - height: auto; - } .nws-modal-wrapper .nws-modal .modal-left { width: 40%; @@ -1113,7 +1110,10 @@ .nws-modal-wrapper .nws-modal .wallet-not-installed-wrapper, .nws-modal-wrapper .nws-modal .switch-network-message-wrapper { margin-top: 20px; - padding: 0; + } + + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title h2 { + text-align: center; } .nws-modal-wrapper .wallet-not-installed-wrapper > p { @@ -1129,30 +1129,26 @@ font-size: 14px; margin-bottom: 0; text-align: center; - max-width: 600px; margin: auto; } - .nws-modal-wrapper .nws-modal-overlay { - background: var(--wallet-selector-backdrop-bg, var(--bottom-section)); - height: 100%; - width: 100%; - position: absolute; - } - .nws-modal-wrapper .nws-modal .modal-left { - padding: 32px 12px; - } .nws-modal-wrapper .nws-modal { width: 100%; display: block; overflow: auto; + bottom: 0; + height: 500px; + background: var(--wallet-selector-mobile-bottom-section, var(--bottom-section)); + border-radius: 16px 16px 0px 0px; } .nws-modal-wrapper .nws-modal .modal-left { width: 100%; background-color: var(--wallet-selector-content-bg, var(--content-bg)); + height: auto; + padding: 32px 12px; } .nws-modal-wrapper .nws-modal .modal-left .nws-modal-body { From f98045c8792e388d73c467cebc75da534889c968 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Thu, 8 Sep 2022 17:04:56 +0200 Subject: [PATCH 11/18] vanila text center fix --- packages/modal-ui-js/src/lib/render-modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index dca7f491c..47eda4351 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -137,7 +137,7 @@ export function renderModal() {

-
+

Connect Your Wallet

From edc86956a0d3334bc5b65e7f67ec68fff4d11adc Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Thu, 8 Sep 2022 17:44:50 +0200 Subject: [PATCH 12/18] Modal height change to preview next icon, increased title to icon margin. --- packages/modal-ui-js/src/lib/styles.css | 6 ++---- packages/modal-ui/src/lib/components/styles.css | 7 +++---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index 482e5bcb2..d450f169b 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -107,8 +107,7 @@ .nws-modal-wrapper .nws-modal { background: var(--wallet-selector-content-bg, var(--content-bg)); max-width: 812px; - height: 70vh; - max-height: 520px; + height: 555px; width: 100%; border-radius: 16px; position: absolute; @@ -142,7 +141,6 @@ border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); padding: 32px 24px; height: 100%; - max-height: 70vh; overflow: auto; } @@ -300,6 +298,7 @@ /* identical to box height, or 171% */ align-items: center; color: var(--wallet-selector-heading-color, var(--heading-color)); + margin-left: 10px; } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list .single-wallet.sidebar .content .description { @@ -1082,7 +1081,6 @@ border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); padding: 32px 16px; height: 100%; - max-height: 70vh; overflow: auto; } diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index b2b02a4a4..eb24af8b1 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -108,8 +108,7 @@ background: var(--wallet-selector-content-bg, var(--content-bg)); width: 100%; max-width: 812px; - height: 70vh; - max-height: 520px; + height: 555px; border-radius: 16px; position: absolute; left: 50%; @@ -142,7 +141,6 @@ border-right: 1px solid var(--wallet-selector-sidebar-border-color, var(--sidebar-border-color)); padding: 32px 24px; height: 100%; - max-height: 70vh; overflow: auto; } @@ -300,7 +298,8 @@ /* identical to box height, or 171% */ align-items: center; color: var(--wallet-selector-heading-color, var(--heading-color)); -} + margin-left: 10px; + } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .options-list .single-wallet.sidebar .content .description { display: none; From 7f0190ee50ff1d9d9133a74f1d78c5cab793e5ea Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 10:40:44 +0200 Subject: [PATCH 13/18] vs code settings and gitignore changes removed --- .gitignore | 2 -- .vscode/settings.json | 8 ++------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index a212369e5..bb357a557 100644 --- a/.gitignore +++ b/.gitignore @@ -44,5 +44,3 @@ Thumbs.db .angular .npmrc -.vscode/settings.json -.vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json index be3eb5cd9..9639ffef9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,10 +5,6 @@ "source.fixAll.eslint": true }, - "typescript.tsdk": "node_modules/typescript/lib", - "workbench.colorCustomizations": { - "activityBar.background": "#659bc4", - "titleBar.activeBackground": "#473d6a", - "titleBar.activeForeground": "#FDFAFE" - } + "typescript.tsdk": "node_modules/typescript/lib" + } From 1b3e97c9533fa9b4fa43a5e94f6b6e832846eb2d Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 10:51:02 +0200 Subject: [PATCH 14/18] removed empty line --- .vscode/settings.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 9639ffef9..a4a8998a1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,4 @@ true }, "typescript.tsdk": "node_modules/typescript/lib" - } From 3f231f2b7a0f59053fc9bb7abf0fb7565b2d0220 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 11:03:13 +0200 Subject: [PATCH 15/18] Conection failed text color fix --- packages/modal-ui/src/lib/components/ConnectionResult.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/modal-ui/src/lib/components/ConnectionResult.tsx b/packages/modal-ui/src/lib/components/ConnectionResult.tsx index c9670793c..feffb7592 100644 --- a/packages/modal-ui/src/lib/components/ConnectionResult.tsx +++ b/packages/modal-ui/src/lib/components/ConnectionResult.tsx @@ -42,7 +42,7 @@ export const ConnectionResult: React.FC = ({ strokeLinejoin="round" /> - Connection Failed + Connection Failed

{message}

{module?.metadata.available && ( From 377c37b3c001a0beecd48bf40ff42dc445f80aa7 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 11:16:52 +0200 Subject: [PATCH 16/18] modal-js mobile get a wallet button fix --- packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts index 48b8e997c..c06cada80 100644 --- a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts @@ -43,7 +43,7 @@ export async function renderWhatIsAWallet() { Use a wallet to secure and manage your NEAR assets, and to log in to any NEAR app without the need for usernames and passwords.

- +
@@ -55,4 +55,11 @@ export async function renderWhatIsAWallet() { ?.addEventListener("click", () => { renderGetAWallet(); }); + + document + .getElementById("get-a-wallet-button-mobile") + ?.addEventListener("click", () => { + renderGetAWallet(); + }); + } From 7976508b2fed0f8c455cbb6da96ef40a0c0c7b15 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 11:21:49 +0200 Subject: [PATCH 17/18] empty line removed --- packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts index c06cada80..2df4f81ed 100644 --- a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts @@ -61,5 +61,4 @@ export async function renderWhatIsAWallet() { ?.addEventListener("click", () => { renderGetAWallet(); }); - } From 1dee18b4f55bcbb756409e3e3ab16ab5ddf8a48e Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Fri, 9 Sep 2022 12:33:34 +0200 Subject: [PATCH 18/18] version changed to 7.0.1 --- package.json | 2 +- packages/core/package.json | 2 +- packages/default-wallets/package.json | 2 +- packages/ledger/package.json | 2 +- packages/math-wallet/package.json | 2 +- packages/meteor-wallet/package.json | 2 +- packages/modal-ui-js/package.json | 2 +- packages/modal-ui/package.json | 2 +- packages/my-near-wallet/package.json | 2 +- packages/near-wallet/package.json | 2 +- packages/nightly-connect/package.json | 2 +- packages/nightly/package.json | 2 +- packages/sender/package.json | 2 +- packages/wallet-connect/package.json | 2 +- packages/wallet-utils/package.json | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 35d427996..5d2500db8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "near-wallet-selector", - "version": "7.0.0", + "version": "7.0.1", "description": "NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem", "keywords": [ "near", diff --git a/packages/core/package.json b/packages/core/package.json index de8a3e613..e1b0662f0 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/core", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/default-wallets/package.json b/packages/default-wallets/package.json index e80d62711..1fbac29d3 100644 --- a/packages/default-wallets/package.json +++ b/packages/default-wallets/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/default-wallets", - "version": "7.0.0" + "version": "7.0.1" } diff --git a/packages/ledger/package.json b/packages/ledger/package.json index 0cf8323ba..fad486466 100644 --- a/packages/ledger/package.json +++ b/packages/ledger/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/ledger", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/math-wallet/package.json b/packages/math-wallet/package.json index dc987af10..24f372019 100644 --- a/packages/math-wallet/package.json +++ b/packages/math-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/math-wallet", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/meteor-wallet/package.json b/packages/meteor-wallet/package.json index 6cddaf8e0..75c235a3b 100644 --- a/packages/meteor-wallet/package.json +++ b/packages/meteor-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/meteor-wallet", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/modal-ui-js/package.json b/packages/modal-ui-js/package.json index b217f753f..0c3b54342 100644 --- a/packages/modal-ui-js/package.json +++ b/packages/modal-ui-js/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/modal-ui-js", - "version": "7.0.0" + "version": "7.0.1" } diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json index 9b2545452..9b8caedec 100644 --- a/packages/modal-ui/package.json +++ b/packages/modal-ui/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/modal-ui", - "version": "7.0.0" + "version": "7.0.1" } diff --git a/packages/my-near-wallet/package.json b/packages/my-near-wallet/package.json index c961f197b..aa0910a2d 100644 --- a/packages/my-near-wallet/package.json +++ b/packages/my-near-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/my-near-wallet", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/near-wallet/package.json b/packages/near-wallet/package.json index 008ca5d55..5c5edf073 100644 --- a/packages/near-wallet/package.json +++ b/packages/near-wallet/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/near-wallet", - "version": "7.0.0" + "version": "7.0.1" } diff --git a/packages/nightly-connect/package.json b/packages/nightly-connect/package.json index 0373e5f0d..1ee6c9e1e 100644 --- a/packages/nightly-connect/package.json +++ b/packages/nightly-connect/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/nightly-connect", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/nightly/package.json b/packages/nightly/package.json index 6237abaad..b6391b5b7 100644 --- a/packages/nightly/package.json +++ b/packages/nightly/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/nightly", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/sender/package.json b/packages/sender/package.json index 6a5e4c3d3..984ab5553 100644 --- a/packages/sender/package.json +++ b/packages/sender/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/sender", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" } diff --git a/packages/wallet-connect/package.json b/packages/wallet-connect/package.json index b4da65c2c..fb4bad907 100644 --- a/packages/wallet-connect/package.json +++ b/packages/wallet-connect/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/wallet-connect", - "version": "7.0.0" + "version": "7.0.1" } diff --git a/packages/wallet-utils/package.json b/packages/wallet-utils/package.json index aa2bc9c42..31e0e1963 100644 --- a/packages/wallet-utils/package.json +++ b/packages/wallet-utils/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/wallet-utils", - "version": "7.0.0", + "version": "7.0.1", "peerDependencies": { "near-api-js": "^0.44.2" }