From ddfb40e50cef0abddc7690b23562b1ca5aeb3fdd Mon Sep 17 00:00:00 2001
From: Sebastian
Date: Fri, 25 Mar 2022 16:57:27 -0300
Subject: new dev environment
---
.../taler-wallet-webextension/dev-html/.gitignore | 4 +
.../taler-wallet-webextension/dev-html/index.html | 48 ++++
.../taler-wallet-webextension/dev-html/popup.html | 39 +++
.../taler-wallet-webextension/dev-html/tests.html | 23 ++
.../taler-wallet-webextension/dev-html/wallet.html | 29 +++
.../run-test-in-browser.html | 24 --
.../run-wallet-in-browser.html | 14 --
.../taler-wallet-webextension/serve-esbuild.mjs | 22 ++
.../src/background.dev.ts | 43 ++++
.../taler-wallet-webextension/src/background.ts | 4 +-
.../src/browserWorkerEntry.ts | 12 +-
.../src/components/styled/index.tsx | 2 +-
.../src/hooks/useExtendedPermissions.ts | 35 +--
.../taler-wallet-webextension/src/platform/api.ts | 123 +++++++++-
.../src/platform/chrome.ts | 38 ++-
.../taler-wallet-webextension/src/platform/dev.ts | 159 ++++++++++++
.../src/popup/Application.tsx | 183 ++++++++++++++
.../src/popup/TalerActionFound.tsx | 2 +-
.../src/popupEntryPoint.dev.tsx | 54 +++++
.../src/popupEntryPoint.tsx | 186 ++------------
.../src/svg/chevron-down.svg | 9 +-
.../src/wallet/AddNewActionView.tsx | 2 +-
.../src/wallet/Application.tsx | 263 ++++++++++++++++++++
.../src/wallet/DepositPage.tsx | 3 -
.../src/walletEntryPoint.dev.tsx | 54 +++++
.../src/walletEntryPoint.tsx | 266 ++-------------------
packages/taler-wallet-webextension/src/wxApi.ts | 6 +-
.../taler-wallet-webextension/src/wxBackend.ts | 5 +-
.../taler-wallet-webextension/static/wallet.html | 2 +-
29 files changed, 1106 insertions(+), 548 deletions(-)
create mode 100644 packages/taler-wallet-webextension/dev-html/.gitignore
create mode 100644 packages/taler-wallet-webextension/dev-html/index.html
create mode 100644 packages/taler-wallet-webextension/dev-html/popup.html
create mode 100644 packages/taler-wallet-webextension/dev-html/tests.html
create mode 100644 packages/taler-wallet-webextension/dev-html/wallet.html
delete mode 100644 packages/taler-wallet-webextension/run-test-in-browser.html
delete mode 100644 packages/taler-wallet-webextension/run-wallet-in-browser.html
create mode 100644 packages/taler-wallet-webextension/serve-esbuild.mjs
create mode 100644 packages/taler-wallet-webextension/src/background.dev.ts
create mode 100644 packages/taler-wallet-webextension/src/platform/dev.ts
create mode 100644 packages/taler-wallet-webextension/src/popup/Application.tsx
create mode 100644 packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx
create mode 100644 packages/taler-wallet-webextension/src/wallet/Application.tsx
create mode 100644 packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx
(limited to 'packages/taler-wallet-webextension')
diff --git a/packages/taler-wallet-webextension/dev-html/.gitignore b/packages/taler-wallet-webextension/dev-html/.gitignore
new file mode 100644
index 000000000..c4f051f4f
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/.gitignore
@@ -0,0 +1,4 @@
+/mocha.css
+/mocha.js
+/mocha.js.map
+/manifest.json
diff --git a/packages/taler-wallet-webextension/dev-html/index.html b/packages/taler-wallet-webextension/dev-html/index.html
new file mode 100644
index 000000000..c0919e9b9
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/taler-wallet-webextension/dev-html/popup.html b/packages/taler-wallet-webextension/dev-html/popup.html
new file mode 100644
index 000000000..93a886d54
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/popup.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/taler-wallet-webextension/dev-html/tests.html b/packages/taler-wallet-webextension/dev-html/tests.html
new file mode 100644
index 000000000..4b3ec93b5
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/tests.html
@@ -0,0 +1,23 @@
+
+
+
+ Mocha Tests
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/taler-wallet-webextension/dev-html/wallet.html b/packages/taler-wallet-webextension/dev-html/wallet.html
new file mode 100644
index 000000000..ff8616847
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/wallet.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/taler-wallet-webextension/run-test-in-browser.html b/packages/taler-wallet-webextension/run-test-in-browser.html
deleted file mode 100644
index b027c0716..000000000
--- a/packages/taler-wallet-webextension/run-test-in-browser.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
- Mocha Tests
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/taler-wallet-webextension/run-wallet-in-browser.html b/packages/taler-wallet-webextension/run-wallet-in-browser.html
deleted file mode 100644
index d0ee34ac4..000000000
--- a/packages/taler-wallet-webextension/run-wallet-in-browser.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/taler-wallet-webextension/serve-esbuild.mjs b/packages/taler-wallet-webextension/serve-esbuild.mjs
new file mode 100644
index 000000000..0fa2723ae
--- /dev/null
+++ b/packages/taler-wallet-webextension/serve-esbuild.mjs
@@ -0,0 +1,22 @@
+
+import linaria from '@linaria/esbuild'
+import esbuild from 'esbuild'
+import { buildConfig } from "./build-fast-with-linaria.mjs"
+import fs from 'fs';
+
+fs.writeFileSync("dev-html/manifest.json", fs.readFileSync("manifest-v2.json"))
+fs.writeFileSync("dev-html/mocha.css", fs.readFileSync("node_modules/mocha/mocha.css"))
+fs.writeFileSync("dev-html/mocha.js", fs.readFileSync("node_modules/mocha/mocha.js"))
+fs.writeFileSync("dev-html/mocha.js.map", fs.readFileSync("node_modules/mocha/mocha.js.map"))
+
+const server = await esbuild
+ .serve({
+ servedir: 'dev-html',
+ }, { ...buildConfig, outdir: 'dev-html/dist' })
+ .catch((e) => {
+ console.log(e)
+ process.exit(1)
+ });
+
+console.log("ready!", server.port);
+
diff --git a/packages/taler-wallet-webextension/src/background.dev.ts b/packages/taler-wallet-webextension/src/background.dev.ts
new file mode 100644
index 000000000..1493ec246
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/background.dev.ts
@@ -0,0 +1,43 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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
+ */
+
+/**
+ * Entry point for the background page.
+ *
+ * @author sebasjm
+ */
+
+/**
+ * Imports.
+ */
+import { platform, setupPlatform } from "./platform/api";
+import devAPI from "./platform/dev"
+import { wxMain } from "./wxBackend";
+
+console.log("Wallet setup for Dev API")
+setupPlatform(devAPI)
+
+try {
+ platform.registerOnInstalled(() => {
+ platform.openWalletPage("/welcome")
+ })
+} catch (e) {
+ console.error(e);
+}
+
+platform.notifyWhenAppIsReady(() => {
+ wxMain();
+})
diff --git a/packages/taler-wallet-webextension/src/background.ts b/packages/taler-wallet-webextension/src/background.ts
index 9c572c176..7cda6e9ef 100644
--- a/packages/taler-wallet-webextension/src/background.ts
+++ b/packages/taler-wallet-webextension/src/background.ts
@@ -30,8 +30,8 @@ import { wxMain } from "./wxBackend";
const isFirefox = typeof (window as any)['InstallTrigger'] !== 'undefined'
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
+// FIXME: create different entry point for any platform instead of
+// switching in runtime
if (isFirefox) {
console.log("Wallet setup for Firefox API")
setupPlatform(firefoxAPI)
diff --git a/packages/taler-wallet-webextension/src/browserWorkerEntry.ts b/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
index 4494b9af8..f14e03d75 100644
--- a/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
+++ b/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
@@ -32,7 +32,7 @@ const worker: Worker = self as any as Worker;
async function handleRequest(
operation: string,
id: number,
- args: string[],
+ req: unknown,
): Promise {
const impl = nativeCrypto;
@@ -42,7 +42,7 @@ async function handleRequest(
}
try {
- const result = await (impl as any)[operation](...args);
+ const result = await (impl as any)[operation](req);
worker.postMessage({ result, id });
} catch (e) {
logger.error("error during operation", e);
@@ -51,9 +51,9 @@ async function handleRequest(
}
worker.onmessage = (msg: MessageEvent) => {
- const args = msg.data.args;
- if (!Array.isArray(args)) {
- console.error("args must be array");
+ const req = msg.data.req;
+ if (typeof req !== "object") {
+ console.error("request must be an object");
return;
}
const id = msg.data.id;
@@ -67,7 +67,7 @@ worker.onmessage = (msg: MessageEvent) => {
return;
}
- handleRequest(operation, id, args).catch((e) => {
+ handleRequest(operation, id, req).catch((e) => {
console.error("error in browser worker", e);
});
};
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 13e3189fb..e1b4dd2ac 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -143,7 +143,7 @@ export const Middle = styled.div`
export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
height: 290px;
width: 500px;
- overflow-y: scroll;
+ overflow-y: visible;
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
index 66d710705..a35801741 100644
--- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
@@ -40,41 +40,18 @@ async function handleExtendedPerm(isEnabled: boolean, onChange: (value: boolean)
if (!isEnabled) {
// We set permissions here, since apparently FF wants this to be done
// as the result of an input event ...
- const granted = await platform.getPermissionsApi().request(getReadRequestPermissions());
- console.log("permissions granted:", granted);
- const lastError = platform.getLastError();
- if (lastError) {
+ let granted: boolean;
+ try {
+ granted = await platform.getPermissionsApi().request(getReadRequestPermissions());
+ } catch (lastError) {
console.error("error requesting permissions");
console.error(lastError);
onChange(false);
- return;
+ return
}
- // try {
+ console.log("permissions granted:", granted);
const res = await wxApi.setExtendedPermissions(granted);
onChange(res.newValue);
- // } finally {
- // return
- // }
-
- // return new Promise((res) => {
- // platform.getPermissionsApi().request(getReadRequestPermissions(), async (granted: boolean) => {
- // console.log("permissions granted:", granted);
- // const lastError = getLastError()
- // if (lastError) {
- // console.error("error requesting permissions");
- // console.error(lastError);
- // onChange(false);
- // return;
- // }
- // try {
- // const res = await wxApi.setExtendedPermissions(granted);
- // onChange(res.newValue);
- // } finally {
- // res()
- // }
-
- // });
- // })
}
await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
return
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index 9b4e02ffb..112f9721c 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -38,7 +38,7 @@ export interface CrossBrowserPermissionsApi {
request(p: Permissions): Promise;
remove(p: Permissions): Promise;
- addPermissionsListener(callback: (p: Permissions) => void): void;
+ addPermissionsListener(callback: (p: Permissions, lastError?: string) => void): void;
}
@@ -57,31 +57,132 @@ export interface WalletVersion {
*/
export interface PlatformAPI {
/**
+ * FIXME: should not be needed
+ *
* check if the platform is firefox
*/
isFirefox(): boolean;
+
/**
- *
+ * Permission API for checking and add a listener
*/
getPermissionsApi(): CrossBrowserPermissionsApi;
+
+ /**
+ * Backend API
+ *
+ * Register a callback to be called when the wallet is ready to start
+ * @param callback
+ */
notifyWhenAppIsReady(callback: () => void): void;
- openWalletURIFromPopup(uriType: TalerUriType, talerUri: string): void;
+
+ /**
+ * Popup API
+ *
+ * Used when an TalerURI is found and open up from the popup UI.
+ * Closes the popup and open the URI into the wallet UI.
+ *
+ * @param talerUri
+ */
+ openWalletURIFromPopup(talerUri: string): void;
+
+ /**
+ * Backend API
+ *
+ * Open a page into the wallet UI
+ * @param page
+ */
openWalletPage(page: string): void;
+
+ /**
+ * Popup API
+ *
+ * Open a page into the wallet UI and closed the popup
+ * @param page
+ */
openWalletPageFromPopup(page: string): void;
- setMessageToWalletBackground(operation: string, payload: any): Promise;
- listenToWalletNotifications(listener: (m: any) => void): () => void;
- sendMessageToAllChannels(message: MessageFromBackend): void;
- registerAllIncomingConnections(): void;
- registerOnNewMessage(onNewMessage: (message: any, sender: any, callback: any) => void): void;
- registerReloadOnNewVersion(): void;
+
+ /**
+ * Backend API
+ *
+ * When a tab has been detected to have a Taler action the background process
+ * can use this function to redirect the tab to the wallet UI
+ *
+ * @param tabId
+ * @param page
+ */
redirectTabToWalletPage(tabId: number, page: string): void;
+
+ /**
+ * Get the wallet version from manifest
+ */
getWalletVersion(): WalletVersion;
+
+
+ /**
+ * Backend API
+ */
+ registerAllIncomingConnections(): void;
+ /**
+ * Backend API
+ */
+ registerReloadOnNewVersion(): void;
+ /**
+ * Backend API
+ */
registerTalerHeaderListener(onHeader: (tabId: number, url: string) => void): void;
+ /**
+ * Backend API
+ */
registerOnInstalled(callback: () => void): void;
+
+ /**
+ * Backend API
+ *
+ * Check if background process run as service worker. This is used from the
+ * wallet use different http api and crypto worker.
+ */
useServiceWorkerAsBackgroundProcess(): boolean;
- getLastError(): string | undefined;
- searchForTalerLinks(): string | undefined;
+
+ /**
+ * Popup API
+ *
+ * Read the current tab html and try to find any Taler URI or QR code present.
+ *
+ * @return Taler URI if found
+ */
findTalerUriInActiveTab(): Promise;
+
+ /**
+ * Used from the frontend to send commands to the wallet
+ *
+ * @param operation
+ * @param payload
+ *
+ * @return response from the backend
+ */
+ sendMessageToWalletBackground(operation: string, payload: any): Promise;
+
+ /**
+ * Used from the frontend to receive notifications about new information
+ * @param listener
+ * @return function to unsubscribe the listener
+ */
+ listenToWalletBackground(listener: (message: MessageFromBackend) => void): () => void;
+
+ /**
+ * Use by the wallet backend to receive operations from frontend (popup & wallet)
+ * and send a response back.
+ *
+ * @param onNewMessage
+ */
+ listenToAllChannels(onNewMessage: (message: any, sender: any, sendResponse: (r: CoreApiResponse) => void) => void): void;
+
+ /**
+ * Used by the wallet backend to send notification about new information
+ * @param message
+ */
+ sendMessageToAllChannels(message: MessageFromBackend): void;
}
export let platform: PlatformAPI = undefined as any;
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index dada23c57..91ccc220d 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -14,17 +14,16 @@
TALER; see the file COPYING. If not, see
*/
-import { TalerUriType } from "@gnu-taler/taler-util";
+import { classifyTalerUri, CoreApiResponse, TalerUriType } from "@gnu-taler/taler-util";
import { getReadRequestPermissions } from "../permissions";
import { CrossBrowserPermissionsApi, MessageFromBackend, Permissions, PlatformAPI } from "./api.js";
const api: PlatformAPI = {
isFirefox,
findTalerUriInActiveTab,
- getLastError,
getPermissionsApi,
getWalletVersion,
- listenToWalletNotifications,
+ listenToWalletBackground,
notifyWhenAppIsReady,
openWalletPage,
openWalletPageFromPopup,
@@ -32,12 +31,11 @@ const api: PlatformAPI = {
redirectTabToWalletPage,
registerAllIncomingConnections,
registerOnInstalled,
- registerOnNewMessage,
+ listenToAllChannels,
registerReloadOnNewVersion,
registerTalerHeaderListener,
- searchForTalerLinks,
sendMessageToAllChannels,
- setMessageToWalletBackground,
+ sendMessageToWalletBackground,
useServiceWorkerAsBackgroundProcess
}
@@ -50,7 +48,7 @@ function isFirefox(): boolean {
export function contains(p: Permissions): Promise {
return new Promise((res, rej) => {
chrome.permissions.contains(p, (resp) => {
- const le = getLastError()
+ const le = chrome.runtime.lastError?.message
if (le) {
rej(le)
}
@@ -62,7 +60,7 @@ export function contains(p: Permissions): Promise {
export async function request(p: Permissions): Promise {
return new Promise((res, rej) => {
chrome.permissions.request(p, (resp) => {
- const le = getLastError()
+ const le = chrome.runtime.lastError?.message
if (le) {
rej(le)
}
@@ -74,7 +72,7 @@ export async function request(p: Permissions): Promise {
export async function remove(p: Permissions): Promise {
return new Promise((res, rej) => {
chrome.permissions.remove(p, (resp) => {
- const le = getLastError()
+ const le = chrome.runtime.lastError?.message
if (le) {
rej(le)
}
@@ -83,9 +81,12 @@ export async function remove(p: Permissions): Promise {
})
}
-function addPermissionsListener(callback: (p: Permissions) => void): void {
+function addPermissionsListener(callback: (p: Permissions, lastError?: string) => void): void {
console.log("addPermissionListener is not supported for Firefox");
- chrome.permissions.onAdded.addListener(callback)
+ chrome.permissions.onAdded.addListener((perm: Permissions) => {
+ const lastError = chrome.runtime.lastError?.message;
+ callback(perm, lastError)
+ })
}
function getPermissionsApi(): CrossBrowserPermissionsApi {
@@ -107,7 +108,9 @@ function notifyWhenAppIsReady(callback: () => void) {
}
-function openWalletURIFromPopup(uriType: TalerUriType, talerUri: string) {
+function openWalletURIFromPopup(talerUri: string) {
+ const uriType = classifyTalerUri(talerUri);
+
let url: string | undefined = undefined;
switch (uriType) {
case TalerUriType.TalerWithdraw:
@@ -150,7 +153,7 @@ function openWalletPageFromPopup(page: string) {
);
}
-async function setMessageToWalletBackground(operation: string, payload: any): Promise {
+async function sendMessageToWalletBackground(operation: string, payload: any): Promise {
return new Promise((resolve, reject) => {
chrome.runtime.sendMessage({ operation, payload, id: "(none)" }, (resp) => {
if (chrome.runtime.lastError) {
@@ -164,7 +167,7 @@ async function setMessageToWalletBackground(operation: string, payload: any): Pr
}
let notificationPort: chrome.runtime.Port | undefined;
-function listenToWalletNotifications(listener: (m: any) => void) {
+function listenToWalletBackground(listener: (m: any) => void) {
if (notificationPort === undefined) {
notificationPort = chrome.runtime.connect({ name: "notifications" })
}
@@ -203,7 +206,7 @@ function registerAllIncomingConnections() {
});
}
-function registerOnNewMessage(cb: (message: any, sender: any, callback: any) => void) {
+function listenToAllChannels(cb: (message: any, sender: any, callback: (r: CoreApiResponse) => void) => void) {
chrome.runtime.onMessage.addListener((m, s, c) => {
cb(m, s, c)
@@ -311,11 +314,6 @@ function useServiceWorkerAsBackgroundProcess() {
return chrome.runtime.getManifest().manifest_version === 3
}
-function getLastError() {
- return chrome.runtime.lastError?.message;
-}
-
-
function searchForTalerLinks(): string | undefined {
let found;
found = document.querySelector("a[href^='taler://'")
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts b/packages/taler-wallet-webextension/src/platform/dev.ts
new file mode 100644
index 000000000..a761bb014
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -0,0 +1,159 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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
+ */
+
+import { classifyTalerUri, CoreApiResponse, TalerUriType } from "@gnu-taler/taler-util";
+import { MessageFromBackend, PlatformAPI } from "./api";
+
+const frames = ["popup", "wallet"]
+
+const api: PlatformAPI = ({
+ isFirefox: () => false,
+ findTalerUriInActiveTab: async () => undefined,
+ getPermissionsApi: () => ({
+ addPermissionsListener: () => undefined, contains: async () => true, remove: async () => false, request: async () => false
+ }),
+ getWalletVersion: () => ({
+ version: 'none'
+ }),
+ notifyWhenAppIsReady: (fn: () => void) => {
+ let total = frames.length
+ function waitAndNotify() {
+ total--
+ if (total < 1) {
+ console.log('done')
+ fn()
+ }
+ }
+ frames.forEach(f => {
+ const theFrame = window.frames[f as any]
+ if (theFrame.location.href === 'about:blank') {
+ waitAndNotify()
+ } else {
+ theFrame.addEventListener("load", waitAndNotify)
+ }
+ })
+ },
+
+ openWalletPage: (page: string) => {
+ window.frames['wallet' as any].location = `/wallet.html#${page}`
+ },
+ openWalletPageFromPopup: (page: string) => {
+ window.parent.frames['wallet' as any].location = `/wallet.html#${page}`
+ window.location.href = "about:blank"
+ },
+ openWalletURIFromPopup: (page: string) => {
+ alert('openWalletURIFromPopup not implemented yet')
+ },
+ redirectTabToWalletPage: (tabId: number, page: string) => {
+ alert('redirectTabToWalletPage not implemented yet')
+ },
+
+ registerAllIncomingConnections: () => undefined,
+ registerOnInstalled: (fn: () => void) => fn(),
+ registerReloadOnNewVersion: () => undefined,
+ registerTalerHeaderListener: () => undefined,
+
+ useServiceWorkerAsBackgroundProcess: () => false,
+
+ listenToAllChannels: (fn: (m: any, s: any, c: (r: CoreApiResponse) => void) => void) => {
+ window.addEventListener("message", (event: MessageEvent) => {
+ if (event.data.type !== 'command') return
+ const sender = event.data.header.replyMe
+ fn(event.data.body, sender, (resp: CoreApiResponse) => {
+ if (event.source) {
+ const msg: IframeMessageResponse = {
+ type: "response",
+ header: { responseId: sender },
+ body: resp
+ }
+ window.parent.postMessage(msg)
+ }
+ })
+ })
+ },
+ sendMessageToAllChannels: (message: MessageFromBackend) => {
+ Array.from(window.frames).forEach(w => {
+ try {
+ w.postMessage({
+ header: {}, body: message
+ });
+ } catch (e) {
+ console.error(e)
+ }
+ })
+ },
+ listenToWalletBackground: (onNewMessage: (m: MessageFromBackend) => void) => {
+ function listener(event: MessageEvent) {
+ if (event.data.type !== 'notification') return
+ onNewMessage(event.data.body)
+ }
+ window.parent.addEventListener("message", listener)
+ return () => {
+ window.parent.removeEventListener("message", listener)
+ }
+ },
+ sendMessageToWalletBackground: async (operation: string, payload: any) => {
+ const replyMe = `reply-${Math.floor(Math.random() * 100000)}`
+ const message: IframeMessageCommand = {
+ type: 'command',
+ header: { replyMe },
+ body: { operation, payload, id: "(none)" }
+ }
+ window.parent.postMessage(message)
+
+ return new Promise((res, rej) => {
+ function listener(event: MessageEvent) {
+ if (event.data.type !== "response" || event.data.header.responseId !== replyMe) {
+ return
+ }
+ res(event.data.body)
+ window.parent.removeEventListener("message", listener)
+ }
+ window.parent.addEventListener("message", listener, {
+
+ })
+ })
+
+ },
+})
+
+type IframeMessageType = IframeMessageNotification | IframeMessageResponse | IframeMessageCommand;
+interface IframeMessageNotification {
+ type: "notification";
+ header: {
+ },
+ body: MessageFromBackend
+}
+interface IframeMessageResponse {
+ type: "response";
+ header: {
+ responseId: string;
+ },
+ body: CoreApiResponse
+}
+
+interface IframeMessageCommand {
+ type: "command";
+ header: {
+ replyMe: string;
+ },
+ body: {
+ operation: any, id: string, payload: any
+ }
+}
+
+export default api;
+
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
new file mode 100644
index 000000000..71b2d6c49
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -0,0 +1,183 @@
+/*
+ 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
+ */
+
+/**
+ * Main entry point for extension pages.
+ *
+ * @author sebasjm
+ */
+
+import { createHashHistory } from "history";
+import { Fragment, h, VNode } from "preact";
+import Router, { route, Route } from "preact-router";
+import { Match } from "preact-router/match";
+import { useEffect, useState } from "preact/hooks";
+import PendingTransactions from "../components/PendingTransactions";
+import { PopupBox } from "../components/styled";
+import { DevContextProvider } from "../context/devContext";
+import { IoCProviderForRuntime } from "../context/iocContext";
+import {
+ TranslationProvider,
+ useTranslationContext,
+} from "../context/translation";
+import { useTalerActionURL } from "../hooks/useTalerActionURL";
+import { Pages, PopupNavBar } from "../NavigationBar";
+import { platform } from "../platform/api";
+import { BackupPage } from "../wallet/BackupPage";
+import { ProviderDetailPage } from "../wallet/ProviderDetailPage";
+import { BalancePage } from "./BalancePage";
+import { TalerActionFound } from "./TalerActionFound";
+
+function CheckTalerActionComponent(): VNode {
+ const [talerActionUrl] = useTalerActionURL();
+
+ useEffect(() => {
+ if (talerActionUrl)
+ route(Pages.cta.replace(":action", encodeURIComponent(talerActionUrl)));
+ }, [talerActionUrl]);
+
+ return ;
+}
+
+export function Application(): VNode {
+ const hash_history = createHashHistory();
+ return (
+
+
+ {({ devMode }: { devMode: boolean }) => (
+
+
+ route(Pages.balance_transaction.replace(":tid", txId))
+ }
+ />
+
+ {({ path }: { path: string }) => }
+
+
+
+
+
+ route(
+ Pages.balance_manual_withdraw.replace(":currency?", ""),
+ )
+ }
+ goToWalletDeposit={(currency: string) =>
+ route(Pages.balance_deposit.replace(":currency", currency))
+ }
+ goToWalletHistory={(currency: string) =>
+ route(Pages.balance_history.replace(":currency?", currency))
+ }
+ />
+
+ {
+ setDismissed(true);
+ route(Pages.balance);
+ }}
+ />
+ );
+ }}
+ />
+
+ {
+ route(Pages.backup_provider_add);
+ }}
+ />
+ {
+ route(Pages.backup);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+function RedirectToWalletPage(): VNode {
+ const page = (document.location.hash || "#/").replace("#", "");
+ const [showText, setShowText] = useState(false);
+ useEffect(() => {
+ platform.openWalletPageFromPopup(page);
+ setTimeout(() => {
+ setShowText(true);
+ }, 250);
+ });
+ const { i18n } = useTranslationContext();
+ if (!showText) return ;
+ return (
+
+
+ this popup is being closed and you are being redirected to {page}
+
+
+ );
+}
+
+function Redirect({ to }: { to: string }): null {
+ useEffect(() => {
+ route(to, true);
+ });
+ return null;
+}
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index a1082ad92..2af6526c2 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -34,7 +34,7 @@ export function TalerActionFound({ url, onDismiss }: Props) {
const uriType = classifyTalerUri(url);
const { i18n } = useTranslationContext();
function redirectToWallet() {
- platform.openWalletURIFromPopup(uriType, url);
+ platform.openWalletURIFromPopup(url);
}
return (
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx
new file mode 100644
index 000000000..551b47bfc
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx
@@ -0,0 +1,54 @@
+/*
+ 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
+ */
+
+/**
+ * Main entry point for extension pages.
+ *
+ * @author sebasjm
+ */
+
+import { setupI18n } from "@gnu-taler/taler-util";
+import { Fragment, h, render } from "preact";
+import { strings } from "./i18n/strings";
+import { setupPlatform } from "./platform/api";
+import devAPI from "./platform/dev";
+import { Application } from "./popup/Application";
+
+console.log("Wallet setup for Dev API");
+setupPlatform(devAPI);
+
+function main(): void {
+ try {
+ const container = document.getElementById("container");
+ if (!container) {
+ throw Error("container not found, can't mount page contents");
+ }
+ render(, container);
+ } catch (e) {
+ console.error("got error", e);
+ if (e instanceof Error) {
+ document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`;
+ }
+ }
+}
+
+setupI18n("en", strings);
+
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+} else {
+ main();
+}
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index dfb12666b..d68918f7f 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -21,29 +21,23 @@
*/
import { setupI18n } from "@gnu-taler/taler-util";
-import { createHashHistory } from "history";
-import { Fragment, h, render, VNode } from "preact";
-import Router, { route, Route } from "preact-router";
-import { Match } from "preact-router/match";
-import { useEffect, useState } from "preact/hooks";
-import PendingTransactions from "./components/PendingTransactions";
-import { PopupBox } from "./components/styled";
-import { DevContextProvider } from "./context/devContext";
-import { IoCProviderForRuntime } from "./context/iocContext";
-import {
- TranslationProvider,
- useTranslationContext,
-} from "./context/translation";
-import { useTalerActionURL } from "./hooks/useTalerActionURL";
+import { Fragment, h, render } from "preact";
import { strings } from "./i18n/strings";
-import { Pages, PopupNavBar } from "./NavigationBar";
-import { platform, setupPlatform } from "./platform/api";
+import { setupPlatform } from "./platform/api";
import chromeAPI from "./platform/chrome";
import firefoxAPI from "./platform/firefox";
-import { BalancePage } from "./popup/BalancePage";
-import { TalerActionFound } from "./popup/TalerActionFound";
-import { BackupPage } from "./wallet/BackupPage";
-import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
+import { Application } from "./popup/Application";
+
+//FIXME: create different entry point for any platform instead of
+//switching in runtime
+const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
+if (isFirefox) {
+ console.log("Wallet setup for Firefox API");
+ setupPlatform(firefoxAPI);
+} else {
+ console.log("Wallet setup for Chrome API");
+ setupPlatform(chromeAPI);
+}
function main(): void {
try {
@@ -62,160 +56,8 @@ function main(): void {
setupI18n("en", strings);
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-if (isFirefox) {
- console.log("Wallet setup for Firefox API");
- setupPlatform(firefoxAPI);
-} else {
- console.log("Wallet setup for Chrome API");
- setupPlatform(chromeAPI);
-}
-
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", main);
} else {
main();
}
-
-function CheckTalerActionComponent(): VNode {
- const [talerActionUrl] = useTalerActionURL();
-
- useEffect(() => {
- if (talerActionUrl)
- route(Pages.cta.replace(":action", encodeURIComponent(talerActionUrl)));
- }, [talerActionUrl]);
-
- return ;
-}
-
-function Application(): VNode {
- const hash_history = createHashHistory();
- return (
-
-
- {({ devMode }: { devMode: boolean }) => (
-
-
- route(Pages.balance_transaction.replace(":tid", txId))
- }
- />
-
- {({ path }: { path: string }) => }
-
-
-
-
-
- route(
- Pages.balance_manual_withdraw.replace(":currency?", ""),
- )
- }
- goToWalletDeposit={(currency: string) =>
- route(Pages.balance_deposit.replace(":currency", currency))
- }
- goToWalletHistory={(currency: string) =>
- route(Pages.balance_history.replace(":currency?", currency))
- }
- />
-
- {
- setDismissed(true);
- route(Pages.balance);
- }}
- />
- );
- }}
- />
-
- {
- route(Pages.backup_provider_add);
- }}
- />
- {
- route(Pages.backup);
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- );
-}
-
-function RedirectToWalletPage(): VNode {
- const page = (document.location.hash || "#/").replace("#", "");
- const [showText, setShowText] = useState(false);
- useEffect(() => {
- platform.openWalletPageFromPopup(page);
- setTimeout(() => {
- setShowText(true);
- }, 250);
- });
- const { i18n } = useTranslationContext();
- if (!showText) return ;
- return (
-
-
- this popup is being closed and you are being redirected to {page}
-
-
- );
-}
-
-function Redirect({ to }: { to: string }): null {
- useEffect(() => {
- route(to, true);
- });
- return null;
-}
diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
index 36adbc1c6..0e1c0aeda 100644
--- a/packages/taler-wallet-webextension/src/svg/chevron-down.svg
+++ b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
@@ -1,7 +1,6 @@
-
+
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index bebf036c9..751dbfba7 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -15,7 +15,7 @@ export function AddNewActionView({ onCancel }: Props): VNode {
const { i18n } = useTranslationContext();
function redirectToWallet() {
- platform.openWalletURIFromPopup(uriType, url);
+ platform.openWalletURIFromPopup(url);
}
return (
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
new file mode 100644
index 000000000..2116b500e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -0,0 +1,263 @@
+/*
+ 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
+ */
+
+/**
+ * Main entry point for extension pages.
+ *
+ * @author sebasjm
+ */
+
+import { createHashHistory } from "history";
+import { Fragment, h, VNode } from "preact";
+import Router, { route, Route } from "preact-router";
+import Match from "preact-router/match";
+import { useEffect, useState } from "preact/hooks";
+import { LogoHeader } from "../components/LogoHeader";
+import PendingTransactions from "../components/PendingTransactions";
+import { SuccessBox, WalletBox } from "../components/styled";
+import { DevContextProvider } from "../context/devContext";
+import { IoCProviderForRuntime } from "../context/iocContext";
+import {
+ TranslationProvider,
+ useTranslationContext,
+} from "../context/translation";
+import { PayPage } from "../cta/Pay";
+import { RefundPage } from "../cta/Refund";
+import { TipPage } from "../cta/Tip";
+import { WithdrawPage } from "../cta/Withdraw";
+import { Pages, WalletNavBar } from "../NavigationBar";
+import { DeveloperPage } from "../popup/DeveloperPage";
+import { BackupPage } from "./BackupPage";
+import { DepositPage } from "./DepositPage";
+import { ExchangeAddPage } from "./ExchangeAddPage";
+import { HistoryPage } from "./History";
+import { ManualWithdrawPage } from "./ManualWithdrawPage";
+import { ProviderAddPage } from "./ProviderAddPage";
+import { ProviderDetailPage } from "./ProviderDetailPage";
+import { SettingsPage } from "./Settings";
+import { TransactionPage } from "./Transaction";
+import { WelcomePage } from "./Welcome";
+
+export function Application(): VNode {
+ const [globalNotification, setGlobalNotification] = useState<
+ VNode | undefined
+ >(undefined);
+ const hash_history = createHashHistory();
+ function clearNotification(): void {
+ setGlobalNotification(undefined);
+ }
+ function clearNotificationWhenMovingOut(): void {
+ // const movingOutFromNotification =
+ // globalNotification && e.url !== globalNotification.to;
+ if (globalNotification) {
+ //&& movingOutFromNotification) {
+ setGlobalNotification(undefined);
+ }
+ }
+ const { i18n } = useTranslationContext();
+
+ return (
+
+
+
+ {/* won't work in the first render if is not called first */}
+ {/* https://github.com/preactjs/preact-router/issues/415 */}
+
+
+ {({ path }: { path: string }) => {
+ if (path && path.startsWith("/cta")) return;
+ return (
+
+
+
+
+
+ route(Pages.balance_transaction.replace(":tid", txId))
+ }
+ />
+
+
+ );
+ }}
+
+
+ {globalNotification && (
+
+ {globalNotification}
+
+ )}
+
+
+
+ {/**
+ * BALANCE
+ */}
+
+
+ route(Pages.balance_deposit.replace(":currency", currency))
+ }
+ goToWalletManualWithdraw={(currency?: string) =>
+ route(
+ Pages.balance_manual_withdraw.replace(
+ ":currency?",
+ currency || "",
+ ),
+ )
+ }
+ />
+ {
+ route(
+ Pages.balance_history.replace(":currency?", currency || ""),
+ );
+ }}
+ />
+
+ {
+ route(Pages.balance);
+ }}
+ />
+
+ {
+ route(Pages.balance_history.replace(":currency?", currency));
+ }}
+ onSuccess={(currency: string) => {
+ route(Pages.balance_history.replace(":currency?", currency));
+ setGlobalNotification(
+
+ All done, your transaction is in progress
+ ,
+ );
+ }}
+ />
+ {/**
+ * PENDING
+ */}
+
+
+ {/**
+ * BACKUP
+ */}
+ {
+ route(Pages.backup_provider_add);
+ }}
+ />
+ {
+ route(Pages.backup);
+ }}
+ />
+ {
+ route(Pages.backup);
+ }}
+ />
+
+ {/**
+ * SETTINGS
+ */}
+ {
+ route(Pages.balance);
+ }}
+ />
+
+ {/**
+ * DEV
+ */}
+
+
+
+ {/**
+ * CALL TO ACTION
+ */}
+
+ route(
+ Pages.balance_manual_withdraw.replace(
+ ":currency?",
+ currency || "",
+ ),
+ )
+ }
+ goBack={() => route(Pages.balance)}
+ />
+
+
+
+
+ {/**
+ * NOT FOUND
+ * all redirects should be at the end
+ */}
+
+
+
+
+
+
+
+
+ );
+}
+
+function Redirect({ to }: { to: string }): null {
+ useEffect(() => {
+ console.log("got some wrong route", to);
+ route(to, true);
+ });
+ return null;
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index b420c7ebb..df93b0c4e 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -253,9 +253,6 @@ export function View({
There is no known bank account to send money to
-
- Withdraw
-