Daniel Kambale's Blog

Guide étape par étape pour créer une application Morph avec Pyth Oracle et WalletConnect

Daniel Kambale's photo
Daniel Kambale
·

6 min read

Table of contents

Le réseau Oracle de blockchain est un système qui permet à la blockchain d'interagir avec des sources de données externes, permettant ainsi aux smart contracts d'accéder à des données du monde réel. Comme la blockchain fonctionne dans sa propre réalité, elle est conçue pour être déterministe. Un oracle de blockchain décentralisé traite les données hors-chaîne pour pouvoir les intégrer dans la logique de la blockchain.

En résumé, les oracles décentralisés comblent l’écart entre la blockchain et le monde extérieur, en fournissant des données cruciales pour de nombreuses applications décentralisées et fonctionnalités de smart contracts.

À propos de Morph

Morphest une couche de consommation mondiale dédiée à la création de valeur sur la blockchain. Au cœur de Morph, on trouve une approche révolutionnaire de l'évolutivité d'Ethereum Layer 2, exploitant la technologie des rollups. Morph vise à améliorer l'expérience blockchain en offrant des solutions Layer 2 évolutives, sécurisées et faciles d'utilisation, rendant les applications blockchain accessibles et précieuses pour les développeurs, les projets et les utilisateurs quotidiens.

Pourquoi utiliser Pyth Oracle ?

Pyth est un protocole permettant aux participants du marché de publier des informations de prix on-chain pour que d'autres puissent les utiliser. Les flux de prix du réseau Pyth fournissent des données de marché en temps réel aux applications de smart contracts, avec plus de 450 flux de prix couvrant divers types d'actifs, dont les actions américaines, les matières premières et les cryptomonnaies.

Qu'est-ce que l'intégration WalletConnect ?

WalletConnect, renommé en Reown,est une plateforme qui fournit des outils permettant aux portefeuilles de communiquer avec diverses applications blockchain et de simplifier l'autorisation de transactions en un seul clic, ainsi que de recevoir des informations et notifications importantes – tout cela sans effort supplémentaire.

Kit de démarrage de l'application Morph 🎁

Morph a créé un package permettant aux développeurs de configurer une nouvelle application Morph avec l'intégration de Pyth Oracle et WalletConnect. Ce tutoriel vise à vous montrer comment créer, déployer et tester une application décentralisée full-stack à l'aide de ce package, vous évitant ainsi de partir de zéro.

Prerequisites 📚

  • Metamask

  • Node Js (v16 ou supérieur)

  • NPM (v6 or later)

  • Ethers pour le testnet

  • Identifiant de projet WalletConnect

Outils de développement 🛠️

  • Forge
curl -L https://foundry.paradigm.xyz | bash
  • Yarn
npm install -g yarn

Bonus : Générer un identifiant de projet WalletConnect 💚

  1. Inscrivez-vous ou connectez-vous sur reown.com

  2. SélectionnezProjectdans la barre latérale

  3. Cliquez sur Créer un projet Create Project pour créer un nouveau projet

create new project

  • Ajoutez des informations en fournissant un nom pour votre application (par exemple, mon-application-pyth)

add project name

  • Sélectionnez un produit et continuez
  • ✍️ Dans notre cas, choisissez AppKit, adapté aux applications web.

select product

  • Sélectionnez une plateforme
  1. ✍️ Choisissez un framework frontend, sélectionnez NextJs pour ce tutoriel.

choose frontend framework

Bravo ! Vous avez généré avec succès un identifiant de projet pour votre application.

dashboard with project id

Commençons à coder... 👨‍💻

Étape 1 : Créez un nouveau projet avec le kit de démarrage Morph Application

npx @morphl2/create-pyth-app@latest

✍️ Donnez un nom à votre application, par exemple mon-application-morph-pyth. Attendez que l'installation des packages soit terminée et qu'un nouveau dossier pour votre projet soit créé.

  • Accédez à votre projet et ouvrez-le dans votre éditeur de code préféré :
cd my-morph-pyth-app && code .

Structure de fichiers de l'application Morph Pyth : 📚

  • Contracts : Ce dossier contient tout le code pour développer des smart contracts avec les frameworks Foundry ou Hardhat. Nous utiliserons Foundry dans ce tutoriel.

  • Frontend : Ce dossier contient le code de développement côté client. L’interface a été réalisée avec NextJs, un framework React. Vous pouvez le personnaliser en intégrant d'autres frameworks.

Étape 2 : Configurez les informations d’environnement pour le déploiement du contrat

  1. Ouvrez le dossier contracts/foundry

  2. Renommez le .env-example en .env

  3. Renseignez les informations PRIVATE_KEY et RPC_URL

✍️ Assurez-vous de préfixer votre clé privée avec 0x pour éviter les erreurs.

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

Étape 3 : Compiler le smart contract

  • Accédez au dossier contracts/foundry et exécutez la commande suivante :
forge build
  • Une fois la compilation réussie, vous verrez un message semblable à :
[⠊] Compiling...
[⠘] Compiling 24 files with Solc 0.8.27
[⠊] Solc 0.8.27 finished in 4.83s
Compiler run successful!

✍️ L'ABI se trouve dans le répertoire out et est automatiquement inclus dans le projet après la compilation du smart contract.

Étape 4 : Déployer le contrat sur le testnet Morph Holesky

  • Importez les informations .env configurées dans le CLI
source .env
  • Simulez le contrat
forge script script/Deployer.s.sol:DeployerScript --rpc-url $RPC_URL
  • Le résultat de la simulation terminée ressemblera à ceci :
[⠒] 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.
  • Exécutez la commande suivante pour déployer le contrat sur le testnet Morph Holesky :
forge script script/Deployer.s.sol:DeployerScript --rpc-url $RPC_URL  --broadcast --private-key $PRIVATE_KEY --legacy
  • Le résultat d'un déploiement réussi ressemblera à ceci :
[⠒] 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.

morphscan page

Interaction avec le frontend de la DApp

  • Accédez au répertoire frontend et installez les plugins :
yarn install

  • Renommez le fichier .env-example en .env

  • Remplissez la variable d'environnement avec l'ID de projet Project ID généré précédemment :

NEXT_PUBLIC_PROJECT_ID="9efcb454adf22f37015a63b56b2388a7"
  • Lancez votre projet dans le navigateur :
yarn run dev

Eth Betting DApp UI

Conclusion

Dans ce tutoriel, nous avons exploré les bases de la création d'une application décentralisée complète en utilisant le kit de démarrage Morph App, intégrant Pyth Oracle et WalletConnect. Cette leçon vise à offrir aux développeurs travaillant sur Morph une approche simplifiée et conviviale du développement et du déploiement d'applications, éliminant le besoin de construire la structure de l'application depuis zéro.

morphl2morphBlockchain