Replace hook library to be compatible with ssr (#99)

* chore: replace hook library to be compatible with ssr * chore: add use client directive to hooks
bob-collective · Oct 8, 2024 · 30f2eb3 · 30f2eb3
1 parent bad821f
commit 30f2eb3
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 41 deletions.
diff --git a/packages/sats-wagmi/package.json b/packages/sats-wagmi/package.json
@@ -36,9 +36,9 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "@tanstack/react-query": ">=5.0.0"
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/async-retry": "^1.4.8",
@@ -59,7 +59,7 @@
     "bs58check": "^2.1.2",
     "clean-package": "^2.2.0",
     "sats-connect": "^1.1.2",
-    "@uidotdev/usehooks": "^2.4.1"
+    "usehooks-ts": "^3.1.0"
   },
   "clean-package": "../../clean-package.config.json"
 }
diff --git a/packages/sats-wagmi/src/hooks/useAccount.tsx b/packages/sats-wagmi/src/hooks/useAccount.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useQuery } from '@tanstack/react-query';
 import { getAddressInfo } from 'bitcoin-address-validation';
 import { useEffect } from 'react';

diff --git a/packages/sats-wagmi/src/hooks/useBalance.tsx b/packages/sats-wagmi/src/hooks/useBalance.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 import { EsploraClient } from '@gobob/bob-sdk';
 

diff --git a/packages/sats-wagmi/src/hooks/useConnect.tsx b/packages/sats-wagmi/src/hooks/useConnect.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMutation } from '@tanstack/react-query';
 
 import { SatsConnector } from '../connectors/base';

diff --git a/packages/sats-wagmi/src/hooks/useDisconnect.tsx b/packages/sats-wagmi/src/hooks/useDisconnect.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMutation } from '@tanstack/react-query';
 
 import { useSatsWagmi } from '../provider';

diff --git a/packages/sats-wagmi/src/hooks/useFeeEstimate.tsx b/packages/sats-wagmi/src/hooks/useFeeEstimate.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { estimateTxFee } from '@gobob/bob-sdk';
 import { UndefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
 

diff --git a/packages/sats-wagmi/src/hooks/useFeeRate.tsx b/packages/sats-wagmi/src/hooks/useFeeRate.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { EsploraClient } from '@gobob/bob-sdk';
 import { UndefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
 

diff --git a/packages/sats-wagmi/src/hooks/useSendGatewayTransaction.tsx b/packages/sats-wagmi/src/hooks/useSendGatewayTransaction.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Optional, useMutation, UseMutationOptions } from '@tanstack/react-query';
 import { GatewayQuoteParams, GatewaySDK } from '@gobob/bob-sdk';
 

diff --git a/packages/sats-wagmi/src/hooks/useSendTransaction.tsx b/packages/sats-wagmi/src/hooks/useSendTransaction.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMutation, UseMutationOptions } from '@tanstack/react-query';
 
 import { useSatsWagmi } from '../provider';

diff --git a/packages/sats-wagmi/src/hooks/useSignMessage.tsx b/packages/sats-wagmi/src/hooks/useSignMessage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMutation, UseMutationOptions } from '@tanstack/react-query';
 
 import { useSatsWagmi } from '../provider';

diff --git a/packages/sats-wagmi/src/hooks/useWaitForTransactionReceipt.tsx b/packages/sats-wagmi/src/hooks/useWaitForTransactionReceipt.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 import { EsploraClient } from '@gobob/bob-sdk';
 

diff --git a/packages/sats-wagmi/src/provider.tsx b/packages/sats-wagmi/src/provider.tsx
@@ -2,7 +2,7 @@
 
 import { Network as BitcoinNetwork } from 'bitcoin-address-validation';
 import { FC, ReactNode, createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useLocalStorage } from '@uidotdev/usehooks';
+import { useLocalStorage } from 'usehooks-ts';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { LeatherConnector, MMSnapConnector, UnisatConnector, XverseConnector } from './connectors';
@@ -44,7 +44,13 @@ const SatsWagmiConfig: FC<SatsWagmiConfigProps> = ({ children, queryClient, netw
   const [connectors, setConnectors] = useState<SatsConnector[]>([]);
   const [connector, setCurrentConnector] = useState<SatsConnector>();
 
-  const [storedConnector, setStoredConnector] = useLocalStorage<string | undefined>(LocalStorageKeys.CONNECTOR);
+  const [storedConnector, setStoredConnector] = useLocalStorage<string | undefined>(
+    LocalStorageKeys.CONNECTOR,
+    undefined,
+    {
+      initializeWithValue: typeof window !== 'undefined'
+    }
+  );
 
   useEffect(() => {
     const init = () => {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml