From 23dab91ee9e2ffcac381cc27183716b6881e0a88 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 30 Jun 2021 18:24:08 -0300 Subject: first backup list prototype --- .../src/hooks/useProvidersByCurrency.ts | 88 +++++++++++++++ .../src/popup/Backup.stories.tsx | 84 +++++++++++++++ .../src/popup/BackupPage.tsx | 119 +++++++++++++++++++-- .../taler-wallet-webextension/src/popup/popup.tsx | 4 +- packages/taler-wallet-webextension/src/wxApi.ts | 8 +- 5 files changed, 292 insertions(+), 11 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts create mode 100644 packages/taler-wallet-webextension/src/popup/Backup.stories.tsx (limited to 'packages/taler-wallet-webextension') diff --git a/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts b/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts new file mode 100644 index 000000000..9b600ee2b --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts @@ -0,0 +1,88 @@ +import { Amounts } from "@gnu-taler/taler-util"; +// import { ProviderInfo } from "@gnu-taler/taler-wallet-core/src/operations/backup/index.js"; + + +export interface ProvidersByCurrency { + [s:string] : any | undefined +} + +const list = { + "trustedAuditors": [], + "trustedExchanges": [ + { + "currency": "ARS", + "exchangeBaseUrl": "http://exchange.taler:8081/", + "exchangeMasterPub": "WHA6G542TW8B10N3E857M3P252HV7B896TSP1HP6NREG96ADA4MG" + }, + { + "currency": "KUDOS", + "exchangeBaseUrl": "https://exchange.demo.taler.net/", + "exchangeMasterPub": "FH1Y8ZMHCTPQ0YFSZECDH8C9407JR3YN0MF1706PTG24Q4NEWGV0" + }, + { + "currency": "USD", + "exchangeBaseUrl": "https://exchange.demo.taler.net/", + "exchangeMasterPub": "FH1Y8ZMHCTPQ0YFSZECDH8C9407JR3YN0MF1706PTG24Q4NEWGV0" + }, + { + "currency": "EUR", + "exchangeBaseUrl": "https://exchange.demo.taler.net/", + "exchangeMasterPub": "FH1Y8ZMHCTPQ0YFSZECDH8C9407JR3YN0MF1706PTG24Q4NEWGV0" + } + ] +} + +const status = { + "deviceId": "thenameofthisdevice", + "walletRootPub": "83DYRKK262TG72H1SD09CTWXQFC151P2DXF9WYH30J8EQ7EAZMCG", + "providers": [ + { + "active": false, + "syncProviderBaseUrl": "http://sync.demo.taler.net/", + "paymentProposalIds": [], + "paymentStatus": { + "type": "unpaid" + }, + "terms": { + "annualFee": "KUDOS:0.1", + "storageLimitInMegabytes": 16, + "supportedProtocolVersion": "0.0" + } + }, { + "active": true, + "syncProviderBaseUrl": "http://sync.taler:9967/", + "lastSuccessfulBackupTimestamp": { + "t_ms": 1625063925078 + }, + "paymentProposalIds": [ + "43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG" + ], + "paymentStatus": { + "type": "paid", + "paidUntil": { + "t_ms": 1656599921000 + } + }, + "terms": { + "annualFee": "ARS:1", + "storageLimitInMegabytes": 16, + "supportedProtocolVersion": "0.0" + } + } + + ] +} + +export function useProvidersByCurrency(): ProvidersByCurrency { + const currencies = list.trustedExchanges.map(e => e.currency) + const providerByCurrency = status.providers.reduce((p, c) => { + if (c.terms) { + p[Amounts.parseOrThrow(c.terms.annualFee).currency] = c + } + return p + }, {} as Record) + + + return providerByCurrency +} + diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx new file mode 100644 index 000000000..0f51f3897 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx @@ -0,0 +1,84 @@ +/* + 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 { FunctionalComponent } from 'preact'; +import { BackupView as TestedComponent } from './BackupPage'; + +export default { + title: 'popup/backup/list', + component: TestedComponent, + argTypes: { + onRetry: { action: 'onRetry' }, + onDelete: { action: 'onDelete' }, + onBack: { action: 'onBack' }, + } +}; + + +function createExample(Component: FunctionalComponent, props: Partial) { + const r = (args: any) => + r.args = props + return r +} + +export const Example = createExample(TestedComponent, { + deviceName: "somedevicename", + providers: { + ARS: { + "active": true, + "syncProviderBaseUrl": "http://sync.taler:9967/", + "lastSuccessfulBackupTimestamp": { + "t_ms": 1625063925078 + }, + "paymentProposalIds": [ + "43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG" + ], + "paymentStatus": { + "type": 'paid', + "paidUntil": { + "t_ms": 1656599921000 + } + }, + "terms": { + "annualFee": "ARS:1", + "storageLimitInMegabytes": 16, + "supportedProtocolVersion": "0.0" + } + }, + KUDOS: { + "active": false, + "syncProviderBaseUrl": "http://sync.demo.taler.net/", + "paymentProposalIds": [], + "paymentStatus": { + "type": 'unpaid', + }, + "terms": { + "annualFee": "KUDOS:0.1", + "storageLimitInMegabytes": 16, + "supportedProtocolVersion": "0.0" + } + }, + USD: undefined, + EUR: undefined + } +}); + + diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 4bbca9072..d13f5244d 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -15,21 +15,126 @@ */ -import { VNode } from "preact"; -import { useDevContext } from "../context/useDevContext"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { Timestamp } from "@gnu-taler/taler-util"; +// import { ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core/src/operations/backup"; +import { formatDuration, intervalToDuration } from "date-fns"; +import { JSX, VNode } from "preact"; +import { ProvidersByCurrency, useProvidersByCurrency } from "../hooks/useProvidersByCurrency"; export function BackupPage(): VNode { - return ; + const providers = useProvidersByCurrency() + return ; } export interface ViewProps { + deviceName: string; + providers: ProvidersByCurrency } -export function BackupView({}: ViewProps): VNode { +export function BackupView({ deviceName, providers }: ViewProps): VNode { return ( -
- Backup page +
+
+

+ {deviceName} +

+
+ +
+
+ {Object.keys(providers).map((currency) => { + const provider = providers[currency] + if (!provider) { + return + } + return + })}
) +} + +interface TransactionLayoutProps { + status?: any; + timestamp?: Timestamp; + title: string; + id: string; + subtitle?: string; + active?: boolean; +} + +function BackupLayout(props: TransactionLayoutProps): JSX.Element { + const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms); + const dateStr = date?.toLocaleString([], { + dateStyle: "medium", + timeStyle: "short", + } as any); + return ( +
+
+ {dateStr &&
{dateStr}
} + {!dateStr &&
never synced
} + + +
{props.subtitle}
+
+
+
+ {!props.status ? "missing" : ( + props.status?.type === 'paid' ? daysUntil(props.status.paidUntil) : 'unpaid' + )} +
+
+
+ ); +} + +function daysUntil(d: Timestamp) { + if (d.t_ms === 'never') return undefined + const duration = intervalToDuration({ + start: d.t_ms, + end: new Date(), + }) + const str = formatDuration(duration, { + delimiter: ', ', + format: [ + duration?.years ? 'years' : ( + duration?.months ? 'months' : ( + duration?.days ? 'days' : ( + duration.hours ? 'hours' : 'minutes' + ) + ) + ) + ] + }) + return `${str} left` } \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index fab5a834a..288e04477 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -24,9 +24,7 @@ /** * Imports. */ -import { - classifyTalerUri, i18n, TalerUriType -} from "@gnu-taler/taler-util"; +import { i18n } from "@gnu-taler/taler-util"; import { ComponentChildren, JSX } from "preact"; import Match from "preact-router/match"; import { useDevContext } from "../context/useDevContext"; diff --git a/packages/taler-wallet-webextension/src/wxApi.ts b/packages/taler-wallet-webextension/src/wxApi.ts index 095fabe85..bba8ea1d3 100644 --- a/packages/taler-wallet-webextension/src/wxApi.ts +++ b/packages/taler-wallet-webextension/src/wxApi.ts @@ -126,12 +126,18 @@ export function getBalance(): Promise { } /** - * Get balances for all currencies/exchanges. + * Retrieve the full event history for this wallet. */ export function getTransactions(): Promise { return callBackend("getTransactions", {}); } +/** + * Get currency from known auditors and exchanges + */ + export function listCurrencies(): Promise { + return callBackend("listCurrencies", {}); +} /** * Retry a transaction * @param transactionId -- cgit v1.2.3