diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
9 files changed, 66 insertions, 25 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 37affd5b4..77d79d873 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -11,6 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> { elements: { icon?: VNode; description: VNode; + action?: () => void; }[]; confirm?: { label: string; @@ -39,6 +40,7 @@ export function Banner({ title, elements, confirm, ...rest }: Props) { wrap="nowrap" spacing={1} alignItems="center" + onClick={e.action} > {e.icon && ( <Grid item xs={"auto"}> diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index b2e567d7d..eed31beb4 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -8,24 +8,35 @@ import Banner from "./Banner"; import { Time } from "./Time"; import * as wxApi from "../wxApi"; -interface Props extends JSX.HTMLAttributes {} +interface Props extends JSX.HTMLAttributes { + goToTransaction: (id: string) => void; +} -export function PendingTransactions({}: Props) { +export function PendingTransactions({ goToTransaction }: Props) { const state = useAsyncAsHook(wxApi.getTransactions, [ NotificationType.WithdrawGroupFinished, ]); const transactions = - !state || state.hasError ? [] : state.response.transactions; + !state || state.hasError + ? [] + : state.response.transactions.filter((t) => t.pending); - if (!state || state.hasError) { + if (!state || state.hasError || !transactions.length) { return <Fragment />; } - return <PendingTransactionsView transactions={transactions} />; + return ( + <PendingTransactionsView + goToTransaction={goToTransaction} + transactions={transactions} + /> + ); } export function PendingTransactionsView({ transactions, + goToTransaction, }: { + goToTransaction: (id: string) => void; transactions: Transaction[]; }) { return ( @@ -35,6 +46,8 @@ export function PendingTransactionsView({ backgroundColor: "lightcyan", maxHeight: 150, padding: 8, + flexGrow: 1, + maxWidth: 500, overflowY: transactions.length > 3 ? "scroll" : "hidden", }} elements={transactions.map((t) => { @@ -51,6 +64,7 @@ export function PendingTransactionsView({ {t.type.substring(0, 1)} </Avatar> ), + action: () => goToTransaction(t.transactionId), description: ( <Typography> <b> diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index abcca9c26..b17dfce88 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -29,6 +29,7 @@ import imageHandHeart from "../../static/img/ri-hand-heart-line.svg"; import imageRefresh from "../../static/img/ri-refresh-line.svg"; import imageRefund from "../../static/img/ri-refund-2-line.svg"; import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg"; +import { Avatar } from "../mui/Avatar"; import { Pages } from "../NavigationBar"; import { Column, @@ -51,7 +52,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { debitCreditIndicator={"credit"} title={new URL(tx.exchangeBaseUrl).hostname} timestamp={tx.timestamp} - iconPath={imageBank} + iconPath={"W"} pending={tx.pending} /> ); @@ -64,7 +65,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { title={tx.info.merchant.name} subtitle={tx.info.summary} timestamp={tx.timestamp} - iconPath={imageShoppingCart} + iconPath={"P"} pending={tx.pending} /> ); @@ -76,7 +77,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { debitCreditIndicator={"credit"} title={tx.info.merchant.name} timestamp={tx.timestamp} - iconPath={imageRefund} + iconPath={"R"} pending={tx.pending} /> ); @@ -88,7 +89,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { debitCreditIndicator={"credit"} title={new URL(tx.merchantBaseUrl).hostname} timestamp={tx.timestamp} - iconPath={imageHandHeart} + iconPath={"T"} pending={tx.pending} /> ); @@ -100,7 +101,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { debitCreditIndicator={"credit"} title={new URL(tx.exchangeBaseUrl).hostname} timestamp={tx.timestamp} - iconPath={imageRefresh} + iconPath={"R"} pending={tx.pending} /> ); @@ -112,7 +113,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { debitCreditIndicator={"debit"} title={tx.targetPaytoUri} timestamp={tx.timestamp} - iconPath={imageBank} + iconPath={"D"} pending={tx.pending} /> ); @@ -121,8 +122,22 @@ export function TransactionItem(props: { tx: Transaction }): VNode { function TransactionLayout(props: TransactionLayoutProps): VNode { return ( - <HistoryRow href={Pages.balance_transaction.replace(":tid", props.id)}> - <img src={props.iconPath} /> + <HistoryRow + href={Pages.balance_transaction.replace(":tid", props.id)} + style={{ + backgroundColor: props.pending ? "lightcyan" : "inherit", + alignItems: "center", + }} + > + <Avatar + style={{ + border: "solid gray 1px", + color: "gray", + boxSizing: "border-box", + }} + > + {props.iconPath} + </Avatar> <Column> <LargeText> <div>{props.title}</div> diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index 345305fe1..d05b91f18 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren, createContext } from "preact"; +import { h, JSX, VNode, ComponentChildren, createContext } from "preact"; import { useContext } from "preact/hooks"; import { theme } from "./style"; @@ -31,7 +31,7 @@ const zeroMinWidthStyle = css` type GridSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; type SpacingSizes = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; -export interface Props { +export interface Props extends JSX.HTMLAttributes<HTMLDivElement> { columns?: number | Partial<ResponsiveSize>; container?: boolean; item?: boolean; @@ -226,6 +226,8 @@ export function Grid({ justifyContent, zeroMinWidth = false, children, + onClick, + ...rest }: Props): VNode { const cc = useContext(GridContext); const columns = !cp ? cc : toResponsive(cp); @@ -234,12 +236,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); - console.log(columnSpacing); - } const spacingStyles = !container ? {} : { @@ -312,7 +309,10 @@ export function Grid({ justifyContent, alignItems, flexWrap: wrap, + cursor: onClick ? "pointer" : "inherit", }} + onClick={onClick} + {...rest} > {children} </div> diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index 7ff4a694c..bfaddd7f8 100644 --- a/packages/taler-wallet-webextension/src/mui/Typography.tsx +++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -75,7 +75,6 @@ export function Typography({ : { textAlign: align, }; - console.log("typograph", cmp, variant); return h( cmp, { diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 6c9afbe84..c076f6670 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -83,7 +83,11 @@ function Application(): VNode { <DevContextProvider> {({ devMode }: { devMode: boolean }) => ( <IoCProviderForRuntime> - <PendingTransactions /> + <PendingTransactions + goToTransaction={(txId: string) => + route(Pages.balance_transaction.replace(":tid", txId)) + } + /> <Match> {({ path }: { path: string }) => <PopupNavBar path={path} />} </Match> @@ -139,6 +143,10 @@ function Application(): VNode { /> <Route + path={Pages.balance_transaction} + component={RedirectToWalletPage} + /> + <Route path={Pages.balance_manual_withdraw} component={RedirectToWalletPage} /> diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index df969c029..e37bf149b 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -120,7 +120,11 @@ function Application(): VNode { justifyContent: "center", }} > - <PendingTransactions /> + <PendingTransactions + goToTransaction={(txId: string) => + route(Pages.balance_transaction.replace(":tid", txId)) + } + /> </div> <WalletBox> {globalNotification && ( diff --git a/packages/taler-wallet-webextension/src/wxApi.ts b/packages/taler-wallet-webextension/src/wxApi.ts index 868bd8256..c306b17a9 100644 --- a/packages/taler-wallet-webextension/src/wxApi.ts +++ b/packages/taler-wallet-webextension/src/wxApi.ts @@ -395,7 +395,6 @@ export function onUpdateNotification(messageTypes: Array<NotificationType>, doCa const port = chrome.runtime.connect({ name: "notifications" }); const listener = (message: MessageFromBackend): void => { const shouldNotify = messageTypes.includes(message.type) - console.log("Notification arrived, should notify?", shouldNotify, message.type, messageTypes) if (shouldNotify) { doCallback(); } diff --git a/packages/taler-wallet-webextension/tsconfig.json b/packages/taler-wallet-webextension/tsconfig.json index 25920a120..482282871 100644 --- a/packages/taler-wallet-webextension/tsconfig.json +++ b/packages/taler-wallet-webextension/tsconfig.json @@ -35,4 +35,4 @@ "include": [ "src/**/*" ] -}
\ No newline at end of file +} |