1 files changed, 10 insertions, 16 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
index db3842711..7723bec81 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -14,41 +14,35 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { TalerMerchantApi } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, VNode, h } from "preact";
+import { VNode, h } from "preact";
 import { QR } from "../../../../components/exception/QR.js";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js";
-import { useInstanceContext } from "../../../../context/instance.js";
-import { MerchantBackend } from "../../../../declaration.js";
-import { useBackendContext } from "../../../../context/backend.js";
+import { useSessionContext } from "../../../../context/session.js";
 
-type Entity = MerchantBackend.OTP.OtpDeviceAddDetails;
+type Entity = TalerMerchantApi.OtpDeviceAddDetails;
 
 interface Props {
   entity: Entity;
   onConfirm: () => void;
 }
 
-function isNotUndefined<X>(x: X | undefined): x is X {
-  return !!x;
-}
-
 export function CreatedSuccessfully({
   entity,
   onConfirm,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const { url: backendURL } = useBackendContext()
-  const { id: instanceId } = useInstanceContext();
-  const issuer = new URL(backendURL).hostname;
-  const qrText = `otpauth://totp/${instanceId}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key}`;
-  const qrTextSafe = `otpauth://totp/${instanceId}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(0, 6)}...`;
+  const { state } = useSessionContext();
+  const issuer = state.backendUrl.href;
+  const qrText = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key}`;
+  const qrTextSafe = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(0, 6)}...`;
 
   return (
     <Template onConfirm={onConfirm} >
       <p class="is-size-5">
         <i18n.Translate>
-          You can scan the next QR code with your device or safe the key before continue.
+          You can scan the next QR code with your device or save the key before continuing.
         </i18n.Translate>
       </p>
       <div class="field is-horizontal">