Skip to content

Commit 4df3b9a

Browse files
authored
Merge pull request #56 from hyperweb-io/update/cosmwasm-example
Added cosmwasm example
2 parents f3a3d52 + 8e0004c commit 4df3b9a

24 files changed

+3004
-0
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ coverage
88
packages/**/build
99
packages/**/main
1010
packages/**/module
11+
components/codegen

examples/cosmwasm/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

examples/cosmwasm/.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts
36+
37+
# yarn
38+
yarn.lock

examples/cosmwasm/README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# CosmWasm TypeScript Codegen Example
2+
3+
This example demonstrates how to use CosmWasm Ts-Codegen TypeScript code generation with create-interchain-app. It showcases type-safe interactions with CosmWasm smart contracts using automatically generated TypeScript clients. The demo is mainly for baseCient functionality including query and execute, but you can add or modify to do the test for other clients.
4+
5+
## Features
6+
7+
- 🔗 **Wallet Integration**: Connect to Cosmos wallets using @interchain-kit
8+
- 📝 **Type Safety**: Fully typed contract interactions using generated TypeScript clients
9+
-**Real-time Updates**: Live contract state queries and transaction execution
10+
11+
## Getting Started
12+
13+
### Prerequisites
14+
15+
- Node.js 18+ and npm/yarn
16+
- A Cosmos wallet (Keplr recommended)
17+
- Access to a Cosmos testnet (Stargaze testnet configured by default)
18+
19+
### Installation
20+
21+
1. Navigate to the example:
22+
```bash
23+
cd examples/cosmwasm
24+
```
25+
26+
2. Install dependencies:
27+
```bash
28+
npm install
29+
# or
30+
yarn install
31+
```
32+
33+
3. Start the development server:
34+
```bash
35+
npm run dev
36+
# or
37+
yarn dev
38+
```
39+
40+
4. Open [http://localhost:3000](http://localhost:3000) in your browser
41+
42+
## Code Generation
43+
44+
The TypeScript clients in the `/codegen` directory are automatically generated from CosmWasm contract schemas using `@cosmwasm/ts-codegen`.
45+
46+
## Configuration
47+
48+
### Supported Chains
49+
50+
The example is configured to work with:
51+
- **Osmosis Testnet** (default)
52+
- **Stargaze**
53+
- **Juno**
54+
55+
You can modify the chain configuration in `/config/chains.ts` to add support for additional networks.
56+
57+
### Wallet Support
58+
59+
Supported wallets include:
60+
- **Keplr** (recommended)
61+
- **Leap**
62+
- **MetaMask** (for Ethereum-compatible chains)
63+
64+
Wallet configuration is managed in `/config/wallets.ts`.
65+
66+
## Development
67+
68+
### Adding New Contract Types
69+
70+
1. Add your contract schema to the project
71+
2. Generate TypeScript clients using `@cosmwasm/ts-codegen`
72+
3. Create React components for contract interactions
73+
4. Add the components to the main page
74+
75+
## Troubleshooting
76+
77+
### Common Issues
78+
79+
1. **Wallet Connection Fails**
80+
- Ensure Keplr or another supported wallet is installed
81+
- Check that the wallet supports the selected chain
82+
- Verify network configuration in wallet settings
83+
84+
2. **Contract Queries Fail**
85+
- Verify the contract address is correct
86+
- Ensure the contract exists on the selected network
87+
- Check RPC endpoint connectivity
88+
89+
3. **Transaction Execution Fails**
90+
- Verify sufficient balance for gas fees
91+
- Check message format matches contract expectations
92+
- Ensure proper permissions for contract execution
93+
94+
### Getting Help
95+
96+
- Check the [CosmWasm Ts-Codegen documentation](https://github.com/hyperweb-io/ts-codegen)
97+
- View [Interchainjs documentation](https://github.com/hyperweb-io/interchainjs)
Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/**
2+
* This file was automatically generated by @cosmwasm/[email protected].
3+
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4+
* and run the @cosmwasm/ts-codegen generate command to regenerate this file.
5+
*/
6+
7+
import { ICosmWasmClient, ISigningCosmWasmClient } from "./baseClient";
8+
import { StdFee } from "@interchainjs/types";
9+
import { Addr, Timestamp, Uint64, Uint128, Config, Coin, ConfigResponse, ExecuteMsg, Decimal, InstantiateMsg, InstantiateMsg1, CollectionInfoForRoyaltyInfoResponse, RoyaltyInfoResponse, MintCountResponse, MintPriceResponse, MintableNumTokensResponse, QueryMsg, StartTimeResponse } from "./Minter.types";
10+
export interface MinterReadOnlyInterface {
11+
contractAddress: string;
12+
config: () => Promise<ConfigResponse>;
13+
mintableNumTokens: () => Promise<MintableNumTokensResponse>;
14+
startTime: () => Promise<StartTimeResponse>;
15+
mintPrice: () => Promise<MintPriceResponse>;
16+
mintCount: ({
17+
address
18+
}: {
19+
address: string;
20+
}) => Promise<MintCountResponse>;
21+
}
22+
export class MinterQueryClient implements MinterReadOnlyInterface {
23+
client: ICosmWasmClient;
24+
contractAddress: string;
25+
constructor(client: ICosmWasmClient, contractAddress: string) {
26+
this.client = client;
27+
this.contractAddress = contractAddress;
28+
this.config = this.config.bind(this);
29+
this.mintableNumTokens = this.mintableNumTokens.bind(this);
30+
this.startTime = this.startTime.bind(this);
31+
this.mintPrice = this.mintPrice.bind(this);
32+
this.mintCount = this.mintCount.bind(this);
33+
}
34+
config = async (): Promise<ConfigResponse> => {
35+
return this.client.queryContractSmart(this.contractAddress, {
36+
config: {}
37+
});
38+
};
39+
mintableNumTokens = async (): Promise<MintableNumTokensResponse> => {
40+
return this.client.queryContractSmart(this.contractAddress, {
41+
mintable_num_tokens: {}
42+
});
43+
};
44+
startTime = async (): Promise<StartTimeResponse> => {
45+
return this.client.queryContractSmart(this.contractAddress, {
46+
start_time: {}
47+
});
48+
};
49+
mintPrice = async (): Promise<MintPriceResponse> => {
50+
return this.client.queryContractSmart(this.contractAddress, {
51+
mint_price: {}
52+
});
53+
};
54+
mintCount = async ({
55+
address
56+
}: {
57+
address: string;
58+
}): Promise<MintCountResponse> => {
59+
return this.client.queryContractSmart(this.contractAddress, {
60+
mint_count: {
61+
address
62+
}
63+
});
64+
};
65+
}
66+
export interface MinterInterface extends MinterReadOnlyInterface {
67+
contractAddress: string;
68+
sender: string;
69+
mint: (fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
70+
setWhitelist: ({
71+
whitelist
72+
}: {
73+
whitelist: string;
74+
}, fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
75+
updateStartTime: (fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
76+
updatePerAddressLimit: ({
77+
perAddressLimit
78+
}: {
79+
perAddressLimit: number;
80+
}, fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
81+
mintTo: ({
82+
recipient
83+
}: {
84+
recipient: string;
85+
}, fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
86+
mintFor: ({
87+
recipient,
88+
tokenId
89+
}: {
90+
recipient: string;
91+
tokenId: number;
92+
}, fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
93+
withdraw: (fee_?: number | StdFee | "auto", memo_?: string, funds_?: Coin[]) => Promise<any>;
94+
}
95+
export class MinterClient extends MinterQueryClient implements MinterInterface {
96+
client: ISigningCosmWasmClient;
97+
sender: string;
98+
contractAddress: string;
99+
constructor(client: ISigningCosmWasmClient, sender: string, contractAddress: string) {
100+
super(client, contractAddress);
101+
this.client = client;
102+
this.sender = sender;
103+
this.contractAddress = contractAddress;
104+
this.mint = this.mint.bind(this);
105+
this.setWhitelist = this.setWhitelist.bind(this);
106+
this.updateStartTime = this.updateStartTime.bind(this);
107+
this.updatePerAddressLimit = this.updatePerAddressLimit.bind(this);
108+
this.mintTo = this.mintTo.bind(this);
109+
this.mintFor = this.mintFor.bind(this);
110+
this.withdraw = this.withdraw.bind(this);
111+
}
112+
mint = async (fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
113+
return await this.client.execute(this.sender, this.contractAddress, {
114+
mint: {}
115+
}, fee_, memo_, funds_);
116+
};
117+
setWhitelist = async ({
118+
whitelist
119+
}: {
120+
whitelist: string;
121+
}, fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
122+
return await this.client.execute(this.sender, this.contractAddress, {
123+
set_whitelist: {
124+
whitelist
125+
}
126+
}, fee_, memo_, funds_);
127+
};
128+
updateStartTime = async (fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
129+
return await this.client.execute(this.sender, this.contractAddress, {
130+
update_start_time: {}
131+
}, fee_, memo_, funds_);
132+
};
133+
updatePerAddressLimit = async ({
134+
perAddressLimit
135+
}: {
136+
perAddressLimit: number;
137+
}, fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
138+
return await this.client.execute(this.sender, this.contractAddress, {
139+
update_per_address_limit: {
140+
per_address_limit: perAddressLimit
141+
}
142+
}, fee_, memo_, funds_);
143+
};
144+
mintTo = async ({
145+
recipient
146+
}: {
147+
recipient: string;
148+
}, fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
149+
return await this.client.execute(this.sender, this.contractAddress, {
150+
mint_to: {
151+
recipient
152+
}
153+
}, fee_, memo_, funds_);
154+
};
155+
mintFor = async ({
156+
recipient,
157+
tokenId
158+
}: {
159+
recipient: string;
160+
tokenId: number;
161+
}, fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
162+
return await this.client.execute(this.sender, this.contractAddress, {
163+
mint_for: {
164+
recipient,
165+
token_id: tokenId
166+
}
167+
}, fee_, memo_, funds_);
168+
};
169+
withdraw = async (fee_: number | StdFee | "auto" = "auto", memo_?: string, funds_?: Coin[]): Promise<any> => {
170+
return await this.client.execute(this.sender, this.contractAddress, {
171+
withdraw: {}
172+
}, fee_, memo_, funds_);
173+
};
174+
}

0 commit comments

Comments
 (0)