From d7e00bf43cfd22bc4994a53f60655a2c3e36cd06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 7 Mar 2024 20:23:32 -0400 Subject: [PATCH 01/13] fix: set exports properly --- packages/react/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 98163e2..74fa91d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -3,7 +3,7 @@ "description": "Interact with the Fuel Wallet Extension in React.", "version": "0.15.3", "license": "Apache-2.0", - "main": "src/index.ts", + "main": "./src/index.ts", "exports": { ".": { "require": "./dist/index.js", @@ -12,10 +12,10 @@ }, "publishConfig": { "access": "public", - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "typings": "dist/index.d.ts", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "typings": "./dist/index.d.ts", "exports": { ".": { "require": "./dist/index.js", From e9ae74ab8fef6aea92c14df5a2ab1e616305dbd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 7 Mar 2024 20:25:34 -0400 Subject: [PATCH 02/13] docs: update readme --- packages/react/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/README.md b/packages/react/README.md index d8dac1e..95cd9f9 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -7,7 +7,7 @@ The Fuel Wallet React Hooks provide a set of hooks to seamless integrate the [Fu ## Installation ```bash -npm install fuels @fuel-wallet/react +npm install fuels @fuels/react ``` Note that the fuels package is also required as a dependency for better integration with other applications built using the [Fuels TS SDK](https://github.com/FuelLabs/fuels-ts). @@ -19,7 +19,7 @@ Note that the fuels package is also required as a dependency for better integrat Adding the providers on the upper level of the application that will use the hooks. ```tsx -import { FuelProvider } from '@fuel-wallet/react'; +import { FuelProvider } from '@fuels/react'; import { App } from './App'; @@ -41,7 +41,7 @@ import { useConnectors, useDisconnect, useIsConnected, -} from '@fuel-wallet/react'; +} from '@fuels/react'; export default function App() { const [connector, setConnector] = useState(''); From 090f6450f2968fc21675e5b1a479c57c7a275235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 7 Mar 2024 20:29:14 -0400 Subject: [PATCH 03/13] feat: remove unused package --- packages/react/package.json | 3 +- packages/react/src/hooks/useAddAssets.tsx | 2 +- packages/react/src/hooks/useAssets.tsx | 2 +- .../src/ui/Connect/utils/getImageUrl.tsx | 2 +- .../react/src/utils/selectCurrentConnector.ts | 2 +- pnpm-lock.yaml | 165 ++++++------------ 6 files changed, 62 insertions(+), 114 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 74fa91d..72e078c 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -40,12 +40,11 @@ "events": "^3.3.0" }, "devDependencies": { - "@fuel-wallet/sdk": "^0.15.0", "@fuels/ts-config": "workspace:*", "@fuels/tsup-config": "workspace:*", - "styled-components": "^6.1.1", "compare-versions": "^6.1.0", "fuels": "0.74.0", + "styled-components": "^6.1.1", "tsup": "^7.2.0" } } diff --git a/packages/react/src/hooks/useAddAssets.tsx b/packages/react/src/hooks/useAddAssets.tsx index 358c981..281d0f6 100644 --- a/packages/react/src/hooks/useAddAssets.tsx +++ b/packages/react/src/hooks/useAddAssets.tsx @@ -1,4 +1,4 @@ -import type { Asset } from '@fuel-wallet/sdk'; +import type { Asset } from 'fuels'; import { useMutation } from '@tanstack/react-query'; import { useFuel } from '../providers'; diff --git a/packages/react/src/hooks/useAssets.tsx b/packages/react/src/hooks/useAssets.tsx index a22cc0a..e4e8546 100644 --- a/packages/react/src/hooks/useAssets.tsx +++ b/packages/react/src/hooks/useAssets.tsx @@ -1,4 +1,4 @@ -import type { Asset } from '@fuel-wallet/sdk'; +import type { Asset } from 'fuels'; import { useQuery } from '@tanstack/react-query'; import { useFuel } from '../providers'; diff --git a/packages/react/src/ui/Connect/utils/getImageUrl.tsx b/packages/react/src/ui/Connect/utils/getImageUrl.tsx index b1af115..d418bc0 100644 --- a/packages/react/src/ui/Connect/utils/getImageUrl.tsx +++ b/packages/react/src/ui/Connect/utils/getImageUrl.tsx @@ -1,4 +1,4 @@ -import type { ConnectorMetadata } from '@fuel-wallet/sdk'; +import type { ConnectorMetadata } from 'fuels'; export const getImageUrl = (connector: ConnectorMetadata, theme?: string) => { const { image } = connector; diff --git a/packages/react/src/utils/selectCurrentConnector.ts b/packages/react/src/utils/selectCurrentConnector.ts index 7af6bf6..01ac445 100644 --- a/packages/react/src/utils/selectCurrentConnector.ts +++ b/packages/react/src/utils/selectCurrentConnector.ts @@ -1,4 +1,4 @@ -import type { Fuel, FuelConnector } from '@fuel-wallet/sdk'; +import type { Fuel, FuelConnector } from 'fuels'; import { CONNECTOR_KEY } from '../config'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e81fa4c..34cc8fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -262,10 +262,10 @@ importers: dependencies: '@radix-ui/react-dialog': specifier: ^1.0.5 - version: 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) + version: 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21) '@tanstack/react-query': specifier: ^4.36.1 - version: 4.36.1(react@18.2.0) + version: 4.36.1 events: specifier: ^3.3.0 version: 3.3.0 @@ -273,9 +273,6 @@ importers: specifier: '*' version: 18.2.0 devDependencies: - '@fuel-wallet/sdk': - specifier: ^0.15.0 - version: 0.15.0(dexie@3.2.4)(fuels@0.74.0) '@fuels/ts-config': specifier: workspace:* version: link:../ts-config @@ -290,7 +287,7 @@ importers: version: 0.74.0(dexie@3.2.4) styled-components: specifier: ^6.1.1 - version: 6.1.8(react@18.2.0) + version: 6.1.8 tsup: specifier: ^7.2.0 version: 7.2.0(ts-node@10.9.1)(typescript@5.2.2) @@ -1715,32 +1712,6 @@ packages: cli-table: 0.3.11 dev: true - /@fuel-wallet/sdk@0.15.0(dexie@3.2.4)(fuels@0.74.0): - resolution: {integrity: sha512-QCpk9klwqxI4NcWhci235X+n+b3CktssCZ6Px1RbusWkSPjVbs2otq9JjjxNOYy0T+EB6H62yus5lABXni5j5A==} - peerDependencies: - fuels: '>=0.71.1' - dependencies: - '@fuel-wallet/types': 0.15.0(dexie@3.2.4)(fuels@0.74.0) - events: 3.3.0 - fuels: 0.74.0(dexie@3.2.4) - json-rpc-2.0: 1.7.0 - transitivePeerDependencies: - - dexie - dev: true - - /@fuel-wallet/types@0.15.0(dexie@3.2.4)(fuels@0.74.0): - resolution: {integrity: sha512-BqN47RFPAzFbZIiUD9LJGemvTfh2sJAPourToROHVwS4clmADVjf07DhmWJvuU/vi26D485NKxLLNqUDw6KR7A==} - peerDependencies: - fuels: '>=0.71.1' - dependencies: - '@fuels/assets': 0.1.4 - dexie-observable: 4.0.1-beta.13(dexie@3.2.4) - fuels: 0.74.0(dexie@3.2.4) - json-rpc-2.0: 1.7.0 - transitivePeerDependencies: - - dexie - dev: true - /@fuels/assets@0.1.4: resolution: {integrity: sha512-6rSbzxxDlDkoW9u4vvSbTfnA4Cy9WjZ1ajBOuKTnvoQ9EzQKvrP4lYpN2SjqdfJkdhRfCItaf1aQq/avaN51BQ==} dev: true @@ -2170,7 +2141,7 @@ packages: '@babel/runtime': 7.22.5 dev: false - /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: '@types/react': '*' @@ -2183,10 +2154,9 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-context@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-context@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: '@types/react': '*' @@ -2199,10 +2169,9 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==} peerDependencies: '@types/react': '*' @@ -2221,25 +2190,24 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 aria-hidden: 1.2.3 - react: 18.2.0 - react-remove-scroll: 2.5.5(@types/react@18.2.21)(react@18.2.0) + react-remove-scroll: 2.5.5(@types/react@18.2.21) dev: false - /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==} peerDependencies: '@types/react': '*' @@ -2258,16 +2226,15 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - react: 18.2.0 dev: false - /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: '@types/react': '*' @@ -2280,10 +2247,9 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==} peerDependencies: '@types/react': '*' @@ -2301,15 +2267,14 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - react: 18.2.0 dev: false - /@radix-ui/react-id@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-id@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: '@types/react': '*' @@ -2321,12 +2286,11 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} peerDependencies: '@types/react': '*' @@ -2344,13 +2308,12 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - react: 18.2.0 dev: false - /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: '@types/react': '*' @@ -2368,14 +2331,13 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0) - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - react: 18.2.0 dev: false - /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: '@types/react': '*' @@ -2393,13 +2355,12 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21) '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - react: 18.2.0 dev: false - /@radix-ui/react-slot@1.0.2(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-slot@1.0.2(@types/react@18.2.21): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: '@types/react': '*' @@ -2411,12 +2372,11 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: '@types/react': '*' @@ -2429,10 +2389,9 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} peerDependencies: '@types/react': '*' @@ -2444,12 +2403,11 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.21): resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} peerDependencies: '@types/react': '*' @@ -2461,12 +2419,11 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.5 - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21) '@types/react': 18.2.21 - react: 18.2.0 dev: false - /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.21)(react@18.2.0): + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.21): resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} peerDependencies: '@types/react': '*' @@ -2479,7 +2436,6 @@ packages: dependencies: '@babel/runtime': 7.22.5 '@types/react': 18.2.21 - react: 18.2.0 dev: false /@scure/base@1.1.5: @@ -2647,7 +2603,7 @@ packages: resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==} dev: false - /@tanstack/react-query@4.36.1(react@18.2.0): + /@tanstack/react-query@4.36.1: resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==} peerDependencies: react: '*' @@ -2662,7 +2618,6 @@ packages: optional: true dependencies: '@tanstack/query-core': 4.36.1 - react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) dev: false @@ -7337,7 +7292,7 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-remove-scroll-bar@2.3.4(@types/react@18.2.21)(react@18.2.0): + /react-remove-scroll-bar@2.3.4(@types/react@18.2.21): resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==} engines: {node: '>=10'} peerDependencies: @@ -7350,12 +7305,11 @@ packages: optional: true dependencies: '@types/react': 18.2.21 - react: 18.2.0 - react-style-singleton: 2.2.1(@types/react@18.2.21)(react@18.2.0) + react-style-singleton: 2.2.1(@types/react@18.2.21) tslib: 2.6.0 dev: false - /react-remove-scroll@2.5.5(@types/react@18.2.21)(react@18.2.0): + /react-remove-scroll@2.5.5(@types/react@18.2.21): resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} engines: {node: '>=10'} peerDependencies: @@ -7368,15 +7322,14 @@ packages: optional: true dependencies: '@types/react': 18.2.21 - react: 18.2.0 - react-remove-scroll-bar: 2.3.4(@types/react@18.2.21)(react@18.2.0) - react-style-singleton: 2.2.1(@types/react@18.2.21)(react@18.2.0) + react-remove-scroll-bar: 2.3.4(@types/react@18.2.21) + react-style-singleton: 2.2.1(@types/react@18.2.21) tslib: 2.6.0 - use-callback-ref: 1.3.1(@types/react@18.2.21)(react@18.2.0) - use-sidecar: 1.1.2(@types/react@18.2.21)(react@18.2.0) + use-callback-ref: 1.3.1(@types/react@18.2.21) + use-sidecar: 1.1.2(@types/react@18.2.21) dev: false - /react-style-singleton@2.2.1(@types/react@18.2.21)(react@18.2.0): + /react-style-singleton@2.2.1(@types/react@18.2.21): resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} peerDependencies: @@ -7391,7 +7344,6 @@ packages: '@types/react': 18.2.21 get-nonce: 1.0.1 invariant: 2.2.4 - react: 18.2.0 tslib: 2.6.0 dev: false @@ -7898,7 +7850,7 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - /styled-components@6.1.8(react@18.2.0): + /styled-components@6.1.8: resolution: {integrity: sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==} engines: {node: '>= 16'} peerDependencies: @@ -7916,7 +7868,6 @@ packages: css-to-react-native: 3.2.0 csstype: 3.1.2 postcss: 8.4.31 - react: 18.2.0 shallowequal: 1.1.0 stylis: 4.3.1 tslib: 2.5.0 @@ -8419,7 +8370,7 @@ packages: requires-port: 1.0.0 dev: false - /use-callback-ref@1.3.1(@types/react@18.2.21)(react@18.2.0): + /use-callback-ref@1.3.1(@types/react@18.2.21): resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==} engines: {node: '>=10'} peerDependencies: @@ -8432,7 +8383,6 @@ packages: optional: true dependencies: '@types/react': 18.2.21 - react: 18.2.0 tslib: 2.6.0 dev: false @@ -8451,7 +8401,7 @@ packages: react: 18.2.0 dev: false - /use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0): + /use-sidecar@1.1.2(@types/react@18.2.21): resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'} peerDependencies: @@ -8465,7 +8415,6 @@ packages: dependencies: '@types/react': 18.2.21 detect-node-es: 1.1.0 - react: 18.2.0 tslib: 2.6.0 dev: false From 115ec13209f52c23d86ae4a261621c7a824cc59c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 7 Mar 2024 20:31:03 -0400 Subject: [PATCH 04/13] chore: remove tsx extensions from hooks since they don't have any jsx --- packages/react/src/hooks/{index.tsx => index.ts} | 0 packages/react/src/hooks/{useAccount.tsx => useAccount.ts} | 0 packages/react/src/hooks/{useAccounts.tsx => useAccounts.ts} | 0 packages/react/src/hooks/{useAddAssets.tsx => useAddAssets.ts} | 0 packages/react/src/hooks/{useAddNetwork.tsx => useAddNetwork.ts} | 0 packages/react/src/hooks/{useAssets.tsx => useAssets.ts} | 0 packages/react/src/hooks/{useBalance.tsx => useBalance.ts} | 0 packages/react/src/hooks/{useChain.tsx => useChain.ts} | 0 packages/react/src/hooks/{useConnect.tsx => useConnect.ts} | 0 packages/react/src/hooks/{useConnectors.tsx => useConnectors.ts} | 0 packages/react/src/hooks/{useDisconnect.tsx => useDisconnect.ts} | 0 .../react/src/hooks/{useIsConnected.tsx => useIsConnected.ts} | 0 packages/react/src/hooks/{useNetwork.tsx => useNetwork.ts} | 0 packages/react/src/hooks/{useNodeInfo.tsx => useNodeInfo.ts} | 0 packages/react/src/hooks/{useProvider.tsx => useProvider.ts} | 0 .../react/src/hooks/{useTransaction.tsx => useTransaction.ts} | 0 .../{useTransactionReceipts.tsx => useTransactionReceipts.ts} | 0 packages/react/src/hooks/{useWallet.tsx => useWallet.ts} | 0 18 files changed, 0 insertions(+), 0 deletions(-) rename packages/react/src/hooks/{index.tsx => index.ts} (100%) rename packages/react/src/hooks/{useAccount.tsx => useAccount.ts} (100%) rename packages/react/src/hooks/{useAccounts.tsx => useAccounts.ts} (100%) rename packages/react/src/hooks/{useAddAssets.tsx => useAddAssets.ts} (100%) rename packages/react/src/hooks/{useAddNetwork.tsx => useAddNetwork.ts} (100%) rename packages/react/src/hooks/{useAssets.tsx => useAssets.ts} (100%) rename packages/react/src/hooks/{useBalance.tsx => useBalance.ts} (100%) rename packages/react/src/hooks/{useChain.tsx => useChain.ts} (100%) rename packages/react/src/hooks/{useConnect.tsx => useConnect.ts} (100%) rename packages/react/src/hooks/{useConnectors.tsx => useConnectors.ts} (100%) rename packages/react/src/hooks/{useDisconnect.tsx => useDisconnect.ts} (100%) rename packages/react/src/hooks/{useIsConnected.tsx => useIsConnected.ts} (100%) rename packages/react/src/hooks/{useNetwork.tsx => useNetwork.ts} (100%) rename packages/react/src/hooks/{useNodeInfo.tsx => useNodeInfo.ts} (100%) rename packages/react/src/hooks/{useProvider.tsx => useProvider.ts} (100%) rename packages/react/src/hooks/{useTransaction.tsx => useTransaction.ts} (100%) rename packages/react/src/hooks/{useTransactionReceipts.tsx => useTransactionReceipts.ts} (100%) rename packages/react/src/hooks/{useWallet.tsx => useWallet.ts} (100%) diff --git a/packages/react/src/hooks/index.tsx b/packages/react/src/hooks/index.ts similarity index 100% rename from packages/react/src/hooks/index.tsx rename to packages/react/src/hooks/index.ts diff --git a/packages/react/src/hooks/useAccount.tsx b/packages/react/src/hooks/useAccount.ts similarity index 100% rename from packages/react/src/hooks/useAccount.tsx rename to packages/react/src/hooks/useAccount.ts diff --git a/packages/react/src/hooks/useAccounts.tsx b/packages/react/src/hooks/useAccounts.ts similarity index 100% rename from packages/react/src/hooks/useAccounts.tsx rename to packages/react/src/hooks/useAccounts.ts diff --git a/packages/react/src/hooks/useAddAssets.tsx b/packages/react/src/hooks/useAddAssets.ts similarity index 100% rename from packages/react/src/hooks/useAddAssets.tsx rename to packages/react/src/hooks/useAddAssets.ts diff --git a/packages/react/src/hooks/useAddNetwork.tsx b/packages/react/src/hooks/useAddNetwork.ts similarity index 100% rename from packages/react/src/hooks/useAddNetwork.tsx rename to packages/react/src/hooks/useAddNetwork.ts diff --git a/packages/react/src/hooks/useAssets.tsx b/packages/react/src/hooks/useAssets.ts similarity index 100% rename from packages/react/src/hooks/useAssets.tsx rename to packages/react/src/hooks/useAssets.ts diff --git a/packages/react/src/hooks/useBalance.tsx b/packages/react/src/hooks/useBalance.ts similarity index 100% rename from packages/react/src/hooks/useBalance.tsx rename to packages/react/src/hooks/useBalance.ts diff --git a/packages/react/src/hooks/useChain.tsx b/packages/react/src/hooks/useChain.ts similarity index 100% rename from packages/react/src/hooks/useChain.tsx rename to packages/react/src/hooks/useChain.ts diff --git a/packages/react/src/hooks/useConnect.tsx b/packages/react/src/hooks/useConnect.ts similarity index 100% rename from packages/react/src/hooks/useConnect.tsx rename to packages/react/src/hooks/useConnect.ts diff --git a/packages/react/src/hooks/useConnectors.tsx b/packages/react/src/hooks/useConnectors.ts similarity index 100% rename from packages/react/src/hooks/useConnectors.tsx rename to packages/react/src/hooks/useConnectors.ts diff --git a/packages/react/src/hooks/useDisconnect.tsx b/packages/react/src/hooks/useDisconnect.ts similarity index 100% rename from packages/react/src/hooks/useDisconnect.tsx rename to packages/react/src/hooks/useDisconnect.ts diff --git a/packages/react/src/hooks/useIsConnected.tsx b/packages/react/src/hooks/useIsConnected.ts similarity index 100% rename from packages/react/src/hooks/useIsConnected.tsx rename to packages/react/src/hooks/useIsConnected.ts diff --git a/packages/react/src/hooks/useNetwork.tsx b/packages/react/src/hooks/useNetwork.ts similarity index 100% rename from packages/react/src/hooks/useNetwork.tsx rename to packages/react/src/hooks/useNetwork.ts diff --git a/packages/react/src/hooks/useNodeInfo.tsx b/packages/react/src/hooks/useNodeInfo.ts similarity index 100% rename from packages/react/src/hooks/useNodeInfo.tsx rename to packages/react/src/hooks/useNodeInfo.ts diff --git a/packages/react/src/hooks/useProvider.tsx b/packages/react/src/hooks/useProvider.ts similarity index 100% rename from packages/react/src/hooks/useProvider.tsx rename to packages/react/src/hooks/useProvider.ts diff --git a/packages/react/src/hooks/useTransaction.tsx b/packages/react/src/hooks/useTransaction.ts similarity index 100% rename from packages/react/src/hooks/useTransaction.tsx rename to packages/react/src/hooks/useTransaction.ts diff --git a/packages/react/src/hooks/useTransactionReceipts.tsx b/packages/react/src/hooks/useTransactionReceipts.ts similarity index 100% rename from packages/react/src/hooks/useTransactionReceipts.tsx rename to packages/react/src/hooks/useTransactionReceipts.ts diff --git a/packages/react/src/hooks/useWallet.tsx b/packages/react/src/hooks/useWallet.ts similarity index 100% rename from packages/react/src/hooks/useWallet.tsx rename to packages/react/src/hooks/useWallet.ts From 659dfaf8af7536b85405b879867531e25b7bf49a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 7 Mar 2024 20:35:21 -0400 Subject: [PATCH 05/13] fix: adjust exports for internal testing --- packages/react/package.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 72e078c..201d55c 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -5,10 +5,7 @@ "license": "Apache-2.0", "main": "./src/index.ts", "exports": { - ".": { - "require": "./dist/index.js", - "default": "./dist/index.mjs" - } + ".": "./src/index.ts" }, "publishConfig": { "access": "public", @@ -23,9 +20,6 @@ } } }, - "files": [ - "dist" - ], "scripts": { "build": "pnpm ts:check && tsup", "ts:check": "pnpm tsc --noEmit" From 43c1702618c8cf908c229fe5fa06a2fb6f4f0ddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 10:41:17 -0400 Subject: [PATCH 06/13] feat: add useNamedQuery --- packages/react/src/core/index.ts | 1 + packages/react/src/core/useNamedQuery.ts | 89 ++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 packages/react/src/core/index.ts create mode 100644 packages/react/src/core/useNamedQuery.ts diff --git a/packages/react/src/core/index.ts b/packages/react/src/core/index.ts new file mode 100644 index 0000000..0ef8342 --- /dev/null +++ b/packages/react/src/core/index.ts @@ -0,0 +1 @@ +export * from './useNamedQuery'; \ No newline at end of file diff --git a/packages/react/src/core/useNamedQuery.ts b/packages/react/src/core/useNamedQuery.ts new file mode 100644 index 0000000..0553bb8 --- /dev/null +++ b/packages/react/src/core/useNamedQuery.ts @@ -0,0 +1,89 @@ +import { DefinedUseQueryResult, QueryKey, UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query'; +import { useMemo } from 'react'; + +type ExcludeData = Omit; + +type NamedUseQueryResult = ExcludeData> & { + [key in TName]: UseQueryResult['data']; +} + +type DefinedNamedUseQueryResult = ExcludeData> & { + [key in TName]: DefinedUseQueryResult['data']; +} + +function createProxyHandler(name: TName) { + const handlers: ProxyHandler> = { + get(target, prop) { + if (prop === name) { + return target.data; + } + + return Reflect.get(target, prop); + }, + }; + + return handlers; +} + +/** + * When initialData is not provided "data" will be always TQueryFnData | undefined. + * It might need some type checking to be sure that the data is not undefined. + */ +export function useNamedQuery< + TName extends string, + TQueryFnData = unknown, + TError = unknown, + TData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +>( + name: TName, + options: Omit< + UseQueryOptions, + 'initialData' + > & { initialData?: () => undefined }, +): NamedUseQueryResult + +/** + * When initialData is provided "data" will be always TQueryFnData. + * Never undefined. + */ +export function useNamedQuery< + TName extends string, + TQueryFnData = unknown, + TError = unknown, + TData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +>( + name: TName, + options: Omit< + UseQueryOptions, + 'initialData' + > & { initialData: TQueryFnData | (() => TQueryFnData) }, +): DefinedNamedUseQueryResult + +/** + * useNamedQuery is a wrapper for useQuery that allows you to override the "data" property with a custom name. + * + * @param name a identifier to override "data" property with this name + * @param options UseQueryOptions + * @returns useQuery + */ +export function useNamedQuery< + TName extends string, + TQueryFnData = unknown, + TError = unknown, + TData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +>( + name: TName, + options: UseQueryOptions, +): NamedUseQueryResult { + const query = useQuery(options); + + const proxy = useMemo(() => { + return new Proxy(query, createProxyHandler(name)) as NamedUseQueryResult; + }, [name, query]); + + return proxy; +}; + From 14e9ef2f009f435d56830b8a3fe4a142747b4e1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 11:16:10 -0400 Subject: [PATCH 07/13] feat: add useNamedQuery on every hook --- packages/react/src/hooks/useAccount.ts | 19 ++++------ packages/react/src/hooks/useAccounts.ts | 30 +++++++--------- packages/react/src/hooks/useAssets.ts | 30 +++++++--------- packages/react/src/hooks/useBalance.ts | 32 ++++++++--------- packages/react/src/hooks/useChain.ts | 21 ++++------- packages/react/src/hooks/useConnectors.ts | 19 ++++------ packages/react/src/hooks/useIsConnected.ts | 19 ++++------ packages/react/src/hooks/useNetwork.ts | 21 +++++------ packages/react/src/hooks/useNodeInfo.ts | 36 +++++++++++-------- packages/react/src/hooks/useProvider.ts | 23 +++++------- packages/react/src/hooks/useTransaction.ts | 22 +++++------- .../react/src/hooks/useTransactionReceipts.ts | 21 ++++------- packages/react/src/hooks/useWallet.ts | 18 +++++----- 13 files changed, 128 insertions(+), 183 deletions(-) diff --git a/packages/react/src/hooks/useAccount.ts b/packages/react/src/hooks/useAccount.ts index de8a2cb..87d680e 100644 --- a/packages/react/src/hooks/useAccount.ts +++ b/packages/react/src/hooks/useAccount.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; @@ -6,9 +6,9 @@ import { QUERY_KEYS } from '../utils'; export const useAccount = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.account], - async () => { + return useNamedQuery('account', { + queryKey: [QUERY_KEYS.account], + queryFn: async () => { try { const currentFuelAccount = await fuel?.currentAccount(); return currentFuelAccount || null; @@ -16,13 +16,6 @@ export const useAccount = () => { return null; } }, - { - initialData: null, - }, - ); - - return { - account: data, - ...queryProps, - }; + initialData: null, + }); }; diff --git a/packages/react/src/hooks/useAccounts.ts b/packages/react/src/hooks/useAccounts.ts index 1cb40a4..18f86e8 100644 --- a/packages/react/src/hooks/useAccounts.ts +++ b/packages/react/src/hooks/useAccounts.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; @@ -6,23 +6,19 @@ import { QUERY_KEYS } from '../utils'; export const useAccounts = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.accounts], - async () => { - try { - const accounts = await fuel.accounts(); - return accounts || []; - } catch (error: unknown) { - return []; - } - }, + return useNamedQuery( + 'accounts', { + queryKey: [QUERY_KEYS.accounts], + queryFn: async () => { + try { + const accounts = await fuel.accounts(); + return accounts || []; + } catch (error: unknown) { + return []; + } + }, initialData: [], - }, + } ); - - return { - accounts: data, - ...queryProps, - }; }; diff --git a/packages/react/src/hooks/useAssets.ts b/packages/react/src/hooks/useAssets.ts index e4e8546..80c5651 100644 --- a/packages/react/src/hooks/useAssets.ts +++ b/packages/react/src/hooks/useAssets.ts @@ -1,5 +1,5 @@ import type { Asset } from 'fuels'; -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; @@ -7,23 +7,19 @@ import { QUERY_KEYS } from '../utils'; export const useAssets = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.assets], - async () => { - try { - const assets = (await fuel.assets()) as Array; - return assets || []; - } catch (error: unknown) { - return []; - } - }, + return useNamedQuery( + 'assets', { + queryKey: [QUERY_KEYS.assets], + queryFn: async () => { + try { + const assets = (await fuel.assets()) as Array; + return assets || []; + } catch (error: unknown) { + return []; + } + }, initialData: [], - }, + } ); - - return { - assets: data, - ...queryProps, - }; }; diff --git a/packages/react/src/hooks/useBalance.ts b/packages/react/src/hooks/useBalance.ts index 250a314..1d5974c 100644 --- a/packages/react/src/hooks/useBalance.ts +++ b/packages/react/src/hooks/useBalance.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; import type { BytesLike } from 'fuels'; import { Address } from 'fuels'; import { useEffect } from 'react'; @@ -16,9 +16,9 @@ export const useBalance = ({ }) => { const { provider } = useProvider(); - const query = useQuery( - [QUERY_KEYS.balance, address, assetId], - async () => { + const query = useNamedQuery('balance', { + queryKey: [QUERY_KEYS.balance, address, assetId], + queryFn: async () => { try { // TODO: replace with ETH_ASSET_ID from asset-list package after this task gets done // https://linear.app/fuel-network/issue/FRO-144/make-asset-list-package-public-and-publish-in-npm @@ -32,25 +32,21 @@ export const useBalance = ({ return null; } }, - { - initialData: null, - enabled: !!provider, - }, - ); - - const listenerAccountFetcher = () => { - query.refetch(); - }; + initialData: null, + enabled: !!provider, + }); useEffect(() => { + const listenerAccountFetcher = () => { + query.refetch(); + }; + window.addEventListener('focus', listenerAccountFetcher); + return () => { window.removeEventListener('focus', listenerAccountFetcher); }; - }, []); + }, [query]); - return { - balance: query.data, - ...query, - }; + return query; }; diff --git a/packages/react/src/hooks/useChain.ts b/packages/react/src/hooks/useChain.ts index e151182..74380dd 100644 --- a/packages/react/src/hooks/useChain.ts +++ b/packages/react/src/hooks/useChain.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; // should import ChainInfo because of this error: https://github.com/FuelLabs/fuels-ts/issues/1054 // eslint-disable-next-line @typescript-eslint/no-unused-vars import type { ChainInfo } from 'fuels'; @@ -10,9 +10,9 @@ import { useProvider } from './useProvider'; export const useChain = () => { const { provider } = useProvider(); - const query = useQuery( - [QUERY_KEYS.chain], - async () => { + return useNamedQuery('chain', { + queryKey: [QUERY_KEYS.chain], + queryFn: async () => { try { const currentFuelChain = await provider?.getChain(); return currentFuelChain || null; @@ -20,14 +20,7 @@ export const useChain = () => { return null; } }, - { - initialData: null, - enabled: !!provider, - }, - ); - - return { - chain: query.data, - ...query, - }; + initialData: null, + enabled: !!provider, + }); }; diff --git a/packages/react/src/hooks/useConnectors.ts b/packages/react/src/hooks/useConnectors.ts index 785382b..abe8435 100644 --- a/packages/react/src/hooks/useConnectors.ts +++ b/packages/react/src/hooks/useConnectors.ts @@ -1,23 +1,18 @@ -import { useQuery } from '@tanstack/react-query'; - +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; export const useConnectors = () => { const { fuel } = useFuel(); - const query = useQuery( - [QUERY_KEYS.connectorList], - async () => { - return fuel.connectors(); - }, + return useNamedQuery( + 'connectors', { + queryKey: [QUERY_KEYS.connectorList], + queryFn: async () => { + return fuel.connectors(); + }, initialData: [], }, ); - - return { - connectors: query.data, - ...query, - }; }; diff --git a/packages/react/src/hooks/useIsConnected.ts b/packages/react/src/hooks/useIsConnected.ts index 24ddbca..2c0b1d0 100644 --- a/packages/react/src/hooks/useIsConnected.ts +++ b/packages/react/src/hooks/useIsConnected.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; @@ -6,9 +6,9 @@ import { QUERY_KEYS } from '../utils'; export const useIsConnected = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.isConnected], - async () => { + return useNamedQuery('isConnected', { + queryKey: [QUERY_KEYS.isConnected], + queryFn: async () => { try { const isConnected = await fuel.isConnected(); return isConnected || false; @@ -16,13 +16,6 @@ export const useIsConnected = () => { return false; } }, - { - initialData: null, - }, - ); - - return { - isConnected: data, - ...queryProps, - }; + initialData: null, + }); }; diff --git a/packages/react/src/hooks/useNetwork.ts b/packages/react/src/hooks/useNetwork.ts index 4b2d0ca..c05aaa1 100644 --- a/packages/react/src/hooks/useNetwork.ts +++ b/packages/react/src/hooks/useNetwork.ts @@ -1,20 +1,17 @@ -import { useQuery } from '@tanstack/react-query'; - +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; export const useNetwork = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.currentNetwork], - async () => { - return fuel.currentNetwork(); - }, + return useNamedQuery( + 'network', + { + queryKey: [QUERY_KEYS.currentNetwork], + queryFn: async () => { + return fuel.currentNetwork(); + }, + } ); - - return { - network: data, - ...queryProps, - }; }; diff --git a/packages/react/src/hooks/useNodeInfo.ts b/packages/react/src/hooks/useNodeInfo.ts index 3a904b7..a90c1b3 100644 --- a/packages/react/src/hooks/useNodeInfo.ts +++ b/packages/react/src/hooks/useNodeInfo.ts @@ -1,6 +1,6 @@ -import { useQuery } from '@tanstack/react-query'; import { compare } from 'compare-versions'; +import { useNamedQuery } from '../core'; import { QUERY_KEYS } from '../utils'; import { useProvider } from './useProvider'; @@ -11,22 +11,28 @@ type NodeInfoParams = { export const useNodeInfo = ({ version = '0.0.0' }: NodeInfoParams = {}) => { const { provider } = useProvider(); - const { data: nodeInfo, ...query } = useQuery( - [QUERY_KEYS.nodeInfo, provider?.url], - () => { + + const query = useNamedQuery('nodeInfo', { + queryKey: [QUERY_KEYS.nodeInfo, provider?.url], + queryFn: () => { return provider?.fetchNode(); }, - { - enabled: !!provider, - }, - ); - const isCompatible = nodeInfo?.nodeVersion - ? compare(nodeInfo.nodeVersion, version, '>=') - : null; + enabled: !!provider, + }); + + return new Proxy(query, { + get(target, prop) { + if (prop === "isCompatible") { + if(target.nodeInfo?.nodeVersion) { + return compare(target.nodeInfo?.nodeVersion, version, '>='); + } - return { - isCompatible, - nodeInfo, - ...query, + return null; + } + + return Reflect.get(target, prop); + }, + }) as typeof query & { + isCompatible: boolean; }; }; diff --git a/packages/react/src/hooks/useProvider.ts b/packages/react/src/hooks/useProvider.ts index ed0dc53..06aeac7 100644 --- a/packages/react/src/hooks/useProvider.ts +++ b/packages/react/src/hooks/useProvider.ts @@ -1,24 +1,19 @@ -import { useQuery } from '@tanstack/react-query'; - +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; export const useProvider = () => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.provider], - async () => { - const provider = await fuel.getProvider(); - return provider || null; - }, + return useNamedQuery( + 'provider', { + queryKey: [QUERY_KEYS.provider], + queryFn: async () => { + const provider = await fuel.getProvider(); + return provider || null; + }, initialData: null, - }, + } ); - - return { - provider: data, - ...queryProps, - }; }; diff --git a/packages/react/src/hooks/useTransaction.ts b/packages/react/src/hooks/useTransaction.ts index e16a7f9..89c5457 100644 --- a/packages/react/src/hooks/useTransaction.ts +++ b/packages/react/src/hooks/useTransaction.ts @@ -1,16 +1,17 @@ -import { useQuery } from '@tanstack/react-query'; // TODO: fix this import when sdk error gets fixed: https://github.com/FuelLabs/fuels-ts/issues/1054 // eslint-disable-next-line @typescript-eslint/no-unused-vars import type * as fuels from 'fuels'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; +import { QUERY_KEYS } from '../utils'; export const useTransaction = (txId?: string) => { const { fuel } = useFuel(); - const { data, ...query } = useQuery( - ['transaction', txId], - async () => { + return useNamedQuery('transaction', { + queryKey: [QUERY_KEYS.transaction, txId], + queryFn: async () => { try { const provider = await fuel?.getProvider(); if (!provider) return null; @@ -20,14 +21,7 @@ export const useTransaction = (txId?: string) => { return null; } }, - { - initialData: null, - enabled: !!txId, - }, - ); - - return { - transaction: data, - ...query, - }; + initialData: null, + enabled: !!txId, + }); }; diff --git a/packages/react/src/hooks/useTransactionReceipts.ts b/packages/react/src/hooks/useTransactionReceipts.ts index b431d7a..67e0619 100644 --- a/packages/react/src/hooks/useTransactionReceipts.ts +++ b/packages/react/src/hooks/useTransactionReceipts.ts @@ -1,18 +1,18 @@ -import { useQuery } from '@tanstack/react-query'; import { TransactionResponse } from 'fuels'; // should import BN because of this TS error: https://github.com/microsoft/TypeScript/issues/47663 // eslint-disable-next-line @typescript-eslint/no-unused-vars import type { TransactionResultReceipt } from 'fuels'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; export const useTransactionReceipts = ({ txId }: { txId?: string }) => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.transactionReceipts, txId], - async () => { + return useNamedQuery('transactionReceipts', { + queryKey: [QUERY_KEYS.transactionReceipts, txId], + queryFn: async () => { try { const provider = await fuel.getProvider(); if (!provider) return null; @@ -26,14 +26,7 @@ export const useTransactionReceipts = ({ txId }: { txId?: string }) => { return null; } }, - { - initialData: null, - enabled: !!txId, - }, - ); - - return { - transactionReceipts: data, - ...queryProps, - }; + initialData: null, + enabled: !!txId, + }); }; diff --git a/packages/react/src/hooks/useWallet.ts b/packages/react/src/hooks/useWallet.ts index 738bf0f..971d091 100644 --- a/packages/react/src/hooks/useWallet.ts +++ b/packages/react/src/hooks/useWallet.ts @@ -1,15 +1,17 @@ -import { useQuery } from '@tanstack/react-query'; import { Address } from 'fuels'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; export const useWallet = (address?: string | null) => { const { fuel } = useFuel(); - const { data, ...queryProps } = useQuery( - [QUERY_KEYS.wallet, address], - async () => { + return useNamedQuery( + 'wallet', + { + queryKey: [QUERY_KEYS.wallet, address], + queryFn: async () => { try { const accountAddress = address || (await fuel.currentAccount()) || ''; // Check if the address is valid @@ -19,11 +21,7 @@ export const useWallet = (address?: string | null) => { } catch (error: unknown) { return null; } - }, + }, + } ); - - return { - wallet: data, - ...queryProps, - }; }; From c70d9cd57a580d78807fc44117dd96f12136ae4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 11:16:46 -0400 Subject: [PATCH 08/13] chore: run prettier --- packages/react/src/core/index.ts | 2 +- packages/react/src/core/useNamedQuery.ts | 49 +++++++++++++++------- packages/react/src/hooks/useAccounts.ts | 27 ++++++------ packages/react/src/hooks/useAssets.ts | 27 ++++++------ packages/react/src/hooks/useConnectors.ts | 15 +++---- packages/react/src/hooks/useIsConnected.ts | 6 ++- packages/react/src/hooks/useNetwork.ts | 15 +++---- packages/react/src/hooks/useNodeInfo.ts | 6 +-- packages/react/src/hooks/useProvider.ts | 19 ++++----- packages/react/src/hooks/useWallet.ts | 13 +++--- 10 files changed, 93 insertions(+), 86 deletions(-) diff --git a/packages/react/src/core/index.ts b/packages/react/src/core/index.ts index 0ef8342..8b65505 100644 --- a/packages/react/src/core/index.ts +++ b/packages/react/src/core/index.ts @@ -1 +1 @@ -export * from './useNamedQuery'; \ No newline at end of file +export * from './useNamedQuery'; diff --git a/packages/react/src/core/useNamedQuery.ts b/packages/react/src/core/useNamedQuery.ts index 0553bb8..2d24f43 100644 --- a/packages/react/src/core/useNamedQuery.ts +++ b/packages/react/src/core/useNamedQuery.ts @@ -1,17 +1,35 @@ -import { DefinedUseQueryResult, QueryKey, UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query'; +import { + DefinedUseQueryResult, + QueryKey, + UseQueryOptions, + UseQueryResult, + useQuery, +} from '@tanstack/react-query'; import { useMemo } from 'react'; type ExcludeData = Omit; -type NamedUseQueryResult = ExcludeData> & { +type NamedUseQueryResult< + TName extends string, + TQueryFnData = unknown, + TError = unknown, +> = ExcludeData> & { [key in TName]: UseQueryResult['data']; -} +}; -type DefinedNamedUseQueryResult = ExcludeData> & { +type DefinedNamedUseQueryResult< + TName extends string, + TQueryFnData = unknown, + TError = unknown, +> = ExcludeData> & { [key in TName]: DefinedUseQueryResult['data']; -} +}; -function createProxyHandler(name: TName) { +function createProxyHandler< + TName extends string, + TData = unknown, + TError = unknown, +>(name: TName) { const handlers: ProxyHandler> = { get(target, prop) { if (prop === name) { @@ -21,7 +39,7 @@ function createProxyHandler, 'initialData' > & { initialData?: () => undefined }, -): NamedUseQueryResult +): NamedUseQueryResult; /** * When initialData is provided "data" will be always TQueryFnData. @@ -59,11 +77,11 @@ export function useNamedQuery< UseQueryOptions, 'initialData' > & { initialData: TQueryFnData | (() => TQueryFnData) }, -): DefinedNamedUseQueryResult +): DefinedNamedUseQueryResult; /** * useNamedQuery is a wrapper for useQuery that allows you to override the "data" property with a custom name. - * + * * @param name a identifier to override "data" property with this name * @param options UseQueryOptions * @returns useQuery @@ -79,11 +97,14 @@ export function useNamedQuery< options: UseQueryOptions, ): NamedUseQueryResult { const query = useQuery(options); - + const proxy = useMemo(() => { - return new Proxy(query, createProxyHandler(name)) as NamedUseQueryResult; + return new Proxy(query, createProxyHandler(name)) as NamedUseQueryResult< + TName, + TData, + TError + >; }, [name, query]); return proxy; -}; - +} diff --git a/packages/react/src/hooks/useAccounts.ts b/packages/react/src/hooks/useAccounts.ts index 18f86e8..b75f10f 100644 --- a/packages/react/src/hooks/useAccounts.ts +++ b/packages/react/src/hooks/useAccounts.ts @@ -6,19 +6,16 @@ import { QUERY_KEYS } from '../utils'; export const useAccounts = () => { const { fuel } = useFuel(); - return useNamedQuery( - 'accounts', - { - queryKey: [QUERY_KEYS.accounts], - queryFn: async () => { - try { - const accounts = await fuel.accounts(); - return accounts || []; - } catch (error: unknown) { - return []; - } - }, - initialData: [], - } - ); + return useNamedQuery('accounts', { + queryKey: [QUERY_KEYS.accounts], + queryFn: async () => { + try { + const accounts = await fuel.accounts(); + return accounts || []; + } catch (error: unknown) { + return []; + } + }, + initialData: [], + }); }; diff --git a/packages/react/src/hooks/useAssets.ts b/packages/react/src/hooks/useAssets.ts index 80c5651..1516332 100644 --- a/packages/react/src/hooks/useAssets.ts +++ b/packages/react/src/hooks/useAssets.ts @@ -7,19 +7,16 @@ import { QUERY_KEYS } from '../utils'; export const useAssets = () => { const { fuel } = useFuel(); - return useNamedQuery( - 'assets', - { - queryKey: [QUERY_KEYS.assets], - queryFn: async () => { - try { - const assets = (await fuel.assets()) as Array; - return assets || []; - } catch (error: unknown) { - return []; - } - }, - initialData: [], - } - ); + return useNamedQuery('assets', { + queryKey: [QUERY_KEYS.assets], + queryFn: async () => { + try { + const assets = (await fuel.assets()) as Array; + return assets || []; + } catch (error: unknown) { + return []; + } + }, + initialData: [], + }); }; diff --git a/packages/react/src/hooks/useConnectors.ts b/packages/react/src/hooks/useConnectors.ts index abe8435..cd88391 100644 --- a/packages/react/src/hooks/useConnectors.ts +++ b/packages/react/src/hooks/useConnectors.ts @@ -5,14 +5,11 @@ import { QUERY_KEYS } from '../utils'; export const useConnectors = () => { const { fuel } = useFuel(); - return useNamedQuery( - 'connectors', - { - queryKey: [QUERY_KEYS.connectorList], - queryFn: async () => { - return fuel.connectors(); - }, - initialData: [], + return useNamedQuery('connectors', { + queryKey: [QUERY_KEYS.connectorList], + queryFn: async () => { + return fuel.connectors(); }, - ); + initialData: [], + }); }; diff --git a/packages/react/src/hooks/useIsConnected.ts b/packages/react/src/hooks/useIsConnected.ts index 2c0b1d0..52f4f60 100644 --- a/packages/react/src/hooks/useIsConnected.ts +++ b/packages/react/src/hooks/useIsConnected.ts @@ -6,7 +6,7 @@ import { QUERY_KEYS } from '../utils'; export const useIsConnected = () => { const { fuel } = useFuel(); - return useNamedQuery('isConnected', { + const query = useNamedQuery('isConnected', { queryKey: [QUERY_KEYS.isConnected], queryFn: async () => { try { @@ -18,4 +18,8 @@ export const useIsConnected = () => { }, initialData: null, }); + + return { + ...query, + }; }; diff --git a/packages/react/src/hooks/useNetwork.ts b/packages/react/src/hooks/useNetwork.ts index c05aaa1..5649091 100644 --- a/packages/react/src/hooks/useNetwork.ts +++ b/packages/react/src/hooks/useNetwork.ts @@ -5,13 +5,10 @@ import { QUERY_KEYS } from '../utils'; export const useNetwork = () => { const { fuel } = useFuel(); - return useNamedQuery( - 'network', - { - queryKey: [QUERY_KEYS.currentNetwork], - queryFn: async () => { - return fuel.currentNetwork(); - }, - } - ); + return useNamedQuery('network', { + queryKey: [QUERY_KEYS.currentNetwork], + queryFn: async () => { + return fuel.currentNetwork(); + }, + }); }; diff --git a/packages/react/src/hooks/useNodeInfo.ts b/packages/react/src/hooks/useNodeInfo.ts index a90c1b3..cced443 100644 --- a/packages/react/src/hooks/useNodeInfo.ts +++ b/packages/react/src/hooks/useNodeInfo.ts @@ -11,7 +11,7 @@ type NodeInfoParams = { export const useNodeInfo = ({ version = '0.0.0' }: NodeInfoParams = {}) => { const { provider } = useProvider(); - + const query = useNamedQuery('nodeInfo', { queryKey: [QUERY_KEYS.nodeInfo, provider?.url], queryFn: () => { @@ -22,8 +22,8 @@ export const useNodeInfo = ({ version = '0.0.0' }: NodeInfoParams = {}) => { return new Proxy(query, { get(target, prop) { - if (prop === "isCompatible") { - if(target.nodeInfo?.nodeVersion) { + if (prop === 'isCompatible') { + if (target.nodeInfo?.nodeVersion) { return compare(target.nodeInfo?.nodeVersion, version, '>='); } diff --git a/packages/react/src/hooks/useProvider.ts b/packages/react/src/hooks/useProvider.ts index 06aeac7..64dc0f6 100644 --- a/packages/react/src/hooks/useProvider.ts +++ b/packages/react/src/hooks/useProvider.ts @@ -5,15 +5,12 @@ import { QUERY_KEYS } from '../utils'; export const useProvider = () => { const { fuel } = useFuel(); - return useNamedQuery( - 'provider', - { - queryKey: [QUERY_KEYS.provider], - queryFn: async () => { - const provider = await fuel.getProvider(); - return provider || null; - }, - initialData: null, - } - ); + return useNamedQuery('provider', { + queryKey: [QUERY_KEYS.provider], + queryFn: async () => { + const provider = await fuel.getProvider(); + return provider || null; + }, + initialData: null, + }); }; diff --git a/packages/react/src/hooks/useWallet.ts b/packages/react/src/hooks/useWallet.ts index 971d091..4d1dca0 100644 --- a/packages/react/src/hooks/useWallet.ts +++ b/packages/react/src/hooks/useWallet.ts @@ -7,11 +7,9 @@ import { QUERY_KEYS } from '../utils'; export const useWallet = (address?: string | null) => { const { fuel } = useFuel(); - return useNamedQuery( - 'wallet', - { - queryKey: [QUERY_KEYS.wallet, address], - queryFn: async () => { + return useNamedQuery('wallet', { + queryKey: [QUERY_KEYS.wallet, address], + queryFn: async () => { try { const accountAddress = address || (await fuel.currentAccount()) || ''; // Check if the address is valid @@ -21,7 +19,6 @@ export const useWallet = (address?: string | null) => { } catch (error: unknown) { return null; } - }, - } - ); + }, + }); }; From b5163bf861095cea5422e8923e6fe4b4890e06ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 11:22:00 -0400 Subject: [PATCH 09/13] fix: run eslint --- packages/react/src/core/useNamedQuery.ts | 5 +++-- packages/react/src/hooks/useAccount.ts | 1 - packages/react/src/hooks/useAccounts.ts | 1 - packages/react/src/hooks/useAddAssets.ts | 2 +- packages/react/src/hooks/useAssets.ts | 2 +- packages/react/src/hooks/useBalance.ts | 2 +- packages/react/src/hooks/useChain.ts | 2 +- packages/react/src/hooks/useIsConnected.ts | 1 - 8 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/react/src/core/useNamedQuery.ts b/packages/react/src/core/useNamedQuery.ts index 2d24f43..cb74217 100644 --- a/packages/react/src/core/useNamedQuery.ts +++ b/packages/react/src/core/useNamedQuery.ts @@ -1,8 +1,9 @@ -import { +import type { DefinedUseQueryResult, QueryKey, UseQueryOptions, - UseQueryResult, + UseQueryResult} from '@tanstack/react-query'; +import { useQuery, } from '@tanstack/react-query'; import { useMemo } from 'react'; diff --git a/packages/react/src/hooks/useAccount.ts b/packages/react/src/hooks/useAccount.ts index 87d680e..8e02c99 100644 --- a/packages/react/src/hooks/useAccount.ts +++ b/packages/react/src/hooks/useAccount.ts @@ -1,5 +1,4 @@ import { useNamedQuery } from '../core'; - import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; diff --git a/packages/react/src/hooks/useAccounts.ts b/packages/react/src/hooks/useAccounts.ts index b75f10f..89b8537 100644 --- a/packages/react/src/hooks/useAccounts.ts +++ b/packages/react/src/hooks/useAccounts.ts @@ -1,5 +1,4 @@ import { useNamedQuery } from '../core'; - import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; diff --git a/packages/react/src/hooks/useAddAssets.ts b/packages/react/src/hooks/useAddAssets.ts index 281d0f6..28d3d13 100644 --- a/packages/react/src/hooks/useAddAssets.ts +++ b/packages/react/src/hooks/useAddAssets.ts @@ -1,5 +1,5 @@ -import type { Asset } from 'fuels'; import { useMutation } from '@tanstack/react-query'; +import type { Asset } from 'fuels'; import { useFuel } from '../providers'; import { MUTATION_KEYS } from '../utils'; diff --git a/packages/react/src/hooks/useAssets.ts b/packages/react/src/hooks/useAssets.ts index 1516332..17b4859 100644 --- a/packages/react/src/hooks/useAssets.ts +++ b/packages/react/src/hooks/useAssets.ts @@ -1,6 +1,6 @@ import type { Asset } from 'fuels'; -import { useNamedQuery } from '../core'; +import { useNamedQuery } from '../core'; import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; diff --git a/packages/react/src/hooks/useBalance.ts b/packages/react/src/hooks/useBalance.ts index 1d5974c..e066767 100644 --- a/packages/react/src/hooks/useBalance.ts +++ b/packages/react/src/hooks/useBalance.ts @@ -1,8 +1,8 @@ -import { useNamedQuery } from '../core'; import type { BytesLike } from 'fuels'; import { Address } from 'fuels'; import { useEffect } from 'react'; +import { useNamedQuery } from '../core'; import { QUERY_KEYS } from '../utils'; import { useProvider } from './useProvider'; diff --git a/packages/react/src/hooks/useChain.ts b/packages/react/src/hooks/useChain.ts index 74380dd..8d2b946 100644 --- a/packages/react/src/hooks/useChain.ts +++ b/packages/react/src/hooks/useChain.ts @@ -1,8 +1,8 @@ -import { useNamedQuery } from '../core'; // should import ChainInfo because of this error: https://github.com/FuelLabs/fuels-ts/issues/1054 // eslint-disable-next-line @typescript-eslint/no-unused-vars import type { ChainInfo } from 'fuels'; +import { useNamedQuery } from '../core'; import { QUERY_KEYS } from '../utils'; import { useProvider } from './useProvider'; diff --git a/packages/react/src/hooks/useIsConnected.ts b/packages/react/src/hooks/useIsConnected.ts index 52f4f60..49babd2 100644 --- a/packages/react/src/hooks/useIsConnected.ts +++ b/packages/react/src/hooks/useIsConnected.ts @@ -1,5 +1,4 @@ import { useNamedQuery } from '../core'; - import { useFuel } from '../providers'; import { QUERY_KEYS } from '../utils'; From 91cebe3eb40c8654c18f78a28a584b9ca9432a46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 11:23:10 -0400 Subject: [PATCH 10/13] docs: add changeset --- .changeset/gold-news-begin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-news-begin.md diff --git a/.changeset/gold-news-begin.md b/.changeset/gold-news-begin.md new file mode 100644 index 0000000..70b635c --- /dev/null +++ b/.changeset/gold-news-begin.md @@ -0,0 +1,5 @@ +--- +'@fuels/react': minor +--- + +fix: fuel hooks will only re-render tracked properties, instead of listening to every useQuery property. From a885b0d056dc3aa9de2f8dd290c9e75b72c3e0ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 11:28:35 -0400 Subject: [PATCH 11/13] fix: adjust useNamedQuery imports --- packages/react/src/core/useNamedQuery.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react/src/core/useNamedQuery.ts b/packages/react/src/core/useNamedQuery.ts index cb74217..607d8de 100644 --- a/packages/react/src/core/useNamedQuery.ts +++ b/packages/react/src/core/useNamedQuery.ts @@ -2,10 +2,9 @@ import type { DefinedUseQueryResult, QueryKey, UseQueryOptions, - UseQueryResult} from '@tanstack/react-query'; -import { - useQuery, + UseQueryResult, } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { useMemo } from 'react'; type ExcludeData = Omit; From 087cc42ff564fdd060da265d448133814ea8f002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Fri, 8 Mar 2024 13:50:40 -0400 Subject: [PATCH 12/13] fix: remove misplaced spread operator --- packages/react/src/hooks/useIsConnected.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/hooks/useIsConnected.ts b/packages/react/src/hooks/useIsConnected.ts index 49babd2..bc33f3c 100644 --- a/packages/react/src/hooks/useIsConnected.ts +++ b/packages/react/src/hooks/useIsConnected.ts @@ -18,7 +18,5 @@ export const useIsConnected = () => { initialData: null, }); - return { - ...query, - }; + return query; }; From 072bfb8d48a813baf40c6774b495831694668564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 11 Mar 2024 11:18:43 -0400 Subject: [PATCH 13/13] feat: export useNamedQuery --- packages/react/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index a906288..01dfdd2 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,3 +1,4 @@ +export * from './core'; export * from './hooks'; export * from './utils'; export * from './types';