@hyperweb/playground
Advanced tools
A comprehensive blockchain development playground component for React applications. Provides a complete environment for smart contract development, deployment, and interaction.
npm install @hyperweb/playground
# or
yarn add @hyperweb/playground
# or
pnpm add @hyperweb/playground
Add these imports to your app's root file:
For Next.js App Router (in app/layout.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):
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} />;
}
import { HyperwebPlayground } from '@hyperweb/playground';
function App() {
return (
<div>
<h1>My Interchain App</h1>
<HyperwebPlayground />
</div>
);
}
| 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 |
The playground uses internal default configurations for Hyperweb connection and React Query:
Default Chain Configuration:
Default Query Client Configuration:
{
defaultOptions: {
queries: {
retry: 2,
refetchOnMount: false,
refetchOnWindowFocus: false
}
}
}
The playground uses scoped CSS to prevent conflicts with your application's styles. All styles are contained within the .hwp class.
You must import the required styles in your app's root file (as shown in Step 2 above):
import '@hyperweb/playground/styles';
import '@hyperweb/playground/wallet-styles';
These imports include:
<HyperwebPlayground
endpointsConfig={{
chain: {
rpc: 'https://rpc.example.com',
faucet: 'https://faucet.example.com',
},
registry: {
rest: 'https://rest.example.com',
},
}}
/>
<HyperwebPlayground theme='dark' />
pnpm dev
pnpm build
A unified toolkit for building applications and smart contracts in the Interchain ecosystem
| Category | Tools | Description |
|---|---|---|
| Chain Information | Chain Registry, Utils, Client | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. |
| Wallet Connectors | Interchain Kitbeta, Cosmos Kit | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. |
| Signing Clients | InterchainJSbeta, CosmJS | A single, universal signing interface for any network |
| SDK Clients | Telescope | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. |
| Starter Kits | Create Interchain Appbeta, Create Cosmos App | Set up a modern Interchain app by running one command. |
| UI Kits | Interchain UI | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. |
| Testing Frameworks | Starship | Unified Testing and Development for the Interchain. |
| TypeScript Smart Contracts | Create Hyperweb App | Build and deploy full-stack blockchain applications with TypeScript |
| CosmWasm Contracts | CosmWasm TS Codegen | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. |
🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to our github ⚛️
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.
FAQs
Unknown package
The npm package @hyperweb/playground receives a total of 0 weekly downloads. As such, @hyperweb/playground popularity was classified as not popular.
We found that @hyperweb/playground demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.