Getting Started with Morph SDK and Metamask Integration

About Morph 🤔

Morph is the first optimistic zkEVM Ethereum Layer 2 solution that is perfectly compatible with Ethereum Virtual Machine (EVM). Morph platform is uniquely designed to enhance the blockchain experience, making it more accessible, efficient, and user-friendly for both developers and consumers.

What is Morph SDK? 🤷‍♂️

Assisting developers in creating DApps on Morph Layer 2 platform, Morph offers a collection of resources, frameworks, and documentation known as the Morph SDK (Software Development Kit). Developers can implement Morph's exclusive Layer 2 capabilities, such scalability, effective transaction processing, and security, into their apps by using it to make interacting with the Morph blockchain straightforward.

Main Takeaways 🎁

• Download and configure Metamask wallet
• Integrate Morph Holesky network into Metamask
• Get Morph Testnet ethers
• Initialize a new DApp project with Morph SDK
• Deploy contract on a Local network
• Deploy on Morph Holesky Testnet using Forge

Dev Tools 🛠️

• Yarn

npm install -g yarn

• Forge

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

Step 1: Metamask download and configuration

• Visit metamask.io and select Get MetaMask

• Select Add to Browser to download extension

• On Metamask homepage, Agree to Terms of use
• Select Create a new wallet to create a new wallet

• Agree and continue

• Create password for your wallet

  ✍️ Consent to the conditions to continue configuring.

• Select Create new wallet

• Secure your wallet

  ✍️ It is highly recommended that you secure your wallet to avoid loss of funds and/or assets.

Step 2: Adding network to Metamask

• Click the Network dropdown at the top-left corner of Metamask page
• Turn on Show test networks button

• Visit chainlist.org
• Check the Include Testnets to load test networks
• Search for Morph Holesky in the search field
• Select Connect Wallet on the search result

• Follow through with the prompts and Approve network integration

• Select Switch network to switch to Morph Holesky network

Step 3: Getting testnet ethers

• Go to Morph Faucet
• Input your wallet address into the field
• Click Send ETH button to receive testnet ethers

Step 4: Retrieving your Private Key

• Click the three-stacked-dots at the top-right corner of Metamask page
• Select Account details

• Select Show private key button

• Insert your password to grant access

• Click and hold Hold to reveal Private Key

• Copy your Private Key

Step 5: Create a new DApp project

• To initialize a new DApp project using Morph SDK, run:

npx @morphl2/create-morph-app@latest

✍️ Give your app a name e.g. my-morph-app and wait for the execution to create a new directory for your project with all the packages installed.

Morph 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 6: Configure DApp for deployment

• Open 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="0x2fa341ffadoNotCopyf78cfd317cYu3aediot91d16308db8"
RPC_URL="https://rpc-quicknode-holesky.morphl2.io"

Step 7: Compile the contract

• Navigate to contracts/foundry directory and run:

forge build

• Result of your compilation should look like this:

[⠊] Compiling...
[⠊] Compiling 25 files with Solc 0.8.27
[⠒] Solc 0.8.27 finished in 933.05ms
Compiler run successful!

Step 8: Deploying contract on a Local network

• Open a new terminal window to activate the local network

anvil

✍️ This opens a list of ten (10) accounts and their private keys for deployment. Leave the terminal running...

• Navigate to contracts/foundry directory to continue

• Before deployment, there is need to simulate the contract
  

forge script script/Deployer.s.sol:DeployerScript --rpc-url http://127.0.0.1:8545 [private_key]

✍️ You can copy one of the Private Keys provided in the Anvil terminal window for use.

Bonus: 💚 Store environment information using Keystore Encryption

• Run this command to encrypt your private key:

cast wallet import testAccount --interactive

✍️ Follow the prompt and encrypt your private key with a simple password for reusability.

• Finally, run the following command to deploy on local network

forge script script/Deployer.s.sol:DeployerScript --rpc-url http://127.0.0.1:8545 --broadcast --sender [account_address] --account testAccount 

⚠️ For this command to execute, it will request for the password you created to encrypt your private key.

✍️ Remember, your encrypted private key has been linked with the right account. Copy the account that tallies with your private key from the Anvil terminal window.

Step 9: Deploying contract on Morph Holesky testnet

• Import the configured .env information into the CLI

source .env

• Simulate the smart contract

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

• Simulation result should look like this:

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

== Return ==
0: contract MyToken 0x90193C961A926261B756D1E5bb255e67ff9498A1

## Setting up 1 EVM.

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

Chain 2810

Estimated gas price: 0.202 gwei

Estimated total gas used for script: 747926

Estimated amount required: 0.000151081052 ETH

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

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

• Run the following command to deploy on Morph Holesky testnet:

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

• Here is what your deployment result would look like:

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

== Return ==
0: contract MyToken 0x7afC2B995741dCb2e6606f577c99737612763127

## Setting up 1 EVM.

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

Chain 2810

Estimated gas price: 0.201 gwei

Estimated total gas used for script: 747926

Estimated amount required: 0.000150333126 ETH

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

##### 2810
✅  [Success]Hash: 0x1b10883e5da2f07548c5fc4c57f9f257be44b1157bf161f9c1650a73698445e4
Contract Address: 0x7afC2B995741dCb2e6606f577c99737612763127
Block: 11677316
Paid: 0.00011567751 ETH (575510 gas * 0.201 gwei)

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


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

ONCHAIN EXECUTION COMPLETE & SUCCESSFUL.

• Take note of your balance on Metamask

• Verify with Morph block explorer

What we have covered: 🎉

✅ Download and configure Metamask wallet
✅ Integrate Morph Holesky network into Metamask
✅ Get Morph Testnet ethers
✅ Initialize a new DApp project with Morph SDK
✅ Store information using Keystore Encryption
✅ Deploy contract on a Local network
✅ Deploy on Morph Holesky Testnet using Forge
✅ Verify contract with Morph explorer

Conclusion

In this tutorial, we covered the fundamental concepts required to quickly and effortlessly build on the Morph blockchain. The process of developing a full stack decentralized application utilizing one of the Ethereum development frameworks begins with the installation and configuration of Metamask. A straightforward and instructive deployment to test and local networks was demonstrated. This article provides comprehensive guidelines for creating a seamless DApp on the Morph blockchain.