diff --git a/examples/nextjs/components/provider.tsx b/examples/nextjs/components/provider.tsx index 43091be8..0da73e8f 100644 --- a/examples/nextjs/components/provider.tsx +++ b/examples/nextjs/components/provider.tsx @@ -2,7 +2,7 @@ import { osmosis, osmosisAssetList } from '@nabla-studio/chain-registry'; import { QuirksConfig, QuirksNextProvider } from '@quirks/react'; -import { type Config, ssrPersistOptions } from '@quirks/store'; +import { type Config } from '@quirks/store'; import { xdefiExtension, keplrExtension, @@ -22,7 +22,6 @@ const config: Config = { ], chains: [osmosis /* bitsong */], assetsLists: [osmosisAssetList /* bitsongAssetList */], - persistOptions: ssrPersistOptions, walletConnectOptions: { providerOpts: { logger: 'info', @@ -39,8 +38,8 @@ const config: Config = { export const Provider = ({ children }: PropsWithChildren) => { return ( - - {children} - + + {children} + ); }; diff --git a/packages/react/src/providers/next.tsx b/packages/react/src/providers/next.tsx index f1d97795..ffff2e5b 100644 --- a/packages/react/src/providers/next.tsx +++ b/packages/react/src/providers/next.tsx @@ -1,25 +1,15 @@ -import { QuirksConfigContext } from './config'; -import { type PropsWithChildren, useContext, useEffect, useState } from 'react'; +import { type PropsWithChildren, useSyncExternalStore } from 'react'; -export const QuirksNextProvider = (props: PropsWithChildren) => { - const { children } = props; - const store = useContext(QuirksConfigContext); - const [hydrated, setHydrated] = useState(false); +export const emptySubscribe = () => () => {}; - if (!store) { - throw new Error( - ['`QuirksNextProvider` must be used within `QuirksConfig`.'].join('\n'), - ); - } +export const QuirksNextProvider = ({ + children, +}: PropsWithChildren) => { + const isServer = useSyncExternalStore( + emptySubscribe, + () => false, + () => true, + ); - useEffect(() => { - store.persist.rehydrate(); - setHydrated(true); - }, [store.persist]); - - if (!hydrated) { - return null; - } - - return children; + return isServer ? null : children; }; diff --git a/packages/store/src/configs/default.ts b/packages/store/src/configs/default.ts index d1a03201..a2338d96 100644 --- a/packages/store/src/configs/default.ts +++ b/packages/store/src/configs/default.ts @@ -19,5 +19,4 @@ export const defaultPersistOptions: PersistOptions = { ([key]) => !excludedKeys.includes(key as keyof AppState), ), ) as AppState, - skipHydration: true, }; diff --git a/packages/store/src/store.ts b/packages/store/src/store.ts index 58213961..fd864300 100644 --- a/packages/store/src/store.ts +++ b/packages/store/src/store.ts @@ -146,16 +146,24 @@ export const createConfig = (config: Config) => { * We should inject wallet when walletName, is necessary because 'Wallet' is a class, * when it is serialized it loses methods, so we could not call wallet functionality. */ - const unsub = store.persist?.onFinishHydration((state) => { + if (!store.persist.getOptions().skipHydration) { + const state = store.getState(); + if (state.walletName && !state.wallet && autoConnect) { store.getState().reconnect(state.walletName); - - /** - * Do once, cleanup onFinishHydration to avoid useless event subscription. - */ - unsub(); } - }); + } else { + const unsub = store.persist?.onFinishHydration((state) => { + if (state.walletName && !state.wallet && autoConnect) { + store.getState().reconnect(state.walletName); + + /** + * Do once, cleanup onFinishHydration to avoid useless event subscription. + */ + unsub(); + } + }); + } return store; };