feat: Fidelity bonds in developer mode

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,8 @@ import Earn from './Earn'
 import Receive from './Receive'
 import CurrentWalletMagic from './CurrentWalletMagic'
 import CurrentWalletAdvanced from './CurrentWalletAdvanced'
+import FidelityBond from './FidelityBond'
+import { FidelityBondDevOnly } from './FidelityBondDevOnly'
 import Settings from './Settings'
 import Navbar from './Navbar'
 import Layout from './Layout'
@@ -129,6 +132,12 @@ export default function App() {
                     <Route path={routes.earn} element={<Earn />} />
                     <Route path={routes.receive} element={<Receive />} />
                     <Route path={routes.settings} element={<Settings />} />
+                    {isFeatureEnabled('fidelityBonds') && (
+                      <Route path={routes.fidelityBonds} element={<FidelityBond />} />
+                    )}
+                    {isFeatureEnabled('fidelityBondsDevOnly') && (
+                      <Route path={routes.fidelityBondsDevOnly} element={<FidelityBondDevOnly />} />
+                    )}
                   </>
                 )}
               </Route>

src/components/CopyButton.tsx

@@ -56,8 +56,9 @@ export function CopyButton({ value, onSuccess, onError, children, ...props }: Pr
 
 interface CopyButtonWithConfirmationProps extends CopyButtonProps {
   text: string
-  successText: string
-  successTextTimeout: number
+  successText?: string
+  successTextTimeout?: number
+  disabled?: boolean
 }
 
 export function CopyButtonWithConfirmation({

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()
@@ -76,21 +81,42 @@ 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/FidelityBond.module.css

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

src/components/FidelityBond.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import * as rb from 'react-bootstrap'
+
+// @ts-ignore
+import PageTitle from './PageTitle'
+import { isFeatureEnabled } from '../constants/features'
+
+import { routes } from '../constants/routes'
+import styles from './FidelityBond.module.css'
+
+export default function FidelityBond() {
+  const featureEnabled = isFeatureEnabled('fidelityBonds')
+  const featureAdvancedEnabled = isFeatureEnabled('fidelityBondsDevOnly')
+
+  const { t } = useTranslation()
+
+  if (!featureEnabled) {
+    return (
+      <div>
+        <h2>Feature not enabled</h2>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles['fidelity-bond']}>
+      <PageTitle title={t('fidelity_bond.title')} subtitle={t('fidelity_bond.subtitle')} />
+
+      <rb.Row>
+        <rb.Col>
+          <div className="mb-4">
+            <Trans i18nKey="fidelity_bond.description">
+              <a
+                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-secondary"
+              >
+                See the documentation about Fidelity Bonds
+              </a>{' '}
+              for more information.
+            </Trans>
+          </div>
+
+          <rb.Alert variant="danger" className="mb-4">
+            <Trans i18nKey="fidelity_bond.alert_warning_dev_mode">
+              Fidelity Bonds are currently only available in developer mode.
+              {featureAdvancedEnabled && (
+                <>
+                  {' '}
+                  <Link className="unstyled" to={routes.fidelityBondsDevOnly}>
+                    Switch to developer view.
+                  </Link>
+                </>
+              )}
+            </Trans>
+          </rb.Alert>
+        </rb.Col>
+      </rb.Row>
+    </div>
+  )
+}