@@ -208,7 +222,7 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg, balance
if (payStatus.status === PreparePayResultType.PaymentPossible) {
return
-
+
{i18n.str`Pay`} {amountToString(payStatus.amountEffective)}
@@ -252,6 +266,15 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg, balance
{payStatus.status === PreparePayResultType.AlreadyConfirmed &&
(payStatus.paid ? Already paid : Already claimed )
}
+ {payResult && payResult.type === ConfirmPayResultType.Done && (
+
+ Payment complete
+ {!payResult.contractTerms.fulfillment_message ?
+ "You will now be sent back to the merchant you came from." :
+ payResult.contractTerms.fulfillment_message
+ }
+
+ )}
{payStatus.status !== PreparePayResultType.InsufficientBalance && Amounts.isNonZero(totalFees) &&
;
onReview: (b: boolean) => void;
onAccept: (b: boolean) => void;
@@ -50,7 +54,8 @@ export interface ViewProps {
terms: {
value?: TermsDocument;
status: TermsStatus;
- }
+ },
+ knownExchanges: ExchangeListItem[]
};
@@ -68,15 +73,18 @@ interface TermsDocumentHtml {
href: string,
}
-function amountToString(text: AmountLike) {
+function amountToString(text: AmountJson) {
const aj = Amounts.jsonifyAmount(text)
const amount = Amounts.stringifyValue(aj)
return `${amount} ${aj.currency}`
}
-export function View({ details, amount, onWithdraw, terms, reviewing, onReview, onAccept, accepted, confirmed }: ViewProps) {
+export function View({ details, knownExchanges, amount, onWithdraw, onSwitchExchange, terms, reviewing, onReview, onAccept, accepted, confirmed }: ViewProps) {
const needsReview = terms.status === 'changed' || terms.status === 'new'
+ const [switchingExchange, setSwitchingExchange] = useState(undefined)
+ const exchanges = knownExchanges.reduce((prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }), {})
+
return (
-
{!reviewing &&
-
- {i18n.str`Edit exchange`}
-
+ {switchingExchange !== undefined ?
+
+
+
+ This is the list of known exchanges
+
+ onSwitchExchange(switchingExchange)}>
+ {i18n.str`Confirm exchange selection`}
+
+
+ : setSwitchingExchange("")}>
+ {i18n.str`Switch exchange`}
+ }
+
}
{!reviewing && accepted &&
@@ -140,6 +158,9 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview,
}
+ {/**
+ * Main action section
+ */}
{terms.status === 'new' && !accepted && !reviewing &&
(undefined);
- const [details, setDetails] = useState(undefined);
- const [cancelled, setCancelled] = useState(false);
- const [selecting, setSelecting] = useState(false);
- const [error, setError] = useState(false);
- const [updateCounter, setUpdateCounter] = useState(1);
+export function WithdrawPageWithParsedURI({ uri, uriInfo }: { uri: string, uriInfo: WithdrawUriInfoResponse }) {
+ const [customExchange, setCustomExchange] = useState(undefined)
+ const [errorAccepting, setErrorAccepting] = useState(undefined)
+
const [reviewing, setReviewing] = useState(false)
const [accepted, setAccepted] = useState(false)
const [confirmed, setConfirmed] = useState(false)
- useEffect(() => {
- return onUpdateNotification(() => {
- console.log('updating...')
- setUpdateCounter(updateCounter + 1);
- });
- }, []);
+ const knownExchangesHook = useAsyncAsHook(() => listExchanges())
- useEffect(() => {
- console.log('on effect yes', talerWithdrawUri)
- if (!talerWithdrawUri) return
- const fetchData = async (): Promise => {
- try {
- const res = await getWithdrawalDetailsForUri({ talerWithdrawUri });
- setUriInfo(res);
- } catch (e) {
- console.error('error', JSON.stringify(e, undefined, 2))
- setError(true)
- }
- };
- fetchData();
- }, [selecting, talerWithdrawUri, updateCounter]);
+ const knownExchanges = !knownExchangesHook || knownExchangesHook.hasError ? [] : knownExchangesHook.response.exchanges
+ const withdrawAmount = Amounts.parseOrThrow(uriInfo.amount)
+ const thisCurrencyExchanges = knownExchanges.filter(ex => ex.currency === withdrawAmount.currency)
- useEffect(() => {
- async function fetchData() {
- if (!uriInfo || !uriInfo.defaultExchangeBaseUrl) return
- try {
- const res = await getExchangeWithdrawalInfo({
- exchangeBaseUrl: uriInfo.defaultExchangeBaseUrl,
- amount: Amounts.parseOrThrow(uriInfo.amount),
- tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf']
- })
- setDetails(res)
- } catch (e) {
- setError(true)
- }
- }
- fetchData()
- }, [uriInfo])
+ const exchange = customExchange || uriInfo.defaultExchangeBaseUrl || thisCurrencyExchanges[0]?.exchangeBaseUrl
+ const detailsHook = useAsyncAsHook(async () => {
+ if (!exchange) throw Error('no default exchange')
+ return getExchangeWithdrawalInfo({
+ exchangeBaseUrl: exchange,
+ amount: withdrawAmount,
+ tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf']
+ })
+ })
- if (!talerWithdrawUri) {
- return missing withdraw uri Getting withdrawal details. Problems getting details: {detailsHook.message} => {
- if (!details) {
- throw Error("can't accept, no exchange selected");
- }
try {
- await setExchangeTosAccepted(details.exchangeDetails.exchangeBaseUrl, details.tosRequested?.tosEtag)
+ await setExchangeTosAccepted(details.exchangeInfo.baseUrl, details.tosRequested?.tosEtag)
setAccepted(true)
} catch (e) {
- setError(true)
+ if (e instanceof Error) {
+ setErrorAccepting(e.message)
+ }
}
}
const onWithdraw = async (): Promise => {
- if (!details) {
- throw Error("can't accept, no exchange selected");
- }
setConfirmed(true)
- console.log("accepting exchange", details.exchangeInfo.baseUrl);
+ console.log("accepting exchange", details.exchangeDetails.exchangeBaseUrl);
try {
- const res = await acceptWithdrawal(talerWithdrawUri, details.exchangeInfo.baseUrl);
+ const res = await acceptWithdrawal(uri, details.exchangeInfo.baseUrl);
console.log("accept withdrawal response", res);
if (res.confirmTransferUrl) {
document.location.href = res.confirmTransferUrl;
@@ -261,19 +257,6 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
}
};
- if (cancelled) {
- return Withdraw operation has been cancelled. This URI is not valid anymore. Loading... Getting withdrawal details. missing withdraw uri Loading... This URI is not valid anymore: {uriInfoHook.message} {
+ hasError: false;
+ response: T;
+}
+
+interface HookError {
+ hasError: true;
+ message: string;
+}
+
+export type HookResponse = HookOk | HookError | undefined;
+
+export function useAsyncAsHook (fn: (() => Promise)): HookResponse {
+ const [result, setHookResponse] = useState>(undefined);
+ useEffect(() => {
+ async function doAsync() {
+ try {
+ const response = await fn();
+ setHookResponse({ hasError: false, response });
+ } catch (e) {
+ if (e instanceof Error) {
+ setHookResponse({ hasError: true, message: e.message });
+ }
+ }
+ }
+ doAsync()
+ }, []);
+ return result;
+}
diff --git a/packages/taler-wallet-webextension/src/hooks/useBalances.tsx b/packages/taler-wallet-webextension/src/hooks/useBalances.ts
similarity index 87%
rename from packages/taler-wallet-webextension/src/hooks/useBalances.tsx
rename to packages/taler-wallet-webextension/src/hooks/useBalances.ts
index 503b7a492..37424fb05 100644
--- a/packages/taler-wallet-webextension/src/hooks/useBalances.tsx
+++ b/packages/taler-wallet-webextension/src/hooks/useBalances.ts
@@ -20,12 +20,13 @@ import * as wxApi from "../wxApi";
interface BalancesHookOk {
- error: false;
+ hasError: false;
response: BalancesResponse;
}
interface BalancesHookError {
- error: true;
+ hasError: true;
+ message: string;
}
export type BalancesHook = BalancesHookOk | BalancesHookError | undefined;
@@ -37,10 +38,12 @@ export function useBalances(): BalancesHook {
try {
const response = await wxApi.getBalance();
console.log("got balance", balance);
- setBalance({ error: false, response });
+ setBalance({ hasError: false, response });
} catch (e) {
console.error("could not retrieve balances", e);
- setBalance({ error: true });
+ if (e instanceof Error) {
+ setBalance({ hasError: true, message: e.message });
+ }
}
}
checkBalance()
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index a0655d379..382f9b549 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -35,14 +35,15 @@ export const NotYetLoaded = createExample(TestedComponent, {
export const GotError = createExample(TestedComponent, {
balance: {
- error: true
+ hasError: true,
+ message: 'Network error'
},
Linker: NullLink,
});
export const EmptyBalance = createExample(TestedComponent, {
balance: {
- error: false,
+ hasError: false,
response: {
balances: []
},
@@ -52,7 +53,7 @@ export const EmptyBalance = createExample(TestedComponent, {
export const SomeCoins = createExample(TestedComponent, {
balance: {
- error: false,
+ hasError: false,
response: {
balances: [{
available: 'USD:10.5',
@@ -68,7 +69,7 @@ export const SomeCoins = createExample(TestedComponent, {
export const SomeCoinsAndIncomingMoney = createExample(TestedComponent, {
balance: {
- error: false,
+ hasError: false,
response: {
balances: [{
available: 'USD:2.23',
@@ -82,20 +83,80 @@ export const SomeCoinsAndIncomingMoney = createExample(TestedComponent, {
Linker: NullLink,
});
+export const SomeCoinsAndOutgoingMoney = createExample(TestedComponent, {
+ balance: {
+ hasError: false,
+ response: {
+ balances: [{
+ available: 'USD:2.23',
+ hasPendingTransactions: false,
+ pendingIncoming: 'USD:0',
+ pendingOutgoing: 'USD:5.11',
+ requiresUserInput: false
+ }]
+ },
+ },
+ Linker: NullLink,
+});
+
+export const SomeCoinsAndMovingMoney = createExample(TestedComponent, {
+ balance: {
+ hasError: false,
+ response: {
+ balances: [{
+ available: 'USD:2.23',
+ hasPendingTransactions: false,
+ pendingIncoming: 'USD:2',
+ pendingOutgoing: 'USD:5.11',
+ requiresUserInput: false
+ }]
+ },
+ },
+ Linker: NullLink,
+});
+
export const SomeCoinsInTwoCurrencies = createExample(TestedComponent, {
balance: {
- error: false,
+ hasError: false,
response: {
balances: [{
available: 'USD:2',
hasPendingTransactions: false,
- pendingIncoming: 'USD:5',
+ pendingIncoming: 'USD:5.1',
pendingOutgoing: 'USD:0',
requiresUserInput: false
},{
available: 'EUR:4',
hasPendingTransactions: false,
- pendingIncoming: 'EUR:5',
+ pendingIncoming: 'EUR:0',
+ pendingOutgoing: 'EUR:3.01',
+ requiresUserInput: false
+ }]
+ },
+ },
+ Linker: NullLink,
+});
+
+export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
+ balance: {
+ hasError: false,
+ response: {
+ balances: [{
+ available: 'USD:1',
+ hasPendingTransactions: false,
+ pendingIncoming: 'USD:0',
+ pendingOutgoing: 'USD:0',
+ requiresUserInput: false
+ },{
+ available: 'COL:2000',
+ hasPendingTransactions: false,
+ pendingIncoming: 'USD:0',
+ pendingOutgoing: 'USD:0',
+ requiresUserInput: false
+ },{
+ available: 'EUR:4',
+ hasPendingTransactions: false,
+ pendingIncoming: 'EUR:15',
pendingOutgoing: 'EUR:0',
requiresUserInput: false
}]
@@ -103,3 +164,56 @@ export const SomeCoinsInTwoCurrencies = createExample(TestedComponent, {
},
Linker: NullLink,
});
+
+
+export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, {
+ balance: {
+ hasError: false,
+ response: {
+ balances: [{
+ available: 'USD: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: 'ARS:30',
+ hasPendingTransactions: false,
+ pendingIncoming: 'USD:0',
+ pendingOutgoing: 'USD:0',
+ requiresUserInput: false
+ },{
+ available: 'JPY:51223233',
+ 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
+ }]
+ },
+ },
+ Linker: NullLink,
+});
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index e3bada8d4..8e5c5c42e 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -19,8 +19,9 @@ import {
Balance, BalancesResponse,
i18n
} from "@gnu-taler/taler-util";
-import { JSX, h } from "preact";
-import { PopupBox, Centered, ButtonPrimary } from "../components/styled/index";
+import { JSX, h, Fragment } from "preact";
+import { ErrorMessage } from "../components/ErrorMessage";
+import { PopupBox, Centered, ButtonPrimary, ErrorBox, Middle } from "../components/styled/index";
import { BalancesHook, useBalances } from "../hooks/useBalances";
import { PageLink, renderAmount } from "../renderHtml";
@@ -34,34 +35,6 @@ export interface BalanceViewProps {
Linker: typeof PageLink;
goToWalletManualWithdraw: () => void;
}
-export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) {
- if (!balance) {
- return
-
{i18n.str`Error: could not retrieve balance information.`}
-
- Click here for help and
- diagnostics.
-
-
- You have no balance to show. Need some{" "}
- help getting started?
-
- )
- }
- return
-
+
{"+"}
{renderAmount(entry.pendingIncoming)}
{" "}
- incoming
+
+
+ {"-"}
+ {renderAmount(entry.pendingOutgoing)}
+ {" "}
({l}) ;
+ return {l} ;
}
return (
- ({l[0]}, {l[1]})
+ {l[0]}, {l[1]}
);
}
-function ShowBalances({ wallet, onWithdraw }: { wallet: BalancesResponse, onWithdraw: () => void }) {
- return
-
- {wallet.balances.map((entry) => {
+export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) {
+
+ function Content() {
+ if (!balance) {
+ return
+ {balance.message}
+
+ Click here for help and
+ diagnostics.
+
+ )
+ }
+ if (balance.response.balances.length === 0) {
+ return (
+
+
+ You have no balance to show. Need some{" "}
+ help getting started?
+
+
+ )
+ }
+ return
+ {balance.response.balances.map((entry) => {
const av = Amounts.parseOrThrow(entry.available);
- const v = av.value + av.fraction / amountFractionalBase;
- return (
-
-
- {v} {" "}
- {av.currency}
-
- {formatPending(entry)}
-
+ // Create our number formatter.
+ let formatter;
+ try {
+ formatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: av.currency,
+ currencyDisplay: 'symbol'
+ // These options are needed to round to whole numbers if that's what you want.
+ //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+ //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
+ });
+ } catch {
+ formatter = new Intl.NumberFormat('en-US', {
+ // style: 'currency',
+ // currency: av.currency,
+ // These options are needed to round to whole numbers if that's what you want.
+ //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+ //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
+ });
+ }
+
+ const v = formatter.format(av.value + av.fraction / amountFractionalBase);
+ const fontSize = v.length < 8 ? '3em' : (v.length < 13 ? '2em' : '1em')
+ return (
+ {v}
+ {av.currency}
+ {formatPending(entry)}
+
);
- })}
+ })}
+ }
+
+ return
+ {/* */}
}
diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx
index 3968b0191..ccc747466 100644
--- a/packages/taler-wallet-webextension/src/popup/Debug.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx
@@ -28,7 +28,6 @@ export function DeveloperPage(props: any): JSX.Element {
wallet tab
reset
- reload chrome extension