fix: typescript issues

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>

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})}

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: {

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' +

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');
     }

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

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

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

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)) {