Ng/nested relations support

apps/events/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@graphprotocol/grc-20": "^0.20.0",
+    "@graphprotocol/grc-20": "^0.21.2",
     "@graphprotocol/hypergraph": "workspace:*",
     "@graphprotocol/hypergraph-react": "workspace:*",
     "@noble/hashes": "^1.8.0",

apps/events/src/components/create-events.tsx

@@ -0,0 +1,94 @@
+import { getSmartAccountWalletClient } from '@/lib/smart-account';
+import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
+import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { Button } from './ui/button';
+
+const createEvents = async ({
+  smartAccountWalletClient,
+  space,
+}: { smartAccountWalletClient: GeoSmartAccount; space: string }) => {
+  try {
+    const ops: Array<Op> = [];
+
+    const { id: jobOfferTypeId, ops: createJobOfferTypeOps } = Graph.createEntity({
+      name: 'My Test Job Offer',
+      types: ['a107c081-3089-4a94-8208-6a10775557d2'],
+      values: [
+        {
+          property: '20d18713-5352-4e1f-987c-d853bf9f8831',
+          value: '80000',
+        },
+      ],
+    });
+    ops.push(...createJobOfferTypeOps);
+
+    const { id: jobOfferTypeId2, ops: createJobOfferTypeOps2 } = Graph.createEntity({
+      name: 'My Test Job Offer 2',
+      types: ['a107c081-3089-4a94-8208-6a10775557d2'],
+      values: [
+        {
+          property: '20d18713-5352-4e1f-987c-d853bf9f8831',
+          value: '90000',
+        },
+      ],
+    });
+    ops.push(...createJobOfferTypeOps2);
+
+    console.log('jobOfferTypeId', jobOfferTypeId);
+    console.log('jobOfferTypeId2', jobOfferTypeId2);
+
+    const { id: companyTypeId, ops: createCompanyTypeOps } = Graph.createEntity({
+      name: 'My Test Company',
+      types: ['e8932986-67a9-4fff-89a6-07f03973014c'],
+      relations: {
+        '96beadca-0846-4e56-9628-c196f7f3c4cd': [{ toEntity: jobOfferTypeId }, { toEntity: jobOfferTypeId2 }],
+      },
+    });
+    ops.push(...createCompanyTypeOps);
+
+    const { id: eventTypeId, ops: createEventTypeOps } = Graph.createEntity({
+      name: 'My Test Event',
+      types: ['6b8dbe76-389f-4bde-acdd-db9d5e387882'],
+      relations: {
+        'd8e4ea54-cb8c-4dca-9c2b-64dbbbe78397': [{ toEntity: companyTypeId }],
+      },
+    });
+    ops.push(...createEventTypeOps);
+
+    const result = await publishOps({
+      ops,
+      walletClient: smartAccountWalletClient,
+      space,
+      name: 'Create Job Offers, Companies and Events',
+      network: 'TESTNET',
+    });
+    console.log('result', result);
+    alert('Events created');
+  } catch (error) {
+    console.error('error', error);
+  }
+};
+
+export const CreateEvents = () => {
+  const space = useHypergraphSpace();
+
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          const smartAccountWalletClient = await getSmartAccountWalletClient();
+          if (!smartAccountWalletClient) {
+            throw new Error('Missing smartAccountWalletClient');
+          }
+          await createEvents({
+            // @ts-expect-error TODO: in the future we probably only only use one smart account wallet client
+            smartAccountWalletClient,
+            space,
+          });
+        }}
+      >
+        Create Job Offers, Companies and Events
+      </Button>
+    </div>
+  );
+};

apps/events/src/components/create-properties-and-types-event.tsx

@@ -0,0 +1,132 @@
+import { getSmartAccountWalletClient } from '@/lib/smart-account';
+import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
+import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+
+const createPropertiesAndTypesEvent = async ({
+  smartAccountWalletClient,
+  space,
+}: { smartAccountWalletClient: GeoSmartAccount; space: string }) => {
+  const ops: Array<Op> = [];
+  const { id: salaryPropertyId, ops: createSalaryPropertyOps } = Graph.createProperty({
+    dataType: 'NUMBER',
+    name: 'Salary',
+  });
+  ops.push(...createSalaryPropertyOps);
+
+  const { id: jobOfferTypeId, ops: createJobOfferTypeOps } = Graph.createType({
+    name: 'Job Offer',
+    properties: [salaryPropertyId],
+  });
+  ops.push(...createJobOfferTypeOps);
+
+  const { id: jobOffersRelationTypeId, ops: createJobOffersRelationTypeOps } = Graph.createProperty({
+    dataType: 'RELATION',
+    name: 'Job Offer',
+    relationValueTypes: [jobOfferTypeId],
+  });
+  ops.push(...createJobOffersRelationTypeOps);
+
+  const { id: companyTypeId, ops: createCompanyTypeOps } = Graph.createType({
+    name: 'Company',
+    properties: [salaryPropertyId, jobOffersRelationTypeId],
+  });
+  ops.push(...createCompanyTypeOps);
+
+  const { id: sponsorsRelationTypeId, ops: createSponsorsRelationTypeOps } = Graph.createProperty({
+    dataType: 'RELATION',
+    name: 'Sponsor',
+    relationValueTypes: [companyTypeId],
+  });
+  ops.push(...createSponsorsRelationTypeOps);
+
+  const { id: eventTypeId, ops: createEventTypeOps } = Graph.createType({
+    name: 'Event',
+    properties: [sponsorsRelationTypeId],
+  });
+  ops.push(...createEventTypeOps);
+
+  const result = await publishOps({
+    ops,
+    walletClient: smartAccountWalletClient,
+    space,
+    name: 'Create properties and types',
+    network: 'TESTNET',
+  });
+  return {
+    result,
+    eventTypeId,
+    companyTypeId,
+    jobOfferTypeId,
+    salaryPropertyId,
+    jobOffersRelationTypeId,
+    sponsorsRelationTypeId,
+  };
+};
+
+export const CreatePropertiesAndTypesEvent = () => {
+  const [mapping, setMapping] = useState<string>('');
+  const space = useHypergraphSpace();
+
+  return (
+    <div>
+      {mapping && (
+        <Card>
+          <CardContent>
+            <pre>{mapping}</pre>
+          </CardContent>
+        </Card>
+      )}
+      <Button
+        onClick={async () => {
+          const smartAccountWalletClient = await getSmartAccountWalletClient();
+          if (!smartAccountWalletClient) {
+            throw new Error('Missing smartAccountWalletClient');
+          }
+          const {
+            eventTypeId,
+            companyTypeId,
+            jobOfferTypeId,
+            salaryPropertyId,
+            jobOffersRelationTypeId,
+            sponsorsRelationTypeId,
+          } = await createPropertiesAndTypesEvent({
+            // @ts-expect-error TODO: in the future we probably only only use one smart account wallet client
+            smartAccountWalletClient,
+            space,
+          });
+
+          const newMapping = `Event: {
+  typeIds: [Id.Id('${eventTypeId}')],
+  properties: {
+    name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+  },
+  relations: {
+      sponsors: Id.Id('${sponsorsRelationTypeId}'),
+  },
+},
+Company: {
+  typeIds: [Id.Id('${companyTypeId}')],
+  properties: {
+    name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    jobOffers: Id.Id('${jobOffersRelationTypeId}'),
+  },
+},
+JobOffer: {
+  typeIds: [Id.Id('${jobOfferTypeId}')],
+  properties: {
+    name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    salary: Id.Id('${salaryPropertyId}'),
+  },
+},
+`;
+          setMapping(newMapping);
+        }}
+      >
+        Create properties and types for Event, Company and JobOffer
+      </Button>
+    </div>
+  );
+};

apps/events/src/components/create-properties-and-types.tsx → apps/events/src/components/create-properties-and-types-todos.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Button } from './ui/button';
 import { Card, CardContent } from './ui/card';
 
-const createPropertiesAndTypes = async ({
+const createPropertiesAndTypesTodos = async ({
   smartAccountWalletClient,
   space,
 }: { smartAccountWalletClient: GeoSmartAccount; space: string }) => {
@@ -84,7 +84,7 @@ const createPropertiesAndTypes = async ({
   };
 };
 
-export const CreatePropertiesAndTypes = () => {
+export const CreatePropertiesAndTypesTodos = () => {
   const [mapping, setMapping] = useState<string>('');
   const space = useHypergraphSpace();
 
@@ -112,15 +112,15 @@ export const CreatePropertiesAndTypes = () => {
             pointPropertyId,
             websitePropertyId,
             amountPropertyId,
-          } = await createPropertiesAndTypes({
+          } = await createPropertiesAndTypesTodos({
             smartAccountWalletClient,
             space,
           });
 
           const newMapping = `Todo2: {
   typeIds: [Id.Id('${todoTypeId}')],
   properties: {
-    name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+    name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
     checked: Id.Id('${checkedPropertyId}'),
     due: Id.Id('${duePropertyId}'),
     point: Id.Id('${pointPropertyId}'),
@@ -134,7 +134,7 @@ export const CreatePropertiesAndTypes = () => {
 User: {
   typeIds: [Id.Id('${userId}')],
   properties: {
-    name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+    name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
   },
 }
 `;

apps/events/src/components/playground.tsx

@@ -2,7 +2,18 @@ import { useQuery } from '@graphprotocol/hypergraph-react';
 import { Event } from '../schema';
 
 export const Playground = () => {
-  const { data: entityData, isLoading, isError } = useQuery(Event, { mode: 'public' });
+  const {
+    data: entityData,
+    isLoading,
+    isError,
+  } = useQuery(Event, {
+    mode: 'public',
+    include: {
+      sponsors: {
+        jobOffers: {},
+      },
+    },
+  });
 
   console.log({ isLoading, isError, entityData });
 

apps/events/src/lib/smart-account.ts

@@ -1,11 +1,15 @@
-import { getSmartAccountWalletClient as grc20getSmartAccountWalletClient } from '@graphprotocol/grc-20';
+import { getWalletClient } from '@graphprotocol/grc-20';
 import type { Hex } from 'viem';
 
-const privateKey = `0x${import.meta.env.VITE_ACCOUNT_KEY}` as Hex;
+const privateKey = import.meta.env.VITE_ACCOUNT_KEY as Hex;
 
 export const getSmartAccountWalletClient = async () => {
   try {
-    return await grc20getSmartAccountWalletClient({
+    // return await grc20getSmartAccountWalletClient({
+    //   privateKey,
+    // });
+    console.log('privateKey', privateKey);
+    return await getWalletClient({
       privateKey,
     });
   } catch (err) {

apps/events/src/mapping.ts

@@ -2,26 +2,35 @@ import { Id } from '@graphprotocol/grc-20';
 import type { Mapping } from '@graphprotocol/hypergraph';
 
 export const mapping: Mapping = {
-  RelationEntry: {
-    typeIds: [Id.Id('8f151ba4-de20-4e3c-9cb4-99ddf96f48f1')],
+  Event: {
+    typeIds: [Id.Id('6b8dbe76-389f-4bde-acdd-db9d5e387882')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
     },
+    relations: {
+      sponsors: Id.Id('d8e4ea54-cb8c-4dca-9c2b-64dbbbe78397'),
+    },
   },
-  Event: {
-    typeIds: [Id.Id('4d876b81-787e-41fc-ab5d-075d4da66a3f')],
+  Company: {
+    typeIds: [Id.Id('e8932986-67a9-4fff-89a6-07f03973014c')],
+    properties: {
+      name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    },
+    relations: {
+      jobOffers: Id.Id('96beadca-0846-4e56-9628-c196f7f3c4cd'),
+    },
+  },
+  JobOffer: {
+    typeIds: [Id.Id('a107c081-3089-4a94-8208-6a10775557d2')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
-      // description: Id.Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
+      salary: Id.Id('20d18713-5352-4e1f-987c-d853bf9f8831'),
     },
-    // relations: {
-    //   any: Id.Id('8f151ba4-de20-4e3c-9cb4-99ddf96f48f1'),
-    // },
   },
   // Todo2: {
   //   typeIds: [Id.Id('LJuM8ju67mCv78FhAiK9k9')],
   //   properties: {
-  //     name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+  //     name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
   //     checked: Id.Id('Ud9kn9gAUsCr1pxvxcgDj8'),
   //     due: Id.Id('CFisPgjjWVdnaMtSWJDBqA'),
   //     point: Id.Id('BkcVo7JZHF5LsWw7XZJwwe'),
@@ -35,7 +44,7 @@ export const mapping: Mapping = {
   // User: {
   //   typeIds: [Id.Id('Fk5qzwdpKsD35gm5ts4SZA')],
   //   properties: {
-  //     name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+  //     name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
   //   },
   // },
 };

apps/events/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { store } from '@graphprotocol/hypergraph';
 import { useHypergraphApp, useSpaces } from '@graphprotocol/hypergraph-react';
@@ -117,6 +117,7 @@ function Index() {
               <Card>
                 <CardHeader>
                   <CardTitle>{space.name}</CardTitle>
+                  <CardDescription className="text-xs">{space.id}</CardDescription>
                 </CardHeader>
               </Card>
             </li>