multi: Add ledger ui.

app/components/views/GetStartedPage/PreCreateWallet/CreateLedgerWalletForm/CreateLedgerWalletForm.jsx

@@ -0,0 +1,79 @@
+import { FormattedMessage as T, defineMessages } from "react-intl";
+import { TextInput } from "inputs";
+import { KeyBlueButton, InvisibleButton } from "buttons";
+import styles from "./CreateLedgerWalletForm.module.css";
+import { Documentation } from "shared";
+
+const messages = defineMessages({
+  walletNameInputPlaceholder: {
+    id: "createLedgerWallet.walletNameInput.placeholder",
+    defaultMessage: "Choose a name for your Ledger Wallet"
+  },
+  walletNameInputLabel: {
+    id: "createLedgerWallet.walletNameInput.label",
+    defaultMessage: "Wallet Name"
+  },
+  messageWalletDupeNameError: {
+    id: "createLedgerWallet.dupeWalletName.error",
+    defaultMessage: "Please choose an unused wallet name"
+  }
+});
+
+const CreateLedgerWalletForm = ({
+  createWallet,
+  hideCreateWalletForm,
+  newWalletName,
+  walletNameError,
+  onChangeCreateWalletName,
+  hasFailedAttemptName,
+  intl
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        <T
+          id="createLedgerWallet.title"
+          m="Create a Ledger-backed Decrediton Wallet"
+        />
+      </div>
+      <div className={styles.grid}>
+        <Documentation name="PreCreateLedgerWallet1" />
+        <Documentation name="PreCreateLedgerWallet2" />
+        <T id="createLedgerWallet.createAWallet" m="Create a Wallet" />
+      </div>
+
+      <div>
+        <TextInput
+          newBiggerFontStyle
+          id="walletNameInput"
+          required
+          invalid={walletNameError}
+          invalidMessage={intl.formatMessage(
+            messages.messageWalletDupeNameError
+          )}
+          value={newWalletName}
+          onChange={(e) => onChangeCreateWalletName(e.target.value)}
+          label={intl.formatMessage(messages.walletNameInputLabel)}
+          placeholder={intl.formatMessage(messages.walletNameInputPlaceholder)}
+          showErrors={hasFailedAttemptName}
+          className={styles.walletNameInput}
+        />
+
+        <div className={styles.buttonContrainer}>
+          <InvisibleButton
+            onClick={hideCreateWalletForm}
+            className={styles.cancelBt}>
+            <T id="createLedgerWallet.cancel" m="Cancel" />
+          </InvisibleButton>
+          <KeyBlueButton
+            onClick={createWallet}
+            classNames={styles.createWalletBt}>
+            <T id="createLedgerWallet.createWallet" m="Create Wallet" />
+          </KeyBlueButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateLedgerWalletForm;

app/components/views/GetStartedPage/PreCreateWallet/CreateLedgerWalletForm/CreateLedgerWalletForm.module.css

@@ -0,0 +1,59 @@
+.container {
+  width: 764px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 30rem);
+  grid-column-gap: 76px;
+  font-size: 13px;
+  line-height: 17px;
+  color: var(--grey-7);
+  margin: 38px 0 32px 0;
+}
+
+.title {
+  font-size: 27px;
+  line-height: 34px;
+  color: var(--grey-7);
+  width: 32rem;
+}
+
+.textToggle {
+  font-size: 13px;
+  line-height: 16px;
+  height: 29px;
+  grid-column: 1;
+  margin-top: 20px;
+}
+
+.textToggleChild {
+  padding: 6px 31px;
+}
+
+.walletNameInput,
+.walletNameInput input {
+  width: 279px !important;
+}
+
+.buttonContrainer {
+  width: 279px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.cancelBt,
+.createWalletBt {
+  height: 44px;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    width: 355px;
+  }
+
+  .grid {
+    grid-template-columns: 30rem;
+  }
+}

app/components/views/GetStartedPage/PreCreateWallet/CreateLedgerWalletForm/index.js

@@ -0,0 +1 @@
+export { default } from "./CreateLedgerWalletForm";

app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/LedgerLoaderBarContainer.jsx

@@ -0,0 +1,33 @@
+import { FormattedMessage as T } from "react-intl";
+import styles from "./LedgerLoaderBarContainer.module.css";
+import { useLedgerLoaderBarContainer } from "./hooks";
+
+const LedgerLoaderBarContainer = ({ loaderBar }) => {
+  const { ledgerDevice, deviceLabel } = useLedgerLoaderBarContainer();
+  return ledgerDevice ? (
+    <div className={styles.loaderBarContainer}>
+      <div className={styles.deviceStatus}>
+        <span className={styles.deviceLabel}>
+          <T
+            id="ledgerLoaderBarContainer.Connected"
+            m="{label} Ledger"
+            values={{
+              label: deviceLabel ? (
+                deviceLabel
+              ) : (
+                <T id="ledgerLoaderBarContainer.deviceLabel" m="New DCR" />
+              )
+            }}
+          />
+        </span>
+        <span> | </span>
+        <span className={styles.connected}>
+          <T id="ledgerLoaderBarContainer.connected" m="Connected" />
+        </span>
+      </div>
+      <div className={styles.loaderBar}>{loaderBar}</div>
+    </div>
+  ) : null;
+};
+
+export default LedgerLoaderBarContainer;

app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/LedgerLoaderBarContainer.module.css

@@ -0,0 +1,63 @@
+.loaderBarContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 25px center;
+  background-image: var(--tz-create-bt);
+}
+
+.loaderBar div {
+  border-radius: 0;
+}
+
+.loaderBar,
+.loaderBar > div {
+  height: 60px;
+  background: linear-gradient(
+    270deg,
+    var(--display-wallet-gradient-selected-right),
+    var(--input-color)
+  );
+  color: var(--white-button-text);
+  padding-left: 1rem;
+  font-size: 1.1rem;
+}
+
+.loaderBar > div > div:nth-of-type(1) {
+  grid-column: 2;
+  grid-row: 1;
+  align-items: center;
+  display: flex;
+  padding-left: 1rem;
+}
+.loaderBar > div > div:nth-of-type(2n) {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.loaderBar > div > div:nth-of-type(2n) > div {
+  background-size: 2rem;
+  background-position: center;
+}
+
+.deviceStatus {
+  font-size: 13px;
+  line-height: 16px;
+  padding-left: 55px;
+}
+
+.deviceLabel {
+  font-weight: 600;
+  color: var(--main-dark-blue);
+}
+
+.connected {
+  color: var(--accent-blue);
+}

app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/hooks.js

@@ -0,0 +1,10 @@
+import { useSelector } from "react-redux";
+import { useDaemonStartup } from "hooks";
+import * as sel from "selectors";
+
+export const useLedgerLoaderBarContainer = () => {
+  const { ledgerDevice } = useDaemonStartup();
+  const deviceLabel = useSelector(sel.ledgerLabel);
+
+  return { ledgerDevice, deviceLabel };
+};

app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/index.js

@@ -0,0 +1 @@
+export { default } from "./LedgerLoaderBarContainer";

app/components/views/GetStartedPage/PreCreateWallet/PreCreateWallet.jsx

@@ -1,9 +1,11 @@
 import { FormattedMessage as T } from "react-intl";
 import CreateWalletForm from "./CreateWalletForm";
 import CreateTrezorWalletForm from "./CreateTrezorWalletForm";
+import CreateLedgerWalletForm from "./CreateLedgerWalletForm";
 import { usePreCreateWallet } from "./hooks";
 import { injectIntl } from "react-intl";
 import NoDevicePage from "views/TrezorPage/NoDevicePage";
+import { NoDevicePage as NoDevicePageLedger } from "views/LedgerPage/NoDevicePage";
 import styles from "./PreCreateWallet.module.css";
 import { InvisibleButton } from "buttons";
 
@@ -15,7 +17,8 @@ const PreCreateWallet = ({
   isCreateNewWallet,
   onShowCreateWallet,
   isTrezor,
-  creatingWallet
+  creatingWallet,
+  isLedger
 }) => {
   const {
     availableWallets,
@@ -38,14 +41,16 @@ const PreCreateWallet = ({
     toggleDisableCoinTypeUpgrades,
     gapLimit,
     setGapLimit,
-    connectTrezor
+    connectTrezor,
+    connectLedger,
   } = usePreCreateWallet({
     onSendContinue,
     onSendBack,
     onSendError,
     isCreateNewWallet,
     onShowCreateWallet,
-    isTrezor
+    isTrezor,
+    isLedger
   });
 
   return isTrezor && !trezorDevice ? (
@@ -81,7 +86,45 @@ const PreCreateWallet = ({
         disableCoinTypeUpgrades,
         toggleDisableCoinTypeUpgrades,
         gapLimit,
-        setGapLimit
+        setGapLimit,
+        isLedger
+      }}
+    />
+  ) : isLedger && !ledgerDevice ? (
+    <div className={styles.noDeviceContainer}>
+      <NoDevicePageLedger onConnect={connectLedger} />
+      <InvisibleButton onClick={hideCreateWalletForm} className={styles.backBt}>
+        <T id="preCreateWallet.noDevice.back" m="Back" />
+      </InvisibleButton>
+    </div>
+  ) : isLedger ? (
+    <CreateLedgerWalletForm
+      {...{
+        selectedWallet: availableWallets[0],
+        availableWallets,
+        isCreateNewWallet,
+        newWalletName,
+        hasFailedAttemptName,
+        hasFailedAttemptPubKey,
+        getDaemonSynced,
+        isWatchingOnly,
+        isTrezor,
+        walletMasterPubKey,
+        masterPubKeyError,
+        walletNameError,
+        isSPV,
+        creatingWallet,
+        hideCreateWalletForm,
+        onChangeCreateWalletName,
+        createWallet,
+        toggleWatchOnly,
+        onChangeCreateWalletMasterPubKey,
+        intl,
+        disableCoinTypeUpgrades,
+        toggleDisableCoinTypeUpgrades,
+        gapLimit,
+        setGapLimit,
+        isLedger
       }}
     />
   ) : (
@@ -110,7 +153,8 @@ const PreCreateWallet = ({
         disableCoinTypeUpgrades,
         toggleDisableCoinTypeUpgrades,
         gapLimit,
-        setGapLimit
+        setGapLimit,
+        isLedger
       }}
     />
   );