Merge pull request #99 from HunnySajid/feat/polaris-web-update

Feat/polaris web update
WebOfTrust · Feb 19, 2024 · 5846364 · 5846364
2 parents 7db50ce + c51d55d
commit 5846364
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 188 deletions.
diff --git a/GETTING_STARTED_WEB_CLI.md b/GETTING_STARTED_WEB_CLI.md
@@ -11,12 +11,42 @@ import following methods from `polaris-web`
 
 ```
 import {
+  subscribeToSignature, // subscribe to receive signature
+  unsubscribeFromSignature, // can be used to unsubscribe
   requestAid, // call to select aid for signing in
   requestCredential, // call to select credential for signing in
   requestAidORCred, // call to select either aid of credential
-  attemptAutoSignin, // call for auto signin
+  requestAutoSignin, // call for auto signin
 } from "polaris-web";
 ```
+
+### Usage subscribeToSignature
+`subscribeToSignature` is a mandatory subscription call that receives a function to return signature, e.g:
+```
+
+const handleSignifyData = (data) => {
+    console.log("signature", data);
+};
+
+useEffect(() => {
+    subscribeToSignature(handleSignifyData);
+    return () => {
+      unsubscribeFromSignature();
+    };
+  }, []);
+```
+
+### Usage unsubscribeFromSignature
+`unsubscribeFromSignature` to unsubscription e.g:
+```
+useEffect(() => {
+    subscribeToSignature(handleSignifyData);
+    return () => {
+      unsubscribeFromSignature();
+    };
+  }, []);
+```
+
 ### Usage requestAid
 `requestAid` is called when authentication with AID is required, e.g:
 ```
@@ -35,18 +65,10 @@ import {
 <button onClick={requestAidORCred}>Request AID or CREDENTIAL</button>
 ```
 
-### Usage attemptAutoSignin
-`attemptAutoSignin` is called to auto-signin with an already selected pair. The app asks to select one from the extension if there is no auto sign-in pair exists. 
+### Usage requestAutoSignin
+`requestAutoSignin` is called to auto-signin with an already selected pair. The app asks to select one from the extension if there is no auto sign-in pair exists. 
 ```
-const handleAutoSignin = async () => {
-    const resp = await attemptAutoSignin();
-    if (resp?.data) {
-       alert(
-          "Signed headers received\n" +
-            JSON.stringify(resp?.data.headers, null, 2)
-       );
-     }
-  };  
+<button onClick={requestAutoSignin}>Auto Sign in</button>  
 ```
 
 ### Example Usage

diff --git a/example-web/my-app/package-lock.json b/example-web/my-app/package-lock.json
diff --git a/example-web/my-app/package.json b/example-web/my-app/package.json
@@ -10,7 +10,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "eslint": "^8.56.0",
-    "polaris-web": "^1.0.0",
+    "polaris-web": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/example-web/my-app/src/App.js b/example-web/my-app/src/App.js
@@ -1,57 +1,103 @@
+import { useEffect, useState } from "react";
 import {
+  subscribeToSignature,
+  unsubscribeFromSignature,
+  requestAutoSignin,
   requestAid,
   requestCredential,
   requestAidORCred,
-  attemptAutoSignin,
 } from "polaris-web";
 import logo from "./ACME_Corporation.png";
 import Button from "@mui/material/Button";
 import "./App.css";
 
 function App() {
-  const handleAutoSignin = async () => {
-    try {
-      const resp = await attemptAutoSignin();
-      if (resp?.data) {
-        alert(
-          "Signed headers received\n" +
-            JSON.stringify(resp?.data.headers, null, 2)
-        );
-      }
-    } catch (error) {}
+  const [signifyData, setSignifyData] = useState();
+
+  const fetchData = () => {
+    const data = localStorage.getItem("signify-data");
+    if (data) {
+      setSignifyData(data);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleSignifyData = (data) => {
+    localStorage.setItem("signify-data", JSON.stringify(data, null, 2));
+    fetchData();
+  };
+
+  useEffect(() => {
+    subscribeToSignature(handleSignifyData);
+    return () => {
+      unsubscribeFromSignature();
+    };
+  }, []);
+
+  const removeData = () => {
+    localStorage.removeItem("signify-data");
+    setSignifyData(null);
   };
 
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} alt="logo" />
-        <div className="flex flex-col gap-y-2 mt-2">
-          <p className=" text-lg font-bold">Authenticate with</p>
-          <Button variant="contained" color="success" onClick={requestAid}>
-            AID
-          </Button>
-          <Button
-            variant="contained"
-            color="success"
-            onClick={requestCredential}
-          >
-            Credential
-          </Button>
-          <Button
-            variant="contained"
-            color="success"
-            onClick={requestAidORCred}
-          >
-            AID or CRED
-          </Button>
-          <Button
-            variant="contained"
-            color="success"
-            onClick={handleAutoSignin}
-          >
-            Auto Sign in
-          </Button>
-        </div>
+        {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
+              </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"
+                placeholder="Write your thoughts here..."
+              ></textarea>
+            </div>
+            <Button variant="contained" color="error" onClick={removeData}>
+              Logout
+            </Button>
+          </div>
+        ) : (
+          <>
+            <img src={logo} alt="logo" />
+            <div className="flex flex-col gap-y-2 mt-2">
+              <p className=" text-lg font-bold">Authenticate with</p>
+              <Button variant="contained" color="success" onClick={requestAid}>
+                AID
+              </Button>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={requestCredential}
+              >
+                Credential
+              </Button>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={requestAidORCred}
+              >
+                AID or CRED
+              </Button>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={requestAutoSignin}
+              >
+                Auto Sign in
+              </Button>
+            </div>
+          </>
+        )}
       </header>
     </div>
   );

diff --git a/example-web/my-app/src/index.js b/example-web/my-app/src/index.js
@@ -1,25 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-
-window.addEventListener(
-  "message",
-  (event) => {
-    // Accept messages only from same window
-    if (event.source !== window) {
-      return;
-    }
-    if (event.data.type && event.data.type === "signify-signature") {
-
-      alert("Signed headers received\n"+ JSON.stringify(event.data.data, null, 2));
-    }
-  },
-  false
-);
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
+const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
   <React.StrictMode>