+
{t('create_wallet.confirm_backup_title')}
{t('create_wallet.confirm_backup_subtitle')}
-
- {[...new Array(seedphrase.length)].map((_, outerIndex) => {
- if (outerIndex % 2 !== 0) return null
-
- const seedWords = seedphrase.slice(outerIndex, outerIndex + 2)
-
- return (
-
- {seedWords.map((seedWord, innerIndex) => {
- const wordIndex = outerIndex + innerIndex
- return (
-
- {
- setSeedWordConfirmations(
- seedWordConfirmations.map((confirmation, index) =>
- index === wordIndex ? isValid : confirmation
- )
- )
- }}
- />
-
- )
- })}
-
- )
- })}
-
{isSeedBackupConfirmed && (
{t('create_wallet.feedback_seed_confirmed')}
)}
-
walletConfirmed()}
- disabled={!isSeedBackupConfirmed}
- >
+ onSuccess()} disabled={!isSeedBackupConfirmed}>
{t('create_wallet.confirmation_button_fund_wallet')}
@@ -254,21 +54,28 @@ const BackupConfirmation = ({ createdWallet, walletConfirmed, parentStepSetter }
variant="outline-dark"
disabled={isSeedBackupConfirmed}
className={styles.button}
- onClick={() => {
- parentStepSetter()
- }}
+ onClick={() => onCancel()}
>
- {t('create_wallet.back_button')}
+
+
+ {t('create_wallet.back_button')}
+
{showSkipButton && (
walletConfirmed()}
+ className={`${styles.button} position-relative`}
+ onClick={() => onSuccess()}
disabled={isSeedBackupConfirmed}
>
- {t('create_wallet.skip_button')}
+
+ {t('create_wallet.skip_button')}
+
+
+
+ dev
+
)}
-
-
{t('create_wallet.confirmation_label_wallet_name')}
-
{walletDisplayName(createdWallet.name)}
-
-
-
-
-
-
{t('create_wallet.confirmation_label_password')}
-
- {!revealSensitiveInfo ? 'randomrandom' : createdWallet.password}
-
-
-
- {
- setRevealSensitiveInfo(isToggled)
- setSensitiveInfoWasRevealed(true)
- }}
- />
-
-
- setUserConfirmed(isToggled)}
- />
-
-
setStep(1)}
- >
- {t('create_wallet.next_button')}
-
-
@@ -394,9 +140,7 @@ export default function CreateWallet({ startWallet }) {
)}
{alert &&
{alert.message}}
- {canCreate &&
}
- {isCreated &&
}
- {!canCreate && !isCreated && (
+ {!canCreate && !isCreated ? (
Currently {{ walletName: walletDisplayName(serviceInfo?.walletName) }} is active. You need
@@ -407,6 +151,36 @@ export default function CreateWallet({ startWallet }) {
.
+ ) : (
+ <>
+
+ {canCreate && (
+
navigate(routes[parentRoute])}
+ onSubmit={createWallet}
+ submitButtonText={(isSubmitting) =>
+ t(isSubmitting ? 'create_wallet.button_creating' : 'create_wallet.button_create')
+ }
+ />
+ )}
+ {isCreated && (
+ <>
+ {!showBackupConfirmation ? (
+ t('create_wallet.next_button')}
+ onSubmit={() => setShowBackupConfirmation(true)}
+ />
+ ) : (
+ setShowBackupConfirmation(false)}
+ />
+ )}
+
+ )}
+
)}
{(isWaitingMakerStart || isWaitingMakerStop) && (
diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
new file mode 100644
index 000000000..916a0707f
--- /dev/null
+++ b/src/components/ImportWallet.tsx
@@ -0,0 +1,575 @@
+import { useState, useMemo, useCallback } from 'react'
+import * as rb from 'react-bootstrap'
+import { Formik, FormikErrors } from 'formik'
+import { Link, useNavigate } from 'react-router-dom'
+import { Trans, useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import * as Api from '../libs/JmWalletApi'
+import { useServiceInfo, useDispatchServiceInfo } from '../context/ServiceInfoContext'
+import { useRefreshConfigValues, useUpdateConfigValues } from '../context/ServiceConfigContext'
+import PageTitle from './PageTitle'
+import Sprite from './Sprite'
+import Accordion from './Accordion'
+import WalletCreationForm, { CreateWalletFormValues } from './WalletCreationForm'
+import MnemonicPhraseInput from './MnemonicPhraseInput'
+import PreventLeavingPageByMistake from './PreventLeavingPageByMistake'
+import { WalletInfo, WalletInfoSummary } from './WalletCreationConfirmation'
+import { isDevMode, isDebugFeatureEnabled } from '../constants/debugFeatures'
+import { routes, Route } from '../constants/routes'
+import { SEGWIT_ACTIVATION_BLOCK, DUMMY_MNEMONIC_PHRASE, JM_WALLET_FILE_EXTENSION, walletDisplayName } from '../utils'
+import { JM_GAPLIMIT_DEFAULT, JM_GAPLIMIT_CONFIGKEY } from '../constants/config'
+
+type ImportWalletDetailsFormValues = {
+ mnemonicPhrase: MnemonicPhrase
+ blockheight: number
+ gaplimit: number
+}
+
+const GAPLIMIT_SUGGESTIONS = {
+ normal: JM_GAPLIMIT_DEFAULT,
+ heavy: JM_GAPLIMIT_DEFAULT * 4,
+}
+
+const MIN_BLOCKHEIGHT_VALUE = 0
+const MIN_GAPLIMIT_VALUE = 1
+
+const initialImportWalletDetailsFormValues: ImportWalletDetailsFormValues = isDevMode()
+ ? {
+ mnemonicPhrase: new Array
(12).fill(''),
+ blockheight: MIN_BLOCKHEIGHT_VALUE,
+ gaplimit: GAPLIMIT_SUGGESTIONS.heavy,
+ }
+ : {
+ mnemonicPhrase: new Array(12).fill(''),
+ blockheight: SEGWIT_ACTIVATION_BLOCK,
+ gaplimit: GAPLIMIT_SUGGESTIONS.normal,
+ }
+
+interface ImportWalletDetailsFormProps {
+ initialValues?: ImportWalletDetailsFormValues
+ submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
+ onCancel: () => void
+ onSubmit: (values: ImportWalletDetailsFormValues) => Promise
+}
+
+const ImportWalletDetailsForm = ({
+ initialValues = initialImportWalletDetailsFormValues,
+ submitButtonText,
+ onCancel,
+ onSubmit,
+}: ImportWalletDetailsFormProps) => {
+ const { t, i18n } = useTranslation()
+ const [__dev_showFillerButton] = useState(isDebugFeatureEnabled('importDummyMnemonicPhrase'))
+
+ const validate = useCallback(
+ (values: ImportWalletDetailsFormValues) => {
+ const errors = {} as FormikErrors
+ const isMnemonicPhraseValid = values.mnemonicPhrase.every((it) => it.length > 0)
+ if (!isMnemonicPhraseValid) {
+ errors.mnemonicPhrase = t('import_wallet.import_details.feedback_invalid_menmonic_phrase')
+ }
+
+ if (typeof values.blockheight !== 'number' || values.blockheight < MIN_BLOCKHEIGHT_VALUE) {
+ errors.blockheight = t('import_wallet.import_details.feedback_invalid_blockheight', {
+ min: MIN_BLOCKHEIGHT_VALUE,
+ })
+ }
+ if (typeof values.gaplimit !== 'number' || values.gaplimit < MIN_GAPLIMIT_VALUE) {
+ errors.gaplimit = t('import_wallet.import_details.feedback_invalid_gaplimit', {
+ min: MIN_GAPLIMIT_VALUE,
+ })
+ }
+ return errors
+ },
+ [t]
+ )
+
+ return (
+
+ {({
+ handleSubmit,
+ handleBlur,
+ handleChange,
+ setFieldValue,
+ values,
+ touched,
+ errors,
+ isSubmitting,
+ submitCount,
+ }) => (
+
+ setFieldValue('mnemonicPhrase', val, true)}
+ isDisabled={(_) => isSubmitting}
+ />
+ {!!errors.mnemonicPhrase && (
+ <>
+
+ {errors.mnemonicPhrase}
+
+
+ )}
+ {__dev_showFillerButton && (
+ setFieldValue('mnemonicPhrase', DUMMY_MNEMONIC_PHRASE, true)}
+ disabled={isSubmitting}
+ >
+ Fill with dummy mnemonic phrase
+
+ dev
+
+
+ )}
+
+ {t('import_wallet.import_details.import_options')}
+
+ }
+ defaultOpen={true}
+ >
+
+ {t('import_wallet.import_details.label_blockheight')}
+
+ {t('import_wallet.import_details.description_blockheight')}
+
+
+
+
+
+
+ {errors.blockheight}
+
+
+
+ {t('import_wallet.import_details.label_gaplimit')}
+
+
+ {t('import_wallet.import_details.description_gaplimit')}
+
+
+
+
+
+
+ {errors.gaplimit}
+
+
+
+
+
+ {isSubmitting && (
+
+ )}
+ {submitButtonText(isSubmitting)}
+
+
+
+ onCancel()}>
+
+ {t('global.back')}
+
+
+
+ )}
+
+ )
+}
+
+type ImportWalletConfirmationFormValues = {
+ walletDetails: CreateWalletFormValues
+ importDetails: ImportWalletDetailsFormValues
+}
+
+interface ImportWalletConfirmationProps {
+ walletDetails: CreateWalletFormValues
+ importDetails: ImportWalletDetailsFormValues
+ submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
+ onCancel: () => void
+ onSubmit: (values: ImportWalletConfirmationFormValues) => Promise
+}
+
+const ImportWalletConfirmation = ({
+ walletDetails,
+ importDetails,
+ submitButtonText,
+ onCancel,
+ onSubmit,
+}: ImportWalletConfirmationProps) => {
+ const { t, i18n } = useTranslation()
+
+ const walletInfo = useMemo(
+ () => ({
+ walletFileName: walletDetails.walletName + JM_WALLET_FILE_EXTENSION,
+ password: walletDetails.password,
+ seedphrase: importDetails.mnemonicPhrase.join(' '),
+ }),
+ [walletDetails, importDetails]
+ )
+
+ return (
+
+ {({ handleSubmit, values, isSubmitting, submitCount }) => (
+
+
+
+
+
+
{t('import_wallet.import_details.label_blockheight')}
+
{t('import_wallet.import_details.description_blockheight')}
+
{values.importDetails.blockheight}
+
+
{t('import_wallet.import_details.label_gaplimit')}
+
{t('import_wallet.import_details.description_gaplimit')}
+
{values.importDetails.gaplimit}
+
+ {isSubmitting && (
+
+ )}
+ {submitButtonText(isSubmitting)}
+
+
+
+ {isSubmitting && (
+
+
{t('create_wallet.hint_duration_text')}
+
+ onCancel()}>
+
+ {t('global.back')}
+
+
+
+ )}
+
+ )
+}
+
+enum ImportWalletSteps {
+ wallet_details,
+ import_details,
+ confirm_and_submit,
+}
+
+interface ImportWalletProps {
+ parentRoute: Route
+ startWallet: (name: Api.WalletName, token: Api.ApiToken) => void
+}
+
+export default function ImportWallet({ parentRoute, startWallet }: ImportWalletProps) {
+ const { t } = useTranslation()
+ const navigate = useNavigate()
+ const serviceInfo = useServiceInfo()
+ const dispatchServiceInfo = useDispatchServiceInfo()
+ const refreshConfigValues = useRefreshConfigValues()
+ const updateConfigValues = useUpdateConfigValues()
+
+ const [alert, setAlert] = useState()
+ const [createWalletFormValues, setCreateWalletFormValues] = useState()
+ const [importDetailsFormValues, setImportDetailsFormValues] = useState()
+ const [recoveredWallet, setRecoveredWallet] = useState<{ walletFileName: Api.WalletName; token: Api.ApiToken }>()
+
+ const isRecovered = useMemo(() => !!recoveredWallet?.walletFileName && recoveredWallet?.token, [recoveredWallet])
+ const canRecover = useMemo(
+ () => !isRecovered && !serviceInfo?.walletName && !serviceInfo?.rescanning,
+ [isRecovered, serviceInfo]
+ )
+
+ const [step, setStep] = useState(ImportWalletSteps.wallet_details)
+ const nextStep = () =>
+ setStep((old) => {
+ switch (step) {
+ case ImportWalletSteps.wallet_details:
+ return ImportWalletSteps.import_details
+ case ImportWalletSteps.import_details:
+ return ImportWalletSteps.confirm_and_submit
+ default:
+ return old
+ }
+ })
+ const previousStep = () => {
+ setAlert(undefined)
+ setStep((old) => {
+ switch (step) {
+ case ImportWalletSteps.import_details:
+ return ImportWalletSteps.wallet_details
+ case ImportWalletSteps.confirm_and_submit:
+ return ImportWalletSteps.import_details
+ default:
+ return old
+ }
+ })
+ }
+
+ const recoverWallet = useCallback(
+ async (
+ signal: AbortSignal,
+ {
+ walletname,
+ password,
+ seedphrase,
+ gaplimit,
+ blockheight,
+ }: { walletname: Api.WalletName; password: string; seedphrase: string; gaplimit: number; blockheight: number }
+ ) => {
+ setAlert(undefined)
+
+ try {
+ // Step #1: recover wallet
+ const recoverResponse = await Api.postWalletRecover({ signal }, { walletname, password, seedphrase })
+ const recoverBody = await (recoverResponse.ok ? recoverResponse.json() : Api.Helper.throwError(recoverResponse))
+
+ const { walletname: importedWalletFileName } = recoverBody
+ setRecoveredWallet({ walletFileName: importedWalletFileName, token: recoverBody.token })
+
+ // Step #2: update the gaplimit config value if necessary
+ const originalGaplimit = await refreshConfigValues({
+ signal,
+ keys: [JM_GAPLIMIT_CONFIGKEY],
+ wallet: { name: importedWalletFileName, token: recoverBody.token },
+ })
+ .then((it) => it[JM_GAPLIMIT_CONFIGKEY.section] || {})
+ .then((it) => parseInt(it[JM_GAPLIMIT_CONFIGKEY.field] || String(JM_GAPLIMIT_DEFAULT), 10))
+ .then((it) => it || JM_GAPLIMIT_DEFAULT)
+
+ const gaplimitUpdateNecessary = gaplimit !== originalGaplimit
+ if (gaplimitUpdateNecessary) {
+ console.info('Will update gaplimit from %d to %d', originalGaplimit, gaplimit)
+
+ await updateConfigValues({
+ signal,
+ updates: [
+ {
+ key: JM_GAPLIMIT_CONFIGKEY,
+ value: String(gaplimit),
+ },
+ ],
+ wallet: { name: importedWalletFileName, token: recoverBody.token },
+ })
+ }
+
+ // Step #3: lock and unlock the wallet (for new addresses to be imported)
+ const lockResponse = await Api.getWalletLock({ walletName: importedWalletFileName, token: recoverBody.token })
+ if (!lockResponse.ok) await Api.Helper.throwError(lockResponse)
+
+ const unlockResponse = await Api.postWalletUnlock({ walletName: importedWalletFileName }, { password })
+ const unlockBody = await (unlockResponse.ok ? unlockResponse.json() : Api.Helper.throwError(unlockResponse))
+
+ // Step #4: reset `gaplimit´ to previous value if necessary
+ if (gaplimitUpdateNecessary) {
+ console.info('Will reset gaplimit to previous value %d', originalGaplimit)
+ await updateConfigValues({
+ signal,
+ updates: [
+ {
+ key: JM_GAPLIMIT_CONFIGKEY,
+ value: String(originalGaplimit),
+ },
+ ],
+ wallet: { name: importedWalletFileName, token: unlockBody.token },
+ })
+ }
+
+ // Step #5: invoke rescanning the timechain
+ console.info('Will start rescanning timechain from block %d', blockheight)
+
+ const rescanResponse = await Api.getRescanBlockchain({
+ signal,
+ walletName: importedWalletFileName,
+ token: unlockBody.token,
+ blockheight,
+ })
+ if (!rescanResponse.ok) {
+ await Api.Helper.throwError(rescanResponse)
+ } else {
+ dispatchServiceInfo({
+ rescanning: true,
+ })
+ }
+
+ startWallet(importedWalletFileName, unlockBody.token)
+ navigate(routes.wallet)
+ } catch (e: any) {
+ if (signal.aborted) return
+ const message = t('import_wallet.error_importing_failed', {
+ reason: e.message || 'Unknown reason',
+ })
+ setAlert({ variant: 'danger', message })
+ }
+ },
+ [
+ setRecoveredWallet,
+ startWallet,
+ navigate,
+ setAlert,
+ refreshConfigValues,
+ updateConfigValues,
+ dispatchServiceInfo,
+ t,
+ ]
+ )
+
+ return (
+
+ <>
+ {step === ImportWalletSteps.wallet_details &&
}
+ {step === ImportWalletSteps.import_details && (
+
+ )}
+ {step === ImportWalletSteps.confirm_and_submit &&
}
+
+ {alert &&
{alert.message}}
+ {!canRecover && !isRecovered ? (
+ <>
+ {serviceInfo?.walletName && (
+
+
+ Currently {{ walletName: walletDisplayName(serviceInfo.walletName) }} is active. You
+ need to lock it first.
+
+ Go back
+
+ .
+
+
+ )}
+ {serviceInfo?.rescanning === true && (
+
+
+ Rescanning the timechain is currently in progress. Please wait until the process finishes and then try
+ again.
+
+ Go back
+
+ .
+
+
+ )}
+
+ ) : (
+ <>
+
+ {step === ImportWalletSteps.wallet_details && (
+
navigate(routes[parentRoute])}
+ onSubmit={async (values) => {
+ setCreateWalletFormValues(values)
+ nextStep()
+ }}
+ submitButtonText={(isSubmitting) =>
+ t(
+ isSubmitting
+ ? 'import_wallet.wallet_details.text_button_submitting'
+ : 'import_wallet.wallet_details.text_button_submit'
+ )
+ }
+ />
+ )}
+ {step === ImportWalletSteps.import_details && (
+
+ t(
+ isSubmitting
+ ? 'import_wallet.import_details.text_button_submitting'
+ : 'import_wallet.import_details.text_button_submit'
+ )
+ }
+ onCancel={() => previousStep()}
+ onSubmit={async (values) => {
+ setImportDetailsFormValues(values)
+ nextStep()
+ }}
+ />
+ )}
+ {step === ImportWalletSteps.confirm_and_submit && (
+
+ t(
+ isSubmitting
+ ? 'import_wallet.confirmation.text_button_submitting'
+ : 'import_wallet.confirmation.text_button_submit'
+ )
+ }
+ onCancel={() => previousStep()}
+ onSubmit={(values) => {
+ const abortCtrl = new AbortController()
+
+ return recoverWallet(abortCtrl.signal, {
+ walletname: (values.walletDetails.walletName + JM_WALLET_FILE_EXTENSION) as Api.WalletName,
+ password: values.walletDetails.password,
+ seedphrase: values.importDetails.mnemonicPhrase.join(' '),
+ gaplimit: values.importDetails.gaplimit,
+ blockheight: values.importDetails.blockheight,
+ })
+ }}
+ />
+ )}
+
+ )}
+
{t('scheduler.button_start')}
diff --git a/src/components/MainWalletView.module.css b/src/components/MainWalletView.module.css
index d934284ce..4ee6a051f 100644
--- a/src/components/MainWalletView.module.css
+++ b/src/components/MainWalletView.module.css
@@ -15,6 +15,14 @@
margin-bottom: 0.45rem;
}
+:global(.jm-rescan-in-progress) .walletHeader {
+ cursor: wait;
+}
+
+:global(.jm-rescan-in-progress) .walletBody {
+ filter: blur(2px);
+}
+
.jarsPlaceholder {
width: 100%;
height: 3.5rem;
@@ -49,6 +57,10 @@
height: 2rem;
}
+.jarsDividerContainer .dividerButton:disabled {
+ cursor: not-allowed;
+}
+
.sendReceiveButton {
padding: 0.25rem;
font-weight: 500;
diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
index 0b1db41ad..db64ae93e 100644
--- a/src/components/MainWalletView.tsx
+++ b/src/components/MainWalletView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from 'react'
import * as rb from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
+import { useServiceInfo } from '../context/ServiceInfoContext'
import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
import { CurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
import { walletDisplayName } from '../utils'
@@ -15,16 +16,16 @@ import { Jars } from './Jars'
import styles from './MainWalletView.module.css'
interface WalletHeaderProps {
- name: string
+ walletName: string
balance: Api.AmountSats
unit: Unit
showBalance: boolean
}
-const WalletHeader = ({ name, balance, unit, showBalance }: WalletHeaderProps) => {
+const WalletHeader = ({ walletName, balance, unit, showBalance }: WalletHeaderProps) => {
return (
-
{walletDisplayName(name)}
+
{walletName}
{
)
}
+const WalletHeaderRescanning = ({ walletName, isLoading }: { walletName: string; isLoading: boolean }) => {
+ const { t } = useTranslation()
+ return (
+
+
{walletName}
+ {isLoading ? (
+
+
+
+ ) : (
+ {t('current_wallet.text_rescan_in_progress')}
+ )}
+
+ )
+}
+
interface MainWalletViewProps {
wallet: CurrentWallet
}
@@ -58,6 +75,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
const { t } = useTranslation()
const navigate = useNavigate()
+ const serviceInfo = useServiceInfo()
const settings = useSettings()
const settingsDispatch = useSettingsDispatch()
const currentWalletInfo = useCurrentWalletInfo()
@@ -127,84 +145,92 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
onHide={() => setIsAccountOverlayShown(false)}
/>
)}
- settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
- {!currentWalletInfo || isLoading ? (
- <>
+ {serviceInfo?.rescanning === true ? (
+
+
+
+ ) : (
+ settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
+ {!currentWalletInfo || isLoading ? (
-
- ) : (
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+ {/* Always receive to first jar. */}
+
+
+
+
{t('current_wallet.button_deposit')}
+
+
+
{t('current_wallet.button_withdraw')}
+
+
-
- {/* Always receive on first mixdepth. */}
-
-
-
-
{t('current_wallet.button_deposit')}
-
-
-
{t('current_wallet.button_withdraw')}
-
+
+ {!currentWalletInfo || isLoading ? (
+
+
+
+ ) : (
+
+ )}
+
+
-
- {!currentWalletInfo || isLoading ? (
-
-
-
- ) : (
-
- )}
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
setShowJars((current) => !current)}>
-
-
-
-
+
+ {mnemonicPhrase.map((_, outerIndex) => {
+ if (outerIndex % columns !== 0) return null
+
+ const wordGroup = mnemonicPhrase.slice(outerIndex, Math.min(outerIndex + columns, mnemonicPhrase.length))
+
+ return (
+
+ {wordGroup.map((givenWord, innerIndex) => {
+ const wordIndex = outerIndex + innerIndex
+ return (
+
+ {
+ const newPhrase = mnemonicPhrase.map((old, index) => (index === i ? value : old))
+ onChange(newPhrase)
+ }}
+ isValid={isValid ? isValid(wordIndex) : undefined}
+ disabled={isDisabled ? isDisabled(wordIndex) : undefined}
+ />
+
+ )
+ })}
+
+ )
+ })}
+
-
+
+
+
+
{wallet &&
{walletDisplayName(wallet.name)}
}
- {totalBalance === undefined ? (
-
- ) : (
-
-
-
- )}
+
+ {rescanInProgress ? (
+
{t('navbar.text_rescan_in_progress')}
+ ) : (
+ <>
+ {totalBalance === undefined ? (
+
+ ) : (
+
+ )}
+
+ )}
+
@@ -96,7 +129,10 @@ const CenterNav = ({ makerRunning, schedulerRunning, singleCoinJoinRunning, onCl
to={routes.earn}
onClick={onClick}
className={({ isActive }) =>
- 'center-nav-link nav-link d-flex align-items-center justify-content-center' + (isActive ? ' active' : '')
+ classNames('center-nav-link nav-link d-flex align-items-center justify-content-center', {
+ active: isActive,
+ disabled: rescanInProgress,
+ })
}
>
@@ -111,7 +147,10 @@ const CenterNav = ({ makerRunning, schedulerRunning, singleCoinJoinRunning, onCl
to={routes.jam}
onClick={onClick}
className={({ isActive }) =>
- 'center-nav-link nav-link d-flex align-items-center justify-content-center' + (isActive ? ' active' : '')
+ classNames('center-nav-link nav-link d-flex align-items-center justify-content-center', {
+ active: isActive,
+ disabled: rescanInProgress,
+ })
}
>
@@ -175,7 +214,8 @@ export default function Navbar() {
const [isExpanded, setIsExpanded] = useState(false)
- const makerRunning = useMemo(() => serviceInfo?.makerRunning || false, [serviceInfo])
+ const makerRunning = useMemo(() => serviceInfo?.makerRunning === true, [serviceInfo])
+ const rescanInProgress = useMemo(() => serviceInfo?.rescanning === true, [serviceInfo])
const schedulerRunning = useMemo(
() => (serviceInfo?.coinjoinInProgress && serviceInfo?.schedule !== null) || false,
[serviceInfo]
@@ -260,6 +300,7 @@ export default function Navbar() {
>
setIsExpanded(!isExpanded)}
/>
setIsExpanded(!isExpanded)} />
@@ -291,6 +333,7 @@ export default function Navbar() {
makerRunning={makerRunning}
schedulerRunning={schedulerRunning}
singleCoinJoinRunning={singleCoinJoinRunning}
+ rescanInProgress={rescanInProgress}
/>
diff --git a/src/components/PreventLeavingPageByMistake.tsx b/src/components/PreventLeavingPageByMistake.tsx
new file mode 100644
index 000000000..0e3c693c6
--- /dev/null
+++ b/src/components/PreventLeavingPageByMistake.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+
+const PreventLeavingPageByMistake = () => {
+ // prompt users before refreshing or closing the page when this component is present.
+ // Firefox will show: "This page is asking you to confirm that you want to leave [...]"
+ // Chrome: "Leave site? Changes you made may not be saved."
+ useEffect(() => {
+ const abortCtrl = new AbortController()
+
+ window.addEventListener(
+ 'beforeunload',
+ (event) => {
+ // cancel the event as stated by the standard.
+ event.preventDefault()
+
+ // Chrome requires returnValue to be set.
+ event.returnValue = ''
+
+ // return something to trigger a dialog
+ return ''
+ },
+ { signal: abortCtrl.signal }
+ )
+
+ return () => abortCtrl.abort()
+ }, [])
+
+ return <>
+}
+
+export default PreventLeavingPageByMistake
diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx
index 667d7420d..433b2f4b3 100644
--- a/src/components/Receive.jsx
+++ b/src/components/Receive.jsx
@@ -3,6 +3,7 @@ import * as rb from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import { useSettings } from '../context/SettingsContext'
+import { useServiceInfo } from '../context/ServiceInfoContext'
import { useCurrentWalletInfo } from '../context/WalletContext'
import * as Api from '../libs/JmWalletApi'
import { BitcoinQR } from './BitcoinQR'
@@ -18,14 +19,16 @@ export default function Receive({ wallet }) {
const { t } = useTranslation()
const location = useLocation()
const settings = useSettings()
+ const serviceInfo = useServiceInfo()
const walletInfo = useCurrentWalletInfo()
const [validated, setValidated] = useState(false)
- const [alert, setAlert] = useState(null)
+ const [alert, setAlert] = useState()
const [isLoading, setIsLoading] = useState(true)
const [address, setAddress] = useState('')
const [amount, setAmount] = useState('')
const [selectedJarIndex, setSelectedJarIndex] = useState(parseInt(location.state?.account, 10) || 0)
const [addressCount, setAddressCount] = useState(0)
+ const isFormEnabled = useMemo(() => serviceInfo && serviceInfo.rescanning !== true, [serviceInfo])
const sortedAccountBalances = useMemo(() => {
if (!walletInfo) return []
@@ -35,10 +38,15 @@ export default function Receive({ wallet }) {
}, [walletInfo])
useEffect(() => {
+ if (!isFormEnabled) {
+ setIsLoading(false)
+ return
+ }
+
const abortCtrl = new AbortController()
const { name: walletName, token } = wallet
- setAlert(null)
+ setAlert(undefined)
setIsLoading(true)
Api.getAddressNew({ walletName, mixdepth: selectedJarIndex, token, signal: abortCtrl.signal })
@@ -52,7 +60,7 @@ export default function Receive({ wallet }) {
.finally(() => !abortCtrl.signal.aborted && setIsLoading(false))
return () => abortCtrl.abort()
- }, [wallet, selectedJarIndex, addressCount, t])
+ }, [isFormEnabled, wallet, selectedJarIndex, addressCount, t])
const onSubmit = (e) => {
e.preventDefault()
@@ -62,7 +70,7 @@ export default function Receive({ wallet }) {
setValidated(true)
if (isValid) {
- setAddressCount(addressCount + 1)
+ setAddressCount((it) => it + 1)
}
}
@@ -70,7 +78,8 @@ export default function Receive({ wallet }) {
{alert &&
{alert.message}}
-
+ {serviceInfo?.rescanning === true &&
{t('app.alert_rescan_in_progress')}}
+
{!isLoading && address && }
@@ -104,8 +113,8 @@ export default function Receive({ wallet }) {
-
-
+
+
{!walletInfo || sortedAccountBalances.length === 0 ? (
@@ -119,7 +128,7 @@ export default function Receive({ wallet }) {
index={it.accountIndex}
balance={it.calculatedAvailableBalanceInSats}
frozenBalance={it.calculatedFrozenOrLockedBalanceInSats}
- isSelectable={true}
+ isSelectable={isFormEnabled}
isSelected={it.accountIndex === selectedJarIndex}
fillLevel={jarFillLevel(
it.calculatedTotalBalanceInSats,
@@ -143,7 +152,7 @@ export default function Receive({ wallet }) {
type="number"
placeholder="0"
value={amount}
- disabled={isLoading}
+ disabled={!isFormEnabled || isLoading}
onChange={(e) => setAmount(e.target.value)}
min={0}
step={1}
@@ -158,7 +167,7 @@ export default function Receive({ wallet }) {
{isLoading ? (
diff --git a/src/components/Receive.module.css b/src/components/Receive.module.css
index a15840670..844a123fc 100644
--- a/src/components/Receive.module.css
+++ b/src/components/Receive.module.css
@@ -48,6 +48,14 @@
min-height: 16.25rem;
}
+:global(.jm-rescan-in-progress) .cardContainer {
+ display: none;
+}
+
+:global(.jm-rescan-in-progress) .receiveForm {
+ filter: blur(2px);
+}
+
.receive-placeholder-qr-container {
width: 16.25rem;
}
diff --git a/src/components/RescanChain.tsx b/src/components/RescanChain.tsx
new file mode 100644
index 000000000..35f71ae5d
--- /dev/null
+++ b/src/components/RescanChain.tsx
@@ -0,0 +1,167 @@
+import { useState, useCallback } from 'react'
+import * as rb from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { Formik, FormikErrors } from 'formik'
+import * as Api from '../libs/JmWalletApi'
+import { useServiceInfo, useDispatchServiceInfo } from '../context/ServiceInfoContext'
+import PageTitle from './PageTitle'
+import Sprite from './Sprite'
+import { CurrentWallet } from '../context/WalletContext'
+import { SEGWIT_ACTIVATION_BLOCK } from '../utils'
+
+type RescanChainFormValues = {
+ blockheight: number
+}
+
+const initialRescanChainFormValues: RescanChainFormValues = {
+ blockheight: SEGWIT_ACTIVATION_BLOCK,
+}
+
+interface RescanChainFormProps {
+ submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
+ onSubmit: (values: RescanChainFormValues) => Promise
+ disabled?: boolean
+}
+/**
+ *
+ * @param param0
+ "rescan_chain": {
+ "error_rescanning_failed": "Error while starting the rescan process. Reason: {{ reason }}"
+ },
+ * @returns
+ */
+
+const RescanChainForm = ({ disabled, submitButtonText, onSubmit }: RescanChainFormProps) => {
+ const { t, i18n } = useTranslation()
+
+ return (
+
+
{
+ const errors = {} as FormikErrors
+ if (typeof values.blockheight !== 'number' || values.blockheight < 0) {
+ errors.blockheight = t('Please provide a valid blockheight value greater than or equal to {{ min }}.', {
+ min: 0,
+ })
+ }
+ return errors
+ }}
+ onSubmit={async (values) => !disabled && onSubmit(values)}
+ >
+ {({ handleSubmit, handleBlur, handleChange, values, touched, errors, isSubmitting }) => (
+
+
+ {t('Blockheight')}
+
+ {t('The height of the chain at which the rescan process is started.')}
+
+
+
+
+
+
+ {errors.blockheight}
+
+
+
+
+ {isSubmitting && (
+
+ )}
+ {submitButtonText(isSubmitting)}
+
+
+
+ )}
+
+
+
+ {alert &&
{alert.message}}
+
+ {serviceInfo?.rescanning === true && {t('app.alert_rescan_in_progress')}}
+ t(isSubmitting ? 'Rescan timechain' : 'Rescan timechain')}
+ onSubmit={async (values) => {
+ const abortCtrl = new AbortController()
+
+ return startChainRescan(abortCtrl.signal, {
+ blockheight: values.blockheight,
+ })
+ }}
+ />
+
+
{t('settings.section_title_community')}
diff --git a/src/components/WalletCreationConfirmation.tsx b/src/components/WalletCreationConfirmation.tsx
new file mode 100644
index 000000000..55250067f
--- /dev/null
+++ b/src/components/WalletCreationConfirmation.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import * as rb from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { Formik } from 'formik'
+import Seedphrase from './Seedphrase'
+import ToggleSwitch from './ToggleSwitch'
+import { walletDisplayName } from '../utils'
+// TODO: currently reusing CreateWallet styles - move to own module.css?
+import styles from './CreateWallet.module.css'
+
+export type WalletInfo = {
+ walletFileName: string
+ password: string
+ seedphrase: string
+}
+
+interface WalletCreationInfoSummaryProps {
+ walletInfo: WalletInfo
+ revealSensitiveInfo: boolean
+}
+
+export const WalletInfoSummary = ({ walletInfo, revealSensitiveInfo }: WalletCreationInfoSummaryProps) => {
+ const { t } = useTranslation()
+ return (
+ <>
+
+
{t('create_wallet.confirmation_label_wallet_name')}
+
{walletDisplayName(walletInfo.walletFileName)}
+
+
+
+
+
{t('create_wallet.confirmation_label_password')}
+
+ {!revealSensitiveInfo ? 'randomrandom' : walletInfo.password}
+
+
+ {
+ setRevealSensitiveInfo(isToggled)
+ setSensitiveInfoWasRevealed(true)
+ }}
+ />
+
+
+ setUserConfirmed(isToggled)}
+ />
+
+
+
+ {isSubmitting && (
+
+ )}
+ {submitButtonText(isSubmitting)}
+
+
+
+ )}
+
+ )
+}
+
+export default WalletCreationConfirmation
diff --git a/src/components/WalletCreationForm.module.css b/src/components/WalletCreationForm.module.css
new file mode 100644
index 000000000..7221cc054
--- /dev/null
+++ b/src/components/WalletCreationForm.module.css
@@ -0,0 +1,9 @@
+.input {
+ height: 3.5rem;
+ width: 100%;
+}
+
+.button {
+ height: 3rem;
+ width: 100%;
+}
diff --git a/src/components/WalletCreationForm.tsx b/src/components/WalletCreationForm.tsx
new file mode 100644
index 000000000..14dde360d
--- /dev/null
+++ b/src/components/WalletCreationForm.tsx
@@ -0,0 +1,149 @@
+import { useCallback } from 'react'
+import * as rb from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { Formik, FormikErrors } from 'formik'
+import Sprite from './Sprite'
+import { sanitizeWalletName } from '../utils'
+import styles from './WalletCreationForm.module.css'
+
+export interface CreateWalletFormValues {
+ walletName: string
+ password: string
+ passwordConfirm: string
+}
+
+const initialCreateWalletFormValues: CreateWalletFormValues = {
+ walletName: '',
+ password: '',
+ passwordConfirm: '',
+}
+
+export type WalletNameAndPassword = { name: string; password: string }
+
+interface WalletCreationFormProps {
+ initialValues?: CreateWalletFormValues
+ submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
+ onCancel: () => void
+ onSubmit: (values: CreateWalletFormValues) => Promise
+}
+
+const WalletCreationForm = ({
+ initialValues = initialCreateWalletFormValues,
+ submitButtonText,
+ onCancel,
+ onSubmit,
+}: WalletCreationFormProps) => {
+ const { t, i18n } = useTranslation()
+
+ const validate = useCallback(
+ (values: CreateWalletFormValues) => {
+ const errors = {} as FormikErrors
+ if (!values.walletName) {
+ errors.walletName = t('create_wallet.feedback_invalid_wallet_name')
+ }
+ if (!values.password) {
+ errors.password = t('create_wallet.feedback_invalid_password')
+ }
+ if (!values.passwordConfirm || values.password !== values.passwordConfirm) {
+ errors.passwordConfirm = t('create_wallet.feedback_invalid_password_confirm')
+ }
+ return errors
+ },
+ [t]
+ )
+
+ return (
+ {
+ await onSubmit({ ...values, walletName: sanitizeWalletName(values.walletName) })
+ }}
+ >
+ {({ handleSubmit, handleChange, handleBlur, values, touched, errors, isSubmitting }) => (
+
+
+ {t('create_wallet.label_wallet_name')}
+
+ {t('create_wallet.feedback_valid')}
+ {errors.walletName}
+
+
+ {t('create_wallet.label_password')}
+
+ {t('create_wallet.feedback_valid')}
+ {errors.password}
+
+
+ {t('create_wallet.label_password_confirm')}
+
+ {t('create_wallet.feedback_valid')}
+ {errors.passwordConfirm}
+
+
+ {isSubmitting ? (
+
+
+ {submitButtonText(isSubmitting)}
+
+ ) : (
+ submitButtonText(isSubmitting)
+ )}
+
+ {isSubmitting && (
+
+
{t('create_wallet.hint_duration_text')}
+
+
0,
@@ -244,10 +248,23 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
data-testid="new-wallet-btn"
>
-
+
{t('wallets.button_new_wallet')}
+
+
+
+ {t('wallets.button_import_wallet')}
+
+