aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/confirm-contract.html3
-rw-r--r--pages/confirm-contract.tsx29
-rw-r--r--pages/confirm-create-reserve.html3
-rw-r--r--pages/confirm-create-reserve.tsx11
-rw-r--r--pages/tree.html5
-rw-r--r--pages/tree.tsx89
6 files changed, 102 insertions, 38 deletions
diff --git a/pages/confirm-contract.html b/pages/confirm-contract.html
index 809b2177f..5c6c9a446 100644
--- a/pages/confirm-contract.html
+++ b/pages/confirm-contract.html
@@ -10,7 +10,8 @@
<link rel="icon" href="../img/icon.png">
<script src="../lib/vendor/URI.js"></script>
- <script src="../lib/vendor/preact.js"></script>
+ <script src="../lib/vendor/react.js"></script>
+ <script src="../lib/vendor/react-dom.js"></script>
<script src="../lib/vendor/system-csp-production.src.js"></script>
<!-- <script src="../lib/vendor/jed.js"></script> -->
<script src="../lib/i18n.js"></script>
diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx
index 91f4c2e82..a356b25a5 100644
--- a/pages/confirm-contract.tsx
+++ b/pages/confirm-contract.tsx
@@ -22,7 +22,6 @@
*/
-/// <reference path="../lib/decl/preact.d.ts" />
import {substituteFulfillmentUrl} from "../lib/wallet/helpers";
import {Contract, AmountJson, IExchangeInfo} from "../lib/wallet/types";
import {renderContract, prettyAmount} from "../lib/wallet/renderHtml";
@@ -41,7 +40,7 @@ interface DetailProps {
}
-class Details extends preact.Component<DetailProps, DetailState> {
+class Details extends React.Component<DetailProps, DetailState> {
constructor(props: DetailProps) {
super(props);
this.setState({
@@ -63,10 +62,10 @@ class Details extends preact.Component<DetailProps, DetailState> {
this.setState({exchanges} as any);
}
- render(props: DetailProps, state: DetailState) {
- console.log("details collapsed (state)", state.collapsed);
- console.log("details collapsed (prop)", props.collapsed);
- if (state.collapsed) {
+ render() {
+ console.log("details collapsed (state)", this.state.collapsed);
+ console.log("details collapsed (prop)", this.props.collapsed);
+ if (this.state.collapsed) {
return (
<div>
<button className="linky"
@@ -85,12 +84,12 @@ class Details extends preact.Component<DetailProps, DetailState> {
<div>
Accepted exchanges:
<ul>
- {props.contract.exchanges.map(
+ {this.props.contract.exchanges.map(
e => <li>{`${e.url}: ${e.master_pub}`}</li>)}
</ul>
Exchanges in the wallet:
<ul>
- {(state.exchanges || []).map(
+ {(this.state.exchanges || []).map(
(e: IExchangeInfo) =>
<li>{`${e.baseUrl}: ${e.masterPublicKey}`}</li>)}
</ul>
@@ -109,7 +108,7 @@ interface ContractPromptState {
payDisabled: boolean;
}
-class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromptState> {
+class ContractPrompt extends React.Component<ContractPromptProps, ContractPromptState> {
constructor() {
super();
this.state = {
@@ -179,18 +178,18 @@ class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromp
}
- render(props: ContractPromptProps, state: ContractPromptState) {
- let c = props.offer.contract;
+ render() {
+ let c = this.props.offer.contract;
return (
<div>
{renderContract(c)}
<button onClick={() => this.doPayment()}
- disabled={state.payDisabled}
+ disabled={this.state.payDisabled}
className="accept">
Confirm payment
</button>
- {(state.error ? <p className="errorbox">{state.error}</p> : <p />)}
- <Details contract={c} collapsed={!state.error}/>
+ {(this.state.error ? <p className="errorbox">{this.state.error}</p> : <p />)}
+ <Details contract={c} collapsed={!this.state.error}/>
</div>
);
}
@@ -204,6 +203,6 @@ export function main() {
console.dir(offer);
let contract = offer.contract;
- preact.render(<ContractPrompt offer={offer}/>, document.getElementById(
+ ReactDOM.render(<ContractPrompt offer={offer}/>, document.getElementById(
"contract")!);
}
diff --git a/pages/confirm-create-reserve.html b/pages/confirm-create-reserve.html
index 5c42a68f6..c31a4aa8a 100644
--- a/pages/confirm-create-reserve.html
+++ b/pages/confirm-create-reserve.html
@@ -7,7 +7,8 @@
<link rel="icon" href="../img/icon.png">
<script src="../lib/vendor/URI.js"></script>
- <script src="../lib/vendor/preact.js"></script>
+ <script src="../lib/vendor/react.js"></script>
+ <script src="../lib/vendor/react-dom.js"></script>
<!-- i18n -->
<script src="../lib/vendor/jed.js"></script>
diff --git a/pages/confirm-create-reserve.tsx b/pages/confirm-create-reserve.tsx
index 9bff0e42a..833bfed27 100644
--- a/pages/confirm-create-reserve.tsx
+++ b/pages/confirm-create-reserve.tsx
@@ -31,7 +31,6 @@ import {ImplicitStateComponent, StateHolder} from "../lib/components";
"use strict";
-let h = preact.h;
function delay<T>(delayMs: number, value: T): Promise<T> {
return new Promise<T>((resolve, reject) => {
@@ -227,7 +226,7 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
if (this.statusString()) {
return (
<p>
- <strong style="color: red;">A problem occured, see below.</strong>
+ <strong style={{color: "red"}}>A problem occured, see below.</strong>
</p>
);
}
@@ -238,12 +237,12 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
);
}
- render(props: ExchangeSelectionProps): JSX.Element {
+ render(): JSX.Element {
return (
<div>
<p>
{"You are about to withdraw "}
- <strong>{amountToPretty(props.amount)}</strong>
+ <strong>{amountToPretty(this.props.amount)}</strong>
{" from your bank account into your wallet."}
</p>
{this.renderFeeStatus()}
@@ -359,7 +358,7 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
renderStatus(): any {
if (this.statusString()) {
- return <p><strong style="color: red;">{this.statusString()}</strong></p>;
+ return <p><strong style={{color: "red"}}>{this.statusString()}</strong></p>;
} else if (!this.reserveCreationInfo()) {
return <p>Checking URL, please wait ...</p>;
}
@@ -384,7 +383,7 @@ export async function main() {
amount
};
- preact.render(<ExchangeSelection {...args} />, document.getElementById(
+ ReactDOM.render(<ExchangeSelection {...args} />, document.getElementById(
"exchange-selection")!);
} catch (e) {
diff --git a/pages/tree.html b/pages/tree.html
index ee12a82e4..1075655f6 100644
--- a/pages/tree.html
+++ b/pages/tree.html
@@ -10,7 +10,8 @@
<link rel="icon" href="../img/icon.png">
<script src="../lib/vendor/URI.js"></script>
- <script src="../lib/vendor/preact.js"></script>
+ <script src="../lib/vendor/react.js"></script>
+ <script src="../lib/vendor/react-dom.js"></script>
<!-- i18n -->
<script src="../lib/vendor/jed.js"></script>
@@ -29,4 +30,4 @@
}
</style>
-</html> \ No newline at end of file
+</html>
diff --git a/pages/tree.tsx b/pages/tree.tsx
index e782877a5..c8a67dac2 100644
--- a/pages/tree.tsx
+++ b/pages/tree.tsx
@@ -20,7 +20,6 @@
* @author Florian Dold
*/
-/// <reference path="../lib/decl/preact.d.ts" />
import { IExchangeInfo } from "../lib/wallet/types";
import { ReserveRecord, Coin, PreCoin, Denomination } from "../lib/wallet/types";
@@ -30,12 +29,13 @@ import {
refresh
} from "../lib/wallet/wxApi";
import { prettyAmount, abbrev } from "../lib/wallet/renderHtml";
+import { getTalerStampDate } from "../lib/wallet/helpers";
interface ReserveViewProps {
reserve: ReserveRecord;
}
-class ReserveView extends preact.Component<ReserveViewProps, void> {
+class ReserveView extends React.Component<ReserveViewProps, void> {
render(): JSX.Element {
let r: ReserveRecord = this.props.reserve;
return (
@@ -78,7 +78,7 @@ class Toggle extends ImplicitStateComponent<ToggleProps> {
}
render() {
return (
- <div style="display:inline;">
+ <div style={{display: "inline"}}>
{this.renderButton()}
{this.props.expanded() ? this.props.children : []}
</div>);
@@ -99,7 +99,7 @@ class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> {
render(): JSX.Element {
if (!this.refreshRequested()) {
return (
- <div style="display:inline;">
+ <div style={{display: "inline"}}>
<button onClick={() => this.refreshRequested(true)}>refresh</button>
</div>
);
@@ -114,7 +114,7 @@ class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> {
}
}
-class CoinView extends preact.Component<CoinViewProps, void> {
+class CoinView extends React.Component<CoinViewProps, void> {
render() {
let c = this.props.coin;
return (
@@ -137,7 +137,7 @@ interface PreCoinViewProps {
precoin: PreCoin;
}
-class PreCoinView extends preact.Component<PreCoinViewProps, void> {
+class PreCoinView extends React.Component<PreCoinViewProps, void> {
render() {
let c = this.props.precoin;
return (
@@ -160,14 +160,18 @@ class CoinList extends ImplicitStateComponent<CoinListProps> {
constructor(props: CoinListProps) {
super(props);
- this.update();
+ this.update(props);
}
- async update() {
- let coins = await getCoins(this.props.exchangeBaseUrl);
+ async update(props: CoinListProps) {
+ let coins = await getCoins(props.exchangeBaseUrl);
this.coins(coins);
}
+ componentWillReceiveProps(newProps: CoinListProps) {
+ this.update(newProps);
+ }
+
render(): JSX.Element {
if (!this.coins()) {
return <div>...</div>;
@@ -223,6 +227,49 @@ interface DenominationListProps {
exchange: IExchangeInfo;
}
+interface ExpanderTextProps {
+ text: string;
+}
+
+class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> {
+ expanded = this.makeState<boolean>(false);
+ textArea: any = undefined;
+
+ componentDidUpdate() {
+ if (this.expanded() && this.textArea) {
+ this.textArea.focus();
+ this.textArea.scrollTop = 0;
+ }
+ }
+
+ render(): JSX.Element {
+ if (!this.expanded()) {
+ return (
+ <span onClick={() => { this.expanded(true); }}>
+ {(this.props.text.length <= 10)
+ ? this.props.text
+ : (
+ <span>
+ {this.props.text.substring(0,10)}
+ <span style={{textDecoration: "underline"}}>...</span>
+ </span>
+ )
+ }
+ </span>
+ );
+ }
+ return (
+ <textarea
+ readOnly
+ style={{display: "block"}}
+ onBlur={() => this.expanded(false)}
+ ref={(e) => this.textArea = e}>
+ {this.props.text}
+ </textarea>
+ );
+ }
+}
+
class DenominationList extends ImplicitStateComponent<DenominationListProps> {
expanded = this.makeState<boolean>(false);
@@ -235,6 +282,11 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> {
<li>Refresh fee: {prettyAmount(d.fee_refresh)}</li>
<li>Deposit fee: {prettyAmount(d.fee_deposit)}</li>
<li>Refund fee: {prettyAmount(d.fee_refund)}</li>
+ <li>Start: {getTalerStampDate(d.stamp_start)!.toString()}</li>
+ <li>Withdraw expiration: {getTalerStampDate(d.stamp_expire_withdraw)!.toString()}</li>
+ <li>Legal expiration: {getTalerStampDate(d.stamp_expire_legal)!.toString()}</li>
+ <li>Deposit expiration: {getTalerStampDate(d.stamp_expire_deposit)!.toString()}</li>
+ <li>Denom pub: <ExpanderText text={d.denom_pub} /></li>
</ul>
</div>
);
@@ -287,12 +339,15 @@ interface ExchangeProps {
exchange: IExchangeInfo;
}
-class ExchangeView extends preact.Component<ExchangeProps, void> {
+class ExchangeView extends React.Component<ExchangeProps, void> {
render(): JSX.Element {
let e = this.props.exchange;
return (
<div className="tree-item">
- Url: {this.props.exchange.baseUrl}
+ <ul>
+ <li>Exchange Base Url: {this.props.exchange.baseUrl}</li>
+ <li>Master public key: <ExpanderText text={this.props.exchange.masterPublicKey} /></li>
+ </ul>
<DenominationList exchange={e} />
<ReserveList exchangeBaseUrl={this.props.exchange.baseUrl} />
<CoinList exchangeBaseUrl={this.props.exchange.baseUrl} />
@@ -306,9 +361,17 @@ interface ExchangesListState {
exchanges: IExchangeInfo[];
}
-class ExchangesList extends preact.Component<any, ExchangesListState> {
+class ExchangesList extends React.Component<any, ExchangesListState> {
constructor() {
super();
+ let port = chrome.runtime.connect();
+ port.onMessage.addListener((msg: any) => {
+ if (msg.notify) {
+ console.log("got notified");
+ this.update();
+ }
+ });
+
this.update();
}
@@ -332,5 +395,5 @@ class ExchangesList extends preact.Component<any, ExchangesListState> {
}
export function main() {
- preact.render(<ExchangesList />, document.body);
+ ReactDOM.render(<ExchangesList />, document.body);
}
generated by cgit v1.2.3 (git 2.26.2) at 2024-07-16 16:41:48 +0000