Stack Exploder: Bridging Saga Chainlet NFTs Across EVM Networks using Hyperlane

In our previous Stack Exploder guide we explored how you can bridge assets like ERC20 tokens between your Saga Chainlet and any EVM network.
However, at the time of publishing both, the previous blog post and this one (Hyperlane CLI version 3.10.0), you couldn’t perform a warp for ERC721 tokens, which made it impossible to bridge NFTs between chains.

However, in this tutorial, we will use another solution (still using Hyperlane) for bridging NFTs between your Saga Chainlet and an EVM network, specifically Sepolia.

⚠️ Note: This is considered the follow-up to the Stack Exploder: Bridging Your Saga Chainlet Assets Across EVM Networks using Hyperlane blog post. Before continuing, you should be prepared:

• Your Saga Chainlet
• Deployed the Hyperlane Smart Contracts in both chain and most importantly have the core-deployment-{timestamp}.json
• Validators and Relayer running

How to deploy Warp Route

The current Hyperlane CLI version 3.11.1 does not support ERC721 tokens. So as a workaround, we will install a previous version of Hyperlane:

npm install -g @hyperlane-xyz/cli@3.7.0

As we did in the previous blog post (where we created a bridge for ERC20), we are now going to create a config for the deployment of the warp using the command:

hyperlane config create warp

You should notice that the output file will be named warp-tokens.yaml instead of warp-route-deployment.yaml, but the content structure is identical to that of the warp-route-deployment.yaml file.

base:
  chainName: <chainlet_name>
  type: collateral
  address: "<contract_address_of_the_erc721>"
  isNft: true
synthetics:
  - chainName: sepolia

In this tutorial:

base:
  chainName: omegachain
  type: collateral
  address: "0x01FDCCb5f12140f8Ea36272C772f5efBF48Ac731"
  isNft: true
synthetics:
  - chainName: sepolia

Deployment

Execute the following command to start the Warp Route deployment:

hyperlane deploy warp 

If the deployment went well, you should see an output similar to this in your terminal:

Hyperlane CLI
Reading file configs in ./configs/chains.yaml
All chain configs in ./configs/chains.yaml are valid
? Do you want to use some core deployment address artifacts? This is required for PI chains (non-core chains). yes
? Select contract deployment artifacts file core-deployment-2024-04-19-10-48-17.json
Using warp config at ./configs/warp-tokens.yaml
Assembling token configs
Fetching token metadata for 0x01FDCCb5f12140f8Ea36272C772f5efBF48Ac731 on omegachain}
Using base token metadata: Name: Saga Cats Dogs Food, Symbol: SCDF, Decimals: 0
Token configs ready
WARP Deployment plan

Deployment plan
===============
Transaction signer and owner of new contracts will be 0x4cDF9dd5d678E4274e5DBB902E91b80373899513
Deploying a warp route with a base of Saga Cats Dogs Food token on omegachain
Connecting it to new synthetic tokens on sepolia
Using token standard ERC721
? Is this deployment plan correct? yes
Running pre-flight checks...
Running pre-flight checks...
Chains are valid ✅
Signer is valid ✅
Balances are sufficient ✅
All systems ready, captain! Beginning deployment...
Contract addresses will be written to artifacts/warp-deployment-2024-05-06-19-11-27.json
Warp UI token config will be written to artifacts/warp-ui-token-config-2024-05-06-19-11-27.json
Start deploy to omegachain,sepolia

===============
Various smart contracts deployed on both chains
===============

Mailbox client on sepolia initialized...
Transferring ownership of ownables...
Finished deploying router contracts for all chains.
Hyp token deployments complete
Writing deployment artifacts
Deployment is complete!
Contract address artifacts are in artifacts/warp-deployment-2024-05-06-19-11-27.json
Warp UI token config is in artifacts/warp-ui-token-config-2024-05-06-19-11-27.json

When completed, the CLI (of this version) will generate two new JSON artifact files: warp-deployment-{timestamp} and warp-ui-token-config-{timestamp}.

The first contains just addresses for the newly deployed Warp router contracts.
The second is a config file for the Warp UI, which you can use for the next step.

In my case warp-ui-token-config files are:

Interact with the Warp Routes

Now that you have deployed a Warp Route, you can interact with your routes:

• Using a different version of the Hyperlane Warp UI Template (any commit version before “Migration to warp core (#134)”, you can use this commit branch and download ZIP)
• You can fork this repo (which is still using that version of Hyperlane Warp UI)

Before continuing, there are a few changes to do with this repo:

1. Set the state variable “isNft” to true (but ONLY if you’re using a single NFT warp route).
   This is because of a UI bug where the form on the initial page defaults to ‘select the amount’ instead of ‘select the token ID,’ which is what we want.
2. Do some check changes on validateForm.ts file (1, 2).
   This is because the repo considers 0 to be an incorrect value, so if you choose “token ID: 0” to bridge, it will result in an error, which is something we want to avoid.

Using this repo now you can easily “connect” your warp routes:

1. Install dependencies with yarn
2. Copy warp-ui-token-config-{timestamp} and paste into .src/consts/tokens.json

3. Add your chainlet config by copying the chains.yaml file from the hyperlane config create chain section. Additionally, include nativeToken information such as name, symbol, and decimals.

4. Lastly build the project using yarn build and then yarn dev

Now let’s the magic happen 🪄 ✨

For this tutorial we are going to use the NFT Collection “Saga Cats Dogs Food”.

You can see that this wallet has 4 Nfts (on the chainlet explorer and Metamask)

And doesn’t have any in Sepolia Etherscan.

In the Hyperlane Warp UI, we bridge the token id 0 from Omegachain to Sepolia.

You can observe that the process requires two transactions:

• The approve transaction, where you allow the HypERC721Collateral smart contract to utilize your tokens.

• The transfer transaction, where you transfer the NFT to the HypERC721Collateral (you can check the flow in this chapter in the previous blog post).

After a few minutes, you’ll notice that your NFT (token ID 0) is now on the Sepolia network.

The entire code for this guide is available in these github repos:

• Hyperlane-saga: https://github.com/chefleo/hyperlane-saga/tree/warps/omegachain
• Hyperlane Warp UI (different version): https://github.com/chefleo/hyperlane-saga_ui_warp

Conclusion

Congratulations! You have bridged your ERC721 tokens between your Saga chainlet and the Ethereum chain.
This tutorial is a preview into how you can evolve your chainlet to incorporate a “portal” that establishes connections with other chains. You have now unblocked a realm of boundless possibilities.

For more details around how you can Unblock your application, follow us on X, join our Discord and Telegram and subscribe to our Medium.