aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-12-06 10:31:19 -0300
committerSebastian <sebasjm@gmail.com>2021-12-06 10:31:26 -0300
commit505eb07d8e42d6787dc23b2024b76e05f807e1ad (patch)
tree3014f55b6d7074faacdd72beb8ba67313dc0ae5c
parentc3b01ad9e4ccd49407a8df7aafce61909291a1b9 (diff)
show error details in devmode
-rw-r--r--packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx8
-rw-r--r--packages/taler-wallet-webextension/src/context/devContext.ts6
-rw-r--r--packages/taler-wallet-webextension/src/cta/Pay.tsx18
-rw-r--r--packages/taler-wallet-webextension/src/test-utils.ts22
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx38
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.tsx11
-rw-r--r--packages/taler-wallet-webextension/src/walletEntryPoint.tsx18
7 files changed, 103 insertions, 18 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index 4aaf4a5be..2f50fda2f 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
@@ -17,6 +17,7 @@ import { TalerErrorDetails } from "@gnu-taler/taler-util";
import { VNode, h, Fragment } from "preact";
import { useState } from "preact/hooks";
import arrowDown from "../../static/img/chevron-down.svg";
+import { useDevContext } from "../context/devContext";
import { ErrorBox } from "./styled";
export function ErrorTalerOperation({
@@ -26,8 +27,8 @@ export function ErrorTalerOperation({
title?: string;
error?: TalerErrorDetails;
}): VNode | null {
+ const { devMode } = useDevContext();
const [showErrorDetail, setShowErrorDetail] = useState(false);
- const [showExtraInfo, setShowExtraInfo] = useState(false);
if (!title || !error) return null;
return (
<ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
@@ -47,11 +48,8 @@ export function ErrorTalerOperation({
<Fragment>
<div style={{ padding: 5, textAlign: "left" }}>
<div>{error.message}</div>
- <a href="#" onClick={() => setShowExtraInfo((v) => !v)}>
- more
- </a>
</div>
- {showExtraInfo && (
+ {devMode && (
<div style={{ textAlign: "left", overflowX: "auto" }}>
<pre>{JSON.stringify(error, undefined, 2)}</pre>
</div>
diff --git a/packages/taler-wallet-webextension/src/context/devContext.ts b/packages/taler-wallet-webextension/src/context/devContext.ts
index 0344df057..7ed6858a7 100644
--- a/packages/taler-wallet-webextension/src/context/devContext.ts
+++ b/packages/taler-wallet-webextension/src/context/devContext.ts
@@ -20,7 +20,7 @@
*/
import { createContext, h, VNode } from "preact";
-import { useContext, useState } from "preact/hooks";
+import { useContext } from "preact/hooks";
import { useLocalStorage } from "../hooks/useLocalStorage";
interface Type {
@@ -34,6 +34,10 @@ const Context = createContext<Type>({
export const useDevContext = (): Type => useContext(Context);
+export const DevContextProviderForTesting = ({ value, children }: { value: boolean, children: any }): VNode => {
+ return h(Context.Provider, { value: { devMode: value, toggleDevMode: () => { null } }, children });
+};
+
export const DevContextProvider = ({ children }: { children: any }): VNode => {
const [value, setter] = useLocalStorage("devMode");
const devMode = value === "true";
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 9f015280b..f1c8f270c 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -33,6 +33,7 @@ import {
ConfirmPayResultType,
ContractTerms,
i18n,
+ NotificationType,
PreparePayResult,
PreparePayResultType,
} from "@gnu-taler/taler-util";
@@ -56,6 +57,7 @@ import * as wxApi from "../wxApi";
interface Props {
talerPayUri?: string;
+ goToWalletManualWithdraw: () => void;
}
// export function AlreadyPaid({ payStatus }: { payStatus: PreparePayResult }) {
@@ -102,7 +104,10 @@ const doPayment = async (
return res;
};
-export function PayPage({ talerPayUri }: Props): VNode {
+export function PayPage({
+ talerPayUri,
+ goToWalletManualWithdraw,
+}: Props): VNode {
const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(
undefined,
);
@@ -113,7 +118,9 @@ export function PayPage({ talerPayUri }: Props): VNode {
OperationFailedError | string | undefined
>(undefined);
- const balance = useAsyncAsHook(wxApi.getBalance);
+ const balance = useAsyncAsHook(wxApi.getBalance, [
+ NotificationType.CoinWithdrawn,
+ ]);
const balanceWithoutError = balance?.hasError
? []
: balance?.response.balances || [];
@@ -144,7 +151,7 @@ export function PayPage({ talerPayUri }: Props): VNode {
}
};
doFetch();
- }, [talerPayUri]);
+ }, [talerPayUri, foundAmount]);
if (!talerPayUri) {
return <span>missing pay uri</span>;
@@ -198,6 +205,7 @@ export function PayPage({ talerPayUri }: Props): VNode {
payStatus={payStatus}
payResult={payResult}
onClick={onClick}
+ goToWalletManualWithdraw={goToWalletManualWithdraw}
balance={foundAmount}
/>
);
@@ -209,6 +217,7 @@ export interface PaymentRequestViewProps {
onClick: () => void;
payErrMsg?: string;
uri: string;
+ goToWalletManualWithdraw: () => void;
balance: AmountJson | undefined;
}
export function PaymentRequestView({
@@ -216,6 +225,7 @@ export function PaymentRequestView({
payStatus,
payResult,
onClick,
+ goToWalletManualWithdraw,
balance,
}: PaymentRequestViewProps): VNode {
let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
@@ -306,7 +316,7 @@ export function PaymentRequestView({
)}
</section>
<section>
- <ButtonSuccess upperCased>
+ <ButtonSuccess upperCased onClick={goToWalletManualWithdraw}>
{i18n.str`Withdraw digital cash`}
</ButtonSuccess>
</section>
diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts
index 28622bb85..2fe2c43bd 100644
--- a/packages/taler-wallet-webextension/src/test-utils.ts
+++ b/packages/taler-wallet-webextension/src/test-utils.ts
@@ -14,15 +14,27 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { ComponentChildren, FunctionalComponent, h as render } from "preact";
+import { ComponentChildren, FunctionalComponent, h as render, VNode } from "preact";
export function createExample<Props>(
Component: FunctionalComponent<Props>,
props: Partial<Props>,
-) {
- const r = (args: any) => render(Component, args);
- r.args = props;
- return r;
+): ComponentChildren {
+ const Render = (args: any) => render(Component, args);
+ Render.args = props;
+ return Render;
+}
+
+export function createExampleWithCustomContext<Props, ContextProps>(
+ Component: FunctionalComponent<Props>,
+ props: Partial<Props>,
+ ContextProvider: FunctionalComponent<ContextProps>,
+ contextProps: Partial<ContextProps>,
+): ComponentChildren {
+ const Render = (args: any): VNode => render(Component, args);
+ const WithContext = (args: any): VNode => render(ContextProvider, { ...contextProps, children: [Render(args)] } as any);
+ WithContext.args = props
+ return WithContext
}
export function NullLink({ children }: { children?: ComponentChildren }) {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 656c57324..6f57df315 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -31,7 +31,12 @@ import {
TransactionWithdrawal,
WithdrawalType,
} from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { ComponentChildren, h } from "preact";
+import { DevContextProviderForTesting } from "../context/devContext";
+import {
+ createExample,
+ createExampleWithCustomContext as createExampleInCustomContext,
+} from "../test-utils";
import { TransactionView as TestedComponent } from "./Transaction";
export default {
@@ -128,6 +133,25 @@ export const Withdraw = createExample(TestedComponent, {
transaction: exampleData.withdraw,
});
+export const WithdrawOneMinuteAgo = createExample(TestedComponent, {
+ transaction: {
+ ...exampleData.withdraw,
+ timestamp: {
+ t_ms: new Date().getTime() - 60 * 1000,
+ },
+ },
+});
+
+export const WithdrawOneMinuteAgoAndPending = createExample(TestedComponent, {
+ transaction: {
+ ...exampleData.withdraw,
+ timestamp: {
+ t_ms: new Date().getTime() - 60 * 1000,
+ },
+ pending: true,
+ },
+});
+
export const WithdrawError = createExample(TestedComponent, {
transaction: {
...exampleData.withdraw,
@@ -135,6 +159,18 @@ export const WithdrawError = createExample(TestedComponent, {
},
});
+export const WithdrawErrorInDevMode = createExampleInCustomContext(
+ TestedComponent,
+ {
+ transaction: {
+ ...exampleData.withdraw,
+ error: transactionError,
+ },
+ },
+ DevContextProviderForTesting,
+ { value: true },
+);
+
export const WithdrawPendingManual = createExample(TestedComponent, {
transaction: {
...exampleData.withdraw,
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 6cc836f60..22947d0c4 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -24,6 +24,7 @@ import {
TransactionType,
WithdrawalType,
} from "@gnu-taler/taler-util";
+import { differenceInSeconds } from "date-fns";
import { ComponentChildren, Fragment, h, VNode } from "preact";
import { route } from "preact-router";
import { useState } from "preact/hooks";
@@ -110,6 +111,7 @@ export function TransactionView({
onBack,
}: WalletTransactionProps): VNode {
const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
+
function doCheckBeforeForget(): void {
if (
transaction.pending &&
@@ -120,11 +122,18 @@ export function TransactionView({
onDelete();
}
}
+
function TransactionTemplate({
children,
}: {
children: ComponentChildren;
}): VNode {
+ const showRetry =
+ transaction.error !== undefined ||
+ transaction.timestamp.t_ms === "never" ||
+ (transaction.pending &&
+ differenceInSeconds(new Date(), transaction.timestamp.t_ms) > 10);
+
return (
<Fragment>
<section style={{ padding: 8, textAlign: "center" }}>
@@ -144,7 +153,7 @@ export function TransactionView({
<i18n.Translate> &lt; Back </i18n.Translate>
</Button>
<div>
- {transaction?.error ? (
+ {showRetry ? (
<ButtonPrimary onClick={onRetry}>
<i18n.Translate>retry</i18n.Translate>
</ButtonPrimary>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index 8ba0a7b9c..714e3fe5a 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -164,7 +164,13 @@ function Application(): VNode {
/>
{/** call to action */}
- <Route path={Pages.pay} component={PayPage} />
+ <Route
+ path={Pages.pay}
+ component={PayPage}
+ goToWalletManualWithdraw={() =>
+ goToWalletPage(Pages.manual_withdraw)
+ }
+ />
<Route path={Pages.refund} component={RefundPage} />
<Route path={Pages.tips} component={TipPage} />
<Route path={Pages.withdraw} component={WithdrawPage} />
@@ -176,6 +182,16 @@ function Application(): VNode {
);
}
+function goToWalletPage(page: Pages | string): null {
+ // eslint-disable-next-line no-undef
+ chrome.tabs.create({
+ active: true,
+ // eslint-disable-next-line no-undef
+ url: chrome.extension.getURL(`/static/wallet.html#${page}`),
+ });
+ return null;
+}
+
function Redirect({ to }: { to: string }): null {
useEffect(() => {
route(to, true);