[redesign] Launcher views

app/actions/DaemonActions.js

@@ -28,6 +28,7 @@ import { STANDARD_EXTERNAL_REQUESTS } from "constants";
 import { DIFF_CONNECTION_ERROR, LOCALE, TESTNET } from "constants";
 import * as cfgConstants from "constants/config";
 import { CSPP_URL, CSPP_URL_LEGACY } from "constants";
+import { preDefinedGradients } from "helpers";
 
 export const DECREDITON_VERSION = "DECREDITON_VERSION";
 export const SELECT_LANGUAGE = "SELECT_LANGUAGE";
@@ -770,3 +771,42 @@ export const getDexLogs = () => (dispatch, getState) =>
       .then((logs) => resolve(logs))
       .catch((err) => reject(err));
   });
+
+export const generateRandomGradient = () => {
+  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+  const invertedColor = (Number(`0x1${randomColor}`) ^ 0xffffff)
+    .toString(16)
+    .substr(1);
+  return `linear-gradient(#${randomColor} 0%, #${invertedColor} 100%)`;
+};
+
+export const checkDisplayWalletGradients = (availableWallets) => (
+  dispatch,
+  getState
+) => {
+  const missingGradientWallets = [];
+  let availableGradients = [...preDefinedGradients];
+  availableWallets
+    .sort((a, b) => b.lastAccess - a.lastAccess)
+    .forEach(({ wallet, displayWalletGradient }) => {
+      if (!displayWalletGradient) {
+        missingGradientWallets.push(wallet);
+      } else {
+        availableGradients = availableGradients.filter(
+          (gradient) => gradient != displayWalletGradient
+        );
+      }
+    });
+
+  // set missing gradients
+  if (missingGradientWallets.length > 0) {
+    availableGradients.reverse();
+    missingGradientWallets.forEach((walletName) => {
+      const gradient = availableGradients.pop() ?? generateRandomGradient();
+      const config = wallet.getWalletCfg(isTestNet(getState()), walletName);
+      config.set(cfgConstants.DISPLAY_WALLET_GRADIENT, gradient);
+    });
+
+    dispatch(getAvailableWallets());
+  }
+};

app/actions/SettingsActions.js

@@ -52,6 +52,10 @@ export const saveSettings = (settings) => async (dispatch, getState) => {
   config.set(configConstants.NETWORK, settings.network);
   config.set(configConstants.THEME, settings.theme);
   config.set(configConstants.UI_ANIMATIONS, settings.uiAnimations);
+  config.set(
+    configConstants.AUTO_WALLET_LAUNCHING,
+    settings.autoWalletLaunching
+  );
 
   if (walletName) {
     const walletConfig = wallet.getWalletCfg(isTestNet(getState()), walletName);
@@ -62,7 +66,10 @@ export const saveSettings = (settings) => async (dispatch, getState) => {
   }
 
   if (
-    !equalElements(oldAllowedExternalRequests, settings.allowedExternalRequests)
+    !equalElements(
+      oldAllowedExternalRequests ?? [],
+      settings.allowedExternalRequests
+    )
   ) {
     wallet.reloadAllowedExternalRequests();
   }

app/actions/WalletLoaderActions.js

@@ -28,6 +28,7 @@ import * as cfgConstants from "constants/config";
 import { RESCAN_PROGRESS } from "./ControlActions";
 import { stopAccountMixer } from "./AccountMixerActions";
 import { TRZ_WALLET_CLOSED } from "actions/TrezorActions";
+import { saveSettings, updateStateSettingsChanged } from "./SettingsActions";
 
 const { SyncNotificationType } = api;
 
@@ -717,3 +718,25 @@ export const acceptStakingWarning = () => (dispatch, getState) => {
     showStakingWarning: false
   });
 };
+
+export const STOP_UNFINISHED_WALLET_FAILED = "STOP_UNFINISHED_WALLET_FAILED";
+export const stopUnfinishedWallet = () => async (dispatch) => {
+  try {
+    await wallet.stopWallet();
+    dispatch(setSelectedWallet(null));
+  } catch (err) {
+    dispatch({ error: err, type: STOP_UNFINISHED_WALLET_FAILED });
+  }
+};
+
+export const setAutoWalletLaunching = (autoWalletLaunching) => async (
+  dispatch,
+  getState
+) => {
+  dispatch(updateStateSettingsChanged({ autoWalletLaunching }, true));
+  const tempSettings = getState().settings.tempSettings;
+  const config = wallet.getGlobalCfg();
+  config.set(cfgConstants.AUTO_WALLET_LAUNCHING, autoWalletLaunching);
+
+  await dispatch(saveSettings(tempSettings));
+};

app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx

@@ -0,0 +1,233 @@
+import { useState, useCallback } from "react";
+import { useDaemonStartup, useMountEffect } from "hooks";
+import { HeaderTimeMsg } from "views/GetStartedPage/messages";
+import { FormattedRelative } from "shared";
+import { FormattedMessage as T } from "react-intl";
+import ReactTimeout from "react-timeout";
+import { classNames, Tooltip } from "pi-ui";
+import styles from "./AnimatedLinearProgressFull.module.css";
+import { useRescan } from "hooks";
+import { KeyBlueButton } from "buttons";
+import { AutoWalletLaunchingModal } from "modals";
+
+const AnimatedLinearProgressFull = ({
+  setInterval,
+  min,
+  error,
+  text,
+  animationType,
+  initialAnimationType,
+  hideTextBlock,
+  onCancelLoadingWallet,
+  onContinueOpeningWallet,
+  onSaveAndContinueOpeningWallet,
+  nextStateAfterWalletLoading,
+  hideOpenWalletButton
+}) => {
+  const {
+    isSPV,
+    getNeededBlocks,
+    getEstimatedTimeLeft,
+    selectedWalletSelector,
+    getCurrentBlockCount,
+    syncFetchHeadersLastHeaderTime,
+    syncFetchHeadersFirstHeaderTime,
+    getDcrwalletLogs,
+    getDaemonSynced,
+    onGetDcrdLogs,
+    syncRescanAttempt,
+    startWalletServiceAttempt,
+    synced
+  } = useDaemonStartup();
+  const { rescanEndBlock, rescanStartBlock, rescanCurrentBlock } = useRescan();
+  const [lastDcrwalletLogLine, setLogLine] = useState("");
+  const [lastDcrdLogLine, setDcrdLogLine] = useState("");
+  const [
+    isAutoWalletLaunchingModalVisible,
+    setIsAutoWalletLaunchingModalVisible
+  ] = useState(false);
+  const showAutoWalletLaunchingModalVisible = useCallback(
+    () => setIsAutoWalletLaunchingModalVisible(true),
+    [setIsAutoWalletLaunchingModalVisible]
+  );
+
+  useMountEffect(() => {
+    setInterval(async () => {
+      try {
+        const lastDcrwalletLogLine = await getDcrwalletLogs();
+        setLogLine(lastDcrwalletLogLine);
+      } catch (err) {
+        console.log(err);
+      }
+    }, 2000);
+    setInterval(async () => {
+      try {
+        const lastDcrdLogLine = await onGetDcrdLogs();
+        setDcrdLogLine(lastDcrdLogLine);
+      } catch (err) {
+        console.log(err);
+      }
+    }, 2000);
+  }, [setInterval, getDcrwalletLogs, onGetDcrdLogs]);
+
+  const now = Date.now();
+  let perComplete;
+  if (!getDaemonSynced && getCurrentBlockCount) {
+    perComplete = (getCurrentBlockCount - min) / (getNeededBlocks - min);
+  } else if (syncRescanAttempt && rescanCurrentBlock) {
+    perComplete =
+      (rescanCurrentBlock - rescanStartBlock) /
+      (rescanEndBlock - rescanStartBlock);
+  } else if (syncFetchHeadersLastHeaderTime) {
+    const syncFetchHeadersLastHeaderTimeTs = new Date(
+      syncFetchHeadersLastHeaderTime
+    ).getTime();
+    const syncFetchHeadersFirstHeaderTimeTs = new Date(
+      syncFetchHeadersFirstHeaderTime
+    ).getTime();
+    perComplete =
+      (syncFetchHeadersLastHeaderTimeTs - syncFetchHeadersFirstHeaderTimeTs) /
+      (now - syncFetchHeadersFirstHeaderTimeTs);
+  }
+
+  const leftStartingPoint = perComplete ? perComplete * 100 : 0;
+  let finishDateEstimation = null;
+  if (getEstimatedTimeLeft !== null) {
+    finishDateEstimation = new Date();
+    finishDateEstimation.setSeconds(
+      finishDateEstimation.getSeconds() + getEstimatedTimeLeft
+    );
+  }
+
+  return (
+    <div className={styles.linearProgress}>
+      <div>
+        {perComplete > 0 && (
+          <div
+            className={classNames(
+              styles.linearProgressBar,
+              error && styles.error
+            )}
+            style={
+              error || !perComplete
+                ? {}
+                : { width: `${perComplete * 100}` + "%" }
+            }
+          />
+        )}
+        <div className={classNames(styles.linearProgressText)}>
+          {selectedWalletSelector?.value?.wallet &&
+            `${selectedWalletSelector.value.wallet} - `}
+          {text}
+        </div>
+        {getCurrentBlockCount && !getDaemonSynced && (
+          <div className={styles.loaderBarEstimation}>
+            <T
+              id="getStarted.chainLoading.syncEstimation"
+              m="Blockchain download estimated complete: "
+            />
+            <span className={styles.bold}>
+              {finishDateEstimation && (
+                <FormattedRelative value={finishDateEstimation} />
+              )}
+              ({getCurrentBlockCount} / {getNeededBlocks})
+            </span>
+          </div>
+        )}
+        {syncRescanAttempt && rescanCurrentBlock ? (
+          <div className={styles.loaderBarEstimation}>
+            <T
+              id="getStarted.walletRescan.progress"
+              m="Rescan Progress ({rescanCurrentBlock} / {rescanEndBlock})"
+              values={{
+                rescanCurrentBlock:
+                  rescanCurrentBlock > rescanStartBlock
+                    ? rescanCurrentBlock
+                    : rescanStartBlock,
+                rescanEndBlock: rescanEndBlock
+              }}
+            />
+          </div>
+        ) : startWalletServiceAttempt ? (
+          <div className={styles.loaderBarEstimation}>
+            <T id="getStarted.startwalletservice" m="Start wallet services" />
+          </div>
+        ) : (
+          selectedWalletSelector &&
+          !synced &&
+          syncFetchHeadersLastHeaderTime && (
+            <div className={styles.loaderBarEstimation}>
+              <HeaderTimeMsg />
+              <span className={styles.bold}>
+                <FormattedRelative value={syncFetchHeadersLastHeaderTime} />
+              </span>
+            </div>
+          )
+        )}
+      </div>
+      <div className={styles.icons}>
+        {isSPV && (
+          <div>
+            <Tooltip
+              placement="top"
+              content={<T id="getstarted.spvMode" m="SPV Mode" />}>
+              <div className={styles.spvIcon} />
+            </Tooltip>
+          </div>
+        )}
+        <div
+          className={classNames(
+            styles.icon,
+            animationType ?? animationType,
+            leftStartingPoint == 0 && initialAnimationType,
+            leftStartingPoint == 0 && styles.initial
+          )}
+        />
+      </div>
+      <div>
+        {!hideOpenWalletButton &&
+          selectedWalletSelector &&
+          (nextStateAfterWalletLoading ? (
+            <>
+              <KeyBlueButton
+                onClick={showAutoWalletLaunchingModalVisible}
+                className={styles.openWalletButton}>
+                <T id="getstarted.openWallet" m="Open Wallet" />
+              </KeyBlueButton>
+              <AutoWalletLaunchingModal
+                {...{
+                  show: isAutoWalletLaunchingModalVisible,
+                  onSubmit: onSaveAndContinueOpeningWallet,
+                  onCancelModal: onContinueOpeningWallet
+                }}
+              />
+            </>
+          ) : (
+            !startWalletServiceAttempt && (
+              <KeyBlueButton
+                onClick={onCancelLoadingWallet}
+                className={styles.cancelLoadingButton}>
+                <T id="getstarted.cancelLoading" m="Cancel Loading" />
+              </KeyBlueButton>
+            )
+          ))}
+      </div>
+      {!hideTextBlock && (
+        <div>
+          {!getDaemonSynced && lastDcrdLogLine && !selectedWalletSelector && (
+            <div className={styles.lastLogLines}>
+              <div>{lastDcrdLogLine}</div>
+            </div>
+          )}
+          {selectedWalletSelector && lastDcrwalletLogLine && (
+            <div className={styles.lastLogLines}>
+              <div>{lastDcrwalletLogLine}</div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReactTimeout(AnimatedLinearProgressFull);