Fix

apps/devtool/data-store/storage.json

@@ -0,0 +1,52 @@
+{
+  "entity": {
+    "signature": "0xa72428e25a2b9a90b0cbcd37804baae3f1a932a659f81fe57b311235a53276105f8d6058834ac544a65264d8363a9df2a6c58f3f790f7963af045ce836d8b9a31b",
+    "data": {
+      "addressBook": [],
+      "credentials": [],
+      "tokens": [],
+      "userGroupMembers": [],
+      "userGroups": [],
+      "userWallets": [],
+      "users": [],
+      "walletGroupMembers": [],
+      "walletGroups": [],
+      "wallets": []
+    }
+  },
+  "policy": {
+    "signature": "0xc4524c13303b29a302247c2edfa9b9aa34d7c16f3890b297e30c0fa105f74d1c478138e75d03e23ca5e34a70d4d9417034f7b199fb481cba9e86bbb914ffda571b",
+    "data": [
+      {
+        "id": "a68e8d20-0419-475c-8fcc-b17d4de8c955",
+        "name": "Authorized any admin to transfer ERC721 or ERC1155 tokens",
+        "when": [
+          {
+            "criterion": "checkResourceIntegrity",
+            "args": null
+          },
+          {
+            "criterion": "checkPrincipalRole",
+            "args": [
+              "admin"
+            ]
+          },
+          {
+            "criterion": "checkAction",
+            "args": [
+              "signTransaction"
+            ]
+          },
+          {
+            "criterion": "checkIntentType",
+            "args": [
+              "transferErc721",
+              "transferErc1155"
+            ]
+          }
+        ],
+        "then": "permit"
+      }
+    ]
+  }
+}

apps/devtool/src/app/api/data-store/route.ts

@@ -0,0 +1,26 @@
+import { JSONFilePreset } from 'lowdb/node'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export const GET = async (req: NextApiRequest, res: NextApiResponse) => {
+  const db = await JSONFilePreset('./data-store/storage.json', {
+    entity: { signature: '', data: {} },
+    policy: { signature: {}, data: [] }
+  })
+
+  return new Response(JSON.stringify({ ...db.data }))
+}
+
+export const POST = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { entity, policy } = await req.json()
+
+  const db = await JSONFilePreset('./data-store/storage.json', {
+    entity: { signature: '', data: {} },
+    policy: { signature: {}, data: [] }
+  })
+
+  db.data = { entity, policy }
+
+  await db.write()
+
+  return new Response(JSON.stringify({ ...db.data }))
+}

apps/devtool/src/app/components/EditorComponent.tsx

@@ -3,85 +3,107 @@
 import Editor from '@monaco-editor/react'
 import { signMessage } from '@wagmi/core'
 import axios from 'axios'
+import Image from 'next/image'
 import { useRef, useState } from 'react'
 import { useAccount, useConnect, useDisconnect } from 'wagmi'
 import { config } from './config'
-import example from './example.json'
+import example from './data.json'
 
 const EditorComponent = () => {
   const account = useAccount()
   const { connectors, connect } = useConnect()
   const { disconnect } = useDisconnect()
 
-  const [policies, setPolicies] = useState<string | undefined>(JSON.stringify(example, null, 2))
-  const [signature, setSignature] = useState('')
+  const [data, setData] = useState<string | undefined>(JSON.stringify(example, null, 2))
+  const [displayLink, setDisplayLink] = useState(false)
 
   const editorRef = useRef<any>(null)
   const monacoRef = useRef<any>(null)
 
   const sign = async () => {
-    if (!policies) return
+    if (!data) return
 
-    const sig = await signMessage(config, { message: policies })
-    setSignature(sig)
+    const { entity, policy } = JSON.parse(data)
 
-    await axios.post('/api/signature', { policies: JSON.parse(policies), signature: sig })
+    const entitySig = await signMessage(config, { message: JSON.stringify(entity) })
+    const policySig = await signMessage(config, { message: JSON.stringify(policy) })
+
+    await axios.post('/api/data-store', {
+      entity: {
+        signature: entitySig,
+        data: entity
+      },
+      policy: {
+        signature: policySig,
+        data: policy
+      }
+    })
+
+    setDisplayLink(true)
   }
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-row-reverse gap-4">
-        {account.status !== 'connected' && (
-          <div className="flex gap-2">
-            {connectors.map((connector) => (
+      <div className="flex items-center">
+        <Image
+          src="/narval-wordmark.png"
+          width="150"
+          height="50"
+          alt="Narval Logo"
+          style={{
+            maxWidth: '100%',
+            height: 'auto'
+          }}
+          priority
+        />
+        <div className="flex flex-row-reverse gap-4 flex-1">
+          {!account.isConnected && (
+            <div className="flex gap-2">
+              {connectors.map((connector) => (
+                <button
+                  type="button"
+                  className="rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
+                  key={connector.uid}
+                  onClick={() => connect({ connector })}
+                >
+                  Connect Wallet
+                </button>
+              ))}
+            </div>
+          )}
+          {account.isConnected && (
+            <>
               <button
                 type="button"
                 className="rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
-                key={connector.uid}
-                onClick={() => connect({ connector })}
+                onClick={() => disconnect()}
               >
-                {connector.name}
+                Disconnect
               </button>
-            ))}
-          </div>
-        )}
-        {account.status === 'connected' && (
-          <>
-            <button
-              type="button"
-              className="rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
-              onClick={() => disconnect()}
-            >
-              Disconnect
-            </button>
-            <button
-              type="button"
-              className="rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
-              onClick={() => sign()}
-            >
-              Sign
-            </button>
-          </>
-        )}
+              <button
+                type="button"
+                className="rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
+                onClick={() => sign()}
+              >
+                Sign
+              </button>
+            </>
+          )}
+        </div>
       </div>
       <div className="flex items-center gap-4">
-        {signature && (
-          <a className="text-blue-400 underline" href="http://127.0.0.1:4200/api/policies" target="_blank">
-            Policies
-          </a>
-        )}
-        {signature && (
-          <a className="text-blue-400 underline" href="http://127.0.0.1:4200/api/signature" target="_blank">
-            Signature
+        {displayLink && (
+          <a className="text-blue-400 underline" href="http://127.0.0.1:4200/api/data-store" target="_blank">
+            Data Store
           </a>
         )}
       </div>
-      <div className="flex flex-col gap-4">
+      <div className="border border-black rounded-xl p-4">
         <Editor
           height="70vh"
           language="json"
-          value={policies}
-          onChange={(value) => setPolicies(value)}
+          value={data}
+          onChange={(value) => setData(value)}
           onMount={(editor, monaco) => {
             editorRef.current = editor
             monacoRef.current = monaco

apps/devtool/src/app/components/config.ts

@@ -3,6 +3,7 @@ import { mainnet, sepolia } from 'wagmi/chains'
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
+  ssr: true,
   transports: {
     [mainnet.id]: http(),
     [sepolia.id]: http()

apps/devtool/src/app/components/data.json

@@ -0,0 +1,39 @@
+{
+  "entity": {
+    "addressBook": [],
+    "credentials": [],
+    "tokens": [],
+    "userGroupMembers": [],
+    "userGroups": [],
+    "userWallets": [],
+    "users": [],
+    "walletGroupMembers": [],
+    "walletGroups": [],
+    "wallets": []
+  },
+  "policy": [
+    {
+      "id": "a68e8d20-0419-475c-8fcc-b17d4de8c955",
+      "name": "Authorized any admin to transfer ERC721 or ERC1155 tokens",
+      "when": [
+        {
+          "criterion": "checkResourceIntegrity",
+          "args": null
+        },
+        {
+          "criterion": "checkPrincipalRole",
+          "args": ["admin"]
+        },
+        {
+          "criterion": "checkAction",
+          "args": ["signTransaction"]
+        },
+        {
+          "criterion": "checkIntentType",
+          "args": ["transferErc721", "transferErc1155"]
+        }
+      ],
+      "then": "permit"
+    }
+  ]
+}

package.json

@@ -102,6 +102,7 @@
     "handlebars": "^4.7.8",
     "jose": "^5.2.2",
     "lodash": "^4.17.21",
+    "lowdb": "^7.0.1",
     "next": "14.0.4",
     "prism-react-renderer": "^2.3.1",
     "react": "18.2.0",