taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

split wallet,popup .html

Browse Source
This commit is contained in:
Sebastian 2021-06-16 17:01:06 -03:00
parent 562b2cf8d2
commit 86636142a2
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
10 changed files with 298 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/taler-wallet-webextension/rollup.config.js
View File

@ -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,
];

47
packages/taler-wallet-webextension/src/pageEntryPoint.ts
View File

@ -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();
}

154
packages/taler-wallet-webextension/src/pages/popup.tsx
View File

@ -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>
);
}
// 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 Redirect({ to }: { to: string }): null {
useEffect(() => {
route(to, true)
})
return null
}

6
packages/taler-wallet-webextension/src/pages/withdraw.tsx
View File

@ -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 (

128
packages/taler-wallet-webextension/src/popupEntryPoint.tsx Normal file
View File

@ -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
}

2
packages/taler-wallet-webextension/src/renderHtml.tsx
View File

@ -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"

68
packages/taler-wallet-webextension/src/Application.tsx → packages/taler-wallet-webextension/src/walletEntryPoint.tsx
View File

@ -1,16 +1,61 @@
import Router, { route, Route } from "preact-router";
import { createHashHistory } from 'history';
import { useEffect } from "preact/hooks";
/*
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 { 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
}

10
packages/taler-wallet-webextension/src/wxBackend.ts
View File

@ -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,
{

2
packages/taler-wallet-webextension/static/popup.html
View File

@ -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>

15
packages/taler-wallet-webextension/static/wallet.html Normal file
View File

@ -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>