+ Refund Status -

The product {applyResult.info.summary} has received a total diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx index 5767b5008..f05b72fe9 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.tsx +++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx @@ -29,6 +29,7 @@ import { import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { Loading } from "../components/Loading"; +import { Title } from "../components/styled"; import { useTranslationContext } from "../context/translation"; import * as wxApi from "../wxApi"; @@ -48,7 +49,7 @@ export function View({ const { i18n } = useTranslationContext(); return (

GNU Taler Wallet

+ GNU Taler Wallet

{prepareTipResult.accepted ? ( diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index bef33dce1..a5e52d258 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -39,6 +39,7 @@ import { ButtonSuccess, ButtonWarning, LinkSuccess, + SubTitle, WalletAction, } from "../components/styled"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; @@ -118,9 +119,9 @@ export function View({ return ( -

+ Digital cash withdrawal -

+ {withdrawError && ( onChange(r.newValue)); } - await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue)); return } diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx deleted file mode 100644 index 4dcfe2316..000000000 --- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 Taler Systems S.A. - - GNU 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. - - GNU 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 - GNU Taler; see the file COPYING. If not, see - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { PendingTaskType } from "@gnu-taler/taler-wallet-core"; -import { createExample } from "../test-utils"; -import { View as TestedComponent } from "./DeveloperPage"; - -export default { - title: "wallet/developer", - component: TestedComponent, - argTypes: { - setDeviceName: () => Promise.resolve(), - }, -}; - -export const AllOff = createExample(TestedComponent, { - onDownloadDatabase: async () => "this is the content of the database", - operations: [ - { - type: PendingTaskType.ExchangeUpdate, - exchangeBaseUrl: "http://exchange.url.", - givesLifeness: false, - lastError: undefined, - timestampDue: { - t_ms: 123123213, - }, - retryInfo: undefined, - }, - ], - coins: [], -}); diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx deleted file mode 100644 index d47b8ce7b..000000000 --- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx +++ /dev/null @@ -1,387 +0,0 @@ -/* - 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, - Balance, - CoinDumpJson, - ExchangeListItem, - NotificationType, - AbsoluteTime, - Translate, -} 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 - - - click here - - to download - -

- )} -
-

- 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 -

- {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(); - } -} diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx index 2af6526c2..50ea32d12 100644 --- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx +++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx @@ -22,7 +22,7 @@ import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; import { Fragment, h } from "preact"; import { platform } from "../platform/api"; -import { ButtonPrimary, ButtonSuccess } from "../components/styled"; +import { ButtonPrimary, ButtonSuccess, Title } from "../components/styled"; import { useTranslationContext } from "../context/translation"; export interface Props { @@ -39,9 +39,9 @@ export function TalerActionFound({ url, onDismiss }: Props) { return (

+ <i18n.Translate>Taler Action</i18n.Translate> - </h1> + {uriType === TalerUriType.TalerPay && (

diff --git a/packages/taler-wallet-webextension/src/popup/index.stories.tsx b/packages/taler-wallet-webextension/src/popup/index.stories.tsx index 341b06b41..6965e2dbc 100644 --- a/packages/taler-wallet-webextension/src/popup/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/index.stories.tsx @@ -19,9 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import * as a1 from "../wallet/AddNewActionView.stories"; import * as a2 from "./Balance.stories"; -import * as a3 from "./DeveloperPage.stories"; import * as a6 from "./TalerActionFound.stories"; -export default [a1, a2, a3, a6]; +export default [a2, a6]; diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx new file mode 100644 index 000000000..2f410f68c --- /dev/null +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -0,0 +1,322 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU 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. + + GNU 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 + GNU Taler; see the file COPYING. If not, see + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { setupI18n } from "@gnu-taler/taler-util"; +import { styled } from "@linaria/react"; +import { + ComponentChild, + ComponentProps, + Fragment, + FunctionComponent, + h, + render, + VNode, +} from "preact"; +import { useEffect, useErrorBoundary, useState } from "preact/hooks"; +import { LogoHeader } from "./components/LogoHeader"; +import { PopupBox, WalletBox } from "./components/styled"; +import * as mui from "./mui/index.stories"; +import { PopupNavBar, WalletNavBar } from "./NavigationBar"; +import * as popup from "./popup/index.stories"; +import * as wallet from "./wallet/index.stories"; + +setupI18n("en", { en: {} }); + +const Page = styled.div` + * { + margin: 0px; + padding: 0px; + font-size: 100%; + font-family: Arial, Helvetica, sans-serif; + } + p:not([class]) { + margin-bottom: 1em; + margin-top: 1em; + } + width: 100%; + display: flex; + flex-direction: row; +`; + +const SideBar = styled.div` + min-width: 200px; + height: calc(100vh - 20px); + overflow-y: visible; + overflow-x: hidden; + & > { + ol { + padding: 4px; + div { + background-color: lightcoral; + cursor: pointer; + } + dd { + margin-left: 1em; + padding: 4px; + cursor: pointer; + border-radius: 4px; + margin-bottom: 4px; + } + dd:nth-child(even) { + background-color: lightgray; + } + dd:nth-child(odd) { + background-color: lightblue; + } + } + } +`; + +const Content = styled.div` + width: 100%; +`; + +function parseExampleImport(group: string, im: any) { + const component = im.default.title; + return { + name: component, + examples: Object.entries(im) + .filter(([k]) => k !== "default") + .map( + ([name, render]) => + ({ + group, + component, + name, + render, + } as ExampleItem), + ), + }; +} + +const allExamples = Object.entries({ popup, wallet, mui }).map( + ([title, value]) => ({ + title, + list: value.default.map((s) => parseExampleImport(title, s)), + }), +); + +interface ExampleItem { + group: string; + component: string; + name: string; + render: { + (args: any): VNode; + args: any; + }; +} + +function findByGroupComponentName( + group: string, + component: string, + name: string, +) { + const gl = allExamples.filter((e) => e.title === group); + if (gl.length === 0) { + return undefined; + } + const cl = gl[0].list.filter((l) => l.name === component); + if (cl.length === 0) { + return undefined; + } + const el = cl[0].examples.filter((c) => c.name === name); + if (el.length === 0) { + return undefined; + } + return el[0]; +} + +function getContentForExample(item: ExampleItem | undefined): () => VNode { + if (!item) return () =>

select example from the list on the left

; + const example = findByGroupComponentName( + item.group, + item.component, + item.name, + ); + if (!example) return () =>

example not found

; + return () => example.render(example.render.args); +} + +function ExampleList({ + name, + list, +}: { + name: string; + list: { + name: string; + examples: ExampleItem[]; + }[]; +}) { + const [open, setOpen] = useState(true); + return ( +

setOpen(!open)}>{name}

+
+
{k.name}
+ {k.examples.map((r) => ( +
+ + {r.name} + +
+ ))} +
+

+ ); +} + +function getWrapperForGroup(group: string): FunctionComponent { + switch (group) { + case "popup": + return ({ children }: any) => ( + + + {children} + + ); + case "wallet": + return ({ children }: any) => ( + + + + {children} + + ); + default: + return Fragment; + } +} + +function ErrorReport({ + children, + selected, +}: { + children: ComponentChild; + selected: ExampleItem | undefined; +}) { + const [error] = useErrorBoundary(); + if (error) { + return ( +

Error was thrown trying to render

+ {selected && ( +

+ group: {selected.group} +
+ component: {selected.component} +
+ example: {selected.name} +

+ args:{" "} +

{JSON.stringify(selected.render.args, undefined, 2)}

+ )} +

{error.message}

{error.stack}

+ ); + } + return {children}; +} + +function getSelectionFromLocationHash(): ExampleItem | undefined { + if (!location.hash) return undefined; + const parts = location.hash.substring(1).split("-"); + if (parts.length < 3) return undefined; + return findByGroupComponentName( + decodeURIComponent(parts[0]), + decodeURIComponent(parts[1]), + decodeURIComponent(parts[2]), + ); +} + +function Application() { + const initialSelection = getSelectionFromLocationHash(); + const [selected, updateSelected] = useState( + initialSelection, + ); + + function updateSelectedFromHashChange({ newURL, oldURL }: any) { + const selected = getSelectionFromLocationHash(); + updateSelected(selected); + } + useEffect(() => { + window.addEventListener("hashchange", updateSelectedFromHashChange); + return () => { + window.removeEventListener("hashchange", updateSelectedFromHashChange); + }; + }, []); + + const ExampleContent = getContentForExample(selected); + + const GroupWrapper = getWrapperForGroup(selected?.group || "default"); + + return ( + + + {allExamples.map((e) => ( + + ))} +

+ + + + + + + + + + ); +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", main); +} else { + main(); +} +function main(): void { + try { + const container = document.getElementById("container"); + if (!container) { + throw Error("container not found, can't mount page contents"); + } + render(, container); + } catch (e) { + console.error("got error", e); + if (e instanceof Error) { + document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; + } + } +} diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index 88a84d960..7ecec1cb7 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -39,7 +39,7 @@ import { RefundPage } from "../cta/Refund"; import { TipPage } from "../cta/Tip"; import { WithdrawPage } from "../cta/Withdraw"; import { Pages, WalletNavBar } from "../NavigationBar"; -import { DeveloperPage } from "../popup/DeveloperPage"; +import { DeveloperPage } from "./DeveloperPage"; import { BackupPage } from "./BackupPage"; import { DepositPage } from "./DepositPage"; import { ExchangeAddPage } from "./ExchangeAddPage"; diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index bc4b0357a..2691fbdf5 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -32,6 +32,8 @@ import { InputWithLabel, LightText, LinkPrimary, + SubTitle, + Title, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; import { Pages } from "../NavigationBar"; @@ -167,11 +169,11 @@ export function CreateManualWithdraw({ if (initialCurrency !== undefined) { return (

+ Manual Withdrawal for {initialCurrency} -

+ Choose a exchange from where the coins will be withdrawn. The @@ -200,9 +202,9 @@ export function CreateManualWithdraw({ } return (

+ Manual Withdrawal -

+ Choose a exchange from where the coins will be withdrawn. The @@ -234,9 +236,9 @@ export function CreateManualWithdraw({ description={error} /> )} -

+ Manual Withdrawal -

+ Choose a exchange from where the coins will be withdrawn. The diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index df93b0c4e..65cdee4e9 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -35,6 +35,7 @@ import { ErrorText, Input, InputWithLabel, + SubTitle, WarningBox, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; @@ -265,9 +266,9 @@ export function View({ return ( -

+ Send {currency} to your account -

+ */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { PendingTaskType } from "@gnu-taler/taler-wallet-core"; +import { createExample } from "../test-utils"; +import { View as TestedComponent } from "./DeveloperPage"; + +export default { + title: "wallet/developer", + component: TestedComponent, + argTypes: { + setDeviceName: () => Promise.resolve(), + }, +}; + +export const AllOff = createExample(TestedComponent, { + onDownloadDatabase: async () => "this is the content of the database", + operations: [ + { + type: PendingTaskType.ExchangeUpdate, + exchangeBaseUrl: "http://exchange.url.", + givesLifeness: false, + lastError: undefined, + timestampDue: { + t_ms: 123123213, + }, + retryInfo: undefined, + }, + ], + coins: [], +}); 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 + + + click here + + to download + +

+ )} +
+

+ 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 +

+ {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(); + } +} diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index 1b40fe78e..e36fa112f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -1,6 +1,11 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { Button, ButtonSuccess, ButtonWarning } from "../components/styled"; +import { + Button, + ButtonSuccess, + ButtonWarning, + Title, +} from "../components/styled"; import { useTranslationContext } from "../context/translation"; import { TermsOfServiceSection } from "../cta/TermsOfServiceSection"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; @@ -85,9 +90,9 @@ export function View({ return (

+ <i18n.Translate>Review terms of service</i18n.Translate> - </h1> +
Exchange URL: diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index fae309ba7..6b8a6194d 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -10,6 +10,8 @@ import { ButtonPrimary, Input, LightText, + SubTitle, + Title, WarningBox, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; @@ -92,13 +94,13 @@ export function ExchangeSetUrlPage({
{!expectedCurrency ? ( -
+ <i18n.Translate>Add new exchange</i18n.Translate> - </h1> + ) : ( -
+ Add exchange for {expectedCurrency} -
+ )} {!result && ( diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index 136521e6b..ae4ba7e1e 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -30,6 +30,8 @@ import { Input, LightText, SmallLightText, + SubTitle, + Title, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; import { queryToSlashConfig } from "../utils/index"; @@ -115,9 +117,9 @@ export function SetUrlView({ return (
-
+ <i18n.Translate>Add backup provider</i18n.Translate> - </h1> + {error && (
-
+ <i18n.Translate>Review terms of service</i18n.Translate> - </h1> +
Provider URL:{" "} @@ -210,9 +212,9 @@ export function ConfirmProviderView({ Please review and accept this provider's terms of service -
+ 1. Pricing -
+
{Amounts.isZero(provider.annual_fee) ? ( free of charge @@ -222,9 +224,9 @@ export function ConfirmProviderView({ )}
-
+ 2. Storage -
+
{provider.storage_limit_in_megabytes} megabytes of storage per year diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 84a2a7441..83ebfb51a 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -9,7 +9,7 @@ import { import { Fragment, h, VNode } from "preact"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; import { QR } from "../components/QR"; -import { ButtonDestructive, WarningBox } from "../components/styled"; +import { ButtonDestructive, Title, WarningBox } from "../components/styled"; import { useTranslationContext } from "../context/translation"; import { amountToString } from "../utils/index"; export interface Props { @@ -115,9 +115,9 @@ export function ReserveCreated({ return (
-
+ <i18n.Translate>Exchange is ready for withdrawal</i18n.Translate> - </h1> +
To complete the process you need to wire{` `} diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 840e95651..478ce00a8 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -23,6 +23,7 @@ import { DestructiveText, Input, LinkPrimary, + SubTitle, SuccessText, WarningText, } from "../components/styled"; @@ -86,9 +87,9 @@ export function SettingsView({ return (
-
+ Navigator -
+ @@ -106,9 +107,9 @@ export function SettingsView({ onToggle={togglePermissions} /> -
+ Trust -
+ {!knownExchanges || !knownExchanges.length ? (
No exchange yet @@ -184,7 +185,7 @@ export function SettingsView({
-
Troubleshooting
+ Troubleshooting Developer mode} name="devMode" @@ -198,9 +199,9 @@ export function SettingsView({ /> -
+ Display -
+ Current Language} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 0e58aaf61..5cef86da8 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -43,6 +43,7 @@ import { Overlay, RowBorderGray, SmallLightText, + SubTitle, WarningBox, } from "../components/styled"; import { Time } from "../components/Time"; @@ -216,10 +217,13 @@ export function TransactionView({ ) : undefined} -
+ Withdrawal -
- + + {transaction.pending ? ( transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer ? ( @@ -340,10 +344,13 @@ export function TransactionView({ return ( -
+ Payment -
- + +
-
+ Deposit -
- + +
-
+ Refresh -
- + +
-
+ Tip -
- + +
-
+ Refund -
+ -
+ <i18n.Translate>Browser Extension Installed!</i18n.Translate> - </h1> +

Thank you for installing the wallet.
-
+ Permissions -
+ @@ -82,9 +83,9 @@ export function View({ enabled={permissionsEnabled} onToggle={togglePermissions} /> -
+ Next Steps -
+ Try the demo » diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx index 1e19445f8..b03177825 100644 --- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx @@ -33,5 +33,22 @@ import * as a12 from "./Settings.stories"; import * as a13 from "./Transaction.stories"; import * as a14 from "./Welcome.stories"; import * as a15 from "./AddNewActionView.stories"; +import * as a16 from "./DeveloperPage.stories"; -export default [a1, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15]; +export default [ + a1, + a3, + a4, + a5, + a6, + a7, + a8, + a9, + a10, + a11, + a12, + a13, + a14, + a15, + a16, +]; -- cgit v1.2.3

+ 1. Pricing -

+ 2. Storage -

+ Navigator -

+ Trust -

Troubleshooting

+ Display -

+ Withdrawal -

+ Payment -

+ Deposit -

+ Refresh -

+ Tip -

+ Refund -

+ Permissions -

+ Next Steps -

+ Digital cash payment -

+ Digital cash payment -

+ Digital cash deposit -

+ Digital cash payment -

GNU Taler Wallet

+ Refund Status -

GNU Taler Wallet

+ Digital cash withdrawal -

+ Manual Withdrawal for {initialCurrency} -

+ Manual Withdrawal -

+ Manual Withdrawal -

+ Send {currency} to your account -

+ <i18n.Translate>Add new exchange</i18n.Translate> - </h1> + ) : ( -

+ Add exchange for {expectedCurrency} -

+ Digital cash payment -

+ Digital cash payment -

+ Digital cash deposit -

+ Digital cash payment -

GNU Taler Wallet

+ Refund Status -

GNU Taler Wallet

+ Digital cash withdrawal -

+ Manual Withdrawal for {initialCurrency} -

+ Manual Withdrawal -

+ Manual Withdrawal -

+ Send {currency} to your account -

+ <i18n.Translate>Add new exchange</i18n.Translate> - </h1> + ) : ( -

+ Add exchange for {expectedCurrency} -

+ <i18n.Translate>Add backup provider</i18n.Translate> - </h1> + {error && ( - + <i18n.Translate>Review terms of service</i18n.Translate> - </h1> +

+ <i18n.Translate>Review terms of service</i18n.Translate> - </h1> +

+ 1. Pricing -

+ 2. Storage -

+ Navigator -

+ Trust -

Troubleshooting

+ Display -

+ Withdrawal -

+ Payment -

+ Deposit -

+ Refresh -

+ Tip -

+ Refund -

+ <i18n.Translate>Browser Extension Installed!</i18n.Translate> - </h1> +

+ Permissions -

+ Next Steps -