}>


)
}
`

$3

`typescript
import { useZKTLSContext } from '@vitals/extension-react'

function PaymentProofComponent() {
const zktls = useZKTLSContext()

const handleGenerateProof = async () => {
if (!zktls.isInitialized) {
console.log('ZKTLS extension not ready')
return
}

try {
// Request connection to extension
await zktls.requestConnection()

// Authenticate with payment provider
const metadata = await zktls.authenticate({
actionType: 'transfer_venmo',
platform: 'venmo'
})

// Generate cryptographic proof
const proofs = await zktls.generateProofSeries({
platform: 'venmo',
provider: 'venmo',
intentHash: '0x1234...',
originalIndex: 0
})

console.log('Proofs generated:', proofs)
} catch (error) {
console.error('Proof generation failed:', error)
}
}

return (

Generate Payment Proof

)
}
`

API Reference

$3

The main hook that provides all ZKTLS functionality. Returns an object with the following methods:

#### Connection Management
- isInitialized: boolean - Whether the ZKTLS extension is initialized
- requestConnection(): Promise - Request connection to the extension
- checkConnectionStatus(): Promise - Check current connection status
- getVersion(): Promise - Get extension version

#### Authentication & Proof Generation
- authenticate(inputs: AuthenticationInputs): Promise - Authenticate with a payment provider
- generateProof(inputs: HexIntentGenerateProofInputs): Promise - Generate a single proof
- generateProofSeries(inputs, mutations): Promise - Generate multiple proofs for complex verification
- waitForProof(proofId: string): Promise - Wait for proof generation to complete

#### Proof Management
- fetchProofById(proofId: string): Promise - Fetch a specific proof
- fetchProofs(): Promise - Fetch all generated proofs
- fetchGeneratedProofs(responses: GenerateProofResponse[]): Promise - Fetch multiple proofs by their responses

#### Extension Integration
- openSidebar(route: string): Promise - Open the extension sidebar
- onMetadataMessage(callback): () => void - Subscribe to metadata messages

$3

React context provider that makes ZKTLS functionality available to child components.

Props:
- children: ReactNode - Child components
- fallbackComponent?: ReactNode - Component to show while ZKTLS is initializing

$3

Hook to access the ZKTLS context within components. Must be used within a ZKTLSProvider.

Returns: The same object as useZKTLS()

Throws: Error if used outside of ZKTLSProvider

Supported Payment Providers

The extension supports proof generation for the following payment providers:

- Venmo - Single proof generation
- Zelle - Multiple proof generation (supports Chase, Bank of America, Citi sub-providers)
- CashApp - Single proof generation
- Revolut - Single proof generation
- Wise - Single proof generation
- MercadoPago - Single proof generation

Advanced Usage

$3

`typescript
const generateProofWithProgress = async () => {
await zktls.generateProofSeries(
{
platform: 'chase',
provider: 'zelle',
intentHash: '0x1234...',
originalIndex: 0
},
{
progress: ({ progress, step, id, total }) => {
console.log(Step ${step + 1}/${total}: ${progress})
if (id) console.log(Proof ID: ${id})
}
}
)
}
`

$3

`typescript
useEffect(() => {
const unsubscribe = zktls.onMetadataMessage((data) => {
console.log('Payment metadata:', data.metadata)
console.log('Platform:', data.platform)
console.log('Request ID:', data.requestId)
})

return unsubscribe
}, [zktls])
`

$3

`typescript
import { findMetadataMessage } from '@vitals/extension-react'

const matchingMessage = findMetadataMessage({
metadata: paymentMetadata,
intent: userIntent,
token: tokenInfo
})
`

Proof Encoding Utilities

The package includes utilities for encoding proofs for blockchain submission:

`typescript
import {
encodeProofAsBytes,
encodeTwoProofs,
encodeProof
} from '@vitals/extension-react'

// Encode single proof
const encodedProof = encodeProofAsBytes(reclaimProof)

// Encode multiple proofs (for Zelle/Chase)
const encodedProofs = encodeTwoProofs(proof1, proof2)

// High-level encoding based on provider
const encoded = encodeProof({
extensionProofs: notarizedProofs,
subProvider: 'chase',
provider: 'zelle'
})
`

Error Handling

Always wrap ZKTLS calls in try-catch blocks:

`typescript
const handleProofGeneration = async () => {
try {
const proofs = await zktls.generateProofSeries(inputs)
// Handle success
} catch (error) {
if (error.message.includes('failed')) {
// Handle proof generation failure
} else if (error.message.includes('cancelled')) {
// Handle user cancellation
} else {
// Handle other errors
}
}
}
`

Types

The package exports TypeScript types for all major interfaces:

`typescript
import type {
Status,
MetadataMessage,
MetadataMessageResponse,
GenerateProofInputs,
GenerateProofResponse,
AuthenticationInputs,
NotaryRequest,
ReclaimProof
} from '@vitals/extension-react'
``

Dependencies

- React ^18.2.0 (peer dependency)
- @vitals/utils - Shared utilities package
- viem - Ethereum utilities for encoding

Browser Extension Requirement

This package requires users to have the ZKTLS browser extension installed. The extension handles all cryptographic operations and secure communication with payment providers.

Security Notes

- All sensitive operations are handled by the browser extension
- No private keys or sensitive data are exposed to the web application
- Zero-knowledge proofs ensure payment verification without revealing account details
- All proof generation happens locally in the user's browser