diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/confirm-contract.html | 3 | ||||
| -rw-r--r-- | pages/confirm-contract.tsx | 187 |
2 files changed, 122 insertions, 68 deletions
diff --git a/pages/confirm-contract.html b/pages/confirm-contract.html index e7200910a..6e773f1b6 100644 --- a/pages/confirm-contract.html +++ b/pages/confirm-contract.html @@ -11,9 +11,10 @@ <script src="../lib/vendor/URI.js"></script> <script src="../lib/vendor/mithril.js"></script> + <script src="../lib/vendor/preact.js"></script> <script src="../lib/vendor/lodash.core.min.js"></script> <script src="../lib/vendor/system-csp-production.src.js"></script> - <script src="../lib/vendor/jed.js"></script> + <!-- <script src="../lib/vendor/jed.js"></script> --> <script src="../lib/i18n.js"></script> <script src="../i18n/strings.js"></script> <script src="../lib/module-trampoline.js"></script> diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx index f162dca85..8e553b05b 100644 --- a/pages/confirm-contract.tsx +++ b/pages/confirm-contract.tsx @@ -22,113 +22,166 @@ */ -/// <reference path="../lib/decl/handlebars/handlebars.d.ts" /> -import MithrilComponent = _mithril.MithrilComponent; +/// <reference path="../lib/decl/preact.d.ts" /> import {substituteFulfillmentUrl} from "../lib/wallet/helpers"; import m from "mithril"; import {Contract, AmountJson} from "../lib/wallet/types"; import {renderContract, prettyAmount} from "../lib/wallet/renderHtml"; "use strict"; -const Details = { - controller() { - return {collapsed: m.prop(true)}; - }, - view(ctrl: any, contract: Contract) { - if (ctrl.collapsed()) { - return m("div", [ - m("button.linky", { - onclick: () => { - ctrl.collapsed(false); - } - }, "show more details") - ]); + +interface DetailState { + collapsed: boolean; +} + +interface DetailProps { + contract: Contract; +} + +let h = preact.h; + + +class Details extends preact.Component<DetailProps, DetailState> { + constructor() { + super(); + this.state = { + collapsed: true + }; + } + + render(props: DetailProps, state: DetailState) { + if (state.collapsed) { + return h("div", {}, + h("button", { + className: "linky", + onClick: () => { + this.setState({collapsed: false}); + } + }, "show more details")); } else { - return m("div", [ - m("button.linky", { - onclick: () => { - ctrl.collapsed(true); - } - }, "show less details"), - m("div", [ - "Accepted exchanges:", - m("ul", - contract.exchanges.map(e => m("li", `${e.url}: ${e.master_pub}`))) - ]) - ]); + return h("div", {}, + h("button", { + className: "linky", + onClick: () => { + this.setState({collapsed: true}); + } + }, "show less details"), + h("div", {}, + "Accepted exchanges:", + h("ul", {}, + ...props.contract.exchanges.map( + e => h("li", {}, `${e.url}: ${e.master_pub}`))))); } } -}; +} -export function main() { - let url = URI(document.location.href); - let query: any = URI.parseQuery(url.query()); - let offer = JSON.parse(query.offer); - console.dir(offer); - let contract = offer.contract; - let error: string|null = null; - let payDisabled = true; - - var Contract = { - view(ctrl: any) { - return [ - renderContract(contract), - m("button.accept", - {onclick: doPayment, disabled: payDisabled}, - i18n`Confirm Payment`), - (error ? m("p.errorbox", error) : []), - m(Details, contract) - ]; +interface ContractPromptProps { + offer: any; +} + +interface ContractPromptState { + error: string|null; + payDisabled: boolean; +} + +class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromptState> { + constructor() { + super(); + this.state = { + error: null, + payDisabled: true, } - }; + } - m.mount(document.getElementById("contract")!, Contract); + componentWillMount() { + this.checkPayment(); + } + + componentWillUnmount() { + // FIXME: abort running ops + } - function checkPayment() { - chrome.runtime.sendMessage({type: 'check-pay', detail: {offer}}, (resp) => { + checkPayment() { + let msg = { + type: 'check-pay', + detail: { + offer: this.props.offer + } + }; + chrome.runtime.sendMessage(msg, (resp) => { if (resp.error) { console.log("check-pay error", JSON.stringify(resp)); switch (resp.error) { case "coins-insufficient": - error = i18n`You have insufficient funds of the requested currency in your wallet.`; + this.state.error = i18n`You have insufficient funds of the requested currency in your wallet.`; break; default: - error = `Error: ${resp.error}`; + this.state.error = `Error: ${resp.error}`; break; } - payDisabled = true; + this.state.payDisabled = true; } else { - payDisabled = false; - error = null; + this.state.payDisabled = false; + this.state.error = null; } - m.redraw(); - window.setTimeout(checkPayment, 300); + this.forceUpdate(); + window.setTimeout(() => this.checkPayment(), 300); }); } - checkPayment(); - - - function doPayment() { - let d = {offer}; + doPayment() { + let d = {offer: this.props.offer}; chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => { if (resp.error) { console.log("confirm-pay error", JSON.stringify(resp)); switch (resp.error) { case "coins-insufficient": - error = "You do not have enough coins of the requested currency."; + this.state.error = "You do not have enough coins of the" + + " requested currency."; break; default: - error = `Error: ${resp.error}`; + this.state.error = `Error: ${resp.error}`; break; } - m.redraw(); + preact.rerender(); return; } let c = d.offer.contract; console.log("contract", c); document.location.href = substituteFulfillmentUrl(c.fulfillment_url, - offer); + this.props.offer); }); } + + + render(props: ContractPromptProps, state: ContractPromptState) { + let c = props.offer.contract; + return h("div", {}, + renderContract(c), + h("button", + { + onClick: () => this.doPayment(), + disabled: state.payDisabled, + "className": "accept" + }, + i18n`Confirm Payment`), + (state.error ? h("p", + {className: "errorbox"}, + state.error) : h("p", "")), + h(Details, {contract: c}) + ); + } +} + + +export function main() { + let url = URI(document.location.href); + let query: any = URI.parseQuery(url.query()); + let offer = JSON.parse(query.offer); + console.dir(offer); + let contract = offer.contract; + + + let prompt = h(ContractPrompt, {offer}); + preact.render(prompt, document.getElementById("contract")!); } |