feat: Fidelity Bonds

src/components/App.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { isFeatureEnabled } from '../constants/features'
 import Wallets from './Wallets'
 import CreateWallet from './CreateWallet'
 import Jam from './Jam'
@@ -10,6 +11,7 @@ import Earn from './Earn'
 import Receive from './Receive'
 import CurrentWalletMagic from './CurrentWalletMagic'
 import CurrentWalletAdvanced from './CurrentWalletAdvanced'
+import FidelityBond from './FidelityBond'
 import Settings from './Settings'
 import Navbar from './Navbar'
 import Layout from './Layout'
@@ -129,6 +131,9 @@ export default function App() {
                     <Route path={routes.earn} element={<Earn />} />
                     <Route path={routes.receive} element={<Receive />} />
                     <Route path={routes.settings} element={<Settings stopWallet={stopWallet} />} />
+                    {isFeatureEnabled('fidelityBonds') && (
+                      <Route path={routes.fidelityBonds} element={<FidelityBond />} />
+                    )}
                   </>
                 )}
               </Route>

src/components/Cheatsheet.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { routes } from '../constants/routes'
 import Sprite from './Sprite'
+import { isFeatureEnabled } from '../constants/features'
 import styles from './Cheatsheet.module.css'
 
 interface CheatsheetProps {
@@ -41,6 +42,7 @@ function ListItem({ number, children, ...props }: PropsWithChildren<NumberedProp
 
 export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
   const { t } = useTranslation()
+  const featureFidelityBondsEnabled = isFeatureEnabled('fidelityBonds')
 
   return (
     <rb.Offcanvas className={styles.cheatsheet} show={show} onHide={onHide} placement="bottom" onClick={onHide}>
@@ -95,17 +97,22 @@ export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
             </h6>
             <div className="small text-secondary">{t('cheatsheet.item_2.description')}</div>
           </ListItem>
-          <ListItem number={3} className={styles['upcoming-feature']}>
+          <ListItem number={3} className={featureFidelityBondsEnabled ? '' : styles['upcoming-feature']}>
             <h6>
               <Trans i18nKey="cheatsheet.item_3.title">
-                Optional: <Link to={routes.earn}>Lock</Link> funds in a fidelity bond.
+                Optional: <Link to={featureFidelityBondsEnabled ? routes.fidelityBonds : routes.home}>Lock</Link> funds
+                in a fidelity bond.
               </Trans>
             </h6>
             <div className="small text-secondary">
               {t('cheatsheet.item_3.description')}
-              <br />
               {/* the following phrase is intentionally not translated because it will be removed soon */}
-              <strong>Feature not implemented yet. Coming soon!</strong>
+              {!featureFidelityBondsEnabled && (
+                <>
+                  <br />
+                  <strong>Feature not implemented yet. Coming soon!</strong>
+                </>
+              )}
             </div>
           </ListItem>
           <ListItem number={4}>

src/components/CopyButton.tsx

@@ -84,6 +84,7 @@ export function CopyButton({
   successTextTimeout = 1_500,
   className,
   showSprites = true,
+  ...props
 }: CopyButtonProps) {
   const [showValueCopiedConfirmation, setShowValueCopiedConfirmation] = useState(false)
   const [valueCopiedFlag, setValueCopiedFlag] = useState(0)
@@ -101,6 +102,7 @@ export function CopyButton({
 
   return (
     <Copyable
+      {...props}
       className={`btn ${className || ''}`}
       value={value}
       onError={onError}

src/components/CurrentWalletAdvanced.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 // @ts-ignore
 import DisplayAccounts from './DisplayAccounts'
 // @ts-ignore
@@ -9,12 +10,16 @@ import DisplayAccountUTXOs from './DisplayAccountUTXOs'
 import DisplayUTXOs from './DisplayUTXOs'
 // @ts-ignore
 import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
+import { isFeatureEnabled } from '../constants/features'
+import { routes } from '../constants/routes'
 import styles from './CurrentWalletAdvanced.module.css'
 
 type Utxos = any[]
 type Alert = { message: string; variant: string }
 
 export default function CurrentWalletAdvanced() {
+  const featureFidelityBondsEnabled = isFeatureEnabled('fidelityBonds')
+
   const { t } = useTranslation()
   const currentWallet = useCurrentWallet()
   const walletInfo = useCurrentWalletInfo()
@@ -43,8 +48,8 @@ export default function CurrentWalletAdvanced() {
           const unspentOutputs = info.data.utxos.utxos
           setUtxos(unspentOutputs)
 
-          const lockedOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
-          setFidelityBonds(lockedOutputs)
+          const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
+          setFidelityBonds(fbOutputs)
         }
       })
       .catch((err) => {
@@ -76,21 +81,45 @@ export default function CurrentWalletAdvanced() {
       {!isLoading && walletInfo && (
         <DisplayAccounts accounts={walletInfo.data.display.walletinfo.accounts} className="mb-4" />
       )}
-      {!!fidelityBonds?.length && (
-        <div className="mt-5 mb-3 pe-3">
-          <h5>{t('current_wallet_advanced.title_fidelity_bonds')}</h5>
-          <DisplayUTXOs utxos={fidelityBonds} className="pe-2" />
-        </div>
-      )}
+
+      <div className="mt-5 mb-3">
+        <h5>{t('current_wallet_advanced.title_fidelity_bonds')}</h5>
+        {isLoading && (
+          <div>
+            <rb.Placeholder as="div" animation="wave" className={styles['current-wallet-placeholder-container']}>
+              <rb.Placeholder xs={12} className={styles['current-wallet-placeholder']} />
+            </rb.Placeholder>
+          </div>
+        )}
+
+        {!isLoading && fidelityBonds && (
+          <>
+            {fidelityBonds.length === 0 ? (
+              <rb.Alert variant="info">
+                <>
+                  <Trans i18nKey="fidelity_bond.alert_no_fidelity_bonds" as="span">
+                    No Fidelity Bond present.
+                  </Trans>
+                  {featureFidelityBondsEnabled && (
+                    <>
+                      {' '}
+                      <Link to={routes.fidelityBonds}>
+                        <Trans i18nKey="current_wallet_advanced.link_fidelity_bonds_create_text" as="span">
+                          Create a Fidelity Bond.
+                        </Trans>
+                      </Link>
+                    </>
+                  )}
+                </>
+              </rb.Alert>
+            ) : (
+              <DisplayUTXOs utxos={fidelityBonds} />
+            )}
+          </>
+        )}
+      </div>
       <>
-        <rb.Button
-          variant="outline-dark"
-          disabled={isLoading}
-          onClick={() => {
-            setShowUTXO(!showUTXO)
-          }}
-          className={isLoading ? 'mt-3 mb-3 pe-auto' : 'mb-3'}
-        >
+        <rb.Button variant="outline-dark" disabled={isLoading} onClick={() => setShowUTXO(!showUTXO)} className="mb-3">
           {showUTXO ? t('current_wallet_advanced.button_hide_utxos') : t('current_wallet_advanced.button_show_utxos')}
         </rb.Button>
         <rb.Fade in={showUTXO} mountOnEnter={true} unmountOnExit={true}>

src/components/DisplayUTXOs.jsx

@@ -7,6 +7,7 @@ import Alert from './Alert'
 import { useSettings } from '../context/SettingsContext'
 import { useCurrentWallet } from '../context/WalletContext'
 import { useServiceInfo } from '../context/ServiceInfoContext'
+import { isLocked } from '../hooks/BalanceSummary'
 import * as Api from '../libs/JmWalletApi'
 
 const Utxo = ({ utxo, ...props }) => {
@@ -21,7 +22,7 @@ const Utxo = ({ utxo, ...props }) => {
   const isOperationEnabled = useCallback(() => {
     const noServiceIsRunning = serviceInfo && !serviceInfo.makerRunning && !serviceInfo.coinjoinInProgress
 
-    const isUnfreezeEnabled = !utxo.locktime || new Date(utxo.locktime).getTime() < Date.now()
+    const isUnfreezeEnabled = !isLocked(utxo)
     const allowedToExecute = !utxo.frozen || isUnfreezeEnabled
 
     return noServiceIsRunning && allowedToExecute

src/components/FidelityBond.module.css

@@ -0,0 +1,4 @@
+/* Firefox */
+.fidelity-bond input[type='number'] {
+  -moz-appearance: unset !important;
+}