From c88bcce9987d4b5cc8123002485a928ff4191e94 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Sun, 4 Jun 2017 17:56:55 +0200 Subject: some UI fixes --- src/webex/pages/confirm-contract.tsx | 14 +++++++++++++- src/webex/pages/confirm-create-reserve.tsx | 28 +++++++++++++++------------- src/webex/pages/payback.tsx | 4 ++-- src/webex/pages/popup.tsx | 19 +++++++++---------- src/webex/pages/tree.tsx | 20 +++++++++++--------- src/webex/renderHtml.tsx | 12 ++++++++++++ 6 files changed, 62 insertions(+), 35 deletions(-) (limited to 'src/webex') diff --git a/src/webex/pages/confirm-contract.tsx b/src/webex/pages/confirm-contract.tsx index c4692cbf2..fa71b1028 100644 --- a/src/webex/pages/confirm-contract.tsx +++ b/src/webex/pages/confirm-contract.tsx @@ -107,6 +107,12 @@ interface ContractPromptState { payDisabled: boolean; alreadyPaid: boolean; exchanges: null|ExchangeRecord[]; + /** + * Don't request updates to proposal state while + * this is set to true, to avoid UI flickering + * when pressing pay. + */ + holdCheck: boolean; } class ContractPrompt extends React.Component { @@ -118,6 +124,7 @@ class ContractPrompt extends React.Component this.checkPayment(), 500); + if (this.state.holdCheck) { + return; + } const payStatus = await wxApi.checkPay(this.props.proposalId); if (payStatus === "insufficient-balance") { const msgInsufficient = i18n.str`You have insufficient funds of the requested currency in your wallet.`; @@ -160,11 +171,11 @@ class ContractPrompt extends React.Component this.checkPayment(), 500); } async doPayment() { const proposal = this.state.proposal; + this.setState({holdCheck: true}); if (!proposal) { return; } @@ -178,6 +189,7 @@ class ContractPrompt extends React.Component {countByPub[denom.denomPub] + "x"} - {amountToPretty(denom.value)} - {amountToPretty(denom.feeWithdraw)} - {amountToPretty(denom.feeRefresh)} - {amountToPretty(denom.feeDeposit)} + {renderAmount(denom.value)} + {renderAmount(denom.feeWithdraw)} + {renderAmount(denom.feeRefresh)} + {renderAmount(denom.feeDeposit)} ); } @@ -187,22 +189,22 @@ function renderReserveCreationDetails(rci: ReserveCreationInfo|null) { {rci!.wireFees.feesForType[s].map((f) => ( {moment.unix(f.endStamp).format("llll")} - {amountToPretty(f.wireFee)} - {amountToPretty(f.closingFee)} + {renderAmount(f.wireFee)} + {renderAmount(f.closingFee)} ))} , ]; } - const withdrawFeeStr = amountToPretty(rci.withdrawFee); - const overheadStr = amountToPretty(rci.overhead); + const withdrawFee = renderAmount(rci.withdrawFee); + const overhead = renderAmount(rci.overhead); return (

Overview

-

{i18n.str`Withdrawal fees: ${withdrawFeeStr}`}

-

{i18n.str`Rounding loss: ${overheadStr}`}

+

{i18n.str`Withdrawal fees:`} {withdrawFee}

+

{i18n.str`Rounding loss:`} {overhead}

{i18n.str`Earliest expiration (for deposit): ${moment.unix(rci.earliestDepositExpiration).fromNow()}`}

Coin Fees

@@ -374,7 +376,7 @@ class ExchangeSelection extends ImplicitStateComponent { Using exchange provider {this.url()}. The exchange provider will charge {" "} - {amountToPretty(totalCost)} + {renderAmount(totalCost)} {" "} in fees. @@ -476,7 +478,7 @@ class ExchangeSelection extends ImplicitStateComponent {
{"You are about to withdraw "} - {amountToPretty(this.props.amount)} + {renderAmount(this.props.amount)} {" from your bank account into your wallet."} {this.selectingExchange() ? this.renderSelect() : this.renderConfirm()} diff --git a/src/webex/pages/payback.tsx b/src/webex/pages/payback.tsx index 4aadf5add..51ad8612c 100644 --- a/src/webex/pages/payback.tsx +++ b/src/webex/pages/payback.tsx @@ -24,7 +24,7 @@ /** * Imports. */ -import { amountToPretty } from "../../helpers"; +import { renderAmount } from "../renderHtml"; import { ReserveRecord, } from "../../types"; @@ -73,7 +73,7 @@ class Payback extends ImplicitStateComponent {
{reserves.map((r) => (
-

Reserve for ${amountToPretty(r.current_amount!)}

+

Reserve for ${renderAmount(r.current_amount!)}

  • Exchange: ${r.exchange_base_url}
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index 54e4f3e2d..ee9c8023f 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -25,7 +25,6 @@ /** * Imports. */ -import { amountToPretty } from "../../helpers"; import * as i18n from "../../i18n"; import { AmountJson, @@ -36,7 +35,7 @@ import { WalletBalanceEntry, } from "../../types"; -import { abbrev } from "../renderHtml"; +import { abbrev, renderAmount } from "../renderHtml"; import * as React from "react"; import * as ReactDOM from "react-dom"; @@ -258,15 +257,15 @@ class WalletBalanceView extends React.Component { let incoming: JSX.Element | undefined; let payment: JSX.Element | undefined; - console.log("available: ", entry.pendingIncoming ? amountToPretty(entry.available) : null); - console.log("incoming: ", entry.pendingIncoming ? amountToPretty(entry.pendingIncoming) : null); + console.log("available: ", entry.pendingIncoming ? renderAmount(entry.available) : null); + console.log("incoming: ", entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null); if (Amounts.isNonZero(entry.pendingIncoming)) { incoming = ( {"+"} - {amountToPretty(entry.pendingIncoming)} + {renderAmount(entry.pendingIncoming)} {" "} incoming @@ -278,7 +277,7 @@ class WalletBalanceView extends React.Component { payment = ( - {amountToPretty(entry.pendingPayment)} + {renderAmount(entry.pendingPayment)} {" "} being spent @@ -344,7 +343,7 @@ function formatHistoryItem(historyItem: HistoryRecord) { Bank requested reserve ({abbrev(d.reservePub)}) for {" "} - {amountToPretty(d.requestedAmount)}. + {renderAmount(d.requestedAmount)}. ); case "confirm-reserve": { @@ -354,7 +353,7 @@ function formatHistoryItem(historyItem: HistoryRecord) { return ( Started to withdraw - {" "}{amountToPretty(d.requestedAmount)}{" "} + {" "}{renderAmount(d.requestedAmount)}{" "} from {exchange} ({pub}). ); @@ -369,7 +368,7 @@ function formatHistoryItem(historyItem: HistoryRecord) { } case "depleted-reserve": { const exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??"; - const amount = amountToPretty(d.requestedAmount); + const amount = renderAmount(d.requestedAmount); const pub = abbrev(d.reservePub); return ( @@ -383,7 +382,7 @@ function formatHistoryItem(historyItem: HistoryRecord) { const fulfillmentLinkElem = view product; return ( - Paid {amountToPretty(d.amount)} to merchant {merchantElem}. + Paid {renderAmount(d.amount)} to merchant {merchantElem}. {" "} ({fulfillmentLinkElem}) diff --git a/src/webex/pages/tree.tsx b/src/webex/pages/tree.tsx index 3eafbbeb4..ad1693fb5 100644 --- a/src/webex/pages/tree.tsx +++ b/src/webex/pages/tree.tsx @@ -21,7 +21,7 @@ */ -import { amountToPretty, getTalerStampDate } from "../../helpers"; +import { getTalerStampDate } from "../../helpers"; import { CoinRecord, CoinStatus, @@ -42,6 +42,8 @@ import { refresh, } from "../wxApi"; +import { renderAmount } from "../renderHtml"; + import * as React from "react"; import * as ReactDOM from "react-dom"; @@ -57,8 +59,8 @@ class ReserveView extends React.Component {
  • Key: {r.reserve_pub}
  • Created: {(new Date(r.created * 1000).toString())}
    • -
  • Current: {r.current_amount ? amountToPretty(r.current_amount!) : "null"}
    • -
  • Requested: {amountToPretty(r.requested_amount)}
    • +
  • Current: {r.current_amount ? renderAmount(r.current_amount!) : "null"}
    • +
  • Requested: {renderAmount(r.requested_amount)}
  • Confirmed: {r.confirmed}
@@ -135,7 +137,7 @@ class CoinView extends React.Component {
  • Key: {c.coinPub}
    • -
  • Current amount: {amountToPretty(c.currentAmount)}
    • +
  • Current amount: {renderAmount(c.currentAmount)}
  • Denomination:
  • Suspended: {(c.suspended || false).toString()}
  • Status: {CoinStatus[c.status]}
    • @@ -304,11 +306,11 @@ class DenominationList extends ImplicitStateComponent {
    • Offered: {d.isOffered ? "yes" : "no"}
      • -
    • Value: {amountToPretty(d.value)}
      • -
    • Withdraw fee: {amountToPretty(d.feeWithdraw)}
      • -
    • Refresh fee: {amountToPretty(d.feeRefresh)}
      • -
    • Deposit fee: {amountToPretty(d.feeDeposit)}
      • -
    • Refund fee: {amountToPretty(d.feeRefund)}
      • +
    • Value: {renderAmount(d.value)}
      • +
    • Withdraw fee: {renderAmount(d.feeWithdraw)}
      • +
    • Refresh fee: {renderAmount(d.feeRefresh)}
      • +
    • Deposit fee: {renderAmount(d.feeDeposit)}
      • +
    • Refund fee: {renderAmount(d.feeRefund)}
    • Start: {getTalerStampDate(d.stampStart)!.toString()}
    • Withdraw expiration: {getTalerStampDate(d.stampExpireWithdraw)!.toString()}
    • Legal expiration: {getTalerStampDate(d.stampExpireLegal)!.toString()}
      • diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx index 4dd7baded..51f9019ef 100644 --- a/src/webex/renderHtml.tsx +++ b/src/webex/renderHtml.tsx @@ -27,6 +27,8 @@ import { amountToPretty } from "../helpers"; import * as i18n from "../i18n"; import { + AmountJson, + Amounts, ContractTerms, } from "../types"; @@ -62,6 +64,16 @@ export function renderContractTerms(contractTerms: ContractTerms): JSX.Element { } +/** + * Render amount as HTML, which non-breaking space between + * decimal value and currency. + */ +export function renderAmount(amount: AmountJson) { + const x = amount.value + amount.fraction / Amounts.fractionalBase; + return {x} {amount.currency}; +} + + /** * Abbreviate a string to a given length, and show the full * string on hover as a tooltip. -- cgit v1.2.3