update sui signer

functions/src/index.ts

@@ -140,12 +140,10 @@ export const update = onRequest({ cors: true }, async (req, res) => {
     return;
   }
 
-  const { uid, serializedSignedTx } = req.body;
+  const { uid, signedData } = req.body;
 
-  if (!uid || !serializedSignedTx) {
-    res
-      .status(400)
-      .send('Invalid input, missing "uid" or "serializedSignedTx"');
+  if (!uid || !signedData || !signedData.message || !signedData.signature) {
+    res.status(400).send('Invalid input, missing "uid" or "signedData"');
     return;
   }
 
@@ -163,7 +161,7 @@ export const update = onRequest({ cors: true }, async (req, res) => {
     const newDocRef = firestore.collection('signed').doc(uid);
     await newDocRef.set({
       ...data,
-      serializedSignedTx,
+      signedData,
       createdAt: admin.firestore.FieldValue.serverTimestamp(),
     });
 
@@ -194,15 +192,14 @@ const _load = async (
       return;
     }
 
-    const { name, network, provenance, serializedSignedTx } =
-      doc.data() as DocData;
+    const { name, network, provenance, signedData } = doc.data() as DocData;
     if (collection === 'signed') {
       const storage = admin.storage();
       const bucket = storage.bucket('slsa-on-blockchain.appspot.com');
       const file = bucket.file(uid);
       await file.delete();
       await docRef.delete();
-      res.status(200).json({ name, network, serializedSignedTx });
+      res.status(200).json({ name, network, signedData });
     } else {
       res.status(200).json({ name, network, provenance });
     }

functions/src/types.ts

@@ -1,13 +1,11 @@
-interface Provenance {
-  summary: string; // build summary
-  commit: string; // source commit
-  workflow: string; // build workflow
-  ledger: string; // public ledger
-}
-
 export interface DocData {
   name: string; // packageName
   network: string;
-  provenance: Provenance;
-  serializedSignedTx?: string;
+  provenance: string;
+  signedData?:
+    | {
+        message: string;
+        signature: string;
+      }
+    | string;
 }

package.json

@@ -8,11 +8,13 @@
     "@radix-ui/themes": "^3.1.1",
     "@tanstack/react-query": "^5.51.1",
     "fflate": "^0.8.2",
+    "notistack": "^3.0.1",
     "query-string": "^9.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
+    "smol-toml": "^1.2.2",
     "tar-stream": "^3.1.7",
     "web-vitals": "^2.1.4"
   },

src/component/Loading.tsx

@@ -13,7 +13,7 @@ export const Loading = () => {
   const initialized = useRef<boolean>(false);
   const setState = useSetRecoilState(STATE);
 
-  const [message, setMessage] = useState<string>('Initializing ....');
+  const [message, setMessage] = useState<string>('');
   const [error, setError] = useState<boolean>(false);
 
   const unzip = async (
@@ -56,61 +56,43 @@ export const Loading = () => {
         const { q: uid } = queryString.parse(window.location.search) as {
           q: string;
         };
-        fetch('https://read-jx4b2hndxq-uc.a.run.app', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ uid }),
-        })
-          .then((res1) => {
-            res1
-              .json()
-              .then((data) => {
-                setMessage('Loading Data ....');
-                fetch('https://download-jx4b2hndxq-uc.a.run.app', {
-                  method: 'POST',
-                  headers: {
-                    'Content-Type': 'application/json',
-                  },
-                  body: JSON.stringify({ filename: uid }),
-                })
-                  .then((res2) => {
-                    res2
-                      .text()
-                      .then((gzip) => {
-                        unzip(gzip)
-                          .then((files) => {
-                            setState({
-                              uid,
-                              files,
-                              data,
-                            });
-                          })
-                          .catch((e) => {
-                            setError(true);
-                            setMessage(`${e}`);
-                          });
-                      })
-                      .catch((e) => {
-                        setError(true);
-                        setMessage(`${e}`);
-                      });
-                  })
-                  .catch((e) => {
-                    setError(true);
-                    setMessage(`${e}`);
-                  });
-              })
-              .catch((e) => {
-                setError(true);
-                setMessage(`${e}`);
-              });
-          })
-          .catch((e) => {
+        const fetchData = async () => {
+          try {
+            setMessage('Initializing ....');
+            const res1 = await fetch('https://read-jx4b2hndxq-uc.a.run.app', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ uid }),
+            });
+            const data = await res1.json();
+
+            setMessage('Loading Data ....');
+            const res2 = await fetch(
+              'https://download-jx4b2hndxq-uc.a.run.app',
+              {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ filename: uid }),
+              },
+            );
+            const gzip = await res2.text();
+            const files = await unzip(gzip);
+            setState({
+              uid,
+              files,
+              data,
+            });
+          } catch (e) {
             setError(true);
             setMessage(`${e}`);
-          });
+          }
+        };
+
+        fetchData();
       } else {
         setError(true);
         setMessage('Query params error');

src/component/Provenance.tsx

@@ -1,13 +1,44 @@
-import { Avatar, Box, Button, Card, Flex, Link, Text } from '@radix-ui/themes';
+import type { ReactElement } from 'react';
+import { useEffect, useState } from 'react';
+
+import { fromB64 } from '@mysten/sui/utils';
+import { Avatar, Box, Card, Flex, Link, Text } from '@radix-ui/themes';
 import { useRecoilState } from 'recoil';
 
 import { STATE } from '../recoil';
 
-export const Provenance = () => {
+interface GithubAction {
+  summary: string; // build summary
+  commit: string; // source commit
+  workflow: string; // build workflow
+  ledger: string; // public ledger
+}
+
+export const Provenance = ({ BtnSign }: { BtnSign: ReactElement }) => {
   const [state] = useRecoilState(STATE);
+  const [gha, setGha] = useState<GithubAction | undefined>(undefined);
+
+  useEffect(() => {
+    if (state && !gha) {
+      const provenance = JSON.parse(
+        new TextDecoder().decode(fromB64(state.data.provenance)),
+      );
+      const payload = JSON.parse(
+        new TextDecoder().decode(fromB64(provenance.payload)),
+      );
+      setGha({
+        summary: `https://github.com/zktx-io/move_on_github_action/actions/runs/${payload.predicate.invocation.environment.github_run_id}/attempts/${payload.predicate.invocation.environment.github_run_attempt}`,
+        commit: `https://github.com/zktx-io/move_on_github_action/tree/${payload.predicate.invocation.environment.github_sha1}`,
+        workflow: `https://github.com/zktx-io/move_on_github_action/actions/runs/${payload.predicate.invocation.environment.github_run_id}/workflow`,
+        ledger: `https://search.sigstore.dev/?hash=${payload.subject[0].digest.sha256}`,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
   return (
     <>
-      {state && (
+      {state && gha && (
         <Flex direction="column" gap="2">
           <Box maxWidth="240px">
             <Card>
@@ -32,18 +63,19 @@ export const Provenance = () => {
             <Card>
               <Flex gap="3" align="start" direction="column">
                 <Text as="div" size="3" weight="bold">
-                  Built and signed on Github Actions
+                  Building and Deploying with GitHub Actions
                 </Text>
                 <Flex direction="column" gap="1" maxWidth="420px">
                   <Flex direction="column">
                     <Text size="2">Build Summary</Text>
                     <Link
                       size="1"
                       color="gray"
-                      href={state.data.provenance.summary}
+                      href={gha.summary}
+                      target="_blank"
                     >
                       <Flex>
-                        <Text truncate>{state.data.provenance.summary}</Text>
+                        <Text truncate>{gha.summary}</Text>
                       </Flex>
                     </Link>
                   </Flex>
@@ -52,10 +84,11 @@ export const Provenance = () => {
                     <Link
                       size="1"
                       color="gray"
-                      href={state.data.provenance.commit}
+                      href={gha.commit}
+                      target="_blank"
                     >
                       <Flex>
-                        <Text truncate>{state.data.provenance.commit}</Text>
+                        <Text truncate>{gha.commit}</Text>
                       </Flex>
                     </Link>
                   </Flex>
@@ -64,10 +97,11 @@ export const Provenance = () => {
                     <Link
                       size="1"
                       color="gray"
-                      href={state.data.provenance.workflow}
+                      href={gha.workflow}
+                      target="_blank"
                     >
                       <Flex>
-                        <Text truncate>{state.data.provenance.workflow}</Text>
+                        <Text truncate>{gha.workflow}</Text>
                       </Flex>
                     </Link>
                   </Flex>
@@ -76,15 +110,16 @@ export const Provenance = () => {
                     <Link
                       size="1"
                       color="gray"
-                      href={state.data.provenance.ledger}
+                      href={gha.ledger}
+                      target="_blank"
                     >
                       <Flex>
-                        <Text truncate>{state.data.provenance.ledger}</Text>
+                        <Text truncate>{gha.ledger}</Text>
                       </Flex>
                     </Link>
                   </Flex>
                 </Flex>
-                <Button>Sign</Button>
+                {BtnSign}
               </Flex>
             </Card>
           </Box>