robosats/frontend/src/components/OrderPage.js

import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
import {
  TextField,
  Chip,
  Tooltip,
  IconButton,
  Badge,
  Tab,
  Tabs,
  Alert,
  Paper,
  CircularProgress,
  Button,
  Grid,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  ListItemAvatar,
  Avatar,
  Divider,
  Box,
  LinearProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from '@mui/material';
import Countdown, { zeroPad } from 'react-countdown';
import { StoreTokenDialog, NoRobotDialog } from './Dialogs';

import currencyDict from '../../static/assets/currencies.json';
import PaymentText from './PaymentText';
import TradeBox from './TradeBox';
import FlagWithProps from './FlagWithProps';
import LinearDeterminate from './LinearDeterminate';
import MediaQuery from 'react-responsive';
import { t } from 'i18next';

// icons
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import NumbersIcon from '@mui/icons-material/Numbers';
import PriceChangeIcon from '@mui/icons-material/PriceChange';
import PaymentsIcon from '@mui/icons-material/Payments';
import ArticleIcon from '@mui/icons-material/Article';
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
import CheckIcon from '@mui/icons-material/Check';
import { SendReceiveIcon } from './Icons';

import { getCookie } from '../utils/cookies';
import { pn } from '../utils/prettyNumbers';
import { copyToClipboard } from '../utils/clipboard';
import { getWebln } from '../utils/webln';

class OrderPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      is_explicit: false,
      delay: 60000, // Refresh every 60 seconds by default
      total_secs_exp: 300,
      loading: true,
      openCancel: false,
      openCollaborativeCancel: false,
      openInactiveMaker: false,
      openWeblnDialog: false,
      waitingWebln: false,
      openStoreToken: false,
      tabValue: 1,
      orderId: this.props.match.params.orderId,
    };

    // Refresh delays according to Order status
    this.statusToDelay = {
      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'
    };
  }

  completeSetState = (newStateVars) => {
    // In case the reply only has "bad_request"
    // Do not substitute these two for "undefined" as
    // otherStateVars will fail to assign values
    if (newStateVars.currency == null) {
      newStateVars.currency = this.state.currency;
      newStateVars.amount = this.state.amount;
      newStateVars.status = this.state.status;
    }

    const otherStateVars = {
      amount: newStateVars.amount ? newStateVars.amount : null,
      loading: false,
      delay: this.setDelay(newStateVars.status),
      currencyCode: this.getCurrencyCode(newStateVars.currency),
      penalty: newStateVars.penalty, // in case penalty time has finished, it goes back to null
      invoice_expired: newStateVars.invoice_expired, // in case invoice had expired, it goes back to null when it is valid again
    };

    const completeStateVars = Object.assign({}, newStateVars, otherStateVars);
    this.setState(completeStateVars);
  };

  getOrderDetails = (id) => {
    this.setState({ orderId: id });
    fetch('/api/order' + '?order_id=' + id)
      .then((response) => response.json())
      .then(this.orderDetailsReceived);
  };

  orderDetailsReceived = (data) => {
    if (data.status !== this.state.status) {
      this.handleWebln(data);
    }
    this.completeSetState(data);
    this.setState({ pauseLoading: false });
  };

  // These are used to refresh the data
  componentDidMount() {
    this.getOrderDetails(this.props.match.params.orderId);
    this.interval = setInterval(this.tick, this.state.delay);
  }

  componentDidUpdate() {
    clearInterval(this.interval);
    this.interval = setInterval(this.tick, this.state.delay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick = () => {
    this.getOrderDetails(this.state.orderId);
  };

  handleWebln = async (data) => {
    const webln = await getWebln();
    // If Webln implements locked payments compatibility, this logic might be simplier
    if (data.is_maker & (data.status == 0)) {
      webln.sendPayment(data.bond_invoice);
      this.setState({ waitingWebln: true, openWeblnDialog: true });
    } else if (data.is_taker & (data.status == 3)) {
      webln.sendPayment(data.bond_invoice);
      this.setState({ waitingWebln: true, openWeblnDialog: true });
    } else if (data.is_seller & (data.status == 6 || data.status == 7)) {
      webln.sendPayment(data.escrow_invoice);
      this.setState({ waitingWebln: true, openWeblnDialog: true });
    } else if (data.is_buyer & (data.status == 6 || data.status == 8)) {
      this.setState({ waitingWebln: true, openWeblnDialog: true });
      webln
        .makeInvoice(data.trade_satoshis)
        .then((invoice) => {
          if (invoice) {
            this.sendWeblnInvoice(invoice.paymentRequest);
            this.setState({ waitingWebln: false, openWeblnDialog: false });
          }
        })
        .catch(() => {
          this.setState({ waitingWebln: false, openWeblnDialog: false });
        });
    } else {
      this.setState({ waitingWebln: false });
    }
  };

  sendWeblnInvoice = (invoice) => {
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify({
        action: 'update_invoice',
        invoice,
      }),
    };
    fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
      .then((response) => response.json())
      .then((data) => this.completeSetState(data));
  };

  // Countdown Renderer callback with condition
  countdownRenderer = ({ total, hours, minutes, seconds, completed }) => {
    const { t } = this.props;
    if (completed) {
      // Render a completed state
      return <span> {t('The order has expired')}</span>;
    } else {
      let col = 'inherit';
      const fraction_left = total / 1000 / this.state.total_secs_exp;
      // Make orange at 25% of time left
      if (fraction_left < 0.25) {
        col = 'orange';
      }
      // Make red at 10% of time left
      if (fraction_left < 0.1) {
        col = 'red';
      }
      // Render a countdown, bold when less than 25%
      return fraction_left < 0.25 ? (
        <b>
          <span style={{ color: col }}>
            {hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s{' '}
          </span>
        </b>
      ) : (
        <span style={{ color: col }}>
          {hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s{' '}
        </span>
      );
    }
  };

  timerRenderer(seconds) {
    const hours = parseInt(seconds / 3600);
    const minutes = parseInt((seconds - hours * 3600) / 60);
    return (
      <span>
        {hours > 0 ? hours + 'h' : ''} {minutes > 0 ? zeroPad(minutes) + 'm' : ''}{' '}
      </span>
    );
  }

  // Countdown Renderer callback with condition
  countdownPenaltyRenderer = ({ minutes, seconds, completed }) => {
    const { t } = this.props;
    if (completed) {
      // Render a completed state
      return <span> {t('Penalty lifted, good to go!')}</span>;
    } else {
      return (
        <span>
          {' '}
          {t('You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s', {
            timeMin: zeroPad(minutes),
            timeSec: zeroPad(seconds),
          })}{' '}
        </span>
      );
    }
  };

  handleTakeAmountChange = (e) => {
    if ((e.target.value != '') & (e.target.value != null)) {
      this.setState({ takeAmount: parseFloat(e.target.value) });
    } else {
      this.setState({ takeAmount: e.target.value });
    }
  };

  amountHelperText = () => {
    const { t } = this.props;
    if ((this.state.takeAmount < this.state.min_amount) & (this.state.takeAmount != '')) {
      return t('Too low');
    } else if ((this.state.takeAmount > this.state.max_amount) & (this.state.takeAmount != '')) {
      return t('Too high');
    } else {
      return null;
    }
  };

  takeOrderButton = () => {
    const { t } = this.props;
    if (this.state.has_range) {
      return (
        <Grid
          container
          align='center'
          alignItems='stretch'
          justifyContent='center'
          style={{ display: 'flex' }}
        >
          {this.InactiveMakerDialog()}
          {this.tokenDialog()}
          <div style={{ maxWidth: 120 }}>
            <Tooltip
              placement='top'
              enterTouchDelay={500}
              enterDelay={700}
              enterNextDelay={2000}
              title={t('Enter amount of fiat to exchange for bitcoin')}
            >
              <Paper elevation={5} sx={{ maxHeight: 40 }}>
                <TextField
                  error={
                    (this.state.takeAmount < this.state.min_amount ||
                      this.state.takeAmount > this.state.max_amount) &
                    (this.state.takeAmount != '')
                  }
                  helperText={this.amountHelperText()}
                  label={t('Amount {{currencyCode}}', { currencyCode: this.state.currencyCode })}
                  size='small'
                  type='number'
                  required={true}
                  value={this.state.takeAmount}
                  inputProps={{
                    min: this.state.min_amount,
                    max: this.state.max_amount,
                    style: { textAlign: 'center' },
                  }}
                  onChange={this.handleTakeAmountChange}
                />
              </Paper>
            </Tooltip>
          </div>
          <div
            style={{
              height: 38,
              top: '1px',
              position: 'relative',
              display:
                this.state.takeAmount < this.state.min_amount ||
                this.state.takeAmount > this.state.max_amount ||
                this.state.takeAmount == '' ||
                this.state.takeAmount == null
                  ? ''
                  : 'none',
            }}
          >
            <Tooltip
              placement='top'
              enterTouchDelay={0}
              enterDelay={500}
              enterNextDelay={1200}
              title={t('You must specify an amount first')}
            >
              <Paper elevation={4}>
                <Button sx={{ height: 38 }} variant='contained' color='primary' disabled={true}>
                  {t('Take Order')}
                </Button>
              </Paper>
            </Tooltip>
          </div>
          <div
            style={{
              height: 38,
              top: '1px',
              position: 'relative',
              display:
                this.state.takeAmount < this.state.min_amount ||
                this.state.takeAmount > this.state.max_amount ||
                this.state.takeAmount == '' ||
                this.state.takeAmount == null
                  ? 'none'
                  : '',
            }}
          >
            <Paper elevation={4}>
              <Button
                sx={{ height: 38 }}
                variant='contained'
                color='primary'
                onClick={
                  this.props.copiedToken
                    ? this.state.maker_status == 'Inactive'
                      ? this.handleClickOpenInactiveMakerDialog
                      : this.takeOrder
                    : () => this.setState({ openStoreToken: true })
                }
              >
                {t('Take Order')}
              </Button>
            </Paper>
          </div>
        </Grid>
      );
    } else {
      return (
        <>
          {this.InactiveMakerDialog()}
          {this.tokenDialog()}
          <Button
            sx={{ height: 38 }}
            variant='contained'
            color='primary'
            onClick={
              this.props.copiedToken
                ? this.state.maker_status == 'Inactive'
                  ? this.handleClickOpenInactiveMakerDialog
                  : this.takeOrder
                : () => this.setState({ openStoreToken: true })
            }
          >
            {t('Take Order')}
          </Button>
        </>
      );
    }
  };

  countdownTakeOrderRenderer = ({ seconds, completed }) => {
    if (isNaN(seconds)) {
      return this.takeOrderButton();
    }
    if (completed) {
      // Render a completed state
      return this.takeOrderButton();
    } else {
      return (
        <Tooltip enterTouchDelay={0} title={t('Wait until you can take an order')}>
          <div>
            <Button disabled={true} variant='contained' color='primary'>
              {t('Take Order')}
            </Button>
          </div>
        </Tooltip>
      );
    }
  };

  takeOrder = () => {
    this.setState({ loading: true });
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify({
        action: 'take',
        amount: this.state.takeAmount,
      }),
    };
    fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
      .then((response) => response.json())
      .then((data) => this.handleWebln(data) & this.completeSetState(data));
  };

  // set delay to the one matching the order status. If null order status, delay goes to 9999999.
  setDelay = (status) => {
    return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
  };

  getCurrencyCode(val) {
    const code = val ? currencyDict[val.toString()] : '';
    return code;
  }

  handleClickConfirmCancelButton = () => {
    this.setState({ loading: true });
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify({
        action: 'cancel',
      }),
    };
    fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
      .then((response) => response.json())
      .then(() => this.getOrderDetails(this.state.orderId) & this.setState({ status: 4 }));
    this.handleClickCloseConfirmCancelDialog();
  };

  handleClickOpenConfirmCancelDialog = () => {
    this.setState({ openCancel: true });
  };

  handleClickCloseConfirmCancelDialog = () => {
    this.setState({ openCancel: false });
  };

  CancelDialog = () => {
    const { t } = this.props;
    return (
      <Dialog
        open={this.state.openCancel}
        onClose={this.handleClickCloseConfirmCancelDialog}
        aria-labelledby='cancel-dialog-title'
        aria-describedby='cancel-dialog-description'
      >
        <DialogTitle id='cancel-dialog-title'>{t('Cancel the order?')}</DialogTitle>
        <DialogContent>
          <DialogContentText id='cancel-dialog-description'>
            {t('If the order is cancelled now you will lose your bond.')}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClickCloseConfirmCancelDialog} autoFocus>
            {t('Go back')}
          </Button>
          <Button onClick={this.handleClickConfirmCancelButton}>{t('Confirm Cancel')}</Button>
        </DialogActions>
      </Dialog>
    );
  };

  handleClickOpenInactiveMakerDialog = () => {
    this.setState({ openInactiveMaker: true });
  };

  handleClickCloseInactiveMakerDialog = () => {
    this.setState({ openInactiveMaker: false });
  };

  InactiveMakerDialog = () => {
    const { t } = this.props;
    return (
      <Dialog
        open={this.state.openInactiveMaker}
        onClose={this.handleClickCloseInactiveMakerDialog}
        aria-labelledby='inactive-maker-dialog-title'
        aria-describedby='inactive-maker-description'
      >
        <DialogTitle id='inactive-maker-dialog-title'>{t('The maker is away')}</DialogTitle>
        <DialogContent>
          <DialogContentText id='cancel-dialog-description'>
            {t(
              'By taking this order you risk wasting your time. If the maker does not proceed in time, you will be compensated in satoshis for 50% of the maker bond.',
            )}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClickCloseInactiveMakerDialog} autoFocus>
            {t('Go back')}
          </Button>
          <Button onClick={this.takeOrder}>{t('Take Order')}</Button>
        </DialogActions>
      </Dialog>
    );
  };

  tokenDialog = () => {
    return getCookie('robot_token') ? (
      <StoreTokenDialog
        open={this.state.openStoreToken}
        onClose={() => this.setState({ openStoreToken: false })}
        onClickCopy={() =>
          copyToClipboard(getCookie('robot_token')) & this.props.setAppState({ copiedToken: true })
        }
        copyIconColor={this.props.copiedToken ? 'inherit' : 'primary'}
        onClickBack={() => this.setState({ openStoreToken: false })}
        onClickDone={() =>
          this.setState({ openStoreToken: false }) &
          (this.state.maker_status == 'Inactive'
            ? this.handleClickOpenInactiveMakerDialog()
            : this.takeOrder())
        }
      />
    ) : (
      <NoRobotDialog
        open={this.state.openStoreToken}
        onClose={() => this.setState({ openStoreToken: false })}
      />
    );
  };

  handleClickConfirmCollaborativeCancelButton = () => {
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify({
        action: 'cancel',
      }),
    };
    fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
      .then((response) => response.json())
      .then(() => this.getOrderDetails(this.state.orderId) & this.setState({ status: 4 }));
    this.handleClickCloseCollaborativeCancelDialog();
  };

  handleClickOpenCollaborativeCancelDialog = () => {
    this.setState({ openCollaborativeCancel: true });
  };

  handleClickCloseCollaborativeCancelDialog = () => {
    this.setState({ openCollaborativeCancel: false });
  };

  CollaborativeCancelDialog = () => {
    const { t } = this.props;
    return (
      <Dialog
        open={this.state.openCollaborativeCancel}
        onClose={this.handleClickCloseCollaborativeCancelDialog}
        aria-labelledby='collaborative-cancel-dialog-title'
        aria-describedby='collaborative-cancel-dialog-description'
      >
        <DialogTitle id='cancel-dialog-title'>{t('Collaborative cancel the order?')}</DialogTitle>
        <DialogContent>
          <DialogContentText id='cancel-dialog-description'>
            {t(
              'The trade escrow has been posted. The order can be cancelled only if both, maker and taker, agree to cancel.',
            )}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClickCloseCollaborativeCancelDialog} autoFocus>
            {t('Go back')}
          </Button>
          <Button onClick={this.handleClickConfirmCollaborativeCancelButton}>
            {t('Ask for Cancel')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  };

  BackButton = () => {
    const { t } = this.props;
    // If order has expired, show back button.
    if (this.state.status == 5) {
      return (
        <Grid item xs={12} align='center'>
          <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>
            {t('Back')}
          </Button>
        </Grid>
      );
    }
    return null;
  };

  CancelButton = () => {
    const { t } = this.props;
    // If maker and Waiting for Bond. Or if taker and Waiting for bond.
    // Simply allow to cancel without showing the cancel dialog.
    if (
      this.state.is_maker & [0, 1, 2].includes(this.state.status) ||
      this.state.is_taker & (this.state.status == 3)
    ) {
      return (
        <Grid item xs={12} align='center'>
          <Button
            variant='contained'
            color='secondary'
            onClick={this.handleClickConfirmCancelButton}
          >
            {t('Cancel')}
          </Button>
        </Grid>
      );
    }
    // If the order does not yet have an escrow deposited. Show dialog
    // to confirm forfeiting the bond
    if ([3, 6, 7].includes(this.state.status)) {
      return (
        <div id='openDialogCancelButton'>
          <Grid item xs={12} align='center'>
            {this.CancelDialog()}
            <Button
              variant='contained'
              color='secondary'
              onClick={this.handleClickOpenConfirmCancelDialog}
            >
              {t('Cancel')}
            </Button>
          </Grid>
        </div>
      );
    }

    // If the escrow is Locked, show the collaborative cancel button.

    if ([8, 9].includes(this.state.status)) {
      return (
        <Grid item xs={12} align='center'>
          {this.CollaborativeCancelDialog()}
          <Button
            variant='contained'
            color='secondary'
            onClick={this.handleClickOpenCollaborativeCancelDialog}
          >
            {t('Collaborative Cancel')}
          </Button>
        </Grid>
      );
    }

    // If none of the above do not return a cancel button.
    return null;
  };

  // Colors for the status badges
  statusBadgeColor(status) {
    if (status == 'Active') {
      return 'success';
    }
    if (status == 'Seen recently') {
      return 'warning';
    }
    if (status == 'Inactive') {
      return 'error';
    }
  }

  orderBox = () => {
    const { t } = this.props;
    return (
      <Grid container spacing={1}>
        <Grid item xs={12} align='center'>
          <MediaQuery minWidth={920}>
            <Typography component='h5' variant='h5'>
              {t('Order Box')}
            </Typography>
          </MediaQuery>
          <Paper elevation={12}>
            <List dense={true}>
              <ListItem>
                <ListItemAvatar sx={{ width: 56, height: 56 }}>
                  <Tooltip placement='top' enterTouchDelay={0} title={t(this.state.maker_status)}>
                    <Badge
                      variant='dot'
                      overlap='circular'
                      badgeContent=''
                      color={this.statusBadgeColor(this.state.maker_status)}
                    >
                      <Badge
                        overlap='circular'
                        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                        badgeContent={
                          <div style={{ position: 'relative', left: '5px', top: '2px' }}>
                            {' '}
                            {!this.state.type ? (
                              <SendReceiveIcon
                                sx={{ transform: 'scaleX(-1)', height: '18px', width: '18px' }}
                                color='secondary'
                              />
                            ) : (
                              <SendReceiveIcon
                                sx={{ height: '18px', width: '18px' }}
                                color='primary'
                              />
                            )}
                          </div>
                        }
                      >
                        <Avatar
                          className='flippedSmallAvatar'
                          alt={this.state.maker_nick}
                          src={
                            window.location.origin +
                            '/static/assets/avatars/' +
                            this.state.maker_nick +
                            '.png'
                          }
                        />
                      </Badge>
                    </Badge>
                  </Tooltip>
                </ListItemAvatar>
                <ListItemText
                  primary={
                    this.state.maker_nick +
                    (this.state.type ? ' ' + t('(Seller)') : ' ' + t('(Buyer)'))
                  }
                  secondary={t('Order maker')}
                  align='right'
                />
              </ListItem>

              {this.state.is_participant ? (
                <>
                  {this.state.taker_nick != 'None' ? (
                    <>
                      <Divider />
                      <ListItem align='left'>
                        <ListItemText
                          primary={
                            this.state.taker_nick +
                            (this.state.type ? ' ' + t('(Buyer)') : ' ' + t('(Seller)'))
                          }
                          secondary={t('Order taker')}
                        />
                        <ListItemAvatar>
                          <Tooltip enterTouchDelay={0} title={t(this.state.taker_status)}>
                            <Badge
                              variant='dot'
                              overlap='circular'
                              badgeContent=''
                              color={this.statusBadgeColor(this.state.taker_status)}
                            >
                              <Badge
                                overlap='circular'
                                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                                badgeContent={
                                  <div style={{ position: 'relative', right: '5px', top: '2px' }}>
                                    {' '}
                                    {this.state.type ? (
                                      <SendReceiveIcon
                                        sx={{ height: '18px', width: '18px' }}
                                        color='secondary'
                                      />
                                    ) : (
                                      <SendReceiveIcon
                                        sx={{
                                          transform: 'scaleX(-1)',
                                          height: '18px',
                                          width: '18px',
                                        }}
                                        color='primary'
                                      />
                                    )}
                                  </div>
                                }
                              >
                                <Avatar
                                  className='smallAvatar'
                                  alt={this.state.taker_nick}
                                  src={
                                    window.location.origin +
                                    '/static/assets/avatars/' +
                                    this.state.taker_nick +
                                    '.png'
                                  }
                                />
                              </Badge>
                            </Badge>
                          </Tooltip>
                        </ListItemAvatar>
                      </ListItem>
                    </>
                  ) : (
                    ''
                  )}
                  <Divider>
                    <Chip label={t('Order Details')} />
                  </Divider>
                  <ListItem>
                    <ListItemIcon>
                      <ArticleIcon />
                    </ListItemIcon>
                    <ListItemText
                      primary={t(this.state.status_message)}
                      secondary={t('Order status')}
                    />
                  </ListItem>
                  <Divider />
                </>
              ) : (
                <Divider>
                  <Chip label={t('Order Details')} />
                </Divider>
              )}

              <ListItem>
                <ListItemIcon>
                  <div
                    style={{
                      zoom: 1.25,
                      opacity: 0.7,
                      msZoom: 1.25,
                      WebkitZoom: 1.25,
                      MozTransform: 'scale(1.25,1.25)',
                      MozTransformOrigin: 'left center',
                    }}
                  >
                    <FlagWithProps code={this.state.currencyCode} />
                  </div>
                </ListItemIcon>
                {this.state.has_range & (this.state.amount == null) ? (
                  <ListItemText
                    primary={
                      pn(parseFloat(Number(this.state.min_amount).toPrecision(4))) +
                      '-' +
                      pn(parseFloat(Number(this.state.max_amount).toPrecision(4))) +
                      ' ' +
                      this.state.currencyCode
                    }
                    secondary={t('Amount range')}
                  />
                ) : (
                  <ListItemText
                    primary={
                      pn(
                        parseFloat(
                          parseFloat(this.state.amount).toFixed(
                            this.state.currency == 1000 ? 8 : 4,
                          ),
                        ),
                      ) +
                      ' ' +
                      this.state.currencyCode
                    }
                    secondary={t('Amount')}
                  />
                )}
              </ListItem>
              <Divider />

              <ListItem>
                <ListItemIcon>
                  <PaymentsIcon />
                </ListItemIcon>
                <ListItemText
                  primary={
                    <PaymentText
                      size={20}
                      othersText={t('Others')}
                      verbose={true}
                      text={this.state.payment_method}
                    />
                  }
                  secondary={
                    this.state.currency == 1000
                      ? t('Swap destination')
                      : t('Accepted payment methods')
                  }
                />
              </ListItem>
              <Divider />

              {/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
              <ListItem>
                <ListItemIcon>
                  <PriceChangeIcon />
                </ListItemIcon>
                {this.state.price_now ? (
                  <ListItemText
                    primary={t('{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%', {
                      price: pn(this.state.price_now),
                      currencyCode: this.state.currencyCode,
                      premium: this.state.premium_now,
                    })}
                    secondary={t('Price and Premium')}
                  />
                ) : this.state.is_explicit ? (
                  <ListItemText
                    primary={pn(this.state.satoshis)}
                    secondary={t('Amount of Satoshis')}
                  />
                ) : (
                  <ListItemText
                    primary={parseFloat(parseFloat(this.state.premium).toFixed(2)) + '%'}
                    secondary={t('Premium over market price')}
                  />
                )}
              </ListItem>
              <Divider />

              <ListItem>
                <ListItemIcon>
                  <NumbersIcon />
                </ListItemIcon>
                <Grid container>
                  <Grid item xs={4.5}>
                    <ListItemText primary={this.state.orderId} secondary={t('Order ID')} />
                  </Grid>
                  <Grid item xs={7.5}>
                    <Grid container>
                      <Grid item xs={2}>
                        <ListItemIcon sx={{ position: 'relative', top: '12px', left: '-5px' }}>
                          <HourglassTopIcon />
                        </ListItemIcon>
                      </Grid>
                      <Grid item xs={10}>
                        <ListItemText
                          primary={this.timerRenderer(this.state.escrow_duration)}
                          secondary={t('Deposit timer')}
                        ></ListItemText>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>
              </ListItem>

              {/* if order is in a status that does not expire, do not show countdown */}
              {[4, 12, 13, 14, 15, 16, 17, 18].includes(this.state.status) ? null : (
                <>
                  <Divider />
                  <ListItem>
                    <ListItemIcon>
                      <AccessTimeIcon />
                    </ListItemIcon>
                    <ListItemText secondary={t('Expires in')}>
                      <Countdown
                        date={new Date(this.state.expires_at)}
                        renderer={this.countdownRenderer}
                      />
                    </ListItemText>
                  </ListItem>
                  <LinearDeterminate
                    key={this.state.total_secs_exp}
                    totalSecsExp={this.state.total_secs_exp}
                    expiresAt={this.state.expires_at}
                  />
                </>
              )}
            </List>

            {/* If the user has a penalty/limit */}
            {this.state.penalty ? (
              <>
                <Divider />
                <Grid item xs={12} align='center'>
                  <Alert severity='warning' sx={{ maxWidth: 360 }}>
                    <Countdown
                      date={new Date(this.state.penalty)}
                      renderer={this.countdownPenaltyRenderer}
                    />
                  </Alert>
                </Grid>
              </>
            ) : null}

            {/* If the counterparty asked for collaborative cancel */}
            {this.state.pending_cancel ? (
              <>
                <Divider />
                <Grid item xs={12} align='center'>
                  <Alert severity='warning' sx={{ maxWidth: 360 }}>
                    {t('{{nickname}} is asking for a collaborative cancel', {
                      nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick,
                    })}
                  </Alert>
                </Grid>
              </>
            ) : null}

            {/* If the user has asked for a collaborative cancel */}
            {this.state.asked_for_cancel ? (
              <>
                <Divider />
                <Grid item xs={12} align='center'>
                  <Alert severity='warning' sx={{ maxWidth: 360 }}>
                    {t('You asked for a collaborative cancellation')}
                  </Alert>
                </Grid>
              </>
            ) : null}
          </Paper>
        </Grid>

        <Grid item xs={12} align='center'>
          {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
          {this.state.is_participant ? (
            <>
              {this.CancelButton()}
              {this.BackButton()}
            </>
          ) : (
            <Grid container spacing={1}>
              <Grid item xs={12} align='center'>
                <Countdown
                  date={new Date(this.state.penalty)}
                  renderer={this.countdownTakeOrderRenderer}
                />
              </Grid>
              <Grid item xs={12} align='center'>
                <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>
                  {t('Back')}
                </Button>
              </Grid>
            </Grid>
          )}
        </Grid>
      </Grid>
    );
  };

  doubleOrderPageDesktop = () => {
    return (
      <Grid container align='center' spacing={2}>
        <Grid item xs={6} align='left' style={{ width: 330 }}>
          {this.orderBox()}
        </Grid>
        <Grid item xs={6} align='left'>
          <TradeBox
            push={this.props.history.push}
            getOrderDetails={this.getOrderDetails}
            pauseLoading={this.state.pauseLoading}
            width={330}
            data={this.state}
            completeSetState={this.completeSetState}
          />
        </Grid>
      </Grid>
    );
  };

  a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

  doubleOrderPagePhone = () => {
    const { t } = this.props;

    return (
      <Box sx={{ width: '100%' }}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={this.state.tabValue} variant='fullWidth'>
            <Tab
              label={t('Order')}
              {...this.a11yProps(0)}
              onClick={() => this.setState({ tabValue: 0 })}
            />
            <Tab
              label={t('Contract')}
              {...this.a11yProps(1)}
              onClick={() => this.setState({ tabValue: 1 })}
            />
          </Tabs>
        </Box>
        <Grid container spacing={2}>
          <Grid item>
            <div style={{ width: 330, display: this.state.tabValue == 0 ? '' : 'none' }}>
              {this.orderBox()}
            </div>
            <div style={{ display: this.state.tabValue == 1 ? '' : 'none' }}>
              <TradeBox
                push={this.props.history.push}
                getOrderDetails={this.getOrderDetails}
                pauseLoading={this.state.pauseLoading}
                width={330}
                data={this.state}
                completeSetState={this.completeSetState}
              />
            </div>
          </Grid>
        </Grid>
      </Box>
    );
  };

  orderDetailsPage() {
    const { t } = this.props;
    return this.state.bad_request ? (
      <div align='center'>
        <Typography variant='subtitle2' color='secondary'>
          {/* IMPLEMENT I18N for bad_request */}
          {t(this.state.bad_request)}
          <br />
        </Typography>
        <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>
          {t('Back')}
        </Button>
      </div>
    ) : this.state.is_participant ? (
      <>
        {this.weblnDialog()}
        {/* Desktop View */}
        <MediaQuery minWidth={920}>{this.doubleOrderPageDesktop()}</MediaQuery>

        {/* SmarPhone View */}
        <MediaQuery maxWidth={919}>{this.doubleOrderPagePhone()}</MediaQuery>
      </>
    ) : (
      <Grid item xs={12} align='center' style={{ width: 330 }}>
        {this.orderBox()}
      </Grid>
    );
  }

  handleCloseWeblnDialog = () => {
    this.setState({ openWeblnDialog: false });
  };

  weblnDialog = () => {
    const { t } = this.props;

    return (
      <Dialog
        open={this.state.openWeblnDialog}
        onClose={this.handleCloseWeblnDialog}
        aria-labelledby='webln-dialog-title'
        aria-describedby='webln-dialog-description'
      >
        <DialogTitle id='webln-dialog-title'>{t('WebLN')}</DialogTitle>
        <DialogContent>
          <DialogContentText id='webln-dialog-description'>
            {this.state.waitingWebln ? (
              <>
                <CircularProgress size={16} thickness={5} style={{ marginRight: 10 }} />
                {this.state.is_buyer
                  ? t('Invoice not received, please check your WebLN wallet.')
                  : t('Payment not received, please check your WebLN wallet.')}
              </>
            ) : (
              <>
                <CheckIcon color='success' />
                {t('You can close now your WebLN wallet popup.')}
              </>
            )}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleCloseWeblnDialog} autoFocus>
            {t('Done')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  };

  render() {
    return (
      // Only so nothing shows while requesting the first batch of data
      this.state.loading ? <CircularProgress /> : this.orderDetailsPage()
    );
  }
}

export default withTranslation()(OrderPage);