Skip to content

Commit 83d1950

Browse files
committed
feat: add useInterchainKit tool
1 parent 2ff1829 commit 83d1950

File tree

6 files changed

+775
-0
lines changed

6 files changed

+775
-0
lines changed

src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { registerUseInterchainjsTool } from './interchainjs/tools/use-interchain
1111
import { registerStarshipConfigGenTool } from './starship/tools/starship-config-gen.js';
1212
import { registerStarshipSetupTool } from './starship/tools/starship-setup.js';
1313
import { registerUseChainRegistryTool } from './chain-registry/tools/use-chain-registry.js';
14+
import { registerUseInterchainKitTool } from './interchain-kit/tools/use-interchain-kit.js';
1415

1516
// Get package.json version
1617
const __filename = fileURLToPath(import.meta.url);
@@ -37,6 +38,9 @@ async function main() {
3738
// Chain Registry
3839
registerUseChainRegistryTool(server);
3940

41+
// Interchain Kit
42+
registerUseInterchainKitTool(server);
43+
4044
const transport = new StdioServerTransport();
4145
await server.connect(transport);
4246
console.log('Hyperweb Agentic Tools MCP server started on stdio');
Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
TITLE: Signing and Sending Transactions with WalletManager TypeScript
2+
DESCRIPTION: This example illustrates how to get a signing client from the WalletManager and use it to sign and broadcast a bank send transaction. It fetches account and signing client details, constructs a send message and fee, and then uses `interchainjs`'s `createSend` function to initiate the transaction signing process via the connected wallet. Requires `@interchain-kit/core`, `@chain-registry` data, a wallet connector, and `interchainjs`.
3+
SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/core/README.md#_snippet_3
4+
5+
LANGUAGE: typescript
6+
CODE:
7+
```
8+
import { chain as osmosisChain, assetList as osmosisAssetList } from '@chain-registry/v2/mainnet/osmosis';
9+
import { WalletManager } from '@interchain-kit/core';
10+
import { keplrWallet } from '@interchain-kit/keplr-extension';
11+
import { createSend } from "interchainjs/cosmos/bank/v1beta1/tx.rpc.func";
12+
13+
const walletManager = await WalletManager.create(
14+
[osmosisChain],
15+
[osmosisAssetList],
16+
[keplrWallet])
17+
18+
const signingClient = await walletManager.getSigningClient(keplrWallet.info?.name as string, osmosisChain.chainName)
19+
const account = await walletManager.getAccount(keplrWallet.info?.name as string, osmosisChain.chainName)
20+
const txSend = createSend(signingClient);
21+
22+
const denom = osmosisChain.staking?.stakingTokens[0].denom as string
23+
24+
const fromAddress = account.address
25+
26+
const fee = {
27+
amount: [{
28+
denom,
29+
amount: '25000'
30+
}],
31+
gas: "1000000",
32+
};
33+
34+
const message = {
35+
fromAddress: fromAddress,
36+
toAddress: 'osmo10m5gpakfe95t5k86q5fhqe03wuev7g3ac2lvcu',
37+
amount: [
38+
{
39+
denom,
40+
amount: '1'
41+
},
42+
],
43+
}
44+
45+
const memo = "test"
46+
47+
await txSend(
48+
fromAddress,
49+
message,
50+
fee,
51+
memo
52+
)
53+
54+
// pop up confirm modal from wallet to start signing process
55+
```
56+
57+
----------------------------------------
58+
59+
TITLE: Querying Account Balance with WalletManager TypeScript
60+
DESCRIPTION: This snippet demonstrates querying the balance of a specific staking token for a connected account on a chain (Osmosis). It uses the WalletManager to get the RPC endpoint and account, then utilizes `interchainjs`'s `createGetBalance` function. Requires `@interchain-kit/core`, `@chain-registry` data, a wallet connector, and `interchainjs`.
61+
SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/core/README.md#_snippet_2
62+
63+
LANGUAGE: typescript
64+
CODE:
65+
```
66+
import { chain as osmosisChain, assetList as osmosisAssetList } from '@chain-registry/v2/mainnet/osmosis';
67+
import { WalletManager } from '@interchain-kit/core';
68+
import { keplrWallet } from '@interchain-kit/keplr-extension';
69+
import { createGetBalance } from "interchainjs/cosmos/bank/v1beta1/query.rpc.func";
70+
71+
const walletManager = await WalletManager.create(
72+
[osmosisChain],
73+
[osmosisAssetList],
74+
[keplrWallet])
75+
76+
const account = await walletManager.getAccount(keplrWallet.info?.name as string, osmosisChain.chainName)
77+
const osmosisRpcEndpoint = await walletManager.getRpcEndpoint(keplrWallet.info?.name as string, osmosisChain.chainName)
78+
79+
const balanceQuery = createGetBalance(osmosisRpcEndpoint as string);
80+
const { balance } = await balanceQuery({
81+
address: account.address,
82+
denom: osmosisChain.staking?.stakingTokens[0].denom as string,
83+
});
84+
85+
console.log(balance)
86+
87+
/**
88+
* { amount: '26589633', denom: 'uosmo' }
89+
*/
90+
```
91+
92+
----------------------------------------
93+
94+
TITLE: Retrieving Account Details with WalletManager JavaScript
95+
DESCRIPTION: This code shows how to initialize the WalletManager and then fetch account details (like address) for a specific chain (Osmosis, Cosmoshub) using a connected wallet (Keplr). It depends on `@interchain-kit/core`, `@chain-registry` data, and a wallet connector.
96+
SOURCE: https://github.com/hyperweb-io/interchain-kit/blob/main/packages/core/README.md#_snippet_1
97+
98+
LANGUAGE: javascript
99+
CODE:
100+
```
101+
import osmosis from '@chain-registry/v2/mainnet/osmosis';
102+
import cosmoshub from '@chain-registry/v2/mainnet/cosmoshub'
103+
import { WalletManager } from '@interchain-kit/core';
104+
import { keplrWallet } from '@interchain-kit/keplr-extension';
105+
106+
const walletManager = await WalletManager.create(
107+
[osmosis.chain, cosmoshub.chain],
108+
[osmosis.assetList, cosmoshub.assetList],
109+
[keplrWallet])
110+
111+
// return account of osmosis chain from keplr wallet extension
112+
const account = await walletManager.getAccount(keplrWallet.info?.name as string, osmosis.chain.chainName)
113+
console.log(account)
114+
// return account of cosmoshub chain from keplr wallet extension
115+
const account2 = await walletManager.getAccount(keplrWallet.info?.name as string, cosmoshub.chain.chainName)
116+
console.log(account2)
117+
```
Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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];
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<role>
2+
You are an AI assistant specialized in helping implement Interchain Kit in projects. You will guide and execute through the <instructions> step by step.
3+
</role>
4+
5+
<instructions>
6+
Your task is to help implement Interchain Kit in projects. You will work through them systematically following these steps:
7+
8+
1. Analyze the request to find relevant snippets
9+
2. Apply Interchain Kit code properly
10+
3. Identify any missing dependencies in the code, if there are any, go to step 4, otherwise stop the process
11+
4. Detect the project's package manager (npm, yarn, pnpm)
12+
5. Install ONLY the packages that are directly used in the code
13+
14+
</instructions>
15+
16+
<constraints>
17+
- Just add exactly what's needed to implement the feature.
18+
- Only install the dependencies that are directly used in the code.
19+
</constraints>
20+
21+
<code-snippets>
22+
{{INTERCHAIN_KIT_SNIPPETS}}
23+
</code-snippets>

0 commit comments

Comments
 (0)