diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PendingTransactions.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | 81 |
1 files changed, 43 insertions, 38 deletions
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index 372ca7cb7..c94010ede 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -42,7 +42,10 @@ interface Props extends JSX.HTMLAttributes { */ const cache = { tx: [] as Transaction[] }; -export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode { +export function PendingTransactions({ + goToTransaction, + goToURL, +}: Props): VNode { const api = useBackendContext(); const state = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.GetTransactions, {}), @@ -59,8 +62,8 @@ export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode !state || state.hasError ? cache.tx : state.response.transactions.filter( - (t) => t.txState.major === TransactionMajorState.Pending, - ); + (t) => t.txState.major === TransactionMajorState.Pending, + ); if (state && !state.hasError) { cache.tx = transactions; @@ -87,50 +90,52 @@ export function PendingTransactionsView({ transactions: Transaction[]; }): VNode { const { i18n } = useTranslationContext(); - const kycTransaction = transactions.find(tx => tx.kycUrl) + const kycTransaction = transactions.find((tx) => tx.kycUrl); if (kycTransaction) { - return <div - style={{ - backgroundColor: "lightcyan", - display: "flex", - justifyContent: "center", - }} - > - <Banner - titleHead={i18n.str`KYC requirement`} + return ( + <div style={{ - backgroundColor: "lightred", - maxHeight: 150, - padding: 8, - flexGrow: 1, - maxWidth: 500, - overflowY: transactions.length > 3 ? "scroll" : "hidden", + backgroundColor: "#fff3cd", + color: "#664d03", + display: "flex", + justifyContent: "center", }} > - <Grid - container - item - xs={1} - wrap="nowrap" - role="button" - spacing={1} - alignItems="center" - onClick={() => { - goToURL(kycTransaction.kycUrl ?? "#") + <Banner + titleHead={i18n.str`KYC requirement`} + style={{ + backgroundColor: "lightred", + maxHeight: 150, + padding: 8, + flexGrow: 1, //#fff3cd //#ffecb5 + maxWidth: 500, + overflowY: transactions.length > 3 ? "scroll" : "hidden", }} > - <Grid item> - <Typography inline bold> - One or more transaction require a KYC step to complete - </Typography> + <Grid + container + item + xs={1} + wrap="nowrap" + role="button" + spacing={1} + alignItems="center" + onClick={() => { + goToURL(kycTransaction.kycUrl ?? "#"); + }} + > + <Grid item> + <Typography inline bold> + One or more transaction require a KYC step to complete + </Typography> + </Grid> </Grid> - - </Grid> - </Banner> - </div> + </Banner> + </div> + ); } - if (!goToTransaction) return <Fragment /> + if (!goToTransaction) return <Fragment />; return ( <div |