feat: added walkthrough to certain steps

README.md

@@ -1,4 +1,4 @@
-# TLSNotary Plugin Demo
+# [TLSNotary Plugin Demo](https://github.com/tlsnotary/tlsn-plugin-demo#tlsn-plugin-demo)
 
 Welcome to the **TLSNotary Plugin Demo**! This demo showcases how TLSNotary can be used to verify private user data in web applications.
 
@@ -30,5 +30,3 @@ This demo works by leveraging the [Provider API]((https://github.com/tlsnotary/t
 3. Insert a `poaps.txt` of POAP mint links and an empty `assignments.json` in `server/util`
 4. Run `npm run dev`
 5. Enjoy the demo
-
-

web/components/Header/index.tsx

@@ -8,7 +8,11 @@ export default function Header(): ReactElement {
     <header className="flex flex-row items-center justify-between h-16 px-4 bg-slate-200">
       <img className="w-8 h-8" src={Logo} />
       <div className="flex flex-row items-center">
-        <a href="" target="_blank" className="button !bg-transparent">
+        <a
+          href="https://github.com/tlsnotary/tlsn-plugin-demo#tlsn-plugin-demo"
+          target="_blank"
+          className="button !bg-transparent"
+        >
           About
         </a>
         <a

web/components/Steps/index.tsx

@@ -165,12 +165,39 @@ export default function Steps(): ReactElement {
             )}
             {step === 2 && (
               <div className="flex flex-col items-center justify-center gap-2">
+                <ul className="flex flex-col items-center justify-center gap-1">
+                  <li className="text-base font-light">
+                    This will open a new tab to Twitter/X and the sidebar for
+                    the extension
+                  </li>
+                  <li className="text-base font-light">
+                    Click through the steps in the sidebar
+                  </li>
+                  <li className="text-base font-light">
+                    Don't close the sidebar until notarization is finished
+                  </li>
+                  <li className="text-base font-light">
+                    If successful the attestation field will populate with the
+                    attestation from the notary
+                  </li>
+                </ul>
                 <Button onClick={handleRunPlugin} loading={loading}>
                   Run Plugin
                 </Button>
-                <span className="font-bold">
-                  Please keep the sidebar open during the notarization process
-                </span>
+              </div>
+            )}
+            {step === 3 && (
+              <div>
+                <ul className="flex flex-col justify-center items-center gap-1">
+                  <li className="text-base font-light">
+                    Click the "Verify" button below to verify the attestation
+                  </li>
+                  <li className="text-base font-light">
+                    If successful the verified data will show in the
+                    Presentation field and provide you with a link to claim your
+                    POAP
+                  </li>
+                </ul>
               </div>
             )}
             {step === 5 && (