diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
3 files changed, 44 insertions, 13 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> |