diff options
-rw-r--r-- | packages/demobank-ui/src/hooks/useCredentialsChecker.ts | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage/views.tsx | 119 |
2 files changed, 40 insertions, 81 deletions
diff --git a/packages/demobank-ui/src/hooks/useCredentialsChecker.ts b/packages/demobank-ui/src/hooks/useCredentialsChecker.ts index 7745e2f5e..b3dedb654 100644 --- a/packages/demobank-ui/src/hooks/useCredentialsChecker.ts +++ b/packages/demobank-ui/src/hooks/useCredentialsChecker.ts @@ -15,7 +15,7 @@ export function useCredentialsChecker() { scope: "readwrite" as "write", //FIX: different than merchant duration: { // d_us: "forever" //FIX: should return shortest - d_us: 60 * 60 * 24 * 7 + d_us: 60 * 60 * 24 * 7 * 1000 * 1000 }, refreshable: true, } diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index 32aedebf2..83846be90 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -31,94 +31,53 @@ export function InvalidIbanView({ error }: State.InvalidIban) { const IS_PUBLIC_ACCOUNT_ENABLED = false -function ImportantMessage(): VNode { - const { i18n } = useTranslationContext(); - 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> - - </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> - <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> - </div> - </div> -} - -function ShowDemoInfo():VNode { +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"> - <p> - <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> - </p> - <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); - }} - > - Close - <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 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> -</div> } export function ReadyView({ account, limit, goToBusinessAccount, goToConfirmOperation }: State.Ready): VNode<{}> { @@ -128,7 +87,7 @@ export function ReadyView({ account, limit, goToBusinessAccount, goToConfirmOper <MaybeBusinessButton account={account} onClick={goToBusinessAccount} /> <ShowDemoInfo /> - + <PaymentOptions limit={limit} goToConfirmOperation={goToConfirmOperation} /> <Transactions account={account} /> </Fragment>; |