Merge pull request #114 from HunnySajid/feat/vendor-login-workflow

feat: update signify-polaris-web package
WebOfTrust · Feb 28, 2024 · 569db83 · 569db83
2 parents 1ec697b + d96116d
commit 569db83
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 172 deletions.
diff --git a/GETTING_STARTED_WEB_CLI.md b/GETTING_STARTED_WEB_CLI.md
@@ -3,8 +3,13 @@
 ### Installation
 
 1. Install [polaris-web-extension](FUTURE_DEPLOYED_EXTENSION_LINK) from [Chrome Web Store](https://chromewebstore.google.com/category/extensions)
-2. Install [signify-polaris-web](https://www.npmjs.com/package/signify-polaris-web) from npm
-`npm install signify-polaris-web --save`
+2. Install [signify-polaris-web](https://github.com/roots-id/polaris-web) by listing it into `package.json` dependencies:
+
+```  
+"dependencies": {
+  "signify-polaris-web": "https://github.com/roots-id/polaris-web.git",
+}
+```
 
 ### Usage
 import following methods from `polaris-web`

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,10 +10,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "eslint": "^8.56.0",
-    "signify-polaris-web": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "signify-polaris-web": "github:roots-id/polaris-web",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/example-web/my-app/src/App.js b/example-web/my-app/src/App.js
@@ -1,18 +1,33 @@
 import { useEffect, useState } from "react";
 import {
+  isExtensionInstalled,
   subscribeToSignature,
   unsubscribeFromSignature,
   requestAutoSignin,
   requestAid,
   requestCredential,
   requestAidORCred,
+  trySettingVendorUrl,
 } from "signify-polaris-web";
-import logo from "./ACME_Corporation.png";
 import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
 import "./App.css";
 
+function CircularIndeterminate() {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+const VENDOR_URL = "https://api.npoint.io/d59bd3ab0b31de863a20";
+
 function App() {
   const [signifyData, setSignifyData] = useState();
+  const [extensionInstalled, setExtensionInstalled] = useState(null);
   const [parsedSignifyData, setParsedSignifyData] = useState();
 
   const fetchData = () => {
@@ -34,17 +49,80 @@ function App() {
 
   useEffect(() => {
     subscribeToSignature(handleSignifyData);
+    isExtensionInstalled((extensionId) => {
+      if (extensionId) {
+        trySettingVendorUrl(VENDOR_URL);
+      }
+      setExtensionInstalled(extensionId);
+    });
     return () => {
       unsubscribeFromSignature();
     };
-  });
+  }, []);
 
   const removeData = () => {
     localStorage.removeItem("signify-data");
     setSignifyData(null);
     setParsedSignifyData(null);
   };
 
+  const renderData = () => {
+    if (extensionInstalled === null) return <CircularIndeterminate />;
+
+    if (extensionInstalled)
+      return (
+        <div className="auth-btn-container">
+          <p className="auth-heading">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>
+      );
+
+    return (
+      <div className="auth-btn-container">
+        <Button
+          href="https://drive.google.com/drive/folders/1VmBAs3ba6qWT1I9y1Uk7hxvU_i-TKQTN?usp=sharing"
+          target="_blank"
+          size="md"
+          variant="contained"
+        >
+          Download Extension
+        </Button>
+        <Button
+          target="_blank"
+          href="https://www.loom.com/share/2b4208bf57de4eb89b0950865497a817?sid=faa098d8-4e8a-4938-9ba5-6f3780983d09"
+          size="md"
+          variant="contained"
+        >
+          See Video
+        </Button>
+        <Alert severity="warning">Reload tab after installation</Alert>
+      </div>
+    );
+  };
+
   return (
     <div className="App">
       <header className="App-header">
@@ -69,55 +147,7 @@ function App() {
             </Button>
           </div>
         ) : (
-          <>
-            {/* <img src={logo} alt="logo" /> */}
-            <div className="auth-btn-container">
-              <Button
-                href="https://drive.google.com/drive/folders/1VmBAs3ba6qWT1I9y1Uk7hxvU_i-TKQTN?usp=sharing"
-                target="_blank"
-                size="md"
-                variant="contained"
-              >
-                Download Extension
-              </Button>
-              <Button
-                target="_blank"
-                href="https://www.loom.com/share/2b4208bf57de4eb89b0950865497a817?sid=faa098d8-4e8a-4938-9ba5-6f3780983d09"
-                size="md"
-                variant="contained"
-                onClick={requestAid}
-              >
-                See Video
-              </Button>
-            </div>
-            <div className="auth-btn-container">
-              <p className="auth-heading">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>
-          </>
+          renderData()
         )}
       </header>
     </div>