[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: storybook like page for dev,
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: storybook like page for dev, plus some style fixes |
|
Date: |
Mon, 28 Mar 2022 19:36:24 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 1d856629 storybook like page for dev, plus some style fixes
1d856629 is described below
commit 1d85662946c393ea6985c178842be40d38fc687d
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Mar 28 14:03:59 2022 -0300
storybook like page for dev, plus some style fixes
---
.../build-fast-with-linaria.mjs | 1 +
.../taler-wallet-webextension/dev-html/index.html | 34 ++-
.../dev-html/stories.html | 11 +
.../src/components/MultiActionButton.tsx | 9 +-
.../src/components/styled/index.tsx | 13 +-
.../taler-wallet-webextension/src/cta/Deposit.tsx | 13 +-
packages/taler-wallet-webextension/src/cta/Pay.tsx | 11 +-
.../taler-wallet-webextension/src/cta/Refund.tsx | 7 +-
packages/taler-wallet-webextension/src/cta/Tip.tsx | 3 +-
.../taler-wallet-webextension/src/cta/Withdraw.tsx | 5 +-
.../src/hooks/useExtendedPermissions.ts | 3 +-
.../src/popup/TalerActionFound.tsx | 6 +-
.../src/popup/index.stories.tsx | 4 +-
packages/taler-wallet-webextension/src/stories.tsx | 322 +++++++++++++++++++++
.../src/wallet/Application.tsx | 2 +-
.../src/wallet/CreateManualWithdraw.tsx | 14 +-
.../src/wallet/DepositPage.tsx | 5 +-
.../{popup => wallet}/DeveloperPage.stories.tsx | 0
.../src/{popup => wallet}/DeveloperPage.tsx | 3 -
.../src/wallet/ExchangeAddConfirm.tsx | 11 +-
.../src/wallet/ExchangeSetUrl.tsx | 10 +-
.../src/wallet/ProviderAddPage.tsx | 18 +-
.../src/wallet/ReserveCreated.tsx | 6 +-
.../src/wallet/Settings.tsx | 15 +-
.../src/wallet/Transaction.tsx | 50 ++--
.../src/wallet/Welcome.tsx | 13 +-
.../src/wallet/index.stories.tsx | 19 +-
27 files changed, 514 insertions(+), 94 deletions(-)
diff --git a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
index a34b4ff4..9cc776e0 100644
--- a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
+++ b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
@@ -40,6 +40,7 @@ const entryPoints = [
'src/walletEntryPoint.tsx',
'src/walletEntryPoint.dev.tsx',
'src/background.ts',
+ 'src/stories.tsx',
'src/background.dev.ts',
'src/browserWorkerEntry.ts'
]
diff --git a/packages/taler-wallet-webextension/dev-html/index.html
b/packages/taler-wallet-webextension/dev-html/index.html
index d141faa2..4b7fe34e 100644
--- a/packages/taler-wallet-webextension/dev-html/index.html
+++ b/packages/taler-wallet-webextension/dev-html/index.html
@@ -14,28 +14,45 @@
function closeWallet() {
window.frames["wallet"].location = "about:blank";
}
+ function openPage() {
+ window.frames["other"].location =
+ document.getElementById("page-url").value;
+ }
</script>
- <input type="text" />
- <button value="asd" onclick="openPopup()">open popup</button>
- <button value="asd" onclick="closeWallet();openWallet()">
- reload wallet page
- </button>
+ <input id="page-url" type="text" />
+ <button onclick="openPage()">open</button>
+ <a
+ href='javascript:void(window.frames["other"].location =
"http://bank.taler:5882";)'
+ >open local bank</a
+ >
<hr />
+ <iframe
+ id="other-window"
+ name="other"
+ src="http://bank.taler:5882";
+ width="100%"
+ height="325"
+ >
+ </iframe>
+ <hr />
+ <button value="asd" onclick="openPopup()">open popup</button><br />
<iframe
id="popup-window"
name="popup"
src="about:blank"
- name="popup"
width="500"
height="325"
>
</iframe>
<hr />
+ <button value="asd" onclick="closeWallet();openWallet()">
+ reload wallet page
+ </button>
+ <br />
<iframe
id="wallet-window"
name="wallet"
src="/wallet.html"
- name="wallet"
width="800"
height="100%"
>
@@ -43,6 +60,9 @@
<hr />
<iframe src="/tests.html" name="wallet" width="800" height="100%">
</iframe>
<hr />
+ <iframe src="/stories.html" name="wallet" width="800" height="100%">
+ </iframe>
+ <hr />
<script src="/dist/background.dev.js"></script>
</body>
</html>
diff --git a/packages/taler-wallet-webextension/dev-html/stories.html
b/packages/taler-wallet-webextension/dev-html/stories.html
new file mode 100644
index 00000000..1a726e18
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/stories.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Stories</title>
+ <link rel="stylesheet" type="text/css" href="/dist/stories.css" />
+ <script src="/dist/stories.js"></script>
+ </head>
+ <body>
+ <taler-stories id="container"></taler-stories>
+ </body>
+</html>
diff --git
a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index 866bd037..d1b5e45a 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -89,10 +89,17 @@ export function MultiActionButton({
marginLeft: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
+ width: 36,
+ padding: 4,
+ height: 36,
+ fill: "white",
}}
>
<div
- style={{ height: 14 }}
+ style={{
+ height: 24,
+ width: 24,
+ }}
dangerouslySetInnerHTML={{ __html: arrowDown }}
/>
</ButtonPrimary>
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index e1b4dd2a..f01e97ee 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -66,6 +66,17 @@ export const WalletActionOld = styled.section`
}
`;
+export const Title = styled.h1`
+ font-size: 2em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+`;
+export const SubTitle = styled.h1`
+ font-size: 1.5em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+`;
+
export const DateSeparator = styled.div`
color: gray;
margin: 0.2em;
@@ -140,7 +151,7 @@ export const Middle = styled.div`
height: 100%;
`;
-export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
+export const PopupBox = styled.div<{ noPadding?: boolean; devMode?: boolean }>`
height: 290px;
width: 500px;
overflow-y: visible;
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 933195a9..1b90a7ec 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -43,6 +43,7 @@ import { LogoHeader } from "../components/LogoHeader";
import { Part } from "../components/Part";
import {
ErrorBox,
+ SubTitle,
SuccessBox,
WalletAction,
WarningBox,
@@ -121,9 +122,9 @@ export function DepositPage({ talerPayUri, goBack }:
Props): VNode {
return (
<WalletAction>
<LogoHeader />
- <h2>
+ <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate>
- </h2>
+ </SubTitle>
<section>
<ErrorTalerOperation
title={
@@ -141,9 +142,9 @@ export function DepositPage({ talerPayUri, goBack }:
Props): VNode {
return (
<WalletAction>
<LogoHeader />
- <h2>
+ <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate>
- </h2>
+ </SubTitle>
<section>
<p>
<i18n.Translate>
@@ -205,9 +206,9 @@ export function PaymentRequestView({
<WalletAction>
<LogoHeader />
- <h2>
+ <SubTitle>
<i18n.Translate>Digital cash deposit</i18n.Translate>
- </h2>
+ </SubTitle>
{payStatus.status === PreparePayResultType.AlreadyConfirmed &&
(payStatus.paid ? (
<SuccessBox>
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx
b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index f6ae02f7..28b84a53 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -51,6 +51,7 @@ import {
LinkPrimary,
LinkSuccess,
SmallLightText,
+ SubTitle,
SuccessBox,
WalletAction,
WarningBox,
@@ -92,9 +93,9 @@ export function PayPage({
const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
undefined,
);
- const [payErrMsg, setPayErrMsg] = useState<
- TalerError | string | undefined
- >(undefined);
+ const [payErrMsg, setPayErrMsg] = useState<TalerError | string | undefined>(
+ undefined,
+ );
const hook = useAsyncAsHook(async () => {
if (!talerPayUri) throw Error("Missing pay uri");
@@ -318,9 +319,9 @@ export function PaymentRequestView({
<WalletAction>
<LogoHeader />
- <h2>
+ <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate>
- </h2>
+ </SubTitle>
{payStatus.status === PreparePayResultType.AlreadyConfirmed &&
(payStatus.paid ? (
payStatus.contractTerms.fulfillment_url ? (
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx
b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index 790e8d9f..99fe1f01 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -28,6 +28,7 @@ import {
} from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks";
+import { SubTitle, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation";
import * as wxApi from "../wxApi";
@@ -41,11 +42,11 @@ export function View({ applyResult }: ViewProps): VNode {
const { i18n } = useTranslationContext();
return (
<section class="main">
- <h1>GNU Taler Wallet</h1>
+ <Title>GNU Taler Wallet</Title>
<article class="fade">
- <h2>
+ <SubTitle>
<i18n.Translate>Refund Status</i18n.Translate>
- </h2>
+ </SubTitle>
<p>
<i18n.Translate>
The product <em>{applyResult.info.summary}</em> has received a
total
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx
b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index 5767b500..f05b72fe 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -29,6 +29,7 @@ import {
import { h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks";
import { Loading } from "../components/Loading";
+import { Title } from "../components/styled";
import { useTranslationContext } from "../context/translation";
import * as wxApi from "../wxApi";
@@ -48,7 +49,7 @@ export function View({
const { i18n } = useTranslationContext();
return (
<section class="main">
- <h1>GNU Taler Wallet</h1>
+ <Title>GNU Taler Wallet</Title>
<article class="fade">
{prepareTipResult.accepted ? (
<span>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index bef33dce..a5e52d25 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -39,6 +39,7 @@ import {
ButtonSuccess,
ButtonWarning,
LinkSuccess,
+ SubTitle,
WalletAction,
} from "../components/styled";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
@@ -118,9 +119,9 @@ export function View({
return (
<WalletAction>
<LogoHeader />
- <h2>
+ <SubTitle>
<i18n.Translate>Digital cash withdrawal</i18n.Translate>
- </h2>
+ </SubTitle>
{withdrawError && (
<ErrorTalerOperation
diff --git
a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
index a3580174..f0ec2ca4 100644
--- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
@@ -52,7 +52,8 @@ async function handleExtendedPerm(isEnabled: boolean,
onChange: (value: boolean)
console.log("permissions granted:", granted);
const res = await wxApi.setExtendedPermissions(granted);
onChange(res.newValue);
+ } else {
+ await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
}
- await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
return
}
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index 2af6526c..50ea32d1 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -22,7 +22,7 @@
import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
import { Fragment, h } from "preact";
import { platform } from "../platform/api";
-import { ButtonPrimary, ButtonSuccess } from "../components/styled";
+import { ButtonPrimary, ButtonSuccess, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation";
export interface Props {
@@ -39,9 +39,9 @@ export function TalerActionFound({ url, onDismiss }: Props) {
return (
<Fragment>
<section>
- <h1>
+ <Title>
<i18n.Translate>Taler Action</i18n.Translate>
- </h1>
+ </Title>
{uriType === TalerUriType.TalerPay && (
<div>
<p>
diff --git a/packages/taler-wallet-webextension/src/popup/index.stories.tsx
b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
index 341b06b4..6965e2db 100644
--- a/packages/taler-wallet-webextension/src/popup/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
@@ -19,9 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "../wallet/AddNewActionView.stories";
import * as a2 from "./Balance.stories";
-import * as a3 from "./DeveloperPage.stories";
import * as a6 from "./TalerActionFound.stories";
-export default [a1, a2, a3, a6];
+export default [a2, a6];
diff --git a/packages/taler-wallet-webextension/src/stories.tsx
b/packages/taler-wallet-webextension/src/stories.tsx
new file mode 100644
index 00000000..2f410f68
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -0,0 +1,322 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { setupI18n } from "@gnu-taler/taler-util";
+import { styled } from "@linaria/react";
+import {
+ ComponentChild,
+ ComponentProps,
+ Fragment,
+ FunctionComponent,
+ h,
+ render,
+ VNode,
+} from "preact";
+import { useEffect, useErrorBoundary, useState } from "preact/hooks";
+import { LogoHeader } from "./components/LogoHeader";
+import { PopupBox, WalletBox } from "./components/styled";
+import * as mui from "./mui/index.stories";
+import { PopupNavBar, WalletNavBar } from "./NavigationBar";
+import * as popup from "./popup/index.stories";
+import * as wallet from "./wallet/index.stories";
+
+setupI18n("en", { en: {} });
+
+const Page = styled.div`
+ * {
+ margin: 0px;
+ padding: 0px;
+ font-size: 100%;
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ p:not([class]) {
+ margin-bottom: 1em;
+ margin-top: 1em;
+ }
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+`;
+
+const SideBar = styled.div`
+ min-width: 200px;
+ height: calc(100vh - 20px);
+ overflow-y: visible;
+ overflow-x: hidden;
+ & > {
+ ol {
+ padding: 4px;
+ div {
+ background-color: lightcoral;
+ cursor: pointer;
+ }
+ dd {
+ margin-left: 1em;
+ padding: 4px;
+ cursor: pointer;
+ border-radius: 4px;
+ margin-bottom: 4px;
+ }
+ dd:nth-child(even) {
+ background-color: lightgray;
+ }
+ dd:nth-child(odd) {
+ background-color: lightblue;
+ }
+ }
+ }
+`;
+
+const Content = styled.div`
+ width: 100%;
+`;
+
+function parseExampleImport(group: string, im: any) {
+ const component = im.default.title;
+ return {
+ name: component,
+ examples: Object.entries(im)
+ .filter(([k]) => k !== "default")
+ .map(
+ ([name, render]) =>
+ ({
+ group,
+ component,
+ name,
+ render,
+ } as ExampleItem),
+ ),
+ };
+}
+
+const allExamples = Object.entries({ popup, wallet, mui }).map(
+ ([title, value]) => ({
+ title,
+ list: value.default.map((s) => parseExampleImport(title, s)),
+ }),
+);
+
+interface ExampleItem {
+ group: string;
+ component: string;
+ name: string;
+ render: {
+ (args: any): VNode;
+ args: any;
+ };
+}
+
+function findByGroupComponentName(
+ group: string,
+ component: string,
+ name: string,
+) {
+ const gl = allExamples.filter((e) => e.title === group);
+ if (gl.length === 0) {
+ return undefined;
+ }
+ const cl = gl[0].list.filter((l) => l.name === component);
+ if (cl.length === 0) {
+ return undefined;
+ }
+ const el = cl[0].examples.filter((c) => c.name === name);
+ if (el.length === 0) {
+ return undefined;
+ }
+ return el[0];
+}
+
+function getContentForExample(item: ExampleItem | undefined): () => VNode {
+ if (!item) return () => <div>select example from the list on the left</div>;
+ const example = findByGroupComponentName(
+ item.group,
+ item.component,
+ item.name,
+ );
+ if (!example) return () => <div>example not found</div>;
+ return () => example.render(example.render.args);
+}
+
+function ExampleList({
+ name,
+ list,
+}: {
+ name: string;
+ list: {
+ name: string;
+ examples: ExampleItem[];
+ }[];
+}) {
+ const [open, setOpen] = useState(true);
+ return (
+ <ol>
+ <div onClick={() => setOpen(!open)}>{name}</div>
+ {open &&
+ list.map((k) => (
+ <li>
+ <dl>
+ <dt>{k.name}</dt>
+ {k.examples.map((r) => (
+ <dd>
+ <a
+
href={`#${encodeURIComponent(r.group)}-${encodeURIComponent(
+ r.component,
+ )}-${encodeURIComponent(r.name)}`}
+ >
+ {r.name}
+ </a>
+ </dd>
+ ))}
+ </dl>
+ </li>
+ ))}
+ </ol>
+ );
+}
+
+function getWrapperForGroup(group: string): FunctionComponent {
+ switch (group) {
+ case "popup":
+ return ({ children }: any) => (
+ <Fragment>
+ <PopupNavBar />
+ <PopupBox>{children}</PopupBox>
+ </Fragment>
+ );
+ case "wallet":
+ return ({ children }: any) => (
+ <Fragment>
+ <LogoHeader />
+ <WalletNavBar />
+ <WalletBox>{children}</WalletBox>
+ </Fragment>
+ );
+ default:
+ return Fragment;
+ }
+}
+
+function ErrorReport({
+ children,
+ selected,
+}: {
+ children: ComponentChild;
+ selected: ExampleItem | undefined;
+}) {
+ const [error] = useErrorBoundary();
+ if (error) {
+ return (
+ <div>
+ <p>Error was thrown trying to render</p>
+ {selected && (
+ <ul>
+ <li>
+ <b>group</b>: {selected.group}
+ </li>
+ <li>
+ <b>component</b>: {selected.component}
+ </li>
+ <li>
+ <b>example</b>: {selected.name}
+ </li>
+ <li>
+ <b>args</b>:{" "}
+ <pre>{JSON.stringify(selected.render.args, undefined, 2)}</pre>
+ </li>
+ </ul>
+ )}
+ <p>{error.message}</p>
+ <pre>{error.stack}</pre>
+ </div>
+ );
+ }
+ return <Fragment>{children}</Fragment>;
+}
+
+function getSelectionFromLocationHash(): ExampleItem | undefined {
+ if (!location.hash) return undefined;
+ const parts = location.hash.substring(1).split("-");
+ if (parts.length < 3) return undefined;
+ return findByGroupComponentName(
+ decodeURIComponent(parts[0]),
+ decodeURIComponent(parts[1]),
+ decodeURIComponent(parts[2]),
+ );
+}
+
+function Application() {
+ const initialSelection = getSelectionFromLocationHash();
+ const [selected, updateSelected] = useState<ExampleItem | undefined>(
+ initialSelection,
+ );
+
+ function updateSelectedFromHashChange({ newURL, oldURL }: any) {
+ const selected = getSelectionFromLocationHash();
+ updateSelected(selected);
+ }
+ useEffect(() => {
+ window.addEventListener("hashchange", updateSelectedFromHashChange);
+ return () => {
+ window.removeEventListener("hashchange", updateSelectedFromHashChange);
+ };
+ }, []);
+
+ const ExampleContent = getContentForExample(selected);
+
+ const GroupWrapper = getWrapperForGroup(selected?.group || "default");
+
+ return (
+ <Page>
+ <SideBar>
+ {allExamples.map((e) => (
+ <ExampleList name={e.title} list={e.list} />
+ ))}
+ <hr />
+ </SideBar>
+ <Content>
+ <ErrorReport selected={selected}>
+ <GroupWrapper>
+ <ExampleContent />
+ </GroupWrapper>
+ </ErrorReport>
+ </Content>
+ </Page>
+ );
+}
+
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+} else {
+ main();
+}
+function main(): void {
+ try {
+ const container = document.getElementById("container");
+ if (!container) {
+ throw Error("container not found, can't mount page contents");
+ }
+ render(<Application />, container);
+ } catch (e) {
+ console.error("got error", e);
+ if (e instanceof Error) {
+ document.body.innerText = `Fatal error: "${e.message}". Please report
this bug at https://bugs.gnunet.org/.`;
+ }
+ }
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx
b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 88a84d96..7ecec1cb 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -39,7 +39,7 @@ 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 { DeveloperPage } from "./DeveloperPage";
import { BackupPage } from "./BackupPage";
import { DepositPage } from "./DepositPage";
import { ExchangeAddPage } from "./ExchangeAddPage";
diff --git
a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index bc4b0357..2691fbdf 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -32,6 +32,8 @@ import {
InputWithLabel,
LightText,
LinkPrimary,
+ SubTitle,
+ Title,
} from "../components/styled";
import { useTranslationContext } from "../context/translation";
import { Pages } from "../NavigationBar";
@@ -167,11 +169,11 @@ export function CreateManualWithdraw({
if (initialCurrency !== undefined) {
return (
<section>
- <h2>
+ <SubTitle>
<i18n.Translate>
Manual Withdrawal for {initialCurrency}
</i18n.Translate>
- </h2>
+ </SubTitle>
<LightText>
<i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The
@@ -200,9 +202,9 @@ export function CreateManualWithdraw({
}
return (
<section>
- <h2>
+ <SubTitle>
<i18n.Translate>Manual Withdrawal</i18n.Translate>
- </h2>
+ </SubTitle>
<LightText>
<i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The
@@ -234,9 +236,9 @@ export function CreateManualWithdraw({
description={error}
/>
)}
- <h2>
+ <SubTitle>
<i18n.Translate>Manual Withdrawal</i18n.Translate>
- </h2>
+ </SubTitle>
<LightText>
<i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index df93b0c4..65cdee4e 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -35,6 +35,7 @@ import {
ErrorText,
Input,
InputWithLabel,
+ SubTitle,
WarningBox,
} from "../components/styled";
import { useTranslationContext } from "../context/translation";
@@ -265,9 +266,9 @@ export function View({
return (
<Fragment>
- <h2>
+ <SubTitle>
<i18n.Translate>Send {currency} to your account</i18n.Translate>
- </h2>
+ </SubTitle>
<section>
<Input>
<SelectList
diff --git
a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
similarity index 100%
rename from
packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
rename to
packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
similarity index 99%
rename from packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
rename to packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index d47b8ce7..f4d717df 100644
--- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
@@ -16,12 +16,9 @@
import {
Amounts,
- Balance,
CoinDumpJson,
ExchangeListItem,
NotificationType,
- AbsoluteTime,
- Translate,
} from "@gnu-taler/taler-util";
import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
import { format } from "date-fns";
diff --git
a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 1b40fe78..e36fa112 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -1,6 +1,11 @@
import { Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
-import { Button, ButtonSuccess, ButtonWarning } from "../components/styled";
+import {
+ Button,
+ ButtonSuccess,
+ ButtonWarning,
+ Title,
+} from "../components/styled";
import { useTranslationContext } from "../context/translation";
import { TermsOfServiceSection } from "../cta/TermsOfServiceSection";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
@@ -85,9 +90,9 @@ export function View({
return (
<Fragment>
<section>
- <h1>
+ <Title>
<i18n.Translate>Review terms of service</i18n.Translate>
- </h1>
+ </Title>
<div>
<i18n.Translate>Exchange URL</i18n.Translate>:
<a href={url} target="_blank" rel="noreferrer">
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index fae309ba..6b8a6194 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -10,6 +10,8 @@ import {
ButtonPrimary,
Input,
LightText,
+ SubTitle,
+ Title,
WarningBox,
} from "../components/styled";
import { useTranslationContext } from "../context/translation";
@@ -92,13 +94,13 @@ export function ExchangeSetUrlPage({
<Fragment>
<section>
{!expectedCurrency ? (
- <h1>
+ <Title>
<i18n.Translate>Add new exchange</i18n.Translate>
- </h1>
+ </Title>
) : (
- <h2>
+ <SubTitle>
<i18n.Translate>Add exchange for
{expectedCurrency}</i18n.Translate>
- </h2>
+ </SubTitle>
)}
{!result && (
<LightText>
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 136521e6..ae4ba7e1 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -30,6 +30,8 @@ import {
Input,
LightText,
SmallLightText,
+ SubTitle,
+ Title,
} from "../components/styled";
import { useTranslationContext } from "../context/translation";
import { queryToSlashConfig } from "../utils/index";
@@ -115,9 +117,9 @@ export function SetUrlView({
return (
<Fragment>
<section>
- <h1>
+ <Title>
<i18n.Translate>Add backup provider</i18n.Translate>
- </h1>
+ </Title>
{error && (
<ErrorMessage
title={
@@ -196,9 +198,9 @@ export function ConfirmProviderView({
return (
<Fragment>
<section>
- <h1>
+ <Title>
<i18n.Translate>Review terms of service</i18n.Translate>
- </h1>
+ </Title>
<div>
<i18n.Translate>Provider URL</i18n.Translate>:{" "}
<a href={url} target="_blank">
@@ -210,9 +212,9 @@ export function ConfirmProviderView({
Please review and accept this provider's terms of service
</i18n.Translate>
</SmallLightText>
- <h2>
+ <SubTitle>
1. <i18n.Translate>Pricing</i18n.Translate>
- </h2>
+ </SubTitle>
<p>
{Amounts.isZero(provider.annual_fee) ? (
<i18n.Translate>free of charge</i18n.Translate>
@@ -222,9 +224,9 @@ export function ConfirmProviderView({
</i18n.Translate>
)}
</p>
- <h2>
+ <SubTitle>
2. <i18n.Translate>Storage</i18n.Translate>
- </h2>
+ </SubTitle>
<p>
<i18n.Translate>
{provider.storage_limit_in_megabytes} megabytes of storage per year
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 84a2a744..83ebfb51 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -9,7 +9,7 @@ import {
import { Fragment, h, VNode } from "preact";
import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
import { QR } from "../components/QR";
-import { ButtonDestructive, WarningBox } from "../components/styled";
+import { ButtonDestructive, Title, WarningBox } from "../components/styled";
import { useTranslationContext } from "../context/translation";
import { amountToString } from "../utils/index";
export interface Props {
@@ -115,9 +115,9 @@ export function ReserveCreated({
return (
<Fragment>
<section>
- <h1>
+ <Title>
<i18n.Translate>Exchange is ready for withdrawal</i18n.Translate>
- </h1>
+ </Title>
<p>
<i18n.Translate>
To complete the process you need to wire{` `}
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 840e9565..478ce00a 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -23,6 +23,7 @@ import {
DestructiveText,
Input,
LinkPrimary,
+ SubTitle,
SuccessText,
WarningText,
} from "../components/styled";
@@ -86,9 +87,9 @@ export function SettingsView({
return (
<Fragment>
<section>
- <h2>
+ <SubTitle>
<i18n.Translate>Navigator</i18n.Translate>
- </h2>
+ </SubTitle>
<Checkbox
label={
<i18n.Translate>
@@ -106,9 +107,9 @@ export function SettingsView({
onToggle={togglePermissions}
/>
- <h2>
+ <SubTitle>
<i18n.Translate>Trust</i18n.Translate>
- </h2>
+ </SubTitle>
{!knownExchanges || !knownExchanges.length ? (
<div>
<i18n.Translate>No exchange yet</i18n.Translate>
@@ -184,7 +185,7 @@ export function SettingsView({
</LinkPrimary>
</div>
- <h2>Troubleshooting</h2>
+ <SubTitle>Troubleshooting</SubTitle>
<Checkbox
label={<i18n.Translate>Developer mode</i18n.Translate>}
name="devMode"
@@ -198,9 +199,9 @@ export function SettingsView({
/>
<JustInDevMode>
- <h2>
+ <SubTitle>
<i18n.Translate>Display</i18n.Translate>
- </h2>
+ </SubTitle>
<Input>
<SelectList
label={<i18n.Translate>Current Language</i18n.Translate>}
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 0e58aaf6..5cef86da 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -43,6 +43,7 @@ import {
Overlay,
RowBorderGray,
SmallLightText,
+ SubTitle,
WarningBox,
} from "../components/styled";
import { Time } from "../components/Time";
@@ -216,10 +217,13 @@ export function TransactionView({
</CenteredDialog>
</Overlay>
) : undefined}
- <h2>
+ <SubTitle>
<i18n.Translate>Withdrawal</i18n.Translate>
- </h2>
- <Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" />
+ </SubTitle>
+ <Time
+ timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
+ format="dd MMMM yyyy, HH:mm"
+ />
{transaction.pending ? (
transaction.withdrawalDetails.type ===
WithdrawalType.ManualTransfer ? (
@@ -340,10 +344,13 @@ export function TransactionView({
return (
<TransactionTemplate>
- <h2>
+ <SubTitle>
<i18n.Translate>Payment</i18n.Translate>
- </h2>
- <Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" />
+ </SubTitle>
+ <Time
+ timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
+ format="dd MMMM yyyy, HH:mm"
+ />
<br />
<Part
big
@@ -423,10 +430,13 @@ export function TransactionView({
).amount;
return (
<TransactionTemplate>
- <h2>
+ <SubTitle>
<i18n.Translate>Deposit</i18n.Translate>
- </h2>
- <Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" />
+ </SubTitle>
+ <Time
+ timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
+ format="dd MMMM yyyy, HH:mm"
+ />
<br />
<Part
big
@@ -457,10 +467,13 @@ export function TransactionView({
).amount;
return (
<TransactionTemplate>
- <h2>
+ <SubTitle>
<i18n.Translate>Refresh</i18n.Translate>
- </h2>
- <Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" />
+ </SubTitle>
+ <Time
+ timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
+ format="dd MMMM yyyy, HH:mm"
+ />
<br />
<Part
big
@@ -491,10 +504,13 @@ export function TransactionView({
).amount;
return (
<TransactionTemplate>
- <h2>
+ <SubTitle>
<i18n.Translate>Tip</i18n.Translate>
- </h2>
- <Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" />
+ </SubTitle>
+ <Time
+ timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
+ format="dd MMMM yyyy, HH:mm"
+ />
<br />
<Part
big
@@ -525,9 +541,9 @@ export function TransactionView({
).amount;
return (
<TransactionTemplate>
- <h2>
+ <SubTitle>
<i18n.Translate>Refund</i18n.Translate>
- </h2>
+ </SubTitle>
<Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index 36b4b13f..1c068cfa 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -24,6 +24,7 @@ import { WalletDiagnostics } from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
import { Checkbox } from "../components/Checkbox";
import { Diagnostics } from "../components/Diagnostics";
+import { SubTitle, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation";
import { useDiagnostics } from "../hooks/useDiagnostics";
import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
@@ -56,16 +57,16 @@ export function View({
const { i18n } = useTranslationContext();
return (
<Fragment>
- <h1>
+ <Title>
<i18n.Translate>Browser Extension Installed!</i18n.Translate>
- </h1>
+ </Title>
<div>
<p>
<i18n.Translate>Thank you for installing the wallet.</i18n.Translate>
</p>
- <h2>
+ <SubTitle>
<i18n.Translate>Permissions</i18n.Translate>
- </h2>
+ </SubTitle>
<Checkbox
label={
<i18n.Translate>
@@ -82,9 +83,9 @@ export function View({
enabled={permissionsEnabled}
onToggle={togglePermissions}
/>
- <h2>
+ <SubTitle>
<i18n.Translate>Next Steps</i18n.Translate>
- </h2>
+ </SubTitle>
<a href="https://demo.taler.net/"; style={{ display: "block" }}>
<i18n.Translate>Try the demo</i18n.Translate> ยป
</a>
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 1e19445f..b0317782 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -33,5 +33,22 @@ import * as a12 from "./Settings.stories";
import * as a13 from "./Transaction.stories";
import * as a14 from "./Welcome.stories";
import * as a15 from "./AddNewActionView.stories";
+import * as a16 from "./DeveloperPage.stories";
-export default [a1, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15];
+export default [
+ a1,
+ a3,
+ a4,
+ a5,
+ a6,
+ a7,
+ a8,
+ a9,
+ a10,
+ a11,
+ a12,
+ a13,
+ a14,
+ a15,
+ a16,
+];
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: storybook like page for dev, plus some style fixes,
gnunet <=