refactor: use swr to fetch block

flake.nix

@@ -0,0 +1,25 @@
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem(system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+        };
+      in
+        {
+          devShells.default = pkgs.mkShell {
+            nativeBuildInputs = [
+              pkgs.nodejs-16_x
+              pkgs.nodePackages.pnpm
+              pkgs.nodePackages.typescript
+              pkgs.nodePackages.typescript-language-server
+            ];
+          };
+        }
+    );
+}

package.json

@@ -8,6 +8,7 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "turbo run build --parallel",
+    "test": "turbo run test --parallel",
     "lint": "turbo run lint --parallel",
     "lint:fix": "turbo run lint:fix --parallel",
     "release": "pnpm build && pnpm changeset publish",
@@ -25,7 +26,6 @@
     "@types/react": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
-    "get-starknet": "^1.4",
     "eslint": "8.17.0",
     "eslint-config-react": "^1.1.7",
     "eslint-config-react-app": "^7.0.1",
@@ -36,7 +36,8 @@
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "react": "^18.0",
-    "starknet": "^3.10",
+    "react-dom": "^18.0",
+    "starknet": "^4.0",
     "turbo": "^1.2.16",
     "typescript": "^4.7.3"
   },

packages/core/jest.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'jest'
+
+const config: Config = {
+  verbose: true,
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/**/*.test.tsx'],
+  moduleNameMapper: {
+    '~/(.*)': '<rootDir>/src/$1',
+  },
+}
+
+export default config

packages/core/package.json

@@ -12,14 +12,15 @@
   "scripts": {
     "build": "tsc",
     "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint --fix src --ext .ts,.tsx"
+    "lint:fix": "eslint --fix src --ext .ts,.tsx",
+    "test": "jest --config jest.config.ts"
   },
   "peerDependencies": {
-    "get-starknet": "^1.4",
     "react": "^17.0 || ^18.0",
-    "starknet": "^3.10"
+    "starknet": "^4.0"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.3.4",
     "immutable": "^4.0.0"
   },
   "repository": "apibara/starknet-react",
@@ -30,10 +31,14 @@
     "l2"
   ],
   "devDependencies": {
-    "@types/jest": "^28.1.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.0.0",
     "@types/node": "^17.0.39",
     "@types/react": "^18.0.11",
-    "jest": "^28.1.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.3",
+    "moq.ts": "^9.0.2",
+    "ts-jest": "^29.0.1",
     "typescript": "^4.7.3"
   },
   "eslintConfig": {

packages/core/src/connectors/injected.ts

@@ -1,6 +1,5 @@
-import { AccountInterface } from 'starknet'
+import { AccountInterface, ProviderInterface } from 'starknet'
 import { Connector } from './base'
-import { IStarknetWindowObject } from 'get-starknet'
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
@@ -12,6 +11,27 @@ export interface InjectedConnectorOptions {
   id: string
 }
 
+export type EventType = 'accountsChanged' | 'networkChanged'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type EventHandler = (data: any) => void
+
+export interface IStarknetWindowObject {
+  enable: (options?: { showModal?: boolean }) => Promise<string[]>
+  isPreauthorized: () => Promise<boolean>
+  on: (event: EventType, handleEvent: EventHandler) => void
+  off: (event: EventType, handleEvent: EventHandler) => void
+
+  id: string
+  name: string
+  version: string
+  icon: string
+  provider: ProviderInterface
+  isConnected: boolean
+  account: AccountInterface
+  selectedAddress?: string
+}
+
 export class InjectedConnector extends Connector<InjectedConnectorOptions> {
   private _wallet?: IStarknetWindowObject
 

packages/core/src/hooks/block.test.tsx

@@ -0,0 +1,27 @@
+import { useBlock } from './block'
+import { renderHook, waitFor } from '../../test/react'
+import { connectors, devnetProvider, compiledErc20 } from '../../test/devnet'
+
+describe('useBlock', () => {
+  beforeAll(async () => {
+    await devnetProvider.deployContract({
+      contract: compiledErc20,
+    })
+  })
+
+  it('returns the latest block by default', async () => {
+    const { result } = renderHook(() => useBlock({ watch: false }), { connectors })
+
+    await waitFor(() => {
+      expect(result.current.data).toBeDefined()
+    })
+  })
+
+  it.skip('returns an error', async () => {
+    const { result } = renderHook(() => useBlock(), { connectors })
+
+    await waitFor(() => {
+      expect(result.current.isError).toBeTruthy()
+    })
+  })
+})

packages/core/src/hooks/block.ts

@@ -0,0 +1,56 @@
+import { useQuery } from '@tanstack/react-query'
+import { GetBlockResponse, ProviderInterface } from 'starknet'
+import { BlockIdentifier } from 'starknet/provider/utils'
+import { useStarknet } from '~/providers'
+
+export interface StarkNetBlockResult {
+  data?: GetBlockResponse
+  loading?: boolean
+  error?: string
+}
+
+/**
+ * @deprecated Use `useBlock`.
+ */
+export function useStarknetBlock(): StarkNetBlockResult {
+  return useBlock({})
+}
+
+function fetchBlock({
+  library,
+  blockIdentifier,
+}: {
+  library: ProviderInterface
+  blockIdentifier: BlockIdentifier
+}): () => Promise<GetBlockResponse | undefined> {
+  return async () => {
+    return await library.getBlock(blockIdentifier)
+  }
+}
+
+/**
+ * Hook for fetching a block.
+ */
+export function useBlock({
+  watch,
+  refetchInterval: refreshInterval,
+  blockIdentifier = 'latest',
+}: {
+  watch?: boolean
+  refetchInterval?: number
+  blockIdentifier?: BlockIdentifier
+} = {}) {
+  const { library } = useStarknet()
+
+  const refetchInterval = watch ? refreshInterval ?? 5000 : false
+
+  const { data, isLoading, isError } = useQuery<GetBlockResponse | undefined, string>(
+    ['block', blockIdentifier],
+    fetchBlock({ library, blockIdentifier }),
+    {
+      refetchInterval,
+      useErrorBoundary: true,
+    }
+  )
+  return { data, isLoading, isError }
+}