Merge branch '765-ui-implement-utxo-selection-modal' into 773-ui-show…

…-selected-utxos-before-performing-transaction

docker/regtest/docker-compose-common.yml

@@ -1,4 +1,3 @@
-version: "3"
 
 services:
 

docker/regtest/docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 
 services:
 

docker/regtest/prepare-setup.sh

@@ -5,10 +5,10 @@
 # This script prepares the regtest environment.
 #
 # The output of this script is a ".env.generated" file
-# to be used in when running docker-compose.
+# to be used in when running `docker compose`.
 # e.g. 
 # ```
-# docker-compose --env-file .env.generated --file docker-compose.yml up
+# docker compose --env-file .env.generated --file docker-compose.yml up
 # ```
 #
 ###

package.json

@@ -58,11 +58,11 @@
     "format": "prettier --write --no-error-on-unmatched-pattern 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
     "version": "node scripts/changelog.mjs && git checkout -b \"prepare-v${npm_package_version}-$(date +%s)\" && git add --all && git commit --message \"chore(release): v${npm_package_version}\" && git push --set-upstream origin $(git branch --show-current)",
     "postversion": "which gh && gh pr create --title \"chore(release): v${npm_package_version}\" --body \"Prepares the v${npm_package_version} release.\" --assignee @me --label release --repo joinmarket-webui/jam --draft",
-    "regtest:build": "npm run regtest:clear && docker-compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml build --pull",
+    "regtest:build": "npm run regtest:clear && docker compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml build --pull",
     "regtest:rebuild": "npm run regtest:build -- --no-cache",
-    "regtest:clear": "docker-compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml down --volumes --remove-orphans",
-    "regtest:up": "./docker/regtest/prepare-setup.sh && docker-compose --env-file docker/regtest/.env.generated --file docker/regtest/docker-compose.yml up",
-    "regtest:down": "docker-compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml down",
+    "regtest:clear": "docker compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml down --volumes --remove-orphans",
+    "regtest:up": "./docker/regtest/prepare-setup.sh && docker compose --env-file docker/regtest/.env.generated --file docker/regtest/docker-compose.yml up",
+    "regtest:down": "docker compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml down",
     "regtest:logs:jmwalletd": "docker exec -t jm_regtest_joinmarket tail -f /var/log/jam/jmwalletd_stdout.log",
     "regtest:logs:schedule": "docker exec -t jm_regtest_joinmarket tail -f /root/.joinmarket/logs/TUMBLE.schedule",
     "regtest:logs:directory_node": "docker exec -t jm_regtest_joinmarket_directory_node tail -f /var/log/jam/directory_node_stdout.log -n 200",

src/components/Jam.tsx

@@ -65,6 +65,7 @@ const addressValueKeys = (addressCount: number) =>
 const isValidAddress = (candidate: any) => {
   return typeof candidate === 'string' && candidate !== ''
 }
+
 const isAddressReused = (
   walletInfo: WalletInfo,
   destination: Api.BitcoinAddress,
@@ -341,7 +342,6 @@ export default function Jam({ wallet }: JamProps) {
     <>
       <PageTitle title={t('scheduler.title')} subtitle={t('scheduler.subtitle')} />
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
-
       {isLoading || !serviceInfo || !walletInfo || isWaitingSchedulerStart || isWaitingSchedulerStop ? (
         <rb.Placeholder as="div" animation="wave">
           <rb.Placeholder xs={12} className={styles['input-loader']} />
@@ -545,6 +545,7 @@ export default function Jam({ wallet }: JamProps) {
                           >
                             <div className="d-flex justify-content-center align-items-center">
                               {t('scheduler.button_start')}
+                              <Sprite symbol="caret-right" width="24" height="24" className="ms-1" />
                             </div>
                           </rb.Button>
                         </rb.Form>

src/components/Modal.tsx

@@ -10,7 +10,9 @@ type BaseModalProps = {
   onCancel: () => void
   backdrop?: rb.ModalProps['backdrop']
   size?: rb.ModalProps['size']
-  showCloseButtonAndRemoveClassName?: boolean
+  showCloseButton?: boolean
+  headerClassName?: string
+  titleClassName?: string
 }
 const BaseModal = ({
   isShown,
@@ -19,7 +21,9 @@ const BaseModal = ({
   onCancel,
   size,
   backdrop = 'static',
-  showCloseButtonAndRemoveClassName = false,
+  showCloseButton = false,
+  headerClassName,
+  titleClassName,
 }: PropsWithChildren<BaseModalProps>) => {
   return (
     <rb.Modal
@@ -33,11 +37,8 @@ const BaseModal = ({
       size={size}
       className={styles.modal}
     >
-      <rb.Modal.Header
-        className={!showCloseButtonAndRemoveClassName && styles['modal-header']}
-        closeButton={showCloseButtonAndRemoveClassName}
-      >
-        <rb.Modal.Title className={!showCloseButtonAndRemoveClassName && styles['modal-title']}>{title}</rb.Modal.Title>
+      <rb.Modal.Header className={`${styles['modal-header']} ${headerClassName}`} closeButton={showCloseButton}>
+        <rb.Modal.Title className={`${styles['modal-title']} ${titleClassName}`}>{title}</rb.Modal.Title>
       </rb.Modal.Header>
       {children}
     </rb.Modal>

src/components/Send/AmountInputField.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import { useField, useFormikContext } from 'formik'
@@ -35,6 +35,25 @@ export const AmountInputField = ({
   const form = useFormikContext<any>()
   const ref = useRef<HTMLInputElement>(null)
 
+  //Effect to change the field value whenever the sourceJarBalance changes (sourceJarBalance will change when quick freeze/unfreeze is performed or different source jar is selected)
+  useEffect(() => {
+    if (!sourceJarBalance) return
+
+    const currentValue = formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats)
+
+    if (field.value?.isSweep && field.value.displayValue !== currentValue) {
+      form.setFieldValue(
+        field.name,
+        {
+          value: 0,
+          isSweep: true,
+          displayValue: formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats),
+        },
+        true,
+      )
+    }
+  }, [sourceJarBalance, field, form])
+
   return (
     <>
       <rb.Form.Group className="mb-4" controlId={name}>

src/components/Send/SendForm.tsx

@@ -228,6 +228,8 @@ interface InnerSendFormProps {
   feeConfigValues?: FeeValues
   reloadFeeConfigValues: () => void
   disabled?: boolean
+  isDisplayReloadInShowUtxos: boolean
+  setIsDisplayReloadInShowUtxos: (arg: boolean) => void
 }
 
 const InnerSendForm = ({
@@ -241,6 +243,8 @@ const InnerSendForm = ({
   feeConfigValues,
   reloadFeeConfigValues,
   disabled = false,
+  isDisplayReloadInShowUtxos,
+  setIsDisplayReloadInShowUtxos,
 }: InnerSendFormProps) => {
   const { t } = useTranslation()
   const serviceInfo = useServiceInfo()
@@ -279,6 +283,8 @@ const InnerSendForm = ({
           isLoading={isLoading}
           disabled={disabled}
           variant={showCoinjoinPreconditionViolationAlert ? 'warning' : 'default'}
+          isDisplayReloadInShowUtxos={isDisplayReloadInShowUtxos}
+          setIsDisplayReloadInShowUtxos={setIsDisplayReloadInShowUtxos}
         />
         {showCoinjoinPreconditionViolationAlert && (
           <div className="mb-4">
@@ -380,6 +386,8 @@ type SendFormProps = Omit<InnerSendFormProps, 'props' | 'className'> & {
   formRef?: React.Ref<FormikProps<SendFormValues>>
   blurred?: boolean
   wallet: CurrentWallet
+  isDisplayReloadInShowUtxos: boolean
+  setIsDisplayReloadInShowUtxos: (arg: boolean) => void
 }
 
 export const SendForm = ({

src/components/Send/ShowUtxos.module.css

@@ -9,7 +9,7 @@
 }
 
 .depositUtxo {
-  background-color: none !important;
+  background-color: var(--bs-body-bg) !important;
   color: var(--bs-modal-color) !important;
 }
 
@@ -77,3 +77,12 @@
 .utxoListDisplayHeight {
   max-height: 17.6rem;
 }
+
+.customHeaderClass {
+  background-color: var(--bs-gray-800) !important;
+  padding: var(--bs-modal-header-padding) !important;
+}
+
+.customTitleClass {
+  color: var(--bs-heading-color) !important;
+}