From 8cde98947ba1a6d8c7928578b053786c4e5db17f Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 20 Sep 2021 14:05:40 -0300 Subject: manual withdrawal process --- .../src/wallet/BackupPage.tsx | 6 +- .../src/wallet/BalancePage.tsx | 27 +++++--- .../src/wallet/CreateManualWithdraw.stories.tsx | 56 +++++++++++++++++ .../src/wallet/CreateManualWithdraw.tsx | 57 +++++++++++++++++ .../src/wallet/ManualWithdrawPage.tsx | 71 ++++++++++++++++++++++ .../src/wallet/ReserveCreated.stories.tsx | 40 ++++++++++++ .../src/wallet/ReserveCreated.tsx | 41 +++++++++++++ .../src/wallet/Transaction.tsx | 2 +- 8 files changed, 287 insertions(+), 13 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx (limited to 'packages/taler-wallet-webextension/src/wallet') diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index ffc4418e0..712329bf8 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -57,7 +57,7 @@ export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): title={provider.name} /> )} - {!providers.length && + {!providers.length && No backup providers configured Add provider } @@ -98,8 +98,8 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
{props.title} - {dateStr && Last synced: {dateStr}} - {!dateStr && Not synced} + {dateStr && Last synced: {dateStr}} + {!dateStr && Not synced}
{props.status?.type === 'paid' ? diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx index 4846d47f7..e06e884ce 100644 --- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx @@ -19,21 +19,24 @@ import { Balance, BalancesResponse, i18n } from "@gnu-taler/taler-util"; -import { JSX, h } from "preact"; -import { WalletBox, Centered } from "../components/styled/index"; +import { JSX } from "preact"; +import { ButtonPrimary, Centered, WalletBox } from "../components/styled/index"; import { BalancesHook, useBalances } from "../hooks/useBalances"; import { PageLink, renderAmount } from "../renderHtml"; -export function BalancePage() { +export function BalancePage({ goToWalletManualWithdraw }: { goToWalletManualWithdraw: () => void }) { const balance = useBalances() - return + return } + export interface BalanceViewProps { - balance: BalancesHook, - Linker: typeof PageLink, + balance: BalancesHook; + Linker: typeof PageLink; + goToWalletManualWithdraw: () => void; } -export function BalanceView({ balance, Linker }: BalanceViewProps) { + +export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) { if (!balance) { return } @@ -57,7 +60,9 @@ export function BalanceView({ balance, Linker }: BalanceViewProps) {

) } - return + return } function formatPending(entry: Balance): JSX.Element { @@ -96,7 +101,7 @@ function formatPending(entry: Balance): JSX.Element { } -function ShowBalances({ wallet }: { wallet: BalancesResponse }) { +function ShowBalances({ wallet, onWithdraw }: { wallet: BalancesResponse, onWithdraw: () => void }) { return
{wallet.balances.map((entry) => { @@ -113,5 +118,9 @@ function ShowBalances({ wallet }: { wallet: BalancesResponse }) { ); })}
+
+
+ Withdraw +
} diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.stories.tsx new file mode 100644 index 000000000..35da52392 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.stories.tsx @@ -0,0 +1,56 @@ +/* + 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 { createExample } from '../test-utils'; +import { CreateManualWithdraw as TestedComponent } from './CreateManualWithdraw'; + +export default { + title: 'wallet/manual withdraw/creation', + component: TestedComponent, + argTypes: { + } +}; + + +export const InitialState = createExample(TestedComponent, { +}); + +export const WithExchangeFilled = createExample(TestedComponent, { + currency: 'COL', + initialExchange: 'http://exchange.taler:8081', +}); + +export const WithExchangeAndAmountFilled = createExample(TestedComponent, { + currency: 'COL', + initialExchange: 'http://exchange.taler:8081', + initialAmount: '10' +}); + +export const WithExchangeError = createExample(TestedComponent, { + initialExchange: 'http://exchange.tal', + error: 'The exchange url seems invalid' +}); + +export const WithAmountError = createExample(TestedComponent, { + currency: 'COL', + initialExchange: 'http://exchange.taler:8081', + initialAmount: 'e' +}); diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx new file mode 100644 index 000000000..be2cbe41d --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -0,0 +1,57 @@ +import { AmountJson, Amounts } from "@gnu-taler/taler-util"; +import { VNode } from "preact"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { ErrorMessage } from "../components/ErrorMessage"; +import { ButtonPrimary, Input, InputWithLabel, LightText, WalletBox } from "../components/styled"; + +export interface Props { + error: string | undefined; + currency: string | undefined; + initialExchange?: string; + initialAmount?: string; + onExchangeChange: (exchange: string) => void; + onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise; +} + +export function CreateManualWithdraw({ onExchangeChange, initialExchange, initialAmount, error, currency, onCreate }: Props): VNode { + const [exchange, setExchange] = useState(initialExchange || ""); + const [amount, setAmount] = useState(initialAmount || ""); + const parsedAmount = Amounts.parse(`${currency}:${amount}`) + + let timeout = useRef(undefined); + useEffect(() => { + if (timeout) window.clearTimeout(timeout.current) + timeout.current = window.setTimeout(async () => { + onExchangeChange(exchange) + }, 1000); + }, [exchange]) + + + return ( + +
+ +

Manual Withdrawal

+ Choose a exchange to create a reserve and then fill the reserve to withdraw the coins +

+ + + setExchange(e.currentTarget.value)} /> + http://exchange.taler:8081 + + {currency && + +

+
{currency}
+ setAmount(e.currentTarget.value)} /> +
+ } +

+
+
+
+ onCreate(exchange, parsedAmount!)}>Create +
+ + ); +} diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx new file mode 100644 index 000000000..d4daefc2e --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -0,0 +1,71 @@ +/* + 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 { VNode } from "preact"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { CreateManualWithdraw } from "./CreateManualWithdraw"; +import * as wxApi from '../wxApi' +import { AcceptManualWithdrawalResult, AmountJson, Amounts } from "@gnu-taler/taler-util"; +import { ReserveCreated } from "./ReserveCreated.js"; + +interface Props { + +} + +export function ManualWithdrawPage({ }: Props): VNode { + const [success, setSuccess] = useState(undefined) + const [currency, setCurrency] = useState(undefined) + const [error, setError] = useState(undefined) + + async function onExchangeChange(exchange: string | undefined) { + if (!exchange) return + try { + const r = await fetch(`${exchange}/keys`) + const j = await r.json() + setCurrency(j.currency) + } catch (e) { + setError('The exchange url seems invalid') + setCurrency(undefined) + } + } + + async function doCreate(exchangeBaseUrl: string, amount: AmountJson) { + try { + const resp = await wxApi.acceptManualWithdrawal(exchangeBaseUrl, Amounts.stringify(amount)) + setSuccess(resp) + } catch (e) { + if (e instanceof Error) { + setError(e.message) + } else { + setError('unexpected error') + } + setSuccess(undefined) + } + } + + if (success) { + return {}}/> + } + + return ; +} + + + diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx new file mode 100644 index 000000000..ca524f4e2 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx @@ -0,0 +1,40 @@ +/* + 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 { createExample } from '../test-utils'; +import { ReserveCreated as TestedComponent } from './ReserveCreated'; + +export default { + title: 'wallet/manual withdraw/reserve created', + component: TestedComponent, + argTypes: { + } +}; + + +export const InitialState = createExample(TestedComponent, { + reservePub: 'ASLKDJQWLKEJASLKDJSADLKASJDLKSADJ', + paytos: [ + 'payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG', + 'payto://x-taler-bank/international-bank.com/myaccount?amount=COL%3A1&message=Taler+Withdrawal+TYQTE7VA4M9GZQ4TR06YBNGA05AJGMFNSK4Q62NXR2FKNDB1J4EX', + ] +}); + diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx new file mode 100644 index 000000000..e01336e02 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -0,0 +1,41 @@ +import { Fragment, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { QR } from "../components/QR"; +import { ButtonBox, FontIcon, WalletBox } from "../components/styled"; + +export interface Props { + reservePub: string; + paytos: string[]; + onBack: () => void; +} + +export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode { + const [opened, setOpened] = useState(-1) + return ( + +
+

Reserve created!

+

Now you need to send money to the exchange to one of the following accounts

+

To complete the setup of the reserve, you must now initiate a wire transfer using the given wire transfer subject and crediting the specified amount to the indicated account of the exchange.

+
+
+ +
+ + + ); +} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 435753725..052b77dd0 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -51,7 +51,7 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element { transaction={transaction} onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))} onRetry={() => wxApi.retryTransaction(tid).then(_ => history.go(-1))} - onBack={() => { history.go(-1); }} />; + onBack={() => { route(Pages.history) }} />; } export interface WalletTransactionProps { -- cgit v1.2.3