diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/PaymentOptions.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaymentOptions.tsx | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 573f8c769..2830f5c1e 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -26,12 +26,11 @@ import { useSettings } from "../hooks/settings.js"; * Let the user choose a payment option, * then specify the details trigger the action. */ -export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { +export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJson, goToConfirmOperation: (id: string) => void }): VNode { const { i18n } = useTranslationContext(); - const [settings, updateSettings] = useSettings(); + const [settings] = useSettings(); const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); - // const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined); return ( <div class="mt-2"> @@ -56,6 +55,14 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { <span id="project-type-0-description-0" class="mt-1 flex items-center text-sm text-gray-500"> <i18n.Translate>Withdraw digital money into your mobile wallet or browser extension</i18n.Translate> </span> + {!!settings.currentWithdrawalOperationId && + <span class="inline-flex items-center gap-x-1.5 rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700"> + <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true"> + <circle cx="3" cy="3" r="3" /> + </svg> + <i18n.Translate>Operation in progress</i18n.Translate> + </span> + } </span> </span> <svg class="h-5 w-5 text-indigo-600" style={{ visibility: tab === "charge-wallet" ? "visible" : "hidden" }} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> @@ -88,9 +95,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { <WalletWithdrawForm focus limit={limit} - onSuccess={(id) => { - updateSettings("currentWithdrawalOperationId", id); - }} + goToConfirmOperation={goToConfirmOperation} onCancel={() => { setTab(undefined) }} |