diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
17 files changed, 187 insertions, 442 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 6a010f63a..11f684af5 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -44,8 +44,6 @@ export enum Pages { backup_provider_detail = "/backup/provider/:pid", backup_provider_add = "/backup/provider/add", - pending = "/pending", - settings = "/settings", settings_exchange_add = "/settings/exchange/add", diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx index 20c3b7178..2fdcd992c 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx @@ -123,15 +123,20 @@ export const TicketWithAProductList = createExample(TestedComponent, { amount: "USD:10", products: [ { - description: "beer", + description: "ten beers", price: "USD:1", quantity: 10, image: beer, }, { - description: "brown beer", - price: "USD:2", + description: "beer without image", + price: "USD:1", quantity: 10, + }, + { + description: "one brown beer", + price: "USD:2", + quantity: 1, image: beer, }, ], diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 806338c4d..7f5f42e8d 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -48,6 +48,7 @@ import { Part } from "../components/Part"; import { QR } from "../components/QR"; import { ButtonSuccess, + LightText, LinkSuccess, SmallLightText, SuccessBox, @@ -313,7 +314,9 @@ export function PaymentRequestView({ <h3>Payment complete</h3> <p> {!payResult.contractTerms.fulfillment_message - ? "You will now be sent back to the merchant you came from." + ? payResult.contractTerms.fulfillment_url + ? `You are going to be redirected to ${payResult.contractTerms.fulfillment_url}` + : "You can close this page." : payResult.contractTerms.fulfillment_message} </p> </SuccessBox> @@ -373,19 +376,59 @@ function ProductList({ products }: { products: Product[] }): VNode { List of products </SmallLightText> <dl> - {products.map((p, i) => ( - <div key={i} style={{ display: "flex", textAlign: "left" }}> - <div> - <img src={p.image} style={{ width: 32, height: 32 }} /> - </div> - <div> - <dt>{p.description}</dt> - <dd> - {p.price} x {p.quantity} {p.unit ? `(${p.unit})` : ``} - </dd> + {products.map((p, i) => { + if (p.price) { + const pPrice = Amounts.parseOrThrow(p.price); + return ( + <div key={i} style={{ display: "flex", textAlign: "left" }}> + <div> + <img + src={p.image ? p.image : undefined} + style={{ width: 32, height: 32 }} + /> + </div> + <div> + <dt> + {p.quantity ?? 1} x {p.description}{" "} + <span style={{ color: "gray" }}> + {Amounts.stringify(pPrice)} + </span> + </dt> + <dd> + <b> + {Amounts.stringify( + Amounts.mult(pPrice, p.quantity ?? 1).amount, + )} + </b> + </dd> + </div> + </div> + ); + } + return ( + <div key={i} style={{ display: "flex", textAlign: "left" }}> + <div> + <img src={p.image} style={{ width: 32, height: 32 }} /> + </div> + <div> + <dt> + {p.quantity ?? 1} x {p.description} + </dt> + <dd> + Total{` `} + {p.price + ? `${Amounts.stringifyValue( + Amounts.mult( + Amounts.parseOrThrow(p.price), + p.quantity ?? 1, + ).amount, + )} ${p}` + : "free"} + </dd> + </div> </div> - </div> - ))} + ); + })} </dl> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index a4ee640ca..8f45a047c 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -28,10 +28,12 @@ import { i18n, WithdrawUriInfoResponse, } from "@gnu-taler/taler-util"; +import { OperationFailedError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../components/Loading"; import { LoadingError } from "../components/LoadingError"; +import { ErrorTalerOperation } from "../components/ErrorTalerOperation"; import { LogoHeader } from "../components/LogoHeader"; import { Part } from "../components/Part"; import { SelectList } from "../components/SelectList"; @@ -64,7 +66,6 @@ export interface ViewProps { onAccept: (b: boolean) => void; reviewing: boolean; reviewed: boolean; - confirmed: boolean; terms: TermsState; knownExchanges: ExchangeListItem[]; } @@ -81,8 +82,12 @@ export function View({ onReview, onAccept, reviewed, - confirmed, }: ViewProps): VNode { + const [withdrawError, setWithdrawError] = useState< + OperationFailedError | undefined + >(undefined); + const [confirmDisabled, setConfirmDisabled] = useState<boolean>(false); + const needsReview = terms.status === "changed" || terms.status === "new"; const [switchingExchange, setSwitchingExchange] = useState(false); @@ -90,15 +95,37 @@ export function View({ undefined, ); - const exchanges = knownExchanges.reduce( - (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }), - {}, - ); + const exchanges = knownExchanges + .filter((e) => e.currency === amount.currency) + .reduce( + (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }), + {}, + ); + + async function doWithdrawAndCheckError() { + try { + setConfirmDisabled(true); + await onWithdraw(); + } catch (e) { + if (e instanceof OperationFailedError) { + setWithdrawError(e); + } + setConfirmDisabled(false); + } + } return ( <WalletAction> <LogoHeader /> <h2>{i18n.str`Digital cash withdrawal`}</h2> + + {withdrawError && ( + <ErrorTalerOperation + title="Could not finish the withdrawal operation" + error={withdrawError.operationError} + /> + )} + <section> <Part title="Total to withdraw" @@ -168,8 +195,8 @@ export function View({ {(terms.status === "accepted" || (needsReview && reviewed)) && ( <ButtonSuccess upperCased - disabled={!exchangeBaseUrl || confirmed} - onClick={onWithdraw} + disabled={!exchangeBaseUrl || confirmDisabled} + onClick={doWithdrawAndCheckError} > {i18n.str`Confirm withdrawal`} </ButtonSuccess> @@ -178,7 +205,7 @@ export function View({ <ButtonWarning upperCased disabled={!exchangeBaseUrl} - onClick={onWithdraw} + onClick={doWithdrawAndCheckError} > {i18n.str`Withdraw anyway`} </ButtonWarning> @@ -204,7 +231,6 @@ export function WithdrawPageWithParsedURI({ const [reviewing, setReviewing] = useState<boolean>(false); const [reviewed, setReviewed] = useState<boolean>(false); - const [confirmed, setConfirmed] = useState<boolean>(false); const knownExchangesHook = useAsyncAsHook(() => wxApi.listExchanges()); @@ -267,16 +293,11 @@ export function WithdrawPageWithParsedURI({ const onWithdraw = async (): Promise<void> => { if (!exchange) return; - setConfirmed(true); console.log("accepting exchange", exchange); - try { - const res = await wxApi.acceptWithdrawal(uri, exchange); - console.log("accept withdrawal response", res); - if (res.confirmTransferUrl) { - document.location.href = res.confirmTransferUrl; - } - } catch (e) { - setConfirmed(false); + const res = await wxApi.acceptWithdrawal(uri, exchange); + console.log("accept withdrawal response", res); + if (res.confirmTransferUrl) { + document.location.href = res.confirmTransferUrl; } }; @@ -289,7 +310,6 @@ export function WithdrawPageWithParsedURI({ terms={detailsHook.response.tos} onSwitchExchange={setCustomExchange} knownExchanges={knownExchanges} - confirmed={confirmed} reviewed={reviewed} onAccept={onAccept} reviewing={reviewing} diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index f5e721033..3ca5b3a02 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -14,8 +14,9 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Amounts, Balance, i18n } from "@gnu-taler/taler-util"; +import { Amounts, Balance } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { BalanceTable } from "../components/BalanceTable"; import { JustInDevMode } from "../components/JustInDevMode"; import { Loading } from "../components/Loading"; @@ -23,8 +24,9 @@ import { LoadingError } from "../components/LoadingError"; import { MultiActionButton } from "../components/MultiActionButton"; import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; -import { PageLink } from "../renderHtml"; +import { AddNewActionView } from "../wallet/AddNewActionView"; import * as wxApi from "../wxApi"; +import { NoBalanceHelp } from "./NoBalanceHelp"; interface Props { goToWalletDeposit: (currency: string) => void; @@ -36,6 +38,7 @@ export function BalancePage({ goToWalletDeposit, goToWalletHistory, }: Props): VNode { + const [addingAction, setAddingAction] = useState(false); const state = useAsyncAsHook(wxApi.getBalance); const balances = !state || state.hasError ? [] : state.response.balances; @@ -47,18 +50,24 @@ export function BalancePage({ return <LoadingError title="Could not load balance page" error={state} />; } + if (addingAction) { + return <AddNewActionView onCancel={() => setAddingAction(false)} />; + } + return ( <BalanceView balances={balances} goToWalletManualWithdraw={goToWalletManualWithdraw} goToWalletDeposit={goToWalletDeposit} goToWalletHistory={goToWalletHistory} + goToAddAction={() => setAddingAction(true)} /> ); } export interface BalanceViewProps { balances: Balance[]; goToWalletManualWithdraw: () => void; + goToAddAction: () => void; goToWalletDeposit: (currency: string) => void; goToWalletHistory: (currency: string) => void; } @@ -68,6 +77,7 @@ export function BalanceView({ goToWalletManualWithdraw, goToWalletDeposit, goToWalletHistory, + goToAddAction, }: BalanceViewProps): VNode { const currencyWithNonZeroAmount = balances .filter((b) => !Amounts.isZero(b.available)) @@ -75,21 +85,7 @@ export function BalanceView({ if (balances.length === 0) { return ( - <Fragment> - <p> - <i18n.Translate> - You have no balance to show. - <a href="https://demo.taler.net/" style={{ display: "block" }}> - Learn how to top up your wallet balance ยป - </a> - </i18n.Translate> - </p> - <footer style={{ justifyContent: "space-between" }}> - <ButtonPrimary onClick={goToWalletManualWithdraw}> - Withdraw - </ButtonPrimary> - </footer> - </Fragment> + <NoBalanceHelp goToWalletManualWithdraw={goToWalletManualWithdraw} /> ); } @@ -113,7 +109,7 @@ export function BalanceView({ /> )} <JustInDevMode> - <ButtonBoxPrimary onClick={() => null}>enter uri</ButtonBoxPrimary> + <ButtonBoxPrimary onClick={goToAddAction}>enter uri</ButtonBoxPrimary> </JustInDevMode> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx new file mode 100644 index 000000000..baff0aadf --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -0,0 +1,27 @@ +import { i18n } from "@gnu-taler/taler-util"; +import { h, VNode } from "preact"; +import { ButtonBoxWarning, WarningBox } from "../components/styled"; + +export function NoBalanceHelp({ + goToWalletManualWithdraw, +}: { + goToWalletManualWithdraw: () => void; +}): VNode { + return ( + <WarningBox> + <p> + <b> + <i18n.Translate>You have no balance to show.</i18n.Translate> + </b> + <br /> + <i18n.Translate> + To withdraw money you can start from your bank site or click the + "withdraw" button to use a known exchange. + </i18n.Translate> + </p> + <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}> + Withdraw + </ButtonBoxWarning> + </WarningBox> + ); +} diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 8b97b09e9..fa0e6e3df 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -37,7 +37,6 @@ import { DeveloperPage } from "./popup/DeveloperPage"; import { TalerActionFound } from "./popup/TalerActionFound"; import { BackupPage } from "./wallet/BackupPage"; import { ExchangeAddPage } from "./wallet/ExchangeAddPage"; -import { Pending } from "./wallet/PendingPage"; import { ProviderAddPage } from "./wallet/ProviderAddPage"; import { ProviderDetailPage } from "./wallet/ProviderDetailPage"; @@ -126,8 +125,6 @@ function Application(): VNode { }} /> - <Route path={Pages.pending} component={Pending} /> - <Route path={Pages.backup} component={BackupPage} diff --git a/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx deleted file mode 100644 index 6c670b019..000000000 --- a/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx +++ /dev/null @@ -1,151 +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 <http://www.gnu.org/licenses/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createExample } from "../test-utils"; -import { BalanceView as TestedComponent } from "./BalancePage"; - -export default { - title: "wallet/balance", - component: TestedComponent, - argTypes: {}, -}; - -export const EmptyBalance = createExample(TestedComponent, { - balances: [], -}); - -export const SomeCoins = createExample(TestedComponent, { - balances: [ - { - available: "USD:10.5", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - ], -}); - -export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { - balances: [ - { - available: "EUR:1", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "TESTKUDOS:2000", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "JPY:4", - hasPendingTransactions: false, - pendingIncoming: "EUR:15", - pendingOutgoing: "EUR:0", - requiresUserInput: false, - }, - ], -}); - -export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { - balances: [ - { - available: "EUR:3", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "USD:2", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "ARS:1", - hasPendingTransactions: false, - pendingIncoming: "EUR:15", - pendingOutgoing: "EUR:0", - requiresUserInput: false, - }, - ], -}); - -export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { - balances: [ - { - available: "USD:0", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "ARS:13451", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "EUR:202.02", - hasPendingTransactions: false, - pendingIncoming: "EUR:0", - pendingOutgoing: "EUR:0", - requiresUserInput: false, - }, - { - available: "JPY:0", - hasPendingTransactions: false, - pendingIncoming: "EUR:0", - pendingOutgoing: "EUR:0", - requiresUserInput: false, - }, - { - available: "JPY:51223233", - hasPendingTransactions: false, - pendingIncoming: "EUR:0", - pendingOutgoing: "EUR:0", - requiresUserInput: false, - }, - { - available: "DEMOKUDOS:6", - hasPendingTransactions: false, - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - { - available: "TESTKUDOS:6", - hasPendingTransactions: false, - pendingIncoming: "USD:5", - pendingOutgoing: "USD:0", - requiresUserInput: false, - }, - ], -}); diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx deleted file mode 100644 index 111ac86c6..000000000 --- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx +++ /dev/null @@ -1,121 +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 <http://www.gnu.org/licenses/> - */ - -import { Amounts, Balance, i18n } from "@gnu-taler/taler-util"; -import { Fragment, h, VNode } from "preact"; -import { BalanceTable } from "../components/BalanceTable"; -import { Loading } from "../components/Loading"; -import { LoadingError } from "../components/LoadingError"; -import { MultiActionButton } from "../components/MultiActionButton"; -import { ButtonPrimary, Centered } from "../components/styled"; -import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; -import { PageLink } from "../renderHtml"; -import * as wxApi from "../wxApi"; - -interface Props { - goToWalletDeposit: (currency: string) => void; - goToWalletHistory: (currency: string) => void; - goToWalletManualWithdraw: () => void; -} - -export function BalancePage({ - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, -}: Props): VNode { - const state = useAsyncAsHook(wxApi.getBalance); - - const balances = !state || state.hasError ? [] : state.response.balances; - - if (!state) { - return <Loading />; - } - - if (state.hasError) { - return <LoadingError title="Could not load balance page" error={state} />; - } - - return ( - <BalanceView - balances={balances} - goToWalletManualWithdraw={goToWalletManualWithdraw} - goToWalletDeposit={goToWalletDeposit} - goToWalletHistory={goToWalletHistory} - /> - ); -} - -export interface BalanceViewProps { - balances: Balance[]; - goToWalletManualWithdraw: () => void; - goToWalletDeposit: (currency: string) => void; - goToWalletHistory: (currency: string) => void; -} - -export function BalanceView({ - balances, - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, -}: BalanceViewProps): VNode { - const currencyWithNonZeroAmount = balances - .filter((b) => !Amounts.isZero(b.available)) - .map((b) => b.available.split(":")[0]); - - if (balances.length === 0) { - return ( - <Fragment> - <p> - <Centered style={{ marginTop: 100 }}> - <i18n.Translate> - You have no balance to show. Need some{" "} - <PageLink pageName="/welcome">help</PageLink> getting started? - </i18n.Translate> - </Centered> - </p> - <footer style={{ justifyContent: "space-between" }}> - <div /> - <ButtonPrimary onClick={goToWalletManualWithdraw}> - Withdraw - </ButtonPrimary> - </footer> - </Fragment> - ); - } - - return ( - <Fragment> - <section> - <BalanceTable - balances={balances} - goToWalletHistory={goToWalletHistory} - /> - </section> - <footer style={{ justifyContent: "space-between" }}> - <ButtonPrimary onClick={goToWalletManualWithdraw}> - Withdraw - </ButtonPrimary> - {currencyWithNonZeroAmount.length > 0 && ( - <MultiActionButton - label={(s) => `Deposit ${s}`} - actions={currencyWithNonZeroAmount} - onClick={(c) => goToWalletDeposit(c)} - /> - )} - </footer> - </Fragment> - ); -} diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index f32a2aa5c..0ca07816e 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -98,12 +98,20 @@ export function CreateManualWithdraw({ if (!initialExchange) { return ( - <Centered style={{ marginTop: 100 }}> - <BoldLight>No exchange configured</BoldLight> - <ButtonSuccess onClick={onAddExchange}> - <i18n.Translate>Add exchange</i18n.Translate> - </ButtonSuccess> - </Centered> + <section> + <h2>Manual Withdrawal</h2> + <LightText> + Choose a exchange from where the coins will be withdrawn. The exchange + will send the coins to this wallet after receiving a wire transfer + with the correct subject. + </LightText> + <Centered style={{ marginTop: 100 }}> + <BoldLight>No exchange configured</BoldLight> + <ButtonSuccess onClick={onAddExchange}> + <i18n.Translate>Add exchange</i18n.Translate> + </ButtonSuccess> + </Centered> + </section> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index d8e46cc46..c4ba4f2a3 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -6,7 +6,13 @@ import { import { Fragment, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage"; -import { Button, ButtonPrimary, Input, WarningBox } from "../components/styled"; +import { + Button, + ButtonPrimary, + Input, + LightText, + WarningBox, +} from "../components/styled"; export interface Props { initialValue?: string; @@ -89,6 +95,14 @@ export function ExchangeSetUrlPage({ ) : ( <h2>Add exchange for {expectedCurrency}</h2> )} + {!result && ( + <LightText>Enter the URL of an exchange you trust.</LightText> + )} + {result && ( + <LightText> + An exchange has been found! Review the information and click next + </LightText> + )} {result && expectedCurrency && expectedCurrency !== result.currency && ( <WarningBox> This exchange doesn't match the expected currency{" "} diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 921ac5005..bd52995d9 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -35,7 +35,7 @@ import { HistoryView as TestedComponent } from "./History"; import { createExample } from "../test-utils"; export default { - title: "wallet/balance/history", + title: "wallet/balance", component: TestedComponent, }; diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index d873578b3..2fae07525 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -37,6 +37,7 @@ import { import { Time } from "../components/Time"; import { TransactionItem } from "../components/TransactionItem"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import { NoBalanceHelp } from "../popup/NoBalanceHelp"; import * as wxApi from "../wxApi"; interface Props { @@ -130,14 +131,7 @@ export function HistoryView({ if (balances.length === 0 || !selectedCurrency) { return ( - <WarningBox> - <p> - You have <b>no balance</b>. Withdraw some funds into your wallet - </p> - <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}> - Withdraw - </ButtonBoxWarning> - </WarningBox> + <NoBalanceHelp goToWalletManualWithdraw={goToWalletManualWithdraw} /> ); } return ( diff --git a/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx deleted file mode 100644 index cbcb5a824..000000000 --- a/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx +++ /dev/null @@ -1,33 +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 <http://www.gnu.org/licenses/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createExample } from "../test-utils"; -import { queryToSlashKeys } from "../utils/index"; -import { Pending as TestedComponent } from "./PendingPage"; - -export default { - title: "wallet/pending", - component: TestedComponent, -}; - -export const InitialState = createExample(TestedComponent, { - onVerify: queryToSlashKeys, -}); diff --git a/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx deleted file mode 100644 index 998095238..000000000 --- a/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx +++ /dev/null @@ -1,35 +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 <http://www.gnu.org/licenses/> -*/ - -import { h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { ButtonPrimary } from "../components/styled"; -import { AddNewActionView } from "./AddNewActionView"; - -export function Pending(): VNode { - const [addingAction, setAddingAction] = useState(false); - - if (addingAction) { - return <AddNewActionView onCancel={() => setAddingAction(false)} />; - } - - return ( - <section> - <div /> - <ButtonPrimary onClick={() => setAddingAction(true)}>+</ButtonPrimary> - </section> - ); -} diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx index 55f350d46..1e19445f8 100644 --- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx @@ -20,7 +20,6 @@ */ import * as a1 from "./Backup.stories"; -import * as a2 from "./Balance.stories"; import * as a3 from "./CreateManualWithdraw.stories"; import * as a4 from "./DepositPage.stories"; import * as a5 from "./ExchangeAddConfirm.stories"; @@ -35,20 +34,4 @@ import * as a13 from "./Transaction.stories"; import * as a14 from "./Welcome.stories"; import * as a15 from "./AddNewActionView.stories"; -export default [ - a1, - a2, - 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]; diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index 7023ad0f3..16912b2a7 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -47,7 +47,6 @@ import { DepositPage } from "./wallet/DepositPage"; import { ExchangeAddPage } from "./wallet/ExchangeAddPage"; import { HistoryPage } from "./wallet/History"; import { ManualWithdrawPage } from "./wallet/ManualWithdrawPage"; -import { Pending } from "./wallet/PendingPage"; import { ProviderAddPage } from "./wallet/ProviderAddPage"; import { ProviderDetailPage } from "./wallet/ProviderDetailPage"; import { SettingsPage } from "./wallet/Settings"; @@ -85,6 +84,14 @@ function Application(): VNode { function clearNotification(): void { setGlobalNotification(undefined); } + function clearNotificationWhenMovingOut(): void { + // const movingOutFromNotification = + // globalNotification && e.url !== globalNotification.to; + if (globalNotification) { + //&& movingOutFromNotification) { + setGlobalNotification(undefined); + } + } return ( <div> <DevContextProvider> @@ -112,13 +119,7 @@ function Application(): VNode { )} <Router history={hash_history} - onChange={() => { - // const movingOutFromNotification = - // globalNotification && e.url !== globalNotification.to; - if (globalNotification) { - setGlobalNotification(undefined); - } - }} + onChange={clearNotificationWhenMovingOut} > <Route path={Pages.welcome} component={WelcomePage} /> @@ -175,7 +176,6 @@ function Application(): VNode { {/** * PENDING */} - <Route path={Pages.pending} component={Pending} /> <Route path={Pages.settings} component={SettingsPage} /> {/** |