Merge pull request #447 from near/modal-responsive-fixes

fix: Modal responsive fixes
near · Sep 9, 2022 · 919165f · 919165f
2 parents d6759f3 + 1dee18b
commit 919165f
Show file tree

Hide file tree

Showing 24 changed files with 357 additions and 231 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-js/src/lib/components/WalletAccount.ts b/packages/modal-ui-js/src/lib/components/WalletAccount.ts
@@ -21,7 +21,7 @@ export async function renderWalletAccount(
         <div class="content">
           <div class="icon"><img src="${module?.metadata.iconUrl}" alt="${module?.metadata.name}"></div>
           <h3 class="connecting-name">${module?.metadata.name}</h3>
-          <div class="wallet-connected-success"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="12" fill="#51BD7C"></rect><path d="M7.75 12.75L10 15.25L16.25 8.75" stroke="#232323" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Connection Successful</span></div>
+          <div class="wallet-connected-success"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="12" fill="#51BD7C"></rect><path d="M7.75 12.75L10 15.25L16.25 8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Connection Successful</span></div>
         </div>
       </div>
     </div>

diff --git 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(
           </svg>
         </button>
       </div>
-      <div class="alert-message connecting-wrapper">
+      <div class="alert-message connecting-wrapper connecting-wrapper-err">
         <div class="content">
           <div class="icon"><img src="${module.metadata.iconUrl}" alt="${
     module.metadata.name
@@ -30,9 +30,9 @@ export async function renderWalletConnectionFailed(
               <div class="error-wrapper">
                 <div class="error"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                     xmlns="http:/*www.w3.org/2000/svg">*/ <rect width="24" height="24" rx="12" fill="#CE5A6F"></rect>
-                    <path d="M17.25 6.75L6.75 17.25" stroke="#141414" stroke-width="1.5" stroke-linecap="round"
+                    <path d="M17.25 6.75L6.75 17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                       stroke-linejoin="round"></path>
-                    <path d="M6.75 6.75L17.25 17.25" stroke="#141414" stroke-width="1.5" stroke-linecap="round"
+                    <path d="M6.75 6.75L17.25 17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                       stroke-linejoin="round"></path>
                   </svg>Connection Failed</div>
                   <p>${err && err.message ? err.message : ""}</p>${

diff --git 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() {
             </button>
           </div>
         </div>
-        <div class="wallet-info-wrapper">
+
+        <div class="wallet-info-wrapper  what-wallet-hide">
           <div class="wallet-what">
             <div class="content-side">
               <h3>Secure &amp; Manage Your Digital Assets</h3>
               <p>Safely store and transfer your crypto and NFTs.</p>
             </div>
           </div>
+
           <div class="wallet-what">
-            <div class="content-side">
-              <h3>Log In to Any NEAR App</h3>
-              <p>No need to create new accounts or credentials. Connect your wallet and you are good to go!</p>
-            </div>
-          </div><button class="middleButton" id="get-a-wallet-button">Get a Wallet</button>
+              <div class="content-side">
+                  <h3>Log In to Any NEAR App</h3>
+                  <p>No need to create new accounts or credentials. Connect your wallet and you are good to go!</p>
+              </div>
+          </div>
+
+            <div class="button-spacing"></div>
+              <button class="middleButton" id="get-a-wallet-button">Get a Wallet</button>
+        </div>
+
+        <div class="what-wallet-mobile">
+          <p>
+            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.
+          </p>
+          <button class="middleButton" id="get-a-wallet-button-mobile">Get a Wallet</button>
         </div>
+
       </div>
     </div>
   `;
@@ -41,4 +55,10 @@ export async function renderWhatIsAWallet() {
     ?.addEventListener("click", () => {
       renderGetAWallet();
     });
+
+  document
+    .getElementById("get-a-wallet-button-mobile")
+    ?.addEventListener("click", () => {
+      renderGetAWallet();
+    });
 }
diff --git 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<Wallet>) {
     return;
   }
 
+  const { selectedWalletId } = modalState.selector.store.getState();
+
+  if (selectedWalletId === module.id) {
+    renderWalletAccount(module);
+    return;
+  }
+
   try {
     if (module.type === "injected" && !module.metadata.available) {
       return renderWalletNotInstalled(module);
@@ -107,7 +115,13 @@ export async function connectToWallet(module: ModuleState<Wallet>) {
 
     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}`)
+    );
   }
 }
 
@@ -123,7 +137,7 @@ export function renderModal() {
       <div class="nws-modal-overlay"></div>
       <div class="nws-modal">
         <div class="modal-left">
-          <div class="nws-modal-header">
+          <div class="modal-left-title">
             <h2>Connect Your Wallet</h2>
           </div>
           <div class="nws-modal-body">