pending operations
This commit is contained in:
Sebastian
parent
2150f3d96b
commit
4d66f774c3
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 GridContext = createContext<ResponsiveSize>(toResponsive(12));
|
||||
const sizeVariantExpand = css`
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize {
|
||||
const sizeVariantAuto = css`
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
`;
|
||||
|
||||
const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12));
|
||||
|
||||
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-sm": relation(columns, ssize, "sm"),
|
||||
"--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-sm": relation(columns, ssize, "sm"),
|
||||
"--relation-col-vs-md": relation(columns, ssize, "md"),
|
||||
"--relation-col-vs-lg": relation(columns, ssize, "lg"),
|
||||
"--relation-col-vs-xl": relation(columns, ssize, "xl"),
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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.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.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
|
||||
<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.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.1 KiB |
3
packages/taler-wallet-webextension/static/img/wifi.svg
Normal file
3
packages/taler-wallet-webextension/static/img/wifi.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 348 B |
Loading…
Reference in New Issue
Block a user