fix: type configs on hooks and build

Author: mguleryuz

package.json

@@ -36,7 +36,7 @@
     "type-check": "tsc-files --pretty --project ./tsconfig.build.json --noEmit --module ESNext --declaration",
     "build": "bun clean && bun build:cjs && bun build:esm && bun build:types && bun build:css",
     "build:css": "postcss src/styles/global.css -o dist/cjs/styles/global.css && cp -r dist/cjs/styles dist/esm",
-    "build:cjs": "tsc --project ./tsconfig.build.json --module commonjs --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./dist/cjs/package.json && tsc-alias --outDir ./dist/cjs && ts-add-js-extension --dir=dist/cjs --showchanges=false",
+    "build:cjs": "tsc --project ./tsconfig.build.json --module commonjs --moduleResolution node --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./dist/cjs/package.json && tsc-alias --outDir ./dist/cjs && ts-add-js-extension --dir=dist/cjs --showchanges=false",
     "build:esm": "tsc --project ./tsconfig.build.json --module ESNext --outDir ./dist/esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./dist/esm/package.json && tsc-alias --outDir ./dist/esm && ts-add-js-extension --dir=dist/esm --showchanges=false",
     "build:types": "tsc --project ./tsconfig.build.json --module ESNext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap && tsc-alias --outDir ./dist/types",
     "clean": "rm -rf dist tsconfig.tsbuildinfo tsconfig.build.tsbuildinfo",

src/components/wallet-widget.tsx

@@ -11,14 +11,18 @@ import { CircleAlert, Pointer, Wallet } from 'lucide-react'
 export interface WalletWidgetProps extends ButtonProps {
   text?: string
   applyClassToLoading?: boolean
-  size?: ButtonProps['size']
-  variant?: ButtonProps['variant']
-  showWalletWidget: () => void
-  closeWalletWidget: () => void
+  setShowWalletWidget: () => void
 }
 
 export function WalletWidget(props: WalletWidgetProps) {
-  const { size, className, text, applyClassToLoading = true, ...rest } = props
+  const {
+    size,
+    className,
+    text,
+    applyClassToLoading = true,
+    setShowWalletWidget,
+    ...rest
+  } = props
   const isHydrated = useIsHydrated()
   const { isConnected, address, iconSrc, isUnsupportedChain } = useChainSpecs()
 
@@ -72,11 +76,7 @@ export function WalletWidget(props: WalletWidgetProps) {
       className={cn(className, 'in--leading-[unset]')}
       type="button"
       size={!size ? 'sm' : size}
-      onClick={() => {
-        if (!isConnected) props.showWalletWidget()
-        else props.closeWalletWidget()
-        return
-      }}
+      onClick={setShowWalletWidget}
     >
       {getChildren()}
     </Button>

src/hooks/use-graphql-query.ts

@@ -19,7 +19,9 @@ export type UseGraphQLQueryParams<T extends GraphQLQueryArgs> = {
   >
 }
 
-export type UseGraphQLQueryReturnType = ReturnType<typeof useGraphQLQuery>
+export type UseGraphQLQueryReturnType<
+  T extends GraphQLQueryArgs = GraphQLQueryArgs,
+> = ReturnType<typeof useGraphQLQuery<T>>
 
 export const useGraphQLQuery = <T extends GraphQLQueryArgs>({
   fields,

src/hooks/use-graphql-subscription.ts

@@ -2,25 +2,45 @@
 
 import * as React from 'react'
 import { useInverter } from './use-inverter'
-import type { GraphQLSubscriptionArgs } from '@inverter-network/sdk'
+import type {
+  GraphQLSubscriptionArgs,
+  GraphQLSubscriptionResult,
+} from '@inverter-network/sdk'
 
-export type UseGraphQLSubscriptionParams = {
-  fields: GraphQLSubscriptionArgs
+export type UseGraphQLSubscriptionParams<T extends GraphQLSubscriptionArgs> = {
+  fields: T
 }
 
-export type UseBondingCurveSubscriptionReturnType = ReturnType<
-  typeof useGraphQLSubscription
->
+export type UseBondingCurveSubscriptionReturnType<
+  T extends GraphQLSubscriptionArgs,
+> = ReturnType<typeof useGraphQLSubscription<T>>
 
-export const useGraphQLSubscription = ({
+export const useGraphQLSubscription = <T extends GraphQLSubscriptionArgs>({
   fields,
-}: UseGraphQLSubscriptionParams) => {
+}: UseGraphQLSubscriptionParams<T>): GraphQLSubscriptionResult<T> | null => {
   const inverter = useInverter()
 
   const memo = React.useMemo(() => {
     if (!inverter.data) return null
     return inverter.data!.graphql.subscription(fields)
   }, [inverter.data, fields])
 
-  return memo
+  const [data, setData] = React.useState<Awaited<typeof memo> | null>(null)
+
+  React.useEffect(() => {
+    if (!memo) return
+
+    const fetchData = async () => {
+      try {
+        const result = await memo
+        setData(result)
+      } catch (error) {
+        console.error('Error in GraphQL subscription:', error)
+      }
+    }
+
+    fetchData()
+  }, [memo])
+
+  return data
 }

src/hooks/use-workflow.ts

@@ -1,24 +1,33 @@
 'use-client'
 
 import { useQuery } from '@tanstack/react-query'
-import type { UseQueryResult } from '@tanstack/react-query'
+import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query'
 import { useInverter } from '.'
 import type {
   FactoryType,
   PopWalletClient,
   RequestedModules,
   Workflow,
 } from '@inverter-network/sdk'
+import type { Except } from 'type-fest-4'
 
-export type UseWorkFlowReturnType = ReturnType<typeof useWorkflow>
+export type UseWorkFlowParams<T extends RequestedModules<FactoryType>> = {
+  orchestratorAddress?: `0x${string}`
+  requestedModules?: T
+  options?: Except<
+    UseQueryOptions<Workflow<PopWalletClient, T> | undefined, Error>,
+    'queryKey' | 'queryFn' | 'enabled'
+  >
+}
+
+export type UseWorkFlowReturnType<T extends RequestedModules<FactoryType>> =
+  ReturnType<typeof useWorkflow<T>>
 
 export function useWorkflow<T extends RequestedModules<FactoryType>>({
   orchestratorAddress,
   requestedModules,
-}: {
-  orchestratorAddress?: `0x${string}`
-  requestedModules?: T
-}): UseQueryResult<Workflow<PopWalletClient, T>> {
+  options,
+}: UseWorkFlowParams<T>): UseQueryResult<Workflow<PopWalletClient, T>> {
   const inverter = useInverter()
 
   const enabled = !!inverter.data && !!orchestratorAddress
@@ -29,9 +38,10 @@ export function useWorkflow<T extends RequestedModules<FactoryType>>({
       inverter.data!.getWorkflow({
         orchestratorAddress: orchestratorAddress!,
         requestedModules,
-      }),
+      }) as any,
     enabled,
     refetchOnWindowFocus: false,
+    ...options,
   })
 
   return query as any

src/store/use-orchestrator-store.ts

@@ -23,16 +23,15 @@ export const useOrchestratorStore = create<OrchestratorStore>()(
         )
 
         set((state) => {
-          if (existingIndex !== -1) {
-            // Update the date if the address already exists
-            state.orchestrators[existingIndex].date = new Date()
-          } else {
-            // Add new orchestrator
-            state.orchestrators.unshift({
-              address: orchestratorAddress,
-              date: new Date(),
-            })
-          }
+          // remove the existing index
+          if (existingIndex !== -1) state.orchestrators.splice(existingIndex, 1)
+
+          // Add new orchestrator
+          state.orchestrators.unshift({
+            address: orchestratorAddress,
+            date: new Date(),
+          })
+
           state.editingOrchestrators = false
         })
       },

tsconfig.build.json

@@ -4,7 +4,7 @@
   "include": ["src"],
   "exclude": ["tests", "tools"],
   "compilerOptions": {
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "sourceMap": true,
     "rootDir": "./src"
   }