Step-by-step Guide to Building a Morph App with Pyth Oracle and WalletConnect

The blockchain oracle network is a system that enables blockchain to interact with external data sources, allowing smart contracts to access real-world data. Because blockchain exists in its own reality, it is purposefully deterministic. A decentralized blockchain oracle computes the off-chain data in order to be able to work with the on-chain logics provided by the blockchain.
To recap, decentralized oracles bridge the gap between blockchain and the outside world, providing data that is crucial for many decentralized applications and smart contract functionalities.

About Morph

Morph is a global consumer layer for value creation on the blockchain. At the core of Morph is a revolutionary approach to Ethereum Layer 2 scalability, harnessing the power of rollup technology.
Morph is committed to enhancing the blockchain experience by providing scalable, secure, and user-friendly Layer 2 solutions that make consumer blockchain applications accessible and valuable to developers, projects, and everyday users.

Why Pyth Oracle?

Pyth is a protocol that allows market participants to publish pricing information on-chain for others to use. Pyth Network price feeds provide real-time financial market data to smart contract applications offering over 450 price feeds covering a number of different asset classes, including US equities, commodities, and cryptocurrencies.

What is WalletConnect Integration?

WalletConnect, which is currently Reown, is a platform that provides technological tools that allow wallets to communicate with various blockchain applications and make it easy to authorize transactions with just one click, as well as get vital information and notifications. However, all of this happens without you carrying out any extra work.

Morph Application Starter Kit 🎁

Interestingly, Morph have built a package that allows developers to set up a new Morph application with Pyth Oracle and WalletConnect integration. The goal of this tutorial is to show you how to create, deploy, and test a fullstack decentralized application using this package, so you don't have to start from scratch.

Prerequisites 📚

• Metamask
• Node Js (v16 or later)
• NPM (v6 or later)
• Testnet ethers
• WalletConnect Project ID

Dev Tools 🛠️

• Forge

curl -L https://foundry.paradigm.xyz | bash

• Yarn

npm install -g yarn

Checkout this tutorial to learn more about Morph SDK

Getting Started with Morph SDK and Metamask Integration

Azeez Abidoye ・ Oct 24

Bonus: Generate WalletConnect Project ID 💚

• Sign up/Sign in on reown.com
• Select Projects on the side bar
• Click on Create Project to create a new project

• Add project information by providing a name for your application e.g my-pyth-app

• Select a product and continue

✍️ In our case we will select AppKit which is suitable for web applications

• Select a platform

✍️ Choose a frontend framework, select NextJs for the purpose of this tutorial

Boom 💥 You have successfully generated a Project ID for your application.

Now, let's start hacking... 👨‍💻

Step 1: Create a new project with Morph Application Starter Kit

npx @morphl2/create-pyth-app@latest 

✍️ Give your application a name e.g my-morph-pyth-app. Wait for the execution to install all the packages and as well create a new directory for your project.

• Nagivate into your new project and launch it on your desired code editor

cd my-morph-pyth-app && code .

Morph Pyth App File Tree: 📚

• Contracts: This directory contains all of the code for developing smart contracts using either the Foundry or Hardhat frameworks. Both frameworks have been structured to allow for rapid and easy DApp development. For this tutorial, we will focus on the Foundry framework.

• Frontend: The client-side development code exists in this directory. The frontend has been implemented with NextJs, a React framework. You can customize this by integrating other frontend frameworks.

Step 2: Configure the environment information for contract deployment

• Open the contracts/foundry directory
• Rename the .env-example to .env
• Populate the PRIVATE_KEY and RPC_URL information

✍️ Ensure to prefix your Private Key with an 0x to avoid errors

PRIVATE_KEY="0x2fa341ffado560fdf78cfd317cYu3ae67591d16308db8"
RPC_URL="https://rpc-quicknode-holesky.morphl2.io"

Step 3: Compile smart contract

• Navigate to contracts/foundry directory and execute the following command:

forge build

• After a successful compilation, the outcome will look like this:

[⠊] Compiling...
[⠘] Compiling 24 files with Solc 0.8.27
[⠊] Solc 0.8.27 finished in 4.83s
Compiler run successful!

✍️ The ABI is in the out directory and is automatically included to the project after compiling the smart contract

Step 4: Deploying contract on Morph Holesky testnet

• Import the configured .env information into the CLI

source .env

• Simulate the contract

forge script script/Deployer.s.sol:DeployerScript --rpc-url $RPC_URL

• The completed simulation result will look like this

[⠒] Compiling...
[⠢] Compiling 2 files with Solc 0.8.27
[⠆] Solc 0.8.27 finished in 5.16s
Compiler run successful!
Script ran successfully.

== Return ==
0: contract EthBettingDapp 0x90193C961A926261B756D1E5bb255e67ff9498A1

## Setting up 1 EVM.

==========================

Chain 2810

Estimated gas price: 0.202 gwei

Estimated total gas used for script: 1648006

Estimated amount required: 0.000332897212 ETH

==========================

SIMULATION COMPLETE. To broadcast these transactions, add --broadcast and wallet configuration(s) to the previous command. See forge script --help for more.

• Execute the following command to deploy contract on Morph Holesky testnet

forge script script/Deployer.s.sol:DeployerScript --rpc-url $RPC_URL  --broadcast --private-key $PRIVATE_KEY --legacy

• The result of a successful deployment will look like this:

[⠒] Compiling...
No files changed, compilation skipped
Script ran successfully.

== Return ==
0: contract EthBettingDapp 0x47e3FE94CE4649123034C289217C937b59d1d301

## Setting up 1 EVM.

==========================

Chain 2810

Estimated gas price: 0.201 gwei

Estimated total gas used for script: 1648006

Estimated amount required: 0.000331249206 ETH

==========================

##### 2810
✅  [Success]Hash: 0xf97efe66f05e31d04974c6001e55e7e89b37efc0c7a374109b01f0ebffac9aed
Contract Address: 0x47e3FE94CE4649123034C289217C937b59d1d301
Block: 13183360
Paid: 0.000254876643 ETH (1268043 gas * 0.201 gwei)

✅ Sequence #1 on 2810 | Total Paid: 0.000254876643 ETH (1268043 gas * avg 0.201 gwei)


==========================

ONCHAIN EXECUTION COMPLETE & SUCCESSFUL.

• Verify the contract deployment with Morph explorer frontend

Interacting with the DApp frontend

• Navigate to the frontend directory and install the plugins

yarn install

• Rename the .env-example file to .env
• Populate the environment variable with the Project ID generated initially

NEXT_PUBLIC_PROJECT_ID="9efcb454adf22f37015a63b56b2388a7"

• Launch your project in the browser

yarn run dev

Conclusion

In this tutorial, we explored the fundamentals of building a full-stack decentralized application using the Morph App starter kit, featuring Pyth Oracle and WalletConnect integration. This lesson aims to provide developers working on Morph with a streamlined, user-friendly approach to application development and deployment, eliminating the need to build the app structure from scratch.