Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork35
graz-sh/graz
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
graz
is a collection of React hooks containing everything you need to start working with theCosmos ecosystem.
- 🪝 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 & testnet
ChainInfo
- 📚 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 ✨
graz
requiresreact@>=17
due to usingfunction components and hooks and thenew JSX transform.
Installgraz
usingnpm,yarn, orpnpm:
# using npmnpm install graz# using yarnyarn add graz# using pnpmpnpm add graz
To avoid version missmatch we dcided to make these packages as peer dependencies
# using npmnpm install @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @cosmjs/stargate @cosmjs/encoding# using yarnyarn add @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @cosmjs/stargate @cosmjs/encoding# using pnpmpnpm add @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @cosmjs/stargate @cosmjs/encoding
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>);}
- Next.js + Multi chain:https://graz.sh/examples/starter (source code)
- Next.js + Chakra UI:https://graz.sh/examples/next (source code)
- Vite:https://graz.sh/examples/vite (source code)
You can read more about available hooks and exports onDocumentation Site or viapaka.dev.
- Nur Fikri/Kiki (@codingki)
- Joshua Nataniel M (@joshuanatanielnm)
About
React hooks for Cosmos 🪐
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.