signer-test-sdk-react 0.0.1

package/dist/src/OnboardingUI.d.ts

@@ -0,0 +1,63 @@
+import type { OnboardingUIConfig } from 'signer-test-sdk-core';
+export interface OnboardingUIComponentProps {
+    /**
+     * Configuration for the onboarding UI
+     */
+    config?: Partial<OnboardingUIConfig>;
+    /**
+     * Custom container element or selector
+     * If not provided, component will render inline
+     * @deprecated - Not used in React implementation, kept for backward compatibility
+     */
+    container?: HTMLElement | string;
+    /**
+     * Show as modal (overlay)
+     * @default false (renders inline)
+     */
+    modal?: boolean;
+}
+export interface OnboardingUIComponentRef {
+    /**
+     * Show the onboarding UI
+     */
+    show: () => void;
+    /**
+     * Hide the onboarding UI
+     */
+    hide: () => void;
+    /**
+     * Reset to login form
+     */
+    reset: () => void;
+}
+/**
+ * OnboardingUI Component
+ * Pure React implementation - no DOM manipulation
+ *
+ * Automatically uses config from AbstraxnProvider if no config prop is provided.
+ * Component config prop will override provider config for specific properties.
+ *
+ * @example
+ * ```tsx
+ * import { AbstraxnProvider, OnboardingUI } from '@abstraxn/signer-react';
+ *
+ * function App() {
+ *   return (
+ *     <AbstraxnProvider
+ *       config={{
+ *         apiKey: 'your-api-key',
+ *         ui: {
+ *           theme: 'light',
+ *           logo: 'https://example.com/logo.png',
+ *           onboardTitle: 'Sign in',
+ *         }
+ *       }}
+ *     >
+ *       <OnboardingUI />
+ *       <OnboardingUI config={{ theme: 'dark' }} modal />
+ *     </AbstraxnProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const OnboardingUIComponent: import("react").ForwardRefExoticComponent<OnboardingUIComponentProps & import("react").RefAttributes<OnboardingUIComponentRef>>;

package/dist/src/OnboardingUI.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * OnboardingUI Component - React wrapper
+ * Now uses Pure React components instead of vanilla JS DOM manipulation
+ */
+import { forwardRef, useImperativeHandle } from 'react';
+import { OnboardingUIReact } from './components/OnboardingUI/OnboardingUIReact';
+import { useAbstraxnWallet } from './hooks';
+/**
+ * OnboardingUI Component
+ * Pure React implementation - no DOM manipulation
+ *
+ * Automatically uses config from AbstraxnProvider if no config prop is provided.
+ * Component config prop will override provider config for specific properties.
+ *
+ * @example
+ * ```tsx
+ * import { AbstraxnProvider, OnboardingUI } from '@abstraxn/signer-react';
+ *
+ * function App() {
+ *   return (
+ *     <AbstraxnProvider
+ *       config={{
+ *         apiKey: 'your-api-key',
+ *         ui: {
+ *           theme: 'light',
+ *           logo: 'https://example.com/logo.png',
+ *           onboardTitle: 'Sign in',
+ *         }
+ *       }}
+ *     >
+ *       <OnboardingUI />
+ *       <OnboardingUI config={{ theme: 'dark' }} modal />
+ *     </AbstraxnProvider>
+ *   );
+ * }
+ * ```
+ */
+export const OnboardingUIComponent = forwardRef(({ config, modal = false }, ref) => {
+    const contextValue = useAbstraxnWallet();
+    const { uiConfig: providerUIConfig, availableConnectors } = contextValue;
+    const externalWalletsEnabled = availableConnectors && availableConnectors.length > 0;
+    // Merge provider config with component config (component config takes precedence)
+    const mergedConfig = {
+        ...providerUIConfig,
+        ...config, // Component config overrides provider config
+    };
+    // Expose methods via ref (for backward compatibility)
+    useImperativeHandle(ref, () => ({
+        show: () => {
+            // Modal is controlled by the modal prop, so this is a no-op
+            // In the future, we could add state management here
+        },
+        hide: () => {
+            // Modal is controlled by the modal prop, so this is a no-op
+            // In the future, we could add state management here
+        },
+        reset: () => {
+            // Reset is handled internally by the component
+            // In the future, we could expose this via a ref
+        },
+    }));
+    return (_jsx(OnboardingUIReact, { config: mergedConfig, modal: modal, externalWalletsEnabled: externalWalletsEnabled, availableConnectors: availableConnectors || [] }));
+});
+OnboardingUIComponent.displayName = 'OnboardingUIComponent';
+//# sourceMappingURL=OnboardingUI.js.map

package/dist/src/OnboardingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingUI.js","sourceRoot":"","sources":["../../src/OnboardingUI.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAA8B,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,YAAY,CAAC;IACzE,MAAM,sBAAsB,GAAG,mBAAmB,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;IAErF,kFAAkF;IAClF,MAAM,YAAY,GAAgC;QAChD,GAAG,gBAAgB;QACnB,GAAG,MAAM,EAAE,6CAA6C;KACzD,CAAC;IAEF,sDAAsD;IACtD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,IAAI,EAAE,GAAG,EAAE;YACT,4DAA4D;YAC5D,oDAAoD;QACtD,CAAC;QACD,IAAI,EAAE,GAAG,EAAE;YACT,4DAA4D;YAC5D,oDAAoD;QACtD,CAAC;QACD,KAAK,EAAE,GAAG,EAAE;YACV,+CAA+C;YAC/C,gDAAgD;QAClD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,KAAC,iBAAiB,IAChB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,KAAK,EACZ,sBAAsB,EAAE,sBAAsB,EAC9C,mBAAmB,EAAE,mBAAmB,IAAI,EAAE,GAC9C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC"}

package/dist/src/WalletModal.css

@@ -0,0 +1,549 @@
+/* Wallet Modal Styles */
+.wallet-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Dark Theme (Default) */
+.wallet-modal-overlay.wallet-modal-theme-dark {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* Light Theme */
+.wallet-modal-overlay.wallet-modal-theme-light {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.wallet-modal-content {
+  border-radius: 16px;
+  width: 90%;
+  max-width: 400px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 24px;
+  animation: slideUp 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Dark Theme Content */
+.wallet-modal-content.wallet-modal-theme-dark {
+  background: #1a1a1a;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+}
+
+/* Light Theme Content */
+.wallet-modal-content.wallet-modal-theme-light {
+  background: #ffffff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e5e7eb;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Header */
+.wallet-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.wallet-modal-user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.wallet-modal-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.wallet-modal-avatar-icon {
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.wallet-modal-user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.wallet-modal-address {
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+}
+
+.wallet-modal-theme-dark .wallet-modal-address {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-address {
+  color: #111827;
+}
+
+.wallet-modal-address:hover {
+  opacity: 0.8;
+}
+
+.wallet-modal-copy-icon {
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+
+.wallet-modal-theme-dark .wallet-modal-copy-icon {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-copy-icon {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-address:hover .wallet-modal-copy-icon {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-address:hover .wallet-modal-copy-icon {
+  color: #111827;
+}
+
+.wallet-modal-email {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-email {
+  color: #6b7280;
+}
+
+.wallet-modal-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-close {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-close {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-close:hover {
+  background: #2a2a2a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-close:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+/* Action Buttons */
+.wallet-modal-actions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.wallet-modal-action-btn {
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid;
+}
+
+.wallet-modal-theme-dark .wallet-modal-action-btn {
+  background: #2a2a2a;
+  border-color: #3a3a3a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-action-btn {
+  background: #f9fafb;
+  border-color: #e5e7eb;
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-action-btn:hover {
+  background: #3a3a3a;
+  border-color: #4a4a4a;
+  transform: translateY(-2px);
+}
+
+.wallet-modal-theme-light .wallet-modal-action-btn:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  transform: translateY(-2px);
+}
+
+.wallet-modal-action-btn svg {
+  color: #9333ea;
+}
+
+/* Asset Display */
+.wallet-modal-asset {
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 8px;
+  border: 1px solid;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset {
+  background: #2a2a2a;
+  border-color: #3a3a3a;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset {
+  background: #f9fafb;
+  border-color: #e5e7eb;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset:hover {
+  background: #3a3a3a;
+  border-color: #4a4a4a;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.wallet-modal-asset-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.wallet-modal-asset-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #627eea 0%, #4c6ef5 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+}
+
+.wallet-modal-asset-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.wallet-modal-asset-name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-name {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset-name {
+  color: #111827;
+}
+
+.wallet-modal-asset-balance {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-balance {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset-balance {
+  color: #6b7280;
+}
+
+.wallet-modal-asset-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981;
+  flex-shrink: 0;
+}
+
+.wallet-modal-asset-arrow {
+  flex-shrink: 0;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-arrow {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset-arrow {
+  color: #6b7280;
+}
+
+/* Navigation Menu */
+.wallet-modal-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.wallet-modal-menu-item {
+  background: transparent;
+  border: none;
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+  width: 100%;
+}
+
+.wallet-modal-theme-dark .wallet-modal-menu-item {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-menu-item {
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-menu-item:hover {
+  background: #2a2a2a;
+}
+
+.wallet-modal-theme-light .wallet-modal-menu-item:hover {
+  background: #f3f4f6;
+}
+
+.wallet-modal-menu-item svg {
+  flex-shrink: 0;
+}
+
+.wallet-modal-theme-dark .wallet-modal-menu-item svg {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-menu-item svg {
+  color: #6b7280;
+}
+
+.wallet-modal-menu-item:hover svg {
+  color: #9333ea;
+}
+
+/* Divider */
+.wallet-modal-divider {
+  height: 1px;
+  margin: 8px 0;
+}
+
+.wallet-modal-theme-dark .wallet-modal-divider {
+  background: #3a3a3a;
+}
+
+.wallet-modal-theme-light .wallet-modal-divider {
+  background: #e5e7eb;
+}
+
+/* External Wallets Section */
+.wallet-modal-external-wallets {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.wallet-modal-external-wallets-label {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-external-wallets-label {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-external-wallets-label {
+  color: #6b7280;
+}
+
+/* Disconnect Button */
+.wallet-modal-disconnect {
+  background: transparent;
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #ef4444;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 15px;
+  font-weight: 500;
+  width: 100%;
+  margin-top: 8px;
+  border: 1px solid;
+}
+
+.wallet-modal-theme-dark .wallet-modal-disconnect {
+  border-color: #3a3a3a;
+}
+
+.wallet-modal-theme-light .wallet-modal-disconnect {
+  border-color: #e5e7eb;
+}
+
+.wallet-modal-theme-dark .wallet-modal-disconnect:hover {
+  background: #2a1a1a;
+  border-color: #ef4444;
+}
+
+.wallet-modal-theme-light .wallet-modal-disconnect:hover {
+  background: #fef2f2;
+  border-color: #ef4444;
+}
+
+.wallet-modal-disconnect svg {
+  flex-shrink: 0;
+}
+
+/* Scrollbar Styling */
+.wallet-modal-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-track {
+  background: #1a1a1a;
+  border-radius: 4px;
+}
+
+.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-track {
+  background: #ffffff;
+  border-radius: 4px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-thumb {
+  background: #3a3a3a;
+  border-radius: 4px;
+}
+
+.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-thumb:hover {
+  background: #4a4a4a;
+}
+
+.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .wallet-modal-content {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 16px 16px 0 0;
+    max-height: 95vh;
+    padding: 20px;
+  }
+
+  .wallet-modal-overlay {
+    align-items: flex-end;
+  }
+}
+

package/dist/src/WalletModal.d.ts

@@ -0,0 +1,6 @@
+import './WalletModal.css';
+export interface WalletModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function WalletModal({ isOpen, onClose }: WalletModalProps): import("react/jsx-runtime").JSX.Element | null;