Renamed useSynchronizedNetworkType to usenetworkType. Added Prettier …

…config for the react kit. Removed sample button component.

package.json

@@ -5,7 +5,6 @@
     "dev": "turbo run dev",
     "lint": "turbo run lint",
     "clean": "turbo run clean && rm -rf node_modules",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "turbo run build --filter=docs^... && changeset publish"

packages/react-kit/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+public
+dist

packages/react-kit/.prettierrc.mjs

@@ -0,0 +1,13 @@
+/** @type {import("prettier").Config} */
+const config = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  tailwindConfig: './tailwind.config.mjs',
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindFunctions: ['clsx', 'c', 'cn'],
+}
+
+export default config;

packages/react-kit/package.json

@@ -4,11 +4,6 @@
   "sideEffects": false,
   "license": "MIT",
   "exports": {
-    "./button": {
-      "types": "./src/button.tsx",
-      "import": "./dist/button.mjs",
-      "require": "./dist/button.js"
-    },
     "./Faucet": {
       "types": "./src/components/Faucet.tsx",
       "import": "./dist/components/Faucet.mjs",
@@ -39,17 +34,18 @@
       "import": "./dist/components/NetworkType.mjs",
       "require": "./dist/components/NetworkType.js"
     },
-    "./useSynchronizedNetworkType": {
-      "types": "./src/hooks/useSynchronizedNetworkType.tsx",
-      "import": "./dist/hooks/useSynchronizedNetworkType.mjs",
-      "require": "./dist/hooks/useSynchronizedNetworkType.js"
+    "./useNetworkType": {
+      "types": "./src/hooks/useNetworkType.tsx",
+      "import": "./dist/hooks/useNetworkType.mjs",
+      "require": "./dist/hooks/useNetworkType.js"
     }
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "format": "prettier --write './src/**/*.{js,jsx,ts,tsx}'"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
@@ -58,6 +54,7 @@
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "eslint": "^8.57.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tsup": "^8.3.5",
     "typescript": "5.7.2"
   },

packages/react-kit/src/components/NetworkType.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@radix-ui/themes'
-import useSynchronizedNetworkType from '~~/hooks/useSynchronizedNetworkType'
+import useNetworkType from '~~/hooks/useNetworkType'
 
 /**
  * The `NetworkType` component renders the name of the currently selected network or disconnected if no wallet connected.
@@ -11,10 +11,10 @@ import useSynchronizedNetworkType from '~~/hooks/useSynchronizedNetworkType'
  * - mainnet: green
  * Please note the user wallet is the single point of truth and the only way to switch the network now is through wallet settings.
  * 
- * The component is using the useSynchronizedNetworkType hook to fetch the network type.
+ * The component is using the useNetworkType hook to fetch the network type.
  */
 const NetworkType = () => {
-  const { networkType } = useSynchronizedNetworkType({ autoSync: true })
+  const { networkType } = useNetworkType({ autoSync: true })
 
   let color = 'amber'
   if (networkType == null) {

packages/react-kit/src/hooks/useSynchronizedNetworkType.tsx → packages/react-kit/src/hooks/useNetworkType.tsx

@@ -8,7 +8,7 @@ import { formatNetworkType } from "~~/helpers/format";
 
 const DEFAULT_REFETCH_INTERVAL = 3000;
 
-export interface IUseSynchronizedNetworkTypeParams {
+export interface IUseNetworkTypeParams {
   /**
    * (Optional) The flag determines whether the app network needs to be synchronized with the wallet network regularly or just once.
    */
@@ -18,7 +18,7 @@ export interface IUseSynchronizedNetworkTypeParams {
    */
   autoSyncInterval?: number;
 }
-export interface IUseSynchronizedNetworkTypeResponse {
+export interface IUseNetworkTypeResponse {
   /**
    * Network type or undefined if wallet is not connected.
    */
@@ -30,7 +30,7 @@ export interface IUseSynchronizedNetworkTypeResponse {
 }
 
 /**
- * The useSynchronizedNetworkType() hook lets you determine which network is currently active in the user wallet.
+ * The useNetworkType() hook lets you determine which network is currently active in the user wallet.
  *
  * It's possible to request the network type once or on a regular basis.
  * If a wallet is not connected, the network type will be undefined.
@@ -39,30 +39,30 @@ export interface IUseSynchronizedNetworkTypeResponse {
  * Usage:
  * - One-time request
  * ```ts
- * const { networkType } = useSynchronizedNetworkType({
+ * const { networkType } = useNetworkType({
  *  autoSync: false
  * })
  * ```
  * - On demand
  * ```ts
- * const { networkType, synchronize } = useSynchronizedNetworkType()
+ * const { networkType, synchronize } = useNetworkType()
  * synchronize()
  * ```
  * - Regular update
  * ```ts
- * const { networkType } = useSynchronizedNetworkType({
+ * const { networkType } = useNetworkType({
  *  autoSync: true,
  *  autoSyncInterval: 3000
  * })
  * ```
  *
- * @param {IUseSynchronizedNetworkTypeParams} params The parameter object.
- * @returns {IUseSynchronizedNetworkTypeResponse} An object with the network type and synchronize function.
+ * @param {IUseNetworkTypeParams} params The parameter object.
+ * @returns {IUseNetworkTypeResponse} An object with the network type and synchronize function.
  */
-const useSynchronizedNetworkType = ({
+const useNetworkType = ({
   autoSync,
   autoSyncInterval,
-}: IUseSynchronizedNetworkTypeParams = {}): IUseSynchronizedNetworkTypeResponse => {
+}: IUseNetworkTypeParams = {}): IUseNetworkTypeResponse => {
   const wallet = useCurrentWallet();
   const ctx = useSuiClientContext();
   const [networkType, setNetworkType] = useState<
@@ -128,4 +128,4 @@ const useSynchronizedNetworkType = ({
   };
 };
 
-export default useSynchronizedNetworkType
+export default useNetworkType

packages/react-kit/tsup.config.ts

@@ -2,13 +2,12 @@ import { defineConfig } from "tsup";
 
 export default defineConfig((options) => ({
   entryPoints: [
-    "src/button.tsx",
     "src/components/Faucet.tsx",
     "src/hooks/useFaucet.tsx",
     "src/components/Balance.tsx",
     "src/hooks/useBalance.tsx",
     "src/components/NetworkType.tsx",
-    "src/hooks/useSynchronizedNetworkType.tsx",
+    "src/hooks/useNetworkType.tsx",
     "src/providers/SuiProvider.tsx",
   ],
   format: ["cjs", "esm"],

turbo.json

@@ -15,6 +15,9 @@
     },
     "clean": {
       "cache": false
+    },
+    "format": {
+      "cache": false
     }
   }
 }