From 61e5e2a66029a9dea86f9e1a21dade98e3934b17 Mon Sep 17 00:00:00 2001
From: mariz <marrise@oostvoort.com>
Date: Wed, 8 Nov 2023 14:36:21 +0800
Subject: [PATCH] fix: typescript issues

---
 web/src/components/Main.tsx                   |  3 +
 web/src/components/ParamPicker.tsx            |  2 +-
 web/src/dojo/contractComponents.ts            |  4 +-
 web/src/fixGeneratedGraphql.cjs               |  3 +-
 web/src/generated/graphql.ts                  |  8 +++
 web/src/hooks/entities/useEntities.ts         | 59 -------------------
 web/src/hooks/entities/useFilteredEntities.ts |  2 +-
 web/src/hooks/entities/useNeedsAttention.ts   | 39 ++++++------
 web/src/hooks/systems/useInteract.ts          |  4 +-
 web/src/lib/Instruction.ts                    | 20 ++++++-
 10 files changed, 60 insertions(+), 84 deletions(-)
 delete mode 100644 web/src/hooks/entities/useEntities.ts

diff --git a/web/src/components/Main.tsx b/web/src/components/Main.tsx
index bb46890..83b22fc 100644
--- a/web/src/components/Main.tsx
+++ b/web/src/components/Main.tsx
@@ -65,6 +65,7 @@ const Main = () => {
     setColor(color.hex)
   }
 
+
   return (
       <React.Fragment>
           {
@@ -74,6 +75,8 @@ const Main = () => {
                         <DrawPanel />
 
                           <div className="fixed bottom-5 right-20">
+                            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                            {/*// @ts-ignore*/}
                             <CompactPicker color={selectedHexColor} onChangeComplete={handleColorChange} />
                           </div>
                       </div>
diff --git a/web/src/components/ParamPicker.tsx b/web/src/components/ParamPicker.tsx
index 8fd83c6..c610822 100644
--- a/web/src/components/ParamPicker.tsx
+++ b/web/src/components/ParamPicker.tsx
@@ -22,7 +22,7 @@ const ParamPicker: React.FC<PropsType> = ({ value, onChange, params }) => {
           case 'enum':
             return (
               <select
-                class={'text-black'}
+                className={'text-black'}
                 key={param.name}
                 value={value[param.name]}
                 onChange={(e) => onChange({...value, [param.name]: e.target.value})}
diff --git a/web/src/dojo/contractComponents.ts b/web/src/dojo/contractComponents.ts
index ba2b55e..1592d89 100644
--- a/web/src/dojo/contractComponents.ts
+++ b/web/src/dojo/contractComponents.ts
@@ -65,8 +65,10 @@ export function defineContractComponents(world: World) {
 	    );
 	  })(),
 	  Permissions: (() => {
-	    return defineComponent(
+      return defineComponent(
 	      world,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
 	      { allowing_app: RecsType.String, allowed_app: RecsType.String, permission: { alert: RecsType.Boolean, app: RecsType.Boolean, color: RecsType.Boolean, owner: RecsType.Boolean, text: RecsType.Boolean, timestamp: RecsType.Boolean, action: RecsType.Boolean } },
 	      {
 	        metadata: {
diff --git a/web/src/fixGeneratedGraphql.cjs b/web/src/fixGeneratedGraphql.cjs
index f0b0e98..4eb86b8 100644
--- a/web/src/fixGeneratedGraphql.cjs
+++ b/web/src/fixGeneratedGraphql.cjs
@@ -8,7 +8,8 @@ let lines = content.split('\n');
 
 const issues = [
   `import { GraphQLClientRequestHeaders } from 'graphql-request/build/cjs/types';`,
-  `Dom.Headers`
+  `Dom.Headers`,
+  `GraphQLError`
 ]
 
 const fix = '// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n' +
diff --git a/web/src/generated/graphql.ts b/web/src/generated/graphql.ts
index 0811640..9f6fe24 100644
--- a/web/src/generated/graphql.ts
+++ b/web/src/generated/graphql.ts
@@ -1,6 +1,8 @@
 import { GraphQLClient } from 'graphql-request';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { GraphQLClientRequestHeaders } from 'graphql-request/build/cjs/types';
 import { print } from 'graphql'
 import gql from 'graphql-tag';
@@ -1380,12 +1382,18 @@ const All_Filtered_EntitiesDocumentString = print(All_Filtered_EntitiesDocument)
 const GetNeedsAttentionDocumentString = print(GetNeedsAttentionDocument);
 export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
   return {
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
     getEntities(variables?: GetEntitiesQueryVariables, requestHeaders?: GraphQLClientRequestHeaders): Promise<{ data: GetEntitiesQuery; errors?: GraphQLError[]; extensions?: any; headers: Headers; status: number; }> {
         return withWrapper((wrappedRequestHeaders) => client.rawRequest<GetEntitiesQuery>(GetEntitiesDocumentString, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'getEntities', 'query');
     },
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
     all_filtered_entities(variables?: All_Filtered_EntitiesQueryVariables, requestHeaders?: GraphQLClientRequestHeaders): Promise<{ data: All_Filtered_EntitiesQuery; errors?: GraphQLError[]; extensions?: any; headers: Headers; status: number; }> {
         return withWrapper((wrappedRequestHeaders) => client.rawRequest<All_Filtered_EntitiesQuery>(All_Filtered_EntitiesDocumentString, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'all_filtered_entities', 'query');
     },
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
     getNeedsAttention(variables?: GetNeedsAttentionQueryVariables, requestHeaders?: GraphQLClientRequestHeaders): Promise<{ data: GetNeedsAttentionQuery; errors?: GraphQLError[]; extensions?: any; headers: Headers; status: number; }> {
         return withWrapper((wrappedRequestHeaders) => client.rawRequest<GetNeedsAttentionQuery>(GetNeedsAttentionDocumentString, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'getNeedsAttention', 'query');
     }
diff --git a/web/src/hooks/entities/useEntities.ts b/web/src/hooks/entities/useEntities.ts
deleted file mode 100644
index 447daa5..0000000
--- a/web/src/hooks/entities/useEntities.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useDojo } from '@/DojoContext'
-import { BLOCK_TIME } from '@/global/constants'
-import { getEntityIdFromKeys } from '@dojoengine/utils'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { Component, getComponentValue, setComponent } from '@latticexyz/recs'
-import _ from 'lodash'
-
-const useEntities = () => {
-  const {
-    setup: {
-      components: { _Color, Text, _NeedsAttention, Timestamp, _Owner, _PixelType },
-      network: { graphSdk }
-    }
-  } = useDojo()
-
-  const componentTypes: Component[] = [_Color, Text, _NeedsAttention, Timestamp, _Owner, _PixelType]
-
-  return useQuery(
-    ['entities'],
-    async () => {
-      const { data } = await graphSdk.getEntities()
-      if (!data || !data?.entities?.edges || ! data?.entities?.edges) return { entities: { edges: [] } }
-      for (const edge of data.entities.edges) {
-        if (!edge?.node?.models) continue
-        const keys = edge.node.keys
-        if (!keys) continue
-        const entityId = getEntityIdFromKeys(
-          keys.split("/")
-            .filter(key => !!key)
-            .map(key => BigInt(key))
-        )
-        if (!edge?.node?.models) continue
-        // eslint-disable-next-line no-unsafe-optional-chaining
-        for (const model of edge?.node?.models) {
-          if (!model) continue
-          const componentType = componentTypes.find(
-            componentType => componentType.metadata?.name === model?.__typename
-          )
-          if (!componentType) continue
-          delete model["__typename"]
-          const currentValue = getComponentValue(componentType, entityId)
-
-          // do not update if it's already equal
-          if (_.isEqual(model, currentValue)) continue
-
-          setComponent(componentType, entityId, model)
-        }
-      }
-      return data
-
-    },
-    {
-      refetchInterval: BLOCK_TIME
-    })
-}
-
-export default useEntities
diff --git a/web/src/hooks/entities/useFilteredEntities.ts b/web/src/hooks/entities/useFilteredEntities.ts
index 44c8106..54ea4c2 100644
--- a/web/src/hooks/entities/useFilteredEntities.ts
+++ b/web/src/hooks/entities/useFilteredEntities.ts
@@ -26,7 +26,7 @@ export function useFilteredEntities(
     queryKey: ['filtered-entitities', xMin, xMax, yMin, yMax],
     queryFn: async () => {
       const {data} = await graphSdk.all_filtered_entities({first: 65536, xMin, xMax, yMin, yMax})
-      if (!data || !data.pixelModels?.edges) return { colorModels: { edges: [] } }
+      if (!data || !data.pixelModels?.edges) return { pixelModels: { edges: [] } }
       for (const edge of data.pixelModels.edges) {
         if (!edge || !edge.node) continue
         const fetchedNode = edge.node
diff --git a/web/src/hooks/entities/useNeedsAttention.ts b/web/src/hooks/entities/useNeedsAttention.ts
index 54462eb..1835668 100644
--- a/web/src/hooks/entities/useNeedsAttention.ts
+++ b/web/src/hooks/entities/useNeedsAttention.ts
@@ -14,43 +14,48 @@ export function useNeedsAttention() {
     },
     setup: {
       components: {
-        _Owner,
-        _NeedsAttention,
+        Pixel,
+        Alert
       },
       network: { graphSdk },
     },
   } = useDojo()
 
   return useQuery({
-    queryKey: [ 'needs-aatention' ],
+    queryKey: [ 'needs-attention' ],
     queryFn: async () => {
       const { data } = await graphSdk.getNeedsAttention({ first: 65536, address: account.address })
-      if (!data || !data.ownerModels?.edges) return {ownerModels: {edges: []}}
-      for (const edge of data.ownerModels.edges) {
+      if (!data || !data.pixelModels?.edges) return { pixelModels: { edges: [] } }
+      for (const edge of data.pixelModels.edges) {
         if (!edge || !edge.node) continue
-        const { x, y, address } = edge.node
-        const owner = { x, y, address }
-        const entityId = getEntityIdFromKeys([ BigInt(x), BigInt(y) ])
-        const currentOwner = getComponentValue(_Owner, entityId)
+        const fetchedNode = edge.node
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        delete fetchedNode['__typename']
+        const entityId = getEntityIdFromKeys([ BigInt(fetchedNode.x), BigInt(fetchedNode.y) ])
+        const currentColor = getComponentValue(Pixel, entityId)
 
         // do not update if it's already equal
-        if (isEqual(currentOwner, owner)) continue
+        if (isEqual(currentColor, fetchedNode)) continue
 
-        setComponent(_Owner, entityId, owner)
+        // to update latticexyz indexer
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        setComponent(Pixel, entityId, fetchedNode)
       }
 
-      if (!data || !data.needsattentionModels?.edges) return {needsattentionModels: {edges: []}}
-      for (const edge of data.needsattentionModels.edges) {
+      if (!data || !data.alertModels?.edges) return {needsattentionModels: {edges: []}}
+      for (const edge of data.alertModels.edges) {
         if (!edge || !edge.node) continue
-        const { x, y, value } = edge.node
-        const needsAttentionValue = { x, y, value }
+        const { x, y, alert } = edge.node
+        const needsAttentionValue = { x, y, alert }
         const entityId = getEntityIdFromKeys([ BigInt(x), BigInt(y) ])
-        const currentNeedsAttentionValue = getComponentValue(_NeedsAttention, entityId)
+        const currentNeedsAttentionValue = getComponentValue(Alert, entityId)
 
         // do not update if it's already equal
         if (isEqual(currentNeedsAttentionValue, needsAttentionValue)) continue
 
-        setComponent(_NeedsAttention, entityId, needsAttentionValue)
+        setComponent(Alert, entityId, needsAttentionValue)
       }
 
       return data
diff --git a/web/src/hooks/systems/useInteract.ts b/web/src/hooks/systems/useInteract.ts
index abe4ef8..beb3221 100644
--- a/web/src/hooks/systems/useInteract.ts
+++ b/web/src/hooks/systems/useInteract.ts
@@ -5,7 +5,7 @@ import { EntityIndex, getComponentValue } from '@latticexyz/recs'
 import { getEntityIdFromKeys } from '@dojoengine/utils'
 import manifest from './../../dojo/manifest.json'
 import { num } from 'starknet'
-import interpret, { isInstruction } from '@/lib/Instruction'
+import interpret, { isInstruction, ParamDefinitionType } from '@/lib/Instruction'
 
 const DEFAULT_PARAMETERS_TYPE = 'pixelaw::core::utils::DefaultParameters'
 
@@ -55,7 +55,7 @@ const useInteract = (
   }
   const parameters = functionDef.inputs.filter(input => input.type !== DEFAULT_PARAMETERS_TYPE)
 
-  const paramsDef = parameters.map(param => {
+  const paramsDef: ParamDefinitionType[] = parameters.map(param => {
     if (isInstruction(param.name)) {
       // problem with types on contract.abi
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/web/src/lib/Instruction.ts b/web/src/lib/Instruction.ts
index 4c3fb72..fde7c82 100644
--- a/web/src/lib/Instruction.ts
+++ b/web/src/lib/Instruction.ts
@@ -101,11 +101,27 @@ export const isInstruction = (paramName: string) => {
   }
 }
 
-const interpret = (appName: string, position: {x: number, y: number}, typeInstruction: string, abi: AbiType) => {
+export type Variant = {
+  name: string,
+  value: number,
+}
+
+export type ParamDefinitionType = {
+  name: string,
+  type: 'string' | 'number' | 'enum' | 'struct',
+  variants: Variant[],
+  structDefinition: Record<string, any>
+  transformValue?: (value: number) => bigint,
+  value?: number | null
+}
+
+type InterpretType = (appName: string, position: {x: number, y: number}, typeInstruction: string, abi: AbiType) => ParamDefinitionType
+
+const interpret: InterpretType = (appName: string, position: {x: number, y: number}, typeInstruction: string, abi: AbiType) => {
   const [instruction, ...otherValues] = typeInstruction.split("_")
   switch (instruction) {
     case 'cr': {
-      let finalizedType = 'number'
+      let finalizedType: 'number' | 'string' | 'enum' | 'struct' = 'number'
       const [type, name] = otherValues
       let variants: {name: string, value: number}[] = []
       if (!isPrimitive(type)) {