update functions and front

functions/src/index.ts

@@ -25,14 +25,12 @@ export const create = onRequest(async (req, res) => {
     return;
   }
 
-  const { chain, network, project, provenance } = req.body as DocData;
+  const { network, project, provenance } = req.body as DocData;
 
-  if (!chain || !network || !project || !provenance) {
+  if (!network || !project || !provenance) {
     res
       .status(400)
-      .send(
-        'Invalid input, missing "chain", "network", "project" or "provenance"',
-      );
+      .send('Invalid input, missing "network", "project" or "provenance"');
     return;
   }
 
@@ -41,7 +39,6 @@ export const create = onRequest(async (req, res) => {
     const firestore = admin.firestore();
     const docRef = firestore.collection('unsigned').doc(uid);
     await docRef.set({
-      chain,
       network,
       project,
       provenance,
@@ -112,13 +109,13 @@ const _load = async (
       return;
     }
 
-    const { chain, network, project, provenance, serializedSignedTx } =
+    const { network, project, provenance, serializedSignedTx } =
       doc.data() as DocData;
     if (collection === 'signed') {
       await docRef.delete();
-      res.status(200).json({ chain, network, serializedSignedTx });
+      res.status(200).json({ network, serializedSignedTx });
     } else {
-      res.status(200).json({ chain, network, project, provenance });
+      res.status(200).json({ network, project, provenance });
     }
   } catch (error) {
     console.error(`Error reading and deleting data from ${collection}:`, error);

functions/src/types.ts

@@ -1,15 +1,14 @@
 interface Provenance {
-  name: string; // packageName
   summary: string; // build summary
   commit: string; // source commit
   workflow: string; // build workflow
   ledger: string; // public ledger
 }
 
 export interface DocData {
-  chain: 'aptos' | 'sui';
   network: string;
   project: string;
+  name: string; // packageName
   provenance: Provenance;
   serializedSignedTx?: string;
 }

src/App.tsx

@@ -15,7 +15,7 @@ function App() {
   return (
     <>
       {!state && <Loading />}
-      {!!state && state.chain === 'sui' && (
+      {!!state && state.network.split(':')[0] === 'sui' && (
         <QueryClientProvider client={queryClient}>
           <SuiClientProvider
             defaultNetwork="mainnet"

src/component/Provenance.tsx

@@ -0,0 +1,84 @@
+import { Avatar, Box, Button, Card, Flex, Link, Text } from '@radix-ui/themes';
+import { useRecoilState } from 'recoil';
+
+import { docDataState } from '../recoil';
+
+export const Provenance = () => {
+  const [state] = useRecoilState(docDataState);
+  console.log(state);
+  return (
+    <>
+      {state && (
+        <Flex direction="column" gap="2">
+          <Box maxWidth="240px">
+            <Card>
+              <Flex gap="3" align="center">
+                <Avatar
+                  size="3"
+                  src={`/logo/${state.network.split(':')[0]}.svg`}
+                  fallback="T"
+                />
+                <Box>
+                  <Text as="div" size="2" weight="bold">
+                    {state.network}
+                  </Text>
+                  <Text as="div" size="2" color="gray">
+                    {state.name}
+                  </Text>
+                </Box>
+              </Flex>
+            </Card>
+          </Box>
+          <Box>
+            <Card>
+              <Flex gap="3" align="start" direction="column">
+                <Text as="div" size="3" weight="bold">
+                  Built and signed on 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.provenance.summary}>
+                      <Flex>
+                        <Text truncate>{state.provenance.summary}</Text>
+                      </Flex>
+                    </Link>
+                  </Flex>
+                  <Flex direction="column">
+                    <Text size="2">Source Commit</Text>
+                    <Link size="1" color="gray" href={state.provenance.commit}>
+                      <Flex>
+                        <Text truncate>{state.provenance.commit}</Text>
+                      </Flex>
+                    </Link>
+                  </Flex>
+                  <Flex direction="column">
+                    <Text size="2">Build Workflow</Text>
+                    <Link
+                      size="1"
+                      color="gray"
+                      href={state.provenance.workflow}
+                    >
+                      <Flex>
+                        <Text truncate>{state.provenance.workflow}</Text>
+                      </Flex>
+                    </Link>
+                  </Flex>
+                  <Flex direction="column">
+                    <Text size="2">Public Ledger</Text>
+                    <Link size="1" color="gray" href={state.provenance.ledger}>
+                      <Flex>
+                        <Text truncate>{state.provenance.ledger}</Text>
+                      </Flex>
+                    </Link>
+                  </Flex>
+                </Flex>
+                <Button>Sign</Button>
+              </Flex>
+            </Card>
+          </Box>
+        </Flex>
+      )}
+    </>
+  );
+};

src/component/Sui.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 
 import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';
-import { Button, Card, Flex, Link, Text } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
 import { useRecoilState } from 'recoil';
 
+import { Provenance } from './Provenance';
 import { docDataState } from '../recoil';
 
 export const Sui = () => {
@@ -22,42 +23,7 @@ export const Sui = () => {
       justify="center"
       height="100vh"
     >
-      {state && currentAccount && (
-        <Card>
-          <Flex gap="3" align="start" direction="column">
-            <Text as="div" size="4" weight="bold">
-              Built and signed on Github Actions
-            </Text>
-            <Flex direction="column">
-              <Flex gap="2">
-                <Text size="2">Build Summary</Text>
-                <Link color="gray" size="2" href={state.provenance.summary}>
-                  {state.provenance.summary}
-                </Link>
-              </Flex>
-              <Flex gap="2">
-                <Text size="2">Source Commit</Text>
-                <Link color="gray" size="2" href={state.provenance.commit}>
-                  {state.provenance.commit}
-                </Link>
-              </Flex>
-              <Flex gap="2">
-                <Text size="2">Build Workflow</Text>
-                <Link color="gray" size="2" href={state.provenance.workflow}>
-                  {state.provenance.workflow}
-                </Link>
-              </Flex>
-              <Flex gap="2">
-                <Text size="2">Public Ledger</Text>
-                <Link color="gray" size="2" href={state.provenance.ledger}>
-                  {state.provenance.ledger}
-                </Link>
-              </Flex>
-            </Flex>
-            <Button>Sign</Button>
-          </Flex>
-        </Card>
-      )}
+      {state && currentAccount && <Provenance />}
       {!currentAccount && <ConnectButton />}
     </Flex>
   );