Template contracts

dmihal · dmihal · commit ab0d3b3c1739 · 2022-08-18T21:40:55.000+01:00
diff --git a/components/SubgraphEditor/SubgraphConfig/SelectedContract/SelectedContract.tsx b/components/SubgraphEditor/SubgraphConfig/SelectedContract/SelectedContract.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
-import { Plus, Trash2 } from 'lucide-react'
+import { Files, Plus, Trash2 } from 'lucide-react'
+import ReactTooltip from 'react-tooltip'
 
 import { Contract, ContractEvent } from 'hooks/local-subgraphs'
 import { EventRow } from './EventRow'
@@ -30,15 +31,15 @@ const Header = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
-
-    .delete-link {
-      &:hover {
-        cursor: pointer;
-      }
-    }
   }
 `
 
+const IconBtn = styled.button<{ active?: boolean }>`
+  color: ${({ active }) => (active ? '#ffffff' : '#bbbbbb')};
+  border: none;
+  background: transparent;
+`
+
 const StatusContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -115,7 +116,7 @@ interface SelectedContractProps {
 
 export const SelectedContract = (props: SelectedContractProps) => {
   const {
-    contract: { addresses, name, source, errorMessage, abi, startBlocks, events },
+    contract: { addresses, name, source, errorMessage, abi, startBlocks, events, isTemplate },
     createMappingFn,
     deleteContract,
     fnExtractionLoading,
@@ -231,13 +232,28 @@ export const SelectedContract = (props: SelectedContractProps) => {
             onChange={name => updateContract({ name })}
           />
 
-          <Trash2 className="delete-link" size={16} onClick={() => deleteContract()} />
+          <IconBtn data-tip="Remove contract" onClick={deleteContract}>
+            <Trash2 size={16} />
+          </IconBtn>
+          <IconBtn
+            data-tip="Data Source Template"
+            active={isTemplate}
+            onClick={() => updateContract({ isTemplate: !isTemplate })}
+            disabled={metadataLoading}
+          >
+            <Files size={16} />
+          </IconBtn>
+          <ReactTooltip />
         </div>
-        <span className="address">{addresses[CHAIN_ID]}</span>
-        {metadataLoading ? <span>Fetching contract metadata...</span> : null}
-        {startBlocks[CHAIN_ID] ? (
-          <span className="address">Deployed on block {startBlocks[CHAIN_ID]}</span>
-        ) : null}
+        {!isTemplate && (
+          <>
+            <span className="address">{addresses[CHAIN_ID]}</span>
+            {metadataLoading ? <span>Fetching contract metadata...</span> : null}
+            {startBlocks[CHAIN_ID] ? (
+              <span className="address">Deployed on block {startBlocks[CHAIN_ID]}</span>
+            ) : null}
+          </>
+        )}
         <StatusContainer>
           <span className="status-message">
             {errorMessage
@@ -322,10 +338,12 @@ export const SelectedContract = (props: SelectedContractProps) => {
             <ActionButton
               disabled={!contractHasEvents}
               onClick={() => setNewEvent({ show: true, signature: '' })}
-              {...(!contractHasEvents && {
-                disabled: true,
-                title: 'Contract has no events defined',
-              })}
+              {...(contractHasEvents
+                ? {}
+                : {
+                    disabled: true,
+                    title: 'Contract has no events defined',
+                  })}
             >
               <Plus size={12} style={{ marginRight: 4 }} />
               New
diff --git a/components/SubgraphEditor/SubgraphConfig/SubgraphConfig.tsx b/components/SubgraphEditor/SubgraphConfig/SubgraphConfig.tsx
@@ -8,7 +8,7 @@ import { EDITOR_TYPES, useEditorState } from 'hooks/editor-state'
 import { SelectedContract } from './SelectedContract'
 import { Dropdown } from '../../atoms'
 import { addImport } from 'utils/source-code-utils'
-import { generateContractFile, generateSchemaFile } from 'utils/graph-file-generator'
+import { generateLibrariesForSubgraph } from 'utils/graph-file-generator'
 import { compileAs } from 'utils/deploy-subgraph'
 
 const Root = styled.div`
@@ -101,6 +101,7 @@ export const SubgraphConfig = (props: SubgraphConfigProps) => {
       if (!alreadySelected) {
         const newContract: Contract = {
           name: '',
+          isTemplate: false,
           addresses: { [CHAIN_ID]: address },
           abi: null,
           startBlocks: {},
@@ -122,14 +123,7 @@ export const SubgraphConfig = (props: SubgraphConfigProps) => {
     setFnExtractionLoading(true)
     const { loadAsBytecode } = await import('utils/as-compiler')
 
-    const libraries: { [name: string]: string } = {}
-
-    for (const contract of subgraph.contracts) {
-      const code = await generateContractFile(contract.name, contract.abi)
-      libraries[`contracts/${contract.name}.ts`] = code
-    }
-
-    libraries['schema/index.ts'] = await generateSchemaFile(subgraph.schema)
+    const libraries = await generateLibrariesForSubgraph(subgraph)
 
     try {
       const bytecode = await compileAs(subgraph.mappings[DEFAULT_MAPPING], libraries)
diff --git a/components/SubgraphEditor/atoms/EditableText.tsx b/components/SubgraphEditor/atoms/EditableText.tsx
@@ -3,6 +3,8 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 const commonStyles = css`
+  color: var(--color-white);
+  font-size: 14px;
   padding: 1px 2px;
   font-family: 'Inter', sans-serif;
 `
diff --git a/generated/graph-ts-sdk.d.ts b/generated/graph-ts-sdk.d.ts
@@ -1,5 +1,7 @@
 declare module '@graphprotocol/graph-ts' {
   namespace ethereum {
+    export declare class Value {}
+
     export declare class Block {
       public hash: Bytes
       public parentHash: Bytes
diff --git a/hooks/local-subgraphs.ts b/hooks/local-subgraphs.ts
@@ -19,6 +19,7 @@ export interface ContractEvent {
 
 export interface Contract {
   name: string
+  isTemplate: boolean
   addresses: { [chain: string]: string }
   startBlocks: { [chain: string]: number }
   abi: any
diff --git a/hooks/useGeneratedFiles.ts b/hooks/useGeneratedFiles.ts
@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react'
-import { generateContractFile, generateSchemaFile } from 'utils/graph-file-generator'
+import {
+  generateContractFile,
+  generateSchemaFile,
+  generateTemplateFile,
+} from 'utils/graph-file-generator'
 import { SubgraphData } from './local-subgraphs'
 // @ts-ignore
 import assemblyscriptGlobals from '!raw-loader!assemblyscript/std/assembly/index.d.ts'
@@ -19,6 +23,11 @@ export const useGeneratedFiles = (subgraph: SubgraphData | null) => {
       try {
         const content = await generateContractFile(contract.name, contract.abi)
         _files.push({ content, filePath: `file:///contracts/${contract.name}.ts` })
+
+        if (contract.isTemplate) {
+          const template = await generateTemplateFile(contract.name)
+          _files.push({ content: template, filePath: `file:///templates/${contract.name}.ts` })
+        }
       } catch (e) {
         console.error(`Error generating file for ${contract.name}: ${e.message}`)
       }
diff --git a/utils/deploy-subgraph.ts b/utils/deploy-subgraph.ts
@@ -1,5 +1,5 @@
 import { ContractEvent, DEFAULT_MAPPING, SubgraphData } from 'hooks/local-subgraphs'
-import { generateContractFile, generateSchemaFile } from './graph-file-generator'
+import { generateLibrariesForSubgraph } from './graph-file-generator'
 import Hash from 'ipfs-only-hash'
 
 export enum STATUS {
@@ -136,14 +136,7 @@ export async function prepareSubgraphDeploymentFiles(subgraph: SubgraphData) {
     throw new Error(`Couldn't find event ${signature} in ABI`)
   }
 
-  const libraries: { [name: string]: string } = {}
-
-  for (const contract of subgraph.contracts) {
-    const code = await generateContractFile(contract.name, contract.abi)
-    libraries[`contracts/${contract.name}.ts`] = code
-  }
-
-  libraries['schema/index.ts'] = await generateSchemaFile(subgraph.schema)
+  const libraries = await generateLibrariesForSubgraph(subgraph)
 
   const compiled = await compileAs(subgraph.mappings[DEFAULT_MAPPING], libraries)
 
@@ -166,6 +159,7 @@ export async function prepareSubgraphDeploymentFiles(subgraph: SubgraphData) {
   })
 
   const dataSources: any[] = []
+  const templates: any[] = []
 
   // Currently, all ABIs are available to all data sources, so we generate
   // one single array that's added to all sources
@@ -189,14 +183,12 @@ export async function prepareSubgraphDeploymentFiles(subgraph: SubgraphData) {
       cid,
     })
 
-    dataSources.push({
+    const contractManifest: any = {
       kind: 'ethereum/contract',
       name: contract.name,
       network: 'mainnet',
       source: {
         abi: contract.name,
-        address: contract.addresses['1'],
-        startBlock: contract.startBlocks['1'],
       },
       mapping: {
         abis,
@@ -213,7 +205,15 @@ export async function prepareSubgraphDeploymentFiles(subgraph: SubgraphData) {
         kind: 'ethereum/events',
         language: 'wasm/assemblyscript',
       },
-    })
+    }
+
+    if (contract.isTemplate) {
+      templates.push(contractManifest)
+    } else {
+      contractManifest.source.address = contract.addresses['1']
+      contractManifest.source.startBlock = contract.startBlocks['1']
+      dataSources.push(contractManifest)
+    }
   }
 
   const schemaCid = await getCID(subgraph.schema)
@@ -225,23 +225,29 @@ export async function prepareSubgraphDeploymentFiles(subgraph: SubgraphData) {
     cid: schemaCid,
   })
 
-  const manifestString = yaml.dump({
-    specVersion: '0.0.5',
-    description: 'Test description',
-    dataSources,
-    schema: {
-      file: {
-        '/': `/ipfs/${schemaCid}`,
+  const manifestString = yaml.dump(
+    {
+      specVersion: '0.0.5',
+      description: 'Test description',
+      dataSources,
+      templates,
+      schema: {
+        file: {
+          '/': `/ipfs/${schemaCid}`,
+        },
       },
+      sourceCode: [
+        {
+          name: 'mapping.ts',
+          file: `/ipfs/${mappingCid}`,
+          source: `/ipfs/${sourceCid}`,
+        },
+      ],
     },
-    sourceCode: [
-      {
-        name: 'mapping.ts',
-        file: `/ipfs/${mappingCid}`,
-        source: `/ipfs/${sourceCid}`,
-      },
-    ],
-  })
+    {
+      noRefs: true,
+    }
+  )
 
   files.push({
     title: 'Manifest',
diff --git a/utils/graph-file-generator.ts b/utils/graph-file-generator.ts
@@ -1,5 +1,43 @@
+import { SubgraphData } from 'hooks/local-subgraphs'
 import immutable from 'immutable'
 
+export async function generateLibrariesForSubgraph(
+  subgraph: SubgraphData,
+  { prefix = '', failSilently = false } = {}
+) {
+  const libraries: { [name: string]: string } = {}
+
+  for (const contract of subgraph.contracts) {
+    try {
+      const code = await generateContractFile(contract.name, contract.abi)
+      libraries[`${prefix}contracts/${contract.name}.ts`] = code
+      console.log(contract)
+      if (contract.isTemplate) {
+        const template = await generateTemplateFile(contract.name)
+        libraries[`${prefix}templates/${contract.name}.ts`] = template
+      }
+    } catch (e: any) {
+      if (failSilently) {
+        console.error(`Error generating file for ${contract.name}: ${e.message}`)
+      } else {
+        throw e
+      }
+    }
+  }
+
+  try {
+    libraries[`${prefix}schema/index.ts`] = await generateSchemaFile(subgraph.schema)
+  } catch (e: any) {
+    if (failSilently) {
+      console.error(`Error generating schema: ${e.message}`)
+    } else {
+      throw e
+    }
+  }
+
+  return libraries
+}
+
 export async function generateContractFile(name: string, abi: any) {
   // @ts-ignore
   const { default: ABI } = await import('@graphprotocol/graph-cli/src/protocols/ethereum/abi')
@@ -11,6 +49,25 @@ export async function generateContractFile(name: string, abi: any) {
   return [...codegen.generateModuleImports(), ...codegen.generateTypes()].join('\n')
 }
 
+export async function generateTemplateFile(name: string) {
+  const { default: Template } = await import(
+    // @ts-ignore
+    '@graphprotocol/graph-cli/src/protocols/ethereum/codegen/template'
+  )
+  const { default: DataSourceTemplateCodeGenerator } = await import(
+    // @ts-ignore
+    '@graphprotocol/graph-cli/src/codegen/template'
+  )
+
+  const templateData = { get: () => name }
+  const template = new Template(templateData)
+  const codegen = new DataSourceTemplateCodeGenerator(templateData, {
+    getTemplateCodeGen: () => template,
+  })
+
+  return [...codegen.generateModuleImports(), ...codegen.generateTypes()].join('\n')
+}
+
 export async function generateSchemaFile(schemaCode: string) {
   const [gql, { default: SchemaCodeGenerator }] = await Promise.all([
     import('graphql/language'),

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'`
`3`	`3`	`import styled, { css } from 'styled-components'`
`4`	`4`
`5`	`5`	const commonStyles = css`
	`6`	`+ color: var(--color-white);`
	`7`	`+ font-size: 14px;`
`6`	`8`	`padding: 1px 2px;`
`7`	`9`	`font-family: 'Inter', sans-serif;`
`8`	`10`	`