SecretPath + Reown integration

Learn how to connect EVM compatible chains with Secret Network using Reown (Formerly called WalletConnect).

SecretPath 🤝 Reown

SecretPath connects Secret Network to 20+ EVM chains, enabling public EVM chains to call functions on Secret Network while preserving the privacy of the inputs and validity of the outputs.

With Reown (formerly called WalletConnect), you can create a seamless user experience with one wallet login that allows users to interact with Secret Network smart contracts on every SecretPath-connected chain.

See here for a fullstack SecretPath + Reown demo

In this tutorial, you will learn how to configure SecretPath and Reown in React.js so you can create seamless UI for confidential cross-chain computation 😄

Reown Configuration

1. Sign in to Reown.

2. Create a Reown project.

Be sure to select "WalletKit" for product type:

In this tutorial, you are building a React.js application. Select "Javascript" for platform to build your React.js app:

After successfully creating a project, you will see your project id:

Connecting Reown to SecretPath

1. Clone the SecretPath Reown repository:

git clone https://github.com/writersblockchain/secretpath-walletconnect

1. Install the dependencies:

cd frontend 
npm install 

1. Update the project-id with your project-id

Now you're ready to use Reown with SecretPath!

Configuring Reown for SecretPath

Now that you have your environment properly configured, let's understand how everything is connected. Run npm run start to see your Reown application:

npm run start

Out of the box, you can use this React application as a starting point for your SecretPath + Reown applications.

Click "Connect Wallet" and sign in to your Metamask or EVM wallet. Click on the network you are currently connected to in order to see all of the EVM networks available:

All of these 20+ networks are connected to SecretPath, which means any of these chains can call functions on Secret Network smart contracts 🤯

Now let's breakdown each of the parameters that are required to properly configure our Web3Modal.

Web3Modal Parameters

We must pass 5 parameters to Web3Modal: chainImages, ethersConfig, chains, projectId, and metadata.

chainImages

chainImages is an object that associates EVM chain IDs with images that are displayed in the wallet UI. You can add additional chain IDs and images for each additional chain you would like included in your application. Currently, every chain that is supported by SecretPath is included.

ethersConfig

ethersConfig is an object that contains boilerplate ethers configuration code.

chains

chains contains the RPC info for each chain that you connect to SecretPath. The chain info is imported from the chains.js file in the config folder. If you have added RPC info for a chain to Metamask before, this should look familiar.

projectId

Your unique project id generated by Reown.

metadata

Metadata unique to your dApp.

Putting it all together: SecretPath + Reown

Now that you have your Reown interface enabled to your liking, let's understand how it connects the EVM to Secret Network with SecretPath.

Open App.js. Notice that there are 3 functions working in tandem here:

1. useEffect, which returns the currently enabled chain ID (so every time the user switches to a new chain, this is saved in the application state)
2. requestRandomness - this is our SecretPath function which requests a verifiable random number from a Secret smart contract. It takes the parameter chainId, because the application must know which EVM gateway contract to execute based on which EVM chain is currently connected.
3. querySecret - a query function that queries the random number stored in the Secret Network smart contract

Finally, on click, requestRandomness calls the request_random handle in the Secret smart contract, which returns a random number between 1-200. SecretPath knows which EVM gateway contract to execute based on which chain ID is currently enabled by Reown (you can see the if/else logic here).

Summary

✨ SecretPath integrates Secret Network with over 20 EVM chains, enabling public EVM chains to execute functions on Secret Network while preserving privacy and ensuring output validity. Using Reown, developers can create a seamless user experience, allowing users to interact with Secret Network smart contracts across all SecretPath-connected chains through a single wallet login.

This tutorial provides a step-by-step guide to configuring SecretPath and Reown in a React application, starting from signing in with Reown and creating a project, to setting up the development environment. Key configurations include specifying parameters for Web3Modal, such as chainImages, ethersConfig, chains, projectId, and metadata. The tutorial also explains how to connect EVM to Secret Network using functions like requestRandomness and querySecret within the app, ensuring smooth and confidential cross-chain computations ✨