aboutsummaryrefslogtreecommitdiff
path: root/src/webex/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/webex/pages')
-rw-r--r--src/webex/pages/add-auditor.html44
-rw-r--r--src/webex/pages/add-auditor.tsx8
-rw-r--r--src/webex/pages/auditors.html50
-rw-r--r--src/webex/pages/auditors.tsx84
-rw-r--r--src/webex/pages/benchmark.html16
-rw-r--r--src/webex/pages/benchmark.tsx49
-rw-r--r--src/webex/pages/pay.html129
-rw-r--r--src/webex/pages/pay.tsx17
-rw-r--r--src/webex/pages/payback.html50
-rw-r--r--src/webex/pages/popup.css278
-rw-r--r--src/webex/pages/popup.html22
-rw-r--r--src/webex/pages/popup.tsx80
-rw-r--r--src/webex/pages/redirect.html16
-rw-r--r--src/webex/pages/redirect.js2
-rw-r--r--src/webex/pages/refund.html16
-rw-r--r--src/webex/pages/refund.tsx7
-rw-r--r--src/webex/pages/reset-required.html43
-rw-r--r--src/webex/pages/reset-required.tsx40
-rw-r--r--src/webex/pages/return-coins.html18
-rw-r--r--src/webex/pages/return-coins.tsx167
-rw-r--r--src/webex/pages/show-db.html10
-rw-r--r--src/webex/pages/show-db.ts41
-rw-r--r--src/webex/pages/tip.html33
-rw-r--r--src/webex/pages/tip.tsx10
-rw-r--r--src/webex/pages/welcome.html33
-rw-r--r--src/webex/pages/welcome.tsx2
-rw-r--r--src/webex/pages/withdraw.html31
-rw-r--r--src/webex/pages/withdraw.tsx2
28 files changed, 669 insertions, 629 deletions
diff --git a/src/webex/pages/add-auditor.html b/src/webex/pages/add-auditor.html
index b7a9d041d..7f30b5fb6 100644
--- a/src/webex/pages/add-auditor.html
+++ b/src/webex/pages/add-auditor.html
@@ -1,32 +1,32 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
-<head>
- <meta charset="UTF-8">
+ <title>Taler Wallet: Add Auditor</title>
- <title>Taler Wallet: Add Auditor</title>
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/add-auditor-bundle.js"></script>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/add-auditor-bundle.js"></script>
-
- <style>
- .tree-item {
- margin: 2em;
- border-radius: 5px;
- border: 1px solid gray;
- padding: 1em;
- }
- .button-linky {
- background: none;
- color: black;
- text-decoration: underline;
- border: none;
- }
- </style>
+ <style>
+ .tree-item {
+ margin: 2em;
+ border-radius: 5px;
+ border: 1px solid gray;
+ padding: 1em;
+ }
+ .button-linky {
+ background: none;
+ color: black;
+ text-decoration: underline;
+ border: none;
+ }
+ </style>
+ </head>
<body>
<div id="container"></div>
diff --git a/src/webex/pages/add-auditor.tsx b/src/webex/pages/add-auditor.tsx
index 0f681aae4..5840f4d63 100644
--- a/src/webex/pages/add-auditor.tsx
+++ b/src/webex/pages/add-auditor.tsx
@@ -35,8 +35,7 @@ interface ConfirmAuditorProps {
function ConfirmAuditor(props: ConfirmAuditorProps) {
const [addDone, setAddDone] = useState(false);
-
- const add = async() => {
+ const add = async () => {
const currencies = await getCurrencies();
let currency: CurrencyRecord | undefined;
@@ -78,7 +77,7 @@ function ConfirmAuditor(props: ConfirmAuditorProps) {
await updateCurrency(currency);
setAddDone(true);
- }
+ };
const back = () => {
window.history.back();
@@ -115,7 +114,6 @@ function ConfirmAuditor(props: ConfirmAuditorProps) {
);
}
-
registerMountPage(() => {
const walletPageUrl = new URL(document.location.href);
const url = walletPageUrl.searchParams.get("url");
@@ -136,5 +134,5 @@ registerMountPage(() => {
}
const expirationStamp = Number.parseInt(auditorStampStr);
const args = { url, currency, auditorPub, expirationStamp };
- return <ConfirmAuditor {...args}/>;
+ return <ConfirmAuditor {...args} />;
});
diff --git a/src/webex/pages/auditors.html b/src/webex/pages/auditors.html
index cbfc3b4b5..7c207f750 100644
--- a/src/webex/pages/auditors.html
+++ b/src/webex/pages/auditors.html
@@ -1,34 +1,34 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Auditors</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Auditors</title>
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/auditors-bundle.js"></script>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/auditors-bundle.js"></script>
-
- <style>
- body {
- font-size: 100%;
- }
- .tree-item {
- margin: 2em;
- border-radius: 5px;
- border: 1px solid gray;
- padding: 1em;
- }
- .button-linky {
- background: none;
- color: black;
- text-decoration: underline;
- border: none;
- }
- </style>
+ <style>
+ body {
+ font-size: 100%;
+ }
+ .tree-item {
+ margin: 2em;
+ border-radius: 5px;
+ border: 1px solid gray;
+ padding: 1em;
+ }
+ .button-linky {
+ background: none;
+ color: black;
+ text-decoration: underline;
+ border: none;
+ }
+ </style>
+ </head>
<body>
<div id="container"></div>
diff --git a/src/webex/pages/auditors.tsx b/src/webex/pages/auditors.tsx
index 876cf326b..e2bb29af1 100644
--- a/src/webex/pages/auditors.tsx
+++ b/src/webex/pages/auditors.tsx
@@ -20,17 +20,13 @@
* @author Florian Dold
*/
-
import {
AuditorRecord,
CurrencyRecord,
ExchangeForCurrencyRecord,
} from "../../types/dbTypes";
-import {
- getCurrencies,
- updateCurrency,
-} from "../wxApi";
+import { getCurrencies, updateCurrency } from "../wxApi";
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -60,14 +56,22 @@ class CurrencyList extends React.Component<{}, CurrencyListState> {
}
async confirmRemoveAuditor(c: CurrencyRecord, a: AuditorRecord) {
- if (window.confirm(`Do you really want to remove auditor ${a.baseUrl} for currency ${c.name}?`)) {
+ if (
+ window.confirm(
+ `Do you really want to remove auditor ${a.baseUrl} for currency ${c.name}?`,
+ )
+ ) {
c.auditors = c.auditors.filter((x) => x.auditorPub !== a.auditorPub);
await updateCurrency(c);
}
}
async confirmRemoveExchange(c: CurrencyRecord, e: ExchangeForCurrencyRecord) {
- if (window.confirm(`Do you really want to remove exchange ${e.baseUrl} for currency ${c.name}?`)) {
+ if (
+ window.confirm(
+ `Do you really want to remove exchange ${e.baseUrl} for currency ${c.name}?`,
+ )
+ ) {
c.exchanges = c.exchanges.filter((x) => x.baseUrl !== e.baseUrl);
await updateCurrency(c);
}
@@ -81,18 +85,21 @@ class CurrencyList extends React.Component<{}, CurrencyListState> {
<div>
<p>Trusted Auditors:</p>
<ul>
- {c.auditors.map((a) => (
- <li>
- {a.baseUrl}{" "}
- <button className="pure-button button-destructive" onClick={() => this.confirmRemoveAuditor(c, a)}>
- Remove
- </button>
- <ul>
- <li>valid until {new Date(a.expirationStamp).toString()}</li>
- <li>public key {a.auditorPub}</li>
- </ul>
- </li>
- ))}
+ {c.auditors.map((a) => (
+ <li>
+ {a.baseUrl}{" "}
+ <button
+ className="pure-button button-destructive"
+ onClick={() => this.confirmRemoveAuditor(c, a)}
+ >
+ Remove
+ </button>
+ <ul>
+ <li>valid until {new Date(a.expirationStamp).toString()}</li>
+ <li>public key {a.auditorPub}</li>
+ </ul>
+ </li>
+ ))}
</ul>
</div>
);
@@ -106,14 +113,17 @@ class CurrencyList extends React.Component<{}, CurrencyListState> {
<div>
<p>Trusted Exchanges:</p>
<ul>
- {c.exchanges.map((e) => (
- <li>
- {e.baseUrl}{" "}
- <button className="pure-button button-destructive" onClick={() => this.confirmRemoveExchange(c, e)}>
- Remove
- </button>
- </li>
- ))}
+ {c.exchanges.map((e) => (
+ <li>
+ {e.baseUrl}{" "}
+ <button
+ className="pure-button button-destructive"
+ onClick={() => this.confirmRemoveExchange(c, e)}
+ >
+ Remove
+ </button>
+ </li>
+ ))}
</ul>
</div>
);
@@ -126,16 +136,16 @@ class CurrencyList extends React.Component<{}, CurrencyListState> {
}
return (
<div id="main">
- {currencies.map((c) => (
- <div>
- <h1>Currency {c.name}</h1>
- <p>Displayed with {c.fractionalDigits} fractional digits.</p>
- <h2>Auditors</h2>
- <div>{this.renderAuditors(c)}</div>
- <h2>Exchanges</h2>
- <div>{this.renderExchanges(c)}</div>
- </div>
- ))}
+ {currencies.map((c) => (
+ <div>
+ <h1>Currency {c.name}</h1>
+ <p>Displayed with {c.fractionalDigits} fractional digits.</p>
+ <h2>Auditors</h2>
+ <div>{this.renderAuditors(c)}</div>
+ <h2>Exchanges</h2>
+ <div>{this.renderExchanges(c)}</div>
+ </div>
+ ))}
</div>
);
}
diff --git a/src/webex/pages/benchmark.html b/src/webex/pages/benchmark.html
index a593d1e37..d4216ecad 100644
--- a/src/webex/pages/benchmark.html
+++ b/src/webex/pages/benchmark.html
@@ -1,17 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
<html>
<head>
- <meta charset="UTF-8">
+ <meta charset="UTF-8" />
<title>Taler Wallet: Benchmarks</title>
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
- <link rel="icon" href="/img/icon.png">
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+ <link rel="icon" href="/img/icon.png" />
<script src="/dist/page-common-bundle.js"></script>
<script src="/dist/benchmark-bundle.js"></script>
</head>
<body>
- <section id="main">
- <h1>Benchmarks</h1>
- <div id="container"></div>
- </section>
+ <section id="main">
+ <h1>Benchmarks</h1>
+ <div id="container"></div>
+ </section>
</body>
</html>
diff --git a/src/webex/pages/benchmark.tsx b/src/webex/pages/benchmark.tsx
index fe874f2b7..7de546bb0 100644
--- a/src/webex/pages/benchmark.tsx
+++ b/src/webex/pages/benchmark.tsx
@@ -14,7 +14,6 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-
/**
* Benchmarks for the wallet.
*
@@ -31,14 +30,12 @@ import * as React from "react";
import * as ReactDOM from "react-dom";
import { registerMountPage } from "../renderHtml";
-
interface BenchmarkRunnerState {
repetitions: number;
result?: BenchmarkResult;
running: boolean;
}
-
function BenchmarkDisplay(props: BenchmarkRunnerState) {
const result = props.result;
if (!result) {
@@ -50,24 +47,23 @@ function BenchmarkDisplay(props: BenchmarkRunnerState) {
}
return (
<>
- <h2>Results for {result.repetitions} repetitions</h2>
- <table className="pure-table">
- <thead>
- <tr>
- <th>{i18n.str`Operation`}</th>
- <th>{i18n.str`time (ms/op)`}</th>
- </tr>
- {
- Object.keys(result.time).sort().map(
- k =>
- <tr>
- <td>{k}</td>
- <td>{result.time[k] / result.repetitions}</td>
- </tr>
- )
- }
- </thead>
- </table>
+ <h2>Results for {result.repetitions} repetitions</h2>
+ <table className="pure-table">
+ <thead>
+ <tr>
+ <th>{i18n.str`Operation`}</th>
+ <th>{i18n.str`time (ms/op)`}</th>
+ </tr>
+ {Object.keys(result.time)
+ .sort()
+ .map((k) => (
+ <tr>
+ <td>{k}</td>
+ <td>{result.time[k] / result.repetitions}</td>
+ </tr>
+ ))}
+ </thead>
+ </table>
</>
);
}
@@ -91,10 +87,13 @@ class BenchmarkRunner extends React.Component<any, BenchmarkRunnerState> {
return (
<div>
<label>Repetitions:</label>
- <input type="number"
- value={this.state.repetitions}
- onChange={(evt) => this.setState({ repetitions: Number.parseInt(evt.target.value) })} />
- {" "}
+ <input
+ type="number"
+ value={this.state.repetitions}
+ onChange={(evt) =>
+ this.setState({ repetitions: Number.parseInt(evt.target.value) })
+ }
+ />{" "}
<button onClick={() => this.run()}>Run</button>
<BenchmarkDisplay {...this.state} />
</div>
diff --git a/src/webex/pages/pay.html b/src/webex/pages/pay.html
index 20605ac49..6afc95615 100644
--- a/src/webex/pages/pay.html
+++ b/src/webex/pages/pay.html
@@ -1,79 +1,76 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Confirm Contract</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Confirm Contract</title>
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/pay-bundle.js"></script>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/pay-bundle.js"></script>
+ <style>
+ button.accept {
+ background-color: #5757d2;
+ border: 1px solid black;
+ border-radius: 5px;
+ margin: 1em 0;
+ padding: 0.5em;
+ font-weight: bold;
+ color: white;
+ }
+ button.linky {
+ background: none !important;
+ border: none;
+ padding: 0 !important;
- <style>
- button.accept {
- background-color: #5757D2;
- border: 1px solid black;
- border-radius: 5px;
- margin: 1em 0;
- padding: 0.5em;
- font-weight: bold;
- color: white;
- }
- button.linky {
- background:none!important;
- border:none;
- padding:0!important;
+ font-family: arial, sans-serif;
+ color: #069;
+ text-decoration: underline;
+ cursor: pointer;
+ }
- font-family:arial,sans-serif;
- color:#069;
- text-decoration:underline;
- cursor:pointer;
- }
+ input.url {
+ width: 25em;
+ }
- input.url {
- width: 25em;
- }
+ button.accept:disabled {
+ background-color: #dedbe8;
+ border: 1px solid white;
+ border-radius: 5px;
+ margin: 1em 0;
+ padding: 0.5em;
+ font-weight: bold;
+ color: #2c2c2c;
+ }
+ .errorbox {
+ border: 1px solid;
+ display: inline-block;
+ margin: 1em;
+ padding: 1em;
+ font-weight: bold;
+ background: #ff8a8a;
+ }
- button.accept:disabled {
- background-color: #dedbe8;
- border: 1px solid white;
- border-radius: 5px;
- margin: 1em 0;
- padding: 0.5em;
- font-weight: bold;
- color: #2C2C2C;
- }
-
- .errorbox {
- border: 1px solid;
- display: inline-block;
- margin: 1em;
- padding: 1em;
- font-weight: bold;
- background: #FF8A8A;
- }
-
- .okaybox {
- border: 1px solid;
- display: inline-block;
- margin: 1em;
- padding: 1em;
- font-weight: bold;
- background: #00FA9A;
- }
- </style>
-</head>
-
-<body>
- <section id="main">
- <h1>GNU Taler Wallet</h1>
- <article id="container" class="fade"></article>
- </section>
-</body>
+ .okaybox {
+ border: 1px solid;
+ display: inline-block;
+ margin: 1em;
+ padding: 1em;
+ font-weight: bold;
+ background: #00fa9a;
+ }
+ </style>
+ </head>
+ <body>
+ <section id="main">
+ <h1>GNU Taler Wallet</h1>
+ <article id="container" class="fade"></article>
+ </section>
+ </body>
</html>
diff --git a/src/webex/pages/pay.tsx b/src/webex/pages/pay.tsx
index 7f36cb66e..714e3b0a3 100644
--- a/src/webex/pages/pay.tsx
+++ b/src/webex/pages/pay.tsx
@@ -78,17 +78,15 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) {
let contractTerms: ContractTerms;
try {
- contractTerms = codecForContractTerms().decode(JSON.parse(payStatus.contractTermsRaw));
+ contractTerms = codecForContractTerms().decode(
+ JSON.parse(payStatus.contractTermsRaw),
+ );
} catch (e) {
// This should never happen, as the wallet is supposed to check the contract terms
// before storing them.
console.error(e);
console.log("raw contract terms were", payStatus.contractTermsRaw);
- return (
- <span>
- Invalid contract terms.
- </span>
- );
+ return <span>Invalid contract terms.</span>;
}
if (!contractTerms) {
@@ -149,7 +147,9 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) {
{insufficientBalance ? (
<div>
- <p style={{color: "red", fontWeight: "bold"}}>Unable to pay: Your balance is insufficient.</p>
+ <p style={{ color: "red", fontWeight: "bold" }}>
+ Unable to pay: Your balance is insufficient.
+ </p>
</div>
) : null}
@@ -168,7 +168,8 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) {
<ProgressButton
loading={loading}
disabled={insufficientBalance}
- onClick={() => doPayment()}>
+ onClick={() => doPayment()}
+ >
{i18n.str`Confirm payment`}
</ProgressButton>
</div>
diff --git a/src/webex/pages/payback.html b/src/webex/pages/payback.html
index d6fe334c8..706949544 100644
--- a/src/webex/pages/payback.html
+++ b/src/webex/pages/payback.html
@@ -1,34 +1,34 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Payback</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Payback</title>
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/payback-bundle.js"></script>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/payback-bundle.js"></script>
-
- <style>
- body {
- font-size: 100%;
- }
- .tree-item {
- margin: 2em;
- border-radius: 5px;
- border: 1px solid gray;
- padding: 1em;
- }
- .button-linky {
- background: none;
- color: black;
- text-decoration: underline;
- border: none;
- }
- </style>
+ <style>
+ body {
+ font-size: 100%;
+ }
+ .tree-item {
+ margin: 2em;
+ border-radius: 5px;
+ border: 1px solid gray;
+ padding: 1em;
+ }
+ .button-linky {
+ background: none;
+ color: black;
+ text-decoration: underline;
+ border: none;
+ }
+ </style>
+ </head>
<body>
<div id="container"></div>
diff --git a/src/webex/pages/popup.css b/src/webex/pages/popup.css
index 4cae66177..cca002399 100644
--- a/src/webex/pages/popup.css
+++ b/src/webex/pages/popup.css
@@ -1,4 +1,3 @@
-
/**
* @author Gabor X. Toth
* @author Marcello Stanisci
@@ -6,182 +5,181 @@
*/
body {
- min-height: 20em;
- width: 30em;
- margin: 0;
- padding: 0;
- max-height: 800px;
- overflow: hidden;
- background-color: #f8faf7;
- font-family: Arial, Helvetica, sans-serif;
+ min-height: 20em;
+ width: 30em;
+ margin: 0;
+ padding: 0;
+ max-height: 800px;
+ overflow: hidden;
+ background-color: #f8faf7;
+ font-family: Arial, Helvetica, sans-serif;
}
.nav {
- background-color: #033;
- padding: 0.5em 0;
+ background-color: #033;
+ padding: 0.5em 0;
}
.nav a {
- color: #f8faf7;
- padding: 0.7em 1.4em;
- text-decoration: none;
+ color: #f8faf7;
+ padding: 0.7em 1.4em;
+ text-decoration: none;
}
.nav a.active {
- background-color: #f8faf7;
- color: #000;
- font-weight: bold;
+ background-color: #f8faf7;
+ color: #000;
+ font-weight: bold;
}
-
.container {
- overflow-y: scroll;
- max-height: 400px;
+ overflow-y: scroll;
+ max-height: 400px;
}
.abbrev {
- text-decoration-style: dotted;
+ text-decoration-style: dotted;
}
#content {
- padding: 1em;
+ padding: 1em;
}
-
#wallet-table .amount {
- text-align: right;
+ text-align: right;
}
.hidden {
- display: none;
+ display: none;
}
#transactions-table th,
#transactions-table td {
- padding: 0.2em 0.5em;
+ padding: 0.2em 0.5em;
}
#reserve-create table {
- width: 100%;
+ width: 100%;
}
#reserve-create table td.label {
- width: 5em;
+ width: 5em;
}
#reserve-create table .input input[type="text"] {
- width: 100%;
+ width: 100%;
}
.historyItem {
- min-width: 380px;
- display: flex;
- flex-direction: row;
- border-bottom: 1px solid #d9dbd8;
- padding: 0.5em;
- align-items: center;
- }
-
- .historyItem .amount {
- font-size: 110%;
- font-weight: bold;
- text-align: right;
- }
-
- .historyDate,
- .historyTitle,
- .historyText,
- .historySmall {
- margin: 0.3em;
- }
-
- .historyDate {
- font-size: 90%;
- color: slategray;
- text-align: right;
- }
-
- .historyLeft {
- display: flex;
- flex-direction: column;
- text-align: right;
- }
-
- .historyContent {
- flex: 1;
- }
-
- .historyTitle {
- font-weight: 400;
- }
-
- .historyText {
- font-size: 90%;
- }
-
- .historySmall {
- font-size: 70%;
- text-transform: uppercase;
- }
-
- .historyAmount {
- flex-grow: 1;
- }
-
- .historyAmount .primary {
- font-size: 100%;
- }
-
- .historyAmount .secondary {
- font-size: 80%;
- }
-
- .historyAmount .positive {
- color: #088;
- }
-
- .historyAmount .positive:before {
- content: "+";
- }
-
- .historyAmount .negative {
- color: #800
- }
-
- .historyAmount .negative:before {
- color: #800;
- content: "-";
- }
- .icon {
- margin: 0 10px;
- text-align: center;
- width: 35px;
- font-size: 20px;
- border-radius: 50%;
- background: #ccc;
- color: #fff;
- padding-top: 4px;
- height: 30px;
- }
-
- .option {
- text-transform: uppercase;
- text-align: right;
- padding: 0.4em;
- font-size: 0.9em;
- }
-
- input[type=checkbox], input[type=radio] {
- vertical-align: middle;
- position: relative;
- bottom: 1px;
- }
-
- input[type=radio] {
- bottom: 2px;
- }
-
- .balance {
- text-align: center;
- padding-top: 2em;
- } \ No newline at end of file
+ min-width: 380px;
+ display: flex;
+ flex-direction: row;
+ border-bottom: 1px solid #d9dbd8;
+ padding: 0.5em;
+ align-items: center;
+}
+
+.historyItem .amount {
+ font-size: 110%;
+ font-weight: bold;
+ text-align: right;
+}
+
+.historyDate,
+.historyTitle,
+.historyText,
+.historySmall {
+ margin: 0.3em;
+}
+
+.historyDate {
+ font-size: 90%;
+ color: slategray;
+ text-align: right;
+}
+
+.historyLeft {
+ display: flex;
+ flex-direction: column;
+ text-align: right;
+}
+
+.historyContent {
+ flex: 1;
+}
+
+.historyTitle {
+ font-weight: 400;
+}
+
+.historyText {
+ font-size: 90%;
+}
+
+.historySmall {
+ font-size: 70%;
+ text-transform: uppercase;
+}
+
+.historyAmount {
+ flex-grow: 1;
+}
+
+.historyAmount .primary {
+ font-size: 100%;
+}
+
+.historyAmount .secondary {
+ font-size: 80%;
+}
+
+.historyAmount .positive {
+ color: #088;
+}
+
+.historyAmount .positive:before {
+ content: "+";
+}
+
+.historyAmount .negative {
+ color: #800;
+}
+
+.historyAmount .negative:before {
+ color: #800;
+ content: "-";
+}
+.icon {
+ margin: 0 10px;
+ text-align: center;
+ width: 35px;
+ font-size: 20px;
+ border-radius: 50%;
+ background: #ccc;
+ color: #fff;
+ padding-top: 4px;
+ height: 30px;
+}
+
+.option {
+ text-transform: uppercase;
+ text-align: right;
+ padding: 0.4em;
+ font-size: 0.9em;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ vertical-align: middle;
+ position: relative;
+ bottom: 1px;
+}
+
+input[type="radio"] {
+ bottom: 2px;
+}
+
+.balance {
+ text-align: center;
+ padding-top: 2em;
+}
diff --git a/src/webex/pages/popup.html b/src/webex/pages/popup.html
index 7929da765..030641d60 100644
--- a/src/webex/pages/popup.html
+++ b/src/webex/pages/popup.html
@@ -1,18 +1,16 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="utf-8" />
-<head>
- <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+ <link rel="stylesheet" type="text/css" href="popup.css" />
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
- <link rel="stylesheet" type="text/css" href="popup.css">
-
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/popup-bundle.js"></script>
-</head>
-
-<body>
- <div id="container" style="margin:0;padding:0"></div>
-</body>
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/popup-bundle.js"></script>
+ </head>
+ <body>
+ <div id="container" style="margin: 0; padding: 0;"></div>
+ </body>
</html>
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx
index 44f45f9db..7b20f2227 100644
--- a/src/webex/pages/popup.tsx
+++ b/src/webex/pages/popup.tsx
@@ -29,10 +29,7 @@ import * as i18n from "../i18n";
import { AmountJson } from "../../util/amounts";
import * as Amounts from "../../util/amounts";
-import {
- WalletBalance,
- WalletBalanceEntry,
-} from "../../types/walletTypes";
+import { WalletBalance, WalletBalanceEntry } from "../../types/walletTypes";
import {
abbrev,
@@ -98,7 +95,7 @@ class Router extends React.Component<any, any> {
console.log("rendering route", route);
let defaultChild: React.ReactChild | null = null;
let foundChild: React.ReactChild | null = null;
- React.Children.forEach(this.props.children, child => {
+ React.Children.forEach(this.props.children, (child) => {
const childProps: any = (child as any).props;
if (!childProps) {
return;
@@ -188,7 +185,7 @@ function bigAmount(amount: AmountJson): JSX.Element {
const v = amount.value + amount.fraction / Amounts.fractionalBase;
return (
<span>
- <span style={{ fontSize: "5em", display: 'block'}}>{v}</span>{" "}
+ <span style={{ fontSize: "5em", display: "block" }}>{v}</span>{" "}
<span>{amount.currency}</span>
</span>
);
@@ -281,7 +278,7 @@ class WalletBalanceView extends React.Component<any, any> {
);
}
- const l = [incoming, payment].filter(x => x !== undefined);
+ const l = [incoming, payment].filter((x) => x !== undefined);
if (l.length === 0) {
return <span />;
}
@@ -300,7 +297,7 @@ class WalletBalanceView extends React.Component<any, any> {
const wallet = this.balance;
if (this.gotError) {
return (
- <div className='balance'>
+ <div className="balance">
<p>{i18n.str`Error: could not retrieve balance information.`}</p>
<p>
Click <PageLink pageName="welcome.html">here</PageLink> for help and
@@ -313,7 +310,7 @@ class WalletBalanceView extends React.Component<any, any> {
return <span></span>;
}
console.log(wallet);
- const listing = Object.keys(wallet.byCurrency).map(key => {
+ const listing = Object.keys(wallet.byCurrency).map((key) => {
const entry: WalletBalanceEntry = wallet.byCurrency[key];
return (
<p>
@@ -321,7 +318,11 @@ class WalletBalanceView extends React.Component<any, any> {
</p>
);
});
- return listing.length > 0 ? <div className='balance'>{listing}</div> : <EmptyBalanceView />;
+ return listing.length > 0 ? (
+ <div className="balance">{listing}</div>
+ ) : (
+ <EmptyBalanceView />
+ );
}
}
@@ -356,7 +357,7 @@ function HistoryItem({
invalid,
timestamp,
icon,
- negative = false
+ negative = false,
}: HistoryItemProps) {
function formatDate(timestamp: number | "never") {
if (timestamp !== "never") {
@@ -425,7 +426,7 @@ function HistoryItem({
function amountDiff(
total: string | Amounts.AmountJson,
- partial: string | Amounts.AmountJson
+ partial: string | Amounts.AmountJson,
): Amounts.AmountJson | string {
let a = typeof total === "string" ? Amounts.parse(total) : total;
let b = typeof partial === "string" ? Amounts.parse(partial) : partial;
@@ -436,12 +437,11 @@ function amountDiff(
}
}
-
function parseSummary(summary: string) {
let parsed = summary.split(/: (.+)/);
return {
merchant: parsed[0],
- item: parsed[1]
+ item: parsed[1],
};
}
@@ -454,7 +454,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
small={i18n.str`Refresh sessions has completed`}
fees={amountDiff(
historyItem.amountRefreshedRaw,
- historyItem.amountRefreshedEffective
+ historyItem.amountRefreshedEffective,
)}
/>
);
@@ -462,7 +462,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
case "order-refused": {
const { merchant, item } = parseSummary(
- historyItem.orderShortInfo.summary
+ historyItem.orderShortInfo.summary,
);
return (
<HistoryItem
@@ -477,7 +477,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
case "order-redirected": {
const { merchant, item } = parseSummary(
- historyItem.newOrderShortInfo.summary
+ historyItem.newOrderShortInfo.summary,
);
return (
<HistoryItem
@@ -492,7 +492,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
case "payment-aborted": {
const { merchant, item } = parseSummary(
- historyItem.orderShortInfo.summary
+ historyItem.orderShortInfo.summary,
);
return (
<HistoryItem
@@ -510,18 +510,15 @@ function formatHistoryItem(historyItem: HistoryEvent) {
case "payment-sent": {
const url = historyItem.orderShortInfo.fulfillmentUrl;
const { merchant, item } = parseSummary(
- historyItem.orderShortInfo.summary
+ historyItem.orderShortInfo.summary,
);
const fees = amountDiff(
historyItem.amountPaidWithFees,
- historyItem.orderShortInfo.amount
+ historyItem.orderShortInfo.amount,
);
const fulfillmentLinkElem = (
<Fragment>
- <a
- href={url}
- onClick={openTab(url)}
- >
+ <a href={url} onClick={openTab(url)}>
{item ? abbrev(item, 30) : null}
</a>
</Fragment>
@@ -542,14 +539,11 @@ function formatHistoryItem(historyItem: HistoryEvent) {
case "order-accepted": {
const url = historyItem.orderShortInfo.fulfillmentUrl;
const { merchant, item } = parseSummary(
- historyItem.orderShortInfo.summary
+ historyItem.orderShortInfo.summary,
);
const fulfillmentLinkElem = (
<Fragment>
- <a
- href={url}
- onClick={openTab(url)}
- >
+ <a href={url} onClick={openTab(url)}>
{item ? abbrev(item, 40) : null}
</a>
</Fragment>
@@ -573,7 +567,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
small={i18n.str`Reserve balance updated`}
fees={amountDiff(
historyItem.amountExpected,
- historyItem.amountReserveBalance
+ historyItem.amountReserveBalance,
)}
/>
);
@@ -593,9 +587,9 @@ function formatHistoryItem(historyItem: HistoryEvent) {
fees={amountDiff(
amountDiff(
historyItem.amountRefundedRaw,
- historyItem.amountRefundedInvalid
+ historyItem.amountRefundedInvalid,
),
- historyItem.amountRefundedEffective
+ historyItem.amountRefundedEffective,
)}
/>
);
@@ -604,7 +598,7 @@ function formatHistoryItem(historyItem: HistoryEvent) {
const exchange = new URL(historyItem.exchangeBaseUrl).host;
const fees = amountDiff(
historyItem.amountWithdrawnRaw,
- historyItem.amountWithdrawnEffective
+ historyItem.amountWithdrawnEffective,
);
return (
<HistoryItem
@@ -663,9 +657,9 @@ class WalletHistory extends React.Component<any, any> {
"refreshed",
"reserve-balance-updated",
"exchange-updated",
- "exchange-added"
+ "exchange-added",
];
-
+
componentWillMount() {
this.update();
this.setState({ filter: true });
@@ -678,7 +672,7 @@ class WalletHistory extends React.Component<any, any> {
}
update() {
- chrome.runtime.sendMessage({ type: "get-history" }, resp => {
+ chrome.runtime.sendMessage({ type: "get-history" }, (resp) => {
if (this.unmounted) {
return;
}
@@ -709,15 +703,13 @@ class WalletHistory extends React.Component<any, any> {
}
const listing: any[] = [];
- const messages = history
- .reverse()
- .filter(hEvent => {
- if (!this.state.filter) return true;
- return this.hidenTypes.indexOf(hEvent.type) === -1;
- });
+ const messages = history.reverse().filter((hEvent) => {
+ if (!this.state.filter) return true;
+ return this.hidenTypes.indexOf(hEvent.type) === -1;
+ });
for (const record of messages) {
- const item = (<HistoryComponent key={record.eventId} record={record} />);
+ const item = <HistoryComponent key={record.eventId} record={record} />;
listing.push(item);
}
@@ -821,5 +813,5 @@ function WalletPopup() {
registerMountPage(() => {
chrome.runtime.connect({ name: "popup" });
- return <WalletPopup />
+ return <WalletPopup />;
});
diff --git a/src/webex/pages/redirect.html b/src/webex/pages/redirect.html
index 9d07d3d2b..67fddb527 100644
--- a/src/webex/pages/redirect.html
+++ b/src/webex/pages/redirect.html
@@ -1,14 +1,12 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="utf-8" />
-<head>
- <meta charset="utf-8">
-
- <script src="/src/webex/pages/redirect.js"></script>
-</head>
-
-<body>
- Redirecting to extension page ...
-</body>
+ <script src="/src/webex/pages/redirect.js"></script>
+ </head>
+ <body>
+ Redirecting to extension page ...
+ </body>
</html>
diff --git a/src/webex/pages/redirect.js b/src/webex/pages/redirect.js
index 879f5b530..547b225bd 100644
--- a/src/webex/pages/redirect.js
+++ b/src/webex/pages/redirect.js
@@ -2,7 +2,7 @@
* This is the entry point for redirects, and should be the only
* web-accessible resource declared in the manifest. This prevents
* malicious websites from embedding wallet pages in them.
- *
+ *
* We still need this redirect page since a webRequest can only directly
* redirect to pages inside the extension that are a web-accessible resource.
*/
diff --git a/src/webex/pages/refund.html b/src/webex/pages/refund.html
index 203fda21b..c671bb193 100644
--- a/src/webex/pages/refund.html
+++ b/src/webex/pages/refund.html
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Refund Status</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Refund Status</title>
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
-
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/refund-bundle.js"></script>
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/refund-bundle.js"></script>
+ </head>
<body>
<section id="main">
diff --git a/src/webex/pages/refund.tsx b/src/webex/pages/refund.tsx
index 2a3f65d21..389d5e569 100644
--- a/src/webex/pages/refund.tsx
+++ b/src/webex/pages/refund.tsx
@@ -65,11 +65,10 @@ function RefundStatusView(props: { talerRefundUri: string }) {
<h2>Refund Status</h2>
<p>
The product <em>{purchaseDetails.contractTerms.summary!}</em> has
- received a total refund of <AmountView amount={purchaseDetails.totalRefundAmount} />.
- </p>
- <p>
- Note that additional fees from the exchange may apply.
+ received a total refund of{" "}
+ <AmountView amount={purchaseDetails.totalRefundAmount} />.
</p>
+ <p>Note that additional fees from the exchange may apply.</p>
</>
);
}
diff --git a/src/webex/pages/reset-required.html b/src/webex/pages/reset-required.html
index 72b176b4d..124d5f46f 100644
--- a/src/webex/pages/reset-required.html
+++ b/src/webex/pages/reset-required.html
@@ -1,30 +1,27 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Select Taler Provider</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Select Taler Provider</title>
+ <link rel="icon" href="/img/icon.png" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
- <link rel="icon" href="/img/icon.png">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/reset-required-bundle.js"></script>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/reset-required-bundle.js"></script>
-
- <style>
- body {
- font-size: 100%;
- overflow-y: scroll;
- }
- </style>
-
-</head>
-
-<body>
- <section id="main">
- <div id="container"></div>
- </section>
-</body>
+ <style>
+ body {
+ font-size: 100%;
+ overflow-y: scroll;
+ }
+ </style>
+ </head>
+ <body>
+ <section id="main">
+ <div id="container"></div>
+ </section>
+ </body>
</html>
diff --git a/src/webex/pages/reset-required.tsx b/src/webex/pages/reset-required.tsx
index 6631705af..81f21f459 100644
--- a/src/webex/pages/reset-required.tsx
+++ b/src/webex/pages/reset-required.tsx
@@ -14,7 +14,6 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-
/**
* Page to inform the user when a database reset is required.
*
@@ -38,16 +37,15 @@ class State {
resetRequired: boolean;
}
-
class ResetNotification extends React.Component<any, State> {
constructor(props: any) {
super(props);
- this.state = {checked: false, resetRequired: true};
+ this.state = { checked: false, resetRequired: true };
setInterval(() => this.update(), 500);
}
async update() {
const res = await wxApi.checkUpgrade();
- this.setState({resetRequired: res.dbResetRequired});
+ this.setState({ resetRequired: res.dbResetRequired });
}
render() {
if (this.state.resetRequired) {
@@ -55,32 +53,42 @@ class ResetNotification extends React.Component<any, State> {
<div>
<h1>Manual Reset Reqired</h1>
<p>
- The wallet's database in your browser is incompatible with the {" "}
- currently installed wallet. Please reset manually.
+ The wallet's database in your browser is incompatible with the{" "}
+ currently installed wallet. Please reset manually.
</p>
- <p>Once the database format has stabilized, we will provide automatic upgrades.</p>
- <input id="check"
- type="checkbox"
- checked={this.state.checked}
- onChange={(e) => this.setState({checked: e.target.checked})} />{" "}
+ <p>
+ Once the database format has stabilized, we will provide automatic
+ upgrades.
+ </p>
+ <input
+ id="check"
+ type="checkbox"
+ checked={this.state.checked}
+ onChange={(e) => this.setState({ checked: e.target.checked })}
+ />{" "}
<label htmlFor="check">
I understand that I will lose all my data
</label>
<br />
- <button className="pure-button" disabled={!this.state.checked} onClick={() => wxApi.resetDb()}>Reset</button>
+ <button
+ className="pure-button"
+ disabled={!this.state.checked}
+ onClick={() => wxApi.resetDb()}
+ >
+ Reset
+ </button>
</div>
);
}
return (
<div>
- <h1>Everything is fine!</h1>
- A reset is not required anymore, you can close this page.
+ <h1>Everything is fine!</h1>A reset is not required anymore, you can
+ close this page.
</div>
);
}
}
-
document.addEventListener("DOMContentLoaded", () => {
- ReactDOM.render(<ResetNotification />, document.getElementById( "container")!);
+ ReactDOM.render(<ResetNotification />, document.getElementById("container")!);
});
diff --git a/src/webex/pages/return-coins.html b/src/webex/pages/return-coins.html
index c0ab218d2..54106f3e6 100644
--- a/src/webex/pages/return-coins.html
+++ b/src/webex/pages/return-coins.html
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Return Coins to Bank Account</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Return Coins to Bank Account</title>
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <link rel="icon" href="/img/icon.png" />
- <link rel="icon" href="/img/icon.png">
-
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/return-coins-bundle.js"></script>
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/return-coins-bundle.js"></script>
+ </head>
<body>
<div id="container"></div>
diff --git a/src/webex/pages/return-coins.tsx b/src/webex/pages/return-coins.tsx
index 7c835da0a..fd9238ee2 100644
--- a/src/webex/pages/return-coins.tsx
+++ b/src/webex/pages/return-coins.tsx
@@ -20,7 +20,6 @@
* @author Florian Dold
*/
-
/**
* Imports.
*/
@@ -28,20 +27,13 @@
import { AmountJson } from "../../util/amounts";
import * as Amounts from "../../util/amounts";
-import {
- SenderWireInfos,
- WalletBalance,
-} from "../../types/walletTypes";
+import { SenderWireInfos, WalletBalance } from "../../types/walletTypes";
import * as i18n from "../i18n";
import * as wire from "../../util/wire";
-import {
- getBalance,
- getSenderWireInfos,
- returnCoins,
-} from "../wxApi";
+import { getBalance, getSenderWireInfos, returnCoins } from "../wxApi";
import { renderAmount } from "../renderHtml";
@@ -60,17 +52,27 @@ interface ReturnSelectionItemState {
currency: string;
}
-class ReturnSelectionItem extends React.Component<ReturnSelectionItemProps, ReturnSelectionItemState> {
+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;
- });
+ 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.toString(props.balance.byExchange[props.exchangeUrl].available),
+ selectedValue: Amounts.toString(
+ props.balance.byExchange[props.exchangeUrl].available,
+ ),
selectedWire: "",
supportedWires,
};
@@ -83,28 +85,46 @@ class ReturnSelectionItem extends React.Component<ReturnSelectionItemProps, Retu
<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>
+ 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}
+ {this.state.selectedWire ? (
+ <button
+ className="pure-button button-success"
+ onClick={() => this.select()}
+ >
+ {i18n.str`Wire to bank account`}
+ </button>
+ ) : null}
</div>
);
}
@@ -133,16 +153,23 @@ interface ReturnSelectionListProps {
selectDetail(d: SelectedDetail): void;
}
-class ReturnSelectionList extends React.Component<ReturnSelectionListProps, {}> {
+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 (
+ <p className="errorbox">Currently no funds available to transfer.</p>
+ );
}
return (
<div>
- {exchanges.map((e) => <ReturnSelectionItem key={e} exchangeUrl={e} {...this.props} />)}
+ {exchanges.map((e) => (
+ <ReturnSelectionItem key={e} exchangeUrl={e} {...this.props} />
+ ))}
</div>
);
}
@@ -154,7 +181,6 @@ interface SelectedDetail {
exchange: string;
}
-
interface ReturnConfirmationProps {
detail: SelectedDetail;
cancel(): void;
@@ -165,11 +191,19 @@ class ReturnConfirmation extends React.Component<ReturnConfirmationProps, {}> {
render() {
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>
+ 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()}>
+ <button
+ className="pure-button button-success"
+ onClick={() => this.props.confirm()}
+ >
{i18n.str`Confirm`}
</button>
<button className="pure-button" onClick={() => this.props.cancel()}>
@@ -213,7 +247,7 @@ class ReturnCoins extends React.Component<{}, ReturnCoinsState> {
}
selectDetail(d: SelectedDetail) {
- this.setState({selectedReturn: d});
+ this.setState({ selectedReturn: d });
}
async confirm() {
@@ -223,11 +257,17 @@ class ReturnCoins extends React.Component<{}, ReturnCoinsState> {
}
await returnCoins(selectedReturn);
await this.update();
- this.setState({selectedReturn: undefined, lastConfirmedDetail: selectedReturn});
+ this.setState({
+ selectedReturn: undefined,
+ lastConfirmedDetail: selectedReturn,
+ });
}
async cancel() {
- this.setState({selectedReturn: undefined, lastConfirmedDetail: undefined});
+ this.setState({
+ selectedReturn: undefined,
+ lastConfirmedDetail: undefined,
+ });
}
render() {
@@ -248,25 +288,28 @@ class ReturnCoins extends React.Component<{}, ReturnCoinsState> {
);
}
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'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>
+ <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'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>
);
}
}
-
function main() {
ReactDOM.render(<ReturnCoins />, document.getElementById("container")!);
}
diff --git a/src/webex/pages/show-db.html b/src/webex/pages/show-db.html
index 714089553..ae77e3fb0 100644
--- a/src/webex/pages/show-db.html
+++ b/src/webex/pages/show-db.html
@@ -1,16 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
<html>
<head>
- <meta charset="UTF-8">
+ <meta charset="UTF-8" />
<title>Taler Wallet: Reserve Created</title>
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
- <link rel="icon" href="/img/icon.png">
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+ <link rel="icon" href="/img/icon.png" />
<script src="/dist/page-common-bundle.js"></script>
<script src="/dist/show-db-bundle.js"></script>
</head>
<body>
<h1>DB Dump</h1>
- <input type="file" id="fileInput" style="display:none">
+ <input type="file" id="fileInput" style="display: none;" />
<button id="import">Import Dump</button>
<button id="download">Download Dump</button>
<pre id="dump"></pre>
diff --git a/src/webex/pages/show-db.ts b/src/webex/pages/show-db.ts
index d95951385..16ea80d2d 100644
--- a/src/webex/pages/show-db.ts
+++ b/src/webex/pages/show-db.ts
@@ -14,15 +14,19 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-
/**
* Wallet database dump for debugging.
*
* @author Florian Dold
*/
-function replacer(match: string, pIndent: string, pKey: string, pVal: string,
- pEnd: string) {
+function replacer(
+ match: string,
+ pIndent: string,
+ pKey: string,
+ pVal: string,
+ pEnd: string,
+) {
const key = "<span class=json-key>";
const val = "<span class=json-value>";
const str = "<span class=json-string>";
@@ -36,18 +40,18 @@ function replacer(match: string, pIndent: string, pKey: string, pVal: string,
return r + (pEnd || "");
}
-
function prettyPrint(obj: any) {
- const jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+ const jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/gm;
return JSON.stringify(obj, null as any, 3)
- .replace(/&/g, "&amp;").replace(/\\"/g, "&quot;")
- .replace(/</g, "&lt;").replace(/>/g, "&gt;")
- .replace(jsonLine, replacer);
+ .replace(/&/g, "&amp;")
+ .replace(/\\"/g, "&quot;")
+ .replace(/</g, "&lt;")
+ .replace(/>/g, "&gt;")
+ .replace(jsonLine, replacer);
}
-
document.addEventListener("DOMContentLoaded", () => {
- chrome.runtime.sendMessage({type: "dump-db"}, (resp) => {
+ chrome.runtime.sendMessage({ type: "dump-db" }, (resp) => {
const el = document.getElementById("dump");
if (!el) {
throw Error();
@@ -57,16 +61,18 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("download")!.addEventListener("click", (evt) => {
console.log("creating download");
const element = document.createElement("a");
- element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(JSON.stringify(resp)));
+ element.setAttribute(
+ "href",
+ "data:text/plain;charset=utf-8," +
+ encodeURIComponent(JSON.stringify(resp)),
+ );
element.setAttribute("download", "wallet-dump.txt");
element.style.display = "none";
document.body.appendChild(element);
element.click();
});
-
});
-
const fileInput = document.getElementById("fileInput")! as HTMLInputElement;
fileInput.onchange = (evt) => {
if (!fileInput.files || fileInput.files.length !== 1) {
@@ -79,9 +85,12 @@ document.addEventListener("DOMContentLoaded", () => {
console.log("got file");
const dump = JSON.parse(e.target.result);
console.log("parsed contents", dump);
- chrome.runtime.sendMessage({ type: "import-db", detail: { dump } }, (resp) => {
- alert("loaded");
- });
+ chrome.runtime.sendMessage(
+ { type: "import-db", detail: { dump } },
+ (resp) => {
+ alert("loaded");
+ },
+ );
};
console.log("reading file", file);
fr.readAsText(file);
diff --git a/src/webex/pages/tip.html b/src/webex/pages/tip.html
index 72d91a123..0625640ed 100644
--- a/src/webex/pages/tip.html
+++ b/src/webex/pages/tip.html
@@ -1,24 +1,21 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Received Tip</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Received Tip</title>
+ <link rel="icon" href="/img/icon.png" />
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="icon" href="/img/icon.png">
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
-
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/tip-bundle.js"></script>
-
-</head>
-
-<body>
- <section id="main">
- <h1>GNU Taler Wallet</h1>
- <div id="container"></div>
- </section>
-</body>
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/tip-bundle.js"></script>
+ </head>
+ <body>
+ <section id="main">
+ <h1>GNU Taler Wallet</h1>
+ <div id="container"></div>
+ </section>
+ </body>
</html>
diff --git a/src/webex/pages/tip.tsx b/src/webex/pages/tip.tsx
index c44b343a4..35e033c0d 100644
--- a/src/webex/pages/tip.tsx
+++ b/src/webex/pages/tip.tsx
@@ -28,13 +28,16 @@ import * as i18n from "../i18n";
import { acceptTip, getReserveCreationInfo, getTipStatus } from "../wxApi";
-import { WithdrawDetailView, renderAmount, ProgressButton } from "../renderHtml";
+import {
+ WithdrawDetailView,
+ renderAmount,
+ ProgressButton,
+} from "../renderHtml";
import * as Amounts from "../../util/amounts";
import { useState, useEffect } from "react";
import { TipStatus } from "../../types/walletTypes";
-
function TipDisplay(props: { talerTipUri: string }) {
const [tipStatus, setTipStatus] = useState<TipStatus | undefined>(undefined);
const [discarded, setDiscarded] = useState(false);
@@ -88,8 +91,7 @@ function TipDisplay(props: { talerTipUri: string }) {
<form className="pure-form">
<ProgressButton loading={loading} onClick={() => accept()}>
Accept Tip
- </ProgressButton>
- {" "}
+ </ProgressButton>{" "}
<button className="pure-button" type="button" onClick={() => discard()}>
Discard tip
</button>
diff --git a/src/webex/pages/welcome.html b/src/webex/pages/welcome.html
index 9a96d04a7..8f17891e2 100644
--- a/src/webex/pages/welcome.html
+++ b/src/webex/pages/welcome.html
@@ -1,24 +1,21 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Withdraw</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Withdraw</title>
+ <link rel="icon" href="/img/icon.png" />
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="icon" href="/img/icon.png">
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
-
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/welcome-bundle.js"></script>
-
-</head>
-
-<body>
- <section id="main">
- <h1>GNU Taler Wallet Installed!</h1>
- <div id="container">Loading...</div>
- </section>
-</body>
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/welcome-bundle.js"></script>
+ </head>
+ <body>
+ <section id="main">
+ <h1>GNU Taler Wallet Installed!</h1>
+ <div id="container">Loading...</div>
+ </section>
+ </body>
</html>
diff --git a/src/webex/pages/welcome.tsx b/src/webex/pages/welcome.tsx
index e8f7028ed..83f4f01d5 100644
--- a/src/webex/pages/welcome.tsx
+++ b/src/webex/pages/welcome.tsx
@@ -68,7 +68,7 @@ function Diagnostics() {
>
<p>Problems detected:</p>
<ol>
- {diagnostics.errors.map(errMsg => (
+ {diagnostics.errors.map((errMsg) => (
<li>{errMsg}</li>
))}
</ol>
diff --git a/src/webex/pages/withdraw.html b/src/webex/pages/withdraw.html
index e5c527275..861b219f5 100644
--- a/src/webex/pages/withdraw.html
+++ b/src/webex/pages/withdraw.html
@@ -1,24 +1,21 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Taler Wallet: Withdraw</title>
-<head>
- <meta charset="UTF-8">
- <title>Taler Wallet: Withdraw</title>
+ <link rel="icon" href="/img/icon.png" />
+ <link rel="stylesheet" type="text/css" href="../style/pure.css" />
+ <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
- <link rel="icon" href="/img/icon.png">
- <link rel="stylesheet" type="text/css" href="../style/pure.css">
- <link rel="stylesheet" type="text/css" href="../style/wallet.css">
+ <script src="/dist/page-common-bundle.js"></script>
+ <script src="/dist/withdraw-bundle.js"></script>
+ </head>
- <script src="/dist/page-common-bundle.js"></script>
- <script src="/dist/withdraw-bundle.js"></script>
-
-</head>
-
-<body>
- <section id="main">
- <h1>GNU Taler Wallet</h1>
+ <body>
+ <section id="main">
+ <h1>GNU Taler Wallet</h1>
<div class="fade" id="exchange-selection"></div>
- </section>
-</body>
-
+ </section>
+ </body>
</html>
diff --git a/src/webex/pages/withdraw.tsx b/src/webex/pages/withdraw.tsx
index c123e2a6f..7a2665314 100644
--- a/src/webex/pages/withdraw.tsx
+++ b/src/webex/pages/withdraw.tsx
@@ -127,7 +127,7 @@ function NewExchangeSelection(props: { talerWithdrawUri: string }) {
<p>
<input
type="text"
- onChange={e => setCustomUrl(e.target.value)}
+ onChange={(e) => setCustomUrl(e.target.value)}
value={customUrl}
/>
</p>