{"_id":"@bsv/btms-permission-module-ui","name":"@bsv/btms-permission-module-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bsv/btms-permission-module-ui","version":"1.0.0","description":"React/MUI UI components for BTMS Permission Module","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc -b","clean":"rm -rf dist"},"keywords":["btms","tokens","permissions","wallet","react","mui","ui"],"author":"","license":"Open BSV","peerDependencies":{"@bsv/uhrp-react":">=1.0.5","@mui/icons-material":">=5.0.0","@mui/material":">=5.0.0","react":">=18.0.0"},"devDependencies":{"@bsv/uhrp-react":"^1.0.5","@mui/icons-material":"^6.0.0","@mui/material":"^6.0.0","@types/react":"^18.0.0","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.2.2"},"_id":"@bsv/btms-permission-module-ui@1.0.0","gitHead":"e6caf73ba5fd984cde9b6fac0a9963b1e64b427b","_nodeVersion":"23.7.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-um9rYXOzYIAwj3r5CU3WHroxsYzvUdDrUzXaoS5bRmd4Gu8DLyZMdEfYajse4MvhHGwIgRZk79uNUIhycPpBlw==","shasum":"2f8b3f784cb1d46e347c83eed14351bd5a69c96c","tarball":"https://registry.npmjs.org/@bsv/btms-permission-module-ui/-/btms-permission-module-ui-1.0.0.tgz","fileCount":42,"unpackedSize":102634,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB/LvrvH2YxXbpac8982W6cshGQi7KJBkhv34TU90K0BAiEAy+rUqBE5uYGI1mdsTThR+WQIJoJChC5k0v1vy/G22bI="}]},"_npmUser":{"name":"braydude","email":"brayden167@gmail.com"},"directories":{},"maintainers":[{"name":"johngalt5","email":"dylan@murraydt.com"},{"name":"loftsteinn","email":"oli@oskarsson.nl"},{"name":"dkellen","email":"darrkellen@gmail.com"},{"name":"braydude","email":"brayden167@gmail.com"},{"name":"tyeverett","email":"p2ppsr@tyweb.us"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/btms-permission-module-ui_1.0.0_1771270371644_0.9213678153180216"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-16T19:32:51.556Z","1.0.0":"2026-02-16T19:32:51.778Z","modified":"2026-02-16T19:32:52.062Z"},"maintainers":[{"name":"johngalt5","email":"dylan@murraydt.com"},{"name":"loftsteinn","email":"oli@oskarsson.nl"},{"name":"dkellen","email":"darrkellen@gmail.com"},{"name":"braydude","email":"brayden167@gmail.com"},{"name":"tyeverett","email":"p2ppsr@tyweb.us"}],"description":"React/MUI UI components for BTMS Permission Module","keywords":["btms","tokens","permissions","wallet","react","mui","ui"],"license":"Open BSV","readme":"# BTMS Permission Module UI\n\nReact/MUI UI components for BTMS token spending authorization.\n\n## Overview\n\nThis package provides ready-to-use React components with Material-UI styling for the BTMS Permission Module. It works in conjunction with `@bsv/btms-permission-module` (core package).\n\n## Target Audience\n\nThis UI package is for wallet developers integrating BTMS token support into **BRC-100 wallets** via **BRC-98/99 hooks**, using React/MUI for prompts.\n\n## Related Docs\n\n- Project index: [`../README.md`](../README.md)\n- Main BTMS API package (`@bsv/btms`): [`../core/README.md`](../core/README.md)\n- Core permission module: [`../permission-module/README.md`](../permission-module/README.md)\n- Full wallet integration guide: [`../permission-module/INTEGRATION.md`](../permission-module/INTEGRATION.md)\n- Frontend app and live deployment (`https://btms.metanet.app`): [`../frontend/README.md`](../frontend/README.md)\n\n## Installation\n\n```bash\nnpm install @bsv/btms-permission-module-ui\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react @mui/material @mui/icons-material\n```\n\n## Usage\n\n### Basic Setup\n\n```typescript\nimport { useTokenSpendPrompt } from '@bsv/btms-permission-module-ui'\nimport { BasicTokenModule } from '@bsv/btms-permission-module'\n\n// Setup the UI hook\nconst { promptUser, PromptComponent } = useTokenSpendPrompt()\n\n// Create the permission module with the prompt function\nconst basicTokenModule = new BasicTokenModule(promptUser)\n\n// Render the component\nreturn (\n  <>\n    {children}\n    <PromptComponent />\n  </>\n)\n```\n\n### With Focus Management (Desktop Apps)\n\n```typescript\nimport { useTokenSpendPrompt, type FocusHandlers } from '@bsv/btms-permission-module-ui'\n\nconst { isFocused, onFocusRequested, onFocusRelinquished } = useContext(UserContext)\n\nconst { promptUser, PromptComponent } = useTokenSpendPrompt({\n  isFocused,\n  onFocusRequested,\n  onFocusRelinquished\n})\n```\n\n## API\n\n### `useTokenSpendPrompt(focusHandlers?: FocusHandlers)`\n\nReact hook for managing token usage prompts.\n\n**Parameters:**\n- `focusHandlers` (optional): Window focus management functions\n  - `isFocused: () => Promise<boolean>`\n  - `onFocusRequested: () => Promise<void>`\n  - `onFocusRelinquished: () => Promise<void>`\n\n**Returns:**\n- `promptUser: (app: string, message: string) => Promise<boolean>` - Function to show prompt\n- `PromptComponent: React.ComponentType` - Component to render\n\n### `TokenAccessPrompt`\n\nThe underlying dialog component (exported as default).\n\n**Props:**\n- `app: string` - Application name requesting permission\n- `message: string` - JSON-encoded token spend information\n- `onAllow: () => void` - Callback when user approves\n- `onDeny: () => void` - Callback when user denies\n\n## Custom UI Implementation\n\nIf you don't want to use MUI, you can implement your own UI by creating a custom prompt function:\n\n```typescript\nimport { BasicTokenModule } from '@bsv/btms-permission-module'\n\nconst customPrompt = async (app: string, message: string): Promise<boolean> => {\n  const spendInfo = JSON.parse(message)\n  \n  // Show your custom UI (Vue, Angular, vanilla JS, etc.)\n  const result = await showMyCustomDialog({\n    app,\n    tokenName: spendInfo.tokenName,\n    amount: spendInfo.sendAmount,\n    assetId: spendInfo.assetId\n  })\n  \n  return result // true = approved, false = denied\n}\n\nconst basicTokenModule = new BasicTokenModule(customPrompt)\n```\n\n## Message Format\n\nThe `message` parameter contains JSON with:\n\n```typescript\n{\n  type: 'btms_spend',\n  sendAmount: number,\n  tokenName: string,\n  assetId: string,\n  recipient?: string,\n  iconURL?: string,\n  changeAmount: number,\n  totalInputAmount: number\n}\n```\n\n## Components\n\n### TokenAccessPrompt\n\nDisplays a Material-UI dialog with:\n- Token icon and name\n- Application requesting permission\n- Send amount and recipient\n- Change amount\n- Total input amount\n- Approve/Deny buttons\n\n## Styling\n\nThe component uses Material-UI's theming system. Customize by wrapping your app in a `ThemeProvider`:\n\n```typescript\nimport { ThemeProvider, createTheme } from '@mui/material'\n\nconst theme = createTheme({\n  // Your theme customization\n})\n\n<ThemeProvider theme={theme}>\n  <App />\n</ThemeProvider>\n```\n\n## License\n\nOpen BSV\n","readmeFilename":"README.md","_rev":"1-a1eeb0d6db0e6e0e6891107ad26f22f1"}