new balances API, remove defunct 'return funds to own account' implementation

2 files changed, 14 insertions, 310 deletions

diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx
index e4eea4d9e..8a99a6d90 100644
--- a/src/webex/pages/popup.tsx
+++ b/src/webex/pages/popup.tsx
@@ -29,8 +29,6 @@ import * as i18n from "../i18n";
 import { AmountJson } from "../../util/amounts";
 import * as Amounts from "../../util/amounts";
 
-import { WalletBalance, WalletBalanceEntry } from "../../types/walletTypes";
-
 import { abbrev, renderAmount, PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
@@ -40,6 +38,7 @@ import moment from "moment";
 import { Timestamp } from "../../util/time";
 import { classifyTalerUri, TalerUriType } from "../../util/taleruri";
 import { PermissionsCheckbox } from "./welcome";
+import { BalancesResponse, Balance } from "../../types/walletTypes";
 
 // FIXME: move to newer react functions
 /* eslint-disable react/no-deprecated */
@@ -172,7 +171,7 @@ function EmptyBalanceView(): JSX.Element {
 }
 
 class WalletBalanceView extends React.Component<any, any> {
-  private balance: WalletBalance;
+  private balance: BalancesResponse;
   private gotError = false;
   private canceler: (() => void) | undefined = undefined;
   private unmount = false;
@@ -196,7 +195,7 @@ class WalletBalanceView extends React.Component<any, any> {
       return;
     }
     this.updateBalanceRunning = true;
-    let balance: WalletBalance;
+    let balance: BalancesResponse;
     try {
       balance = await wxApi.getBalance();
     } catch (e) {
@@ -219,10 +218,14 @@ class WalletBalanceView extends React.Component<any, any> {
     this.setState({});
   }
 
-  formatPending(entry: WalletBalanceEntry): JSX.Element {
+  formatPending(entry: Balance): JSX.Element {
     let incoming: JSX.Element | undefined;
     let payment: JSX.Element | undefined;
 
+    const available = Amounts.parseOrThrow(entry.available);
+    const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming);
+    const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing);
+
     console.log(
       "available: ",
       entry.pendingIncoming ? renderAmount(entry.available) : null,
@@ -232,7 +235,7 @@ class WalletBalanceView extends React.Component<any, any> {
       entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null,
     );
 
-    if (Amounts.isNonZero(entry.pendingIncoming)) {
+    if (Amounts.isNonZero(pendingIncoming)) {
       incoming = (
         <i18n.Translate wrap="span">
           <span style={{ color: "darkgreen" }}>
@@ -244,18 +247,6 @@ class WalletBalanceView extends React.Component<any, any> {
       );
     }
 
-    if (Amounts.isNonZero(entry.pendingPayment)) {
-      payment = (
-        <i18n.Translate wrap="span">
-          <span style={{ color: "red" }}>
-            {"-"}
-            {renderAmount(entry.pendingPayment)}
-          </span>{" "}
-          being spent
-        </i18n.Translate>
-      );
-    }
-
     const l = [incoming, payment].filter((x) => x !== undefined);
     if (l.length === 0) {
       return <span />;
@@ -288,11 +279,11 @@ class WalletBalanceView extends React.Component<any, any> {
       return <span></span>;
     }
     console.log(wallet);
-    const listing = Object.keys(wallet.byCurrency).map((key) => {
-      const entry: WalletBalanceEntry = wallet.byCurrency[key];
+    const listing = wallet.balances.map((entry) => {
+      const av = Amounts.parseOrThrow(entry.available);
       return (
-        <p key={key}>
-          {bigAmount(entry.available)} {this.formatPending(entry)}
+        <p key={av.currency}>
+          {bigAmount(av)} {this.formatPending(entry)}
         </p>
       );
     });
@@ -314,7 +305,6 @@ function formatAndCapitalize(text: string): string {
   return text;
 }
 
-
 const HistoryComponent = (props: any): JSX.Element => {
   return <span>TBD</span>;
 };
@@ -330,7 +320,6 @@ class WalletSettings extends React.Component<any, any> {
   }
 }
 
-
 function reload(): void {
   try {
     chrome.runtime.reload();
diff --git a/src/webex/pages/return-coins.tsx b/src/webex/pages/return-coins.tsx
index ccdb6db53..e8cf8c9dd 100644
--- a/src/webex/pages/return-coins.tsx
+++ b/src/webex/pages/return-coins.tsx
@@ -23,293 +23,8 @@
 /**
  * Imports.
  */
-
-import { AmountJson } from "../../util/amounts";
-import { Amounts } from "../../util/amounts";
-
-import { SenderWireInfos, WalletBalance } from "../../types/walletTypes";
-
-import * as i18n from "../i18n";
-
-import * as wire from "../../util/wire";
-
-import { getBalance, getSenderWireInfos, returnCoins } from "../wxApi";
-
-import { renderAmount } from "../renderHtml";
-
 import * as React from "react";
 
-interface ReturnSelectionItemProps extends ReturnSelectionListProps {
-  exchangeUrl: string;
-  senderWireInfos: SenderWireInfos;
-}
-
-interface ReturnSelectionItemState {
-  selectedValue: string;
-  supportedWires: string[];
-  selectedWire: string;
-  currency: string;
-}
-
-class ReturnSelectionItem extends React.Component<
-  ReturnSelectionItemProps,
-  ReturnSelectionItemState
-> {
-  constructor(props: ReturnSelectionItemProps) {
-    super(props);
-    const exchange = this.props.exchangeUrl;
-    const wireTypes = this.props.senderWireInfos.exchangeWireTypes;
-    const supportedWires = this.props.senderWireInfos.senderWires.filter(
-      (x) => {
-        return (
-          wireTypes[exchange] &&
-          wireTypes[exchange].indexOf((x as any).type) >= 0
-        );
-      },
-    );
-    this.state = {
-      currency: props.balance.byExchange[props.exchangeUrl].available.currency,
-      selectedValue: Amounts.stringify(
-        props.balance.byExchange[props.exchangeUrl].available,
-      ),
-      selectedWire: "",
-      supportedWires,
-    };
-  }
-  render(): JSX.Element {
-    const exchange = this.props.exchangeUrl;
-    const byExchange = this.props.balance.byExchange;
-    const wireTypes = this.props.senderWireInfos.exchangeWireTypes;
-    return (
-      <div key={exchange}>
-        <h2>Exchange {exchange}</h2>
-        <p>Available amount: {renderAmount(byExchange[exchange].available)}</p>
-        <p>
-          Supported wire methods:{" "}
-          {wireTypes[exchange].length ? wireTypes[exchange].join(", ") : "none"}
-        </p>
-        <p>
-          Wire {""}
-          <input
-            type="text"
-            size={this.state.selectedValue.length || 1}
-            value={this.state.selectedValue}
-            onChange={(evt) =>
-              this.setState({ selectedValue: evt.target.value })
-            }
-            style={{ textAlign: "center" }}
-          />{" "}
-          {this.props.balance.byExchange[exchange].available.currency} {""}
-          to account {""}
-          <select
-            value={this.state.selectedWire}
-            onChange={(evt) =>
-              this.setState({ selectedWire: evt.target.value })
-            }
-          >
-            <option style={{ display: "none" }}>Select account</option>
-            {this.state.supportedWires.map((w, n) => (
-              <option value={n.toString()} key={JSON.stringify(w)}>
-                {n + 1}: {wire.summarizeWire(w)}
-              </option>
-            ))}
-          </select>
-          .
-        </p>
-        {this.state.selectedWire ? (
-          <button
-            className="pure-button button-success"
-            onClick={() => this.select()}
-          >
-            {i18n.str`Wire to bank account`}
-          </button>
-        ) : null}
-      </div>
-    );
-  }
-
-  select(): void {
-    let val: number;
-    let selectedWire: number;
-    try {
-      val = Number.parseFloat(this.state.selectedValue);
-      selectedWire = Number.parseInt(this.state.selectedWire);
-    } catch (e) {
-      console.error(e);
-      return;
-    }
-    this.props.selectDetail({
-      amount: Amounts.fromFloat(val, this.state.currency),
-      exchange: this.props.exchangeUrl,
-      senderWire: this.state.supportedWires[selectedWire],
-    });
-  }
-}
-
-interface ReturnSelectionListProps {
-  balance: WalletBalance;
-  senderWireInfos: SenderWireInfos;
-  selectDetail(d: SelectedDetail): void;
-}
-
-class ReturnSelectionList extends React.Component<
-  ReturnSelectionListProps,
-  {}
-> {
-  render(): JSX.Element {
-    const byExchange = this.props.balance.byExchange;
-    const exchanges = Object.keys(byExchange);
-    if (!exchanges.length) {
-      return (
-        <p className="errorbox">Currently no funds available to transfer.</p>
-      );
-    }
-    return (
-      <div>
-        {exchanges.map((e) => (
-          <ReturnSelectionItem key={e} exchangeUrl={e} {...this.props} />
-        ))}
-      </div>
-    );
-  }
-}
-
-interface SelectedDetail {
-  amount: AmountJson;
-  senderWire: any;
-  exchange: string;
-}
-
-interface ReturnConfirmationProps {
-  detail: SelectedDetail;
-  cancel(): void;
-  confirm(): void;
-}
-
-class ReturnConfirmation extends React.Component<ReturnConfirmationProps, {}> {
-  render(): JSX.Element {
-    return (
-      <div>
-        <p>
-          Please confirm if you want to transmit{" "}
-          <strong>{renderAmount(this.props.detail.amount)}</strong> at {""}
-          {this.props.detail.exchange} to account {""}
-          <strong style={{ whiteSpace: "nowrap" }}>
-            {wire.summarizeWire(this.props.detail.senderWire)}
-          </strong>
-          .
-        </p>
-        <button
-          className="pure-button button-success"
-          onClick={() => this.props.confirm()}
-        >
-          {i18n.str`Confirm`}
-        </button>
-        <button className="pure-button" onClick={() => this.props.cancel()}>
-          {i18n.str`Cancel`}
-        </button>
-      </div>
-    );
-  }
-}
-
-interface ReturnCoinsState {
-  balance: WalletBalance | undefined;
-  senderWireInfos: SenderWireInfos | undefined;
-  selectedReturn: SelectedDetail | undefined;
-  /**
-   * Last confirmed detail, so we can show a nice box.
-   */
-  lastConfirmedDetail: SelectedDetail | undefined;
-}
-
-class ReturnCoins extends React.Component<{}, ReturnCoinsState> {
-  constructor(props: {}) {
-    super(props);
-    const port = chrome.runtime.connect();
-    port.onMessage.addListener((msg: any) => {
-      if (msg.notify) {
-        console.log("got notified");
-        this.update();
-      }
-    });
-    this.update();
-    this.state = {} as any;
-  }
-
-  async update(): Promise<void> {
-    const balance = await getBalance();
-    const senderWireInfos = await getSenderWireInfos();
-    console.log("got swi", senderWireInfos);
-    console.log("got bal", balance);
-    this.setState({ balance, senderWireInfos });
-  }
-
-  selectDetail(d: SelectedDetail): void {
-    this.setState({ selectedReturn: d });
-  }
-
-  async confirm(): Promise<void> {
-    const selectedReturn = this.state.selectedReturn;
-    if (!selectedReturn) {
-      return;
-    }
-    await returnCoins(selectedReturn);
-    await this.update();
-    this.setState({
-      selectedReturn: undefined,
-      lastConfirmedDetail: selectedReturn,
-    });
-  }
-
-  async cancel(): Promise<void> {
-    this.setState({
-      selectedReturn: undefined,
-      lastConfirmedDetail: undefined,
-    });
-  }
-
-  render(): JSX.Element {
-    const balance = this.state.balance;
-    const senderWireInfos = this.state.senderWireInfos;
-    if (!balance || !senderWireInfos) {
-      return <span>...</span>;
-    }
-    if (this.state.selectedReturn) {
-      return (
-        <div id="main">
-          <ReturnConfirmation
-            detail={this.state.selectedReturn}
-            cancel={() => this.cancel()}
-            confirm={() => this.confirm()}
-          />
-        </div>
-      );
-    }
-    return (
-      <div id="main">
-        <h1>Wire electronic cash back to own bank account</h1>
-        <p>
-          You can send coins back into your own bank account. Note that
-          you&apos;re acting as a merchant when doing this, and thus the same
-          fees apply.
-        </p>
-        {this.state.lastConfirmedDetail ? (
-          <p className="okaybox">
-            Transfer of {renderAmount(this.state.lastConfirmedDetail.amount)}{" "}
-            successfully initiated.
-          </p>
-        ) : null}
-        <ReturnSelectionList
-          selectDetail={(d) => this.selectDetail(d)}
-          balance={balance}
-          senderWireInfos={senderWireInfos}
-        />
-      </div>
-    );
-  }
-}
-
 export function createReturnCoinsPage(): JSX.Element {
-  return <ReturnCoins />;
+  return <span>Not implemented yet.</span>;
 }