[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 01/03: pending operations
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 01/03: pending operations |
|
Date: |
Fri, 11 Mar 2022 15:15:17 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 4d66f774c3ad4040f522d2ec52b5b4c2edd2b478
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Mar 11 02:17:40 2022 -0300
pending operations
---
.../src/components/Banner.stories.tsx | 68 ++++++++++++-
.../src/components/Banner.tsx | 83 +++++++---------
.../src/components/PendingTransactions.tsx | 46 +++++++++
.../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 | 30 +++++-
.../static/img/settings_black_24dp.svg | 7 +-
.../taler-wallet-webextension/static/img/wifi.svg | 3 +
14 files changed, 347 insertions(+), 73 deletions(-)
diff --git
a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 13630216..665b0de6 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: "lightblue", 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..09dfac81 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -1,64 +1,57 @@
-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 wrap="nowrap" spacing={1} alignItems="center">
+ {elements.map((e, i) => (
+ <Fragment key={i}>
+ {e.icon && (
+ <Grid item>
+ <Avatar>{e.icon}</Avatar>
+ </Grid>
+ )}
+ <Grid item>{e.description}</Grid>
+ </Fragment>
+ ))}
</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.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
new file mode 100644
index 00000000..99f43a62
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -0,0 +1,46 @@
+import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Typography } from "../mui/Typography";
+import Banner from "./Banner";
+import { Time } from "./Time";
+
+interface Props {
+ transactions: Transaction[];
+}
+
+export function PendingTransactions({ transactions }: Props) {
+ return (
+ <Banner
+ title="PENDING OPERATIONS"
+ style={{ backgroundColor: "lightblue", padding: 8 }}
+ 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..b185504e 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..199ff10d 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";
@@ -22,6 +28,7 @@ import { JustInDevMode } from "../components/JustInDevMode";
import { Loading } from "../components/Loading";
import { LoadingError } from "../components/LoadingError";
import { MultiActionButton } from "../components/MultiActionButton";
+import PendingTransactions from "../components/PendingTransactions";
import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
import { AddNewActionView } from "../wallet/AddNewActionView";
@@ -39,8 +46,19 @@ export function BalancePage({
goToWalletHistory,
}: Props): VNode {
const [addingAction, setAddingAction] = useState(false);
- const state = useAsyncAsHook(wxApi.getBalance);
- const balances = !state || state.hasError ? [] : state.response.balances;
+ const state = useAsyncAsHook(
+ async () => ({
+ balance: await wxApi.getBalance(),
+ pending: await wxApi.getTransactions(),
+ }),
+ [NotificationType.WithdrawGroupFinished],
+ );
+ const balances =
+ !state || state.hasError ? [] : state.response.balance.balances;
+ const pending =
+ !state || state.hasError
+ ? []
+ : state.response.pending.transactions.filter((t) => t.pending);
if (!state) {
return <Loading />;
@@ -62,6 +80,7 @@ export function BalancePage({
return (
<BalanceView
balances={balances}
+ pending={pending}
goToWalletManualWithdraw={goToWalletManualWithdraw}
goToWalletDeposit={goToWalletDeposit}
goToWalletHistory={goToWalletHistory}
@@ -71,6 +90,7 @@ export function BalancePage({
}
export interface BalanceViewProps {
balances: Balance[];
+ pending: Transaction[];
goToWalletManualWithdraw: () => void;
goToAddAction: () => void;
goToWalletDeposit: (currency: string) => void;
@@ -79,6 +99,7 @@ export interface BalanceViewProps {
export function BalanceView({
balances,
+ pending,
goToWalletManualWithdraw,
goToWalletDeposit,
goToWalletHistory,
@@ -96,6 +117,9 @@ export function BalanceView({
return (
<Fragment>
+ {pending.length > 0 ? (
+ <PendingTransactions transactions={pending} />
+ ) : undefined}
<section>
<BalanceTable
balances={balances}
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.