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 = ({
) : (
-