diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-19 08:31:08 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:38 -0300 |
commit | a5406c5a5dc437e036168eb068db11d88e05bb0f (patch) | |
tree | 74ad5e0d858a5afb3e76ac0c692fdba866fed38f /packages/demobank-ui/src/pages/AccountPage | |
parent | e628ca1af851259e609a16d0b53b8d7abfc33716 (diff) | |
download | wallet-core-a5406c5a5dc437e036168eb068db11d88e05bb0f.tar.xz |
some ui
Diffstat (limited to 'packages/demobank-ui/src/pages/AccountPage')
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage/views.tsx | 93 |
1 files changed, 53 insertions, 40 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index b476759b4..f2cbbba6c 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -21,54 +21,67 @@ import { Transactions } from "../../components/Transactions/index.js"; import { PaymentOptions } from "../PaymentOptions.js"; import { State } from "./index.js"; import { CopyButton } from "../../components/CopyButton.js"; +import { bankUiSettings } from "../../settings.js"; -export function InvalidIbanView({error}:State.InvalidIban) { - return ( - <div>Payto from server is not valid "{error.data.paytoUri}"</div> - ); +export function InvalidIbanView({ error }: State.InvalidIban) { + return ( + <div>Payto from server is not valid "{error.data.paytoUri}"</div> + ); } -export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> { +const IS_PUBLIC_ACCOUNT_ENABLED = false + +function ImportantMessage(): VNode { const { i18n } = useTranslationContext(); - return <Fragment> - <div> - <h1 class="nav welcome-text"> - <i18n.Translate> - Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} /> - </i18n.Translate> - </h1> - </div> + return <div aria-live="assertive" class="pointer-events-none flex items-end px-4 py-6 sm:items-start sm:p-6"> + <div class="flex w-full flex-col items-center space-y-4 "> + <div class="pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"> + <div class="w-0 flex-1 p-4"> + <div class="flex items-start"> + <div class="ml-3 w-0 flex-1"> + <p class="text-sm font-medium text-gray-900"> + <i18n.Translate> + Welcome, "account" + </i18n.Translate> - <section id="assets"> - <div class="asset-summary"> - <h2>{i18n.str`Bank account balance`}</h2> - {!balance ? ( - <div class="large-amount" style={{ color: "gray" }}> - Waiting server response... + </p> + <p class="mt-1 text-sm text-gray-500"> + {bankUiSettings.showDemoNav && + <p> + {IS_PUBLIC_ACCOUNT_ENABLED ? ( + <i18n.Translate> + This part of the demo shows how a bank that supports Taler + directly would work. In addition to using your own bank + account, you can also see the transaction history of some{" "} + <a href="/public-accounts">Public Accounts</a>. + </i18n.Translate> + ) : ( + <i18n.Translate> + This part of the demo shows how a bank that supports Taler + directly would work. + </i18n.Translate> + )} + </p> + }</p> + </div> </div> - ) : ( - <div class="large-amount amount"> - {balanceIsDebit ? <b>-</b> : null} - <span class="value">{`${Amounts.stringifyValue(balance)}`}</span> - - <span class="currency">{`${balance.currency}`}</span> - </div> - )} - </div> - </section> - <section id="payments"> - <div class="payments"> - <h2>{i18n.str`Payments`}</h2> - <PaymentOptions limit={limit} /> + </div> + <div class="flex border-l border-gray-200"> + <button type="button" class="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"> + Dismiss + </button> + </div> </div> - </section> + </div> + </div> - <section style={{ marginTop: "2em" }}> - <div class="active"> - <h3>{i18n.str`Latest transactions`}</h3> - <Transactions account={account} /> - </div> - </section> +} + +export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> { + const { i18n } = useTranslationContext(); + return <Fragment> + <PaymentOptions limit={limit} /> + <Transactions account={account} /> </Fragment>; } |