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

storybook like page for dev, plus some style fixes

Browse Source
This commit is contained in:
Sebastian 2022-03-28 14:03:59 -03:00
parent 2ba6692c6a
commit 1d85662946
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
27 changed files with 514 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/taler-wallet-webextension/build-fast-with-linaria.mjs
View File

@ -40,6 +40,7 @@ const entryPoints = [
'src/walletEntryPoint.tsx', 'src/walletEntryPoint.tsx',
'src/walletEntryPoint.dev.tsx', 'src/walletEntryPoint.dev.tsx',
'src/background.ts', 'src/background.ts',
'src/stories.tsx',
'src/background.dev.ts', 'src/background.dev.ts',
'src/browserWorkerEntry.ts' 'src/browserWorkerEntry.ts'
] ]

34
packages/taler-wallet-webextension/dev-html/index.html
View File

@ -14,28 +14,45 @@
function closeWallet() { function closeWallet() {
window.frames["wallet"].location = "about:blank"; window.frames["wallet"].location = "about:blank";
} }
function openPage() {
window.frames["other"].location =
document.getElementById("page-url").value;
}
</script> </script>
<input type="text" /> <input id="page-url" type="text" />
<button value="asd" onclick="openPopup()">open popup</button> <button onclick="openPage()">open</button>
<button value="asd" onclick="closeWallet();openWallet()"> <a
reload wallet page href='javascript:void(window.frames["other"].location = "http://bank.taler:5882")'
</button> >open local bank</a
>
<hr /> <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 <iframe
id="popup-window" id="popup-window"
name="popup" name="popup"
src="about:blank" src="about:blank"
name="popup"
width="500" width="500"
height="325" height="325"
> >
</iframe> </iframe>
<hr /> <hr />
<button value="asd" onclick="closeWallet();openWallet()">
reload wallet page
</button>
<br />
<iframe <iframe
id="wallet-window" id="wallet-window"
name="wallet" name="wallet"
src="/wallet.html" src="/wallet.html"
name="wallet"
width="800" width="800"
height="100%" height="100%"
> >
@ -43,6 +60,9 @@
<hr /> <hr />
<iframe src="/tests.html" name="wallet" width="800" height="100%"> </iframe> <iframe src="/tests.html" name="wallet" width="800" height="100%"> </iframe>
<hr /> <hr />
<iframe src="/stories.html" name="wallet" width="800" height="100%">
</iframe>
<hr />
<script src="/dist/background.dev.js"></script> <script src="/dist/background.dev.js"></script>
</body> </body>
</html> </html>

11
packages/taler-wallet-webextension/dev-html/stories.html Normal file
View File

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

9
packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
View File

@ -89,10 +89,17 @@ export function MultiActionButton({
marginLeft: 0, marginLeft: 0,
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
width: 36,
padding: 4,
height: 36,
fill: "white",
}} }}
> >
<div <div
style={{ height: 14 }} style={{
height: 24,
width: 24,
}}
dangerouslySetInnerHTML={{ __html: arrowDown }} dangerouslySetInnerHTML={{ __html: arrowDown }}
/> />
</ButtonPrimary> </ButtonPrimary>

13
packages/taler-wallet-webextension/src/components/styled/index.tsx
View File

@ -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` export const DateSeparator = styled.div`
color: gray; color: gray;
margin: 0.2em; margin: 0.2em;
@ -140,7 +151,7 @@ export const Middle = styled.div`
height: 100%; height: 100%;
`; `;
export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>` export const PopupBox = styled.div<{ noPadding?: boolean; devMode?: boolean }>`
height: 290px; height: 290px;
width: 500px; width: 500px;
overflow-y: visible; overflow-y: visible;

13
packages/taler-wallet-webextension/src/cta/Deposit.tsx
View File

@ -43,6 +43,7 @@ import { LogoHeader } from "../components/LogoHeader";
import { Part } from "../components/Part"; import { Part } from "../components/Part";
import { import {
ErrorBox, ErrorBox,
SubTitle,
SuccessBox, SuccessBox,
WalletAction, WalletAction,
WarningBox, WarningBox,
@ -121,9 +122,9 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
return ( return (
<WalletAction> <WalletAction>
<LogoHeader /> <LogoHeader />
<h2> <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate> <i18n.Translate>Digital cash payment</i18n.Translate>
</h2> </SubTitle>
<section> <section>
<ErrorTalerOperation <ErrorTalerOperation
title={ title={
@ -141,9 +142,9 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
return ( return (
<WalletAction> <WalletAction>
<LogoHeader /> <LogoHeader />
<h2> <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate> <i18n.Translate>Digital cash payment</i18n.Translate>
</h2> </SubTitle>
<section> <section>
<p> <p>
<i18n.Translate> <i18n.Translate>
@ -205,9 +206,9 @@ export function PaymentRequestView({
<WalletAction> <WalletAction>
<LogoHeader /> <LogoHeader />
<h2> <SubTitle>
<i18n.Translate>Digital cash deposit</i18n.Translate> <i18n.Translate>Digital cash deposit</i18n.Translate>
</h2> </SubTitle>
{payStatus.status === PreparePayResultType.AlreadyConfirmed && {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
(payStatus.paid ? ( (payStatus.paid ? (
<SuccessBox> <SuccessBox>

11
packages/taler-wallet-webextension/src/cta/Pay.tsx
View File

@ -51,6 +51,7 @@ import {
LinkPrimary, LinkPrimary,
LinkSuccess, LinkSuccess,
SmallLightText, SmallLightText,
SubTitle,
SuccessBox, SuccessBox,
WalletAction, WalletAction,
WarningBox, WarningBox,
@ -92,9 +93,9 @@ export function PayPage({
const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>( const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
undefined, undefined,
); );
const [payErrMsg, setPayErrMsg] = useState< const [payErrMsg, setPayErrMsg] = useState<TalerError | string | undefined>(
TalerError | string | undefined undefined,
>(undefined); );
const hook = useAsyncAsHook(async () => { const hook = useAsyncAsHook(async () => {
if (!talerPayUri) throw Error("Missing pay uri"); if (!talerPayUri) throw Error("Missing pay uri");
@ -318,9 +319,9 @@ export function PaymentRequestView({
<WalletAction> <WalletAction>
<LogoHeader /> <LogoHeader />
<h2> <SubTitle>
<i18n.Translate>Digital cash payment</i18n.Translate> <i18n.Translate>Digital cash payment</i18n.Translate>
</h2> </SubTitle>
{payStatus.status === PreparePayResultType.AlreadyConfirmed && {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
(payStatus.paid ? ( (payStatus.paid ? (
payStatus.contractTerms.fulfillment_url ? ( payStatus.contractTerms.fulfillment_url ? (

7
packages/taler-wallet-webextension/src/cta/Refund.tsx
View File

@ -28,6 +28,7 @@ import {
} from "@gnu-taler/taler-util"; } from "@gnu-taler/taler-util";
import { h, VNode } from "preact"; import { h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { SubTitle, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import * as wxApi from "../wxApi"; import * as wxApi from "../wxApi";
@ -41,11 +42,11 @@ export function View({ applyResult }: ViewProps): VNode {
const { i18n } = useTranslationContext(); const { i18n } = useTranslationContext();
return ( return (
<section class="main"> <section class="main">
<h1>GNU Taler Wallet</h1> <Title>GNU Taler Wallet</Title>
<article class="fade"> <article class="fade">
<h2> <SubTitle>
<i18n.Translate>Refund Status</i18n.Translate> <i18n.Translate>Refund Status</i18n.Translate>
</h2> </SubTitle>
<p> <p>
<i18n.Translate> <i18n.Translate>
The product <em>{applyResult.info.summary}</em> has received a total The product <em>{applyResult.info.summary}</em> has received a total

3
packages/taler-wallet-webextension/src/cta/Tip.tsx
View File

@ -29,6 +29,7 @@ import {
import { h, VNode } from "preact"; import { h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { Loading } from "../components/Loading"; import { Loading } from "../components/Loading";
import { Title } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import * as wxApi from "../wxApi"; import * as wxApi from "../wxApi";
@ -48,7 +49,7 @@ export function View({
const { i18n } = useTranslationContext(); const { i18n } = useTranslationContext();
return ( return (
<section class="main"> <section class="main">
<h1>GNU Taler Wallet</h1> <Title>GNU Taler Wallet</Title>
<article class="fade"> <article class="fade">
{prepareTipResult.accepted ? ( {prepareTipResult.accepted ? (
<span> <span>

5
packages/taler-wallet-webextension/src/cta/Withdraw.tsx
View File

@ -39,6 +39,7 @@ import {
ButtonSuccess, ButtonSuccess,
ButtonWarning, ButtonWarning,
LinkSuccess, LinkSuccess,
SubTitle,
WalletAction, WalletAction,
} from "../components/styled"; } from "../components/styled";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
@ -118,9 +119,9 @@ export function View({
return ( return (
<WalletAction> <WalletAction>
<LogoHeader /> <LogoHeader />
<h2> <SubTitle>
<i18n.Translate>Digital cash withdrawal</i18n.Translate> <i18n.Translate>Digital cash withdrawal</i18n.Translate>
</h2> </SubTitle>
{withdrawError && ( {withdrawError && (
<ErrorTalerOperation <ErrorTalerOperation

3
packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
View File

@ -52,7 +52,8 @@ async function handleExtendedPerm(isEnabled: boolean, onChange: (value: boolean)
console.log("permissions granted:", granted); console.log("permissions granted:", granted);
const res = await wxApi.setExtendedPermissions(granted); const res = await wxApi.setExtendedPermissions(granted);
onChange(res.newValue); onChange(res.newValue);
} else {
await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
} }
await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
return return
} }

6
packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
View File

@ -22,7 +22,7 @@
import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
import { Fragment, h } from "preact"; import { Fragment, h } from "preact";
import { platform } from "../platform/api"; import { platform } from "../platform/api";
import { ButtonPrimary, ButtonSuccess } from "../components/styled"; import { ButtonPrimary, ButtonSuccess, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
export interface Props { export interface Props {
@ -39,9 +39,9 @@ export function TalerActionFound({ url, onDismiss }: Props) {
return ( return (
<Fragment> <Fragment>
<section> <section>
<h1> <Title>
<i18n.Translate>Taler Action</i18n.Translate> <i18n.Translate>Taler Action</i18n.Translate>
</h1> </Title>
{uriType === TalerUriType.TalerPay && ( {uriType === TalerUriType.TalerPay && (
<div> <div>
<p> <p>

4
packages/taler-wallet-webextension/src/popup/index.stories.tsx
View File

@ -19,9 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
import * as a1 from "../wallet/AddNewActionView.stories";
import * as a2 from "./Balance.stories"; import * as a2 from "./Balance.stories";
import * as a3 from "./DeveloperPage.stories";
import * as a6 from "./TalerActionFound.stories"; import * as a6 from "./TalerActionFound.stories";
export default [a1, a2, a3, a6]; export default [a2, a6];

322
packages/taler-wallet-webextension/src/stories.tsx Normal file
View File

@ -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/.`;
}
}
}

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

@ -39,7 +39,7 @@ import { RefundPage } from "../cta/Refund";
import { TipPage } from "../cta/Tip"; import { TipPage } from "../cta/Tip";
import { WithdrawPage } from "../cta/Withdraw"; import { WithdrawPage } from "../cta/Withdraw";
import { Pages, WalletNavBar } from "../NavigationBar"; import { Pages, WalletNavBar } from "../NavigationBar";
import { DeveloperPage } from "../popup/DeveloperPage"; import { DeveloperPage } from "./DeveloperPage";
import { BackupPage } from "./BackupPage"; import { BackupPage } from "./BackupPage";
import { DepositPage } from "./DepositPage"; import { DepositPage } from "./DepositPage";
import { ExchangeAddPage } from "./ExchangeAddPage"; import { ExchangeAddPage } from "./ExchangeAddPage";

14
packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
View File

@ -32,6 +32,8 @@ import {
InputWithLabel, InputWithLabel,
LightText, LightText,
LinkPrimary, LinkPrimary,
SubTitle,
Title,
} from "../components/styled"; } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import { Pages } from "../NavigationBar"; import { Pages } from "../NavigationBar";
@ -167,11 +169,11 @@ export function CreateManualWithdraw({
if (initialCurrency !== undefined) { if (initialCurrency !== undefined) {
return ( return (
<section> <section>
<h2> <SubTitle>
<i18n.Translate> <i18n.Translate>
Manual Withdrawal for {initialCurrency} Manual Withdrawal for {initialCurrency}
</i18n.Translate> </i18n.Translate>
</h2> </SubTitle>
<LightText> <LightText>
<i18n.Translate> <i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The Choose a exchange from where the coins will be withdrawn. The
@ -200,9 +202,9 @@ export function CreateManualWithdraw({
} }
return ( return (
<section> <section>
<h2> <SubTitle>
<i18n.Translate>Manual Withdrawal</i18n.Translate> <i18n.Translate>Manual Withdrawal</i18n.Translate>
</h2> </SubTitle>
<LightText> <LightText>
<i18n.Translate> <i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The Choose a exchange from where the coins will be withdrawn. The
@ -234,9 +236,9 @@ export function CreateManualWithdraw({
description={error} description={error}
/> />
)} )}
<h2> <SubTitle>
<i18n.Translate>Manual Withdrawal</i18n.Translate> <i18n.Translate>Manual Withdrawal</i18n.Translate>
</h2> </SubTitle>
<LightText> <LightText>
<i18n.Translate> <i18n.Translate>
Choose a exchange from where the coins will be withdrawn. The Choose a exchange from where the coins will be withdrawn. The

5
packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
View File

@ -35,6 +35,7 @@ import {
ErrorText, ErrorText,
Input, Input,
InputWithLabel, InputWithLabel,
SubTitle,
WarningBox, WarningBox,
} from "../components/styled"; } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
@ -265,9 +266,9 @@ export function View({
return ( return (
<Fragment> <Fragment>
<h2> <SubTitle>
<i18n.Translate>Send {currency} to your account</i18n.Translate> <i18n.Translate>Send {currency} to your account</i18n.Translate>
</h2> </SubTitle>
<section> <section>
<Input> <Input>
<SelectList <SelectList

0
packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx → packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
View File

3
packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx → packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
View File

@ -16,12 +16,9 @@
import { import {
Amounts, Amounts,
Balance,
CoinDumpJson, CoinDumpJson,
ExchangeListItem, ExchangeListItem,
NotificationType, NotificationType,
AbsoluteTime,
Translate,
} from "@gnu-taler/taler-util"; } from "@gnu-taler/taler-util";
import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core"; import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
import { format } from "date-fns"; import { format } from "date-fns";

11
packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
View File

@ -1,6 +1,11 @@
import { Fragment, h, VNode } from "preact"; import { Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks"; 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 { useTranslationContext } from "../context/translation";
import { TermsOfServiceSection } from "../cta/TermsOfServiceSection"; import { TermsOfServiceSection } from "../cta/TermsOfServiceSection";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
@ -85,9 +90,9 @@ export function View({
return ( return (
<Fragment> <Fragment>
<section> <section>
<h1> <Title>
<i18n.Translate>Review terms of service</i18n.Translate> <i18n.Translate>Review terms of service</i18n.Translate>
</h1> </Title>
<div> <div>
<i18n.Translate>Exchange URL</i18n.Translate>: <i18n.Translate>Exchange URL</i18n.Translate>:
<a href={url} target="_blank" rel="noreferrer"> <a href={url} target="_blank" rel="noreferrer">

10
packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
View File

@ -10,6 +10,8 @@ import {
ButtonPrimary, ButtonPrimary,
Input, Input,
LightText, LightText,
SubTitle,
Title,
WarningBox, WarningBox,
} from "../components/styled"; } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
@ -92,13 +94,13 @@ export function ExchangeSetUrlPage({
<Fragment> <Fragment>
<section> <section>
{!expectedCurrency ? ( {!expectedCurrency ? (
<h1> <Title>
<i18n.Translate>Add new exchange</i18n.Translate> <i18n.Translate>Add new exchange</i18n.Translate>
</h1> </Title>
) : ( ) : (
<h2> <SubTitle>
<i18n.Translate>Add exchange for {expectedCurrency}</i18n.Translate> <i18n.Translate>Add exchange for {expectedCurrency}</i18n.Translate>
</h2> </SubTitle>
)} )}
{!result && ( {!result && (
<LightText> <LightText>

18
packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
View File

@ -30,6 +30,8 @@ import {
Input, Input,
LightText, LightText,
SmallLightText, SmallLightText,
SubTitle,
Title,
} from "../components/styled"; } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import { queryToSlashConfig } from "../utils/index"; import { queryToSlashConfig } from "../utils/index";
@ -115,9 +117,9 @@ export function SetUrlView({
return ( return (
<Fragment> <Fragment>
<section> <section>
<h1> <Title>
<i18n.Translate>Add backup provider</i18n.Translate> <i18n.Translate>Add backup provider</i18n.Translate>
</h1> </Title>
{error && ( {error && (
<ErrorMessage <ErrorMessage
title={ title={
@ -196,9 +198,9 @@ export function ConfirmProviderView({
return ( return (
<Fragment> <Fragment>
<section> <section>
<h1> <Title>
<i18n.Translate>Review terms of service</i18n.Translate> <i18n.Translate>Review terms of service</i18n.Translate>
</h1> </Title>
<div> <div>
<i18n.Translate>Provider URL</i18n.Translate>:{" "} <i18n.Translate>Provider URL</i18n.Translate>:{" "}
<a href={url} target="_blank"> <a href={url} target="_blank">
@ -210,9 +212,9 @@ export function ConfirmProviderView({
Please review and accept this provider's terms of service Please review and accept this provider's terms of service
</i18n.Translate> </i18n.Translate>
</SmallLightText> </SmallLightText>
<h2> <SubTitle>
1. <i18n.Translate>Pricing</i18n.Translate> 1. <i18n.Translate>Pricing</i18n.Translate>
</h2> </SubTitle>
<p> <p>
{Amounts.isZero(provider.annual_fee) ? ( {Amounts.isZero(provider.annual_fee) ? (
<i18n.Translate>free of charge</i18n.Translate> <i18n.Translate>free of charge</i18n.Translate>
@ -222,9 +224,9 @@ export function ConfirmProviderView({
</i18n.Translate> </i18n.Translate>
)} )}
</p> </p>
<h2> <SubTitle>
2. <i18n.Translate>Storage</i18n.Translate> 2. <i18n.Translate>Storage</i18n.Translate>
</h2> </SubTitle>
<p> <p>
<i18n.Translate> <i18n.Translate>
{provider.storage_limit_in_megabytes} megabytes of storage per year {provider.storage_limit_in_megabytes} megabytes of storage per year

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

@ -9,7 +9,7 @@ import {
import { Fragment, h, VNode } from "preact"; import { Fragment, h, VNode } from "preact";
import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
import { QR } from "../components/QR"; import { QR } from "../components/QR";
import { ButtonDestructive, WarningBox } from "../components/styled"; import { ButtonDestructive, Title, WarningBox } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import { amountToString } from "../utils/index"; import { amountToString } from "../utils/index";
export interface Props { export interface Props {
@ -115,9 +115,9 @@ export function ReserveCreated({
return ( return (
<Fragment> <Fragment>
<section> <section>
<h1> <Title>
<i18n.Translate>Exchange is ready for withdrawal</i18n.Translate> <i18n.Translate>Exchange is ready for withdrawal</i18n.Translate>
</h1> </Title>
<p> <p>
<i18n.Translate> <i18n.Translate>
To complete the process you need to wire{` `} To complete the process you need to wire{` `}

15
packages/taler-wallet-webextension/src/wallet/Settings.tsx
View File

@ -23,6 +23,7 @@ import {
DestructiveText, DestructiveText,
Input, Input,
LinkPrimary, LinkPrimary,
SubTitle,
SuccessText, SuccessText,
WarningText, WarningText,
} from "../components/styled"; } from "../components/styled";
@ -86,9 +87,9 @@ export function SettingsView({
return ( return (
<Fragment> <Fragment>
<section> <section>
<h2> <SubTitle>
<i18n.Translate>Navigator</i18n.Translate> <i18n.Translate>Navigator</i18n.Translate>
</h2> </SubTitle>
<Checkbox <Checkbox
label={ label={
<i18n.Translate> <i18n.Translate>
@ -106,9 +107,9 @@ export function SettingsView({
onToggle={togglePermissions} onToggle={togglePermissions}
/> />
<h2> <SubTitle>
<i18n.Translate>Trust</i18n.Translate> <i18n.Translate>Trust</i18n.Translate>
</h2> </SubTitle>
{!knownExchanges || !knownExchanges.length ? ( {!knownExchanges || !knownExchanges.length ? (
<div> <div>
<i18n.Translate>No exchange yet</i18n.Translate> <i18n.Translate>No exchange yet</i18n.Translate>
@ -184,7 +185,7 @@ export function SettingsView({
</LinkPrimary> </LinkPrimary>
</div> </div>
<h2>Troubleshooting</h2> <SubTitle>Troubleshooting</SubTitle>
<Checkbox <Checkbox
label={<i18n.Translate>Developer mode</i18n.Translate>} label={<i18n.Translate>Developer mode</i18n.Translate>}
name="devMode" name="devMode"
@ -198,9 +199,9 @@ export function SettingsView({
/> />
<JustInDevMode> <JustInDevMode>
<h2> <SubTitle>
<i18n.Translate>Display</i18n.Translate> <i18n.Translate>Display</i18n.Translate>
</h2> </SubTitle>
<Input> <Input>
<SelectList <SelectList
label={<i18n.Translate>Current Language</i18n.Translate>} label={<i18n.Translate>Current Language</i18n.Translate>}

50
packages/taler-wallet-webextension/src/wallet/Transaction.tsx
View File

@ -43,6 +43,7 @@ import {
Overlay, Overlay,
RowBorderGray, RowBorderGray,
SmallLightText, SmallLightText,
SubTitle,
WarningBox, WarningBox,
} from "../components/styled"; } from "../components/styled";
import { Time } from "../components/Time"; import { Time } from "../components/Time";
@ -216,10 +217,13 @@ export function TransactionView({
</CenteredDialog> </CenteredDialog>
</Overlay> </Overlay>
) : undefined} ) : undefined}
<h2> <SubTitle>
<i18n.Translate>Withdrawal</i18n.Translate> <i18n.Translate>Withdrawal</i18n.Translate>
</h2> </SubTitle>
<Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} format="dd MMMM yyyy, HH:mm" /> <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
/>
{transaction.pending ? ( {transaction.pending ? (
transaction.withdrawalDetails.type === transaction.withdrawalDetails.type ===
WithdrawalType.ManualTransfer ? ( WithdrawalType.ManualTransfer ? (
@ -340,10 +344,13 @@ export function TransactionView({
return ( return (
<TransactionTemplate> <TransactionTemplate>
<h2> <SubTitle>
<i18n.Translate>Payment</i18n.Translate> <i18n.Translate>Payment</i18n.Translate>
</h2> </SubTitle>
<Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} format="dd MMMM yyyy, HH:mm" /> <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
/>
<br /> <br />
<Part <Part
big big
@ -423,10 +430,13 @@ export function TransactionView({
).amount; ).amount;
return ( return (
<TransactionTemplate> <TransactionTemplate>
<h2> <SubTitle>
<i18n.Translate>Deposit</i18n.Translate> <i18n.Translate>Deposit</i18n.Translate>
</h2> </SubTitle>
<Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} format="dd MMMM yyyy, HH:mm" /> <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
/>
<br /> <br />
<Part <Part
big big
@ -457,10 +467,13 @@ export function TransactionView({
).amount; ).amount;
return ( return (
<TransactionTemplate> <TransactionTemplate>
<h2> <SubTitle>
<i18n.Translate>Refresh</i18n.Translate> <i18n.Translate>Refresh</i18n.Translate>
</h2> </SubTitle>
<Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} format="dd MMMM yyyy, HH:mm" /> <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
/>
<br /> <br />
<Part <Part
big big
@ -491,10 +504,13 @@ export function TransactionView({
).amount; ).amount;
return ( return (
<TransactionTemplate> <TransactionTemplate>
<h2> <SubTitle>
<i18n.Translate>Tip</i18n.Translate> <i18n.Translate>Tip</i18n.Translate>
</h2> </SubTitle>
<Time timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} format="dd MMMM yyyy, HH:mm" /> <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm"
/>
<br /> <br />
<Part <Part
big big
@ -525,9 +541,9 @@ export function TransactionView({
).amount; ).amount;
return ( return (
<TransactionTemplate> <TransactionTemplate>
<h2> <SubTitle>
<i18n.Translate>Refund</i18n.Translate> <i18n.Translate>Refund</i18n.Translate>
</h2> </SubTitle>
<Time <Time
timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)} timestamp={AbsoluteTime.fromTimestamp(transaction.timestamp)}
format="dd MMMM yyyy, HH:mm" format="dd MMMM yyyy, HH:mm"

13
packages/taler-wallet-webextension/src/wallet/Welcome.tsx
View File

@ -24,6 +24,7 @@ import { WalletDiagnostics } from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact"; import { Fragment, h, VNode } from "preact";
import { Checkbox } from "../components/Checkbox"; import { Checkbox } from "../components/Checkbox";
import { Diagnostics } from "../components/Diagnostics"; import { Diagnostics } from "../components/Diagnostics";
import { SubTitle, Title } from "../components/styled";
import { useTranslationContext } from "../context/translation"; import { useTranslationContext } from "../context/translation";
import { useDiagnostics } from "../hooks/useDiagnostics"; import { useDiagnostics } from "../hooks/useDiagnostics";
import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
@ -56,16 +57,16 @@ export function View({
const { i18n } = useTranslationContext(); const { i18n } = useTranslationContext();
return ( return (
<Fragment> <Fragment>
<h1> <Title>
<i18n.Translate>Browser Extension Installed!</i18n.Translate> <i18n.Translate>Browser Extension Installed!</i18n.Translate>
</h1> </Title>
<div> <div>
<p> <p>
<i18n.Translate>Thank you for installing the wallet.</i18n.Translate> <i18n.Translate>Thank you for installing the wallet.</i18n.Translate>
</p> </p>
<h2> <SubTitle>
<i18n.Translate>Permissions</i18n.Translate> <i18n.Translate>Permissions</i18n.Translate>
</h2> </SubTitle>
<Checkbox <Checkbox
label={ label={
<i18n.Translate> <i18n.Translate>
@ -82,9 +83,9 @@ export function View({
enabled={permissionsEnabled} enabled={permissionsEnabled}
onToggle={togglePermissions} onToggle={togglePermissions}
/> />
<h2> <SubTitle>
<i18n.Translate>Next Steps</i18n.Translate> <i18n.Translate>Next Steps</i18n.Translate>
</h2> </SubTitle>
<a href="https://demo.taler.net/" style={{ display: "block" }}> <a href="https://demo.taler.net/" style={{ display: "block" }}>
<i18n.Translate>Try the demo</i18n.Translate> » <i18n.Translate>Try the demo</i18n.Translate> »
</a> </a>

19
packages/taler-wallet-webextension/src/wallet/index.stories.tsx
View File

@ -33,5 +33,22 @@ import * as a12 from "./Settings.stories";
import * as a13 from "./Transaction.stories"; import * as a13 from "./Transaction.stories";
import * as a14 from "./Welcome.stories"; import * as a14 from "./Welcome.stories";
import * as a15 from "./AddNewActionView.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,
];