From 1d85662946c393ea6985c178842be40d38fc687d Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 28 Mar 2022 14:03:59 -0300 Subject: storybook like page for dev, plus some style fixes --- .../src/wallet/DeveloperPage.tsx | 384 +++++++++++++++++++++ 1 file changed, 384 insertions(+) create mode 100644 packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx (limited to 'packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx') diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx new file mode 100644 index 000000000..f4d717df6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx @@ -0,0 +1,384 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ + +import { + Amounts, + CoinDumpJson, + ExchangeListItem, + NotificationType, +} from "@gnu-taler/taler-util"; +import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core"; +import { format } from "date-fns"; +import { Fragment, h, VNode } from "preact"; +import { useRef, useState } from "preact/hooks"; +import { Diagnostics } from "../components/Diagnostics"; +import { NotifyUpdateFadeOut } from "../components/styled"; +import { Time } from "../components/Time"; +import { useTranslationContext } from "../context/translation"; +import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import { useDiagnostics } from "../hooks/useDiagnostics"; +import * as wxApi from "../wxApi"; + +export function DeveloperPage(): VNode { + const [status, timedOut] = useDiagnostics(); + + const listenAllEvents = Array.from({ length: 1 }); + listenAllEvents.includes = () => true; // includes every event + + const response = useAsyncAsHook(async () => { + const op = await wxApi.getPendingOperations(); + const c = await wxApi.dumpCoins(); + const ex = await wxApi.listExchanges(); + return { + operations: op.pendingOperations, + coins: c.coins, + exchanges: ex.exchanges, + }; + }, listenAllEvents); + + const nonResponse = { operations: [], coins: [], exchanges: [] }; + const { operations, coins, exchanges } = + response === undefined + ? nonResponse + : response.hasError + ? nonResponse + : response.response; + + const balanceResponse = useAsyncAsHook(wxApi.getBalance); + + return ( + { + const db = await wxApi.exportDB(); + return JSON.stringify(db); + }} + /> + ); +} + +type CoinsInfo = CoinDumpJson["coins"]; +type CalculatedCoinfInfo = { + denom_value: number; + remain_value: number; + status: string; + from_refresh: boolean; + id: string; +}; + +type SplitedCoinInfo = { + spent: CalculatedCoinfInfo[]; + usable: CalculatedCoinfInfo[]; +}; + +export interface Props { + status: any; + timedOut: boolean; + operations: PendingTaskInfo[]; + coins: CoinsInfo; + exchanges: ExchangeListItem[]; + onDownloadDatabase: () => Promise; +} + +function hashObjectId(o: any): string { + return JSON.stringify(o); +} + +export function View({ + status, + timedOut, + operations, + coins, + onDownloadDatabase, +}: Props): VNode { + const { i18n } = useTranslationContext(); + const [downloadedDatabase, setDownloadedDatabase] = useState< + { time: Date; content: string } | undefined + >(undefined); + async function onExportDatabase(): Promise { + const content = await onDownloadDatabase(); + setDownloadedDatabase({ + time: new Date(), + content, + }); + } + const fileRef = useRef(null); + async function onImportDatabase(str: string): Promise { + return wxApi.importDB(JSON.parse(str)); + } + const currencies: { [ex: string]: string } = {}; + const money_by_exchange = coins.reduce( + (prev, cur) => { + const denom = Amounts.parseOrThrow(cur.denom_value); + if (!prev[cur.exchange_base_url]) { + prev[cur.exchange_base_url] = []; + currencies[cur.exchange_base_url] = denom.currency; + } + prev[cur.exchange_base_url].push({ + denom_value: parseFloat(Amounts.stringifyValue(denom)), + remain_value: parseFloat( + Amounts.stringifyValue(Amounts.parseOrThrow(cur.remaining_value)), + ), + status: cur.coin_suspended ? "suspended" : "ok", + from_refresh: cur.refresh_parent_coin_pub !== undefined, + id: cur.coin_pub, + }); + return prev; + }, + {} as { + [exchange_name: string]: CalculatedCoinfInfo[]; + }, + ); + + return ( +
+

+ Debug tools: +

+ +
+ + { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) { + return Promise.reject(); + } + const buf = await f[0].arrayBuffer(); + const str = new Uint8Array(buf).reduce( + (data, byte) => data + String.fromCharCode(byte), + "", + ); + return onImportDatabase(str); + }} + /> +
+ + {downloadedDatabase && ( +
+ + Database exported at + +
+ )} +
+

+ Coins: +

+ {Object.keys(money_by_exchange).map((ex) => { + const allcoins = money_by_exchange[ex]; + allcoins.sort((a, b) => { + return b.denom_value - a.denom_value; + }); + + const coins = allcoins.reduce( + (prev, cur) => { + if (cur.remain_value > 0) prev.usable.push(cur); + if (cur.remain_value === 0) prev.spent.push(cur); + return prev; + }, + { + spent: [], + usable: [], + } as SplitedCoinInfo, + ); + + return ; + })} +
+ + {operations && operations.length > 0 && ( + +

+ Pending operations +

+
+ {operations.reverse().map((o) => { + return ( + +
+ {o.type}{" "} +
+
+ 
{JSON.stringify(o, undefined, 2)}
+
+ + ); + })} +
+ + )} +
+ ); +} + +function ShowAllCoins({ + ex, + coins, + currencies, +}: { + ex: string; + coins: SplitedCoinInfo; + currencies: { [ex: string]: string }; +}) { + const { i18n } = useTranslationContext(); + const [collapsedSpent, setCollapsedSpent] = useState(true); + const [collapsedUnspent, setCollapsedUnspent] = useState(false); + const total = coins.usable.reduce((prev, cur) => prev + cur.denom_value, 0); + return ( + +

+ {ex}: {total} {currencies[ex]} +

+

+ + usable coins + +

+ {collapsedUnspent ? ( +
setCollapsedUnspent(false)}>click to show
+ ) : ( + setCollapsedUnspent(true)}> + + + + + + + + {coins.usable.map((c) => { + return ( + + + + + + + + ); + })} +
+ id + + denom + + value + + status + + from refresh? +
{c.id.substring(0, 5)}{c.denom_value}{c.remain_value}{c.status}{c.from_refresh ? "true" : "false"}
+ )} +

+ spent coins +

+ {collapsedSpent ? ( +
setCollapsedSpent(false)}> + click to show +
+ ) : ( + setCollapsedSpent(true)}> + + + + + + + + {coins.spent.map((c) => { + return ( + + + + + + + + ); + })} +
+ id + + denom + + value + + status + + from refresh? +
{c.id.substring(0, 5)}{c.denom_value}{c.remain_value}{c.status}{c.from_refresh ? "true" : "false"}
+ )} + + ); +} + +function toBase64(str: string): string { + return btoa( + encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) { + return String.fromCharCode(parseInt(p1, 16)); + }), + ); +} + +function runIntegrationTest() {} + +export async function confirmReset( + confirmTheResetMessage: string, +): Promise { + if (confirm(confirmTheResetMessage)) { + await wxApi.resetDb(); + window.close(); + } +} -- cgit v1.2.3