feat: initial provider

Author: mguleryuz

happydom.ts

@@ -1,3 +1,3 @@
-import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
 
-GlobalRegistrator.register();
+GlobalRegistrator.register()

inverter-network-react-0.0.0.tgz

@@ -13,10 +13,6 @@
       "import": "./dist/esm/client.js",
       "default": "./dist/cjs/client.js"
     },
-    "./styles": {
-      "import": "./dist/styles.css",
-      "default": "./dist/styles.css"
-    },
     "./package.json": "./package.json"
   },
   "main": "./dist/cjs/index.js",
@@ -37,7 +33,7 @@
   "scripts": {
     "watch": "tsc -w",
     "build": "bun clean && bun build:cjs && bun build:esm && bun build:types && bun build:css",
-    "build:css": "postcss src/styles/global.css -o dist/styles.css",
+    "build:css": "postcss src/styles/global.css -o dist/cjs/styles/global.css && cp -r dist/cjs/styles dist/esm/styles",
     "build:cjs": "tsc --project ./tsconfig.build.json --module commonjs --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./dist/cjs/package.json && tsc-alias --outDir ./dist/cjs && ts-add-js-extension --dir=dist/cjs --showchanges=false",
     "build:esm": "tsc --project ./tsconfig.build.json --module ESNext --outDir ./dist/esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./dist/esm/package.json && tsc-alias --outDir ./dist/esm && ts-add-js-extension --dir=dist/esm --showchanges=false",
     "build:types": "tsc --project ./tsconfig.build.json --module ESNext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap && tsc-alias --outDir ./dist/types",

package.json

@@ -26,3 +26,5 @@ export * from './components/ui/tooltip'
 export * from './components/wallet-widget'
 // Hooks
 export * from './hooks'
+// Providers
+export * from './provider'

src/client.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import * as React from 'react'
 import { useAccount, useChains } from 'wagmi'
 
 export const getIconSrc = (chainId?: number) => {
@@ -45,7 +45,7 @@ export const useChainSpecs = () => {
   const showWalletWidget = !isConnected || isUnsupportedChain
 
   // Ref to store the previous chainId
-  const prevChainId = useRef(chainId)
+  const prevChainId = React.useRef(chainId)
   const didChainIdChange =
     chainId !== undefined &&
     prevChainId.current !== undefined &&
@@ -55,7 +55,7 @@ export const useChainSpecs = () => {
   const explorerUrl = evmNetwork?.blockExplorers?.[0]?.url
 
   // Update the previous chainId when the chainId changes
-  useEffect(() => {
+  React.useEffect(() => {
     if (didChainIdChange) prevChainId.current = chainId
   }, [chainId])
 

src/hooks/use-chain-specs.ts

@@ -1,6 +1,7 @@
 'use client'
 
-import { useRef } from 'react'
+import * as React from 'react'
+
 import { type UsePrepDeployReturn } from './use-prep-deploy'
 import { useAccount } from 'wagmi'
 import { useEffectAfterMount } from '..'
@@ -19,7 +20,7 @@ export const useDeployForm = ({
   prepResult: UsePrepDeployReturn
 }) => {
   const chainId = useAccount().chainId
-  const prevChainId = useRef(chainId)
+  const prevChainId = React.useRef(chainId)
 
   const {
     deployFormState,

src/hooks/use-deploy/use-deploy-form.ts

@@ -1,19 +1,14 @@
 'use client'
 
-import {
-  type DependencyList,
-  type EffectCallback,
-  useEffect,
-  useRef,
-} from 'react'
+import * as React from 'react'
 
 export const useEffectAfterMount = (
-  cb: EffectCallback,
-  dependencies: DependencyList | undefined
+  cb: React.EffectCallback,
+  dependencies: React.DependencyList | undefined
 ) => {
-  const mounted = useRef(true)
+  const mounted = React.useRef(true)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!mounted.current) {
       return cb()
     }

src/hooks/use-effect-after-mount.ts

@@ -1,11 +1,11 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import * as React from 'react'
 
 export function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = useState(false)
+  const [isHydrated, setIsHydrated] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     setIsHydrated(true)
   }, [])
 

src/hooks/use-is-hydrated.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import '../styles/global.css'
+
+/**
+ * InverterProviderProps
+ * @typedef {Object} InverterProviderProps
+ * @property {React.ReactNode} children
+ * @property {'light' | 'dark'} theme @default 'light'
+ */
+type InverterProviderProps = {
+  children: React.ReactNode
+  theme?: 'light' | 'dark'
+}
+
+export function InverterProvider({
+  children,
+  theme = 'light',
+}: InverterProviderProps) {
+  React.useEffect(() => {
+    if (theme === 'dark') {
+      document.body.classList.add('dark')
+    } else {
+      document.body.classList.remove('dark')
+    }
+  }, [theme])
+
+  return <>{children}</>
+}