Merge pull request #32 from EDOHWARES/feat/react-hooks

feat(react): create React hooks packaging layer (@bc-forge/react)

Author: p3ris0n

react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@bc-forge/react",
+  "version": "1.0.0",
+  "description": "React hooks packaging layer for bc-forge SDK",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "eslint src/**/*.ts"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@bc-forge/sdk": "file:../sdk"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

react/src/context.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import { bcForgeClient, bcForgeClientConfig } from '@bc-forge/sdk';
+
+interface bcForgeContextType {
+  client: bcForgeClient | null;
+}
+
+const bcForgeContext = createContext<bcForgeContextType>({ client: null });
+
+export interface bcForgeProviderProps {
+  config: bcForgeClientConfig;
+  children: ReactNode;
+}
+
+export const bcForgeProvider: React.FC<bcForgeProviderProps> = ({ config, children }) => {
+  const client = useMemo(() => new bcForgeClient(config), [config.rpcUrl, config.networkPassphrase, config.contractId]);
+
+  return (
+    <bcForgeContext.Provider value={{ client }}>
+      {children}
+    </bcForgeContext.Provider>
+  );
+};
+
+export const useBcForgeClient = () => {
+  const context = useContext(bcForgeContext);
+  if (!context.client) {
+    throw new Error('useBcForgeClient must be used within a bcForgeProvider');
+  }
+  return context.client;
+};

react/src/hooks.ts

@@ -0,0 +1,89 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useBcForgeClient } from './context';
+import { Keypair } from '@stellar/stellar-sdk';
+
+/**
+ * Hook to fetch basic token information (name, symbol, decimals).
+ */
+export function useBcForgeToken() {
+  const client = useBcForgeClient();
+  const [data, setData] = useState<{ name: string; symbol: string; decimals: number } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const [name, symbol, decimals] = await Promise.all([
+          client.getName(),
+          client.getSymbol(),
+          client.getDecimals(),
+        ]);
+        setData({ name, symbol, decimals });
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [client]);
+
+  return { data, loading, error };
+}
+
+/**
+ * Hook to fetch the balance of a specific address.
+ */
+export function useBalance(address: string | undefined) {
+  const client = useBcForgeClient();
+  const [data, setData] = useState<bigint | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchBalance = useCallback(async () => {
+    if (!address) return;
+    try {
+      setLoading(true);
+      const balance = await client.getBalance(address);
+      setData(balance);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, address]);
+
+  useEffect(() => {
+    fetchBalance();
+  }, [fetchBalance]);
+
+  return { data, loading, error, refetch: fetchBalance };
+}
+
+/**
+ * Hook to perform mint operations.
+ */
+export function useMint() {
+  const client = useBcForgeClient();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const mint = useCallback(async (to: string, amount: bigint, source: Keypair) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await client.mint(to, amount, source);
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setError(error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  return { mint, loading, error };
+}

react/src/index.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './hooks';

react/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}