diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
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> ) : ( |