Merge pull request #100 from HunnySajid/feat/welcome-screen

feat: welcome screen for example app
WebOfTrust · Feb 20, 2024 · 7791ba9 · 7791ba9
2 parents aaeb765 + 8497b54
commit 7791ba9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/GETTING_STARTED_WEB_CLI.md b/GETTING_STARTED_WEB_CLI.md
@@ -73,3 +73,5 @@ useEffect(() => {
 
 ### Example Usage
 Visit [example-web/my-app](./example-web/my-app/src/App.js) to see example.
+
+Visit [Live Demo](https://signify-browser-extension.vercel.app/) for production demo.
diff --git a/example-web/my-app/src/App.css b/example-web/my-app/src/App.css
@@ -24,6 +24,10 @@
   color: white;
 }
 
+.Welcome {
+  width: 600px;
+}
+
 .App-link {
   color: #61dafb;
 }

diff --git a/example-web/my-app/src/App.js b/example-web/my-app/src/App.js
@@ -13,11 +13,13 @@ import "./App.css";
 
 function App() {
   const [signifyData, setSignifyData] = useState();
+  const [parsedSignifyData, setParsedSignifyData] = useState();
 
   const fetchData = () => {
     const data = localStorage.getItem("signify-data");
     if (data) {
       setSignifyData(data);
+      setParsedSignifyData(JSON.parse(data));
     }
   };
 
@@ -40,25 +42,25 @@ function App() {
   const removeData = () => {
     localStorage.removeItem("signify-data");
     setSignifyData(null);
+    setParsedSignifyData(null);
   };
 
   return (
     <div className="App">
       <header className="App-header">
         {signifyData ? (
-          <div className="w-full p-4">
-            <div>
-              <label
-                htmlFor="message"
-                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >
-                Signify Header Data
+          <div className="Welcome">
+            <div className="">
+              <h3>Welcome!</h3>
+              <label htmlFor="message" className="">
+                Signed in with{" "}
+                {parsedSignifyData?.credential ? "Credential" : "AID"}
               </label>
               <textarea
                 id="message"
                 rows="16"
                 defaultValue={signifyData}
-                className="block p-2.5 w-full text-black text-sm rounded-lg border border-gray-300"
+                className="w-full block p-2.5 text-black text-sm rounded-lg border border-gray-300"
                 placeholder="Write your thoughts here..."
               ></textarea>
             </div>