diff --git a/README.md b/README.md index b152da64..a59212fa 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,8 @@ Generate TypeScript SDKs for your CosmWasm smart contracts

- - + + @@ -17,12 +17,11 @@ Generate TypeScript SDKs for your CosmWasm smart contracts
- - + +

- ``` npm install @cosmwasm/ts-codegen ``` @@ -30,25 +29,26 @@ npm install @cosmwasm/ts-codegen The quickest and easiest way to interact with CosmWasm Contracts. `@cosmwasm/ts-codegen` converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code. 🎥 [Checkout our video playlist](https://cosmology.zone/learn/ts-codegen) to learn how to use `ts-codegen`! + ## Table of contents - [@cosmwasm/ts-codegen](#cosmwasmts-codegen) - [Table of contents](#table-of-contents) - [Usage](#usage) - - [Programmatic Usage](#programmatic-usage) - - [Types](#types) - - [TS Clients](#client) - - [React Query](#react-query) - - [Recoil](#recoil) - - [Message Composer](#message-composer) - - [Message Builder](#message-builder) - - [Use Contracts Hook](#use-contracts-hooks-usage) - - [Bundles](#bundles) - - [CLI Usage and Examples](#cli-usage-and-examples) - - [Advanced Usage](#advanced-usage) + - [Programmatic Usage](#programmatic-usage) + - [Types](#types) + - [TS Clients](#client) + - [React Query](#react-query) + - [Recoil](#recoil) + - [Message Composer](#message-composer) + - [Message Builder](#message-builder) + - [Use Contracts Hook](#use-contracts-hooks-usage) + - [Bundles](#bundles) + - [CLI Usage and Examples](#cli-usage-and-examples) + - [Advanced Usage](#advanced-usage) - [JSON Schema](#json-schema) - - [JSON Schema Generation](#json-schema-generation) - - [Exporting Schemas](#exporting-schemas) + - [JSON Schema Generation](#json-schema-generation) + - [Exporting Schemas](#exporting-schemas) - [Developing](#developing) - [Related](#related) @@ -59,93 +59,93 @@ The quickest and easiest way to interact with CosmWasm Contracts. `@cosmwasm/ts- For production usage, we recommend setting up a build script that uses the main entry point: ```ts -import codegen from '@cosmwasm/ts-codegen'; +import codegen from "@cosmwasm/ts-codegen"; codegen({ contracts: [ { - name: 'SG721', - dir: './path/to/sg721/schema' + name: "SG721", + dir: "./path/to/sg721/schema", }, { - name: 'Minter', - dir: './path/to/Minter/schema' - } + name: "Minter", + dir: "./path/to/Minter/schema", + }, ], - outPath: './path/to/code/src/', + outPath: "./path/to/code/src/", // options are completely optional ;) options: { bundle: { - bundleFile: 'index.ts', - scope: 'contracts' + bundleFile: "index.ts", + scope: "contracts", }, types: { - enabled: true + enabled: true, }, client: { - enabled: true + enabled: true, }, reactQuery: { enabled: true, optionalClient: true, - version: 'v4', + version: "v4", mutations: true, queryKeys: true, queryFactory: true, }, recoil: { - enabled: false + enabled: false, }, messageComposer: { - enabled: false + enabled: false, }, messageBuilder: { - enabled: false + enabled: false, }, useContractsHook: { - enabled: false - } - } + enabled: false, + }, + }, }).then(() => { - console.log('✨ all done!'); + console.log("✨ all done!"); }); ``` + #### Types Typescript types and interfaces are generated in separate files so they can be imported into various generated plugins. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.types.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.types.ts) #### Types Options -| option | description | -| ------------------------ | ---------------------------------------------------- | -| `types.enabled` | enable type generation | -| `types.aliasExecuteMsg` | generate a type alias based on the contract name | -| `types.aliasEntryPoints` | generate type aliases for the entry points based on the contract name | +| option | description | +| ------------------------ | --------------------------------------------------------------------- | +| `types.enabled` | enable type generation | +| `types.aliasExecuteMsg` | generate a type alias based on the contract name | +| `types.aliasEntryPoints` | generate type aliases for the entry points based on the contract name | ### Client The `client` plugin will generate TS client classes for your contracts. This option generates a `QueryClient` for queries as well as a `Client` for queries and mutations. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.client.ts ) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.client.ts) #### Client Options -| option | description | -| --------------------------------------- | --------------------------------------------------- | -| `client.enabled` | generate TS client classes for your contracts | -| `client.execExtendsQuery` | execute should extend query message clients | -| `client.noImplicitOverride` | should match your tsconfig noImplicitOverride option | -| `client.useDeclareKeyword` | use declare keyword for inherited class fields | - +| option | description | +| --------------------------- | ---------------------------------------------------- | +| `client.enabled` | generate TS client classes for your contracts | +| `client.execExtendsQuery` | execute should extend query message clients | +| `client.noImplicitOverride` | should match your tsconfig noImplicitOverride option | +| `client.useDeclareKeyword` | use declare keyword for inherited class fields | ### React Query Generate [react-query v3](https://react-query-v3.tanstack.com/) or [react-query v4](https://tanstack.com/query/v4/) bindings for your contracts with the `react-query` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.react-query.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.react-query.ts) #### React Query Options @@ -159,72 +159,66 @@ Generate [react-query v3](https://react-query-v3.tanstack.com/) or [react-query | `reactQuery.mutations` | also generate mutations | | `reactQuery.camelize` | use camelCase style for property names | - ### Recoil Generate [recoil](https://recoiljs.org/) bindings for your contracts with the `recoil` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.recoil.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.recoil.ts) #### Recoil Options -| option | description | -| ------------------------------ | ------------------------------------------------------------------- | -| `recoil.enabled` | enable the recoil plugin | +| option | description | +| ---------------- | ------------------------ | +| `recoil.enabled` | enable the recoil plugin | ### Message Composer Generate pure message objects with the proper `utf8` encoding and `typeUrl` configured that you can broadcast yourself via `cosmjs` with the `message-composer` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.message-composer.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.message-composer.ts) #### Message Composer Options -| option | description | -| ------------------------------ | ------------------------------------------------------------------- | -| `messageComposer.enabled` | enable the messageComposer plugin | +| option | description | +| ------------------------- | --------------------------------- | +| `messageComposer.enabled` | enable the messageComposer plugin | ### Message Builder Generate raw message jsons for use in your application with the `message-builder` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.message-builder.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.message-builder.ts) #### Message Builder Options -| option | description | -|------------------------- | ---------------------------------- | -| `messageBuilder.enabled` | enable the messageBuilder plugin | - +| option | description | +| ------------------------ | -------------------------------- | +| `messageBuilder.enabled` | enable the messageBuilder plugin | ### `useContracts` Hook Generates `useContracts` hook to easily access contracts, already equipped with a signing client -| option | description | -| -------------------------------- | --------------------------------------- | -| `useContractsHook.enabled` | enable the `useContracts` plugin | +| option | description | +| -------------------------- | -------------------------------- | +| `useContractsHook.enabled` | enable the `useContracts` plugin | #### Example Output -- [Provider](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/Factory.provider.ts) -- [Contract Providers](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextProviders.ts) -- [Contract Context](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contracts-context.tsx) -- [Context Base](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextBase.ts) +- [Provider](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/Factory.provider.ts) +- [Contract Providers](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextProviders.ts) +- [Contract Context](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contracts-context.tsx) +- [Context Base](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextBase.ts) #### Use Contracts Provider Usage ```tsx -import { useChain } from '@cosmos-kit/react'; -import { ContractsProvider } from '../path/to/codegen/contracts-context'; +import { useChain } from "@cosmos-kit/react"; +import { ContractsProvider } from "../path/to/codegen/contracts-context"; export default function YourComponent() { - - const { - address, - getCosmWasmClient, - getSigningCosmWasmClient - } = useChain(chainName); + const { address, getCosmWasmClient, getSigningCosmWasmClient } = + useChain(chainName); return ( - + - ) -}; + ); +} ``` #### Use Contracts Provider Babel/TSC config @@ -245,11 +239,7 @@ export default function YourComponent() { If you're using Babel, please make sure include `'@babel/preset-react'` in devDeps and presets in `.babelrc.js`: ```js - presets: [ - '@babel/typescript', - '@babel/env', - '@babel/preset-react', - ] +presets: ["@babel/typescript", "@babel/env", "@babel/preset-react"]; ``` For `tsc`, you should set the `jsx` option to `'react'` in your `tsconfig.json`. @@ -279,26 +269,24 @@ await marketplaceClient.updateAskPrice({ The bundler will make a nice package of all your contracts. For example: ```ts -const { - MinterQueryClient, - useMinterConfigQuery -} = contracts.Minter; +const { MinterQueryClient, useMinterConfigQuery } = contracts.Minter; const { CwAdminFactoryClient } = contracts.CwAdminFactory; ``` + #### Bundler Options -| option | description | -| --------------------- | -------------------------------------------------------------------------------- | -| `bundle.enabled` | enable the bundler plugin | -| `bundle.scope` | name of the scope, defaults to `contracts` (you can use `.` to make more scopes) | -| `bundle.bundleFile` | name of the bundle file | +| option | description | +| ------------------- | -------------------------------------------------------------------------------- | +| `bundle.enabled` | enable the bundler plugin | +| `bundle.scope` | name of the scope, defaults to `contracts` (you can use `.` to make more scopes) | +| `bundle.bundleFile` | name of the bundle file | #### Coding Style -| option | description | default | -| --------------------- | ------------------------------------ | ------- | -| `useShorthandCtor` | Enable using shorthand constructor. | true | +| option | description | default | +| ------------------ | ----------------------------------- | ------- | +| `useShorthandCtor` | Enable using shorthand constructor. | true | Using shorthand constructor (Might not be transpiled correctly with babel): @@ -386,9 +374,10 @@ cosmwasm-ts-codegen generate ◯ recoil ◯ react-query ◯ message-composer - ``` +``` In this example, you can press space bar to select a number of plugins you wish you enable. + #### Specifying Plugins Additionally, it will also show you the name of the field (in this case `plugin`) so you can specify the parameter (for example when using CI/CD) on the comand line. Here is an exampl with `--plugin` set to `client` via CLI: @@ -399,7 +388,7 @@ ts-codegen generate \ --schema ./schema \ --out ./ts \ --name MyContractName - ``` +``` You can specify multiple `--plugin` options using the `generate` command: @@ -465,7 +454,6 @@ ts-codegen generate \ --name MyContractName ``` - #### React Query via CLI Here is an example without optional client, using v3 for `react-query`, without mutations: @@ -528,6 +516,7 @@ ts-codegen generate \ ### JSON Schema We generate code from the [JSON Schema](https://json-schema.org/) exported from CosmWasm smart contracts. + ### JSON Schema Generation Currently you have to have the JSON Schema output. Here is an example to start. @@ -546,7 +535,9 @@ now build the schema with `cargo schema` cd contracts/sg721/ cargo schema ``` + ### Exporting Schemas + #### `cosmwasm v1.1` Example Using the new `write_api` method, you can export schemas: @@ -608,23 +599,23 @@ yarn test:watch ### Working with ASTs -See the [docs](https://github.com/CosmWasm/ts-codegen/blob/main/packages/ast/README.md) in the `@cosmwasm/ts-codegen-ast` package. +See the [docs](https://github.com/hyperweb-io/ts-codegen/blob/main/packages/ast/README.md) in the `@cosmwasm/ts-codegen-ast` package. -## Interchain JavaScript Stack +## Interchain JavaScript Stack A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️ -| Category | Tools | Description | -|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------| -| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | -| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | -| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | -| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | -| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | -| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | -| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | -| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | -| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | +| Category | Tools | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | +| **Wallet Connectors** | [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | +| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | +| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | +| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | +| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | +| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | +| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | +| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/hyperweb-io/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | ## Credits diff --git a/docs/index.mdx b/docs/index.mdx index cfbebb87..c08bb6f0 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -23,11 +23,11 @@ Generate TypeScript SDKs for your CosmWasm smart contracts > { - return t.exportNamedDeclaration( - t.tsInterfaceDeclaration( - t.identifier('InstantiateMsg'), - null, - [], - t.tsInterfaceBody([ - // ... more code ... - ]) - ) - ); + return t.exportNamedDeclaration( + t.tsInterfaceDeclaration( + t.identifier("InstantiateMsg"), + null, + [], + t.tsInterfaceBody([ + // ... more code ... + ]) + ) + ); }; ``` -## Interchain JavaScript Stack +## Interchain JavaScript Stack A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️ -| Category | Tools | Description | -|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------| -| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | -| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | -| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | -| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | -| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | -| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | -| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | -| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | -| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | +| Category | Tools | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | +| **Wallet Connectors** | [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | +| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | +| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | +| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | +| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | +| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | +| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | +| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/hyperweb-io/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | ## Credits diff --git a/packages/ast/package.json b/packages/ast/package.json index 28d074dc..24a9bb36 100644 --- a/packages/ast/package.json +++ b/packages/ast/package.json @@ -3,7 +3,7 @@ "version": "1.8.1", "description": "CosmWasm TypeScript AST generation", "author": "Dan Lynch ", - "homepage": "https://github.com/cosmwasm/ts-codegen/tree/master/packages/ast#readme", + "homepage": "https://github.com/hyperweb-io/ts-codegen/tree/master/packages/ast#readme", "license": "SEE LICENSE IN LICENSE", "main": "index.js", "module": "esm/index.js", @@ -27,11 +27,11 @@ }, "repository": { "type": "git", - "url": "https://github.com/cosmwasm/ts-codegen" + "url": "https://github.com/hyperweb-io/ts-codegen" }, "keywords": [], "bugs": { - "url": "https://github.com/cosmwasm/ts-codegen/issues" + "url": "https://github.com/hyperweb-io/ts-codegen/issues" }, "dependencies": { "@babel/types": "7.24.0", diff --git a/packages/ts-codegen/README.md b/packages/ts-codegen/README.md index b152da64..a59212fa 100644 --- a/packages/ts-codegen/README.md +++ b/packages/ts-codegen/README.md @@ -7,8 +7,8 @@ Generate TypeScript SDKs for your CosmWasm smart contracts

- - + + @@ -17,12 +17,11 @@ Generate TypeScript SDKs for your CosmWasm smart contracts
- - + +

- ``` npm install @cosmwasm/ts-codegen ``` @@ -30,25 +29,26 @@ npm install @cosmwasm/ts-codegen The quickest and easiest way to interact with CosmWasm Contracts. `@cosmwasm/ts-codegen` converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code. 🎥 [Checkout our video playlist](https://cosmology.zone/learn/ts-codegen) to learn how to use `ts-codegen`! + ## Table of contents - [@cosmwasm/ts-codegen](#cosmwasmts-codegen) - [Table of contents](#table-of-contents) - [Usage](#usage) - - [Programmatic Usage](#programmatic-usage) - - [Types](#types) - - [TS Clients](#client) - - [React Query](#react-query) - - [Recoil](#recoil) - - [Message Composer](#message-composer) - - [Message Builder](#message-builder) - - [Use Contracts Hook](#use-contracts-hooks-usage) - - [Bundles](#bundles) - - [CLI Usage and Examples](#cli-usage-and-examples) - - [Advanced Usage](#advanced-usage) + - [Programmatic Usage](#programmatic-usage) + - [Types](#types) + - [TS Clients](#client) + - [React Query](#react-query) + - [Recoil](#recoil) + - [Message Composer](#message-composer) + - [Message Builder](#message-builder) + - [Use Contracts Hook](#use-contracts-hooks-usage) + - [Bundles](#bundles) + - [CLI Usage and Examples](#cli-usage-and-examples) + - [Advanced Usage](#advanced-usage) - [JSON Schema](#json-schema) - - [JSON Schema Generation](#json-schema-generation) - - [Exporting Schemas](#exporting-schemas) + - [JSON Schema Generation](#json-schema-generation) + - [Exporting Schemas](#exporting-schemas) - [Developing](#developing) - [Related](#related) @@ -59,93 +59,93 @@ The quickest and easiest way to interact with CosmWasm Contracts. `@cosmwasm/ts- For production usage, we recommend setting up a build script that uses the main entry point: ```ts -import codegen from '@cosmwasm/ts-codegen'; +import codegen from "@cosmwasm/ts-codegen"; codegen({ contracts: [ { - name: 'SG721', - dir: './path/to/sg721/schema' + name: "SG721", + dir: "./path/to/sg721/schema", }, { - name: 'Minter', - dir: './path/to/Minter/schema' - } + name: "Minter", + dir: "./path/to/Minter/schema", + }, ], - outPath: './path/to/code/src/', + outPath: "./path/to/code/src/", // options are completely optional ;) options: { bundle: { - bundleFile: 'index.ts', - scope: 'contracts' + bundleFile: "index.ts", + scope: "contracts", }, types: { - enabled: true + enabled: true, }, client: { - enabled: true + enabled: true, }, reactQuery: { enabled: true, optionalClient: true, - version: 'v4', + version: "v4", mutations: true, queryKeys: true, queryFactory: true, }, recoil: { - enabled: false + enabled: false, }, messageComposer: { - enabled: false + enabled: false, }, messageBuilder: { - enabled: false + enabled: false, }, useContractsHook: { - enabled: false - } - } + enabled: false, + }, + }, }).then(() => { - console.log('✨ all done!'); + console.log("✨ all done!"); }); ``` + #### Types Typescript types and interfaces are generated in separate files so they can be imported into various generated plugins. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.types.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.types.ts) #### Types Options -| option | description | -| ------------------------ | ---------------------------------------------------- | -| `types.enabled` | enable type generation | -| `types.aliasExecuteMsg` | generate a type alias based on the contract name | -| `types.aliasEntryPoints` | generate type aliases for the entry points based on the contract name | +| option | description | +| ------------------------ | --------------------------------------------------------------------- | +| `types.enabled` | enable type generation | +| `types.aliasExecuteMsg` | generate a type alias based on the contract name | +| `types.aliasEntryPoints` | generate type aliases for the entry points based on the contract name | ### Client The `client` plugin will generate TS client classes for your contracts. This option generates a `QueryClient` for queries as well as a `Client` for queries and mutations. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.client.ts ) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.client.ts) #### Client Options -| option | description | -| --------------------------------------- | --------------------------------------------------- | -| `client.enabled` | generate TS client classes for your contracts | -| `client.execExtendsQuery` | execute should extend query message clients | -| `client.noImplicitOverride` | should match your tsconfig noImplicitOverride option | -| `client.useDeclareKeyword` | use declare keyword for inherited class fields | - +| option | description | +| --------------------------- | ---------------------------------------------------- | +| `client.enabled` | generate TS client classes for your contracts | +| `client.execExtendsQuery` | execute should extend query message clients | +| `client.noImplicitOverride` | should match your tsconfig noImplicitOverride option | +| `client.useDeclareKeyword` | use declare keyword for inherited class fields | ### React Query Generate [react-query v3](https://react-query-v3.tanstack.com/) or [react-query v4](https://tanstack.com/query/v4/) bindings for your contracts with the `react-query` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.react-query.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.react-query.ts) #### React Query Options @@ -159,72 +159,66 @@ Generate [react-query v3](https://react-query-v3.tanstack.com/) or [react-query | `reactQuery.mutations` | also generate mutations | | `reactQuery.camelize` | use camelCase style for property names | - ### Recoil Generate [recoil](https://recoiljs.org/) bindings for your contracts with the `recoil` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.recoil.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.recoil.ts) #### Recoil Options -| option | description | -| ------------------------------ | ------------------------------------------------------------------- | -| `recoil.enabled` | enable the recoil plugin | +| option | description | +| ---------------- | ------------------------ | +| `recoil.enabled` | enable the recoil plugin | ### Message Composer Generate pure message objects with the proper `utf8` encoding and `typeUrl` configured that you can broadcast yourself via `cosmjs` with the `message-composer` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.message-composer.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.message-composer.ts) #### Message Composer Options -| option | description | -| ------------------------------ | ------------------------------------------------------------------- | -| `messageComposer.enabled` | enable the messageComposer plugin | +| option | description | +| ------------------------- | --------------------------------- | +| `messageComposer.enabled` | enable the messageComposer plugin | ### Message Builder Generate raw message jsons for use in your application with the `message-builder` command. -[see example output code](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/sg721/Sg721.message-builder.ts) +[see example output code](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/sg721/Sg721.message-builder.ts) #### Message Builder Options -| option | description | -|------------------------- | ---------------------------------- | -| `messageBuilder.enabled` | enable the messageBuilder plugin | - +| option | description | +| ------------------------ | -------------------------------- | +| `messageBuilder.enabled` | enable the messageBuilder plugin | ### `useContracts` Hook Generates `useContracts` hook to easily access contracts, already equipped with a signing client -| option | description | -| -------------------------------- | --------------------------------------- | -| `useContractsHook.enabled` | enable the `useContracts` plugin | +| option | description | +| -------------------------- | -------------------------------- | +| `useContractsHook.enabled` | enable the `useContracts` plugin | #### Example Output -- [Provider](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/Factory.provider.ts) -- [Contract Providers](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextProviders.ts) -- [Contract Context](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contracts-context.tsx) -- [Context Base](https://github.com/CosmWasm/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextBase.ts) +- [Provider](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/Factory.provider.ts) +- [Contract Providers](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextProviders.ts) +- [Contract Context](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contracts-context.tsx) +- [Context Base](https://github.com/hyperweb-io/ts-codegen/blob/main/__output__/builder/bundler_test/contracts/contractContextBase.ts) #### Use Contracts Provider Usage ```tsx -import { useChain } from '@cosmos-kit/react'; -import { ContractsProvider } from '../path/to/codegen/contracts-context'; +import { useChain } from "@cosmos-kit/react"; +import { ContractsProvider } from "../path/to/codegen/contracts-context"; export default function YourComponent() { - - const { - address, - getCosmWasmClient, - getSigningCosmWasmClient - } = useChain(chainName); + const { address, getCosmWasmClient, getSigningCosmWasmClient } = + useChain(chainName); return ( - + - ) -}; + ); +} ``` #### Use Contracts Provider Babel/TSC config @@ -245,11 +239,7 @@ export default function YourComponent() { If you're using Babel, please make sure include `'@babel/preset-react'` in devDeps and presets in `.babelrc.js`: ```js - presets: [ - '@babel/typescript', - '@babel/env', - '@babel/preset-react', - ] +presets: ["@babel/typescript", "@babel/env", "@babel/preset-react"]; ``` For `tsc`, you should set the `jsx` option to `'react'` in your `tsconfig.json`. @@ -279,26 +269,24 @@ await marketplaceClient.updateAskPrice({ The bundler will make a nice package of all your contracts. For example: ```ts -const { - MinterQueryClient, - useMinterConfigQuery -} = contracts.Minter; +const { MinterQueryClient, useMinterConfigQuery } = contracts.Minter; const { CwAdminFactoryClient } = contracts.CwAdminFactory; ``` + #### Bundler Options -| option | description | -| --------------------- | -------------------------------------------------------------------------------- | -| `bundle.enabled` | enable the bundler plugin | -| `bundle.scope` | name of the scope, defaults to `contracts` (you can use `.` to make more scopes) | -| `bundle.bundleFile` | name of the bundle file | +| option | description | +| ------------------- | -------------------------------------------------------------------------------- | +| `bundle.enabled` | enable the bundler plugin | +| `bundle.scope` | name of the scope, defaults to `contracts` (you can use `.` to make more scopes) | +| `bundle.bundleFile` | name of the bundle file | #### Coding Style -| option | description | default | -| --------------------- | ------------------------------------ | ------- | -| `useShorthandCtor` | Enable using shorthand constructor. | true | +| option | description | default | +| ------------------ | ----------------------------------- | ------- | +| `useShorthandCtor` | Enable using shorthand constructor. | true | Using shorthand constructor (Might not be transpiled correctly with babel): @@ -386,9 +374,10 @@ cosmwasm-ts-codegen generate ◯ recoil ◯ react-query ◯ message-composer - ``` +``` In this example, you can press space bar to select a number of plugins you wish you enable. + #### Specifying Plugins Additionally, it will also show you the name of the field (in this case `plugin`) so you can specify the parameter (for example when using CI/CD) on the comand line. Here is an exampl with `--plugin` set to `client` via CLI: @@ -399,7 +388,7 @@ ts-codegen generate \ --schema ./schema \ --out ./ts \ --name MyContractName - ``` +``` You can specify multiple `--plugin` options using the `generate` command: @@ -465,7 +454,6 @@ ts-codegen generate \ --name MyContractName ``` - #### React Query via CLI Here is an example without optional client, using v3 for `react-query`, without mutations: @@ -528,6 +516,7 @@ ts-codegen generate \ ### JSON Schema We generate code from the [JSON Schema](https://json-schema.org/) exported from CosmWasm smart contracts. + ### JSON Schema Generation Currently you have to have the JSON Schema output. Here is an example to start. @@ -546,7 +535,9 @@ now build the schema with `cargo schema` cd contracts/sg721/ cargo schema ``` + ### Exporting Schemas + #### `cosmwasm v1.1` Example Using the new `write_api` method, you can export schemas: @@ -608,23 +599,23 @@ yarn test:watch ### Working with ASTs -See the [docs](https://github.com/CosmWasm/ts-codegen/blob/main/packages/ast/README.md) in the `@cosmwasm/ts-codegen-ast` package. +See the [docs](https://github.com/hyperweb-io/ts-codegen/blob/main/packages/ast/README.md) in the `@cosmwasm/ts-codegen-ast` package. -## Interchain JavaScript Stack +## Interchain JavaScript Stack A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️ -| Category | Tools | Description | -|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------| -| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | -| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | -| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | -| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | -| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | -| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | -| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | -| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | -| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | +| Category | Tools | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | +| **Wallet Connectors** | [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | +| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | +| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | +| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | +| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | +| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | +| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | +| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/hyperweb-io/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | ## Credits diff --git a/packages/ts-codegen/package.json b/packages/ts-codegen/package.json index e80ec591..7a4d26da 100644 --- a/packages/ts-codegen/package.json +++ b/packages/ts-codegen/package.json @@ -3,7 +3,7 @@ "version": "1.12.1", "description": "@cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code.", "author": "Dan Lynch ", - "homepage": "https://github.com/cosmwasm/ts-codegen", + "homepage": "https://github.com/hyperweb-io/ts-codegen", "license": "SEE LICENSE IN LICENSE", "main": "index.js", "module": "esm/index.js", @@ -30,10 +30,10 @@ }, "repository": { "type": "git", - "url": "https://github.com/cosmwasm/ts-codegen" + "url": "https://github.com/hyperweb-io/ts-codegen" }, "bugs": { - "url": "https://github.com/cosmwasm/ts-codegen/issues" + "url": "https://github.com/hyperweb-io/ts-codegen/issues" }, "devDependencies": { "@cosmjs/cosmwasm-stargate": "0.32.3", diff --git a/packages/types/README.md b/packages/types/README.md index 57978cd5..e0646087 100644 --- a/packages/types/README.md +++ b/packages/types/README.md @@ -1,22 +1,22 @@ # @cosmwasm/ts-codegen-types -Types for [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) +Types for [@cosmwasm/ts-codegen](https://github.com/hyperweb-io/ts-codegen) -## Interchain JavaScript Stack +## Interchain JavaScript Stack A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️ -| Category | Tools | Description | -|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------| -| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | -| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | -| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | -| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | -| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | -| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | -| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | -| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | -| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | +| Category | Tools | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Chain Information** | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. | +| **Wallet Connectors** | [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)beta, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. | +| **Signing Clients** | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)beta, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network | +| **SDK Clients** | [**Telescope**](https://github.com/hyperweb-io/telescope) | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. | +| **Starter Kits** | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)beta, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. | +| **UI Kits** | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui) | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. | +| **Testing Frameworks** | [**Starship**](https://github.com/hyperweb-io/starship) | Unified Testing and Development for the Interchain. | +| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app) | Build and deploy full-stack blockchain applications with TypeScript | +| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/hyperweb-io/ts-codegen) | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. | ## Credits diff --git a/packages/types/package.json b/packages/types/package.json index b7d2b108..e376f5ae 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -3,7 +3,7 @@ "version": "1.3.1", "description": "CosmWasm TSCodegen Types", "author": "Dan Lynch ", - "homepage": "https://github.com/cosmwasm/ts-codegen/tree/master/packages/types#readme", + "homepage": "https://github.com/hyperweb-io/ts-codegen/tree/master/packages/types#readme", "license": "SEE LICENSE IN LICENSE", "main": "index.js", "module": "esm/index.js", @@ -23,10 +23,10 @@ }, "repository": { "type": "git", - "url": "https://github.com/cosmwasm/ts-codegen" + "url": "https://github.com/hyperweb-io/ts-codegen" }, "keywords": [], "bugs": { - "url": "https://github.com/cosmwasm/ts-codegen/issues" + "url": "https://github.com/hyperweb-io/ts-codegen/issues" } }