diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/AccountPage/views.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage/views.tsx | 62 |
1 files changed, 18 insertions, 44 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index 83846be90..483cb579a 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -16,10 +16,10 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; +import { Attention } from "../../components/Attention.js"; import { Transactions } from "../../components/Transactions/index.js"; import { useBusinessAccountDetails } from "../../hooks/circuit.js"; import { useSettings } from "../../hooks/settings.js"; -import { bankUiSettings } from "../../settings.js"; import { PaymentOptions } from "../PaymentOptions.js"; import { State } from "./index.js"; @@ -31,53 +31,27 @@ export function InvalidIbanView({ error }: State.InvalidIban) { const IS_PUBLIC_ACCOUNT_ENABLED = false - function ShowDemoInfo(): VNode { const { i18n } = useTranslationContext(); const [settings, updateSettings] = useSettings(); if (!settings.showDemoDescription) return <Fragment /> - return <div class="rounded-md bg-blue-50 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-blue-800"> - <i18n.Translate>This is a demo bank!</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-blue-700"> - {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 class="mt-3 text-sm flex justify-end"> - <button type="button" class="inline-flex font-semibold items-center rounded bg-white px-2 py-1 text-xs text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" - onClick={(e) => { - e.preventDefault(); - updateSettings("showDemoDescription", false); - }} - > - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> - </svg> - </button> - </p> - - </div> - </div> - </div> - </div> + return <Attention title={i18n.str`This is a demo bank`} onClose={() => { + updateSettings("showDemoDescription", false); + }}> + {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> + )} + </Attention> } export function ReadyView({ account, limit, goToBusinessAccount, goToConfirmOperation }: State.Ready): VNode<{}> { |