diff options
Diffstat (limited to 'src/webex/pages')
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, "&").replace(/\\"/g, """) - .replace(/</g, "<").replace(/>/g, ">") - .replace(jsonLine, replacer); + .replace(/&/g, "&") + .replace(/\\"/g, """) + .replace(/</g, "<") + .replace(/>/g, ">") + .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> |