signer-test-sdk-react 0.0.1

package/README.md

@@ -0,0 +1,114 @@
+# @abstraxn/signer-react
+
+**React SDK** for Abstraxn Wallet - React components, hooks, and providers for seamless Web3 wallet integration.
+
+This package provides React-specific components and hooks that use `@abstraxn/signer-core` under the hood.
+
+## 📦 Installation
+
+```bash
+npm install @abstraxn/signer-react
+```
+
+**Requirements:**
+- React 18.0.0 or higher
+- Node.js 16.0.0 or higher
+- `@abstraxn/signer-core` (installed automatically as a dependency)
+
+## 🚀 Quick Start
+
+### 1. Wrap Your App with AbstraxnProvider
+
+```tsx
+import { AbstraxnProvider, type AbstraxnProviderConfig } from '@abstraxn/signer-react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const providerConfig: AbstraxnProviderConfig = {
+  apiKey: 'your-api-key-here',
+};
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AbstraxnProvider config={providerConfig}>
+      <App />
+    </AbstraxnProvider>
+  </StrictMode>,
+);
+```
+
+### 2. Use the ConnectButton Component
+
+```tsx
+import { ConnectButton } from "@abstraxn/signer-react";
+
+function App() {
+  return (
+    <div>
+      <ConnectButton
+        connectText="Connect Wallet"
+        connectedText="Connected"
+        showAddress={true}
+      />
+    </div>
+  );
+}
+```
+
+### 3. Or Use Hooks for Custom Integration
+
+```tsx
+import { useAbstraxnWallet } from "@abstraxn/signer-react";
+
+function HookConnectButton() {
+  const { showOnboarding, loading } = useAbstraxnWallet();
+
+  return (
+    <button
+      onClick={showOnboarding}
+      disabled={loading}
+      className="demo-connect-button"
+    >
+      {loading ? 'Connecting...' : 'Connect via Hook'}
+    </button>
+  );
+}
+```
+
+## ✨ Features
+
+- 🔐 **Multiple Auth Methods**: Email OTP, Social login (Google, Discord, X), Passkey, External wallets
+- 💼 **Wallet Management**: Connect, disconnect, view wallet info, export wallets
+- 🎨 **Beautiful UI Components**: Pre-built ConnectButton, WalletModal, and OnboardingUI
+- 🌓 **Theme Support**: Light and dark themes
+- 🔄 **Auto-Reconnect**: Automatic session restoration
+- 📱 **Responsive Design**: Works on all devices
+- ⚡ **TypeScript**: Full TypeScript support
+- 🌐 **Multi-Chain**: Support for multiple blockchain networks
+
+## 📚 Components
+
+- `AbstraxnProvider` - Context provider
+- `ConnectButton` - Ready-to-use connect button
+- `WalletModal` - Wallet management modal
+- `OnboardingUI` - Authentication UI component
+
+## 🪝 Hooks
+
+- `useAbstraxnWallet()` - Main wallet hook
+- `useIsConnected()` - Check connection status
+- `useAddress()` - Get wallet address
+- `useWhoami()` - Get user information
+- `useExternalWalletInfo()` - External wallet information
+- `usePrepareTransaction()` - Prepare and sign transactions
+- `useExportWallet()` - Export wallet
+
+## 🔗 Related Packages
+
+- **@abstraxn/signer-core** - Core SDK (dependency)
+- **@abstraxn/signer** - Backward compatible wrapper (deprecated)
+
+## 📝 License
+
+MIT

package/dist/src/AbstraxnProvider.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Abstraxn Wallet Provider - React Context Provider
+ * Wrap your app with this provider to use Abstraxn Wallet SDK
+ */
+import { type ReactNode } from 'react';
+import type { AbstraxnProviderConfig, AbstraxnContextValue } from './types';
+export declare const AbstraxnContext: import("react").Context<AbstraxnContextValue | null>;
+interface AbstraxnProviderProps {
+    config: AbstraxnProviderConfig;
+    children: ReactNode;
+}
+/**
+ * Main AbstraxnProvider component with optional WagmiProvider wrapper
+ */
+export declare function AbstraxnProvider({ config, children }: AbstraxnProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access Abstraxn Wallet context
+ */
+export declare function useAbstraxnWallet(): AbstraxnContextValue;
+export {};