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

, 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

Bonus: Generate WalletConnect Project ID 💚

• Sign up/Sign in on
  
  
  
  
  
  • Add project information by providing a name for your application e.g my-pyth-app
    
  
  
  
  
  
  
  
  
  
  • Select a platform
  
  
  
  
  

  
  

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

  
  

  
  
  
  
  

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

  
  
  

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

  
  
  
  
  
  
  

  CODE Kopieren

  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
    
  
  
  
  
  
  
  

  CODE Kopieren

  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 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 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
  
  

  
  

  
  
  
  
  

  CODE Kopieren

  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:
    
  
  
  
  
  
  
  

  CODE Kopieren

  forge build
  
  

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

  CODE Kopieren

  [⠊] 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
    
  
  
  
  
  
  
  

  CODE Kopieren

  source .env
  
  

  
  
  
  
  
  
  
  
  
  
  • Simulate the contract
    
  
  
  
  
  
  
  

  CODE Kopieren

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

  
  
  
  
  
  
  
  
  
  
  • The completed simulation result will look like this
    
  
  
  
  
  
  
  

  CODE Kopieren

  [⠒] 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
    
  
  
  
  
  
  
  

  CODE Kopieren

  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:
    
  
  
  
  
  
  
  

  CODE Kopieren

  [⠒] 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
    
    
    

    
    
    
    Interacting with the DApp frontend
    

    
    
    
    
    
    • Navigate to the frontend directory and install the plugins
      
    
    
    
    
    
    
    

    CODE Kopieren

    yarn install
    
    

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

    CODE Kopieren

    NEXT_PUBLIC_PROJECT_ID="9efcb454adf22f37015a63b56b2388a7"
    
    

    
    
    
    
    
    
    
    
    
    
    • Launch your project in the browser
      
    
    
    
    
    
    
    

    CODE Kopieren

    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.

    Vollständiger Original-Bericht

    Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

    ↗ Original-Artikel auf dev.to lesen