Epic/redesign

src/components/Earn.tsx

@@ -27,8 +27,9 @@ import Sprite from './Sprite'
 import PageTitle from './PageTitle'
 import SegmentedTabs from './SegmentedTabs'
 import { CreateFidelityBond } from './fb/CreateFidelityBond'
-import { ExistingFidelityBond } from './fb/ExistingFidelityBond'
-import { RenewFidelityBondModal, SpendFidelityBondModal } from './fb/SpendFidelityBondModal'
+import { CreateFidelityBond2 } from './fb2/CreateFidelityBond'
+import { ExistingFidelityBond, CreatingFidelityBond } from './fb2/ExistingFidelityBond'
+import { RenewFidelityBondModal, SpendFidelityBondModal } from './fb2/SpendFidelityBondModal'
 import { EarnReportOverlay } from './EarnReport'
 import { OrderbookOverlay } from './Orderbook'
 import Balance from './Balance'
@@ -442,6 +443,10 @@ export default function Earn({ wallet }: EarnProps) {
   const [isWaitingMakerStop, setIsWaitingMakerStop] = useState(false)
   const [isShowReport, setIsShowReport] = useState(false)
   const [isShowOrderbook, setIsShowOrderbook] = useState(false)
+  const [timelockedAddress, setTimelockedAddress] = useState<Api.BitcoinAddress>()
+  const [lockDate, setLockDate] = useState<Api.Lockdate | null>(null)
+  const [amount, setAmount] = useState<Api.AmountSats>(0)
+  const [isCreatingFB, setIsCreatingFB] = useState(false)
 
   const [initialValues, setInitialValues] = useState(initialFormValues())
 
@@ -452,6 +457,11 @@ export default function Earn({ wallet }: EarnProps) {
   const [moveToJarFidelityBondId, setMoveToJarFidelityBondId] = useState<Api.UtxoId>()
   const [renewFidelityBondId, setRenewFidelityBondId] = useState<Api.UtxoId>()
 
+  const reset = () => {
+    setTimelockedAddress(undefined)
+    setLockDate(null)
+  }
+
   const isSufficientFundsAvailable = useMemo(
     () => (currentWalletInfo?.balanceSummary.calculatedAvailableBalanceInSats ?? 0) > 0,
     [currentWalletInfo],
@@ -707,19 +717,37 @@ export default function Earn({ wallet }: EarnProps) {
                     </ExistingFidelityBond>
                   )
                 })}
+                {isCreatingFB && (
+                  <CreatingFidelityBond timelockedAddress={timelockedAddress} lockDate={lockDate} amount={amount} />
+                )}
                 <>
                   {!serviceInfo?.makerRunning &&
                     !serviceInfo?.coinjoinInProgress &&
                     !serviceInfo?.rescanning &&
                     !isWaitingMakerStart &&
                     !isWaitingMakerStop &&
                     (!isLoading && currentWalletInfo ? (
-                      <CreateFidelityBond
-                        otherFidelityBondExists={fidelityBonds.length > 0}
-                        wallet={wallet}
-                        walletInfo={currentWalletInfo}
-                        onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
-                      />
+                      <>
+                        <CreateFidelityBond
+                          otherFidelityBondExists={fidelityBonds.length > 0}
+                          wallet={wallet}
+                          walletInfo={currentWalletInfo}
+                          onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
+                        />
+                        <CreateFidelityBond2
+                          otherFidelityBondExists={fidelityBonds.length > 0}
+                          wallet={wallet}
+                          walletInfo={currentWalletInfo}
+                          onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
+                          timelockedAddress={timelockedAddress}
+                          setTimelockedAddress={(address) => setTimelockedAddress(address)}
+                          lockDate={lockDate}
+                          setLockDate={(date) => setLockDate(date)}
+                          setAmount={(amount) => setAmount(amount)}
+                          setIsCreatingFB={(input) => setIsCreatingFB(input)}
+                          resetThisAsWell={() => reset()}
+                        />
+                      </>
                     ) : (
                       <rb.Placeholder as="div" animation="wave">
                         <rb.Placeholder xs={12} className={styles.fidelityBondsLoader} />

src/components/PaymentConfirmModal.tsx

@@ -24,7 +24,7 @@ const feeRange: (txFee: TxFee, txFeeFactor: number) => [number, number] = (txFee
   return [minFeeSatsPerVByte, maxFeeSatsPerVByte]
 }
 
-const useMiningFeeText = ({ tx_fees, tx_fees_factor }: Pick<FeeValues, 'tx_fees' | 'tx_fees_factor'>) => {
+export const useMiningFeeText = ({ tx_fees, tx_fees_factor }: Pick<FeeValues, 'tx_fees' | 'tx_fees_factor'>) => {
   const { t } = useTranslation()
 
   return useMemo(() => {

src/components/fb2/CreateFidelityBond.module.css

@@ -0,0 +1,132 @@
+.container {
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 0.3rem;
+  padding: 1.25rem;
+}
+
+:root[data-theme='dark'] .container {
+  border-color: var(--bs-gray-700);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.header .subtitleJar {
+  flex-shrink: 0;
+}
+
+.header .subtitle {
+  flex-shrink: 1;
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+.formMessageWhenBondAlreadyExists {
+  flex-shrink: 1;
+  font-size: 0.8rem;
+  color: var(--bs-gray-600);
+}
+
+.formMessageWhenBondAlreadyExists a {
+  color: inherit;
+}
+
+.header .title {
+  width: 100%;
+  font-size: 1.2rem;
+  color: var(--bs-body-color);
+}
+
+.header svg {
+  color: var(--bs-body-color);
+}
+
+.header :global .accordion-button:after {
+  display: none;
+}
+
+.successCheckmark {
+  width: '2rem';
+  height: '2rem';
+  background-color: 'rgba(39, 174, 96, 1)';
+  color: 'white';
+  border-radius: '50%';
+}
+
+.tabs {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+.tab {
+  cursor: pointer;
+  padding: 10px 20px;
+  color: var(--bs-white);
+  background-color: var(--bs-gray-800);
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:root[data-theme='dark'] .tab {
+  color: var(--bs-body-color);
+  border-color: var(--bs-gray-700);
+}
+
+.addressLabel {
+  color: var(--bs-gray-600);
+  font-size: 1rem;
+}
+
+.addressContent {
+  font-size: 1rem;
+  word-break: break-all;
+}
+
+.timelockedAddress {
+  text-align: left;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+.stepHeader {
+  display: flex;
+  align-items: center;
+}
+
+.stepHeader .stepTitle {
+  min-width: 8rem;
+}
+
+.stepHeader .stepSubtitle {
+  font-size: 0.8rem;
+}
+
+.stepCircle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.8rem;
+  border-radius: 100%;
+  background-color: var(--bs-gray-100);
+  color: var(--bs-gray-900);
+}
+
+.stepCircle .stepIcon {
+  position: absolute;
+  font-size: 0.8rem;
+}
+
+.tabs :global(.accordion-button.collapsed) .stepCircle {
+  background-color: var(--bs-gray-400);
+}
+
+.tabs :global(.accordion) {
+  --bs-accordion-active-color: var(--bs-white);
+  --bs-accordion-active-bg: var(--bs-gray-800);
+}