[NO-MERGE] [FLIP-934] Interaction Template Integration

.env.development

@@ -1,5 +1,5 @@
 # FCL Dev Wallet Base URL
-BASE_URL=http://localhost:8701
+BASE_URL=http://localhost:8702
 
 # The FCL Dev Wallet requires a single account to use as a base/starting point.
 # This account will be used to create and manage other accounts.

.env.example

@@ -1,5 +1,5 @@
 # FCL Dev Wallet Base URL
-BASE_URL=http://localhost:8701
+BASE_URL=http://localhost:8702
 
 # The FCL Dev Wallet requires a single account to use as a base/starting point.
 # This account will be used to create and manage other accounts.

components/AuthzDetails.tsx

@@ -37,6 +37,8 @@ function AuthzDetails() {
     refBlock,
     args,
     cadence,
+    template,
+    isAudited,
   } = useAuthzContext()
   return (
     <div sx={styles.container}>
@@ -48,6 +50,102 @@ function AuthzDetails() {
           "overflow-x": "hidden",
         }}
       >
+        { template && (
+          <div
+            sx={{
+              pb: 30
+            }}
+          >
+            <AuthzDetailsTable>
+              <AuthzDetailsRow>
+                <td fontSize="20">Title</td>
+                <td>
+                  <div sx={{...styles.wrappedValue, fontWeight: 900, letterSpacing: "0"}}>
+                    {template?.data.messages?.title?.i18n?.["en-US"]}
+                  </div>
+                </td>
+              </AuthzDetailsRow>
+              <AuthzDetailsRow>
+                <td>Description</td>
+                <td>
+                  <div sx={{...styles.wrappedValue, fontWeight: 900, letterSpacing: "0"}}>
+                    {template?.data.messages?.description?.i18n?.["en-US"]}
+                  </div>
+                </td>
+              </AuthzDetailsRow>
+              { isAudited && 
+                <>
+                  <AuthzDetailsRow>
+                    <td>Audited</td>
+                    <td>
+                      <div sx={{...styles.wrappedValue, fontWeight: 900, color: "blue"}}>
+                        AUDITED ✓
+                      </div>
+                    </td>
+                  </AuthzDetailsRow>
+                </>
+              }
+            </AuthzDetailsTable>
+            { isAudited && 
+              <div 
+                sx={{
+                  width: "100%",
+                  boxSizing: "border-box",
+                  letterSizing: "initial",
+                  backgroundColor: "blue",
+                  color: "white",
+                  borderRadius: "8px",
+                  padding: "8px",
+                  textAlign: "center",
+                  mt:15
+                }}
+              >
+                This transaction has been audited for correctness and safety by KittyItems AUDIT
+              </div>
+            }
+          </div>
+        )}
+
+        { template && args.map((arg, argIndex) => {
+          let found = Object.keys(template?.data?.arguments || []).map(argKey => {
+            let argVal = template?.data?.arguments?.[argKey]
+            if (argVal.index !== argIndex) return null
+            return {argVal, argKey}
+          }).filter(el => el !== null)
+
+          if (!found) return null
+
+          let foundTemplateArg = found[0].argVal
+          let foundTemplateArgLabel = found[0].argKey
+
+          return (
+            <div
+              sx={{
+                pb: 30
+              }}
+            >
+              <AuthzDetailsTable>
+                <AuthzDetailsRow>
+                  <td fontSize="20">Argument {argIndex} {foundTemplateArgLabel}</td>
+                  <td>
+                    <div sx={{...styles.wrappedValue, fontWeight: 900, letterSpacing: "0"}}>
+                      {template?.data.arguments?.[foundTemplateArgLabel]?.messages?.title?.i18n?.["en-US"]}
+                    </div>
+                  </td>
+                </AuthzDetailsRow>
+                <AuthzDetailsRow>
+                  <td fontSize="20">Argument {argIndex} {foundTemplateArgLabel} Value</td>
+                  <td>
+                    <div sx={{...styles.wrappedValue, fontWeight: 900, letterSpacing: "0"}}>
+                      {arg.value}
+                    </div>
+                  </td>
+                </AuthzDetailsRow>
+              </AuthzDetailsTable>
+            </div>
+          )
+        })}
+
         <AuthzDetailsTable>
           <AuthzDetailsRow>
             <td>Proposer</td>

contexts/AuthzContext.tsx

@@ -91,15 +91,59 @@ export const AuthzContext = createContext<AuthzContextType>({
   connectedAppConfig: undefined,
 })
 
+const AUDIT_RESOLVERS = [
+  async (template: any) => {
+    return await fetch(`http://localhost:3030/audits/${template?.id}`)
+        .then(response => response.json())
+        .catch(e => null)
+  },
+  async (template: any) => {
+    return await fetch(`/api/audit/${template?.id}`)
+        .then(response => response.json())
+        .catch(e => null)
+  }
+]
+
 export function AuthzContextProvider({children}: {children: React.ReactNode}) {
   const [signable, setSignable] = useState<AuthSignable | null>(null)
+  const [template, setTemplate] = useState(null)
+  const [isAudited, setIsAudited] = useState<Boolean>(false)
   const [codePreview, setCodePreview] = useState<CodePreview | null>(null)
 
   const {data: accountsData} = useAccounts()
 
   useEffect(() => {
-    function callback(data: AuthzReadyData) {
+    async function callback(data: AuthzReadyData) {
       setSignable(data.body)
+
+      const template = data.body?.voucher?.template
+
+      if (!template) return
+
+      let audits = 
+        (await Promise.all(AUDIT_RESOLVERS.map(async auditResolver => auditResolver(template)))).filter(a => a !== null)
+      let audit = audits[0]
+
+      if (!audit) {
+        setIsAudited(false)
+        return
+      }
+
+      let verifiedAudit = await fcl.InteractionTemplateUtils.verifyInteractionTemplateAudit({
+        template,
+        audit,
+      })
+
+      let areTemplateDependenciesSame = 
+        await fcl.InteractionTemplateUtils.verifyDependencyPinsSameAtLatestSealedBlock({
+          template,
+          networks: ["emulator"]
+        })
+
+      setIsAudited(verifiedAudit && areTemplateDependenciesSame)
+      if (verifiedAudit && areTemplateDependenciesSame) {
+        setTemplate(template)
+      }
     }
 
     WalletUtils.ready(callback)
@@ -138,6 +182,8 @@ export function AuthzContextProvider({children}: {children: React.ReactNode}) {
       : undefined,
     appTitle: "Test Harness",
     appIcon: "https://placekitten.com/g/200/200",
+    isAudited,
+    template,
   }
 
   return <AuthzContext.Provider value={value}>{children}</AuthzContext.Provider>