diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
| -rw-r--r-- | packages/taler-wallet-webextension/rollup.config.js | 22 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/pageEntryPoint.ts | 47 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/pages/popup.tsx | 154 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/pages/withdraw.tsx | 6 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/popupEntryPoint.tsx | 128 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/renderHtml.tsx | 2 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/walletEntryPoint.tsx (renamed from packages/taler-wallet-webextension/src/Application.tsx) | 66 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/wxBackend.ts | 10 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/static/popup.html | 2 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/static/wallet.html | 15 |
10 files changed, 297 insertions, 155 deletions
diff --git a/packages/taler-wallet-webextension/rollup.config.js b/packages/taler-wallet-webextension/rollup.config.js index 30ca82a0b..c5bb936cf 100644 --- a/packages/taler-wallet-webextension/rollup.config.js +++ b/packages/taler-wallet-webextension/rollup.config.js @@ -32,13 +32,24 @@ const makePlugins = () => [ ]; -const webExtensionPageEntryPoint = { - input: "lib/pageEntryPoint.js", +const webExtensionWalletEntryPoint = { + input: "lib/walletEntryPoint.js", output: { - file: "dist/pageEntryPoint.js", + file: "dist/walletEntryPoint.js", format: "iife", exports: "none", - name: "webExtensionPageEntry", + name: "webExtensionWalletEntry", + }, + plugins: makePlugins(), +}; + +const webExtensionPopupEntryPoint = { + input: "lib/popupEntryPoint.js", + output: { + file: "dist/popupEntryPoint.js", + format: "iife", + exports: "none", + name: "webExtensionPopupEntry", }, plugins: makePlugins(), }; @@ -66,7 +77,8 @@ const webExtensionCryptoWorker = { }; export default [ - webExtensionPageEntryPoint, + webExtensionPopupEntryPoint, + webExtensionWalletEntryPoint, webExtensionBackgroundPageScript, webExtensionCryptoWorker, ]; diff --git a/packages/taler-wallet-webextension/src/pageEntryPoint.ts b/packages/taler-wallet-webextension/src/pageEntryPoint.ts deleted file mode 100644 index 505b32d71..000000000 --- a/packages/taler-wallet-webextension/src/pageEntryPoint.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 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/> - */ - -/** - * Main entry point for extension pages. - * - * @author Florian Dold <dold@taler.net> - */ - -import { render } from "preact"; -import { setupI18n } from "@gnu-taler/taler-util"; -import { strings } from "./i18n/strings"; -import { Application } from "./Application"; - -function main(): void { - try { - const container = document.getElementById("container"); - if (!container) { - throw Error("container not found, can't mount page contents"); - } - render(Application(), container); - } catch (e) { - console.error("got error", e); - document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; - } -} - -setupI18n("en-US", strings); - -if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", main); -} else { - main(); -} diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx index d6c03e074..7759b1819 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/pages/popup.tsx @@ -48,6 +48,14 @@ import { PageLink, renderAmount } from "../renderHtml"; import * as wxApi from "../wxApi"; import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from "./welcome"; +export enum Pages { + balance = '/balance', + settings = '/settings', + debug = '/debug', + history = '/history', + transaction = '/transaction/:tid', +} + interface TabProps { target: string; current?: string; @@ -66,13 +74,13 @@ function Tab(props: TabProps): JSX.Element { ); } -function WalletNavBar({ current }: { current?: string }) { +export function WalletNavBar({ current }: { current?: string }) { return ( <div className="nav" id="header"> - <Tab target="/popup/balance" current={current}>{i18n.str`Balance`}</Tab> - <Tab target="/popup/history" current={current}>{i18n.str`History`}</Tab> - <Tab target="/popup/settings" current={current}>{i18n.str`Settings`}</Tab> - <Tab target="/popup/debug" current={current}>{i18n.str`Debug`}</Tab> + <Tab target="/balance" current={current}>{i18n.str`Balance`}</Tab> + <Tab target="/history" current={current}>{i18n.str`History`}</Tab> + <Tab target="/settings" current={current}>{i18n.str`Settings`}</Tab> + <Tab target="/debug" current={current}>{i18n.str`Debug`}</Tab> </div> ); } @@ -99,7 +107,7 @@ function EmptyBalanceView(): JSX.Element { ); } -class WalletBalanceView extends Component<any, any> { +export class WalletBalanceView extends Component<any, any> { private balance?: BalancesResponse; private gotError = false; private canceler: (() => void) | undefined = undefined; @@ -400,7 +408,7 @@ function TransactionItem(props: { tx: Transaction }): JSX.Element { } } -function WalletHistory(props: any): JSX.Element { +export function WalletHistory(props: any): JSX.Element { const [transactions, setTransactions] = useState< TransactionsResponse | undefined >(undefined); @@ -707,7 +715,7 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT return <div></div> } -function WalletTransaction({ tid }: { tid: string }): JSX.Element { +export function WalletTransaction({ tid }: { tid: string }): JSX.Element { const [transaction, setTransaction] = useState< Transaction | undefined >(undefined); @@ -732,7 +740,7 @@ function WalletTransaction({ tid }: { tid: string }): JSX.Element { /> } -function WalletSettings() { +export function WalletSettings() { const [permissionsEnabled, togglePermissions] = useExtendedPermissions() return ( <div> @@ -799,7 +807,7 @@ async function confirmReset(): Promise<void> { } } -function WalletDebug(props: any): JSX.Element { +export function WalletDebug(props: any): JSX.Element { return ( <div> <p>Debug tools:</p> @@ -845,23 +853,23 @@ function makeExtensionUrlWithParams( return innerUrl.href; } -function actionForTalerUri(talerUri: string): string | undefined { +export function actionForTalerUri(talerUri: string): string | undefined { const uriType = classifyTalerUri(talerUri); switch (uriType) { case TalerUriType.TalerWithdraw: - return makeExtensionUrlWithParams("static/popup.html#/withdraw", { + return makeExtensionUrlWithParams("static/wallet.html#/withdraw", { talerWithdrawUri: talerUri, }); case TalerUriType.TalerPay: - return makeExtensionUrlWithParams("static/popup.html#/pay", { + return makeExtensionUrlWithParams("static/wallet.html#/pay", { talerPayUri: talerUri, }); case TalerUriType.TalerTip: - return makeExtensionUrlWithParams("static/popup.html#/tip", { + return makeExtensionUrlWithParams("static/wallet.html#/tip", { talerTipUri: talerUri, }); case TalerUriType.TalerRefund: - return makeExtensionUrlWithParams("static/popup.html#/refund", { + return makeExtensionUrlWithParams("static/wallet.html#/refund", { talerRefundUri: talerUri, }); case TalerUriType.TalerNotifyReserve: @@ -876,7 +884,7 @@ function actionForTalerUri(talerUri: string): string | undefined { return undefined; } -async function findTalerUriInActiveTab(): Promise<string | undefined> { +export async function findTalerUriInActiveTab(): Promise<string | undefined> { return new Promise((resolve, reject) => { chrome.tabs.executeScript( { @@ -901,68 +909,54 @@ async function findTalerUriInActiveTab(): Promise<string | undefined> { }); } -export function WalletPopup(): JSX.Element { - const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( - undefined, - ); - const [dismissed, setDismissed] = useState(false); - useEffect(() => { - async function check(): Promise<void> { - const talerUri = await findTalerUriInActiveTab(); - if (talerUri) { - const actionUrl = actionForTalerUri(talerUri); - setTalerActionUrl(actionUrl); - } - } - check(); - }, []); - if (talerActionUrl && !dismissed) { - return ( - <div style={{ padding: "1em", width: 400 }}> - <h1>Taler Action</h1> - <p>This page has a Taler action. </p> - <p> - <button - onClick={() => { - window.open(talerActionUrl, "_blank"); - }} - > - Open - </button> - </p> - <p> - <button onClick={() => setDismissed(true)}>Dismiss</button> - </p> - </div> - ); - } - return ( - <div> - <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match> - <div style={{ margin: "1em", width: 400 }}> - <Router> - <Route path={Pages.balance} component={WalletBalanceView} /> - <Route path={Pages.settings} component={WalletSettings} /> - <Route path={Pages.debug} component={WalletDebug} /> - <Route path={Pages.history} component={WalletHistory} /> - <Route path={Pages.transaction} component={WalletTransaction} /> - </Router> - </div> - </div> - ); -} - -enum Pages { - balance = '/popup/balance', - transaction = '/popup/transaction/:tid', - settings = '/popup/settings', - debug = '/popup/debug', - history = '/popup/history', -} +// export function WalletPopup(): JSX.Element { +// const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( +// undefined, +// ); +// const [dismissed, setDismissed] = useState(false); +// useEffect(() => { +// async function check(): Promise<void> { +// const talerUri = await findTalerUriInActiveTab(); +// if (talerUri) { +// const actionUrl = actionForTalerUri(talerUri); +// setTalerActionUrl(actionUrl); +// } +// } +// check(); +// }, []); +// if (talerActionUrl && !dismissed) { +// return ( +// <div style={{ padding: "1em", width: 400 }}> +// <h1>Taler Action</h1> +// <p>This page has a Taler action. </p> +// <p> +// <button +// onClick={() => { +// window.open(talerActionUrl, "_blank"); +// }} +// > +// Open +// </button> +// </p> +// <p> +// <button onClick={() => setDismissed(true)}>Dismiss</button> +// </p> +// </div> +// ); +// } +// return ( +// <div> +// <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match> +// <div style={{ margin: "1em", width: 400 }}> +// <Router> +// <Route path={Pages.balance} component={WalletBalanceView} /> +// <Route path={Pages.settings} component={WalletSettings} /> +// <Route path={Pages.debug} component={WalletDebug} /> +// <Route path={Pages.history} component={WalletHistory} /> +// <Route path={Pages.transaction} component={WalletTransaction} /> +// </Router> +// </div> +// </div> +// ); +// } -export function Redirect({ to }: { to: string }): null { - useEffect(() => { - route(to, true) - }) - return null -} diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.tsx index e0b7ccdc9..cb96fa4df 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/pages/withdraw.tsx @@ -48,6 +48,10 @@ export interface ViewProps { }; export function View({ talerWithdrawUri, details, cancelled, selectedExchange, accept, setCancelled, setSelecting }: ViewProps) { + const [state, setState] = useState(1) + setTimeout(() => { + setState(s => s + 1) + }, 1000); if (!talerWithdrawUri) { return <span><i18n.Translate>missing withdraw uri</i18n.Translate></span>; } @@ -57,7 +61,7 @@ export function View({ talerWithdrawUri, details, cancelled, selectedExchange, a } if (cancelled) { - return <span><i18n.Translate>Withdraw operation has been cancelled.</i18n.Translate></span>; + return <span><i18n.Translate>Withdraw operation has been cancelled.{state}</i18n.Translate></span>; } return ( diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx new file mode 100644 index 000000000..0ef5a4896 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -0,0 +1,128 @@ +/* + This file is part of GNU Taler + (C) 2020 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/> + */ + +/** + * Main entry point for extension pages. + * + * @author Florian Dold <dold@taler.net> + */ + +import { render } from "preact"; +import { setupI18n } from "@gnu-taler/taler-util"; +import { strings } from "./i18n/strings"; +import { useEffect, useState } from "preact/hooks"; +import { + actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory, + WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView +} from "./pages/popup"; +import Match from "preact-router/match"; +import Router, { route, Route } from "preact-router"; +// import { Application } from "./Application"; + +function main(): void { + try { + const container = document.getElementById("container"); + if (!container) { + throw Error("container not found, can't mount page contents"); + } + render(<Application />, container); + } catch (e) { + console.error("got error", e); + document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; + } +} + +setupI18n("en-US", strings); + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", main); +} else { + main(); +} + +function useTalerActionURL(): [string | undefined, (s: boolean) => void] { + const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( + undefined, + ); + const [dismissed, setDismissed] = useState(false); + useEffect(() => { + async function check(): Promise<void> { + const talerUri = await findTalerUriInActiveTab(); + if (talerUri) { + const actionUrl = actionForTalerUri(talerUri); + setTalerActionUrl(actionUrl); + } + } + check(); + }, []); + const url = dismissed ? undefined : talerActionUrl + return [url, setDismissed] +} + +interface Props { + url: string; + onDismiss: (s: boolean) => void; +} + +function TalerActionFound({ url, onDismiss }: Props) { + return <div style={{ padding: "1em", width: 400 }}> + <h1>Taler Action </h1> + <p>This page has a Taler action.</p> + <p> + <button onClick={() => { window.open(url, "_blank"); }}> + Open + </button> + </p> + <p> + <button onClick={() => onDismiss(true)}> Dismiss </button> + </p> + </div> + +} + +function Application() { + const [talerActionUrl, setDismissed] = useTalerActionURL() + + if (talerActionUrl) { + return <TalerActionFound url={talerActionUrl} onDismiss={setDismissed} /> + } + + return ( + <div> + <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match > + <div style={{ margin: "1em", width: 400 }}> + <Router> + <Route path={Pages.balance} component={WalletBalanceView} /> + <Route path={Pages.settings} component={WalletSettings} /> + <Route path={Pages.debug} component={WalletDebug} /> + <Route path={Pages.history} component={WalletHistory} /> + <Route path={Pages.transaction} component={WalletTransaction} /> + <Route default component={Redirect} to={Pages.balance} /> + </Router> + </div> + </div> + ); +} + + + + +function Redirect({ to }: { to: string }): null { + useEffect(() => { + route(to, true) + }) + return null +}
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx b/packages/taler-wallet-webextension/src/renderHtml.tsx index 2fde6f537..353a4eb85 100644 --- a/packages/taler-wallet-webextension/src/renderHtml.tsx +++ b/packages/taler-wallet-webextension/src/renderHtml.tsx @@ -167,7 +167,7 @@ export function ProgressButton({isLoading, ...rest}: LoadingButtonProps): JSX.El export function PageLink( props: { pageName: string, children?: ComponentChildren }, ): JSX.Element { - const url = chrome.extension.getURL(`/static/popup.html#/${props.pageName}`); + const url = chrome.extension.getURL(`/static/wallet.html#/${props.pageName}`); return ( <a className="actionLink" diff --git a/packages/taler-wallet-webextension/src/Application.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index 6e10786d2..607c87d39 100644 --- a/packages/taler-wallet-webextension/src/Application.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -1,16 +1,61 @@ -import Router, { route, Route } from "preact-router"; +/* + This file is part of GNU Taler + (C) 2020 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/> + */ + +/** + * Main entry point for extension pages. + * + * @author Florian Dold <dold@taler.net> + */ + +import { render } from "preact"; +import { setupI18n } from "@gnu-taler/taler-util"; +import { strings } from "./i18n/strings"; import { createHashHistory } from 'history'; -import { useEffect } from "preact/hooks"; -import { WalletPopup } from "./pages/popup"; import { WithdrawalDialog } from "./pages/withdraw"; import { Welcome } from "./pages/welcome"; import { TalerPayDialog } from "./pages/pay"; import { RefundStatusView } from "./pages/refund"; import { TalerTipDialog } from './pages/tip'; +import Router, { route, Route } from "preact-router"; -export enum Pages { +function main(): void { + try { + const container = document.getElementById("container"); + if (!container) { + throw Error("container not found, can't mount page contents"); + } + render(<Application />, container); + } catch (e) { + console.error("got error", e); + document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; + } +} + +setupI18n("en-US", strings); + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", main); +} else { + main(); +} + + +enum Pages { welcome = '/welcome', pay = '/pay', payback = '/payback', @@ -19,16 +64,15 @@ export enum Pages { return_coins = '/return-coins', tips = '/tips', withdraw = '/withdraw', - popup = '/popup/:rest*', + // popup = '/popup/:rest*', } -export function Application() { +function Application() { const sp = new URL(document.location.href).searchParams const queryParams: any = {} sp.forEach((v, k) => { queryParams[k] = v; }); return <Router history={createHashHistory()} > - <Route path={Pages.popup} component={WalletPopup} /> <Route path={Pages.welcome} component={() => { return <section id="main"> @@ -87,13 +131,5 @@ export function Application() { <Route path={Pages.payback} component={() => <div>no yet implemented</div>} /> <Route path={Pages.return_coins} component={() => <div>no yet implemented</div>} /> - <Route default component={Redirect} to='/popup/balance' /> </Router> } - -export function Redirect({ to }: { to: string }): null { - useEffect(() => { - route(to, true) - }) - return null -} diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts index cbcbf5e0b..9c01f4c0c 100644 --- a/packages/taler-wallet-webextension/src/wxBackend.ts +++ b/packages/taler-wallet-webextension/src/wxBackend.ts @@ -285,7 +285,7 @@ try { chrome.runtime.onInstalled.addListener((details) => { console.log("onInstalled with reason", details.reason); if (details.reason === "install") { - const url = chrome.extension.getURL("/static/popup.html#/welcome"); + const url = chrome.extension.getURL("/static/wallet.html#/welcome"); chrome.tabs.create({ active: true, url: url }); } }); @@ -320,7 +320,7 @@ function headerListener( switch (uriType) { case TalerUriType.TalerWithdraw: return makeSyncWalletRedirect( - "/static/popup.html#/withdraw", + "/static/wallet.html#/withdraw", details.tabId, details.url, { @@ -329,7 +329,7 @@ function headerListener( ); case TalerUriType.TalerPay: return makeSyncWalletRedirect( - "/static/popup.html#/pay", + "/static/wallet.html#/pay", details.tabId, details.url, { @@ -338,7 +338,7 @@ function headerListener( ); case TalerUriType.TalerTip: return makeSyncWalletRedirect( - "/static/popup.html#/tip", + "/static/wallet.html#/tip", details.tabId, details.url, { @@ -347,7 +347,7 @@ function headerListener( ); case TalerUriType.TalerRefund: return makeSyncWalletRedirect( - "/static/popup.html#/refund", + "/static/wallet.html#/refund", details.tabId, details.url, { diff --git a/packages/taler-wallet-webextension/static/popup.html b/packages/taler-wallet-webextension/static/popup.html index 024a0d182..b670faacb 100644 --- a/packages/taler-wallet-webextension/static/popup.html +++ b/packages/taler-wallet-webextension/static/popup.html @@ -6,7 +6,7 @@ <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> <link rel="stylesheet" type="text/css" href="/static/style/popup.css" /> <link rel="icon" href="/static/img/icon.png" /> - <script src="/dist/pageEntryPoint.js"></script> + <script src="/dist/popupEntryPoint.js"></script> </head> <body> diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html new file mode 100644 index 000000000..c66913c42 --- /dev/null +++ b/packages/taler-wallet-webextension/static/wallet.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> + <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> + <link rel="stylesheet" type="text/css" href="/static/style/popup.css" /> + <link rel="icon" href="/static/img/icon.png" /> + <script src="/dist/walletEntryPoint.js"></script> + </head> + + <body> + <div id="container" style="margin: 0; padding: 0;"></div> + </body> +</html> |