npm package: @hyperweb/playground
Description: <p align="center" width="100%">     <img height="148" src="https://raw.githubusercontent.com/hyperweb-io/.github/refs/heads/main/assets/logo.svg" /> </p>
Latest version: 0.0.2

# Hyperweb Playground

<p align="center" width="100%">
    <img height="148" src="https://raw.githubusercontent.com/hyperweb-io/.github/refs/heads/main/assets/logo.svg" />
</p>

A comprehensive blockchain development playground component for React applications. Provides a complete environment for smart contract development, deployment, and interaction.

## Features

- 🔧 **Smart Contract Editor** - Monaco editor with syntax highlighting
- 🚀 **Contract Deployment** - Deploy contracts to Hyperweb
- 🔗 **Contract Interaction** - Interactive interface for calling contract methods
- 💧 **Faucet Integration** - Built-in faucet for testnet tokens
- 📊 **Asset Management** - View and manage blockchain assets
- 🎨 **Theming** - Dark/light mode support
- 📱 **Responsive Design** - Works on desktop and mobile devices

## Quick Start

### Step 1: Install the Package

```bash
npm install @hyperweb/playground
# or
yarn add @hyperweb/playground
# or
pnpm add @hyperweb/playground
```

### Step 2: Import Required Styles

Add these imports to your app's root file:

**For Next.js App Router** (in `app/layout.tsx`):

```tsx
import '@hyperweb/playground/styles';
import '@hyperweb/playground/wallet-styles';

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang='en'>
			<body>{children}</body>
		</html>
	);
}
```

**For Next.js Pages Router** (in `pages/_app.tsx`):

```tsx
import '@hyperweb/playground/styles';
import '@hyperweb/playground/wallet-styles';

import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
	return <Component {...pageProps} />;
}
```

### Step 3: Use the Component

```tsx
import { HyperwebPlayground } from '@hyperweb/playground';

function App() {
	return (
		<div>
			<h1>My Interchain App</h1>
			<HyperwebPlayground />
		</div>
	);
}
```

## Configuration Options

### HyperwebPlaygroundProps

| Property                    | Type                       | Default     | Description                                  |
| --------------------------- | -------------------------- | ----------- | -------------------------------------------- |
| `endpointsConfig`           | `Partial<EndpointsConfig>` | `undefined` | Custom RPC/REST endpoints                    |
| `theme`                     | `'light' \| 'dark'`        | `'light'`   | Theme preference                             |
| `requireHyperwebConnection` | `boolean`                  | `true`      | Whether to require Hyperweb chain connection |
| `className`                 | `string`                   | `undefined` | Additional CSS classes                       |

### Internal Configuration

The playground uses internal default configurations for Hyperweb connection and React Query:

**Default Chain Configuration:**

- Pre-configured with Hyperweb chains and assets
- Keplr wallet integration enabled by default
- Automatic wallet modal theming

**Default Query Client Configuration:**

```typescript
{
  defaultOptions: {
    queries: {
      retry: 2,
      refetchOnMount: false,
      refetchOnWindowFocus: false
    }
  }
}
```

## Styling

The playground uses scoped CSS to prevent conflicts with your application's styles. All styles are contained within the `.hwp` class.

### Required Style Imports

You must import the required styles in your app's root file (as shown in Step 2 above):

```tsx
import '@hyperweb/playground/styles';
import '@hyperweb/playground/wallet-styles';
```

These imports include:

- Core playground component styles
- Wallet connection modal styles
- Scoped CSS to prevent style conflicts

## Examples

### With Custom Endpoints

```tsx
<HyperwebPlayground
	endpointsConfig={{
		chain: {
			rpc: 'https://rpc.example.com',
			faucet: 'https://faucet.example.com',
		},
		registry: {
			rest: 'https://rest.example.com',
		},
	}}
/>
```

### With Dark Theme

```tsx
<HyperwebPlayground theme='dark' />
```

## Development

### Development Server

```bash
pnpm dev
```

### Building the Package

```bash
pnpm build
```

## Interchain JavaScript Stack ⚛️

A unified toolkit for building applications and smart contracts in the Interchain ecosystem

| Category                       | Tools                                                                                                                                                                                                     | Description                                                                                                         |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Chain Information**          | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. |
| **Wallet Connectors**          | [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)<sup>beta</sup>, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit)                                                           | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.    |
| **Signing Clients**            | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)<sup>beta</sup>, [**CosmJS**](https://github.com/cosmos/cosmjs)                                                                            | A single, universal signing interface for any network                                                               |
| **SDK Clients**                | [**Telescope**](https://github.com/hyperweb-io/telescope)                                                                                                                                                 | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.                                       |
| **Starter Kits**               | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)<sup>beta</sup>, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app)                               | Set up a modern Interchain app by running one command.                                                              |
| **UI Kits**                    | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui)                                                                                                                                         | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.                            |
| **Testing Frameworks**         | [**Starship**](https://github.com/hyperweb-io/starship)                                                                                                                                                   | Unified Testing and Development for the Interchain.                                                                 |
| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app)                                                                                                                             | Build and deploy full-stack blockchain applications with TypeScript                                                 |
| **CosmWasm Contracts**         | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen)                                                                                                                                         | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.                                         |

## Credits

🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)

## Disclaimer

AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.

No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.