Docs
/Getting Started
Getting Started
Wizard UI depends on React Query and @cosmjs.
Installation
Install Wizard UI and make sure you install its peer dependencies. It should be done automaticaly with npm v7.
npm install @wizard-ui/core @wizard-ui/reactQuick Start
First, add the WizardProvider to your app (_app.tsx if you're using next).
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WizardProvider } from "@wizard-ui/react";
import { KeplrWalletAdapter } from "@wizard-ui/core";
import { GasPrice } from "@cosmjs/stargate";
import "@wizard-ui/react/style.css";
const queryClient = new QueryClient();
function App() {
const endpoint = "https://rpc-test.osmosis.zone";
const chainId = "osmo-test-4";
const wallets = [
new KeplrWalletAdapter({
endpoint,
chainId,
options: {
gasPrice: GasPrice.fromString("0.015uosmo"),
},
}),
];
return (
<QueryClientProvider client={queryClient}>
<WizardProvider endpoint={endpoint} wallets={wallets} chainId={chainId}>
<Component />
</WizardProvider>
</QueryClientProvider>
);
}Add the WalletButton component to let people connect their wallet.
import { WalletButton } from "@wizard-ui/react";
function Navbar() {
return (
<div>
<h1>Cosmos Web App</h1>
<WalletButton />
</div>
);
}Finally, use hooks! Let's check balance of the current wallet.
import { useBalance, useAddress } from "@wizard-ui/react";
function Profile() {
const { address, connected } = useWallet();
if (!connected) {
return <div>Not connected</div>;
}
return <div>Connected to {address}</div>;
}