Tutorials are designed to be followed in order, as each tutorial builds on the previous one. The tutorial system is built with Web Containers, which means that you can run the code in your browser without having to install anything on your computer.
Prerequisites
- Rabby or Metamask installed in your browser
- A web browser with WASM support (Chrome, Firefox, Edge, Safari)
If you are using Brave, you will need to disable shields for the webcontainers to work.
All examples in this tutorial are targeted to work on Gnosis chain.
Code snippets
All code snippets are in TypeScript, and are executed in a sandboxed environment. You can edit the code and run it again.
Let's look at the current code snippet:
import type { PublicClient, WalletClient } from 'viem'
export async function run(setup: (chainId: SupportedChainId) => Promise<{ publicClient: PublicClient; walletClient: WalletClient }>): Promise<unknown> {
// TODO: Implement
}
Viem Clients
The tutorials allow for the use of a browser's Web3 provider, such as Rabby or Metamask. The tutorial system provides publicClient
and walletClient
from the viem library.
These are automatically injected into the code snippet, and you can use them to interact with the blockchain via your browser's wallet.
Note: This tutorial uses account hoisting, to make the code compact.
You can also use libraries like Wagmi
to connect a wallet an integrate it with CoW SDK, see the Wagmi example.
run
function
Tutorials are very simple plain TypeScript, and the run
function is the entry point for the code snippet. This function is called when you click the "Run" button.
Running the code
Let's finish the code snippet by adding some debugging and returning a value:
import type { PublicClient, WalletClient } from 'viem'
import { SupportedChainId } from '@cowprotocol/cow-sdk';
export async function run(setup: (chainId: SupportedChainId) => Promise<{ publicClient: PublicClient; walletClient: WalletClient }>): Promise<unknown> {
console.log('Hello world!');
const { publicClient, walletClient } = await setup(SupportedChainId.GNOSIS_CHAIN)
// Get the chain ID and connected account
const chainId = await publicClient.getChainId()
const [account] = await walletClient.getAddresses()
return {
message: "Hello world!",
chainId,
account
};
}
Once you click the "Run" button, you should see the following output:
{
"message": "Hello world!",
"chainId": "<your_wallet_chain_id>",
"account": "<your_wallet_account>"
}
You will see that the console output is not visible. To see this, you must open the browser's developer tools (F12) and select the "Console" tab.
import type { PublicClient, WalletClient } from 'viem';
import { SupportedChainId } from '@cowprotocol/cow-sdk';
export async function run(
setup: (chainId: SupportedChainId) => Promise<{ publicClient: PublicClient; walletClient: WalletClient }>
): Promise<unknown> {
const { publicClient, walletClient } = await setup(SupportedChainId.GNOSIS_CHAIN);
// TODO: Implement
return {};
}