semaphore identity (#13)

* wrap createproof with retry

* 💄

* skip mismatched robinhood url

* remove log

* lint

* request menu: reduce text size for readbility

* only notarize once, brush up bookmarks

* fix build error

* use regex for pattern matching

* remove temp workaround

* fix bad updates

* fix requests table size column

* creating branch

* cleaned up settings page ui

* fix identity storage logic and key info card in attestation details

* buton to copy request, filter styleshee requests

* add new websockify url from k8s

* remove font

* remove font

* add config type with assertions and example

* config: remove sig, add contains

* provider: remove url field, create type for config

* fix type issue

* fix other type issue

* fix notarize bug

* comment type

* type

* rename package and fix repo

* fix body for post requests

* up package lock

* remove error display

* fix copy request

* add wildcard end of regex

* regex: remove characters after ?

* beautify json string, increment id automatically

* use bookmark reducer

* copy current tab url as target url

* reduce steps for manual notarization

* remove legacy field maxTranscriptSize etc

* remove legacy func

* bigger icons

* remove useless

* disable pugin

* settings: fix ui

* options: more fixes

* settings: center ui

* use reducer for identity

* bump version

* deserialize new attestation format

* fix bug attribute

* ui

* include identity commitment as header

* misc

* bump version

* use new version of eternis/tlsn-js

* fix attribute overlap

* attribute ui

* remove useless properties

* update default notary

* add logs

* add buffer keyword

* add keyword

* fix buffer bug

* log more

* update notarizedAt of bookmark when deleting attestations

* fix comments following review

---------

Co-authored-by: AmirSaber Sharifi <[email protected]>
Co-authored-by: asa93 <[email protected]>

README.md

@@ -81,3 +81,4 @@ The link to files is located in constants.ts file.
 
 - [Webpack documentation](https://webpack.js.org/concepts/)
 - [Chrome Extension documentation](https://developer.chrome.com/extensions/getstarted)
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pangea-extension",
-  "version": "0.1.0.8",
+  "version": "0.1.0.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -19,10 +19,11 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@eternis/tlsn-js": "0.1.0",
+    "@eternis/tlsn-js": "0.1.1",
     "@extism/extism": "^1.0.2",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@sardinefish/x509": "^1.2.1",
+    "@semaphore-protocol/identity": "^4.3.0",
     "@shadcn/ui": "^0.0.4",
     "async-mutex": "^0.4.0",
     "axios": "^1.7.7",
@@ -105,4 +106,4 @@
     "webpack-ext-reloader": "^1.1.12",
     "zip-webpack-plugin": "^4.0.1"
   }
-}
+}

src/components/AttestationCard/index.tsx

@@ -6,14 +6,15 @@ import { useRequestHistory } from '../../reducers/history';
 import { deleteRequestHistory } from '../../reducers/history';
 import { getNotaryApi, getProxyApi } from '../../utils/storage';
 import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { parseAttributeFromRequest } from '../../utils/misc';
 import Modal, { ModalContent } from '../Modal/Modal';
 import Error from '../SvgIcons/Error';
 import { BadgeCheck } from 'lucide-react';
-import { AttrAttestation } from '../../utils/types';
 import { useDevMode } from '../../reducers/requests';
 import { urlToRegex, extractHostFromUrl } from '../../utils/misc';
-import { useBookmarks } from '../../reducers/bookmarks';
+import { useBookmarks, BookmarkManager } from '../../reducers/bookmarks';
+import { AttestationObject, Attribute } from '@eternis/tlsn-js';
+import { CheckCircle } from 'lucide-react';
+
 const charwise = require('charwise');
 
 function formatDate(requestId: string) {
@@ -73,8 +74,7 @@ export function AttestationCard({
   const date = formatAttestationDate(requestId, previousRequestId);
   const [bookmarks] = useBookmarks();
   const [devMode] = useDevMode();
-
-  console.log('bookmarks', bookmarks);
+  const bookmarkManager = new BookmarkManager();
 
   const { status } = request || {};
 
@@ -95,6 +95,24 @@ export function AttestationCard({
 
   const onDelete = useCallback(async () => {
     dispatch(deleteRequestHistory(requestId));
+
+    const bookmark = await bookmarkManager.findBookmark(
+      request?.url || '',
+      '',
+      '',
+    );
+
+    console.log('bookmark', bookmark);
+    if (bookmark) {
+      const updatedBookmark = {
+        ...bookmark,
+        notarizedAt: undefined,
+      };
+      await bookmarkManager.updateBookmark(updatedBookmark);
+    }
+
+    // const latestRequest = await getNotaryRequest(requestId);
+    // console.log('latestRequest', latestRequest);
   }, [requestId]);
 
   const onShowError = useCallback(async () => {
@@ -151,9 +169,7 @@ export function AttestationCard({
     );
   }
 
-  const { attributes } = parseAttributeFromRequest(
-    request?.proof as AttrAttestation,
-  );
+  const attributes = request?.proof?.attributes || [];
 
   return (
     <div className="flex flex-col" key={requestId}>
@@ -200,15 +216,22 @@ export function AttestationCard({
           )}
         </div>
 
+        {attributes?.slice(0, 2).map((attribute: Attribute) => (
+          <div className="flex items-center mb-2">
+            <div className="inline-flex items-center px-3 py-1 rounded-full bg-green-700 text-green-100 text-sm font-medium truncate">
+              <CheckCircle className="w-4 h-4 mr-2 flex-shrink-0" />
+              <span className="truncate">{attribute.attribute_name}</span>
+            </div>
+          </div>
+        ))}
+
+        {attributes?.length > 2 && (
+          <div className="inline-flex items-center px-3 py-1 rounded-full bg-green-700 text-green-100 text-sm font-medium truncate w-40">
+            <CheckCircle className="w-4 h-4 mr-2 flex-shrink-0" />
+            <span className="truncate"> + {attributes?.length - 2} more</span>
+          </div>
+        )}
         <div className="grid grid-cols-[80px,1fr] gap-2 mt-4">
-          {attributes?.map((attribute) => (
-            <>
-              <div className="text-[#9BA2AE] text-sm leading-5 font-semibold">
-                {attribute}
-              </div>
-              <div className="text-[#4B5563] text-sm leading-5 truncate"></div>
-            </>
-          ))}
           {[
             {
               label: 'Time',

src/components/RemoteAttestationBadge/index.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react';
 
-import { Lock } from 'lucide-react';
 import { useRemoteAttestation } from '../../reducers/remote-attestation';
 
 import { useExtensionEnabled } from '../../reducers/requests';
+import Lock from '../SvgIcons/Lock';
 
 export default function RemoteAttestationBadge(): ReactElement {
   const { remoteAttestation, loading, error, isValid } = useRemoteAttestation();
@@ -12,19 +12,16 @@ export default function RemoteAttestationBadge(): ReactElement {
   if (isValid === null) return <></>;
   return (
     <>
-      <div className="  items-center">
+      <div className="mt-5 items-center">
         <>
           {isValid ? (
             <div
-              className="inline-flex items-center px-3 py-2"
+              className="inline-flex items-center gap-2.5"
               role="status"
               aria-live="polite"
             >
-              <Lock
-                className="w-5 h-5 mr-2 text-green-500"
-                aria-hidden="true"
-              />
-              <span className="text-xs font-small text-green-500">
+              <Lock />
+              <span className="text-xs font-medium text-[#2EB022]">
                 Connection is secure
               </span>
             </div>

src/components/SvgIcons/DropdownChevron.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function DropdownChevron({ reverse }: { reverse: boolean }) {
+  return (
+    <svg
+      width="11"
+      height="7"
+      viewBox="0 0 11 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${reverse ? 'rotate-180 transition-transform duration-300' : 'transition-transform duration-300'}`}
+    >
+      <path
+        d="M10.3984 1.05017L6.1558 5.29281C5.76527 5.68333 5.13211 5.68333 4.74158 5.29281L0.498943 1.05017"
+        stroke="#092EEA"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

src/components/SvgIcons/InfoCircle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function InfoCircle() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM9 4C9 4.26522 8.89464 4.51957 8.70711 4.70711C8.51957 4.89464 8.26522 5 8 5C7.73478 5 7.48043 4.89464 7.29289 4.70711C7.10536 4.51957 7 4.26522 7 4C7 3.73478 7.10536 3.48043 7.29289 3.29289C7.48043 3.10536 7.73478 3 8 3C8.26522 3 8.51957 3.10536 8.70711 3.29289C8.89464 3.48043 9 3.73478 9 4ZM7 7C6.73478 7 6.48043 7.10536 6.29289 7.29289C6.10536 7.48043 6 7.73478 6 8C6 8.26522 6.10536 8.51957 6.29289 8.70711C6.48043 8.89464 6.73478 9 7 9V12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13H9C9.26522 13 9.51957 12.8946 9.70711 12.7071C9.89464 12.5196 10 12.2652 10 12C10 11.7348 9.89464 11.4804 9.70711 11.2929C9.51957 11.1054 9.26522 11 9 11V8C9 7.73478 8.89464 7.48043 8.70711 7.29289C8.51957 7.10536 8.26522 7 8 7H7Z"
+        fill="#9BA2AE"
+      />
+    </svg>
+  );
+}

src/components/SvgIcons/Lock.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Lock() {
+  return (
+    <svg
+      width="9"
+      height="12"
+      viewBox="0 0 9 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.28571 5.35718V4.07146C1.28571 3.21898 1.62436 2.40142 2.22716 1.79862C2.82995 1.19582 3.64752 0.857178 4.5 0.857178C5.35248 0.857178 6.17005 1.19582 6.77284 1.79862C7.37564 2.40142 7.71429 3.21898 7.71429 4.07146V5.35718C8.05528 5.35718 8.3823 5.49264 8.62342 5.73376C8.86454 5.97487 9 6.3019 9 6.64289V9.85718C9 10.1982 8.86454 10.5252 8.62342 10.7663C8.3823 11.0074 8.05528 11.1429 7.71429 11.1429H1.28571C0.944722 11.1429 0.617695 11.0074 0.376577 10.7663C0.135459 10.5252 0 10.1982 0 9.85718V6.64289C0 6.3019 0.135459 5.97487 0.376577 5.73376C0.617695 5.49264 0.944722 5.35718 1.28571 5.35718ZM6.42857 4.07146V5.35718H2.57143V4.07146C2.57143 3.55997 2.77462 3.06943 3.13629 2.70776C3.49797 2.34608 3.98851 2.14289 4.5 2.14289C5.01149 2.14289 5.50203 2.34608 5.86371 2.70776C6.22538 3.06943 6.42857 3.55997 6.42857 4.07146Z"
+        fill="#2EB022"
+      />
+    </svg>
+  );
+}

src/entries/Background/db.ts

@@ -3,8 +3,7 @@ import type { RequestHistory } from './rpc';
 import { PluginConfig, PluginMetadata, sha256 } from '../../utils/misc';
 import mutex from './mutex';
 const charwise = require('charwise');
-
-import { AttrAttestation } from '../../utils/types';
+import { AttestationObject } from '@eternis/tlsn-js';
 export const db = new Level('./ext-db', {
   valueEncoding: 'json',
 });
@@ -48,7 +47,7 @@ export async function addNotaryRequest(
 
 export async function addNotaryRequestProofs(
   id: string,
-  proof: AttrAttestation,
+  proof: AttestationObject,
 ): Promise<RequestHistory | null> {
   const existing = await historyDb.get(id);