@abstraxn/signer-react 1.0.0

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 (supports both React 18 and React 19)
+- 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,9 @@
+/**
+ * Abstraxn Wallet Provider - React Context Provider
+ * Wrap your app with this provider to use Abstraxn Wallet SDK
+ *
+ * This file now re-exports from the modular component structure.
+ * The actual implementation is in components/AbstraxnProvider/
+ */
+export { AbstraxnProvider, AbstraxnContext, useAbstraxnWallet, } from "./components/AbstraxnProvider";
+export type { AbstraxnProviderConfig, AbstraxnContextValue } from "./types";

package/dist/src/AbstraxnProvider.js

@@ -0,0 +1,21 @@
+/**
+ * Abstraxn Wallet Provider - React Context Provider
+ * Wrap your app with this provider to use Abstraxn Wallet SDK
+ *
+ * This file now re-exports from the modular component structure.
+ * The actual implementation is in components/AbstraxnProvider/
+ */
+// Re-export main provider and hook
+export { AbstraxnProvider, AbstraxnContext, useAbstraxnWallet, } from "./components/AbstraxnProvider";
+// Keep the original implementation below for reference during migration
+// TODO: Remove this once migration is complete and tested
+/*
+ * ORIGINAL IMPLEMENTATION - Being migrated to components/AbstraxnProvider/
+ * This section will be removed once the migration is complete
+ */
+/*
+ * ORIGINAL IMPLEMENTATION COMMENTED OUT
+ * See components/AbstraxnProvider/ for the new modular implementation
+ */
+/* END OF ORIGINAL IMPLEMENTATION */
+//# sourceMappingURL=AbstraxnProvider.js.map

package/dist/src/AbstraxnProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstraxnProvider.js","sourceRoot":"","sources":["../../src/AbstraxnProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,mCAAmC;AACnC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AAKvC,wEAAwE;AACxE,0DAA0D;AAE1D;;;GAGG;AAEH;;;GAGG;AACH,oCAAoC"}

package/dist/src/ConnectButton.css

@@ -0,0 +1,217 @@
+/* ConnectButton Styles */
+.abstraxn-connect-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.abstraxn-connect-button:focus-visible {
+  outline-offset: 2px;
+}
+
+.abstraxn-connect-button-light:focus-visible {
+  outline: 2px solid #111827;
+}
+
+.abstraxn-connect-button-dark:focus-visible {
+  outline: 2px solid #9ca3af;
+}
+
+.abstraxn-connect-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Light Theme (Default) */
+.abstraxn-connect-button.abstraxn-connect-button-light {
+  background-color: #111827;
+  color: #ffffff;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-light:hover:not(:disabled) {
+  background-color: #1f2937;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px);
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-light:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-color: #374151;
+}
+
+/* Dark Theme */
+.abstraxn-connect-button.abstraxn-connect-button-dark {
+  background-color: #4b5563;
+  color: #ffffff;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-dark:hover:not(:disabled) {
+  background-color: #6b7280;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-dark:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  background-color: #6b7280;
+}
+
+/* Connected State - Light Theme */
+.abstraxn-connect-button.abstraxn-connect-button-light.abstraxn-connect-button-connected {
+  background: #f3f4f6;
+  color: #111827;
+  border: 1px solid #e5e7eb;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-light.abstraxn-connect-button-connected:hover:not(:disabled) {
+  background: #e5e7eb;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Connected State - Dark Theme */
+.abstraxn-connect-button.abstraxn-connect-button-dark.abstraxn-connect-button-connected {
+  background: #374151;
+  color: #ffffff;
+  border: 1px solid #4b5563;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-dark.abstraxn-connect-button-connected:hover:not(:disabled) {
+  background: #4b5563;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* Size Variants */
+.abstraxn-connect-button.abstraxn-connect-button-sm {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-md {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-lg {
+  padding: 16px 32px;
+  font-size: 18px;
+}
+
+/* Variant Styles */
+.abstraxn-connect-button.abstraxn-connect-button-outline {
+  background: transparent;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-light {
+  border: 2px solid #111827;
+  color: #111827;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-light:hover:not(:disabled) {
+  background: #111827;
+  color: #ffffff;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-dark {
+  border: 2px solid #9ca3af;
+  color: #9ca3af;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-dark:hover:not(:disabled) {
+  background: #9ca3af;
+  color: #ffffff;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-ghost {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-light {
+  color: #111827;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-light:hover:not(:disabled) {
+  background: rgba(17, 24, 39, 0.1);
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-dark {
+  color: #9ca3af;
+}
+
+.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-dark:hover:not(:disabled) {
+  background: rgba(156, 163, 175, 0.2);
+}
+
+/* Loading State */
+.abstraxn-connect-button-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+
+.abstraxn-connect-button-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Address Badge */
+.abstraxn-connect-button-address {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  font-size: 0.875em;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
+.abstraxn-connect-button-dark .abstraxn-connect-button-address {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.abstraxn-connect-button-light.abstraxn-connect-button-connected .abstraxn-connect-button-address {
+  background: rgba(17, 24, 39, 0.1);
+  color: #111827;
+}
+
+.abstraxn-connect-button-dark.abstraxn-connect-button-connected .abstraxn-connect-button-address {
+  background: rgba(156, 163, 175, 0.2);
+  color: #9ca3af;
+}
+

package/dist/src/ConnectButton.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode, ButtonHTMLAttributes, CSSProperties } from 'react';
+import './ConnectButton.css';
+export type ConnectButtonVariant = 'primary' | 'outline' | 'ghost';
+export type ConnectButtonSize = 'sm' | 'md' | 'lg';
+export interface ConnectButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {
+    /**
+     * Custom button text when disconnected
+     * @default 'Connect Wallet'
+     */
+    connectText?: string;
+    /**
+     * Custom button text when connected
+     * @default 'Connected'
+     */
+    connectedText?: string;
+    /**
+     * Show address when connected
+     * @default false
+     */
+    showAddress?: boolean;
+    /**
+     * Custom children to render inside the button
+     * If provided, this will override the default text
+     */
+    children?: ReactNode;
+    /**
+     * Button variant style
+     * @default 'primary'
+     */
+    variant?: ConnectButtonVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: ConnectButtonSize;
+    /**
+     * Custom CSS class name
+     * Will be merged with default classes
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     * Will be merged with default styles
+     */
+    style?: CSSProperties;
+    /**
+     * Disable default styling
+     * If true, only applies minimal classes for functionality
+     * @default false
+     */
+    disableDefaultStyles?: boolean;
+}
+/**
+ * ConnectButton - A button component that triggers the onboarding modal
+ *
+ * @example
+ * ```tsx
+ * import { ConnectButton } from '@abstraxn/signer/react';
+ *
+ * function App() {
+ *   return (
+ *     <ConnectButton
+ *       connectText="Connect Wallet"
+ *       connectedText="Connected"
+ *       showAddress={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function ConnectButton({ connectText, connectedText, showAddress, children, onClick, disabled, variant, size, className, style, disableDefaultStyles, ...props }: ConnectButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ConnectButton.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConnectButton Component
+ * A ready-to-use button component that shows the onboarding modal when clicked
+ */
+import { useCallback, useState, useMemo } from 'react';
+import { useAbstraxnWallet } from './AbstraxnProvider';
+import { WalletModal } from './WalletModal';
+import './ConnectButton.css';
+/**
+ * ConnectButton - A button component that triggers the onboarding modal
+ *
+ * @example
+ * ```tsx
+ * import { ConnectButton } from '@abstraxn/signer/react';
+ *
+ * function App() {
+ *   return (
+ *     <ConnectButton
+ *       connectText="Connect Wallet"
+ *       connectedText="Connected"
+ *       showAddress={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function ConnectButton({ connectText = 'Connect Wallet', connectedText = 'Connected', showAddress = false, children, onClick, disabled, variant = 'primary', size = 'md', className = '', style, disableDefaultStyles = false, ...props }) {
+    const { isConnected, address, showOnboarding, loading, uiConfig } = useAbstraxnWallet();
+    const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
+    const handleClick = useCallback((e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!isConnected) {
+            // Show onboarding modal
+            showOnboarding();
+        }
+        else {
+            // Show wallet modal when connected
+            setIsWalletModalOpen(true);
+        }
+    }, [isConnected, showOnboarding, onClick]);
+    const handleCloseModal = useCallback(() => {
+        setIsWalletModalOpen(false);
+    }, []);
+    // Get theme from UI config
+    const theme = uiConfig?.theme || 'light';
+    const isDark = theme === 'dark';
+    // Build class names
+    const buttonClasses = useMemo(() => {
+        if (disableDefaultStyles) {
+            return className;
+        }
+        const classes = ['abstraxn-connect-button'];
+        // Theme class
+        classes.push(isDark ? 'abstraxn-connect-button-dark' : 'abstraxn-connect-button-light');
+        // Size class
+        classes.push(`abstraxn-connect-button-${size}`);
+        // Variant class (only if not primary)
+        if (variant !== 'primary') {
+            classes.push(`abstraxn-connect-button-${variant}`);
+        }
+        // Connected state class
+        if (isConnected) {
+            classes.push('abstraxn-connect-button-connected');
+        }
+        // Loading state class
+        if (loading) {
+            classes.push('abstraxn-connect-button-loading');
+        }
+        // Custom className
+        if (className) {
+            classes.push(className);
+        }
+        return classes.join(' ');
+    }, [disableDefaultStyles, isDark, size, variant, isConnected, loading, className]);
+    // Determine button content
+    const buttonContent = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (isConnected) {
+            if (showAddress && address) {
+                // Show shortened address
+                const shortAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+                return (_jsxs(_Fragment, { children: [connectedText, _jsx("span", { className: "abstraxn-connect-button-address", children: shortAddress })] }));
+            }
+            else {
+                return connectedText;
+            }
+        }
+        else {
+            return connectText;
+        }
+    }, [children, isConnected, showAddress, address, connectedText, connectText]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ...props, className: buttonClasses, style: style, onClick: handleClick, disabled: disabled || loading, type: props.type || 'button', children: buttonContent }), isConnected && (_jsx(WalletModal, { isOpen: isWalletModalOpen, onClose: handleCloseModal }))] }));
+}
+//# sourceMappingURL=ConnectButton.js.map

package/dist/src/ConnectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectButton.js","sourceRoot":"","sources":["../../src/ConnectButton.tsx"],"names":[],"mappings":"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"}