select utxos UI done

joinmarket-webui · Jun 26, 2024 · 9464524 · 9464524
1 parent fca9d31
commit 9464524
Show file tree

Hide file tree

Showing 7 changed files with 449 additions and 31 deletions.
diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx
@@ -39,23 +39,28 @@ interface BalanceComponentProps {
   symbol?: JSX.Element
   showSymbol?: boolean
   frozen?: boolean
+  isColorChange?: boolean
+  frozenSymbol?: boolean
 }
 
 const BalanceComponent = ({
   symbol,
   showSymbol = true,
   frozen = false,
+  isColorChange = false,
+  frozenSymbol = true,
   children,
 }: PropsWithChildren<BalanceComponentProps>) => {
   return (
     <span
-      className={classNames(styles.balance, 'balance-hook', 'd-inline-flex align-items-center', {
+      className={classNames('balance-hook', 'd-inline-flex align-items-center', {
         [styles.frozen]: frozen,
+        [styles.balance]: !isColorChange,
       })}
     >
       {children}
       {showSymbol && symbol}
-      {frozen && FROZEN_SYMBOL}
+      {frozen && frozenSymbol && FROZEN_SYMBOL}
     </span>
   )
 }
@@ -75,7 +80,9 @@ const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
   return (
     <BalanceComponent symbol={BTC_SYMBOL} {...props}>
       <span
-        className={`${styles.bitcoinAmount} slashed-zeroes`}
+        className={classNames(`slashed-zeroes`, {
+          [styles.bitcoinAmount]: !props.isColorChange,
+        })}
         data-testid="bitcoin-amount"
         data-integer-part-is-zero={integerPartIsZero}
         data-fractional-part-starts-with-zero={fractionalPartStartsWithZero}
@@ -101,7 +108,11 @@ type SatsBalanceProps = Omit<BalanceComponentProps, 'symbol'> & { value: number
 const SatsBalance = ({ value, ...props }: SatsBalanceProps) => {
   return (
     <BalanceComponent symbol={SAT_SYMBOL} {...props}>
-      <span className={`${styles.satsAmount} slashed-zeroes`} data-testid="sats-amount" data-raw-value={value}>
+      <span
+        className={classNames(`slashed-zeroes`, { [styles.satsAmount]: !props.isColorChange })}
+        data-testid="sats-amount"
+        data-raw-value={value}
+      >
         {formatSats(value)}
       </span>
     </BalanceComponent>

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -10,6 +10,7 @@ type BaseModalProps = {
   onCancel: () => void
   backdrop?: rb.ModalProps['backdrop']
   size?: rb.ModalProps['size']
+  showCloseButtonAndRemoveClassName?: boolean
 }
 const BaseModal = ({
   isShown,
@@ -18,6 +19,7 @@ const BaseModal = ({
   onCancel,
   size,
   backdrop = 'static',
+  showCloseButtonAndRemoveClassName = false,
 }: PropsWithChildren<BaseModalProps>) => {
   return (
     <rb.Modal
@@ -31,8 +33,11 @@ const BaseModal = ({
       size={size}
       className={styles.modal}
     >
-      <rb.Modal.Header className={styles['modal-header']}>
-        <rb.Modal.Title className={styles['modal-title']}>{title}</rb.Modal.Title>
+      <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>
       {children}
     </rb.Modal>
@@ -65,9 +70,18 @@ const InfoModal = ({
 
 export type ConfirmModalProps = BaseModalProps & {
   onConfirm: () => void
+  disabled?: boolean
+  confirmVariant?: string
 }
 
-const ConfirmModal = ({ children, onCancel, onConfirm, ...baseModalProps }: PropsWithChildren<ConfirmModalProps>) => {
+const ConfirmModal = ({
+  children,
+  onCancel,
+  onConfirm,
+  disabled = false,
+  confirmVariant = 'outline-dark',
+  ...baseModalProps
+}: PropsWithChildren<ConfirmModalProps>) => {
   const { t } = useTranslation()
 
   return (
@@ -82,7 +96,7 @@ const ConfirmModal = ({ children, onCancel, onConfirm, ...baseModalProps }: Prop
           <Sprite symbol="cancel" width="26" height="26" />
           <div>{t('modal.confirm_button_reject')}</div>
         </rb.Button>
-        <rb.Button variant="outline-dark" onClick={() => onConfirm()}>
+        <rb.Button variant={confirmVariant} onClick={() => onConfirm()} disabled={disabled}>
           {t('modal.confirm_button_accept')}
         </rb.Button>
       </rb.Modal.Footer>

diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
@@ -13,6 +13,7 @@ import { CopyButton } from '../CopyButton'
 import LockdateForm, { LockdateFormProps } from './LockdateForm'
 import * as fb from './utils'
 import styles from './FidelityBondSteps.module.css'
+import ShowUtxos from './ShowUtxos'
 
 const cx = classnamesBind.bind(styles)
 
@@ -176,27 +177,7 @@ const SelectUtxos = ({ walletInfo, jar, utxos, selectedUtxos, onUtxoSelected, on
 
   return (
     <div className="d-flex flex-column gap-4">
-      <div className={styles.stepDescription}>
-        {t('earn.fidelity_bond.select_utxos.description', { jar: jarInitial(jar) })}
-      </div>
-      {utxos.map((utxo, index) => {
-        return (
-          <UtxoCard
-            key={index}
-            utxo={utxo}
-            status={walletInfo.addressSummary[utxo.address]?.status}
-            isSelectable={!utxo.frozen}
-            isSelected={fb.utxo.isInList(utxo, selectedUtxos)}
-            onClick={() => {
-              if (fb.utxo.isInList(utxo, selectedUtxos)) {
-                onUtxoDeselected(utxo)
-              } else {
-                onUtxoSelected(utxo)
-              }
-            }}
-          />
-        )
-      })}
+      <ShowUtxos utxos={utxos} index={jar} />
     </div>
   )
 }

diff --git a/src/components/fb/ShowUtxos.module.css b/src/components/fb/ShowUtxos.module.css
@@ -0,0 +1,75 @@
+.joinedUtxoAndCjout {
+  background-color: #27ae600d !important;
+  color: #27ae60 !important;
+}
+
+.frozenUtxo {
+  background-color: #2d9cdb0d !important;
+  color: #2d9cdb !important;
+}
+
+.depositUtxo {
+  background-color: none !important;
+  color: var(--bs-modal-color) !important;
+}
+
+.changeAndReuseUtxo {
+  background-color: #eb57570d !important;
+  color: #eb5757 !important;
+}
+
+.subTitle {
+  color: #777777 !important;
+}
+
+.utxoTagDeposit {
+  color: #999999;
+  border: 1px solid #bbbbbb;
+  background-color: #dedede !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagJoinedAndCjout {
+  border: 1px solid #27ae60;
+  background-color: #c6eed7 !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagFreeze {
+  border: 1px solid #2d9cdb;
+  background-color: #bce7ff !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagChangeAndReuse {
+  border: 1px solid #eb5757;
+  background-color: #fac7c7 !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.squareToggleButton {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid var(--bs-body-color);
+  margin-top: 0.45rem;
+}
+
+.selected {
+  visibility: visible !important;
+  background-color: var(--bs-body-color);
+}
+
+.squareFrozenToggleButton {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid #2d9cdb;
+  margin-top: 0.45rem;
+}