Merge pull request #662 from near/account-export-ui-improvements

style: UI/UX improvements and cosmatic changes on account-export
near · Jan 27, 2023 · c047895 · c047895
2 parents 94773c6 + f60d5bc
commit c047895
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 16 deletions.
diff --git a/packages/account-export/src/lib/components/AccountSelect.tsx b/packages/account-export/src/lib/components/AccountSelect.tsx
@@ -1,7 +1,9 @@
+import type { ReactElement } from "react";
 import React, { Fragment } from "react";
 import { translate } from "@near-wallet-selector/core";
 import { ModalHeader } from "./ModalHeader";
 import type { ExportAccountData } from "./ExportAccount";
+import { ACCESS_KEY_TYPES } from "./ExportAccount";
 
 interface AccountSelectProps {
   onCloseModal: () => void;
@@ -14,9 +16,42 @@ interface AccountSelectProps {
   isLoading: boolean;
 }
 
+interface WarningLabelProp {
+  hasBalance: boolean;
+  type: string;
+}
+
 const LOADING_ICON_DATA_URL =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAR3SURBVHgBpVZ9aJVVGH+e55z33bi7zY9hMz+yMAeNoEIq6A9ZRKQWEsQNFIIpsf5Y9E+GsD9iBEEDMUkDa6ShRKKZYIWiRkaKaUGUGCKOTGMF84PNO99773vOefq9720yK5ZzD/dwPt/nd37P17lEk5Qnuz9roUkKT7T5bNe+QjTNLCHv24h1Xgh+OmtwQYPH2jUXwlnW9NRooqePfLS6MmmQ59cdeEGJlkJZA5MGVecoAwghBYZTVY9ftuaDSy8x8w9fbFl95JZAXuw9dmelkvRAyXxS7wMFryG4bIyWZiqzPgMhaFfGfn3NY3AZG9sPf/Dy8HidZvxkZc/h1pqnPlKey6yspMqUd9jVAEYY6RCGDQTwjGDwGTgAlbwRijV1C9vanz577tT+6r+YrOz5rlXFrQ/qZ+FbDxCfXS5oOgxln4v473f3rbgwdn7FK5/MCaH2eAg6X8g3K2iBMTiBkNJVKbod+ze9mgPZsY/UaicYzCE1HgpZc558olCTjTvWLxv9p1n3bV45iO7T5zq3TU9j9xTOLwQ5D9t48aEYrtGj2P/2BpNS78nZJoRdlDsYd8vphz273lqyhW5Rnlnz3hOe6SEwghvxPUMTVfYe2rpuUOqOkZeIxdSbsSJ8eTIAmXy5tftrMPkzi0C4B2ZDNHp+INvLQURkhYiJ6gDGko376DbEJ8k3mcnYBSeSM2ptL/XGsurNnxfnDIQNwCKADO1845Ef6Tbk0M51g4joMgncDyBmkrtsNEMQovcDxGYsGL2yDNAUxPv0VySs4yxhfeYbabJg0Awg+ILylEB6nKMpSOp0WCR1+QSuD4ELljNDEfyRrdXPCU1BTEgD7pyOzVmC2iBm0KgYAMCEeXovoClIjdKiVdQ3FYbzmatxWRqMPcNsDHyfNWskWk5TkJhNEwVyxA6hLL5clLJsW7voFxa6LiR5CCOeWzo3XFxKtyEdy3tnp7VahAoDp6PEVGvJye09l3P7K9k9WQijXBv4B6WG+0pvD0ybFEBHZ6OPh+/OGaBsIvNRAGp/ZHv1jJeon+omszBkFsr3FhsLB7rev3JLQKVSyfjmaW2BJSavDlqR7c5VrR+4AbLttbkXMehH7gjA8gZiD/tq+Or/ABZ3dUW/J62LcPUGcrW8pKSVFAg6cHz3O0l25qZHa/XGwWPg9aAwwzdZAaDX+7tbNsMYf5+bpaUS0dDQEF8rtsUxCbI5e5KRzGhBMiqNxllKju7d8NOYXjseRBytQngcVDL3wD9H+7vf3YS7mnnzqrZpwSxrwkh04cpM5NTMyJdHbIgaESyxJ6tZ5cDbw3qd0tqVCp25Se/4yYdr5/zm/ehjwvpxZHgN0Wlub0/Yt7awdykqRYFHy6NUQVrBd4o6p6ngrVL2Bo8ksuJqoXzq9Ln9m6rj9U74b6Wjo8OeP082aY5NUxRsYzwDkeFsU+MdUU3U4PG0QtbahqhadDMuHTy4fvS/9EwIUpdeuW/ZiShOipFxURRbNdWETFMRZrCFlEZGkuPHdycTafgLExNiI6YfUpcAAAAASUVORK5CYII=";
 
+const getWarningLabel = ({
+  hasBalance,
+  type,
+}: WarningLabelProp): ReactElement | null => {
+  if (type === ACCESS_KEY_TYPES.UNKNOWN) {
+    return (
+      <span className="error">
+        {translate("modal.exportAccounts.selectAccounts.error")}
+      </span>
+    );
+  }
+  if (type === ACCESS_KEY_TYPES.LEDGER) {
+    return (
+      <span className="warning">
+        {translate("modal.exportAccounts.selectAccounts.warningLedger")}
+      </span>
+    );
+  }
+  if (!hasBalance) {
+    return (
+      <span className="warning">
+        {translate("modal.exportAccounts.selectAccounts.noBalance")}
+      </span>
+    );
+  }
+  return null;
+};
+
 export const AccountSelect: React.FC<AccountSelectProps> = ({
   onCloseModal,
   onBack,
@@ -95,7 +130,7 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
                 {translate("modal.exportAccounts.selectAccounts.unavailable")}
               </span>
               <div className="account-selection">
-                {disabledAccounts.map(({ accountId }) => (
+                {disabledAccounts.map(({ accountId, type, hasBalance }) => (
                   <div className="account-selection-row" key={accountId}>
                     <div className="checkbox">
                       <input
@@ -109,7 +144,10 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
                         value={accountId}
                         disabled
                       />
-                      <label htmlFor={accountId}> {accountId}</label>
+                      <label htmlFor={accountId}>
+                        <span>{accountId}</span>
+                        {getWarningLabel({ hasBalance, type })}
+                      </label>
                     </div>
                   </div>
                 ))}

diff --git a/packages/account-export/src/lib/components/ExportAccount.tsx b/packages/account-export/src/lib/components/ExportAccount.tsx
@@ -43,7 +43,7 @@ const EXPORT_ACCOUNT_STEPS = {
   COMPLETE: "COMPLETE",
 };
 
-const ACCESS_KEY_TYPES = {
+export const ACCESS_KEY_TYPES = {
   LEDGER: "Ledger",
   FULL_ACCESS_KEY: "Full Access Key",
   MULTI_SIG: "Multi-Sig",

diff --git a/packages/account-export/src/lib/styles.css b/packages/account-export/src/lib/styles.css
@@ -34,9 +34,10 @@
 
 .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton:disabled,
 .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton[disabled]{
-  border-color: var(--secondary-button-border-color);
-  background-color: var(--secondary-button-bg-color);
   cursor: not-allowed;
+  background-color: var(--wallet-selector-home-button-bg, var(--home-button-bg));
+  color: #606060;
+  border: none;
 }
 
 
@@ -46,15 +47,14 @@
 }
 
 .checkbox {
-  width: 100%;
   position: relative;
   display: block;
 }
 
 .checkbox label {
   position: relative;
   display: block;
-  padding-left: 50px;
+  padding-left: 40px;
   margin-bottom: 0;
   cursor: pointer;
   color: var(--wallet-selector-heading-color, var(--heading-color));
@@ -111,6 +111,18 @@
 .checkbox input[type="checkbox"]:disabled + label {
   color: var(--wallet-selector-text-color, var(--text-color));
   cursor: not-allowed;
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox input[type="checkbox"]:disabled + label > span.error {
+  color: var(--wallet-selector-error, var(--error));
+  font-size: 10px;
+}
+
+.checkbox input[type="checkbox"]:disabled + label > span.warning {
+  color: #E9B870;
+  font-size: 10px;
 }
 
 .checkbox input[type="checkbox"]:disabled + label::before {
@@ -156,6 +168,7 @@
 
 .account-export {
   height: 100%;
+  margin-top: 15px !important;
 }
 
 .account-export .content {
@@ -185,7 +198,7 @@
   width: 100%;
   max-height: 200px;
   overflow-y: auto;
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 .account-export .account-select-all {
@@ -208,15 +221,20 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  padding: 0 12px;
-  margin-bottom: 24px;
+  padding: 15px 12px;
+  border-bottom: 1px solid #313030;
+}
+
+.account-export .account-selection .account-selection-row label {
+  display: flex;
+  flex-direction: column;
 }
 
 .account-export .passphrase-title {
-  font-size: 14px;
+  font-size: 15px;
   text-align: center;
-  font-weight: 400;
-  color: #c1c1c1;
+  font-weight: 500;
+  color: var(--wallet-selector-text-color, var(--text-color));
   margin: 40px 0 30px;
 }
 
@@ -236,8 +254,9 @@
 }
 
 .account-export .passphrase-label {
-  font-size: 10px;
+  font-size: 12px;
   cursor: copy;
+  color: var(--wallet-selector-text-color, var(--text-color));
 }
 
 .account-export .complete-desc {

diff --git a/packages/core/src/lib/locale/en.json b/packages/core/src/lib/locale/en.json
@@ -75,12 +75,15 @@
         "button": "Get Passphrase",
         "deselectAll": "Deselect All",
         "selectAll": "Select All",
-        "unavailable": "Transfer Unavailable"
+        "unavailable": "Transfer Unavailable",
+        "error": "Account does not exist",
+        "warningLedger": "Ledger support required",
+        "noBalance": "Account not funded"
       },
       "getPassphrase": {
         "title": "Copy Temporary Password",
         "desc": "You’ll need to enter this password when you begin exporting your accounts to a different wallet.",
-        "button": "Transfer Accounts",
+        "button": "Continue",
         "label": "Click to Copy",
         "checkLabel": "I copied or wrote down the password"
       },