From ce1b6ac81f2e5b7d8edcc5dbc48d5ca4c5ea0289 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 11 Sep 2023 11:12:31 +0200
Subject: [PATCH 1/5] fix(import): apply upper limit to gaplimit value on
 import

---
 src/components/ImportWallet.tsx      | 31 +++++++++++++++++++++++-----
 src/i18n/locales/en/translation.json |  2 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
index 2dd571f15..759aca017 100644
--- a/src/components/ImportWallet.tsx
+++ b/src/components/ImportWallet.tsx
@@ -16,7 +16,13 @@ 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 {
+  SEGWIT_ACTIVATION_BLOCK,
+  DUMMY_MNEMONIC_PHRASE,
+  JM_WALLET_FILE_EXTENSION,
+  walletDisplayName,
+  isValidNumber,
+} from '../utils'
 import { JM_GAPLIMIT_DEFAULT, JM_GAPLIMIT_CONFIGKEY } from '../constants/config'
 
 type ImportWalletDetailsFormValues = {
@@ -32,6 +38,15 @@ const GAPLIMIT_SUGGESTIONS = {
 
 const MIN_BLOCKHEIGHT_VALUE = 0
 const MIN_GAPLIMIT_VALUE = 1
+/**
+ * Maximum gaplimit value for importing an existing wallet.
+ * This value represents an upper limit based on declining performance of JM when many
+ * addresses have to be monitored. On network `regtest`, importing 10_000 addresses in
+ * an empty wallet takes ~10min and requesting the `/display` endpoint takes another
+ * ~10min. At this point, JM becomes practically unusable. However, goal is to find a
+ * balance between usability and freedom of users to do what they are trying to do.
+ */
+const MAX_GAPLIMIT_VALUE = 10_000
 
 const initialImportWalletDetailsFormValues: ImportWalletDetailsFormValues = isDevMode()
   ? {
@@ -69,14 +84,19 @@ const ImportWalletDetailsForm = ({
         errors.mnemonicPhrase = t<string>('import_wallet.import_details.feedback_invalid_menmonic_phrase')
       }
 
-      if (typeof values.blockheight !== 'number' || values.blockheight < MIN_BLOCKHEIGHT_VALUE) {
+      if (!isValidNumber(values.blockheight) || values.blockheight < MIN_BLOCKHEIGHT_VALUE) {
         errors.blockheight = t('import_wallet.import_details.feedback_invalid_blockheight', {
-          min: MIN_BLOCKHEIGHT_VALUE,
+          min: MIN_BLOCKHEIGHT_VALUE.toLocaleString(),
         })
       }
-      if (typeof values.gaplimit !== 'number' || values.gaplimit < MIN_GAPLIMIT_VALUE) {
+      if (
+        !isValidNumber(values.gaplimit) ||
+        values.gaplimit < MIN_GAPLIMIT_VALUE ||
+        values.gaplimit > MAX_GAPLIMIT_VALUE
+      ) {
         errors.gaplimit = t('import_wallet.import_details.feedback_invalid_gaplimit', {
-          min: MIN_GAPLIMIT_VALUE,
+          min: MIN_GAPLIMIT_VALUE.toLocaleString(),
+          max: MAX_GAPLIMIT_VALUE.toLocaleString(),
         })
       }
       return errors
@@ -192,6 +212,7 @@ const ImportWalletDetailsForm = ({
                   isValid={touched.gaplimit && !errors.gaplimit}
                   isInvalid={touched.gaplimit && !!errors.gaplimit}
                   min={MIN_GAPLIMIT_VALUE}
+                  max={MAX_GAPLIMIT_VALUE}
                   step={1}
                   required
                 />
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 6f5a99605..b1b4b7f00 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -168,7 +168,7 @@
       "feedback_invalid_blockheight": "Please provide a valid blockheight value greater than or equal to {{ min }}.",
       "label_gaplimit": "Address import limit",
       "description_gaplimit": "The amount of addresses that are imported per jar. Set to the highest address index used in any of the jars. Increase this number if your wallet is heavily used.",
-      "feedback_invalid_gaplimit": "Please provide a valid gaplimit value greater than or equal to {{ min }}.",
+      "feedback_invalid_gaplimit": "Please provide a valid gaplimit value between {{ min }} and {{ max }}.",
       "text_button_submit": "Review",
       "text_button_submitting": "Review"
     },

From 592bbffcc14a20a6ba0c0d1b3697cd2220a996c2 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 11 Sep 2023 11:34:18 +0200
Subject: [PATCH 2/5] fix(import): apply upper limit to blockheight value on
 import

---
 src/components/ImportWallet.tsx      | 17 ++++++++++++++++-
 src/i18n/locales/en/translation.json |  4 ++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
index 759aca017..00c36b671 100644
--- a/src/components/ImportWallet.tsx
+++ b/src/components/ImportWallet.tsx
@@ -37,6 +37,16 @@ const GAPLIMIT_SUGGESTIONS = {
 }
 
 const MIN_BLOCKHEIGHT_VALUE = 0
+/**
+ * Maximum blockheight value.
+ * Value choosen based on estimation of blockheight in tge year 2140 (plus some buffer):
+ * 365 × 144 × (2140 - 2009) = 6_885_360 = ~7_000_000
+ * This is necessary because javascript does not handle large values too well,
+ * and the `/rescanblockchain` errors. Not to mention that a value beyond the current
+ * height does not make any sense in the first place.
+ */
+const MAX_BLOCKHEIGHT_VALUE = 10_000_000
+
 const MIN_GAPLIMIT_VALUE = 1
 /**
  * Maximum gaplimit value for importing an existing wallet.
@@ -84,7 +94,11 @@ const ImportWalletDetailsForm = ({
         errors.mnemonicPhrase = t<string>('import_wallet.import_details.feedback_invalid_menmonic_phrase')
       }
 
-      if (!isValidNumber(values.blockheight) || values.blockheight < MIN_BLOCKHEIGHT_VALUE) {
+      if (
+        !isValidNumber(values.blockheight) ||
+        values.blockheight < MIN_BLOCKHEIGHT_VALUE ||
+        values.blockheight > MAX_BLOCKHEIGHT_VALUE
+      ) {
         errors.blockheight = t('import_wallet.import_details.feedback_invalid_blockheight', {
           min: MIN_BLOCKHEIGHT_VALUE.toLocaleString(),
         })
@@ -182,6 +196,7 @@ const ImportWalletDetailsForm = ({
                   isValid={touched.blockheight && !errors.blockheight}
                   isInvalid={touched.blockheight && !!errors.blockheight}
                   min={MIN_BLOCKHEIGHT_VALUE}
+                  max={MAX_BLOCKHEIGHT_VALUE}
                   step={1_000}
                   required
                 />
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index b1b4b7f00..d22b8b77f 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -165,10 +165,10 @@
       "import_options": "Import options",
       "label_blockheight": "Rescan height",
       "description_blockheight": "The blockheight at which the rescan process starts to search for your funds. The earlier the wallet has been created, the lower this value should be.",
-      "feedback_invalid_blockheight": "Please provide a valid blockheight value greater than or equal to {{ min }}.",
+      "feedback_invalid_blockheight": "Please provide a valid value between {{ min }} and the current blockheight.",
       "label_gaplimit": "Address import limit",
       "description_gaplimit": "The amount of addresses that are imported per jar. Set to the highest address index used in any of the jars. Increase this number if your wallet is heavily used.",
-      "feedback_invalid_gaplimit": "Please provide a valid gaplimit value between {{ min }} and {{ max }}.",
+      "feedback_invalid_gaplimit": "Please provide a valid value between {{ min }} and {{ max }}.",
       "text_button_submit": "Review",
       "text_button_submitting": "Review"
     },

From aa144f2875b35f9b952ddeacb32ead579656fade Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 11 Sep 2023 13:56:49 +0200
Subject: [PATCH 3/5] ui(import): display warning on high gaplimit values on
 import

---
 src/components/ImportWallet.tsx      | 302 ++++++++++++++++-----------
 src/i18n/locales/en/translation.json |   1 +
 2 files changed, 184 insertions(+), 119 deletions(-)

diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
index 00c36b671..9525097c7 100644
--- a/src/components/ImportWallet.tsx
+++ b/src/components/ImportWallet.tsx
@@ -57,6 +57,21 @@ const MIN_GAPLIMIT_VALUE = 1
  * balance between usability and freedom of users to do what they are trying to do.
  */
 const MAX_GAPLIMIT_VALUE = 10_000
+/**
+ * A gaplimit threshold at which a warning is displayed that with the given value a
+ * decline in performance is to be expected. Importing 500 addresses (per jar!) leads to
+ * the `/display` endpoint taking more than ~15s.
+ */
+const GAPLIMIT_WARN_THRESHOLD = 250
+
+const GaplimitWarning = () => {
+  const { t } = useTranslation()
+  return (
+    <rb.Alert variant="warning" className="d-flex align-items-center">
+      {t('import_wallet.import_details.alert_high_gaplimit_value')}
+    </rb.Alert>
+  )
+}
 
 const initialImportWalletDetailsFormValues: ImportWalletDetailsFormValues = isDevMode()
   ? {
@@ -130,129 +145,155 @@ const ImportWalletDetailsForm = ({
         errors,
         isSubmitting,
         submitCount,
-      }) => (
-        <rb.Form onSubmit={handleSubmit} noValidate lang={i18n.resolvedLanguage || i18n.language}>
-          <MnemonicPhraseInput
-            mnemonicPhrase={values.mnemonicPhrase}
-            onChange={(val) => setFieldValue('mnemonicPhrase', val, true)}
-            isDisabled={(_) => isSubmitting}
-          />
-          {!!errors.mnemonicPhrase && (
-            <>
-              <div
-                className={classNames('mb-2', 'text-danger', {
-                  'd-none': submitCount === 0,
-                })}
+      }) => {
+        const hasImportDetailsSectionErrors = !!errors.blockheight || !!errors.gaplimit
+        const showGaplimitWarning = !errors.gaplimit && values.gaplimit > GAPLIMIT_WARN_THRESHOLD
+        return (
+          <rb.Form onSubmit={handleSubmit} noValidate lang={i18n.resolvedLanguage || i18n.language}>
+            <MnemonicPhraseInput
+              mnemonicPhrase={values.mnemonicPhrase}
+              onChange={(val) => setFieldValue('mnemonicPhrase', val, true)}
+              isDisabled={(_) => isSubmitting}
+            />
+            {!!errors.mnemonicPhrase && (
+              <>
+                <div
+                  className={classNames('mb-2', 'text-danger', {
+                    'd-none': submitCount === 0,
+                  })}
+                >
+                  {errors.mnemonicPhrase}
+                </div>
+              </>
+            )}
+            {__dev_showFillerButton && (
+              <rb.Button
+                variant="outline-dark"
+                className="w-100 mb-4 position-relative"
+                onClick={() => setFieldValue('mnemonicPhrase', DUMMY_MNEMONIC_PHRASE, true)}
+                disabled={isSubmitting}
               >
-                {errors.mnemonicPhrase}
-              </div>
-            </>
-          )}
-          {__dev_showFillerButton && (
-            <rb.Button
-              variant="outline-dark"
-              className="w-100 mb-4 position-relative"
-              onClick={() => setFieldValue('mnemonicPhrase', DUMMY_MNEMONIC_PHRASE, true)}
-              disabled={isSubmitting}
+                Fill with dummy mnemonic phrase
+                <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">
+                  dev
+                </span>
+              </rb.Button>
+            )}
+            <Accordion
+              title={
+                <div
+                  className={classNames('d-flex align-items-center', {
+                    'text-danger': hasImportDetailsSectionErrors,
+                  })}
+                >
+                  {(hasImportDetailsSectionErrors || showGaplimitWarning) && (
+                    <div
+                      className={classNames('badge rounded-pill text-dark p-0 me-2', {
+                        'bg-warning': !hasImportDetailsSectionErrors && showGaplimitWarning,
+                        'bg-danger': hasImportDetailsSectionErrors,
+                      })}
+                    >
+                      <Sprite symbol="warn" width="20" height="20" />
+                    </div>
+                  )}
+                  {t('import_wallet.import_details.import_options')}
+                </div>
+              }
+              defaultOpen={true}
             >
-              Fill with dummy mnemonic phrase
-              <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">
-                dev
-              </span>
-            </rb.Button>
-          )}
-          <Accordion
-            title={
-              <span
-                className={classNames({
-                  'text-danger': !!errors.blockheight || !!errors.gaplimit,
-                })}
-              >
-                {t('import_wallet.import_details.import_options')}
-              </span>
-            }
-            defaultOpen={true}
-          >
-            <rb.Form.Group controlId="blockheight" className="mb-4">
-              <rb.Form.Label>{t('import_wallet.import_details.label_blockheight')}</rb.Form.Label>
-              <rb.Form.Text className="d-block text-secondary mb-2">
-                {t('import_wallet.import_details.description_blockheight')}
-              </rb.Form.Text>
-              <rb.InputGroup hasValidation>
-                <rb.InputGroup.Text id="blockheight-addon1">
-                  <Sprite symbol="block" width="24" height="24" name="Block" />
-                </rb.InputGroup.Text>
-                <rb.Form.Control
-                  aria-label={t('import_wallet.import_details.label_blockheight')}
-                  className="slashed-zeroes"
-                  name="blockheight"
-                  type="number"
-                  placeholder="0"
-                  size="lg"
-                  value={values.blockheight}
-                  disabled={isSubmitting}
-                  onBlur={handleBlur}
-                  onChange={handleChange}
-                  isValid={touched.blockheight && !errors.blockheight}
-                  isInvalid={touched.blockheight && !!errors.blockheight}
-                  min={MIN_BLOCKHEIGHT_VALUE}
-                  max={MAX_BLOCKHEIGHT_VALUE}
-                  step={1_000}
-                  required
-                />
-                <rb.Form.Control.Feedback type="invalid">{errors.blockheight}</rb.Form.Control.Feedback>
-              </rb.InputGroup>
-            </rb.Form.Group>
-            <rb.Form.Group controlId="gaplimit" className="mb-4">
-              <rb.Form.Label>{t('import_wallet.import_details.label_gaplimit')}</rb.Form.Label>
-
-              <rb.Form.Text className="d-block text-secondary mb-2">
-                {t('import_wallet.import_details.description_gaplimit')}
-              </rb.Form.Text>
-              <rb.InputGroup hasValidation>
-                <rb.InputGroup.Text id="gaplimit-addon1">
-                  <Sprite symbol="gaplimit" width="24" height="24" name="Gaplimit" />
-                </rb.InputGroup.Text>
-                <rb.Form.Control
-                  aria-label={t('import_wallet.import_details.label_gaplimit')}
-                  className="slashed-zeroes"
-                  name="gaplimit"
-                  type="number"
-                  placeholder="1"
-                  size="lg"
-                  value={values.gaplimit}
-                  disabled={isSubmitting}
-                  onBlur={handleBlur}
-                  onChange={handleChange}
-                  isValid={touched.gaplimit && !errors.gaplimit}
-                  isInvalid={touched.gaplimit && !!errors.gaplimit}
-                  min={MIN_GAPLIMIT_VALUE}
-                  max={MAX_GAPLIMIT_VALUE}
-                  step={1}
-                  required
-                />
-                <rb.Form.Control.Feedback type="invalid">{errors.gaplimit}</rb.Form.Control.Feedback>
-              </rb.InputGroup>
-            </rb.Form.Group>
-          </Accordion>
-          <rb.Button className="w-100 mb-4" variant="dark" size="lg" type="submit" disabled={isSubmitting}>
-            <div className="d-flex justify-content-center align-items-center">
-              {isSubmitting && (
-                <rb.Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" className="me-2" />
-              )}
-              {submitButtonText(isSubmitting)}
-            </div>
-          </rb.Button>
-          <div className="d-flex mb-4 gap-4">
-            <rb.Button variant="none" hidden={isSubmitting} disabled={isSubmitting} onClick={() => onCancel()}>
+              <rb.Form.Group controlId="blockheight" className="mb-4">
+                <rb.Form.Label>{t('import_wallet.import_details.label_blockheight')}</rb.Form.Label>
+                <rb.Form.Text className="d-block text-secondary mb-2">
+                  {t('import_wallet.import_details.description_blockheight')}
+                </rb.Form.Text>
+                <rb.InputGroup hasValidation>
+                  <rb.InputGroup.Text id="blockheight-addon1">
+                    <Sprite symbol="block" width="24" height="24" name="Block" />
+                  </rb.InputGroup.Text>
+                  <rb.Form.Control
+                    aria-label={t('import_wallet.import_details.label_blockheight')}
+                    className="slashed-zeroes"
+                    name="blockheight"
+                    type="number"
+                    placeholder="0"
+                    size="lg"
+                    value={values.blockheight}
+                    disabled={isSubmitting}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    isValid={touched.blockheight && !errors.blockheight}
+                    isInvalid={touched.blockheight && !!errors.blockheight}
+                    min={MIN_BLOCKHEIGHT_VALUE}
+                    max={MAX_BLOCKHEIGHT_VALUE}
+                    step={1_000}
+                    required
+                  />
+                  <rb.Form.Control.Feedback type="invalid">{errors.blockheight}</rb.Form.Control.Feedback>
+                </rb.InputGroup>
+              </rb.Form.Group>
+              <rb.Form.Group controlId="gaplimit" className="mb-4">
+                <rb.Form.Label>{t('import_wallet.import_details.label_gaplimit')}</rb.Form.Label>
+
+                <rb.Form.Text className="d-block text-secondary mb-2">
+                  {t('import_wallet.import_details.description_gaplimit')}
+                </rb.Form.Text>
+                <rb.InputGroup hasValidation>
+                  <rb.InputGroup.Text id="gaplimit-addon1">
+                    <Sprite symbol="gaplimit" width="24" height="24" name="Gaplimit" />
+                  </rb.InputGroup.Text>
+                  <rb.Form.Control
+                    aria-label={t('import_wallet.import_details.label_gaplimit')}
+                    className="slashed-zeroes"
+                    name="gaplimit"
+                    type="number"
+                    placeholder="1"
+                    size="lg"
+                    value={values.gaplimit}
+                    disabled={isSubmitting}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    isValid={touched.gaplimit && !errors.gaplimit}
+                    isInvalid={touched.gaplimit && !!errors.gaplimit}
+                    min={MIN_GAPLIMIT_VALUE}
+                    max={MAX_GAPLIMIT_VALUE}
+                    step={1}
+                    required
+                  />
+                  <rb.Form.Control.Feedback type="invalid">{errors.gaplimit}</rb.Form.Control.Feedback>
+                </rb.InputGroup>
+                {showGaplimitWarning && (
+                  <rb.Alert variant="warning" className="d-flex align-items-center mt-2">
+                    {t('import_wallet.import_details.alert_high_gaplimit_value')}
+                  </rb.Alert>
+                )}
+              </rb.Form.Group>
+            </Accordion>
+            <rb.Button className="w-100 mb-4" variant="dark" size="lg" type="submit" disabled={isSubmitting}>
               <div className="d-flex justify-content-center align-items-center">
-                <Sprite symbol="arrow-left" width="20" height="20" className="me-2" />
-                {t('global.back')}
+                {isSubmitting && (
+                  <rb.Spinner
+                    as="span"
+                    animation="border"
+                    size="sm"
+                    role="status"
+                    aria-hidden="true"
+                    className="me-2"
+                  />
+                )}
+                {submitButtonText(isSubmitting)}
               </div>
             </rb.Button>
-          </div>
-        </rb.Form>
-      )}
+            <div className="d-flex mb-4 gap-4">
+              <rb.Button variant="none" hidden={isSubmitting} disabled={isSubmitting} onClick={() => onCancel()}>
+                <div className="d-flex justify-content-center align-items-center">
+                  <Sprite symbol="arrow-left" width="20" height="20" className="me-2" />
+                  {t('global.back')}
+                </div>
+              </rb.Button>
+            </div>
+          </rb.Form>
+        )
+      }}
     </Formik>
   )
 }
@@ -288,6 +329,8 @@ const ImportWalletConfirmation = ({
     [walletDetails, importDetails],
   )
 
+  const showGaplimitWarning = useMemo(() => importDetails.gaplimit > GAPLIMIT_WARN_THRESHOLD, [importDetails])
+
   return (
     <Formik
       initialValues={{
@@ -300,7 +343,22 @@ const ImportWalletConfirmation = ({
         <rb.Form onSubmit={handleSubmit} noValidate lang={i18n.resolvedLanguage || i18n.language}>
           <WalletInfoSummary walletInfo={walletInfo} revealSensitiveInfo={!isSubmitting && submitCount === 0} />
 
-          <Accordion title={t('import_wallet.import_details.import_options')}>
+          <Accordion
+            title={
+              <div className="d-flex align-items-center">
+                {showGaplimitWarning && (
+                  <div
+                    className={classNames('badge rounded-pill text-dark p-0 me-2', {
+                      'bg-warning': showGaplimitWarning,
+                    })}
+                  >
+                    <Sprite symbol="warn" width="20" height="20" />
+                  </div>
+                )}
+                {t('import_wallet.import_details.import_options')}
+              </div>
+            }
+          >
             <div className="mb-4">
               <div>{t('import_wallet.import_details.label_blockheight')}</div>
               <div className="text-secondary small">{t('import_wallet.import_details.description_blockheight')}</div>
@@ -310,6 +368,12 @@ const ImportWalletConfirmation = ({
               <div>{t('import_wallet.import_details.label_gaplimit')}</div>
               <div className="text-secondary small">{t('import_wallet.import_details.description_gaplimit')}</div>
               <div className="fs-4">{values.importDetails.gaplimit}</div>
+
+              {showGaplimitWarning && (
+                <rb.Alert variant="warning" className="d-flex align-items-center mt-2">
+                  {t('import_wallet.import_details.alert_high_gaplimit_value')}
+                </rb.Alert>
+              )}
             </div>
           </Accordion>
 
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index d22b8b77f..1efc5292d 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -169,6 +169,7 @@
       "label_gaplimit": "Address import limit",
       "description_gaplimit": "The amount of addresses that are imported per jar. Set to the highest address index used in any of the jars. Increase this number if your wallet is heavily used.",
       "feedback_invalid_gaplimit": "Please provide a valid value between {{ min }} and {{ max }}.",
+      "alert_high_gaplimit_value": "The given value results in many addresses being imported and an extreme decline in performance and responsiveness is to be expected.",
       "text_button_submit": "Review",
       "text_button_submitting": "Review"
     },

From 85a3b51b6252d623f00930e41cfa108359d1579a Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 11 Sep 2023 14:13:26 +0200
Subject: [PATCH 4/5] refactor(ui): add variant to Accordion component

---
 src/components/Accordion.tsx    | 34 +++++++++++++++++++++---
 src/components/ImportWallet.tsx | 46 +++------------------------------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
index 4da9a7327..5e5ede36a 100644
--- a/src/components/Accordion.tsx
+++ b/src/components/Accordion.tsx
@@ -1,15 +1,23 @@
-import React, { PropsWithChildren, useState } from 'react'
+import { ReactNode, PropsWithChildren, useState } from 'react'
+import classNames from 'classnames'
 import { useSettings } from '../context/SettingsContext'
 import * as rb from 'react-bootstrap'
 import Sprite from './Sprite'
 
 interface AccordionProps {
-  title: string | React.ReactNode
+  title: ReactNode | string
   defaultOpen?: boolean
   disabled?: boolean
+  variant?: 'warning' | 'danger'
 }
 
-const Accordion = ({ title, defaultOpen = false, disabled = false, children }: PropsWithChildren<AccordionProps>) => {
+const Accordion = ({
+  title,
+  defaultOpen = false,
+  disabled = false,
+  variant,
+  children,
+}: PropsWithChildren<AccordionProps>) => {
   const settings = useSettings()
   const [isOpen, setIsOpen] = useState(defaultOpen)
 
@@ -21,7 +29,25 @@ const Accordion = ({ title, defaultOpen = false, disabled = false, children }: P
         onClick={() => setIsOpen((current) => !current)}
         disabled={disabled}
       >
-        {title}
+        <div
+          className={classNames('d-flex align-items-center', {
+            'text-danger': variant === 'danger',
+          })}
+        >
+          {variant && (
+            <div
+              className={classNames('badge rounded-pill p-0 me-2', {
+                'text-dark': variant === 'warning',
+                'bg-warning': variant === 'warning',
+                'text-light': variant === 'danger',
+                'bg-danger': variant === 'danger',
+              })}
+            >
+              <Sprite symbol="warn" width="20" height="20" />
+            </div>
+          )}
+          {title}
+        </div>
         <Sprite symbol={`caret-${isOpen ? 'up' : 'down'}`} className="ms-1" width="20" height="20" />
       </rb.Button>
       <hr className="m-0 pb-4 text-secondary" />
diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
index 9525097c7..04751c1d3 100644
--- a/src/components/ImportWallet.tsx
+++ b/src/components/ImportWallet.tsx
@@ -64,15 +64,6 @@ const MAX_GAPLIMIT_VALUE = 10_000
  */
 const GAPLIMIT_WARN_THRESHOLD = 250
 
-const GaplimitWarning = () => {
-  const { t } = useTranslation()
-  return (
-    <rb.Alert variant="warning" className="d-flex align-items-center">
-      {t('import_wallet.import_details.alert_high_gaplimit_value')}
-    </rb.Alert>
-  )
-}
-
 const initialImportWalletDetailsFormValues: ImportWalletDetailsFormValues = isDevMode()
   ? {
       mnemonicPhrase: new Array<string>(12).fill(''),
@@ -180,25 +171,8 @@ const ImportWalletDetailsForm = ({
               </rb.Button>
             )}
             <Accordion
-              title={
-                <div
-                  className={classNames('d-flex align-items-center', {
-                    'text-danger': hasImportDetailsSectionErrors,
-                  })}
-                >
-                  {(hasImportDetailsSectionErrors || showGaplimitWarning) && (
-                    <div
-                      className={classNames('badge rounded-pill text-dark p-0 me-2', {
-                        'bg-warning': !hasImportDetailsSectionErrors && showGaplimitWarning,
-                        'bg-danger': hasImportDetailsSectionErrors,
-                      })}
-                    >
-                      <Sprite symbol="warn" width="20" height="20" />
-                    </div>
-                  )}
-                  {t('import_wallet.import_details.import_options')}
-                </div>
-              }
+              title={t('import_wallet.import_details.import_options')}
+              variant={hasImportDetailsSectionErrors ? 'danger' : showGaplimitWarning ? 'warning' : undefined}
               defaultOpen={true}
             >
               <rb.Form.Group controlId="blockheight" className="mb-4">
@@ -344,20 +318,8 @@ const ImportWalletConfirmation = ({
           <WalletInfoSummary walletInfo={walletInfo} revealSensitiveInfo={!isSubmitting && submitCount === 0} />
 
           <Accordion
-            title={
-              <div className="d-flex align-items-center">
-                {showGaplimitWarning && (
-                  <div
-                    className={classNames('badge rounded-pill text-dark p-0 me-2', {
-                      'bg-warning': showGaplimitWarning,
-                    })}
-                  >
-                    <Sprite symbol="warn" width="20" height="20" />
-                  </div>
-                )}
-                {t('import_wallet.import_details.import_options')}
-              </div>
-            }
+            title={t('import_wallet.import_details.import_options')}
+            variant={showGaplimitWarning ? 'warning' : undefined}
           >
             <div className="mb-4">
               <div>{t('import_wallet.import_details.label_blockheight')}</div>

From a39d78db187bb798ab7690a17ea1efc81e71aef6 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Tue, 12 Sep 2023 11:33:29 +0200
Subject: [PATCH 5/5] chore(i18n): adapt gaplimit warning

---
 src/i18n/locales/en/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 1efc5292d..2681dbb86 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -169,7 +169,7 @@
       "label_gaplimit": "Address import limit",
       "description_gaplimit": "The amount of addresses that are imported per jar. Set to the highest address index used in any of the jars. Increase this number if your wallet is heavily used.",
       "feedback_invalid_gaplimit": "Please provide a valid value between {{ min }} and {{ max }}.",
-      "alert_high_gaplimit_value": "The given value results in many addresses being imported and an extreme decline in performance and responsiveness is to be expected.",
+      "alert_high_gaplimit_value": "The given value causes many addresses to be imported, which can lead to a decline in performance and responsiveness.",
       "text_button_submit": "Review",
       "text_button_submitting": "Review"
     },