@provex/react 1.2.3

package/dist/styles/default.css

@@ -0,0 +1,325 @@
+/**
+ * @provex/react — Default Stylesheet
+ *
+ * All selectors use [data-provex-*] attributes for zero-specificity-conflict
+ * styling. Override any CSS custom property to theme the component.
+ *
+ * Usage:
+ *   import '@provex/react/styles'
+ *
+ * Or copy this file and customize.
+ */
+
+/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
+
+[data-provex-root] {
+  /* Colors — Light mode */
+  --provex-color-bg: #ffffff;
+  --provex-color-surface: #f8f9fa;
+  --provex-color-border: #e2e8f0;
+  --provex-color-text: #1a202c;
+  --provex-color-text-secondary: #718096;
+  --provex-color-primary: #3b82f6;
+  --provex-color-primary-hover: #2563eb;
+  --provex-color-primary-disabled: #93c5fd;
+  --provex-color-success: #10b981;
+  --provex-color-error: #ef4444;
+  --provex-color-warning: #f59e0b;
+
+  /* Spacing */
+  --provex-space-xs: 0.25rem;
+  --provex-space-sm: 0.5rem;
+  --provex-space-md: 1rem;
+  --provex-space-lg: 1.5rem;
+  --provex-space-xl: 2rem;
+
+  /* Typography */
+  --provex-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --provex-font-size-sm: 0.875rem;
+  --provex-font-size-md: 1rem;
+  --provex-font-size-lg: 1.25rem;
+  --provex-font-size-xl: 1.5rem;
+  --provex-font-weight-normal: 400;
+  --provex-font-weight-medium: 500;
+  --provex-font-weight-bold: 600;
+
+  /* Layout */
+  --provex-border-radius: 0.5rem;
+  --provex-border-radius-sm: 0.375rem;
+  --provex-max-width: 420px;
+
+  /* Base styles */
+  font-family: var(--provex-font-family);
+  font-size: var(--provex-font-size-md);
+  color: var(--provex-color-text);
+  background: var(--provex-color-bg);
+  max-width: var(--provex-max-width);
+  padding: var(--provex-space-lg);
+  border: 1px solid var(--provex-color-border);
+  border-radius: var(--provex-border-radius);
+  box-sizing: border-box;
+}
+
+/* ─── Dark Mode ─────────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  [data-provex-root] {
+    --provex-color-bg: #1a1a2e;
+    --provex-color-surface: #16213e;
+    --provex-color-border: #2d3748;
+    --provex-color-text: #e2e8f0;
+    --provex-color-text-secondary: #a0aec0;
+    --provex-color-primary: #60a5fa;
+    --provex-color-primary-hover: #3b82f6;
+    --provex-color-primary-disabled: #1e40af;
+    --provex-color-success: #34d399;
+    --provex-color-error: #f87171;
+    --provex-color-warning: #fbbf24;
+  }
+}
+
+/* ─── Phase Sections ────────────────────────────────────────────────────── */
+
+[data-provex-section] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--provex-space-md);
+}
+
+/* ─── Fields ────────────────────────────────────────────────────────────── */
+
+[data-provex-field] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--provex-space-xs);
+}
+
+[data-provex-label] {
+  font-size: var(--provex-font-size-sm);
+  font-weight: var(--provex-font-weight-medium);
+  color: var(--provex-color-text-secondary);
+}
+
+/* ─── Select ────────────────────────────────────────────────────────────── */
+
+[data-provex-select] {
+  appearance: none;
+  background: var(--provex-color-surface);
+  border: 1px solid var(--provex-color-border);
+  border-radius: var(--provex-border-radius-sm);
+  padding: var(--provex-space-sm) var(--provex-space-md);
+  font-size: var(--provex-font-size-md);
+  font-family: var(--provex-font-family);
+  color: var(--provex-color-text);
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--provex-space-sm) center;
+  padding-right: var(--provex-space-xl);
+}
+
+[data-provex-select]:focus {
+  outline: 2px solid var(--provex-color-primary);
+  outline-offset: -1px;
+  border-color: var(--provex-color-primary);
+}
+
+/* ─── Input Group ───────────────────────────────────────────────────────── */
+
+[data-provex-input-group] {
+  display: flex;
+  align-items: center;
+  background: var(--provex-color-surface);
+  border: 1px solid var(--provex-color-border);
+  border-radius: var(--provex-border-radius-sm);
+  overflow: hidden;
+}
+
+[data-provex-input-group]:focus-within {
+  outline: 2px solid var(--provex-color-primary);
+  outline-offset: -1px;
+  border-color: var(--provex-color-primary);
+}
+
+[data-provex-input-prefix] {
+  padding: var(--provex-space-sm) var(--provex-space-sm);
+  color: var(--provex-color-text-secondary);
+  font-size: var(--provex-font-size-md);
+  user-select: none;
+}
+
+[data-provex-input] {
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: var(--provex-space-sm) var(--provex-space-sm);
+  font-size: var(--provex-font-size-lg);
+  font-family: var(--provex-font-family);
+  color: var(--provex-color-text);
+  outline: none;
+  min-width: 0;
+}
+
+[data-provex-input]::placeholder {
+  color: var(--provex-color-text-secondary);
+  opacity: 0.6;
+}
+
+/* ─── Info Rows ─────────────────────────────────────────────────────────── */
+
+[data-provex-info] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--provex-space-xs) 0;
+}
+
+[data-provex-info] > [data-provex-label] {
+  font-size: var(--provex-font-size-sm);
+}
+
+[data-provex-info] > [data-provex-value] {
+  font-size: var(--provex-font-size-sm);
+  font-weight: var(--provex-font-weight-medium);
+  color: var(--provex-color-text);
+}
+
+/* ─── Detail Rows (order summary) ───────────────────────────────────────── */
+
+[data-provex-detail] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--provex-space-xs) 0;
+  border-bottom: 1px solid var(--provex-color-border);
+}
+
+[data-provex-detail]:last-of-type {
+  border-bottom: none;
+}
+
+[data-provex-detail] > [data-provex-label] {
+  font-size: var(--provex-font-size-sm);
+}
+
+[data-provex-detail] > [data-provex-value] {
+  font-size: var(--provex-font-size-sm);
+  font-weight: var(--provex-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─── Headings ──────────────────────────────────────────────────────────── */
+
+[data-provex-heading] {
+  font-size: var(--provex-font-size-xl);
+  font-weight: var(--provex-font-weight-bold);
+  margin: 0;
+}
+
+/* ─── Status / Messages ─────────────────────────────────────────────────── */
+
+[data-provex-message="validation"] {
+  font-size: var(--provex-font-size-sm);
+  color: var(--provex-color-text-secondary);
+  margin: 0;
+}
+
+[data-provex-message="error"] {
+  font-size: var(--provex-font-size-sm);
+  color: var(--provex-color-error);
+  margin: 0;
+}
+
+[data-provex-message="status"] {
+  font-size: var(--provex-font-size-sm);
+  color: var(--provex-color-primary);
+  margin: 0;
+}
+
+[data-provex-status] {
+  font-size: var(--provex-font-size-sm);
+  color: var(--provex-color-text-secondary);
+}
+
+[data-provex-status="loading"],
+[data-provex-status="proving"] {
+  color: var(--provex-color-primary);
+}
+
+/* ─── Text ──────────────────────────────────────────────────────────────── */
+
+[data-provex-text] {
+  font-size: var(--provex-font-size-sm);
+  color: var(--provex-color-text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────────────── */
+
+[data-provex-button] {
+  display: block;
+  width: 100%;
+  padding: var(--provex-space-sm) var(--provex-space-md);
+  font-size: var(--provex-font-size-md);
+  font-weight: var(--provex-font-weight-bold);
+  font-family: var(--provex-font-family);
+  color: #ffffff;
+  background: var(--provex-color-primary);
+  border: none;
+  border-radius: var(--provex-border-radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  line-height: 1.5;
+}
+
+[data-provex-button]:hover:not(:disabled) {
+  background: var(--provex-color-primary-hover);
+}
+
+[data-provex-button]:disabled {
+  background: var(--provex-color-primary-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+[data-provex-button]:focus-visible {
+  outline: 2px solid var(--provex-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Match Count ───────────────────────────────────────────────────────── */
+
+[data-provex-info="match-count"] [data-provex-value] {
+  color: var(--provex-color-success);
+  font-size: var(--provex-font-size-sm);
+}
+
+/* ─── Order Summary ─────────────────────────────────────────────────────── */
+
+[data-provex-info="order-summary"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--provex-space-xs);
+  background: var(--provex-color-surface);
+  padding: var(--provex-space-md);
+  border-radius: var(--provex-border-radius-sm);
+}
+
+/* ─── Instructions ──────────────────────────────────────────────────────── */
+
+[data-provex-info="instructions"] {
+  display: block;
+  padding: var(--provex-space-sm) var(--provex-space-md);
+  background: var(--provex-color-surface);
+  border-radius: var(--provex-border-radius-sm);
+  border-left: 3px solid var(--provex-color-primary);
+}
+
+/* ─── Complete Phase ────────────────────────────────────────────────────── */
+
+[data-provex-phase="complete"] [data-provex-heading] {
+  color: var(--provex-color-success);
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@provex/react",
+  "version": "1.2.3",
+  "description": "Portable React buy-flow component and hooks for the Provex protocol",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/provex-tech/monorepo.git",
+    "directory": "packages/react"
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./dist/styles/default.css"
+  },
+  "publishConfig": {
+    "access": "restricted",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
+      },
+      "./styles": "./dist/styles/default.css"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ponder/client": "^0.16.0",
+    "@provex/abis": "workspace:*",
+    "@provex/utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.0.0",
+    "viem": "^2.0.0",
+    "wagmi": "^2.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "jsdom": "^25.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.2",
+    "vitest": "^3.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,115 @@
+// ─── Types ──────────────────────────────────────────────────────────────────
+export type {
+  ProvexConfig,
+  BuyProps,
+  WalletAdapter,
+  BuyPhase,
+  ProvexTheme,
+  UseProvexBuyOptions,
+  UseProvexBuyReturn,
+  PhaseComponentProps,
+  PhaseRenderProps,
+} from './types'
+
+// ─── Provider + hook ────────────────────────────────────────────────────────
+export { ProvexProvider, useProvex } from './ProvexProvider'
+export type { ProvexContextValue, ProvexProviderProps } from './ProvexProvider'
+
+// ─── Layer 1: useProvexBuy hook ─────────────────────────────────────────────
+export { useProvexBuy } from './useProvexBuy'
+
+// ─── Layer 2: Context provider + phase sub-components ───────────────────────
+export { ProvexBuyProvider, useProvexBuyContext } from './ProvexBuyContext'
+export type { ProvexBuyProviderProps } from './ProvexBuyContext'
+
+export {
+  BrowsePhase,
+  CommittedPhase,
+  ProvingPhase,
+  CompletePhase,
+} from './phases'
+
+export type {
+  BrowsePhaseState,
+  CommittedPhaseState,
+  ProvingPhaseState,
+  CompletePhaseState,
+} from './phases'
+
+// ─── Layer 3: Ready-made widget ─────────────────────────────────────────────
+export { ProvexBuy } from './ProvexBuy'
+export { ProvexBuyWagmi } from './ProvexBuyWagmi'
+export type { ProvexBuyWagmiProps } from './ProvexBuyWagmi'
+
+// ─── ProveXClient (framework-agnostic core) ────────────────────────────────
+export { ProveXClient, createProveXClient } from './client'
+export {
+  ProveXError,
+  type ProveXClientConfig,
+  type ProveXErrorCode,
+  type PreparedTransaction,
+  type TransactionResult,
+  type WritableMethod,
+  type SignalIntentParams,
+  type SignalIntentResult,
+  type SignalIntentRawParams,
+  type CreateDepositParams,
+  type CreateDepositRawParams,
+  type DepositPaymentMethod,
+  type MakerRegistrationParams,
+  type PayeeDetails,
+  type AttestationParams,
+  type AttestationResponse,
+} from './client'
+
+// ─── Client factories (for advanced use outside React) ──────────────────────
+export { createApiClient } from './lib/api'
+export type { ApiClient } from './lib/api'
+
+// ─── Protocol hooks ─────────────────────────────────────────────────────────
+export {
+  useReputationLimits,
+  useProtocolFees,
+  useProtocolFeePercentage,
+  useReputation,
+  getTierDisplayInfo,
+  useDeposits,
+  getRate,
+  usePayeeDetails,
+  intentStatuses,
+  useSignalIntent,
+  useNullifierRegistry,
+  useAllowance,
+  useCancelIntent,
+  useReleaseFundsToPayer,
+  useV3Escrow,
+  useTransactionWithIndexer,
+  useProveXClient,
+  useWagmiWallet,
+} from './hooks'
+
+export type {
+  ReputationLimitsParams,
+  ReputationLimits,
+  ProtocolFeesResult,
+  UseProtocolFeesParams,
+  DepositInfo,
+  IntentStatus,
+  PayeeInfo,
+  SignalIntentStatus,
+  CancelIntentStatus,
+  ReleaseFundsStatus,
+  V3EscrowStatus,
+  V3EscrowCreateDepositParams,
+  TransactionPhase,
+  UseTransactionWithIndexerOptions,
+  TransactionSyncOptions,
+  MutationSyncOptions,
+  IndexerAdapter,
+  IndexedDeposit,
+  IndexedVerifier,
+  IndexedIntent,
+  ReputationData,
+  PaginationOptions,
+  PaginatedResult,
+} from './hooks'