diff options
| author | Sebastian <sebasjm@gmail.com> | 2022-03-28 14:03:59 -0300 |
|---|---|---|
| committer | Sebastian <sebasjm@gmail.com> | 2022-03-28 14:04:06 -0300 |
| commit | 1d85662946c393ea6985c178842be40d38fc687d (patch) | |
| tree | c01293631a6fc13810458ea4638bb3f8daa4c389 | |
| parent | 2ba6692c6ad97285e852fb0b74a650e067817003 (diff) | |
storybook like page for dev, plus some style fixes
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 a34b4ff40..9cc776e02 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 d141faa2d..4b7fe34e8 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 000000000..1a726e183 --- /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 866bd0379..d1b5e45ad 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 e1b4dd2ac..f01e97eea 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 933195a9e..1b90a7ec1 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 f6ae02f72..28b84a534 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 790e8d9fa..99fe1f019 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 5767b5008..f05b72fe9 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 bef33dce1..a5e52d258 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 a35801741..f0ec2ca45 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 2af6526c2..50ea32d12 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 341b06b41..6965e2dbc 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 000000000..2f410f68c --- /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 88a84d960..7ecec1cb7 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 bc4b0357a..2691fbdf5 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 df93b0c4e..65cdee4e9 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 index 4dcfe2316..4dcfe2316 100644 --- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx +++ b/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 index d47b8ce7b..f4d717df6 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 1b40fe78e..e36fa112f 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 fae309ba7..6b8a6194d 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 136521e6b..ae4ba7e1e 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 84a2a7441..83ebfb51a 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 840e95651..478ce00a8 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 0e58aaf61..5cef86da8 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 36b4b13fc..1c068cfa3 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 1e19445f8..b03177825 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, +]; |