diff --git a/packages/dapp-kit-react/src/DAppKitProvider.tsx b/packages/dapp-kit-react/src/DAppKitProvider.tsx index 41bbf0d5..c8d62372 100644 --- a/packages/dapp-kit-react/src/DAppKitProvider.tsx +++ b/packages/dapp-kit-react/src/DAppKitProvider.tsx @@ -6,67 +6,24 @@ import React, { useMemo, useState, } from 'react'; -import type { WalletSource } from '@vechain/dapp-kit'; +import type { DAppKit, WalletSource } from '@vechain/dapp-kit'; import { DAppKitUI } from '@vechain/dapp-kit-ui'; import { subscribeKey } from 'valtio/vanilla/utils'; -import type { DAppKitProviderOptions, DAppKitContext } from './types'; import { type Certificate } from '@vechain/sdk-core'; +import type { DAppKitProviderOptions, DAppKitContext } from './types'; /** * Context */ const Context = createContext(undefined); -export const DAppKitProvider: React.FC = ({ +export const DAppKitDataProvider = ({ children, - nodeUrl, - genesis, - walletConnectOptions, - usePersistence = false, - logLevel, - requireCertificate, - themeMode, - themeVariables, - i18n, - language, - modalParent, - onSourceClick, - connectionCertificate: connectionCertificateData, + connex, +}: { + children: React.ReactNode; + connex: DAppKit; }): React.ReactElement => { - const connex = useMemo( - () => - DAppKitUI.configure({ - nodeUrl, - genesis, - walletConnectOptions, - usePersistence, - logLevel, - requireCertificate, - themeVariables, - themeMode, - i18n, - language, - modalParent, - onSourceClick, - connectionCertificate: connectionCertificateData, - }), - [ - nodeUrl, - genesis, - walletConnectOptions, - usePersistence, - logLevel, - requireCertificate, - themeVariables, - themeMode, - i18n, - language, - modalParent, - onSourceClick, - connectionCertificateData, - ], - ); - const [account, setAccount] = useState( connex.wallet.state.address, ); @@ -146,6 +103,64 @@ export const DAppKitProvider: React.FC = ({ return {children}; }; +export const DAppKitProvider = ({ + children, + nodeUrl, + genesis, + walletConnectOptions, + usePersistence = false, + logLevel, + requireCertificate, + themeMode, + themeVariables, + i18n, + language, + modalParent, + onSourceClick, + connectionCertificate: connectionCertificateData, +}: DAppKitProviderOptions): React.ReactElement | null => { + const [connex, setConnex] = useState(null); + useEffect(() => { + setConnex( + DAppKitUI.configure({ + nodeUrl, + genesis, + walletConnectOptions, + usePersistence, + logLevel, + requireCertificate, + themeVariables, + themeMode, + i18n, + language, + modalParent, + onSourceClick, + connectionCertificate: connectionCertificateData, + }), + ); + }, [ + nodeUrl, + genesis, + walletConnectOptions, + usePersistence, + logLevel, + requireCertificate, + themeVariables, + themeMode, + i18n, + language, + modalParent, + onSourceClick, + connectionCertificateData, + ]); + if (!connex) { + return null; + } + return ( + {children} + ); +}; + export const useConnex = (): DAppKitContext['connex'] => { const context = useContext(Context);