Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ keywords:

# Add Flow Cadence to your wagmi app

This tutorial demonstrates how to enhance your existing wagmi/RainbowKit application with Flow Cadence capabilities. When you integrate the Flow Client Library (FCL) with your EVM stack, you can unlock powerful features like batch transactions with a single signature.
This tutorial demonstrates how to enhance your current wagmi/RainbowKit application with Flow Cadence capabilities. When you integrate the Flow Client Library (FCL) with your EVM stack, you can unlock powerful features like batch transactions with a single signature.

## Video overview

Expand All @@ -42,7 +42,7 @@ This tutorial demonstrates how to enhance your existing wagmi/RainbowKit applica

After you complete this guide, you'll be able to:

- Add FCL to your existing wagmi/RainbowKit application.
- Add FCL to your current wagmi/RainbowKit application.
- Configure FCL to work alongside your EVM wallet connections.
- Implement batch transactions that execute multiple EVM calls in a single Cadence transaction.
- Display both Cadence and EVM addresses in your application.
Expand Down Expand Up @@ -491,12 +491,14 @@ This approach gives you several advantages:

## Conclusion

You've successfully integrated Flow Cadence with your wagmi/rainbowkit application! This integration allows you to leverage the power of Cadence while maintaining the familiar EVM development experience.
You've successfully integrated Flow Cadence with your wagmi/rainbowkit application! This integration allows you to leverage the power of Cadence and maintain the familiar EVM development experience.

## Reference Implementation
## Reference implementation

For a complete reference implementation, check out the [FCL + RainbowKit + wagmi Integration Demo] repository.

<!-- Relative links, will not render on page -->

[Cadence]: https://cadence-lang.org/docs
[Next.js]: https://nextjs.org/docs/app/getting-started/installation
[npm]: https://www.npmjs.com/
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 5

# Interacting with COAs from Cadence

[Cadence Owned Accounts (COAs)](../../build/evm/accounts.md#cadence-owned-accounts) are EVM accounts that a Cadence resouce owns, and are used to interact with Flow EVM from Cadence.
[Cadence Owned Accounts (COAs)] are EVM accounts that a Cadence resouce owns, and are used to interact with Flow EVM from Cadence.

COAs expose two interfaces for interaction: one on the Cadence side and one on the EVM side. In this guide, we focuses on how to interact with COAs with Cadence.

Expand All @@ -16,7 +16,7 @@ In this guide, we will walk through some basic examples that create and and inte

To begin, we can take a look at a simplified version of the `EVM` contract, and highlight parts specific to COAs.

You can learn more about the `EVM` contract [here](../../build/cadence/core-contracts/13-evm.md) and find the full contract code on [GitHub](https://github.com/onflow/flow-go/tree/master/fvm/evm/stdlib/contract.cdc).
You can learn more about the `EVM` contract [here] and find the full contract code on [GitHub].

```cadence EVM.cdc
access(all)
Expand Down Expand Up @@ -81,7 +81,7 @@ contract EVM {

The `CadenceOwnedAccount` resource is a part of the `EVM` system contract, so to use any of these functions, you will need to import the `EVM` contract into your Cadence code.

To import the `EVM` contract into your Cadence code using the simple import syntax, you can use the following format (learn more about configuring contracts in `flow.json` [here](../../build/tools/flow-cli/flow.json/configuration.md#contracts)):
To import the `EVM` contract into your Cadence code with the simple import syntax, you can use the following format (learn more about how to configure contracts in `flow.json` [here]):

```cadence
// This assumes you are working in the in the Flow CLI, FCL, or another tool that supports this syntax
Expand All @@ -98,7 +98,7 @@ import EVM from 0x1234
// ...
```

To find the deployment addresses of the `EVM` contract, you can refer to the [EVM contract documentation](../../build/cadence/core-contracts/13-evm.md).
To find the deployment addresses of the `EVM` contract, you can refer to the [EVM contract documentation].

## Create a COA

Expand Down Expand Up @@ -137,7 +137,7 @@ During the singular transaction in which an account is created, the `AuthAccount

:::

First, you'll need to use the CLI to [generate keys](../../build/tools/flow-cli/keys/generate-keys.md) for the new account. Then, run the following transaction to create the Cadence Account and COA at one time.
First, you'll need to use the CLI to [generate keys] for the new account. Then, run the following transaction to create the Cadence Account and COA at one time.

:::warning

Expand Down Expand Up @@ -168,7 +168,7 @@ transaction(publicKeys: [Crypto.KeyListEntry]) {

## Retrieve the EVM Address of a COA

To get the EVM address of a COA, you can use the `address` function from the `EVM` contract. This function returns the EVM address of the COA as an `EVM.Address` struct. This struct is used to represent addresses within Flow EVM and you cna also use it to query the balance, code, nonce, and so on of an account.
To get the EVM address of a COA, you can use the `address` function from the `EVM` contract. This function returns the EVM address of the COA as an `EVM.Address` struct. This struct is used to represent addresses within Flow EVM and you can also use it to query the balance, code, nonce, and so on of an account.

For our example, we could query the address of the COA we just created with the following script:

Expand Down Expand Up @@ -282,7 +282,7 @@ transaction(amount: UFix64) {

This is a basic example which only transfers tokens between a single user's COA & Flow account. You can easily modify it to transfer these tokens between any arbitrary accounts.

You can also deposit tokens directly into other types of EVM accounts with the `EVM.EVMAddress.deposit` function. See the [EVM contract documentation](../../build/cadence/core-contracts/13-evm.md) for more information.
You can also deposit tokens directly into other types of EVM accounts with the `EVM.EVMAddress.deposit` function. See the [EVM contract documentation] for more information.

:::

Expand Down Expand Up @@ -329,20 +329,20 @@ transaction(amount: UFix64) {

:::info

This is a basic example which only transfers tokens between a single user's COA & Flow account. It can be easily
This is a basic example which only transfers tokens between a single user's COA and Flow account. It can be easily
modified to transfer these tokens between any arbitrary accounts.

:::

## Direct Calls to Flow EVM

To interact with smart contracts on the EVM, you can use the `call` function provided by the COA resource. This function
To interact with smart contracts on the EVM, you can use the `call` function the COA resource provides. This function
takes the EVM address of the contract you want to call, the data you want to send, the gas limit, and the value you want
to send. It will return a `EVM.Result` struct with the result of the call - you will need to handle this result in your
Cadence code.

This transaction will use the signer's COA to call a contract method with the defined signature and args at a given EVM
address, executing with the provided gas limit and value:
address, and executes with the provided gas limit and value:

```cadence call.cdc
import "EVM"
Expand Down Expand Up @@ -397,7 +397,7 @@ transaction(evmContractHex: String, signature: String, args: [AnyStruct], gasLim
:::info

Notice that the calldata is encoded in the scope of the transaction. While developers can encode the calldata
outside the scope of the transaction and pass the encoded data as an argument, doing so compromises the
outside the scope of the transaction and pass the encoded data as an argument, this compromises the
human-readability of Cadence transactions.

It's encouraged to either define transactions for each COA call and encoded the hardcoded EVM signature and arguments,
Expand Down Expand Up @@ -457,7 +457,7 @@ transaction(to: String, amount: UInt) {

### Transfer ERC20

Below is an example transaction demonstrating the common ERC20 transfer. You can use a similar pattern for other arbitrary EVM calls.
Below is an example transaction that demonstrates the common ERC20 transfer. You can use a similar pattern for other arbitrary EVM calls.

```cadence erc20_transfer_from.cdc
import "EVM"
Expand Down Expand Up @@ -506,7 +506,7 @@ transaction(erc20AddressHex: String, to: String, amount: UInt256) {

### Transfer ERC721

Following on from above, the example transaction below demonstrates a common ERC721 transfer.
The example transaction below demonstrates a common ERC721 transfer.

```cadence erc721_transfer.cdc
import "EVM"
Expand Down Expand Up @@ -554,7 +554,7 @@ transaction(erc721AddressHex: String, to: String, id: UInt256) {

#### Bulk transfer ERC721

As covered in the [Batched EVM transactions walkthrough](./batched-evm-transactions.md), you can script multiple EVM calls in a single Cadence transaction. Compared to the single ERC721 transfer, to bulk send multiple tokens isn't much more code and allows for greater utility out of a single transaction. Below is an example of a bulk ERC721 token transfer.
As covered in the [Batched EVM transactions walkthrough], you can script multiple EVM calls in a single Cadence transaction. Compared to the single ERC721 transfer, to bulk send multiple tokens isn't much more code and allows for greater utility out of a single transaction. Below is an example of a bulk ERC721 token transfer.

```cadence erc721_bulk_transfer.cdc
import "EVM"
Expand Down Expand Up @@ -640,8 +640,18 @@ transaction(bytecode: String) {

## More information

For more information about Cadence-owned Accounts, see [Flow EVM Accounts](../../build/evm/accounts.md).
For more information about Cadence-owned Accounts, see [Flow EVM Accounts].

Other useful snippets to use when you interact with COAs can be found [here](https://fw-internal-doc.gitbook.io/evm).
Other useful snippets to use when you interact with COAs can be found [here].

Check out the [Batched EVM Transactions walkthrough](./batched-evm-transactions.md) for details on transaction batching with Cadence.
Check out the [Batched EVM Transactions walkthrough] for details on transaction batching with Cadence.

<!-- Relative links, will not render on page -->

[Flow EVM Accounts]: ../../build/evm/accounts.md
[here]: https://fw-internal-doc.gitbook.io/evm
[Batched EVM Transactions walkthrough]: ./batched-evm-transactions.md
[EVM contract documentation]: ../../build/cadence/core-contracts/13-evm.md
[generate keys]: ../../build/tools/flow-cli/keys/generate-keys.md
[GitHub]: https://github.com/onflow/flow-go/tree/master/fvm/evm/stdlib/contract.cdc
[Cadence Owned Accounts (COAs)]: ../../build/evm/accounts.md#cadence-owned-accounts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ We assume you're familiar with [wagmi], [viem], and [RainbowKit]. If you come fr

## Get started

For this tutorial, we'll start from a fork of the [FCL + RainbowKit + Wagmi Integration Demo] built by the team.
For this tutorial, we'll start from a fork of the [FCL + RainbowKit + Wagmi Integration Demo] that the team built.

Fork the repo so you can push your work freely to your own copy, then follow the setup instructions.

Expand Down Expand Up @@ -110,7 +110,7 @@ Currently, the Flow wallet sponsors all gas for all transactions signed with the

The first line is the transaction ID of the Flow Cadence transaction that calls **both** of the EVM transactions. Search for it in [Testnet Cadence Flowscan].

Cadence transactions are more complicated than those in Solidity contracts. Rather than being restricted to run functions present on the contract, they can run arbitrary code as long as the caller has access to all of the resources required by the transaction.
Cadence transactions are more complicated than those in Solidity contracts. Rather than being restricted to run functions present on the contract, they can run arbitrary code as long as the caller has access to all of the resources the transaction requires.

You can see the code of the transaction in the `Script` tab, but we've included it here for convenience:

Expand Down Expand Up @@ -234,7 +234,7 @@ return block.height;

Returns the current Cadence VM block number.

## Calling Your own contract
## Call your own contract

Next, we'll update the starter to connect to and call functions in our own contract. For this, we'll use a simple [Button Clicker Contract]. You can deploy your own copy, or use the one deployed at [`0xA7Cf2260e501952c71189D04FAd17c704DFB36e6`].

Expand Down Expand Up @@ -543,7 +543,7 @@ const calls: EVMBatchCall[] = [
];
```

Click the `Send Batch Transaction Example` button again. You'll have to **manually refresh** the page when the EVM transaction hash appears to see the score update. We haven't wired in the query invalidation yet.
Click `Send Batch Transaction Example` again. You'll have to **manually refresh** the page when the EVM transaction hash appears to see the score update. We haven't wired in the query invalidation yet.

Next, use some JavaScript to put 10 copies of the transaction call into the array:

Expand All @@ -568,7 +568,7 @@ While the batched transactions feature works, we've got a few flaws in the user

:::warning

We initially tried getting an AI friend to install this for us and it got very confused. `Next.js` and Tailwind have both had a lot of change recently. As a result, the LLMs don't seem to have caught up just yet.
We initially tried to get an AI friend to install this for us and it got very confused. `Next.js` and Tailwind have both had a lot of change recently. As a result, the LLMs don't seem to have caught up just yet.

Do this part the old-fashioned way.

Expand Down Expand Up @@ -772,7 +772,7 @@ return (
);
```

### Testing
### Tests

Run the app and make sure it works as expected, even if in a rather ugly fashion.

Expand All @@ -791,13 +791,13 @@ It's up to you do design a comprehensive strategy for your app, but here, we can
</button>
```

### Styling
### Style

It's up to you to make the app pretty. If you need inspiration, you can always check the [reference repo].

## Conclusion

In this tutorial, you reviewed the demo starter for building hybrid applications that use a common EVM stack and integrate with Flow Cadence. You then added functionality to interface with another contract that mints ERC-20 tokens. Finally, you supercharged your app by using the power of Cadence for EVM multi-call contract writes.
In this tutorial, you reviewed the demo starter to build hybrid applications that use a common EVM stack and integrate with Flow Cadence. You then added functionality to interface with another contract that mints ERC-20 tokens. Finally, you supercharged your app with the power of Cadence for EVM multi-call contract writes.

Now that you have completed the tutorial, you will be able to:

Expand Down
Loading