[launcher] style: improve messaging on restore wallet form (#3032)

decred · Jan 5, 2021 · 2912ea7 · 2912ea7
1 parent 74e2fb0
commit 2912ea7
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 91 deletions.
diff --git a/app/components/shared/Collapse.jsx b/app/components/shared/Collapse.jsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import styles from "./shared.module.css";
+import { classNames } from "pi-ui";
+import PropTypes from "prop-types";
+
+const Collapse = ({ isInfo, header, content }) => {
+  const [show, setShow] = useState(false);
+  return (
+    <div className={classNames(styles.collapse, isInfo && styles.info)}>
+      <div onClick={() => setShow(!show)}>{header}</div>
+      <div
+        className={classNames(styles.readMoreIcon, show && styles.active)}
+        onClick={() => setShow(!show)}
+      />
+      {show && <div className={styles.content}>{content}</div>}
+    </div>
+  );
+};
+
+Collapse.propTypes = {
+  header: PropTypes.node.isRequired,
+  content: PropTypes.node.isRequired,
+  isInfo: PropTypes.bool
+};
+
+export default Collapse;
diff --git a/app/components/shared/index.js b/app/components/shared/index.js
@@ -24,4 +24,5 @@ export { default as TabsHeader } from "./TabsHeader/TabsHeader";
 export { default as PrivacyForm } from "./PrivacyForm/PrivacyForm";
 export { default as Log } from "./Log/Log";
 export { default as SendTransaction } from "./SendTransaction/SendTransaction";
+export { default as Collapse } from "./Collapse";
 export * from "./RoutedTabsHeader";
diff --git a/app/components/shared/shared.module.css b/app/components/shared/shared.module.css
@@ -29,3 +29,42 @@
   font-size: 13px;
   color: var(--modal-text);
 }
+
+.collapse {
+  background-color: var(--info-message-background);
+  display: grid;
+  grid-template-columns: 30fr 1fr;
+  grid-row-gap: 10px;
+  padding: 10px 10px 10px 20px;
+  cursor: pointer;
+}
+
+.collapse.info {
+  background-image: var(--tickets-info-icon);
+  background-position-x: 10px;
+  background-position-y: 10px;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  padding-left: 40px;
+}
+
+.collapse > .content {
+  width: 100%;
+  cursor: default;
+}
+
+.collapse > .readMoreIcon {
+  background-image: var(--arrow-down-mid-blue-icon);
+  background-position-x: right;
+  background-position-y: 8px;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  height: 15px;
+  width: 12px;
+  margin-left: auto;
+}
+
+.collapse > .readMoreIcon.active {
+  transform: rotate(180deg);
+  background-position-y: 0px;
+}
diff --git a/app/components/views/GetStartedPage/GetStarted.module.css b/app/components/views/GetStartedPage/GetStarted.module.css
@@ -103,8 +103,24 @@
 
 .daemonLongInput {
   padding-left: 20px;
-  float: left;
-  width: 450px;
+  width: 350px;
+}
+
+.advancedOption {
+  margin: 10px;
+}
+
+.advancedOption > .extra {
+  margin: 15px 23px 30px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+.advancedOptions {
+  height: 100%;
+  margin-bottom: 20px;
+  max-width: 600px;
 }
 
 .pageBody.getstarted {
@@ -836,6 +852,10 @@
   margin-top: 14em;
 }
 
+.trezorDocs {
+  color: var(--link-color);
+}
+
 .launchError {
   margin: 0 300px 20px 0;
   color: var(--error-text-color);

diff --git a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm.jsx b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm.jsx
@@ -1,19 +1,31 @@
 import { FormattedMessage as T, defineMessages } from "react-intl";
 import { TextInput } from "inputs";
-import {
-  KeyBlueButton,
-  InvisibleButton,
-  ToggleSwitch
-} from "buttons";
+import { KeyBlueButton, InvisibleButton } from "buttons";
+import { Tooltip, Collapse, ExternalLink } from "shared";
 import { NewSeedTabMsg, RestoreTabMsg } from "../messages";
-import { classNames } from "pi-ui";
+import { classNames, Checkbox } from "pi-ui";
 import styles from "../GetStarted.module.css";
 
 const messages = defineMessages({
   messageWalletNamePlaceholder: {
     id: "createwallet.walletname.placehlder",
     defaultMessage: "Choose a Name"
   },
+  messageWalletNameTooltip: {
+    id: "createwallet.walletname.tooltip",
+    defaultMessage:
+      "The name is used to identify your wallet. Restoring a wallet does not require the name to match the previous wallet name."
+  },
+  messageWalletWatchOnlyDescription: {
+    id: "createwallet.watchonly.description",
+    defaultMessage:
+      "A watch-only wallet has limited functionality. It can only be used to view the balance and monitor transaction history. You won't be able to spend any DCR associated with this wallet."
+  },
+  messageWalletTrezorDescription: {
+    id: "createwallet.trezor.description",
+    defaultMessage:
+      "Trezor is a hardware wallet. For more information, visit {link}"
+  },
   messageWalletMasterPubKey: {
     id: "createwallet.walletpubkey.placeholder",
     defaultMessage: "Master Pub Key"
@@ -59,16 +71,22 @@ const CreateWalletForm = ({
         </div>
       </div>
     ) : (
-        <div className={styles.newWalletTitleArea}>
-          <div className={classNames(styles.walletIconSmall, styles.restore)} />
-          <div className={styles.newWalletTitle}>
-            <RestoreTabMsg />
-          </div>
+      <div className={styles.newWalletTitleArea}>
+        <div className={classNames(styles.walletIconSmall, styles.restore)} />
+        <div className={styles.newWalletTitle}>
+          <RestoreTabMsg />
         </div>
-      )}
+      </div>
+    )}
     <div className={styles.daemonRow}>
       <div className={styles.daemonLabel}>
-        <T id="createwallet.walletname.label" m="Wallet Name" />
+        {!isCreateNewWallet ? (
+          <Tooltip text={intl.formatMessage(messages.messageWalletNameTooltip)}>
+            <T id="createwallet.walletname.label" m="Wallet Name" />
+          </Tooltip>
+        ) : (
+          <T id="createwallet.walletname.label" m="Wallet Name" />
+        )}
       </div>
       <div className={styles.daemonInput}>
         <TextInput
@@ -87,83 +105,93 @@ const CreateWalletForm = ({
       </div>
     </div>
     {!isCreateNewWallet && (
-      <>
-        <div className={styles.daemonRow}>
-          <div className={styles.daemonLabel}>
-            <T id="createwallet.walletOnly.label" m="Watch only" />
-          </div>
-          <div className={styles.daemonInput}>
-            <div className={styles.walletSwitch}>
-              <ToggleSwitch
-                enabled={isWatchingOnly}
-                onClick={toggleWatchOnly}
-                enabledText={<T id="watchOnly.enabled" m="Watch Only" />}
-                notEnabledText={<T id="watchOnly.disabled" m="Normal" />}
-              />
-            </div>
-          </div>
-        </div>
-        <div className={styles.daemonRow}>
-          <div className={styles.daemonLabel}>
-            <T id="createwallet.isTrezor.label" m="Trezor" />
-          </div>
-          <div className={styles.daemonInput}>
-            <div className={styles.walletSwitch}>
-              <ToggleSwitch
-                enabled={isTrezor}
-                onClick={toggleTrezor}
-                enabledText={<T id="createWallet.restore.trezor.enabled" m="Enabled" />}
-                notEnabledText={<T id="createWallet.restore.trezor.disabled" m="Disabled" />}
-              />
-            </div>
-            <span onClick={onShowTrezorConfig} className={styles.whatsnew}>
-              <T id="createWallet.isTrezor.setupLink" m="(setup device)" />
-            </span>
-          </div>
-        </div>
-        <div className={styles.daemonRow}>
-          <div className={styles.daemonLabel}>
-            <T id="privacy.label" m="Privacy" />
-          </div>
-          <div className={styles.daemonInput}>
-            <div className={styles.walletSwitch}>
-              <ToggleSwitch
-                enabled={isPrivacy}
-                onClick={toggleIsPrivacy}
-                enabledText={<T id="privacy.label" m="Privacy" />}
-                notEnabledText={<T id="watchOnly.disabled" m="Normal" />}
-              />
-            </div>
-          </div>
-        </div>
-        {isWatchingOnly && (
-          <div className={styles.daemonRow}>
-            <div className={styles.daemonLabel}>
-              <T
-                id="createwallet.walletmasterpubkey.label"
-                m="Master Pub Key"
-              />
-            </div>
-            <div className={styles.daemonLongInput}>
-              <TextInput
-                required
-                value={walletMasterPubKey}
-                onChange={(e) =>
-                  onChangeCreateWalletMasterPubKey(e.target.value)
-                }
-                placeholder={intl.formatMessage(
-                  messages.messageWalletMasterPubKey
+      <div className={classNames(styles.daemonRow, styles.advancedOptions)}>
+        <Collapse
+          header={
+            <T id="createwallet.advancedOptions.label" m="Advanced Options" />
+          }
+          content={
+            <>
+              <div className={styles.advancedOption}>
+                <Checkbox
+                  label={<T id="createwallet.watchOnly.label" m="Watch only" />}
+                  id="watchonly"
+                  description={intl.formatMessage(
+                    messages.messageWalletWatchOnlyDescription
+                  )}
+                  checked={isWatchingOnly}
+                  onChange={toggleWatchOnly}
+                />
+                {isWatchingOnly && (
+                  <div className={styles.extra}>
+                    <T
+                      id="createwallet.walletmasterpubkey.label"
+                      m="Master Pub Key"
+                    />
+                    <div className={styles.daemonLongInput}>
+                      <TextInput
+                        required
+                        value={walletMasterPubKey}
+                        onChange={(e) =>
+                          onChangeCreateWalletMasterPubKey(e.target.value)
+                        }
+                        placeholder={intl.formatMessage(
+                          messages.messageWalletMasterPubKey
+                        )}
+                        showErrors={hasFailedAttemptPubKey || masterPubKeyError}
+                        invalid={masterPubKeyError}
+                        invalidMessage={intl.formatMessage(
+                          messages.messageWalletMasterPubkeyError
+                        )}
+                      />
+                    </div>
+                  </div>
                 )}
-                showErrors={hasFailedAttemptPubKey || masterPubKeyError}
-                invalid={masterPubKeyError}
-                invalidMessage={intl.formatMessage(
-                  messages.messageWalletMasterPubkeyError
-                )}
-              />
-            </div>
-          </div>
-        )}
-      </>
+              </div>
+              <div className={styles.advancedOption}>
+                <Checkbox
+                  label={
+                    <>
+                      <T id="createwallet.isTrezor.label" m="Trezor" />
+                      <span
+                        className={styles.whatsnew}
+                        onClick={onShowTrezorConfig}>
+                        <T
+                          id="createWallet.isTrezor.setupLink"
+                          m="(setup device)"
+                        />
+                      </span>
+                    </>
+                  }
+                  id="trezor"
+                  description={intl.formatMessage(
+                    messages.messageWalletTrezorDescription,
+                    {
+                      link: (
+                        <ExternalLink
+                          className={styles.trezorDocs}
+                          href="https://docs.decred.org/wallets/decrediton/trezor/">
+                          docs.decred.org
+                        </ExternalLink>
+                      )
+                    }
+                  )}
+                  checked={isTrezor}
+                  onChange={toggleTrezor}
+                />
+              </div>
+              <div className={styles.advancedOption}>
+                <Checkbox
+                  label={<T id="privacy.label" m="Privacy" />}
+                  id="privacy"
+                  checked={isPrivacy}
+                  onChange={toggleIsPrivacy}
+                />
+              </div>
+            </>
+          }
+        />
+      </div>
     )}
     <div className={styles.daemonRow}>
       <KeyBlueButton onClick={createWallet}>