Add Lock Invoice box

frontend/src/components/TradeBox/BondStatus.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Typography } from '@mui/material';
+import { Lock, LockOpen, Balance } from '@mui/icons-material';
+
+interface BondStatusProps {
+  status: 'locked' | 'settled' | 'returned' | 'hide';
+  isMaker: boolean;
+}
+
+const BondStatus = ({ status, isMaker }: BondStatusProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  let Icon = Lock;
+  if (status === 'returned') {
+    Icon = LockOpen;
+  } else if (status === 'settled') {
+    Icon = Balance;
+  }
+
+  if (status === 'hide') {
+    return <></>;
+  } else {
+    return (
+      <Box>
+        <Typography color='primary' variant='subtitle1' align='center'>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <Icon />
+            {t(`Your ${isMaker ? 'maker' : 'taker'} bond is ${status}`)}
+          </div>
+        </Typography>
+      </Box>
+    );
+  }
+};
+
+export default BondStatus;

frontend/src/components/TradeBox/LockInvoiceBox.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Grid,
+  Link,
+  Typography,
+  TextField,
+  Tooltip,
+  useTheme,
+  Divider,
+} from '@mui/material';
+import { AccountBalanceWallet, ContentCopy } from '@mui/icons-material';
+import { NewTabIcon } from '../Icons';
+import QRCode from 'react-qr-code';
+import { Order } from '../../models';
+import { systemClient } from '../../services/System';
+import currencyDict from '../../../static/assets/currencies.json';
+import stepXofY from './stepXofY';
+import { pn } from '../../utils';
+
+interface LockInvoiceBoxProps {
+  order: Order;
+  concept: 'bond' | 'escrow';
+}
+
+export const LockInvoiceBox = ({ order, concept }: LockInvoiceBoxProps): JSX.Element => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const currencyCode = currencyDict[order.currency.toString()];
+
+  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(
+          'This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.',
+        )
+      : 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 },
+        );
+
+  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
+        color='primary'
+        component={Link}
+        href={'https://learn.robosats.com/docs/wallets/'}
+        target='_blank'
+        align='center'
+      >
+        <AccountBalanceWallet />
+        {t('See Compatible Wallets')}
+        <NewTabIcon sx={{ width: '1.1em', height: '1.1em' }} />
+      </Button>
+    );
+  };
+
+  const depositHoursMinutes = function () {
+    const hours = parseInt(order.escrow_duration / 3600);
+    const minutes = parseInt((order.escrow_duration - hours * 3600) / 60);
+    const dict = { deposit_timer_hours: hours, deposit_timer_minutes: minutes };
+    return dict;
+  };
+
+  const ExpirationWarning = function () {
+    return (
+      <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.',
+          depositHoursMinutes(),
+        )}
+      </Typography>
+    );
+  };
+
+  return (
+    <Grid container spacing={1}>
+      <Grid item xs={12}>
+        <Title />
+      </Grid>
+
+      <Divider />
+
+      <Grid item xs={12}>
+        {concept === 'bond' ? <CompatibleWalletsButton /> : <ExpirationWarning />}
+      </Grid>
+
+      <Grid item xs={12}>
+        <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
+          <QRCode
+            bgColor={'rgba(255, 255, 255, 0)'}
+            fgColor={theme.palette.text.primary}
+            value={invoice}
+            size={theme.typography.fontSize * 21.8}
+            onClick={() => {
+              systemClient.copyToClipboard(invoice);
+            }}
+          />
+        </Tooltip>
+
+        <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
+          <Button
+            size='small'
+            color='inherit'
+            onClick={() => {
+              systemClient.copyToClipboard(invoice);
+            }}
+          >
+            <ContentCopy />
+            {t('Copy to clipboard')}
+          </Button>
+        </Tooltip>
+      </Grid>
+
+      <Grid item xs={12}>
+        <TextField
+          hiddenLabel
+          variant='standard'
+          size='small'
+          defaultValue={invoice}
+          disabled={true}
+          helperText={helperText}
+          color='secondary'
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default LockInvoiceBox;