aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r--packages/taler-wallet-webextension/src/components/PendingTransactions.tsx59
-rw-r--r--packages/taler-wallet-webextension/src/platform/api.ts7
-rw-r--r--packages/taler-wallet-webextension/src/platform/chrome.ts8
-rw-r--r--packages/taler-wallet-webextension/src/platform/dev.ts1
-rw-r--r--packages/taler-wallet-webextension/src/popup/Application.tsx19
-rw-r--r--packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts14
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Application.tsx40
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.tsx2
8 files changed, 113 insertions, 37 deletions
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index cde74dffe..372ca7cb7 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -33,7 +33,8 @@ import Banner from "./Banner.js";
import { Time } from "./Time.js";
interface Props extends JSX.HTMLAttributes {
- goToTransaction: (id: string) => Promise<void>;
+ goToTransaction?: (id: string) => Promise<void>;
+ goToURL: (url: string) => void;
}
/**
@@ -41,7 +42,7 @@ interface Props extends JSX.HTMLAttributes {
*/
const cache = { tx: [] as Transaction[] };
-export function PendingTransactions({ goToTransaction }: Props): VNode {
+export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode {
const api = useBackendContext();
const state = useAsyncAsHook(() =>
api.wallet.call(WalletApiOperation.GetTransactions, {}),
@@ -58,8 +59,8 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
!state || state.hasError
? cache.tx
: state.response.transactions.filter(
- (t) => t.txState.major === TransactionMajorState.Pending,
- );
+ (t) => t.txState.major === TransactionMajorState.Pending,
+ );
if (state && !state.hasError) {
cache.tx = transactions;
@@ -70,6 +71,7 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
return (
<PendingTransactionsView
goToTransaction={goToTransaction}
+ goToURL={goToURL}
transactions={transactions}
/>
);
@@ -78,11 +80,58 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
export function PendingTransactionsView({
transactions,
goToTransaction,
+ goToURL,
}: {
- goToTransaction: (id: string) => Promise<void>;
+ goToTransaction?: (id: string) => Promise<void>;
+ goToURL: (id: string) => void;
transactions: Transaction[];
}): VNode {
const { i18n } = useTranslationContext();
+ const kycTransaction = transactions.find(tx => tx.kycUrl)
+ if (kycTransaction) {
+ return <div
+ style={{
+ backgroundColor: "lightcyan",
+ display: "flex",
+ justifyContent: "center",
+ }}
+ >
+ <Banner
+ titleHead={i18n.str`KYC requirement`}
+ style={{
+ backgroundColor: "lightred",
+ maxHeight: 150,
+ padding: 8,
+ flexGrow: 1,
+ maxWidth: 500,
+ overflowY: transactions.length > 3 ? "scroll" : "hidden",
+ }}
+ >
+ <Grid
+ container
+ item
+ xs={1}
+ wrap="nowrap"
+ role="button"
+ spacing={1}
+ alignItems="center"
+ onClick={() => {
+ goToURL(kycTransaction.kycUrl ?? "#")
+ }}
+ >
+ <Grid item>
+ <Typography inline bold>
+ One or more transaction require a KYC step to complete
+ </Typography>
+ </Grid>
+
+ </Grid>
+ </Banner>
+ </div>
+ }
+
+ if (!goToTransaction) return <Fragment />
+
return (
<div
style={{
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index 76add93d1..d425a9992 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -234,12 +234,17 @@ export interface ForegroundPlatformAPI {
/**
* Popup API
*
- * Open a page into the wallet UI and closed the popup
+ * Open a page into the wallet UI and close the popup
* @param page
*/
openWalletPageFromPopup(page: string): void;
/**
+ * Open a page and close the popup
+ * @param url
+ */
+ openNewURLFromPopup(url: URL): void;
+ /**
* Get the wallet version from manifest
*/
getWalletWebExVersion(): WalletWebExVersion;
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index 4fb4bddfd..a4394be2c 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -55,6 +55,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
listenToAllChannels: listenToAllChannels as any,
registerReloadOnNewVersion,
sendMessageToAllChannels,
+ openNewURLFromPopup,
sendMessageToBackground,
useServiceWorkerAsBackgroundProcess,
keepAlive,
@@ -266,6 +267,13 @@ function openWalletPageFromPopup(page: string): void {
chrome.tabs.create({ active: true, url }, () => {
window.close();
});
+
+}
+function openNewURLFromPopup(url: URL): void {
+ // const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
+ chrome.tabs.create({ active: true, url: url.href }, () => {
+ window.close();
+ });
}
let nextMessageIndex = 0;
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts b/packages/taler-wallet-webextension/src/platform/dev.ts
index 02d11566a..8d37930fa 100644
--- a/packages/taler-wallet-webextension/src/platform/dev.ts
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -35,6 +35,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
findTalerUriInActiveTab: async () => undefined,
findTalerUriInClipboard: async () => undefined,
listenNetworkConnectionState,
+ openNewURLFromPopup: () => undefined,
getPermissionsApi: () => ({
addPermissionsListener: () => undefined,
containsHostPermissions: async () => true,
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 234e73eed..cbb9b50b2 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -67,12 +67,16 @@ function ApplicationView(): VNode {
redirectTo(Pages.balanceTransaction({ tid }));
}
+ function redirectToURL(str: string): void {
+ platform.openNewURLFromPopup(new URL(str))
+ }
+
return (
<Router history={hash_history}>
<Route
path={Pages.balance}
component={() => (
- <PopupTemplate path="balance" goToTransaction={redirectToTxInfo}>
+ <PopupTemplate path="balance" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<BalancePage
goToWalletManualWithdraw={() => redirectTo(Pages.receiveCash({}))}
goToWalletDeposit={(currency: string) =>
@@ -92,7 +96,7 @@ function ApplicationView(): VNode {
// const [, setDismissed] = useTalerActionURL();
return (
- <PopupTemplate>
+ <PopupTemplate goToURL={redirectToURL}>
<TalerActionFound
url={decodeURIComponent(action)}
onDismiss={() => {
@@ -108,7 +112,7 @@ function ApplicationView(): VNode {
<Route
path={Pages.backup}
component={() => (
- <PopupTemplate path="backup" goToTransaction={redirectToTxInfo}>
+ <PopupTemplate path="backup" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<BackupPage
onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
/>
@@ -118,7 +122,7 @@ function ApplicationView(): VNode {
<Route
path={Pages.backupProviderDetail.pattern}
component={({ pid }: { pid: string }) => (
- <PopupTemplate path="backup">
+ <PopupTemplate path="backup" goToURL={redirectToURL}>
<ProviderDetailPage
onPayProvider={(uri: string) =>
redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
@@ -206,17 +210,16 @@ function PopupTemplate({
path,
children,
goToTransaction,
+ goToURL,
}: {
path?: PopupNavBarOptions;
children: ComponentChildren;
goToTransaction?: (id: string) => Promise<void>;
+ goToURL: (s: string) => void;
}): VNode {
return (
<Fragment>
- {/* <CheckTalerActionComponent /> */}
- {goToTransaction ? (
- <PendingTransactions goToTransaction={goToTransaction} />
- ) : undefined}
+ <PendingTransactions goToTransaction={goToTransaction} goToURL={goToURL} />
<PopupNavBar path={path} />
<PopupBox>
<AlertProvider>{children}</AlertProvider>
diff --git a/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts b/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
index 33c2bc249..04f68e4fa 100644
--- a/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
+++ b/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
@@ -138,13 +138,17 @@ function buildApi(config: Readonly<Info>): API {
*/
function registerProtocolHandler() {
const observer = new MutationObserver(checkForNewAnchors);
- observer.observe(document.body, {
- childList: true,
- subtree: true,
- attributes: false,
+ document.addEventListener("DOMContentLoaded", function (event) {
+ //do work
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ attributes: false,
+ });
+
+ overrideAllAnchor(document.body);
});
- overrideAllAnchor(document.body);
}
return {
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 4c4ba1855..7bd4195ee 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -90,6 +90,10 @@ export function Application(): VNode {
async function redirectToTxInfo(tid: string): Promise<void> {
redirectTo(Pages.balanceTransaction({ tid }));
}
+ function redirectToURL(str: string): void {
+ window.location.href = new URL(str).href
+ }
+
return (
<TranslationProvider source={strings}>
<IoCProviderForRuntime>
@@ -97,7 +101,7 @@ export function Application(): VNode {
<Route
path={Pages.welcome}
component={() => (
- <WalletTemplate>
+ <WalletTemplate goToURL={redirectToURL}>
<WelcomePage />
</WalletTemplate>
)}
@@ -106,7 +110,7 @@ export function Application(): VNode {
<Route
path={Pages.qr}
component={() => (
- <WalletTemplate goToTransaction={redirectToTxInfo}>
+ <WalletTemplate goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<QrReaderPage
onDetected={(talerActionUrl: TalerUri) => {
redirectTo(
@@ -123,7 +127,7 @@ export function Application(): VNode {
<Route
path={Pages.settings}
component={() => (
- <WalletTemplate goToTransaction={redirectToTxInfo}>
+ <WalletTemplate goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<SettingsPage />
</WalletTemplate>
)}
@@ -131,7 +135,7 @@ export function Application(): VNode {
<Route
path={Pages.notifications}
component={() => (
- <WalletTemplate>
+ <WalletTemplate goToURL={redirectToURL}>
<NotificationsPage />
</WalletTemplate>
)}
@@ -142,7 +146,7 @@ export function Application(): VNode {
<Route
path={Pages.settingsExchangeAdd.pattern}
component={() => (
- <WalletTemplate>
+ <WalletTemplate goToURL={redirectToURL}>
<AddExchange onBack={() => redirectTo(Pages.balance)} />
</WalletTemplate>
)}
@@ -151,7 +155,7 @@ export function Application(): VNode {
<Route
path={Pages.balanceHistory.pattern}
component={({ currency }: { currency?: string }) => (
- <WalletTemplate path="balance" goToTransaction={redirectToTxInfo}>
+ <WalletTemplate path="balance" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<HistoryPage
currency={currency}
goToWalletDeposit={(currency: string) =>
@@ -171,7 +175,7 @@ export function Application(): VNode {
<Route
path={Pages.sendCash.pattern}
component={({ amount }: { amount?: string }) => (
- <WalletTemplate path="balance">
+ <WalletTemplate path="balance" goToURL={redirectToURL}>
<DestinationSelectionPage
type="send"
amount={amount}
@@ -188,7 +192,7 @@ export function Application(): VNode {
<Route
path={Pages.receiveCash.pattern}
component={({ amount }: { amount?: string }) => (
- <WalletTemplate path="balance">
+ <WalletTemplate path="balance" goToURL={redirectToURL}>
<DestinationSelectionPage
type="get"
amount={amount}
@@ -206,7 +210,7 @@ export function Application(): VNode {
<Route
path={Pages.balanceTransaction.pattern}
component={({ tid }: { tid: string }) => (
- <WalletTemplate path="balance">
+ <WalletTemplate path="balance" goToURL={redirectToURL}>
<TransactionPage
tid={tid}
goToWalletHistory={(currency?: string) =>
@@ -220,7 +224,7 @@ export function Application(): VNode {
<Route
path={Pages.balanceDeposit.pattern}
component={({ amount }: { amount: string }) => (
- <WalletTemplate path="balance">
+ <WalletTemplate path="balance" goToURL={redirectToURL}>
<DepositPage
amount={amount}
onCancel={(currency: string) => {
@@ -237,7 +241,7 @@ export function Application(): VNode {
<Route
path={Pages.backup}
component={() => (
- <WalletTemplate path="backup" goToTransaction={redirectToTxInfo}>
+ <WalletTemplate path="backup" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<BackupPage
onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
/>
@@ -247,7 +251,7 @@ export function Application(): VNode {
<Route
path={Pages.backupProviderDetail.pattern}
component={({ pid }: { pid: string }) => (
- <WalletTemplate>
+ <WalletTemplate goToURL={redirectToURL}>
<ProviderDetailPage
pid={pid}
onPayProvider={(uri: string) =>
@@ -264,7 +268,7 @@ export function Application(): VNode {
<Route
path={Pages.backupProviderAdd}
component={() => (
- <WalletTemplate>
+ <WalletTemplate goToURL={redirectToURL}>
<AddBackupProviderPage
onPaymentRequired={(uri: string) =>
redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
@@ -284,7 +288,7 @@ export function Application(): VNode {
<Route
path={Pages.dev}
component={() => (
- <WalletTemplate path="dev" goToTransaction={redirectToTxInfo}>
+ <WalletTemplate path="dev" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
<DeveloperPage />
</WalletTemplate>
)}
@@ -595,10 +599,12 @@ function WalletTemplate({
path,
children,
goToTransaction,
+ goToURL,
}: {
path?: WalletNavBarOptions;
children: ComponentChildren;
goToTransaction?: (id: string) => Promise<void>;
+ goToURL: (url: string) => void;
}): VNode {
const online = useIsOnline();
const { i18n } = useTranslationContext();
@@ -611,9 +617,9 @@ function WalletTemplate({
)}
<LogoHeader />
<WalletNavBar path={path} />
- {goToTransaction ? (
- <PendingTransactions goToTransaction={goToTransaction} />
- ) : undefined}
+ <PendingTransactions
+ goToTransaction={goToTransaction}
+ goToURL={goToURL} />
<WalletBox>
<AlertProvider>
<CurrentAlerts />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 076110522..fcedc12f0 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -258,7 +258,7 @@ function TransactionTemplate({
<div>
<i18n.Translate>
Follow this link to the{` `}
- <a href={transaction.kycUrl}>KYC verifier</a>
+ <a rel="noreferrer" target="_bank" href={transaction.kycUrl}>KYC verifier</a>
</i18n.Translate>
</div>
) : (