|
| 1 | +TITLE: Using the useChain hook (React) |
| 2 | +DESCRIPTION: The `useChain` hook provides access to chain-specific data, including the chain object, asset list, wallet details, and the user's address for the specified chain name. This example demonstrates how to call the hook and log the retrieved information. |
| 3 | +SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/react/README.md#_snippet_4 |
| 4 | + |
| 5 | +LANGUAGE: js |
| 6 | +CODE: |
| 7 | +``` |
| 8 | +import { useChain } from '@interchain-kit/react'; |
| 9 | + |
| 10 | +const chainName = 'cosmoshub'; |
| 11 | +const { |
| 12 | + chain, // chain info for cosmoshub |
| 13 | + assetList, // assets info for cosmoshub |
| 14 | + address, // address for cosmoshub in keplr-extension wallet, it's string when connected, undefined when disconnected |
| 15 | + wallet, // keplr extension wallet info |
| 16 | + connect, // connect the wallet |
| 17 | + disconnect, // disconnect the wallet |
| 18 | + getRpcEndpoint, // type: const getRpcEndpoint: () => Promise<string | HttpEndpoint> |
| 19 | + getSigningClient, // type: const getSigningClient: () => Promise<SigningClient> |
| 20 | + message, // connection message |
| 21 | + openView // open modal view |
| 22 | +} = useChain(chainName); |
| 23 | +``` |
| 24 | + |
| 25 | +---------------------------------------- |
| 26 | + |
| 27 | +TITLE: Accessing and using wallet methods (React) |
| 28 | +DESCRIPTION: This snippet demonstrates how to obtain the wallet object associated with a specific chain using the `useChain` hook. Once the wallet object is retrieved, you can call its methods, such as signing transactions (`signAmino`) or verifying messages (`verifyArbitrary`), to interact with the connected wallet. |
| 29 | +SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/react/README.md#_snippet_6 |
| 30 | + |
| 31 | +LANGUAGE: js |
| 32 | +CODE: |
| 33 | +``` |
| 34 | +const { wallet } = useChain('osmosis') |
| 35 | + |
| 36 | +//use method from wallet that you select |
| 37 | +await wallet.signAmino(chainId, signAddress, stdDoc) |
| 38 | +await wallet.verifyArbitrary(chainId, signAddress, stdDoc) |
| 39 | +``` |
| 40 | + |
| 41 | +---------------------------------------- |
| 42 | + |
| 43 | +TITLE: Setting up ChainProvider with all chains (React) |
| 44 | +DESCRIPTION: This snippet shows an alternative configuration for `ChainProvider` where all mainnet chains and asset lists are imported from `@chain-registry/v2/mainnet`. This simplifies setup if your application needs to interact with a wide range of chains supported by the registry. |
| 45 | +SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/react/README.md#_snippet_3 |
| 46 | + |
| 47 | +LANGUAGE: js |
| 48 | +CODE: |
| 49 | +``` |
| 50 | +import { ChainProvider, useChain } from "@interchain-kit/react"; |
| 51 | +import { keplrWallet } from "@interchain-kit/keplr-extension"; |
| 52 | +import { ThemeProvider } from "@interchain-ui/react"; |
| 53 | +import { chains, assetLists } from '@chain-registry/v2/mainnet'; |
| 54 | + |
| 55 | +import "@interchain-ui/react/styles"; |
| 56 | + |
| 57 | +const Show = () => { |
| 58 | + const {address} = useChain('osmosis'); |
| 59 | + // will show cosmoshub address from what you selected wallet in modal |
| 60 | + return <div>{address}</div>; |
| 61 | +}; |
| 62 | + |
| 63 | +function App() { |
| 64 | + return ( |
| 65 | + <ThemeProvider> |
| 66 | + <ChainProvider |
| 67 | + chains={chains} |
| 68 | + assetLists={assetLists} |
| 69 | + wallets={[keplrWallet]} |
| 70 | + signerOptions={{}} |
| 71 | + endpointOptions={{}} |
| 72 | + > |
| 73 | + <Show /> |
| 74 | + </ChainProvider> |
| 75 | + </ThemeProvider> |
| 76 | + ); |
| 77 | +} |
| 78 | + |
| 79 | +export default App; |
| 80 | +``` |
| 81 | + |
| 82 | +---------------------------------------- |
| 83 | + |
| 84 | +TITLE: Using Chain Wallet Hooks for Multi-Chain Connections |
| 85 | +DESCRIPTION: Example of using useChainWallet hook to manage wallet connections for source and destination chains in a transfer scenario |
| 86 | + |
| 87 | +LANGUAGE: typescript |
| 88 | +CODE: |
| 89 | +import { useChainWallet } from '@interchain-kit/react'; |
| 90 | + |
| 91 | +// Source chain wallet connection |
| 92 | +const { |
| 93 | + address: sourceAddress, |
| 94 | + connect: connectSourceChain, |
| 95 | + chain: sourceChainInfo, |
| 96 | +} = useChainWallet(sourceChainName, keplrWalletName); |
| 97 | + |
| 98 | +// Destination chain wallet connection |
| 99 | +const { |
| 100 | + address: destAddress, |
| 101 | + connect: connectDestChain, |
| 102 | + chain: destChainInfo, |
| 103 | +} = useChainWallet(destChainName, keplrWalletName); |
| 104 | + |
| 105 | +---------------------------------------- |
| 106 | + |
| 107 | +TITLE: Wallet Manager for Chains And Wallet Management |
| 108 | +DESCRIPTION: Example of using useWalletManager hook to manage chains and wallet |
| 109 | + |
| 110 | +LANGUAGE: typescript |
| 111 | +CODE: |
| 112 | +import { useWalletManager } from '@interchain-kit/react'; |
| 113 | + |
| 114 | +const { |
| 115 | + getChainLogoUrl, // type: const getChainLogoUrl: (chainName: ChainName) => string |
| 116 | + chains, // all current chains in interchain kit context |
| 117 | + assetLists, // all current assetLists in interchain kit context |
| 118 | + currentChainName, |
| 119 | + currentWalletName, |
| 120 | + addChains, // add new chains to interchain kit context, type: const addChains: (chains: Chain[], assetLists: AssetList[], signerOptions?: SignerOptions, endpointOptions?: EndpointOptions) => Promise<void> |
| 121 | +} = useWalletManager(); |
| 122 | + |
| 123 | +---------------------------------------- |
| 124 | + |
| 125 | +TITLE: Configuring Multiple Wallet Extensions with Interchain Kit |
| 126 | +DESCRIPTION: Example of setting up multiple wallet extensions (Keplr and Leap) using interchain-kit's extension modules |
| 127 | + |
| 128 | +LANGUAGE: typescript |
| 129 | +CODE: |
| 130 | +import { keplrExtensionInfo } from '@interchain-kit/keplr-extension'; |
| 131 | +import { keplrWallet } from '@interchain-kit/keplr-extension'; |
| 132 | +import { leapWallet } from '@interchain-kit/leap-extension'; |
| 133 | + |
| 134 | +// Export Keplr wallet name for reference |
| 135 | +export const keplrWalletName = keplrExtensionInfo.name; |
| 136 | +// Configure multiple supported wallets |
| 137 | +export const wallets = [keplrWallet, leapWallet]; |
0 commit comments