diff --git a/sdk/typescript/docs/pages/guides/cosmos-kit.mdx b/sdk/typescript/docs/pages/guides/cosmos-kit.mdx index 7d5fc11291..4697f384c5 100644 --- a/sdk/typescript/docs/pages/guides/cosmos-kit.mdx +++ b/sdk/typescript/docs/pages/guides/cosmos-kit.mdx @@ -7,35 +7,88 @@ Nym, these include: - using the [Ledger hardware wallet](https://docs.cosmoskit.com/integrating-wallets/ledger) from the browser - any wallet that supports [Wallet Connect v2.0](https://docs.cosmoskit.com/integrating-wallets/adding-new-wallets) +```bash +npm install @cosmos-kit/react @cosmos-kit/keplr @cosmos-kit/ledger chain-registry +``` + +You need to polyfill some nodejs modules in order to use keplr and ledger wallets by modifying your vite.config.js: +```bash +npm install @esbuild-plugins/node-globals-polyfill +``` + +```js +// vite.config.js +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' +export default defineConfig({ + plugins: [react()], + optimizeDeps: { + esbuildOptions: { + define: { + global: 'globalThis' + }, + plugins: [ + NodeGlobalsPolyfillPlugin({ + buffer: true + }) + ] + } + } +}) +``` + +Your components have to be wrapped into a [ChainProvider](https://docs.cosmoskit.com/chain-provider), +in order to use the `useChain('nyx')` hook. The nyx chain is provided in the 'chain-registry' NPM package by default. + ```ts import React from 'react'; -import { useChain } from '@cosmos-kit/react'; +import { ChainProvider, useChain } from '@cosmos-kit/react'; import { assets, chains } from 'chain-registry'; -import { wallets } from '@cosmos-kit/keplr'; - -export const MyComponent = () => { - const { wallet, address, connect, getOfflineSignerDirect } = - useChain('nyx'); +import { wallets as ledger } from '@cosmos-kit/ledger'; +import { wallets as keplr } from '@cosmos-kit/keplr'; +function MyComponent() { + const {wallet, address, connect, getOfflineSignerDirect } = + useChain('nyx'); React.useEffect(() => { connect(); }, []); const sign = async () => { - const doc = { ... }; + const doc = {foo: 'bar'}; return getOfflineSignerDirect().signDirect(address, doc); }; return (
- Connected to {wallet.prettyName} + Connected to {wallet?.prettyName}
- Address: {address} + { wallet &&
Address: {address}
}
+
+ ); } -``` +export default function App() { + return ( + c.chain_id === 'nyx')]} + assetLists={[assets.find((a) => a.chain_name === 'nyx')]} + wallets={[...ledger, ...keplr]} + signerOptions={{ + preferredSignType: () => 'amino', + }} + > + + + + + ) +} + +``` diff --git a/sdk/typescript/docs/pages/installation.mdx b/sdk/typescript/docs/pages/installation.mdx index 1ef32dc172..b11ddb64fd 100644 --- a/sdk/typescript/docs/pages/installation.mdx +++ b/sdk/typescript/docs/pages/installation.mdx @@ -11,7 +11,7 @@ The Typescript SDK's different modules allow developers to start building browse #### Install all -``` +```bash npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @nymproject/sdk-full-fat @nymproject/mix-fetch-full-fat --save ``` @@ -29,7 +29,7 @@ In order to query or execute on any of the Nym smart contracts, you'll need to u First install the package and its dependencies from Cosmos Stargate: -``` +```bash npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing --save ``` @@ -45,7 +45,7 @@ In order to send or receive traffic over the mixnet, you'll need to use the [`Mi First install the package and its dependencies: -``` +```bash npm install @nymproject/sdk-full-fat --save ``` @@ -58,7 +58,7 @@ In order to fetch data through mixFetch you'll need to use the [`MixFetch packag First install the package and its dependencies: -``` +```bash npm install @nymproject/mix-fetch-full-fat --save ```