storybook like page for dev, plus some style fixes
This commit is contained in:
Sebastian
parent
2ba6692c6a
commit
1d85662946
@ -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'
|
||||
]
|
||||
|
||||
@ -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>
|
||||
|
||||
11
packages/taler-wallet-webextension/dev-html/stories.html
Normal file
11
packages/taler-wallet-webextension/dev-html/stories.html
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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];
|
||||
|
||||
322
packages/taler-wallet-webextension/src/stories.tsx
Normal file
322
packages/taler-wallet-webextension/src/stories.tsx
Normal 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/.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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";
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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{` `}
|
||||
|
||||
@ -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>}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user