Merge pull request #429 from PureStake/jan/contacts-page

Move Contacts list out of Settings Menu
PureStake · Aug 10, 2022 · 854c53c · 854c53c
2 parents b7e7285 + 3c243ad
commit 854c53c
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 100 deletions.
diff --git a/packages/test-project/tests/ui-transactions-e2e.test.js b/packages/test-project/tests/ui-transactions-e2e.test.js
@@ -63,7 +63,6 @@ describe('UI Transactions Tests', () => {
     await extensionPage.waitForTimeout(1000);
     await extensionPage.click('#backToAccount');
     await extensionPage.waitForTimeout(1000);
-    return;
   };
 
   const verifyDestination = async (account) => {
@@ -79,13 +78,12 @@ describe('UI Transactions Tests', () => {
   };
 
   test('Add Multisig 1 as a Contact', async () => {
-    await openSettingsMenu();
-    await extensionPage.click('#showContactList');
+    await extensionPage.click('#contactsList');
     await extensionPage.click('#newContact');
     await extensionPage.type('#contactName', accounts.multisig.subaccounts[0].name);
     await extensionPage.type('#contactAddress', accounts.multisig.subaccounts[0].address);
     await extensionPage.click('#authButton');
-    await closeSettingsMenu();
+    await goBack();
   });
 
   test('Send Algos Transaction / Regular address', async () => {

diff --git a/packages/ui/src/components/MainHeader.ts b/packages/ui/src/components/MainHeader.ts
@@ -3,6 +3,7 @@ import { html } from 'htm/preact';
 
 import HeaderComponent from './HeaderComponent';
 import LedgerSelect from './LedgerSelect';
+import OpenContacts from './OpenContacts';
 import SettingsMenu from './SettingsMenu';
 import Logo from './Logo';
 
@@ -11,6 +12,7 @@ const MainHeader: FunctionalComponent = () => {
     <${HeaderComponent}>
       <${Logo} />
       <${LedgerSelect} />
+      <${OpenContacts} />
       <${SettingsMenu} />
     </${HeaderComponent}>
   `;

diff --git a/packages/ui/src/components/OpenContacts.ts b/packages/ui/src/components/OpenContacts.ts
@@ -0,0 +1,21 @@
+import { FunctionalComponent } from 'preact';
+import { html } from 'htm/preact';
+import { Link } from 'preact-router';
+
+const OpenContacts: FunctionalComponent = () => {
+  return html`
+    <${Link}
+      id="contactsList"
+      class="has-tooltip-arrow has-tooltip-bottom has-tooltip-bottom-right has-tooltip-fade has-text-centered has-text-grey-dark"
+      data-tooltip="Contacts List"
+      style="min-width: 24px;"
+      href=${'/contacts-page'}
+    >
+      <span class="icon is-small">
+        <i class="fas fa-user-friends" aria-hidden="true"></i>
+      </span>
+    </${Link}>
+  `;
+};
+
+export default OpenContacts;
diff --git a/packages/ui/src/components/SettingsMenu.ts b/packages/ui/src/components/SettingsMenu.ts
@@ -6,7 +6,6 @@ import { JsonRpcMethod } from '@algosigner/common/messaging/types';
 import { StoreContext } from 'services/StoreContext';
 
 import HeaderComponent from './HeaderComponent';
-import ContactList from 'components/ContactList';
 import DeleteWallet from 'components/DeleteWallet';
 import Logo from './Logo';
 import { sendMessage } from 'services/Messaging';
@@ -45,8 +44,6 @@ const SettingsMenu: FunctionalComponent = () => {
 
   const getSubmenu = () => {
     switch (currentMenu) {
-      case 'contactList':
-        return html`<${ContactList} />`;
       case 'networkConfiguration':
         return html`<${LedgerNetworksConfiguration}
           closeFunction=${() => {
@@ -64,7 +61,13 @@ const SettingsMenu: FunctionalComponent = () => {
   };
 
   return html`
-    <div id="openSettings" class="has-text-centered" style="cursor: pointer; min-width: 24px;" onClick=${flip}>
+    <div
+      id="openSettings"
+      class="has-tooltip-arrow has-tooltip-bottom has-tooltip-bottom-right has-tooltip-fade has-text-centered"
+      data-tooltip="Settings Menu"
+      style="cursor: pointer; min-width: 24px;"
+      onClick=${flip}
+    >
       <span class="icon">
         <i class="fas fa-cog" aria-hidden="true" />
       </span>
@@ -84,13 +87,6 @@ const SettingsMenu: FunctionalComponent = () => {
         ${
           currentMenu === 'settings' &&
           html`
-            <a
-              class="menu-item"
-              id="showContactList"
-              onClick=${() => setCurrentMenu('contactList')}
-            >
-              Contact List
-            </a>
             <a
               class="menu-item"
               id="showNetworkConfiguration"

diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js
@@ -16,6 +16,7 @@ import Login from 'pages/Login';
 import CreateAccount from 'pages/CreateAccount';
 import ImportAccount from 'pages/ImportAccount';
 import Wallet from 'pages/Wallet';
+import ContactsPage from 'pages/ContactsPage';
 import Account from 'pages/Account';
 import AccountDetails from 'pages/AccountDetails';
 import SendAlgos from 'pages/SendAlgos';
@@ -56,6 +57,7 @@ const App = () => {
               <div style="overflow: auto; flex: 1; display: flex; flex-direction: column;">
                 <${Router}>
                   <${Wallet} path="/wallet" />
+                  <${ContactsPage} path="/contacts-page" />
                   <${CreateAccount} path="/:ledger/create-account" />
                   <${ImportAccount} path="/:ledger/import-account" />
                   <${Account} path="/:ledger/:address" />

diff --git a/packages/ui/src/components/ContactList.ts → packages/ui/src/pages/ContactsPage.ts b/packages/ui/src/components/ContactList.ts → packages/ui/src/pages/ContactsPage.ts
@@ -1,14 +1,15 @@
 import { FunctionalComponent } from 'preact';
 import { html } from 'htm/preact';
 import { useState, useEffect } from 'preact/hooks';
+import { Link } from 'preact-router';
 import { JsonRpcMethod } from '@algosigner/common/messaging/types';
 
 import { sendMessage } from 'services/Messaging';
 
 import ContactPreview from 'components/ContactPreview';
 import algosdk from 'algosdk';
 
-const ContactList: FunctionalComponent = () => {
+const ContactsPage: FunctionalComponent = () => {
   const [savingError, setSavingError] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(true);
   const [contacts, setContacts] = useState<Array<any>>([]);
@@ -123,81 +124,93 @@ const ContactList: FunctionalComponent = () => {
   }
 
   return html`
-    ${modalStatus &&
-    html`
-      <div class="modal is-active">
-        <div class="modal-background"></div>
-        <div class="modal-content">
-          <div class="box">
-            <div class="has-text-centered mb-4 is-size-5">
-              <b>${modalTitle}</b>
-            </div>
-            ${modalStatus !== 'delete' &&
-            html`
-              <input
-                class="input mb-4"
-                id="contactName"
-                placeholder="Contact name"
-                maxlength="32"
-                value=${newName}
-                onInput=${(e) => setNewName(e.target.value)}
-              />
-              <textarea
-                class="textarea has-fixed-size mb-4"
-                id="contactAddress"
-                placeholder="Contact address"
-                maxlength="58"
-                rows="2"
-                value=${newAddress}
-                onInput=${(e) => setNewAddress(e.target.value)}
-              />
-              ${newName.includes('.') &&
+    ${
+      modalStatus &&
+      html`
+        <div class="modal is-active">
+          <div class="modal-background"></div>
+          <div class="modal-content">
+            <div class="box">
+              <div class="has-text-centered mb-4 is-size-5">
+                <b>${modalTitle}</b>
+              </div>
+              ${modalStatus !== 'delete' &&
               html`
-                <p class="has-text-justified mb-4">
-                  Note: Please refrain from using namespace aliases as Contacts won't be validated
-                  against the namespace provider.
-                </p>
+                <input
+                  class="input mb-4"
+                  id="contactName"
+                  placeholder="Contact name"
+                  maxlength="32"
+                  value=${newName}
+                  onInput=${(e) => setNewName(e.target.value)}
+                />
+                <textarea
+                  class="textarea has-fixed-size mb-4"
+                  id="contactAddress"
+                  placeholder="Contact address"
+                  maxlength="58"
+                  rows="2"
+                  value=${newAddress}
+                  onInput=${(e) => setNewAddress(e.target.value)}
+                />
+                ${newName.includes('.') &&
+                html`
+                  <p class="has-text-justified mb-4">
+                    Note: Please refrain from using namespace aliases as Contacts won't be validated
+                    against the namespace provider.
+                  </p>
+                `}
+                <button
+                  class="button is-link is-fullwidth ${loading ? 'is-loading' : ''}"
+                  id="authButton"
+                  disabled=${disabled}
+                  onClick=${() => saveContact()}
+                >
+                  Save contact
+                </button>
               `}
-              <button
-                class="button is-link is-fullwidth ${loading ? 'is-loading' : ''}"
-                id="authButton"
-                disabled=${disabled}
-                onClick=${() => saveContact()}
-              >
-                Save contact
-              </button>
-            `}
-            ${modalStatus === 'delete' &&
-            html`
-              <${ContactPreview}
-                contact="${{ name: newName, address: newAddress }}"
-                className="mb-4"
-              />
-              <button
-                class="button is-danger is-fullwidth ${loading ? 'is-loading' : ''}"
-                id="authButton"
-                disabled=${disabled}
-                onClick=${() => deleteContact()}
-              >
-                Delete contact
-              </button>
-            `}
-            ${savingError &&
-            !loading &&
-            html`
-              <div class="has-text-centered mt-2 px-4" style="overflow-wrap: break-word;">
-                <span>${savingError}</span>
-              </div>
-            `}
+              ${modalStatus === 'delete' &&
+              html`
+                <${ContactPreview}
+                  contact="${{ name: newName, address: newAddress }}"
+                  className="mb-4"
+                />
+                <button
+                  class="button is-danger is-fullwidth ${loading ? 'is-loading' : ''}"
+                  id="authButton"
+                  disabled=${disabled}
+                  onClick=${() => deleteContact()}
+                >
+                  Delete contact
+                </button>
+              `}
+              ${savingError &&
+              !loading &&
+              html`
+                <div class="has-text-centered mt-2 px-4" style="overflow-wrap: break-word;">
+                  <span>${savingError}</span>
+                </div>
+              `}
+            </div>
           </div>
+          <button class="modal-close is-large" aria-label="close" onClick=${() => closeModal()} />
         </div>
-        <button class="modal-close is-large" aria-label="close" onClick=${() => closeModal()} />
-      </div>
-    `}
+      `
+    }
     <div
-      class="box is-flex pt-2"
+      class="is-flex pt-2 px-4"
       style="overflow-wrap: break-word; flex-direction: column; max-height: 520px;"
     >
+      <${Link}
+        id="goBack"
+        class="has-text-centered has-text-grey-dark"
+        style="cursor: pointer; min-width: 24px; position: absolute; top: 3.5em; left: 1em;"
+        href=${'/wallet'}
+      >
+        <span class="icon">
+          <i class="fas fa-arrow-left" aria-hidden="true" />
+        </span>
+      </${Link}>
       <b class="has-text-centered mb-3 is-size-5">Contact List</b>
       <i
         id="newContact"
@@ -206,21 +219,26 @@ const ContactList: FunctionalComponent = () => {
         aria-label="new contact"
         onClick=${() => openEditModal()}
       ></i>
-      ${loading &&
-      html`
-        <div style="padding: 10px 0;">
-          <span class="loader" style="position: relative; left: calc(50% - 0.5em);"></span>
-        </div>
-      `}
-      ${!contacts.length &&
-      !loading &&
-      html`
-        <div class="has-text-centered">
-          <span>There are no contacts saved yet.</span>
-        </div>
-      `}
-      <div style="overflow-y: auto; margin-right: -0.5rem;" class="pr-2">
+      ${
+        loading &&
+        html`
+          <div style="padding: 10px 0;">
+            <span class="loader" style="position: relative; left: calc(50% - 0.5em);"></span>
+          </div>
+        `
+      }
+      ${
+        !contacts.length &&
+        !loading &&
+        html`
+          <div class="has-text-centered">
+            <span>There are no contacts saved yet.</span>
+          </div>
+        `
+      }
+      <div style="overflow-y: auto; margin-right: -0.5rem; max-height: 80vh;" class="pr-2">
         ${contacts.map(
+          // Scrollable content
           (c) =>
             html`<i
                 class="far fa-trash-alt px-1"
@@ -255,4 +273,4 @@ const ContactList: FunctionalComponent = () => {
   `;
 };
 
-export default ContactList;
+export default ContactsPage;
diff --git a/packages/ui/src/pages/SendAlgos.ts b/packages/ui/src/pages/SendAlgos.ts
@@ -416,7 +416,7 @@ const SendAlgos: FunctionalComponent = (props: any) => {
               html`<span style="position: absolute; left: 90%; bottom: 43%;" class="loader" />`}
               ${orderedAliases.length > 0 &&
               html`
-                ${namesWithCollisions.length &&
+                ${namesWithCollisions.length !== 0 &&
                 html`
                   <i
                     class="fas fa-exclamation-triangle px-1 has-text-link has-tooltip-arrow has-tooltip-left has-tooltip-fade"