Movatterモバイル変換

graz-sh/grazPublic

NotificationsYou must be signed in to change notification settings
Fork34
Star112

React hooks for Cosmos 🪐

graz.sh/

License

MIT license

112 stars 34 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 761 Commits
.github		.github
.vscode		.vscode
docs		docs
example		example
packages/graz		packages/graz
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
banner.png		banner.png
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Repository files navigation

graz is a collection of React hooks containing everything you need to start working with theCosmos ecosystem.

Features

🪝 20+ hooks for interfacing with wallets, clients, signers, etc. (connecting, view balances, send tokens, etc.)
💳 Multiple wallet supports (Keplr, Leap, Cosmostation, Vectis, Station, XDefi, Metamask Snap, WalletConnect)
⚙️ Generate mainnet & testnetChainInfo
📚 Built-in caching, request deduplication, and all the good stuff from@tanstack/react-query andzustand
🔄 Auto refresh on wallet and network change
👏 Fully typed and tree-shakeable
...and many more ✨

Requirements

graz requiresreact@>=17 due to usingfunction components and hooks and thenew JSX transform.

Installing

Installgraz usingnpm,yarn, orpnpm:

# using npmnpm install graz# using yarnyarn add graz# using pnpmpnpm add graz

Install peer dependencies

To avoid version mismatch we decided to make these packages as peer dependencies:

# using npmnpm install @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long# using yarnyarn add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long# using pnpmpnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long

Quick start

Wrap your React app with<QueryClientProvider /> and<GrazProvider />, and use availablegraz hooks anywhere:

import{QueryClient,QueryClientProvider}from"@tanstack/react-query";import{GrazProvider}from"graz";constqueryClient=newQueryClient();constcosmoshub:ChainInfo={chainId:"cosmoshub-4",chainName:"Cosmos Hub",//... rest of cosmoshub ChainInfo}functionApp(){return(<QueryClientProviderqueryClient={queryClient}><GrazProvidergrazOptions={{chains:[cosmoshub]}}><Wallet/></GrazProvider></QueryClientProvider>);}

import{mainnetChains,useAccount,useConnect,useDisconnect}from"graz";functionWallet(){const{ connect, status}=useConnect();const{data:account, isConnected}=useAccount();const{ disconnect}=useDisconnect();functionhandleConnect(){returnisConnected ?disconnect() :connect();}return(<div>{account ?`Connected to${account.bech32Address}` :status}<buttononClick={handleConnect}>{isConnected ?"Disconnect" :"Connect"}</button></div>);}