[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated (2150f3d9 -> ab68ecc7)
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated (2150f3d9 -> ab68ecc7) |
|
Date: |
Fri, 11 Mar 2022 15:15:16 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a change to branch master
in repository wallet-core.
from 2150f3d9 grid implementation
new 4d66f774 pending operations
new 9337734a commeting out until configure babel with linaria
new ab68ecc7 pending transaction, finally!
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../.storybook/preview.js | 2 +-
.../.babelrc => babel.config-linaria.json} | 8 +-
.../taler-wallet-webextension/rollup.config.js | 4 +
.../src/components/Banner.stories.tsx | 68 +++++++++-
.../src/components/Banner.tsx | 91 ++++++-------
.../src/components/PendingTransactions.stories.tsx | 143 +++++++++++++++++++++
.../src/components/PendingTransactions.tsx | 68 ++++++++++
.../src/components/styled/index.tsx | 3 +-
.../taler-wallet-webextension/src/mui/Avatar.tsx | 4 +-
.../taler-wallet-webextension/src/mui/Button.tsx | 2 +
.../src/mui/Grid.stories.tsx | 20 +++
.../taler-wallet-webextension/src/mui/Grid.tsx | 110 ++++++++++++++--
.../taler-wallet-webextension/src/mui/Paper.tsx | 18 ++-
.../src/mui/Typography.tsx | 3 +
.../taler-wallet-webextension/src/mui/style.tsx | 23 +++-
.../src/popup/BalancePage.tsx | 12 +-
.../src/popupEntryPoint.tsx | 2 +
.../src/walletEntryPoint.tsx | 10 ++
.../static/img/settings_black_24dp.svg | 7 +-
.../taler-wallet-webextension/static/img/wifi.svg | 3 +
20 files changed, 526 insertions(+), 75 deletions(-)
copy packages/taler-wallet-webextension/{.storybook/.babelrc =>
babel.config-linaria.json} (80%)
create mode 100644
packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
create mode 100644
packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
create mode 100644 packages/taler-wallet-webextension/static/img/wifi.svg
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js
b/packages/taler-wallet-webextension/.storybook/preview.js
index 9c1365d3..02d8a0e0 100644
--- a/packages/taler-wallet-webextension/.storybook/preview.js
+++ b/packages/taler-wallet-webextension/.storybook/preview.js
@@ -128,7 +128,7 @@ export const decorators = [
<Story />
</div>
}
- if (kind.startsWith('mui')) {
+ if (kind.startsWith('mui') || kind.startsWith('component')) {
return <div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Story />
</div>
diff --git a/packages/taler-wallet-webextension/.storybook/.babelrc
b/packages/taler-wallet-webextension/babel.config-linaria.json
similarity index 80%
copy from packages/taler-wallet-webextension/.storybook/.babelrc
copy to packages/taler-wallet-webextension/babel.config-linaria.json
index 4476798e..abf87db8 100644
--- a/packages/taler-wallet-webextension/.storybook/.babelrc
+++ b/packages/taler-wallet-webextension/babel.config-linaria.json
@@ -18,9 +18,13 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
+/*
+ * Linaria need pre-process typscript files into javascript before running.
+ * We choose to use the default preact-cli config.
+ * This file should be used from @linaria/rollup plugin only
+ */
{
- //FIXME: check if we can remove this preset and just use default storybook
presets
"presets": [
"preact-cli/babel",
]
-}
\ No newline at end of file
+}
diff --git a/packages/taler-wallet-webextension/rollup.config.js
b/packages/taler-wallet-webextension/rollup.config.js
index edbc6962..8058ce25 100644
--- a/packages/taler-wallet-webextension/rollup.config.js
+++ b/packages/taler-wallet-webextension/rollup.config.js
@@ -71,6 +71,10 @@ const makePlugins = () => [
image(),
linaria({
+ babelOptions: {
+ babelrc: false,
+ configFile: './babel.config-linaria.json',
+ },
sourceMap: process.env.NODE_ENV !== 'production',
}),
diff --git
a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 13630216..4d5b2220 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -20,7 +20,10 @@
*/
import { Banner } from "./Banner";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Icon } from "./styled";
+import { Typography } from "../mui/Typography";
export default {
title: "mui/banner",
@@ -44,11 +47,72 @@ function Wrapper({ children }: any) {
</div>
);
}
+function SignalWifiOffIcon({ ...rest }: any): VNode {
+ return <Icon {...rest} />;
+}
export const BasicExample = () => (
<Fragment>
<Wrapper>
- <Banner />
+ <p>
+ Example taken from:
+ <a
+ target="_blank"
+ rel="noreferrer"
+
href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df";
+ >
+
https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df
+ </a>
+ </p>
+ <Banner
+ elements={[
+ {
+ icon: <SignalWifiOffIcon />,
+ description: (
+ <Typography>
+ You have lost connection to the internet. This app is offline.
+ </Typography>
+ ),
+ },
+ ]}
+ confirm={{
+ label: "turn on wifi",
+ action: () => {
+ return null;
+ },
+ }}
+ />
+ </Wrapper>
+ </Fragment>
+);
+
+export const PendingOperation = () => (
+ <Fragment>
+ <Wrapper>
+ <Banner
+ title="PENDING TRANSACTIONS"
+ style={{ backgroundColor: "lightcyan", padding: 8 }}
+ elements={[
+ {
+ icon: (
+ <Avatar
+ style={{
+ border: "solid blue 1px",
+ color: "blue",
+ boxSizing: "border-box",
+ }}
+ >
+ P
+ </Avatar>
+ ),
+ description: (
+ <Typography>
+ <b>EUR 37.95</b> - 5 feb 2022
+ </Typography>
+ ),
+ },
+ ]}
+ />
</Wrapper>
</Fragment>
);
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx
b/packages/taler-wallet-webextension/src/components/Banner.tsx
index f6af8118..37affd5b 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -1,64 +1,65 @@
-import { h, Fragment, VNode } from "preact";
+import { h, Fragment, VNode, JSX } from "preact";
import { Divider } from "../mui/Divider";
import { Button } from "../mui/Button";
import { Typography } from "../mui/Typography";
import { Avatar } from "../mui/Avatar";
import { Grid } from "../mui/Grid";
import { Paper } from "../mui/Paper";
-import { Icon } from "./styled";
-import settingsIcon from "../../static/img/settings_black_24dp.svg";
-// & > a > div.settings-icon {
-// mask: url(${settingsIcon}) no-repeat center;
-// background-color: white;
-// width: 24px;
-// height: 24px;
-// margin-left: auto;
-// margin-right: 8px;
-// padding: 4px;
-// }
-// & > a.active {
-// background-color: #f8faf7;
-// color: #0042b2;
-// font-weight: bold;
-// }
-// & > a.active > div.settings-icon {
-// background-color: #0042b2;
-// }
-function SignalWifiOffIcon({ ...rest }: any): VNode {
- return <Icon {...rest} />;
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+ title?: string;
+ elements: {
+ icon?: VNode;
+ description: VNode;
+ }[];
+ confirm?: {
+ label: string;
+ action: () => void;
+ };
}
-export function Banner({}: {}) {
+export function Banner({ title, elements, confirm, ...rest }: Props) {
return (
<Fragment>
- <Paper elevation={3} /*className={classes.paper}*/>
- <Grid
- container
- // wrap="nowrap"
- // spacing={10}
- alignItems="center"
- columns={3}
- >
- <Grid item xs={1}>
- <Avatar>
- <SignalWifiOffIcon style={{ backgroundColor: "red" }} />
- </Avatar>
- </Grid>
- <Grid item xs={1}>
- <Typography>
- You have lost connection to the internet. This app is offline.
- </Typography>
+ <Paper elevation={0} {...rest}>
+ {title && (
+ <Grid container>
+ <Grid item>
+ <Typography>{title}</Typography>
+ </Grid>
</Grid>
+ )}
+ <Grid container columns={1}>
+ {elements.map((e, i) => (
+ <Grid
+ container
+ item
+ xs={1}
+ key={i}
+ wrap="nowrap"
+ spacing={1}
+ alignItems="center"
+ >
+ {e.icon && (
+ <Grid item xs={"auto"}>
+ <Avatar>{e.icon}</Avatar>
+ </Grid>
+ )}
+ <Grid item>{e.description}</Grid>
+ </Grid>
+ ))}
</Grid>
- <Grid container justifyContent="flex-end" spacing={8} columns={3}>
- <Grid item xs={1}>
- <Button color="primary">Turn on wifi</Button>
+ {confirm && (
+ <Grid container justifyContent="flex-end" spacing={8}>
+ <Grid item>
+ <Button color="primary" onClick={confirm.action}>
+ {confirm.label}
+ </Button>
+ </Grid>
</Grid>
- </Grid>
+ )}
</Paper>
<Divider />
- {/* <CssBaseline /> */}
</Fragment>
);
}
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
new file mode 100644
index 00000000..658a41aa
--- /dev/null
+++
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
@@ -0,0 +1,143 @@
+/*
+ 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 { PendingTransactionsView as TestedComponent } from
"./PendingTransactions";
+import { Fragment, h, VNode } from "preact";
+import { createExample } from "../test-utils";
+import { Transaction, TransactionType } from "@gnu-taler/taler-util";
+
+export default {
+ title: "component/PendingTransactions",
+ component: TestedComponent,
+};
+
+export const OnePendingTransaction = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
+
+export const ThreePendingTransactions = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
+
+export const TenPendingTransactions = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
new file mode 100644
index 00000000..b2e567d7
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -0,0 +1,68 @@
+import { Amounts, NotificationType, Transaction } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, JSX } from "preact";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { Avatar } from "../mui/Avatar";
+import { Typography } from "../mui/Typography";
+import Banner from "./Banner";
+import { Time } from "./Time";
+import * as wxApi from "../wxApi";
+
+interface Props extends JSX.HTMLAttributes {}
+
+export function PendingTransactions({}: Props) {
+ const state = useAsyncAsHook(wxApi.getTransactions, [
+ NotificationType.WithdrawGroupFinished,
+ ]);
+ const transactions =
+ !state || state.hasError ? [] : state.response.transactions;
+
+ if (!state || state.hasError) {
+ return <Fragment />;
+ }
+ return <PendingTransactionsView transactions={transactions} />;
+}
+
+export function PendingTransactionsView({
+ transactions,
+}: {
+ transactions: Transaction[];
+}) {
+ return (
+ <Banner
+ title="PENDING OPERATIONS"
+ style={{
+ backgroundColor: "lightcyan",
+ maxHeight: 150,
+ padding: 8,
+ overflowY: transactions.length > 3 ? "scroll" : "hidden",
+ }}
+ elements={transactions.map((t) => {
+ const amount = Amounts.parseOrThrow(t.amountEffective);
+ return {
+ icon: (
+ <Avatar
+ style={{
+ border: "solid blue 1px",
+ color: "blue",
+ boxSizing: "border-box",
+ }}
+ >
+ {t.type.substring(0, 1)}
+ </Avatar>
+ ),
+ description: (
+ <Typography>
+ <b>
+ {amount.currency} {Amounts.stringifyValue(amount)}
+ </b>{" "}
+ - <Time timestamp={t.timestamp} format="dd MMMM yyyy" />
+ </Typography>
+ ),
+ };
+ })}
+ />
+ );
+}
+
+export default PendingTransactions;
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 80bfaa54..92f149ea 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -778,6 +778,7 @@ export const WarningBox = styled(ErrorBox)`
`;
import settingsIcon from "../../../static/img/settings_black_24dp.svg";
+import wifiIcon from "../../../static/img/wifi.svg";
export const NavigationHeaderHolder = styled.div`
width: 100%;
@@ -827,7 +828,7 @@ export const NavigationHeader = styled.div`
`;
export const Icon = styled.div`
- mask: url(${settingsIcon}) no-repeat center;
+ mask: url(${wifiIcon}) no-repeat center;
background-color: gray;
width: 24px;
height: 24px;
diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx
b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
index d5bd9d42..091964a6 100644
--- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
@@ -1,5 +1,5 @@
import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
import { theme } from "./style";
const root = css`
@@ -33,7 +33,7 @@ const avatarImageStyle = css`
text-indent: 10000;
`;
-interface Props {
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
variant?: "circular" | "rounded" | "square";
children?: ComponentChildren;
}
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx
b/packages/taler-wallet-webextension/src/mui/Button.tsx
index f3272a57..ccca360f 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -15,6 +15,7 @@ interface Props {
startIcon?: VNode;
variant?: "contained" | "outlined" | "text";
color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+ onClick?: () => void;
}
const baseStyle = css`
@@ -139,6 +140,7 @@ export function Button({
variant = "text",
size = "medium",
color = "primary",
+ onClick,
}: Props): VNode {
const style = css`
user-select: none;
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
index 3c936132..7db608d2 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
@@ -178,6 +178,26 @@ export const Responsive12Spacing = () => (
</Fragment>
);
+export const ResponsiveAuthWidth = () => (
+ <Fragment>
+ <Wrapper>
+ <Grid container columns={12}>
+ <Grid item>
+ <Item>item 1</Item>
+ </Grid>
+ <Grid item xs={1}>
+ <Item>item 2 short</Item>
+ </Grid>
+ <Grid item>
+ <Item>item 3 with long text </Item>
+ </Grid>
+ <Grid item xs={"true"}>
+ <Item>item 4</Item>
+ </Grid>
+ </Grid>
+ </Wrapper>
+ </Fragment>
+);
export const Example = () => (
<Wrapper>
<p>Item row space is responsive: xs=6 sm=4 md=1</p>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx
b/packages/taler-wallet-webextension/src/mui/Grid.tsx
index ccabed06..345305fe 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx
@@ -90,6 +90,20 @@ const columnGapVariant = css`
padding-left: var(--space-col-md);
}
}
+ ${theme.breakpoints.up("lg")} {
+ width: calc(100% + var(--space-col-lg));
+ margin-left: calc(-1 * var(--space-col-lg));
+ & > div {
+ padding-left: var(--space-col-lg);
+ }
+ }
+ ${theme.breakpoints.up("xl")} {
+ width: calc(100% + var(--space-col-xl));
+ margin-left: calc(-1 * var(--space-col-xl));
+ & > div {
+ padding-left: var(--space-col-xl);
+ }
+ }
`;
const rowGapVariant = css`
${theme.breakpoints.up("xs")} {
@@ -110,31 +124,77 @@ const rowGapVariant = css`
padding-top: var(--space-row-md);
}
}
+ ${theme.breakpoints.up("lg")} {
+ margin-top: calc(-1 * var(--space-row-lg));
+ & > div {
+ padding-top: var(--space-row-lg);
+ }
+ }
+ ${theme.breakpoints.up("xl")} {
+ margin-top: calc(-1 * var(--space-row-xl));
+ & > div {
+ padding-top: var(--space-row-xl);
+ }
+ }
`;
-const sizeVariant = css`
+const sizeVariantXS = css`
${theme.breakpoints.up("xs")} {
flex-basis: var(--relation-col-vs-xs);
flex-grow: 0;
max-width: var(--relation-col-vs-xs);
}
+`;
+const sizeVariantSM = css`
${theme.breakpoints.up("sm")} {
flex-basis: var(--relation-col-vs-sm);
flex-grow: 0;
max-width: var(--relation-col-vs-sm);
}
+`;
+const sizeVariantMD = css`
${theme.breakpoints.up("md")} {
flex-basis: var(--relation-col-vs-md);
flex-grow: 0;
max-width: var(--relation-col-vs-md);
}
`;
+const sizeVariantLG = css`
+ ${theme.breakpoints.up("lg")} {
+ flex-basis: var(--relation-col-vs-lg);
+ flex-grow: 0;
+ max-width: var(--relation-col-vs-lg);
+ }
+`;
+const sizeVariantXL = css`
+ ${theme.breakpoints.up("xl")} {
+ flex-basis: var(--relation-col-vs-xl);
+ flex-grow: 0;
+ max-width: var(--relation-col-vs-xl);
+ }
+`;
+
+const sizeVariantExpand = css`
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
+`;
+
+const sizeVariantAuto = css`
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+ max-width: none;
+ width: auto;
+`;
-const GridContext = createContext<ResponsiveSize>(toResponsive(12));
+const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12));
-function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize {
+function toResponsive(
+ v: number | Partial<ResponsiveSize>,
+): Partial<ResponsiveSize> {
const p = typeof v === "number" ? { xs: v } : v;
- const xs = p.xs || 12;
+ const xs = p.xs;
const sm = p.sm || xs;
const md = p.md || sm;
const lg = p.lg || md;
@@ -174,6 +234,7 @@ export function Grid({
const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing);
const ssize = toResponsive({ xs, md, lg, xl, sm } as any);
+ console.log(ssize);
if (container) {
console.log(rowSpacing);
@@ -197,23 +258,51 @@ export function Grid({
const relationStyles = !item
? {}
: {
+ "--relation-col-vs-xs": relation(columns, ssize, "xs"),
"--relation-col-vs-sm": relation(columns, ssize, "sm"),
+ "--relation-col-vs-md": relation(columns, ssize, "md"),
"--relation-col-vs-lg": relation(columns, ssize, "lg"),
- "--relation-col-vs-xs": relation(columns, ssize, "xs"),
"--relation-col-vs-xl": relation(columns, ssize, "xl"),
- "--relation-col-vs-md": relation(columns, ssize, "md"),
};
return (
<GridContext.Provider value={columns}>
<div
- id={container ? "container" : "item"}
class={[
root,
container && containerStyle,
item && itemStyle,
zeroMinWidth && zeroMinWidthStyle,
- sizeVariant,
+ xs &&
+ (xs === "auto"
+ ? sizeVariantAuto
+ : xs === "true"
+ ? sizeVariantExpand
+ : sizeVariantXS),
+ sm &&
+ (sm === "auto"
+ ? sizeVariantAuto
+ : sm === "true"
+ ? sizeVariantExpand
+ : sizeVariantSM),
+ md &&
+ (md === "auto"
+ ? sizeVariantAuto
+ : md === "true"
+ ? sizeVariantExpand
+ : sizeVariantMD),
+ lg &&
+ (lg === "auto"
+ ? sizeVariantAuto
+ : lg === "true"
+ ? sizeVariantExpand
+ : sizeVariantLG),
+ xl &&
+ (xl === "auto"
+ ? sizeVariantAuto
+ : xl === "true"
+ ? sizeVariantExpand
+ : sizeVariantXL),
container && columnGapVariant,
container && rowGapVariant,
].join(" ")}
@@ -222,6 +311,7 @@ export function Grid({
...spacingStyles,
justifyContent,
alignItems,
+ flexWrap: wrap,
}}
>
{children}
@@ -230,8 +320,8 @@ export function Grid({
);
}
function relation(
- cols: ResponsiveSize,
- values: ResponsiveSize,
+ cols: Partial<ResponsiveSize>,
+ values: Partial<ResponsiveSize>,
size: ResponsiveKeys,
) {
const colsNum = typeof cols === "number" ? cols : cols[size] || 12;
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx
b/packages/taler-wallet-webextension/src/mui/Paper.tsx
index 00eeda32..6209aa7a 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx
@@ -1,5 +1,5 @@
import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
import { alpha } from "./colors/manipulation";
import { theme } from "./style";
@@ -20,17 +20,20 @@ const baseStyle = css`
}
`;
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+ elevation?: number;
+ square?: boolean;
+ variant?: "elevation" | "outlined";
+ children?: ComponentChildren;
+}
+
export function Paper({
elevation = 1,
square,
variant = "elevation",
children,
-}: {
- elevation?: number;
- square?: boolean;
- variant?: "elevation" | "outlined";
- children?: ComponentChildren;
-}): VNode {
+ ...rest
+}: Props): VNode {
return (
<div
class={[
@@ -45,6 +48,7 @@ export function Paper({
getOverlayAlpha(elevation),
)}, ${alpha("#fff", getOverlayAlpha(elevation))})`,
}}
+ {...rest}
>
{children}
</div>
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx
b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index 830f1005..7ff4a694 100644
--- a/packages/taler-wallet-webextension/src/mui/Typography.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx
@@ -1,5 +1,6 @@
import { css } from "@linaria/core";
import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { theme } from "./style";
type VariantEnum =
| "body1"
@@ -74,6 +75,7 @@ export function Typography({
: {
textAlign: align,
};
+ console.log("typograph", cmp, variant);
return h(
cmp,
{
@@ -82,6 +84,7 @@ export function Typography({
noWrap && noWrapStyle,
gutterBottom && gutterBottomStyle,
paragraph && paragraphStyle,
+ theme.typography[variant as "button"], //FIXME: implement the rest of
the typography and remove the casting
].join(" "),
style: {
...alignStyle,
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx
b/packages/taler-wallet-webextension/src/mui/style.tsx
index e2af05c4..5f9cd224 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -24,7 +24,7 @@ export function pxToRem(size: number): string {
export interface Spacing {
(): string;
- (value: number): string;
+ (value?: number): string;
(topBottom: number, rightLeft: number): string;
(top: number, rightLeft: number, bottom: number): string;
(top: number, right: number, bottom: number, left: number): string;
@@ -184,11 +184,14 @@ function createTheme() {
spacing: spacingInput,
});
- const spacing = (...argsInput: ReadonlyArray<number | string>): string => {
+ const spacing = (
+ ...argsInput: ReadonlyArray<number | string | undefined>
+ ): string => {
const args = argsInput.length === 0 ? [1] : argsInput;
return args
.map((argument) => {
+ if (argument === undefined) return "";
const output = transform(argument);
return typeof output === "number" ? `${output}px` : output;
})
@@ -348,6 +351,7 @@ function createTheme() {
// ...other
// } = typography;
const variants = {
+ // (fontWeight, size, lineHeight, letterSpacing, casing) =>
// h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
// h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
// h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
@@ -356,7 +360,21 @@ function createTheme() {
// h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
// subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
// subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
+ body1: css`
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: ${fontWeightRegular};
+ font-size: ${pxToRem(16)};
+ line-height: 1.5;
+ letter-spacing: ${round(0.15 / 16)}em;
+ `,
// body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
+ body2: css`
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: ${fontWeightRegular};
+ font-size: ${pxToRem(14)};
+ line-height: 1.43;
+ letter-spacing: ${round(0.15 / 14)}em;
+ `,
// body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
button: css`
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -366,6 +384,7 @@ function createTheme() {
letter-spacing: ${round(0.4 / 14)}em;
text-transform: uppercase;
`,
+ /* just of caseAllCaps */
// button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
// caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
// overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index d7bfdf54..53b4e151 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -14,7 +14,13 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
+import {
+ Amounts,
+ Balance,
+ i18n,
+ NotificationType,
+ Transaction,
+} from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import { BalanceTable } from "../components/BalanceTable";
@@ -39,7 +45,9 @@ export function BalancePage({
goToWalletHistory,
}: Props): VNode {
const [addingAction, setAddingAction] = useState(false);
- const state = useAsyncAsHook(wxApi.getBalance);
+ const state = useAsyncAsHook(wxApi.getBalance, [
+ NotificationType.WithdrawGroupFinished,
+ ]);
const balances = !state || state.hasError ? [] : state.response.balances;
if (!state) {
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 56d1e60e..6c9afbe8 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -26,6 +26,7 @@ import { Fragment, h, render, VNode } from "preact";
import Router, { route, Route } from "preact-router";
import { Match } from "preact-router/match";
import { useEffect } from "preact/hooks";
+import PendingTransactions from "./components/PendingTransactions";
import { PopupBox } from "./components/styled";
import { DevContextProvider } from "./context/devContext";
import { IoCProviderForRuntime } from "./context/iocContext";
@@ -82,6 +83,7 @@ function Application(): VNode {
<DevContextProvider>
{({ devMode }: { devMode: boolean }) => (
<IoCProviderForRuntime>
+ <PendingTransactions />
<Match>
{({ path }: { path: string }) => <PopupNavBar path={path} />}
</Match>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index f2240cdf..df969c02 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -27,6 +27,7 @@ import Router, { route, Route } from "preact-router";
import Match from "preact-router/match";
import { useEffect, useState } from "preact/hooks";
import { LogoHeader } from "./components/LogoHeader";
+import PendingTransactions from "./components/PendingTransactions";
import {
NavigationHeader,
NavigationHeaderHolder,
@@ -112,6 +113,15 @@ function Application(): VNode {
);
}}
</Match>
+ <div
+ style={{
+ backgroundColor: "lightcyan",
+ display: "flex",
+ justifyContent: "center",
+ }}
+ >
+ <PendingTransactions />
+ </div>
<WalletBox>
{globalNotification && (
<SuccessBox onClick={clearNotification}>
diff --git
a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
index f53024e8..adcd5040 100644
--- a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
+++ b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg"; enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path
d="M0,0h24v24H0V0z" fill="none"/><path
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61
l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41
h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6. [...]
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"; enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+ <g>
+ <path d="M0,0h24v24H0V0z" fill="none" />
+ <path
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61
l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41
h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87
C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58
c-0.18,0.14-0.23,0.41-0 [...]
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/static/img/wifi.svg
b/packages/taler-wallet-webextension/static/img/wifi.svg
new file mode 100644
index 00000000..ad712435
--- /dev/null
+++ b/packages/taler-wallet-webextension/static/img/wifi.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px">
+ <path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8
23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63
14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"></path>
+</svg>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (2150f3d9 -> ab68ecc7),
gnunet <=