Add taker found prompt

frontend/src/components/TradeBox/Dialogs/ConfirmFiatReceived.tsx

@@ -9,7 +9,7 @@ import {
   Button,
 } from '@mui/material';
 import { Order } from '../../../models';
-import currencyDict from '../../../../static/assets/currencies.json';
+import currencies from '../../../../static/assets/currencies.json';
 import { pn } from '../../../utils';
 import { LoadingButton } from '@mui/lab';
 
@@ -29,7 +29,7 @@ export const ConfirmFiatReceivedDialog = ({
   onConfirmClick,
 }: ConfirmFiatReceivedDialogProps): JSX.Element => {
   const { t } = useTranslation();
-  const currencyCode = currencyDict[order.currency.toString()];
+  const currencyCode = currencies[order.currency.toString()];
   const amount = pn(parseFloat(parseFloat(order.amount).toFixed(order.currency == 1000 ? 8 : 4)));
 
   return (

frontend/src/components/TradeBox/Prompts/LockInvoice.tsx

@@ -1,36 +1,24 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
+import { Button, Grid, Link, Typography, TextField, Tooltip, useTheme } from '@mui/material';
-  Button,
-  Grid,
-  Link,
-  Typography,
-  TextField,
-  Tooltip,
-  useTheme,
-  Divider,
-} from '@mui/material';
 import { AccountBalanceWallet, ContentCopy } from '@mui/icons-material';
-import { NewTabIcon } from '../Icons';
+import { NewTabIcon } from '../../Icons';
 import QRCode from 'react-qr-code';
-import { Order } from '../../models';
+import { Order } from '../../../models';
-import { systemClient } from '../../services/System';
+import { systemClient } from '../../../services/System';
-import currencyDict from '../../../static/assets/currencies.json';
+import currencies from '../../../../static/assets/currencies.json';
-import stepXofY from './stepXofY';
-import { pn } from '../../utils';
 
-interface LockInvoiceBoxProps {
+interface LockInvoicePromptProps {
   order: Order;
   concept: 'bond' | 'escrow';
 }
 
-export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Element => {
+export const LockInvoicePrompt = ({ order, concept }: LockInvoicePromptProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const currencyCode = currencyDict[order.currency.toString()];
+  const currencyCode: string = currencies[`${order.currency}`];
 
   const invoice = concept === 'bond' ? order.bond_invoice : order.escrow_invoice;
-  const amountSats = concept === 'bond' ? order.bond_satoshis : order.escrow_satoshis;
   const helperText =
     concept === 'bond'
       ? t(
@@ -41,22 +29,6 @@ export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Ele
           { currencyCode },
         );
 
-  const Title = function () {
-    let text = `Lock {{amountSats}} Sats to ${order.is_maker ? 'PUBLISH' : 'TAKE'} order`;
-    if (concept === 'escrow') {
-      text = 'Lock {{amountSats}} Sats as collateral';
-    }
-    return (
-      <Typography color='primary' variant='subtitle1'>
-        <b>
-          {t(text, {
-            amountSats: pn(amountSats),
-          })}
-        </b>
-        {` ${stepXofY(order)}`}
-      </Typography>
-    );
-  };
   const CompatibleWalletsButton = function () {
     return (
       <Button
@@ -74,8 +46,8 @@ export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Ele
   };
 
   const depositHoursMinutes = function () {
-    const hours = parseInt(order.escrow_duration / 3600);
+    const hours = Math.floor(order.escrow_duration / 3600);
-    const minutes = parseInt((order.escrow_duration - hours * 3600) / 60);
+    const minutes = Math.floor((order.escrow_duration - hours * 3600) / 60);
     const dict = { deposit_timer_hours: hours, deposit_timer_minutes: minutes };
     return dict;
   };
@@ -93,12 +65,6 @@ export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Ele
 
   return (
     <Grid container spacing={1}>
-      <Grid item xs={12}>
-        <Title />
-      </Grid>
-
-      <Divider />
-
       <Grid item xs={12}>
         {concept === 'bond' ? <CompatibleWalletsButton /> : <ExpirationWarning />}
       </Grid>
@@ -145,4 +111,4 @@ export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Ele
   );
 };
 
-export default LockInvoiceBox;
+export default LockInvoicePrompt;

frontend/src/components/TradeBox/Prompts/TakerFound.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, Typography } from '@mui/material';
+import { Order } from '../../../models';
+import stepXofY from '../stepXofY';
+
+interface TakerFoundPrompProps {
+  order: Order;
+}
+
+export const TakerFoundPrompt = ({ order }: TakerFoundPrompProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const Title = function () {
+    return (
+      <Typography color='primary' variant='subtitle1'>
+        <b>{t('A taker has been found!')}</b>
+        {` ${stepXofY(order)}`}
+      </Typography>
+    );
+  };
+
+  return (
+    <Grid container spacing={1}>
+      <Grid item>
+        <Typography variant='body2'>
+          {t(
+            'Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.',
+          )}
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default TakerFoundPrompt;

frontend/src/components/TradeBox/Prompts/index.ts

@@ -0,0 +1,2 @@
+export { LockInvoicePrompt } from './LockInvoice';
+export { TakerFoundPrompt } from './TakerFound';

frontend/src/components/TradeBox/Title/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Typography, useTheme } from '@mui/material';
+import { Order } from '../../../models';
+import stepXofY from '../stepXofY';
+import currencies from '../../../../static/assets/currencies.json';
+import { pn } from '../../../utils';
+
+interface TakerFoundPrompProps {
+  order: Order;
+}
+
+export const Title = ({ order }: TakerFoundPrompProps): JSX.Element => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const currencyCode: string = currencies[`${order.currency}`];
+
+  let text = '';
+
+  if (order.is_maker && order.status === 0) {
+    text = t('Lock {{amountSats}} Sats to PUBLISH order', { amountSats: pn(order.bond_satoshis) });
+  } else if (order.is_taker && order.status === 3) {
+    text = t('Lock {{amountSats}} Sats to TAKE order', { amountSats: pn(order.bond_satoshis) });
+  } else if (order.is_seller && [6, 7].includes(order.status)) {
+    text = t('Lock {{amountSats}} Sats as collateral', { amountSats: pn(order.escrow_satoshis) });
+  }
+
+  {
+    /* Maker and taker Bond request */
+  }
+  //             {this.props.data.is_maker & (this.props.data.status == 0) ? this.showQRInvoice() : ''}
+  //             {this.props.data.is_taker & (this.props.data.status == 3) ? this.showQRInvoice() : ''}
+
+  //             {/* Waiting for taker and taker bond request */}
+  //             {this.props.data.is_maker & (this.props.data.status == 2) ? this.showPausedOrder() : ''}
+  //             {this.props.data.is_maker & (this.props.data.status == 1) ? this.showMakerWait() : ''}
+  //             {this.props.data.is_maker & (this.props.data.status == 3) ? this.showTakerFound() : ''}
+
+  //             {/* Send Invoice (buyer) and deposit collateral (seller) */}
+  //             {this.props.data.is_seller &
+  //             (this.props.data.status == 6 || this.props.data.status == 7)
+  //               ? this.showEscrowQRInvoice()
+  //               : ''}
+  //             {this.props.data.is_buyer & (this.props.data.status == 6 || this.props.data.status == 8)
+  //               ? this.showInputInvoice()
+  //               : ''}
+  //             {this.props.data.is_buyer & (this.props.data.status == 7)
+  //               ? this.showWaitingForEscrow()
+  //               : ''}
+  //             {this.props.data.is_seller & (this.props.data.status == 8)
+  //               ? this.showWaitingForBuyerInvoice()
+  //               : ''}
+
+  //             {/* In Chatroom  */}
+  //             {this.props.data.status == 9 || this.props.data.status == 10 ? this.showChat() : ''}
+
+  //             {/* Trade Finished */}
+  //             {this.props.data.is_seller & [13, 14, 15].includes(this.props.data.status)
+  //               ? this.showRateSelect()
+  //               : ''}
+  //             {this.props.data.is_buyer & (this.props.data.status == 14) ? this.showRateSelect() : ''}
+
+  //             {/* Trade Finished - Payment Routing Failed */}
+  //             {this.props.data.is_buyer & (this.props.data.status == 13)
+  //               ? this.showSendingPayment()
+  //               : ''}
+
+  //             {/* Trade Finished - Payment Routing Failed */}
+  //             {this.props.data.is_buyer & (this.props.data.status == 15)
+  //               ? this.showRoutingFailed()
+  //               : ''}
+
+  //             {/* Trade Finished - TODO Needs more planning */}
+  //             {this.props.data.status == 11 ? this.showInDisputeStatement() : ''}
+  //             {this.props.data.status == 16 ? this.showWaitForDisputeResolution() : ''}
+  //             {(this.props.data.status == 17) & this.props.data.is_taker ||
+  //             (this.props.data.status == 18) & this.props.data.is_maker
+  //               ? this.showDisputeWinner()
+  //               : ''}
+  //             {(this.props.data.status == 18) & this.props.data.is_taker ||
+  //             (this.props.data.status == 17) & this.props.data.is_maker
+  //               ? this.showDisputeLoser()
+  //               : ''}
+
+  //             {/* Order has expired */}
+  //             {this.props.data.status == 5 ? this.showOrderExpired() : ''}
+
+  return (
+    <Typography variant='body2'>
+      <b>{text}</b>
+      {stepXofY(order)}
+    </Typography>
+  );
+};
+
+export default Title;

frontend/src/components/TradeBox/index.tsx

@@ -1,63 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
+import { Box, Divider } from '@mui/material';
-  Box,
+
-  Alert,
-  AlertTitle,
-  ToggleButtonGroup,
-  ToggleButton,
-  IconButton,
-  Link,
-  Paper,
-  Rating,
-  Button,
-  Tooltip,
-  CircularProgress,
-  Grid,
-  Typography,
-  TextField,
-  List,
-  ListItem,
-  ListItemText,
-  Divider,
-  ListItemIcon,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  dividerClasses,
-} from '@mui/material';
-import { LoadingButton } from '@mui/lab';
-import QRCode from 'react-qr-code';
-import Countdown, { zeroPad } from 'react-countdown';
-import EncryptedChat from './EncryptedChat';
-import TradeSummary from './TradeSummary';
 import { systemClient } from '../../services/System';
 import { apiClient } from '../../services/api';
 import { ConfirmDisputeDialog, ConfirmFiatReceivedDialog } from './Dialogs';
+
+import Title from './Title';
+import { LockInvoicePrompt, TakerFoundPrompt } from './Prompts';
 import BondStatus from './BondStatus';
 
-// Icons
-import {
-  Percent,
-  Book,
-  Lock,
-  LockOpen,
-  Balance,
-  ContentCopy,
-  PauseCircle,
-  PlayCircle,
-  Bolt,
-  Link,
-  AccountBalanceWallet,
-  Favorite,
-  RocketLaunch,
-  Refresh,
-} from '@mui/icons-material';
-import { NewTabIcon } from '../Icons';
-
-import { pn } from '../../utils';
 import { Order } from '../../models';
 
 const audio = {
@@ -130,13 +82,13 @@ interface TradeBoxProps {
 const TradeBox = ({ order, setOrder }: TradeBoxProps): JSX.Element => {
   const { t } = useTranslation();
 
+  // Buttons and Dialogs
   const [loadingButtons, setLoadingButtons] = useState<loadingButtonsProps>(noLoadingButtons);
   const [open, setOpen] = useState<OpenDialogProps>(closeAll);
 
-  // Payout forms
+  // Forms
   const [onchain, setOnchain] = useState<OnchainFormProps>(defaultOnchain);
   const [lightning, setLightning] = useState<LightningFormProps>(defaultLightning);
-
   const [statement, setStatement] = useState<string>('');
 
   // Sounds
@@ -168,6 +120,38 @@ const TradeBox = ({ order, setOrder }: TradeBoxProps): JSX.Element => {
     submitAction('confirm');
   };
 
+  const Steps = [
+    {
+      isMaker: {
+        title: '',
+        prompt: <LockInvoicePrompt order={order} concept={'bond'} />,
+        bondStatus: 'none',
+      },
+    },
+  ];
+
+  const StepConcent = Steps[order.status][isMaker];
+
+  // 0: 2000, // 'Waiting for maker bond'
+  // 1: 25000, // 'Public'
+  // 2: 90000, // 'Paused'
+  // 3: 2000, // 'Waiting for taker bond'
+  // 4: 999999, // 'Cancelled'
+  // 5: 999999, // 'Expired'
+  // 6: 6000, // 'Waiting for trade collateral and buyer invoice'
+  // 7: 8000, // 'Waiting only for seller trade collateral'
+  // 8: 8000, // 'Waiting only for buyer invoice'
+  // 9: 10000, // 'Sending fiat - In chatroom'
+  // 10: 10000, // 'Fiat sent - In chatroom'
+  // 11: 30000, // 'In dispute'
+  // 12: 999999, // 'Collaboratively cancelled'
+  // 13: 3000, // 'Sending satoshis to buyer'
+  // 14: 999999, // 'Sucessful trade'
+  // 15: 10000, // 'Failed lightning network routing'
+  // 16: 180000, // 'Wait for dispute resolution'
+  // 17: 180000, // 'Maker lost dispute'
+  // 18: 180000, // 'Taker lost dispute'
+
   return (
     <Box>
       <ConfirmDisputeDialog
@@ -176,9 +160,11 @@ const TradeBox = ({ order, setOrder }: TradeBoxProps): JSX.Element => {
         onAgreeClick={onClickAgreeOpenDispute}
       />
 
-      <StepContent />
+      <Title order={order} />
       <Divider />
-      <BondStatus />
+      <StepConcent.prompt />
+      <Divider />
+      <BondStatus status={StepConcent.bondStatus} isMaker={order.is_maker} />
 
       <ConfirmFiatReceivedDialog
         open={open.confirmFiatReceived}
@@ -195,140 +181,6 @@ export default TradeBox;
 
 // class TradeBox extends Component {
 
-//   showQRInvoice = () => {
-//     const { t } = this.props;
-//     return (
-//       <Grid container spacing={1}>
-//         <Grid item xs={12} align='center'>
-//           {this.props.data.is_maker ? (
-//             <Typography color='primary' variant='subtitle1'>
-//               <b>
-//                 {t('Lock {{amountSats}} Sats to PUBLISH order', {
-//                   amountSats: pn(this.props.data.bond_satoshis),
-//                 })}
-//               </b>{' '}
-//               {' ' + this.stepXofY()}
-//             </Typography>
-//           ) : (
-//             <Typography color='primary' variant='subtitle1'>
-//               <b>
-//                 {t('Lock {{amountSats}} Sats to TAKE order', {
-//                   amountSats: pn(this.props.data.bond_satoshis),
-//                 })}
-//               </b>{' '}
-//               {' ' + this.stepXofY()}
-//             </Typography>
-//           )}
-//         </Grid>
-
-//         <Grid item xs={12} align='center'>
-//           {this.compatibleWalletsButton()}
-//         </Grid>
-
-//         <Grid item xs={12} align='center'>
-//           <QRCode
-//             bgColor={'rgba(255, 255, 255, 0)'}
-//             fgColor={this.props.theme.palette.text.primary}
-//             value={this.props.data.bond_invoice}
-//             size={305}
-//           />
-//           <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
-//             <Button
-//               size='small'
-//               color='inherit'
-//               onClick={() => {
-//                 systemClient.copyToClipboard(this.props.data.bond_invoice);
-//               }}
-//               align='center'
-//             >
-//               {' '}
-//               <ContentCopy />
-//               {t('Copy to clipboard')}
-//             </Button>
-//           </Tooltip>
-//         </Grid>
-//         <Grid item xs={12} align='center'>
-//           <TextField
-//             hiddenLabel
-//             variant='standard'
-//             size='small'
-//             defaultValue={this.props.data.bond_invoice}
-//             disabled={true}
-//             helperText={t(
-//               'This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.',
-//             )}
-//             color='secondary'
-//           />
-//         </Grid>
-//       </Grid>
-//     );
-//   };
-
-//   showEscrowQRInvoice = () => {
-//     const { t } = this.props;
-//     return (
-//       <Grid container spacing={1}>
-//         {/* Make sound for Taker found or HTLC received. */}
-//         {this.props.data.is_maker ? this.Sound('taker-found') : this.Sound('locked-invoice')}
-//         <Grid item xs={12} align='center'>
-//           <Typography color='orange' variant='subtitle1'>
-//             <b>
-//               {t('Lock {{amountSats}} Sats as collateral', {
-//                 amountSats: pn(this.props.data.escrow_satoshis),
-//               })}
-//             </b>
-//             {' ' + this.stepXofY()}
-//           </Typography>
-//         </Grid>
-//         <Grid item xs={12} align='center'>
-//           <Typography variant='body2'>
-//             {t(
-//               'You risk losing your bond if you do not lock the collateral. Total time available is {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.',
-//               this.depositHoursMinutes(),
-//             )}
-//           </Typography>
-//         </Grid>
-//         <Grid item xs={12} align='center'>
-//           <QRCode
-//             bgColor={'rgba(255, 255, 255, 0)'}
-//             fgColor={this.props.theme.palette.text.primary}
-//             value={this.props.data.escrow_invoice}
-//             size={305}
-//           />
-//           <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
-//             <Button
-//               size='small'
-//               color='inherit'
-//               onClick={() => {
-//                 systemClient.copyToClipboard(this.props.data.escrow_invoice);
-//               }}
-//               align='center'
-//             >
-//               {' '}
-//               <ContentCopy />
-//               {t('Copy to clipboard')}
-//             </Button>
-//           </Tooltip>
-//         </Grid>
-//         <Grid item xs={12} align='center'>
-//           <TextField
-//             hiddenLabel
-//             variant='filled'
-//             size='small'
-//             defaultValue={this.props.data.escrow_invoice}
-//             disabled={true}
-//             helperText={t(
-//               'This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.',
-//               { currencyCode: this.props.data.currencyCode },
-//             )}
-//             color='secondary'
-//           />
-//         </Grid>
-// <BondStatus status={'locked'} isMaker={order.is_maker}/>
-//       </Grid>
-//     );
-//   };
-
 //   showTakerFound = () => {
 //     const { t } = this.props;
 //     return (