From ddfb40e50cef0abddc7690b23562b1ca5aeb3fdd Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 25 Mar 2022 16:57:27 -0300 Subject: [PATCH] new dev environment --- .../dev-html/.gitignore | 4 + .../dev-html/index.html | 48 ++++ .../dev-html/popup.html | 39 +++ .../tests.html} | 9 +- .../dev-html/wallet.html | 29 ++ .../run-wallet-in-browser.html | 14 - .../serve-esbuild.mjs | 22 ++ .../src/background.dev.ts | 43 +++ .../src/background.ts | 4 +- .../src/browserWorkerEntry.ts | 12 +- .../src/components/styled/index.tsx | 2 +- .../src/hooks/useExtendedPermissions.ts | 35 +-- .../src/platform/api.ts | 123 +++++++- .../src/platform/chrome.ts | 38 ++- .../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 +----------------- .../taler-wallet-webextension/src/wxApi.ts | 6 +- .../src/wxBackend.ts | 5 +- .../static/wallet.html | 2 +- 28 files changed, 1087 insertions(+), 529 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 rename packages/taler-wallet-webextension/{run-test-in-browser.html => dev-html/tests.html} (57%) create mode 100644 packages/taler-wallet-webextension/dev-html/wallet.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 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/run-test-in-browser.html b/packages/taler-wallet-webextension/dev-html/tests.html similarity index 57% rename from packages/taler-wallet-webextension/run-test-in-browser.html rename to packages/taler-wallet-webextension/dev-html/tests.html index b027c0716..4b3ec93b5 100644 --- a/packages/taler-wallet-webextension/run-test-in-browser.html +++ b/packages/taler-wallet-webextension/dev-html/tests.html @@ -2,19 +2,18 @@ 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 -