InterwovenKit

See README.md for detailed package documentation.

Table of Contents

• Installation
• Configuration
• Running Locally
• Deployment Security Headers
• Tech Stack
• Project Structure
• Scripts

Installation

git clone https://github.com/initia-labs/interwovenkit.git
cd interwovenkit
pnpm i
pnpm build  # Build the package at least once before running in development mode

Configuration

cd examples/vite
cp .env.example .env.local  # Copy and edit as needed

INITIA_NETWORK_TYPE=mainnet  # mainnet | testnet
INITIA_ROUTER_API_URL=       # Optional: custom router API URL
INITIA_TEST_MNEMONIC=        # Optional: mnemonic for E2E test wallet

Running Locally

Development Mode

Run the demo site directly from your local source with hot module replacement (HMR):

pnpm dev

• The package source files will be injected into the portal element in the document body.
• The demo site will be available at: http://localhost:5173

Production Mode

After making changes to the package, rebuild and run the demo using the compiled output:

pnpm build  # Rebuild the package after any changes.
pnpm watch  # Serve the demo using the built package and styles.

• In production mode, the package and its styles will be injected into a Shadow DOM.
• The demo site will be available at: http://localhost:5173

Deployment Security Headers

When deploying InterwovenKit in production, configure security response headers in your host app, server, or CDN.

Recommended Headers

• Set Content-Security-Policy with strict directives.
• Set frame-ancestors in CSP for clickjacking protection.
• Optionally set X-Frame-Options for legacy browser coverage.
• Set an explicit Content-Type charset for HTML responses (text/html; charset=utf-8).

CSP Example

Content-Security-Policy: default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' https://<rpc-origin> https://<api-origin> https://<wallet-provider-origin>; frame-src 'self' https://<wallet-provider-origin>

Allowlist only the exact third-party origins your app uses, especially in connect-src and frame-src.

Clickjacking Protection

• Preferred: frame-ancestors in CSP.
• Optional legacy fallback: X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN.

Content-Type Charset

• HTML: Content-Type: text/html; charset=utf-8.
• JS/CSS: use the appropriate Content-Type values and include charset where applicable.

Verify in Production

• Check headers with curl -I https://your-app.example.
• Confirm CSP and frame protections in the browser DevTools Network panel.

Tech Stack

Core Framework

• React 19
• Vite

State Management

• Jotai
• TanStack Query
• React Hook Form

Blockchain Integration

• CosmJS
• wagmi

UI & Styling

• CSS Modules
• React Spring
• Radix UI

Utilities

• ky
• date-fns
• ramda
• BigNumber.js

Project Structure

packages/interwovenkit-react/src/
├── public/          # Public API exports
├── lib/             # Utilities and router
├── data/            # Core blockchain logic
├── hooks/           # Custom React hooks
├── components/      # Reusable UI components
├── pages/           # UI pages
└── styles/          # Global styles

Core Components

• <InterwovenKitProvider />: The main provider component that wraps your application and provides all necessary contexts for wallet integration.
• useInterwovenKit(): Primary hook for accessing wallet and bridge functionality.

Scripts

pnpm dev
pnpm build
pnpm typecheck
pnpm lint
pnpm test