split wallet/popup components. created hooks, components, context folder
This commit is contained in:
Sebastian
parent
86636142a2
commit
d58945c830
@ -0,0 +1,76 @@
|
||||
import { useState, useEffect } from "preact/hooks";
|
||||
import { getDiagnostics } from "../wxApi";
|
||||
import { PageLink } from "../renderHtml";
|
||||
import { WalletDiagnostics } from "@gnu-taler/taler-util";
|
||||
import { JSX } from "preact/jsx-runtime";
|
||||
|
||||
|
||||
export function Diagnostics(): JSX.Element | null {
|
||||
const [timedOut, setTimedOut] = useState(false);
|
||||
const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let gotDiagnostics = false;
|
||||
setTimeout(() => {
|
||||
if (!gotDiagnostics) {
|
||||
console.error("timed out");
|
||||
setTimedOut(true);
|
||||
}
|
||||
}, 1000);
|
||||
const doFetch = async (): Promise<void> => {
|
||||
const d = await getDiagnostics();
|
||||
console.log("got diagnostics", d);
|
||||
gotDiagnostics = true;
|
||||
setDiagnostics(d);
|
||||
};
|
||||
console.log("fetching diagnostics");
|
||||
doFetch();
|
||||
}, []);
|
||||
|
||||
if (timedOut) {
|
||||
return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
|
||||
}
|
||||
|
||||
if (diagnostics) {
|
||||
if (diagnostics.errors.length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
borderLeft: "0.5em solid red",
|
||||
paddingLeft: "1em",
|
||||
paddingTop: "0.2em",
|
||||
paddingBottom: "0.2em",
|
||||
}}
|
||||
>
|
||||
<p>Problems detected:</p>
|
||||
<ol>
|
||||
{diagnostics.errors.map((errMsg) => (
|
||||
<li key={errMsg}>{errMsg}</li>
|
||||
))}
|
||||
</ol>
|
||||
{diagnostics.firefoxIdbProblem ? (
|
||||
<p>
|
||||
Please check in your <code>about:config</code> settings that you
|
||||
have IndexedDB enabled (check the preference name{" "}
|
||||
<code>dom.indexedDB.enabled</code>).
|
||||
</p>
|
||||
) : null}
|
||||
{diagnostics.dbOutdated ? (
|
||||
<p>
|
||||
Your wallet database is outdated. Currently automatic migration is
|
||||
not supported. Please go{" "}
|
||||
<PageLink pageName="/reset-required">here</PageLink> to reset
|
||||
the wallet database.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <p>Running diagnostics ...</p>;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2019 Taler Systems SA
|
||||
|
||||
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/>
|
||||
*/
|
||||
|
||||
import { JSX } from "preact/jsx-runtime";
|
||||
|
||||
export function PermissionsCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
checked={enabled}
|
||||
onClick={onToggle}
|
||||
type="checkbox"
|
||||
id="checkbox-perm"
|
||||
style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} />
|
||||
<label
|
||||
htmlFor="checkbox-perm"
|
||||
style={{ marginLeft: "0.5em", fontWeight: "bold" }}
|
||||
>
|
||||
Automatically open wallet based on page content
|
||||
</label>
|
||||
<span
|
||||
style={{
|
||||
color: "#383838",
|
||||
fontSize: "smaller",
|
||||
display: "block",
|
||||
marginLeft: "2em",
|
||||
}}
|
||||
>
|
||||
(Enabling this option below will make using the wallet faster, but
|
||||
requires more permissions from your browser.)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { useState, useEffect } from "preact/hooks";
|
||||
import * as wxApi from "../wxApi";
|
||||
import { handleExtendedPerm } from "../wallet/welcome";
|
||||
|
||||
|
||||
export function useExtendedPermissions(): [boolean, () => void] {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
const toggle = () => {
|
||||
setEnabled(v => !v);
|
||||
handleExtendedPerm(enabled).then(result => {
|
||||
setEnabled(result);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function getExtendedPermValue(): Promise<void> {
|
||||
const res = await wxApi.getExtendedPermissions();
|
||||
setEnabled(res.newValue);
|
||||
}
|
||||
getExtendedPermValue();
|
||||
}, []);
|
||||
return [enabled, toggle];
|
||||
}
|
||||
@ -1,206 +0,0 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2019 Taler Systems SA
|
||||
|
||||
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/>
|
||||
*/
|
||||
|
||||
/**
|
||||
* Welcome page, shown on first installs.
|
||||
*
|
||||
* @author Florian Dold
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from "preact/hooks";
|
||||
import { getDiagnostics } from "../wxApi";
|
||||
import { PageLink } from "../renderHtml";
|
||||
import * as wxApi from "../wxApi";
|
||||
import { getPermissionsApi } from "../compat";
|
||||
import { extendedPermissions } from "../permissions";
|
||||
import { WalletDiagnostics } from "@gnu-taler/taler-util";
|
||||
import { Fragment, JSX } from "preact/jsx-runtime";
|
||||
|
||||
export function Diagnostics(): JSX.Element | null {
|
||||
const [timedOut, setTimedOut] = useState(false);
|
||||
const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let gotDiagnostics = false;
|
||||
setTimeout(() => {
|
||||
if (!gotDiagnostics) {
|
||||
console.error("timed out");
|
||||
setTimedOut(true);
|
||||
}
|
||||
}, 1000);
|
||||
const doFetch = async (): Promise<void> => {
|
||||
const d = await getDiagnostics();
|
||||
console.log("got diagnostics", d);
|
||||
gotDiagnostics = true;
|
||||
setDiagnostics(d);
|
||||
};
|
||||
console.log("fetching diagnostics");
|
||||
doFetch();
|
||||
}, []);
|
||||
|
||||
if (timedOut) {
|
||||
return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
|
||||
}
|
||||
|
||||
if (diagnostics) {
|
||||
if (diagnostics.errors.length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
borderLeft: "0.5em solid red",
|
||||
paddingLeft: "1em",
|
||||
paddingTop: "0.2em",
|
||||
paddingBottom: "0.2em",
|
||||
}}
|
||||
>
|
||||
<p>Problems detected:</p>
|
||||
<ol>
|
||||
{diagnostics.errors.map((errMsg) => (
|
||||
<li key={errMsg}>{errMsg}</li>
|
||||
))}
|
||||
</ol>
|
||||
{diagnostics.firefoxIdbProblem ? (
|
||||
<p>
|
||||
Please check in your <code>about:config</code> settings that you
|
||||
have IndexedDB enabled (check the preference name{" "}
|
||||
<code>dom.indexedDB.enabled</code>).
|
||||
</p>
|
||||
) : null}
|
||||
{diagnostics.dbOutdated ? (
|
||||
<p>
|
||||
Your wallet database is outdated. Currently automatic migration is
|
||||
not supported. Please go{" "}
|
||||
<PageLink pageName="/reset-required">here</PageLink> to reset
|
||||
the wallet database.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <p>Running diagnostics ...</p>;
|
||||
}
|
||||
|
||||
|
||||
async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
|
||||
let nextVal: boolean | undefined;
|
||||
|
||||
if (!isEnabled) {
|
||||
const granted = await new Promise<boolean>((resolve, reject) => {
|
||||
// We set permissions here, since apparently FF wants this to be done
|
||||
// as the result of an input event ...
|
||||
getPermissionsApi().request(extendedPermissions, (granted: boolean) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error("error requesting permissions");
|
||||
console.error(chrome.runtime.lastError);
|
||||
reject(chrome.runtime.lastError);
|
||||
return;
|
||||
}
|
||||
console.log("permissions granted:", granted);
|
||||
resolve(granted);
|
||||
});
|
||||
});
|
||||
const res = await wxApi.setExtendedPermissions(granted);
|
||||
nextVal = res.newValue;
|
||||
} else {
|
||||
const res = await wxApi.setExtendedPermissions(false);
|
||||
nextVal = res.newValue;
|
||||
}
|
||||
console.log("new permissions applied:", nextVal ?? false);
|
||||
return nextVal ?? false
|
||||
}
|
||||
|
||||
export function useExtendedPermissions(): [boolean, () => void] {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
const toggle = () => {
|
||||
setEnabled(v => !v)
|
||||
handleExtendedPerm(enabled).then( result => {
|
||||
setEnabled(result)
|
||||
} )
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
async function getExtendedPermValue(): Promise<void> {
|
||||
const res = await wxApi.getExtendedPermissions();
|
||||
setEnabled(res.newValue);
|
||||
}
|
||||
getExtendedPermValue();
|
||||
},[]);
|
||||
return [enabled, toggle]
|
||||
}
|
||||
|
||||
export function PermissionsCheckbox({enabled, onToggle}: {enabled:boolean, onToggle: () => void}): JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
checked={enabled}
|
||||
onClick={onToggle}
|
||||
type="checkbox"
|
||||
id="checkbox-perm"
|
||||
style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
|
||||
/>
|
||||
<label
|
||||
htmlFor="checkbox-perm"
|
||||
style={{ marginLeft: "0.5em", fontWeight: "bold" }}
|
||||
>
|
||||
Automatically open wallet based on page content
|
||||
</label>
|
||||
<span
|
||||
style={{
|
||||
color: "#383838",
|
||||
fontSize: "smaller",
|
||||
display: "block",
|
||||
marginLeft: "2em",
|
||||
}}
|
||||
>
|
||||
(Enabling this option below will make using the wallet faster, but
|
||||
requires more permissions from your browser.)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Welcome(): JSX.Element {
|
||||
const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
|
||||
return (
|
||||
<>
|
||||
<p>Thank you for installing the wallet.</p>
|
||||
<Diagnostics />
|
||||
<h2>Permissions</h2>
|
||||
<PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/>
|
||||
<h2>Next Steps</h2>
|
||||
<a href="https://demo.taler.net/" style={{ display: "block" }}>
|
||||
Try the demo »
|
||||
</a>
|
||||
<a href="https://demo.taler.net/" style={{ display: "block" }}>
|
||||
Learn how to top up your wallet balance »
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated to be removed
|
||||
*/
|
||||
export function createWelcomePage(): JSX.Element {
|
||||
return <Welcome />;
|
||||
}
|
||||
@ -41,12 +41,13 @@ import {
|
||||
} from "@gnu-taler/taler-util";
|
||||
import { format } from "date-fns";
|
||||
import { Component, ComponentChildren, Fragment, JSX } from "preact";
|
||||
import { route, Route, Router } from 'preact-router';
|
||||
import { Match } from 'preact-router/match';
|
||||
import { route } from 'preact-router';
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { Diagnostics } from "../components/Diagnostics";
|
||||
import { PermissionsCheckbox } from "../components/PermissionsCheckbox";
|
||||
import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
|
||||
import { PageLink, renderAmount } from "../renderHtml";
|
||||
import * as wxApi from "../wxApi";
|
||||
import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from "./welcome";
|
||||
|
||||
export enum Pages {
|
||||
balance = '/balance',
|
||||
@ -27,7 +27,7 @@ import { useEffect, useState } from "preact/hooks";
|
||||
import {
|
||||
actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory,
|
||||
WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView
|
||||
} from "./pages/popup";
|
||||
} from "./popup/popup";
|
||||
import Match from "preact-router/match";
|
||||
import Router, { route, Route } from "preact-router";
|
||||
// import { Application } from "./Application";
|
||||
|
||||
83
packages/taler-wallet-webextension/src/wallet/welcome.tsx
Normal file
83
packages/taler-wallet-webextension/src/wallet/welcome.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2019 Taler Systems SA
|
||||
|
||||
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/>
|
||||
*/
|
||||
|
||||
/**
|
||||
* Welcome page, shown on first installs.
|
||||
*
|
||||
* @author Florian Dold
|
||||
*/
|
||||
|
||||
import * as wxApi from "../wxApi";
|
||||
import { getPermissionsApi } from "../compat";
|
||||
import { extendedPermissions } from "../permissions";
|
||||
import { Fragment, JSX } from "preact/jsx-runtime";
|
||||
import { PermissionsCheckbox } from "../components/PermissionsCheckbox";
|
||||
import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
|
||||
import { Diagnostics } from "../components/Diagnostics";
|
||||
|
||||
export async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
|
||||
let nextVal: boolean | undefined;
|
||||
|
||||
if (!isEnabled) {
|
||||
const granted = await new Promise<boolean>((resolve, reject) => {
|
||||
// We set permissions here, since apparently FF wants this to be done
|
||||
// as the result of an input event ...
|
||||
getPermissionsApi().request(extendedPermissions, (granted: boolean) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error("error requesting permissions");
|
||||
console.error(chrome.runtime.lastError);
|
||||
reject(chrome.runtime.lastError);
|
||||
return;
|
||||
}
|
||||
console.log("permissions granted:", granted);
|
||||
resolve(granted);
|
||||
});
|
||||
});
|
||||
const res = await wxApi.setExtendedPermissions(granted);
|
||||
nextVal = res.newValue;
|
||||
} else {
|
||||
const res = await wxApi.setExtendedPermissions(false);
|
||||
nextVal = res.newValue;
|
||||
}
|
||||
console.log("new permissions applied:", nextVal ?? false);
|
||||
return nextVal ?? false
|
||||
}
|
||||
|
||||
export function Welcome(): JSX.Element {
|
||||
const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
|
||||
return (
|
||||
<>
|
||||
<p>Thank you for installing the wallet.</p>
|
||||
<Diagnostics />
|
||||
<h2>Permissions</h2>
|
||||
<PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/>
|
||||
<h2>Next Steps</h2>
|
||||
<a href="https://demo.taler.net/" style={{ display: "block" }}>
|
||||
Try the demo »
|
||||
</a>
|
||||
<a href="https://demo.taler.net/" style={{ display: "block" }}>
|
||||
Learn how to top up your wallet balance »
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated to be removed
|
||||
*/
|
||||
export function createWelcomePage(): JSX.Element {
|
||||
return <Welcome />;
|
||||
}
|
||||
@ -25,11 +25,11 @@ import { setupI18n } from "@gnu-taler/taler-util";
|
||||
import { strings } from "./i18n/strings";
|
||||
import { createHashHistory } from 'history';
|
||||
|
||||
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 { WithdrawalDialog } from "./wallet/withdraw";
|
||||
import { Welcome } from "./wallet/welcome";
|
||||
import { TalerPayDialog } from "./wallet/pay";
|
||||
import { RefundStatusView } from "./wallet/refund";
|
||||
import { TalerTipDialog } from './wallet/tip';
|
||||
import Router, { route, Route } from "preact-router";
|
||||
|
||||
|
||||
@ -64,7 +64,6 @@ enum Pages {
|
||||
return_coins = '/return-coins',
|
||||
tips = '/tips',
|
||||
withdraw = '/withdraw',
|
||||
// popup = '/popup/:rest*',
|
||||
}
|
||||
|
||||
function Application() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user