wallet-core/packages/taler-wallet-webextension/src/renderHtml.tsx

/*
 This file is part of TALER
 (C) 2016 INRIA

 TALER is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 TALER is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
 * Helpers functions to render Taler-related data structures to HTML.
 *
 * @author Florian Dold
 */

/**
 * Imports.
 */
import { AmountJson, Amounts, time, walletTypes } from "taler-wallet-core";
import * as i18n from "./i18n";
import React from "react";

/**
 * Render amount as HTML, which non-breaking space between
 * decimal value and currency.
 */
export function renderAmount(amount: AmountJson | string): JSX.Element {
  let a;
  if (typeof amount === "string") {
    a = Amounts.parse(amount);
  } else {
    a = amount;
  }
  if (!a) {
    return <span>(invalid amount)</span>;
  }
  const x = a.value + a.fraction / Amounts.fractionalBase;
  return (
    <span>
      {x}&nbsp;{a.currency}
    </span>
  );
}

export const AmountView = ({
  amount,
}: {
  amount: AmountJson | string;
}): JSX.Element => renderAmount(amount);

/**
 * Abbreviate a string to a given length, and show the full
 * string on hover as a tooltip.
 */
export function abbrev(s: string, n = 5): JSX.Element {
  let sAbbrev = s;
  if (s.length > n) {
    sAbbrev = s.slice(0, n) + "..";
  }
  return (
    <span className="abbrev" title={s}>
      {sAbbrev}
    </span>
  );
}

interface CollapsibleState {
  collapsed: boolean;
}

interface CollapsibleProps {
  initiallyCollapsed: boolean;
  title: string;
}

/**
 * Component that shows/hides its children when clicking
 * a heading.
 */
export class Collapsible extends React.Component<
  CollapsibleProps,
  CollapsibleState
> {
  constructor(props: CollapsibleProps) {
    super(props);
    this.state = { collapsed: props.initiallyCollapsed };
  }
  render(): JSX.Element {
    const doOpen = (e: any): void => {
      this.setState({ collapsed: false });
      e.preventDefault();
    };
    const doClose = (e: any): void => {
      this.setState({ collapsed: true });
      e.preventDefault();
    };
    if (this.state.collapsed) {
      return (
        <h2>
          <a className="opener opener-collapsed" href="#" onClick={doOpen}>
            {" "}
            {this.props.title}
          </a>
        </h2>
      );
    }
    return (
      <div>
        <h2>
          <a className="opener opener-open" href="#" onClick={doClose}>
            {" "}
            {this.props.title}
          </a>
        </h2>
        {this.props.children}
      </div>
    );
  }
}

function WireFee(props: {
  s: string;
  rci: walletTypes.ExchangeWithdrawDetails;
}): JSX.Element {
  return (
    <>
      <thead>
        <tr>
          <th colSpan={3}>Wire Method {props.s}</th>
        </tr>
        <tr>
          <th>Applies Until</th>
          <th>Wire Fee</th>
          <th>Closing Fee</th>
        </tr>
      </thead>
      <tbody>
        {props.rci.wireFees.feesForType[props.s].map((f) => (
          <tr key={f.sig}>
            <td>{time.stringifyTimestamp(f.endStamp)}</td>
            <td>{renderAmount(f.wireFee)}</td>
            <td>{renderAmount(f.closingFee)}</td>
          </tr>
        ))}
      </tbody>
    </>
  );
}

function AuditorDetailsView(props: {
  rci: walletTypes.ExchangeWithdrawDetails | null;
}): JSX.Element {
  const rci = props.rci;
  console.log("rci", rci);
  if (!rci) {
    return (
      <p>
        Details will be displayed when a valid exchange provider URL is entered.
      </p>
    );
  }
  if ((rci.exchangeInfo.details?.auditors ?? []).length === 0) {
    return <p>The exchange is not audited by any auditors.</p>;
  }
  return (
    <div>
      {(rci.exchangeInfo.details?.auditors ?? []).map((a) => (
        <div key={a.auditor_pub}>
          <h3>Auditor {a.auditor_url}</h3>
          <p>
            Public key: <ExpanderText text={a.auditor_pub} />
          </p>
          <p>
            Trusted:{" "}
            {rci.trustedAuditorPubs.indexOf(a.auditor_pub) >= 0 ? "yes" : "no"}
          </p>
          <p>
            Audits {a.denomination_keys.length} of {rci.numOfferedDenoms}{" "}
            denominations
          </p>
        </div>
      ))}
    </div>
  );
}

function FeeDetailsView(props: {
  rci: walletTypes.ExchangeWithdrawDetails | null;
}): JSX.Element {
  const rci = props.rci;
  if (!rci) {
    return (
      <p>
        Details will be displayed when a valid exchange provider URL is entered.
      </p>
    );
  }

  const denoms = rci.selectedDenoms;
  const withdrawFee = renderAmount(rci.withdrawFee);
  const overhead = renderAmount(rci.overhead);

  return (
    <div>
      <h3>Overview</h3>
      <p>
        Public key:{" "}
        <ExpanderText
          text={rci.exchangeInfo.details?.masterPublicKey ?? "??"}
        />
      </p>
      <p>
        {i18n.str`Withdrawal fees:`} {withdrawFee}
      </p>
      <p>
        {i18n.str`Rounding loss:`} {overhead}
      </p>
      <p>{i18n.str`Earliest expiration (for deposit): ${time.stringifyTimestamp(
        rci.earliestDepositExpiration,
      )}`}</p>
      <h3>Coin Fees</h3>
      <div style={{ overflow: "auto" }}>
        <table className="pure-table">
          <thead>
            <tr>
              <th>{i18n.str`# Coins`}</th>
              <th>{i18n.str`Value`}</th>
              <th>{i18n.str`Withdraw Fee`}</th>
              <th>{i18n.str`Refresh Fee`}</th>
              <th>{i18n.str`Deposit Fee`}</th>
            </tr>
          </thead>
          <tbody>
            {denoms.selectedDenoms.map((ds) => {
              return (
                <tr key={ds.denom.denomPub}>
                  <td>{ds.count + "x"}</td>
                  <td>{renderAmount(ds.denom.value)}</td>
                  <td>{renderAmount(ds.denom.feeWithdraw)}</td>
                  <td>{renderAmount(ds.denom.feeRefresh)}</td>
                  <td>{renderAmount(ds.denom.feeDeposit)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <h3>Wire Fees</h3>
      <div style={{ overflow: "auto" }}>
        <table className="pure-table">
          {Object.keys(rci.wireFees.feesForType).map((s) => (
            <WireFee key={s} s={s} rci={rci} />
          ))}
        </table>
      </div>
    </div>
  );
}

/**
 * Shows details about a withdraw request.
 */
export function WithdrawDetailView(props: {
  rci: walletTypes.ExchangeWithdrawDetails | null;
}): JSX.Element {
  const rci = props.rci;
  return (
    <div>
      <Collapsible initiallyCollapsed={true} title="Fee and Spending Details">
        <FeeDetailsView rci={rci} />
      </Collapsible>
      <Collapsible initiallyCollapsed={true} title="Auditor Details">
        <AuditorDetailsView rci={rci} />
      </Collapsible>
    </div>
  );
}

interface ExpanderTextProps {
  text: string;
}

/**
 * Show a heading with a toggle to show/hide the expandable content.
 */
export function ExpanderText({ text }: ExpanderTextProps): JSX.Element {
  return <span>{text}</span>;
}

export interface LoadingButtonProps {
  loading: boolean;
}

export function ProgressButton(
  props: React.PropsWithChildren<LoadingButtonProps> &
    React.DetailedHTMLProps<
      React.ButtonHTMLAttributes<HTMLButtonElement>,
      HTMLButtonElement
    >,
): JSX.Element {
  return (
    <button
      className="pure-button pure-button-primary"
      type="button"
      {...props}
    >
      {props.loading ? (
        <span>
          <object
            className="svg-icon svg-baseline"
            data="/img/spinner-bars.svg"
          />
        </span>
      ) : null}{" "}
      {props.children}
    </button>
  );
}

export function PageLink(
  props: React.PropsWithChildren<{ pageName: string }>,
): JSX.Element {
  const url = chrome.extension.getURL(`/${props.pageName}`);
  return (
    <a
      className="actionLink"
      href={url}
      target="_blank"
      rel="noopener noreferrer"
    >
      {props.children}
    </a>
  );
}