pseudoponents.js

const Info = ({ title, img, alt, message, details, className, buttonText = 'Done', handleClick = () => {} }) => (
  <div className={className !== undefined ? `${styles['acc__info']} ${styles[className]}` : styles['acc__info']}>
    <h2>{title}</h2>
    <div className={styles.card}>
      <div className={styles['acc__info__container']}>
        <img src={img} alt={alt} />
      </div>
      <h4>{message}</h4>
      <p>{details}</p>
    </div>
    <button onclick={handleClick}>{buttonText}</button>
  </div>
);

function SendError({ show }) {
  function handleClick(e) {
    prevent(e);
    show(getParentScreen(this)._id);
  }
  return (
    <Info
      title="Transaction Error"
      className="alert"
      img={ICON_ALERT}
      alt="Alert!"
      message="We could not process your request at this time. Please try again."
      handleClick={handleClick}
    />
  );
}

function SendSuccess({ show, amount, username }) {
  function handleClick(e) {
    prevent(e);
    show(getParentScreen(this)._id);
  }
  return (
    <Info
      title="Transaction Complete"
      className="success"
      img={ICON_SUCCESS}
      alt="Success!"
      message="Your transaction was successful!"
      details={`You sent ${amount} VIDY to @${username}`}
      handleClick={handleClick}
    />
  );
}

const PreviewSendVidyCoin = ({ show, recipient, amount, note }) => {
  let transactionNonce = getUUID();
  const handleClick = e => {
    prevent(e);
    post('transfers', {
      transaction: transactionNonce,
      amount: amount * 1e18,
      recipient: { key: 'username', value: recipient.username },
      note: note,
    })
      .then(() => {
        show(SendSuccess({ show, amount, username: recipient.username }));
      })
      .catch(err => {
        show(SendError({ show }));
        console.error(err);
      });
  };

  return (
    <Info
      title="Review and Send"
      className="review"
      img={recipient.avatar}
      alt={`@${recipient.username}'s Avatar`}
      details={`You are sending ${amount} VIDY to @${recipient.username}`}
      buttonText="Pay"
      handleClick={handleClick}
      show={show}
    />
  );
};

const Transaction = ({ show, data }) => {
  const [quantity, unit] = fromnow(data.date_created, { max: 1 }).split(' ');
  const { integer, fraction, exponent } = weiToVidyDisplayPieces(data.amount);

  const handleClick = e => {
    show(TransactionDetails(data), { modal: true });
  };

  return (
    <div className={styles['acc__wallet__transaction']} onclick={handleClick}>
      <img
        className={styles['acc__wallet__transaction__avatar']}
        src={data.account ? data.account.avatar : data.org ? data.org.avatar : 'https://i.imgur.com/jyh02eu.png'}
      />
      <div className={styles['acc__wallet__transaction__info']}>
        <div>
          <span className={styles['acc__wallet__transaction__second-party']}>
            {data.account ? data.account.username : data.org ? data.org.name : 'master_shredder'}
            {/* {data.org !== undefined && (
              <span className={styles['acc__wallet__transaction__streak-count']}>
                {String(Math.floor(Math.random() * 10 + 1))}
              </span>
            )} */}
          </span>
        </div>
        <div>
          <span className={styles['acc__wallet__transaction__time']}>
            {quantity === 'just' ? `${quantity} ${unit}` : quantity + unit[0]}
          </span>
        </div>
      </div>
      <div
        className={
          data.amount > 0
            ? `${styles['acc__wallet__transaction__amount']} ${styles['received']}`
            : styles['acc__wallet__transaction__amount']
        }
      >
        {integer}
        <span>
          {fraction !== undefined ? '.' + fraction + ' ' : ' '}
          {exponent !== undefined ? 'e' + exponent + ' ' : ' '}
          VIDY
        </span>
      </div>
    </div>
  );
};

const VidyAmount = amount => {
  const { integer, fraction, exponent } = weiToVidyDisplayPieces(amount);
  return (
    <>
      {integer}
      <span>
        {fraction !== undefined && `.${fraction}`}
        {exponent !== undefined && (
          <>
            <var>e</var>
            <sup>{exponent}</sup>}
          </>
        )}
      </span>
    </>
  );
};

const TransactionDetails = ({ account, org, amount, date_created }) => {
  const avatar = account !== undefined ? account.avatar : org.avatar;
  const otherParty = account !== undefined ? account.username : org.username;
  const action = amount > 0 ? 'received' : 'sent';
  const preposition = amount > 0 ? 'from' : 'to';
  const type = amount > 0 ? 'Money Received' : 'Money Sent';
  const dateObj = new Date(date_created);
  return (
    <div className={styles['acc__transactionDetails']}>
      <div className={styles['card']}>
        <img src={avatar} className={styles['avatar']} />
        <p>
          You {action} <VidyAmount amount={amount} /> {preposition} {otherParty}
        </p>
        <h5>Transaction date</h5>
        <h4>
          {dateObj.getDate()} {MONTH_NAMES[dateObj.getMonth()]} {dateObj.getFullYear()}, {dateObj.getHours()}:
          {dateObj.getMinutes()}
        </h4>
        <h5>Transaction type</h5>
        <h4>{type}</h4>
        <div className={styles['seeYourHistory']}>
          <span>
            <HistoryIcon /> See Your History
          </span>
          <button className={styles['next']} onclick={e => prevent(e)} />
        </div>
      </div>
    </div>
  );
};

const Streaks = () => {
  const items = new Array(15).fill('yeah buddy');
  return (
    <div className={styles['acc__streaks']}>
      <h2>Streaks</h2>
      <div className={styles['streaks-grid']}>
        {items.map(i => (
          <div className={styles['streaks-item-border']}>
            <div className={styles['streaks-item']} />
          </div>
        ))}
      </div>
    </div>
  );
};