1 files changed, 27 insertions, 22 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
index 1e9186624..f2b1db29b 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx
@@ -25,19 +25,23 @@ import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../components/exception/AsyncButton.js";
 import { FormProvider } from "../../../components/form/FormProvider.js";
 import { Input } from "../../../components/form/Input.js";
-import { useInstanceContext } from "../../../context/instance.js";
-import { AccessToken } from "../../../declaration.js";
 import { NotificationCard } from "../../../components/menu/index.js";
+import { useSessionContext } from "../../../context/session.js";
+import { AccessToken } from "@gnu-taler/taler-util";
 
 interface Props {
-  instanceId: string;
   hasToken: boolean | undefined;
   onClearToken: (c: AccessToken | undefined) => void;
   onNewToken: (c: AccessToken | undefined, s: AccessToken) => void;
   onBack?: () => void;
 }
 
-export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearToken }: Props): VNode {
+export function DetailPage({
+  hasToken,
+  onBack,
+  onNewToken,
+  onClearToken,
+}: Props): VNode {
   type State = { old_token: string; new_token: string; repeat_token: string };
   const [form, setValue] = useState<Partial<State>>({
     old_token: "",
@@ -47,9 +51,10 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
   const { i18n } = useTranslationContext();
 
   const errors = {
-    old_token: hasToken && !form.old_token
-      ? i18n.str`you need your access token to perform the operation`
-      : undefined,
+    old_token:
+      hasToken && !form.old_token
+        ? i18n.str`you need your access token to perform the operation`
+        : undefined,
     new_token: !form.new_token
       ? i18n.str`cannot be empty`
       : form.new_token === form.old_token
@@ -65,15 +70,17 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
     (k) => (errors as any)[k] !== undefined,
   );
 
-  const instance = useInstanceContext();
+  const { state } = useSessionContext();
 
-  const text = i18n.str`You are updating the access token from instance with id "${instance.id}"`;
+  const text = i18n.str`You are updating the access token from instance with id "${state.instance}"`;
 
   async function submitForm() {
     if (hasErrors) return;
-    const oldToken = hasToken ? `secret-token:${form.old_token}` as AccessToken : undefined;
+    const oldToken = hasToken
+      ? (`secret-token:${form.old_token}` as AccessToken)
+      : undefined;
     const newToken = `secret-token:${form.new_token}` as AccessToken;
-    onNewToken(oldToken, newToken)
+    onNewToken(oldToken, newToken);
   }
 
   return (
@@ -84,9 +91,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
             <div class="level">
               <div class="level-left">
                 <div class="level-item">
-                  <span class="is-size-4">
-                    {text}
-                  </span>
+                  <span class="is-size-4">{text}</span>
                 </div>
               </div>
             </div>
@@ -94,7 +99,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
         </section>
         <hr />
 
-        {!hasToken &&
+        {!hasToken && (
           <NotificationCard
             notification={{
               message: i18n.str`This instance doesn't have authentication token.`,
@@ -102,7 +107,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
               type: "WARN",
             }}
           />
-        }
+        )}
 
         <div class="columns">
           <div class="column" />
@@ -119,7 +124,8 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
                     />
                     <p>
                       <i18n.Translate>
-                        Clearing the access token will mean public access to the instance.
+                        Clearing the access token will mean public access to the
+                        instance.
                       </i18n.Translate>
                     </p>
                     <div class="buttons is-right mt-5">
@@ -127,10 +133,11 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
                         class="button"
                         onClick={() => {
                           if (hasToken) {
-                            const oldToken = `secret-token:${form.old_token}` as AccessToken;
-                            onClearToken(oldToken)
+                            const oldToken =
+                              `secret-token:${form.old_token}` as AccessToken;
+                            onClearToken(oldToken);
                           } else {
-                            onClearToken(undefined)
+                            onClearToken(undefined);
                           }
                         }}
                       >
@@ -140,7 +147,6 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
                   </Fragment>
                 )}
 
-
                 <Input<State>
                   name="new_token"
                   label={i18n.str`New access token`}
@@ -176,7 +182,6 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo
           </div>
           <div class="column" />
         </div>
-
       </section>
     </div>
   );