fix(mobile-credential-online-presentation): various fixes (#169)

* fix(mobile-credential-online-presentation): env loading and ui * fix: typo and tailwind class * fix: typo * fix: duplicate and * fix: typo * fix: redirect loading state
mattrglobal · Sep 5, 2024 · d6196cd · d6196cd
1 parent 2f5060e
commit d6196cd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/mobile-credential-online-presentation/src/app/page.tsx b/mobile-credential-online-presentation/src/app/page.tsx
@@ -23,13 +23,11 @@ export default function Home() {
   const [loading, setLoading] = useState(false);
   const [results, setResults] = useState<MATTRVerifierSDK.PresentationSessionResult | null>(null);
 
-  // The apiBaseURl is the URL of a MATTR verifier tenant. This app is handling the same device
+  // The apiBaseUrl is the URL of a MATTR verifier tenant. This app is handling the same device
   // flow by loading the results directly after the redirect. If the apiBaseUrl is not provided
-  // via an environment variable, you can provide the URL in an input field and it is presisted
+  // via an environment variable, you can provide the URL in an input field and it is persisted
   // in localStorage.
-  const [apiBaseUrl, setApiBaseUrl] = useState<string | null>(
-    process.env.NEXT_PUBLIC_API_BASE_URL || localStorage.getItem("apiBaseUrl"),
-  );
+  const [apiBaseUrl, setApiBaseUrl] = useState<string | null>(null);
   const [redirectUri, setRedirectUri] = useState<string | null>(null);
 
   // The app allows the user to edit the credential query, see the CredentialConfig component.
@@ -48,7 +46,7 @@ export default function Home() {
 
   // To request credentials, we need to
   // 1. initialise the SDK,
-  // 2. repare the request options, and
+  // 2. prepare the request options, and
   // 3. call the requestCredentials function
   //
   // The mode is optional. If it is not provided, the SDK will determine the mode by the user
@@ -134,14 +132,14 @@ export default function Home() {
     setLoading(false);
   }, [apiBaseUrl]);
 
-  // In the same device flow, we check if URL contains a hash and and handle the
+  // In the same device flow, we check if URL contains a hash and handle the
   // redirect when the page loads
   useEffect(() => {
-    if (window.location.hash) {
+    if (window.location.hash && apiBaseUrl !== null) {
       setLoading(true);
       handleRedirect();
     }
-  }, [handleRedirect]);
+  }, [handleRedirect, apiBaseUrl]);
 
   return (
     <div className="flex flex-col mx-auto max-w-6xl mt-4 p-4 lg:mt-8">
@@ -209,7 +207,7 @@ export default function Home() {
           </div>
         </div>
 
-        <div className="flex flex-col w-full p-4 lg:p-8 rounded border-[1px] lg:w-[50%] bg-white rounded-lg">
+        <div className="flex flex-col w-full p-4 lg:p-8 rounded-lg border-[1px] lg:w-[50%] bg-white">
           <h2 className="text-lg lg:text-xl lg:pb-2 font-semibold tracking-tight">Results</h2>
           {!results && (
             <p className="text-gray-500">{loading ? "Loading results ..." : "No results yet."}</p>

diff --git a/mobile-credential-online-presentation/src/components/config.tsx b/mobile-credential-online-presentation/src/components/config.tsx
@@ -31,7 +31,7 @@ export function CredentialConfig({
     <div>
       <button
         type="button"
-        className={`flex pointer text-gray-400 ${!credentialQuery.error && "underline text-black"}`}
+        className={`flex pointer ${credentialQuery.error ? "no-underline text-gray-400" : "underline text-black"}`}
         onClick={() => setConfigVisible(!configVisible)}
         disabled={credentialQuery.error !== null}
       >