+
+
+
+ )
+ }}
+ />
+
+ |
+
+
+
+
+
{loaderBar}
+
+ ) : null;
+};
+
+export default LedgerLoaderBarContainer;
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/LedgerLoaderBarContainer.module.css b/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/LedgerLoaderBarContainer.module.css
new file mode 100644
index 0000000000..db06fe3a11
--- /dev/null
+++ b/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);
+}
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/hooks.js b/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/hooks.js
new file mode 100644
index 0000000000..be2089fb69
--- /dev/null
+++ b/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 };
+};
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/index.js b/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/index.js
new file mode 100644
index 0000000000..0f8e9e04c6
--- /dev/null
+++ b/app/components/views/GetStartedPage/PreCreateWallet/LedgerLoaderBarContainer/index.js
@@ -0,0 +1 @@
+export { default } from "./LedgerLoaderBarContainer";
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/PreCreateWallet.jsx b/app/components/views/GetStartedPage/PreCreateWallet/PreCreateWallet.jsx
index 545a208529..70261cc88d 100644
--- a/app/components/views/GetStartedPage/PreCreateWallet/PreCreateWallet.jsx
+++ b/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 { default 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,
@@ -29,6 +32,7 @@ const PreCreateWallet = ({
walletNameError,
isSPV,
trezorDevice,
+ ledgerDevice,
hideCreateWalletForm,
onChangeCreateWalletName,
createWallet,
@@ -38,14 +42,16 @@ const PreCreateWallet = ({
toggleDisableCoinTypeUpgrades,
gapLimit,
setGapLimit,
- connectTrezor
+ connectTrezor,
+ connectLedger
} = usePreCreateWallet({
onSendContinue,
onSendBack,
onSendError,
isCreateNewWallet,
onShowCreateWallet,
- isTrezor
+ isTrezor,
+ isLedger
});
return isTrezor && !trezorDevice ? (
@@ -81,7 +87,45 @@ const PreCreateWallet = ({
disableCoinTypeUpgrades,
toggleDisableCoinTypeUpgrades,
gapLimit,
- setGapLimit
+ setGapLimit,
+ isLedger
+ }}
+ />
+ ) : isLedger && !ledgerDevice ? (
+