diff --git a/app/components/shared/Collapse.jsx b/app/components/shared/Collapse.jsx new file mode 100644 index 0000000000..38496cc47b --- /dev/null +++ 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 ( +
+
setShow(!show)}>{header}
+
setShow(!show)} + /> + {show &&
{content}
} +
+ ); +}; + +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 index 3a5920e937..c0f9a3b73d 100644 --- 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 index eea71dabce..dd43dce231 100644 --- 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 index ba5e46683c..8c778f480e 100644 --- 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 index 37f2fa5359..3d0ebf3c0e 100644 --- a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm.jsx +++ b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm.jsx @@ -1,12 +1,9 @@ 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({ @@ -14,6 +11,21 @@ const messages = defineMessages({ 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 = ({
) : ( -
-
-
- -
+
+
+
+
- )} +
+ )}
- + {!isCreateNewWallet ? ( + + + + ) : ( + + )}
{!isCreateNewWallet && ( - <> -
-
- -
-
-
- } - notEnabledText={} - /> -
-
-
-
-
- -
-
-
- } - notEnabledText={} - /> -
- - - -
-
-
-
- -
-
-
- } - notEnabledText={} - /> -
-
-
- {isWatchingOnly && ( -
-
- -
-
- - onChangeCreateWalletMasterPubKey(e.target.value) - } - placeholder={intl.formatMessage( - messages.messageWalletMasterPubKey +
+ + } + content={ + <> +
+ } + id="watchonly" + description={intl.formatMessage( + messages.messageWalletWatchOnlyDescription + )} + checked={isWatchingOnly} + onChange={toggleWatchOnly} + /> + {isWatchingOnly && ( +
+ +
+ + onChangeCreateWalletMasterPubKey(e.target.value) + } + placeholder={intl.formatMessage( + messages.messageWalletMasterPubKey + )} + showErrors={hasFailedAttemptPubKey || masterPubKeyError} + invalid={masterPubKeyError} + invalidMessage={intl.formatMessage( + messages.messageWalletMasterPubkeyError + )} + /> +
+
)} - showErrors={hasFailedAttemptPubKey || masterPubKeyError} - invalid={masterPubKeyError} - invalidMessage={intl.formatMessage( - messages.messageWalletMasterPubkeyError - )} - /> -
-
- )} - +
+
+ + + + + + + } + id="trezor" + description={intl.formatMessage( + messages.messageWalletTrezorDescription, + { + link: ( + + docs.decred.org + + ) + } + )} + checked={isTrezor} + onChange={toggleTrezor} + /> +
+
+ } + id="privacy" + checked={isPrivacy} + onChange={toggleIsPrivacy} + /> +
+ + } + /> +
)}