DEV Community: Wolfcito | Luis Fernando Ushiña 🐺

Optimización Avanzada de Consultas SQL para el Análisis Superchain en Tokenflow

Wolfcito | Luis Fernando Ushiña 🐺 — Wed, 16 Oct 2024 04:52:44 +0000

Introducción

Recientemente he profundizado en el mundo de Optimism, especialmente en la Superchain, y he explorado las ventajas de herramientas como TokenFlow, que facilitan la visualización de métricas y análisis complejos. Aprovechando mi conocimiento en SQL, decidí crear pequeños widgets y gráficos que simplifican la visualización de los cuatro pilares del análisis de la Superchain mediante la visualización de transacciones, direcciones activas, contratos desplegados y fees pagados.

Durante este proceso, comparé una de mis consultas con otras ya existentes y descubrí diferencias significativas en el rendimiento. Esto me llevó a reflexionar sobre la importancia de estructurar correctamente un widget para TokenFlow desde el inicio, asegurando así una optimización que aproveche mejor los recursos de la plataforma. Esto no solo mejoraría el rendimiento general, sino que también impactaría directamente en el tiempo de visualización. A continuación, describo los casos de uso, los resultados obtenidos y las optimizaciones aplicadas.

Explicación y Justificación de las Consultas

Al analizar y construir consultas SQL para las blockchains de la Superchain, implementé varias optimizaciones para mejorar el rendimiento sin comprometer la precisión. Aquí detallo las optimizaciones clave:

Selección de columnas específicas:
- En lugar de utilizar SELECT *, seleccioné únicamente las columnas necesarias para cada pilar, como block_date, gas_used, effective_gas_price, entre otras. Esto reduce la cantidad de datos procesados y disminuye la carga del sistema.
Filtrado por fecha optimizado:
- Apliqué el filtro block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE()) directamente en cada subconsulta. Así, cada conjunto de datos se filtra antes de realizar uniones o combinaciones, evitando procesamientos innecesarios.
Uso de SUM con CASE:
- Para agregar datos por blockchain, utilicé SUM(CASE WHEN chain = 'Zora' THEN daily_transactions ELSE 0 END). Esto permite realizar agregaciones de manera eficiente dentro de la misma consulta sin recurrir a operaciones como PIVOT, mejorando el rendimiento.
Uso de UNION ALL en lugar de JOIN:
- Al emplear UNION ALL para combinar datos de diferentes blockchains, evitamos duplicar filas y mantenemos la simplicidad de la consulta. Esto es especialmente útil en entornos con grandes volúmenes de datos donde las operaciones JOIN pueden ser costosas.

Optimización de Consultas: Casos de Uso

Caso de Uso 1: Transacciones Diarias

Consulta sin optimizar:

La consulta combinaba los datos de todas las blockchains en un solo conjunto antes de contar las transacciones diarias, lo que resultaba menos eficiente en rendimiento.

WITH superchain_transactions AS (
    SELECT *, 'Zora' AS chain FROM zora.core.TRANSACTIONS
    UNION ALL
    SELECT *, 'OP Mainnet' AS chain FROM optimism.core.transactions
    UNION ALL 
    SELECT *, 'Mint' AS chain FROM mint.core.transactions
    UNION ALL
    SELECT *, 'Mode' AS chain FROM mode.core.transactions
)

SELECT * FROM (
    SELECT chain,
           block_date AS date,
           COUNT(*) AS "Daily Transactions"
    FROM superchain_transactions
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY chain, block_date
    ORDER BY block_date, chain
) 
PIVOT (
    MAX("Daily Transactions") FOR chain IN ('Zora', 'OP Mainnet', 'Mint', 'Mode')
) AS p(date, zora, "OP Mainnet", mint, mode)
ORDER BY date;

Resultado:

94 filas / 2.39 KB en 5,879 ms

Consulta optimizada:

En esta versión, cada conjunto de transacciones se agrega por separado y luego se combinan, evitando procesamientos innecesarios.

WITH superchain_transactions AS (
    SELECT block_date, COUNT(*) AS daily_transactions, 'Zora' AS chain
    FROM zora.core.transactions
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS daily_transactions, 'OP Mainnet' AS chain
    FROM optimism.core.transactions
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS daily_transactions, 'Mint' AS chain
    FROM mint.core.transactions
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS daily_transactions, 'Mode' AS chain
    FROM mode.core.transactions
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date
)

SELECT 
    block_date AS date, 
    SUM(CASE WHEN chain = 'Zora' THEN daily_transactions ELSE 0 END) AS zora_transactions,
    SUM(CASE WHEN chain = 'OP Mainnet' THEN daily_transactions ELSE 0 END) AS op_mainnet_transactions,
    SUM(CASE WHEN chain = 'Mint' THEN daily_transactions ELSE 0 END) AS mint_transactions,
    SUM(CASE WHEN chain = 'Mode' THEN daily_transactions ELSE 0 END) AS mode_transactions
FROM 
    superchain_transactions
GROUP BY 
    block_date
ORDER BY 
    block_date;

Resultado:

94 filas / 2.39 KB en 1,038 ms

Gráfico recomendado: Barras apiladas

Eje X: date
Eje Y: daily_transactions
Diferenciación: Por blockchain (Zora, OP Mainnet, Mint, Mode)

Enlace del Widget Optimizado en TokenFlow

Caso de Uso 2: Direcciones Activas

Consulta sin optimizar:

WITH superchain_calls AS (
    SELECT *, 'Zora' AS chain FROM zora.core.calls
    UNION ALL 
    SELECT *, 'OP Mainnet' AS chain FROM optimism.core.calls
    UNION ALL
    SELECT *, 'Mint' AS chain FROM mint.core.calls
    UNION ALL
    SELECT *, 'Mode' AS chain FROM mode.core.calls
)

SELECT * FROM (
    SELECT chain,
           block_date AS date,
           COUNT(DISTINCT from_address) AS "Active Addresses"
    FROM superchain_calls
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY chain, block_date
) 
PIVOT (
    MAX("Active Addresses") FOR chain IN ('Zora', 'OP Mainnet', 'Mint', 'Mode')
) AS p(date, zora, "OP Mainnet", mint, mode)
ORDER BY date;

Resultado:

94 filas / 2.39 KB en 21,207 ms

Consulta optimizada:

WITH superchain_calls AS (
    SELECT block_date, COUNT(DISTINCT from_address) AS active_addresses, 'Zora' AS chain
    FROM zora.core.calls
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(DISTINCT from_address) AS active_addresses, 'OP Mainnet' AS chain
    FROM optimism.core.calls
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(DISTINCT from_address) AS active_addresses, 'Mint' AS chain
    FROM mint.core.calls
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(DISTINCT from_address) AS active_addresses, 'Mode' AS chain
    FROM mode.core.calls
    WHERE block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date
)

SELECT 
    block_date AS date, 
    SUM(CASE WHEN chain = 'Zora' THEN active_addresses ELSE 0 END) AS zora_active_addresses,
    SUM(CASE WHEN chain = 'OP Mainnet' THEN active_addresses ELSE 0 END) AS op_mainnet_active_addresses,
    SUM(CASE WHEN chain = 'Mint' THEN active_addresses ELSE 0 END) AS mint_active_addresses,
    SUM(CASE WHEN chain = 'Mode' THEN active_addresses ELSE 0 END) AS mode_active_addresses
FROM 
    superchain_calls
GROUP BY 
    block_date
ORDER BY 
    block_date;

Resultado:

94 filas / 8.63 KB en 11,231 ms

Gráfico recomendado: Barras apiladas

Eje X: date
Eje Y: active_addresses
Diferenciación: Por blockchain (Zora, OP Mainnet, Mint, Mode)

Enlace del Widget Optimizado en TokenFlow

Enfoque de Agregación Temprana

En las consultas optimizadas, implementé el enfoque de agregación temprana, realizando operaciones de agregación como conteos y sumas directamente en las subconsultas de cada blockchain antes de combinar los resultados. Esto contrasta con el enfoque sin optimizar, donde primero se unían los datos de todas las blockchains y luego se realizaban las agregaciones. Este cambio ofrece varios beneficios:

Menor carga de procesamiento: Al contar transacciones o direcciones activas en cada subconsulta, se reduce el tamaño del conjunto de datos procesado posteriormente, minimizando la carga de memoria y procesamiento.
Uso eficiente de índices: Filtrar y agregar en la fuente permite que las bases de datos utilicen mejor sus índices, acelerando las operaciones de agregación.
Reducción del tamaño de datos combinados: En lugar de combinar grandes volúmenes de datos sin procesar, las consultas optimizadas combinan solo los resultados agregados, reduciendo significativamente el tamaño del conjunto de datos final.

Beneficios Generales de las Optimizaciones Aplicadas

Las optimizaciones no solo mejoraron el rendimiento de cada consulta, sino que también hicieron el código más limpio, escalable y fácil de entender. Los beneficios clave incluyen:

Escalabilidad: Las consultas están diseñadas para ser escalables, agrupando y filtrando solo los datos necesarios, lo que mejora el rendimiento en conjuntos de datos grandes.
Claridad en la visualización: Las columnas diferenciadas por blockchain facilitan la generación de gráficos apilados y la visualización comparativa de métricas como transacciones, direcciones activas, contratos desplegados y fees pagadas.
Reducción del tiempo de ejecución: Como se observó en los casos de uso, el tiempo de ejecución se redujo drásticamente en las consultas optimizadas, permitiendo ejecutar análisis más complejos en menos tiempo y liberando recursos para otros procesos.

Caso de Uso 3: Excepción en la Optimización

En este caso, analicé los contratos desplegados en las diferentes blockchains de la Superchain. Al aplicar las mismas optimizaciones, la mejora en el rendimiento no fue tan significativa, convirtiéndose en una excepción interesante.

Consulta sin optimizar:

WITH superchain_calls AS (
    SELECT *, 'Zora' AS chain FROM zora.core.calls WHERE call_type IN ('CREATE', 'CREATE2')
    UNION ALL
    SELECT *, 'OP Mainnet' AS chain FROM optimism.core.calls WHERE call_type IN ('CREATE', 'CREATE2')
    UNION ALL
    SELECT *, 'Mint' AS chain FROM mint.core.calls WHERE call_type IN ('CREATE', 'CREATE2')
    UNION ALL
    SELECT *, 'Mode' AS chain FROM mode.core.calls WHERE call_type IN ('CREATE', 'CREATE2')
)

SELECT * FROM (
    SELECT chain,
           block_date AS date,
           COUNT(*) AS "Contracts Deployed"
    FROM superchain_calls
    WHERE date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY chain, block_date
) 
PIVOT (
    MAX("Contracts Deployed") FOR chain IN ('Zora', 'OP Mainnet', 'Mint', 'Mode')
) AS p(date, zora, "OP Mainnet", mint, mode)
ORDER BY date;

Resultado:

94 filas / 2.39 KB en 30,429 ms

Consulta optimizada:

WITH superchain_calls AS (
    SELECT block_date, COUNT(*) AS contracts_deployed, 'Zora' AS chain
    FROM zora.core.calls
    WHERE call_type IN ('CREATE', 'CREATE2')
    AND block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS contracts_deployed, 'OP Mainnet' AS chain
    FROM optimism.core.calls
    WHERE call_type IN ('CREATE', 'CREATE2')
    AND block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS contracts_deployed, 'Mint' AS chain
    FROM mint.core.calls
    WHERE call_type IN ('CREATE', 'CREATE2')
    AND block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date

    UNION ALL

    SELECT block_date, COUNT(*) AS contracts_deployed, 'Mode' AS chain
    FROM mode.core.calls
    WHERE call_type IN ('CREATE', 'CREATE2')
    AND block_date >= DATEADD('month', -{{n_months}}, CURRENT_DATE())
    GROUP BY block_date
)

SELECT 
    block_date AS date, 
    SUM(CASE WHEN chain = 'Zora' THEN contracts_deployed ELSE 0 END) AS zora_contracts_deployed,
    SUM(CASE WHEN chain = 'OP Mainnet' THEN contracts_deployed ELSE 0 END) AS op_mainnet_contracts_deployed,
    SUM(CASE WHEN chain = 'Mint' THEN contracts_deployed ELSE 0 END) AS mint_contracts_deployed,
    SUM(CASE WHEN chain = 'Mode' THEN contracts_deployed ELSE 0 END) AS mode_contracts_deployed
FROM 
    superchain_calls
GROUP BY 
    block_date
ORDER BY 
    block_date;

Resultado:

94 filas / 9.36 KB en 29,781 ms

Enlace del Widget Optimizado en TokenFlow

Análisis de la Excepción

A pesar de aplicar las mismas técnicas de optimización, la mejora fue mínima (de 30,429 ms a 29,781 ms). Posibles razones:

Tamaño de los datos: El volumen de datos era significativamente menor, por lo que la optimización no generó una mejora notable en el tiempo de ejecución.
Complejidad del cálculo: El conteo de contratos desplegados (COUNT(*)) ya se manejaba eficientemente, y evitar el uso de PIVOT no aportó una mejora significativa.
Procesamiento de tipos de transacción: El filtro por call_type IN ('CREATE', 'CREATE2') es directo y no introduce sobrecarga, limitando las posibilidades de optimización.

Conclusión Final del Análisis

En este artículo, exploré las optimizaciones aplicadas a consultas SQL para analizar métricas clave en las blockchains de la Superchain, enfocándome en transacciones diarias, direcciones activas y contratos desplegados. En la mayoría de los casos, el enfoque de agregación temprana y otras técnicas optimizaron significativamente el rendimiento.

Sin embargo, el análisis de contratos desplegados presentó una excepción, recordándonos que las optimizaciones no siempre tendrán el mismo impacto en todos los contextos y tipos de consultas.

Resumen de los Pilares y Resultados

Transacciones Diarias: Reducción del tiempo de ejecución de 5,879 ms a 1,038 ms (84% de mejora).
Direcciones Activas: Reducción de 21,207 ms a 11,231 ms (47% de mejora).
Contratos Desplegados (Excepción): Reducción mínima de 30,429 ms a 29,781 ms (2% de mejora).

Optimizaciones Aplicadas - Resumen

Selección de columnas específicas.
Filtrado por fecha optimizado.
Uso de SUM con CASE para evitar PIVOT.
Combinación eficiente de datos con UNION ALL.

Conclusión General

Las optimizaciones aplicadas, como la agregación temprana y la selección cuidadosa de columnas, demostraron ser efectivas en la mayoría de los casos. Estas mejoras no solo reducen el tiempo de ejecución, sino que también hacen las consultas más legibles y mantenibles. Aunque siempre habrá casos donde el impacto sea menor, este análisis evidencia cómo pequeños ajustes pueden generar mejoras significativas en el rendimiento en entornos con grandes volúmenes de datos como el análisis de blockchains.

Push Express

Wolfcito | Luis Fernando Ushiña 🐺 — Fri, 04 Oct 2024 00:50:48 +0000

The Ultimate Tool for Integrating Push Protocol into Your Project

In the world of web and mobile applications, push notifications have become essential for improving user engagement. However, integrating these notifications, especially in projects that use emerging technologies like Web3, can be complex. This is where Push Express comes in, simplifying the process by offering a powerful and easy-to-implement solution for developers.

What is Push Express?

Push Express is a tool designed to simplify the integration of Push Protocol components into web projects. With a focus on simplicity and efficiency, Push Express allows you to quickly add Push Protocol components using TypeScript or JavaScript. It also supports popular developer tools like Yarn and NPM, making installation and configuration almost instant.

Key Features of Push Express

1. Ease of use with a single command

One of the most notable features of Push Express is its simplicity. The tool allows you to add Push Protocol components with a single command:

npx push-express add notification

Or, if you prefer to install it globally:

push-express add notification

This ease of use allows developers to integrate components in seconds, without the need for complex manual configurations.

2. Support for TypeScript and JavaScript

Push Express offers developers the flexibility to choose between TypeScript (default) or JavaScript, ensuring that the tool can adapt to any tech stack:

TypeScript: Ideal for minimizing runtime errors thanks to its static typing.
JavaScript: Perfect for projects that prioritize flexibility and speed.

3. Automated dependency installation

Integrating additional libraries can often be tedious. Push Express solves this problem by automating the installation of the necessary dependencies for managing notifications:

Yarn: If you're a Yarn user, just select this option, and the tool will handle everything for you.

  yarn add @pushprotocol/restapi@latest ethers@^5.7

NPM: You can also opt for NPM to install the dependencies:

  npm install @pushprotocol/restapi@latest ethers@^5.7

Manual: If you prefer to do it manually, Push Express will guide you with the appropriate commands.

4. Seamless integration with Push Protocol

Push Express simplifies direct integration with Push Protocol, eliminating the need for complex configurations. By lowering the barriers to entry, anyone can easily implement Push Protocol notifications into their Web3 platforms. This makes Push Express an ideal tool for developers working on dApps or blockchain-related projects, making Web3 notification management accessible and practical.

Why Use Push Express?

Modern tools aim to simplify processes without sacrificing functionality, and Push Express successfully achieves both.

1. Time-saving

Integrating push notifications into your project can be complicated, especially for newcomers to Web3. Push Express saves valuable time, allowing you to focus on the most important features of your application.

2. Scalability

With its support for TypeScript and JavaScript, Push Express is flexible enough to integrate into projects of any size, from small applications to large platforms. Using TypeScript provides typed code that minimizes errors and facilitates long-term scalability.

3. Web3 compatibility

The fact that Push Express integrates seamlessly with Push Protocol, a leading platform for decentralized notifications, makes it an indispensable tool for any developer working with blockchain or Web3 applications. With just a few minutes of setup, you’ll be sending notifications to users in no time.

4. Community and contributions

Push Express is open to the developer community. This ensures that the tool will continue to improve over time and offers developers the chance to collaborate and enhance the experience for other users. You can fork the project, add new features, and contribute to the official GitHub repository.

Practical Integration Example

Here’s how your project structure would look after adding a notification component with Push Express:

src/
├── components/
│   └── push-notification/
│       ├── index.ts
│       └── push-notification.tsx
└── service/
    └── push-notification/
        ├── index.ts
        └── push-notification.service.ts

With just one command, you’ll have a clear and functional structure in your project, allowing you to start working with push notifications without worrying about complex initial configurations.

To import the new component, just add the following:

import { PushNotification } from '@/components/push-notification'

export default function Example() {
  return <PushNotification />
}

Now, you can enjoy your new component.

Check out your new notification here:
View notification

Conclusion

Push Express is an essential tool for any developer looking to simplify the integration of push notifications. Its ability to handle both TypeScript and JavaScript, along with its automated dependency installation and seamless integration with Push Protocol, makes it a powerful and complete solution.

If you’re building an application that requires push notifications, whether Web2 or Web3, Push Express is the ideal choice to accelerate your development, improve productivity, and ensure a hassle-free integration.

For more information or to contribute to the project, visit the GitHub repository.

Wolfcito

Web3 Developer & Push Protocol Ambassador

X / Twitter: x.com/AKAwolfcito
Discord: @akawolfcito
GitHub: github.com/wolfcito

Push Protocol

Empowering Web3 with decentralized notifications

Push Express

Wolfcito | Luis Fernando Ushiña 🐺 — Fri, 04 Oct 2024 00:48:19 +0000

La Herramienta Definitiva para Integrar Push Protocol en tu Proyecto

En el mundo de las aplicaciones web y móviles, las notificaciones push se han vuelto esenciales para mejorar la interacción con los usuarios. Sin embargo, integrar estas notificaciones, especialmente en proyectos que utilizan tecnologías emergentes como Web3, puede resultar complejo. Aquí es donde Push Express entra en juego, simplificando este proceso con una solución potente y fácil de implementar para desarrolladores.

¿Qué es Push Express?

Push Express es una herramienta diseñada para facilitar la integración de componentes de Push Protocol en proyectos web. Con un enfoque en la simplicidad y la eficiencia, Push Express permite añadir componentes de Push Protocol de manera rápida, utilizando TypeScript o JavaScript. Además, ofrece soporte para las herramientas más populares entre los desarrolladores, como Yarn y NPM, haciendo que la instalación y configuración sean prácticamente instantáneas.

Características clave de Push Express

1. Facilidad de uso con un solo comando

Una de las características más destacadas de Push Express es su simplicidad. La herramienta permite agregar componentes de Push Protocol con un solo comando:

npx push-express add notification

O, si prefieres instalarlo globalmente:

push-express add notification

Este nivel de simplicidad permite a los desarrolladores integrar componentes en segundos, eliminando la necesidad de configuraciones manuales complicadas.

2. Soporte para TypeScript y JavaScript

Push Express permite a los desarrolladores elegir entre TypeScript (por defecto) o JavaScript, ofreciendo flexibilidad para adaptarse a diferentes stacks tecnológicos:

TypeScript: Ideal para minimizar errores en tiempo de ejecución gracias a su tipado estático.
JavaScript: Perfecto para proyectos que priorizan la flexibilidad y rapidez.

3. Instalación automatizada de dependencias

La integración de bibliotecas adicionales suele ser un proceso tedioso. Push Express lo soluciona al automatizar la instalación de las dependencias necesarias para manejar notificaciones:

Yarn: Si usas Yarn, selecciona esta opción y Push Express se encargará de todo.

  yarn add @pushprotocol/restapi@latest ethers@^5.7

NPM: También puedes optar por NPM para instalar las dependencias:

  npm install @pushprotocol/restapi@latest ethers@^5.7

Manual: Si prefieres hacerlo manualmente, Push Express te guiará con los comandos adecuados.

4. Integración sencilla con Push Protocol

Push Express busca simplificar la integración directa con Push Protocol, eliminando configuraciones complejas. Al reducir las barreras de entrada, cualquier persona puede implementar notificaciones de Push Protocol en sus plataformas Web3 de manera ágil, lo que la convierte en una herramienta ideal para desarrolladores de dApps o proyectos blockchain. La gestión de notificaciones Web3 nunca ha sido tan accesible y práctica.

¿Por qué elegir Push Express?

Las herramientas modernas buscan simplificar los procesos sin sacrificar funcionalidad, y Push Express lo logra con éxito.

1. Ahorro de tiempo

Integrar notificaciones push en tu proyecto puede ser una tarea complicada, especialmente para quienes son nuevos en Web3. Push Express te ahorra tiempo valioso, permitiéndote concentrarte en las características más importantes de tu aplicación.

2. Escalabilidad

Con su soporte para TypeScript y JavaScript, Push Express es lo suficientemente flexible para integrarse en proyectos de cualquier tamaño, desde aplicaciones pequeñas hasta grandes plataformas. El uso de TypeScript proporciona código tipado que minimiza errores y facilita la escalabilidad a largo plazo.

3. Compatibilidad con Web3

El hecho de que Push Express se integre sin problemas con Push Protocol, una plataforma líder en notificaciones descentralizadas, lo convierte en una herramienta indispensable para cualquier desarrollador que trabaje con blockchain o aplicaciones Web3. Con solo unos minutos de implementación, estarás enviando notificaciones a los usuarios.

4. Comunidad y contribuciones

Push Express está abierto a la comunidad de desarrolladores. Esto garantiza que la herramienta seguirá mejorando con el tiempo y brinda la oportunidad de colaborar y mejorar la experiencia de otros usuarios. Puedes hacer un fork del proyecto, añadir nuevas funcionalidades y contribuir al repositorio oficial en GitHub.

Ejemplo práctico de integración

Así es como se vería la estructura de tu proyecto después de agregar un componente de notificaciones con Push Express:

src/
├── components/
│   └── push-notification/
│       ├── index.ts
│       └── push-notification.tsx
└── service/
    └── push-notification/
        ├── index.ts
        └── push-notification.service.ts

Solo necesitas un comando para obtener una estructura clara y funcional en tu proyecto. Esto te permite empezar a trabajar con notificaciones push sin preocuparte por configuraciones iniciales complicadas.

Para importar el nuevo componente, solo añade lo siguiente:

import { PushNotification } from '@/components/push-notification'

export default function Example() {
  return <PushNotification />
}

Ya puedes disfrutar de tu nuevo componente.

Mira tu nueva notificación en acción aquí:
Ver notificación

Conclusión

Push Express es una herramienta esencial para cualquier desarrollador que desee simplificar la integración de notificaciones push. Su capacidad para manejar tanto TypeScript como JavaScript, junto con la instalación automatizada de dependencias y su perfecta integración con Push Protocol, la convierten en una solución poderosa y completa.

Si estás construyendo una aplicación que requiere notificaciones push, ya sea Web2 o Web3, Push Express es la opción ideal para acelerar tu desarrollo, mejorar tu productividad y garantizar una integración sin complicaciones.

Para más información o para contribuir al proyecto, visita el repositorio en GitHub.

Wolfcito

Web3 Developer & Push Protocol Ambassador

X / Twitter: x.com/AKAwolfcito
Discord: @akawolfcito
GitHub: github.com/wolfcito

Push Protocol

Empowering Web3 with decentralized notifications

Supersim: Simulating the Future of the Superchain Locally

Wolfcito | Luis Fernando Ushiña 🐺 — Wed, 25 Sep 2024 18:27:03 +0000

There are moments when technology pulses as an extension of our own hearts, imploring us to share its possibilities. Today, my heart compels me to write about Supersim, a tool that promises to simplify development on the Superchain, allowing us to simulate complex environments locally. As a developer at Mode Network, I’ve had the opportunity to explore this tool and its potential, and I want to share how it can revolutionize development in the Superchain ecosystem.

What is Supersim?

Supersim is a lightweight tool designed to locally simulate the Superchain, a network that combines multiple L2s over a single L1. This allows developers not only to deploy contracts on multiple nodes simultaneously but also to test interoperability between different local blockchains. What makes this tool unique is that it facilitates communication between layers (L1 <> L2 and L2 <> L2) in a simple way, without needing to set up a complex network environment.

Key Features:

Multiple Anvil nodes: You can spin up multiple Anvil nodes with one command, allowing for quick testing in a local environment.
Predeployed OP Stack contracts: These contracts simulate how the Superchain infrastructure will work, such as bridges between layers and cross-chain messaging.
Interoperability support: Simulates message and asset transfers between L2 chains, testing key features such as deposits and token transfers.

How to Get Started with Supersim

If your heart is already beating to get started, here are the basic steps to set up Supersim:

1. Install Dependencies

Before starting, you need to install Foundry and make sure Anvil is correctly configured. This tool will serve as the base to run multiple nodes in your local environment. Once this is done, simply install Supersim:

brew install ethereum-optimism/tap/supersim

2. Vanilla Mode

Supersim offers two main modes. In Vanilla mode, you can start three chains—one L1 and two L2—with OP Stack contracts already deployed. This is an ideal environment for basic interoperability tests and simulating message transfers between chains.

supersim

3. Fork Mode

If you prefer to work with contracts already deployed on testnet or mainnet, you can use Fork mode. This allows you to fork any available chain in the Superchain network and simulate the current state of that chain in your local environment.

supersim fork --chains=op,base,zora

Use Cases: The Power of Simulation

Supersim simplifies something that, for many of us, might seem overwhelming: interoperability between different layers and chains within the Superchain. There’s no longer a need to set up a complex environment to test how assets can move between L1 and L2 or how to transfer tokens from one L2 to another. Here’s an example:

Depositing ETH from L1 to L2:

cast balance 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 --rpc-url http://127.0.0.1:9545
cast send 0xa01ae68902e205B420FD164435F299E07b0C778b "bridgeETH(uint32 _minGasLimit, bytes calldata _extraData)" 50000 0x --value 0.1ether --rpc-url http://127.0.0.1:8545 --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

This process simulates a bridge between L1 and L2, allowing you to verify how the ETH balance changes once the process is completed. All in a local environment!

Transferring Tokens Between L2 Chains:

Similarly, Supersim allows you to test token transfers between two L2s with just a couple of commands. What’s most impressive is how the "autorelay" feature can be enabled to automatically send the cross-chain message without manual intervention.

supersim --interop.autorelay

Why Use Supersim?

For those of us developing in the Superchain, Supersim allows us to iterate faster, test more complex contracts, and work on cross-chain flows without the complexity of setting up a full devnet. As a developer at Mode Network, I can say that this tool has made our testing easier and has accelerated development in environments where interoperability is key.

Contributing to the Future of the Superchain

At Mode Network, we strongly believe in open collaboration. If you have ideas, improvements, or simply want to contribute to the growth of this ecosystem, we invite you to get involved. The future of the Superchain depends on developers like you who dare to innovate. So don’t hesitate to join the project, contribute to Supersim, and stay tuned for updates from Mode Network.

My heart compelled me to write about this, and here I am, sharing this incredible tool with you. Don’t miss out on what’s coming, because we are just at the beginning of what Mode Network and the Superchain can achieve.

Let’s build together!

I hope this article inspires more developers to join the project and explore the incredible possibilities of Supersim.

Exclusive New Roles on Mode Network Discord Server for Stakers

Wolfcito | Luis Fernando Ushiña 🐺 — Mon, 29 Jul 2024 22:10:26 +0000

Hello, MODE community!

Stakers, we have exciting news for you! The Mode Network Discord server now offers exclusive new roles just for you. Here’s how you can unlock them:

Join the Official Mode Network Discord Server
Verify Your Wallet
Receive Your Exclusive Role

This is just the beginning of a series of improvements planned by MODE for its most dedicated holders.

At the moment, we have introduced two special roles: Giga Chad and Super Chad.

Although the specific benefits that will come with these roles are still in process, if you already hold MODE, simply join the official channel and make sure to link your wallet containing the MODE tokens. This will automatically allow you to obtain the corresponding role based on the amount of MODE you hold. It’s an excellent opportunity to maximize the value of your holdings and take advantage of everything MODE has to offer.

So don’t wait any longer and make the most of being a MODE holder!

Where to start?

Mode Network (Discord server) > Verification Channel

If you need to verify your address, press "Verify your MODE wallet"

If you want to explore a bit more about Mode on Guild.xyz

That’s it! You have a new ROLE

Enhancing Transparency, Security, and Efficiency in ModeSpray with Tenderly

Wolfcito | Luis Fernando Ushiña 🐺 — Wed, 26 Jun 2024 06:16:45 +0000

In the fast-paced world of decentralized applications (DApps) and smart contracts, transparency, security, and efficiency are fundamental pillars. These elements not only ensure the proper functioning of smart contracts but also strengthen the trust of users and developers in the blockchain ecosystem. In this article, we will explore how to achieve these goals using advanced tools like Tenderly, through a real project called ModeSpray.

Brief Introduction

Tenderly is a comprehensive platform for Web3 professionals. It provides a multichain node with integrated development environments and debugging tools to build and scale decentralized applications (DApps) with ease. It allows real-time monitoring of the state and interactions of smart contracts, facilitating early detection of issues and performance optimization. Recently, it has started supporting the Mode Network, which is a crucial point for the project to be implemented.

ModeSpray is a real project that distributes a wide range of tokens transparently, securely, efficiently, and massively to multiple wallets with a single click. Right now it is living on the Mode Network blockchain. In the future, it is planned to extend to other blockchains.

For these reasons, it is proposed to use Tenderly's suite of tools as a valuable ally for the project.

Why Transparency is Fundamental

Transparency in smart contracts refers to the ability of all stakeholders to see and verify the operations and transactions that occur on the blockchain. This is crucial for fostering trust among users, who can verify transactions in real-time and prevent fraud through direct links to the transactions on the blockchain.

In ModeSpray, we will use Tenderly's real-time alert capabilities to enhance transparency and security from the developers' side, allowing for more efficient tracking and verification of token distribution transactions.

Security: A Non-Negotiable Pillar

Security is undoubtedly one of the major concerns in the development of smart contracts. Code vulnerabilities can be exploited, leading to significant losses of funds and data. To ensure security in ModeSpray, we implement several key measures using Tenderly:

Alerts and Notifications: We configure alerts to receive immediate notifications of any unauthorized access attempts or suspicious activity.
Continuous Monitoring: Through Tenderly's suite, we continuously monitor the smart contract, detecting any anomalous behavior that may indicate a vulnerability.

Operational Efficiency: Key to Success

Efficiency in the use of smart contracts refers to the ability to execute transactions and operations quickly and with minimal gas costs. This not only improves the user experience but also reduces operational costs. In ModeSpray's roadmap, improving efficiency using Tenderly is considered:

Code Optimization: Utilizing Tenderly's performance analysis tools to identify and optimize the parts of the code that consume the most gas.
Scalability Testing: Conducting tests in controlled environments to ensure that the contract can handle a large volume of transactions without issues.
User Feedback: Identifying areas for improvement and continuously optimizing the performance of the smart contract.

Road Mode Spray - Important Technical Features

Below is a table with key technical features that should be considered when implementing smart contracts with Tenderly:

Technical Feature	Description
Alerts and Notifications	Configuration of instant alerts for critical events or detected anomalies.
Integration with Dev Environments	Testing and debugging in development environments to ensure code quality.
Real-Time Monitoring	Continuous supervision of the smart contract's state and transactions in controlled environments.
Complete Traceability	Detailed record of all actions and changes made to the smart contract.
Performance Analysis	Tools to analyze performance and optimize code efficiency.

Implementation in ModeSpray

In the implementation of ModeSpray, we use Tenderly to establish a controlled environment where we can monitor every interaction of the smart contract. This includes setting up alerts to receive immediate notifications about any irregularity or critical event. Additionally, we leverage Tenderly's traceability capabilities to thoroughly record every action performed on the platform, thus ensuring the transparency and integrity of our operations.

Step 1: Initial Configuration
First, we integrate Tenderly into our development environment by configuring the necessary credentials and permissions to access the monitoring and analysis tools.

Step 2: Alert Configuration
We set up alerts for critical events such as unauthorized access attempts, failed transactions, or any unusual activity. These alerts reach us via email and notifications on the Tenderly dashboard.

Step 3: Testing in Controlled Environments
Before deploying any update, we conduct exhaustive tests in controlled environments using Tenderly's simulation capabilities. This allows us to ensure that any change does not introduce new vulnerabilities or performance issues.

To conclude, it only remains to say that the combination of transparency, security, and efficiency in the use of smart contracts and DApps is essential for success and trust in the blockchain ecosystem. Tenderly emerges as a tool that empowers ModeSpray developers, significantly improving response capacity and effective supervision in critical events. With ModeSpray as a practical example, we can appreciate how these advanced technologies are transforming the way we interact with the blockchain, paving the way for a more secure and transparent future.

Discover more about how Tenderly can optimize your smart contracts and strengthen your blockchain project today!

Enhancing Transparency, Security, and Efficiency in ModeSpray with Tenderly

Wolfcito | Luis Fernando Ushiña 🐺 — Wed, 26 Jun 2024 06:16:45 +0000

Brief Introduction

For these reasons, it is proposed to use Tenderly's suite of tools as a valuable ally for the project.

Why Transparency is Fundamental

Security: A Non-Negotiable Pillar

Alerts and Notifications: We configure alerts to receive immediate notifications of any unauthorized access attempts or suspicious activity.
Continuous Monitoring: Through Tenderly's suite, we continuously monitor the smart contract, detecting any anomalous behavior that may indicate a vulnerability.

Operational Efficiency: Key to Success

Code Optimization: Utilizing Tenderly's performance analysis tools to identify and optimize the parts of the code that consume the most gas.
Scalability Testing: Conducting tests in controlled environments to ensure that the contract can handle a large volume of transactions without issues.
User Feedback: Identifying areas for improvement and continuously optimizing the performance of the smart contract.

Road Mode Spray - Important Technical Features

Below is a table with key technical features that should be considered when implementing smart contracts with Tenderly:

Technical Feature	Description
Alerts and Notifications	Configuration of instant alerts for critical events or detected anomalies.
Integration with Dev Environments	Testing and debugging in development environments to ensure code quality.
Real-Time Monitoring	Continuous supervision of the smart contract's state and transactions in controlled environments.
Complete Traceability	Detailed record of all actions and changes made to the smart contract.
Performance Analysis	Tools to analyze performance and optimize code efficiency.

Implementation in ModeSpray

Step 1: Initial Configuration
First, we integrate Tenderly into our development environment by configuring the necessary credentials and permissions to access the monitoring and analysis tools.

Discover more about how Tenderly can optimize your smart contracts and strengthen your blockchain project today!

Watch Each Block Get Created and Defeat Sweepers 🔥

Wolfcito | Luis Fernando Ushiña 🐺 — Mon, 24 Jun 2024 23:45:35 +0000

A Touch of Magic in the Dark Forest of the Blockchain

Blockchain can often feel like traversing a dark forest fraught with challenges, especially when dealing with MEV. It's a realm where every transaction carries risks and rewards. In this article, we delve into strategies to safeguard your ETH from potential threats lurking within this mysterious landscape.

Recently, I encountered a critical security issue that resulted in significant losses from my prized rewards earned during a hackathon. This setback underscored the importance of vigilance and security measures in every project, emphasizing personal responsibility.

Sure, here's a revised version:

Would you like to read more about it? You can do so here.

Turning adversity into opportunity, I embarked on a journey to fortify my defenses against such vulnerabilities. This led me to coding a nice script designed to try to protect the remaining ETH in compromised wallets.

In this guide, we'll explore how this script operates and its pivotal role in safeguarding your ETH effectively.

How This Module Saves Your Remaining ETH

To address the challenge of securing compromised wallets, I developed a script that monitors and transfers ETH to safety when conditions warrant.

Importing and Configuring Dependencies

import { utils, Wallet, providers } from 'ethers'
import { gasPriceToGwei } from '../lib/converter.lib'
require('dotenv').config()

const { formatEther } = utils

const SAFE_WALLET = process.env.SAFE_WALLET as string
const RPC_URL = process.env.RPC_URL as string
const provider = new providers.JsonRpcProvider(RPC_URL)
const thresholdToTransfer = '0.01'

if (!SAFE_WALLET || !RPC_URL) {
  throw new Error(
    'SAFE_WALLET and RPC_URL must be set in the environment variables.'
  )
}

console.log('Safe address: ', SAFE_WALLET)

Dependencies: Imports necessary functions and classes from the ethers library to interact with the Ethereum blockchain.
Environment Variables: Loads environment variables like SAFE_WALLET and RPC_URL for configuration.

Monitoring and Safe Transfer Function

export const monitoringAndSafe = async (burnWallet: Wallet) => {
  try {
    const threshold = utils.parseEther(thresholdToTransfer)
    const balance = await burnWallet.getBalance()
    if (balance.isZero()) {
      console.log('Balance is zero')
      return
    }

    const gasPrice = await provider.getGasPrice()
    const gasLimit = 21000

    console.log(`Gas price: ${gasPriceToGwei(gasPrice)} gwei`)

    const gasCost = gasPrice.mul(gasLimit).mul(12).div(10)

    if (balance.lt(gasCost)) {
      console.log(
        `Insufficient funds for gas (balance=${formatEther(
          balance
        )} ETH, gasCost=${formatEther(gasCost)} ETH)`
      )
      return
    }

    if (balance.gt(threshold)) {
      const safeValue = balance.sub(gasCost)
      console.log(`safeValue: ${formatEther(safeValue)} ETH`)

      try {
        console.log(`Transferring ${formatEther(safeValue)} ETH to safe wallet`)
        const nonce = await provider.getTransactionCount(
          burnWallet.address,
          'latest'
        )
        const tx = await burnWallet.sendTransaction({
          to: SAFE_WALLET,
          gasLimit,
          gasPrice,
          nonce,
          value: safeValue,
        })
        console.log(
          `Transaction sent with nonce ${tx.nonce}, transferring ${formatEther(
            safeValue
          )} ETH at gas price ${gasPriceToGwei(gasPrice)}`
        )
        console.log(
          `Safe wallet balance: ${
            SAFE_WALLET && formatEther(await provider.getBalance(SAFE_WALLET))
          } ETH`
        )
      } catch (err: any) {
        console.log(`Error sending transaction: ${err.message ?? err}`)
      }
    } else {
      console.log(
        `Balance is below threshold: ${utils.formatEther(balance)} ETH`
      )
    }
  } catch (error) {
    console.error('Error in monitoringAndSafe function:', error)
  }
}

Detailed Explanation

Threshold Check: Verifies if the wallet's balance meets a predefined threshold before initiating any transfer.
Gas Price Calculation: Fetches the current gas price and calculates the gas cost required for transactions.
Transaction Execution: Sends ETH from the compromised wallet to a designated safe wallet, ensuring sufficient balance for gas fees.

This script offers a proactive approach to protecting your ETH by automatically transferring funds to safety when conditions are met. It serves as a vital defense mechanism against potential threats in the blockchain ecosystem.

In conclusion, safeguarding your assets in the blockchain realm requires vigilance and proactive measures. By leveraging tools like this script, you can mitigate risks and ensure the security of your crypto assets.

We must remember that this is not an infallible script "even though Mighty Wolfcito has used it in his wallet before", but it could give you a good advantage against sweepers, and by using it, you are assuming the inherent risks associated with it.

By implementing this script, you can monitor and safeguard your ETH, mitigating risks associated with compromised wallets. Embrace the power of blockchain security and protect your assets with every transaction.

Burn It All! Tired of Sweepers, Monitor and Watch Each Block Burn 🔥

Wolfcito | Luis Fernando Ushiña 🐺 — Mon, 03 Jun 2024 19:40:29 +0000

A touch of magic in the dark forest of the blockchain.

While blockchain is often described as a battlefield, MEV represents an even greater challenge... It's a dark and uncertain territory. We'll explore this shadowy realm and learn how to tackle its challenges on our journey towards clarity and fairness in blockchain transactions.

Recently, I faced a challenging security situation. An unexpected error caused significant losses in one of my most cherished awards, earned after dedicated hours in a hackathon. It was a stark reminder of the importance of security in any project and of taking personal responsibility at all times.

After overcoming feelings of frustration and anger, I realized there was an opportunity for growth and learning amidst adversity. I decided to tackle the problem with determination and seek innovative solutions.

During my quest for answers, I came across a small script that promised to be the key to addressing security threats. Without hesitation, I immersed myself in the coding process, facing new challenges and learning concepts that were previously unknown to me. It is for this reason that I learned a bit about the concepts of MEV and how monitoring blocks could help us burn it ALL down!!! every block 🔥.

Next, I'll share some of the resources I used to build a small shielding system for those who wish, while not recovering their ERC20 tokens, at least to protect what is already in that compromised safe.

Firstly, I created an RPC URL access point to interact with Mode, following the official documentation meticulously. I also discovered a valuable tool in the Blast API.

As part of my strategy, I chose an ERC20 token, such as USDC on the test network, to conduct comprehensive tests of the script. I identified the ABI and meticulously adjusted it to the code, ensuring every detail was correct.

To send ERC-20 tokens instead of ETH, you need to interact with the corresponding ERC-20 token contract. This involves calling the transfer method of the token contract to transfer tokens to another address.

Below, I'll show you how you can create your burn function to send ERC-20 tokens:

Steps:

Import the ERC-20 token ABI: You need the ABI of the ERC-20 token contract. You can obtain it from Etherscan or the token contract repository.
Create an instance of the ERC-20 token contract: Use the ethers.js library to create an instance of the token contract.
Call the transfer method: Call the transfer method of the token contract to transfer the tokens to another address.

Code to 'BURN' ERC-20 tokens:

import { utils, Wallet, BigNumber, Contract } from 'ethers'
import args from './args'
const { formatEther, parseUnits } = utils
const flashbotsBeerFund = args.beerFund

const erc20Abi = [
  "function balanceOf(address owner) view returns (uint256)",
  "function transfer(address to, uint256 value) returns (bool)",
]

const tokenAddress = "0xYourTokenAddressHere" // Replace with the ERC-20 token contract address
const gasLimit = 100000 // Estimated gas limit for ERC-20 token transfers

const burn = async (burnWallet: Wallet) => {
  const tokenContract = new Contract(tokenAddress, erc20Abi, burnWallet)

  // Get the balance of the ERC-20 token
  const balance = await tokenContract.balanceOf(burnWallet.address)
  if (balance.isZero()) {
    console.log(`Token balance is zero`)
    return
  }

  // Get the gas price
  const gasPrice = await burnWallet.provider.getGasPrice()
  console.log(`Gas price: ${utils.formatUnits(gasPrice, "gwei")} gwei`)

  // Calculate the gas cost
  const gasCost = gasPrice.mul(gasLimit)
  console.log(`Estimated gas cost: ${formatEther(gasCost)} ETH`)

  // Check if there are enough funds to cover the gas cost in ETH
  const ethBalance = await burnWallet.getBalance()
  if (ethBalance.lt(gasCost)) {
    console.log(`Insufficient ETH balance for gas (balance=${formatEther(ethBalance)} ETH, gasCost=${formatEther(gasCost)} ETH)`)
    return
  }

  try {
    console.log(`Burning ${utils.formatUnits(balance, 18)} tokens`)
    const tx = await tokenContract.transfer(flashbotsBeerFund, balance, {
      gasLimit,
      gasPrice,
    })
    await tx.wait() // Wait for the transaction to be confirmed
    console.log(
      `Sent tx with hash ${tx.hash} burning ${utils.formatUnits(
        balance,
        18
      )} tokens at gas price ${utils.formatUnits(gasPrice, "gwei")} gwei`
    )
    console.log(
      `Beer fund token balance: ${utils.formatUnits(
        await tokenContract.balanceOf(flashbotsBeerFund),
        18
      )} tokens`
    )
  } catch (err: any) {
    console.log(`Error sending tx: ${err.message ?? err}`)
  }
}

export default burn

Explanation of the most important parts:

Importing and configuring the ERC-20 token contract:

const erc20Abi = [
  "function balanceOf(address owner) view returns (uint256)",
  "function transfer(address to, uint256 value) returns (bool)",
]

const tokenAddress = "0xYourTokenAddressHere" // Address of the ERC-20 token contract
const tokenContract = new Contract(tokenAddress, erc20Abi, burnWallet)

Getting the balance of the ERC-20 token:

const balance = await tokenContract.balanceOf(burnWallet.address)

Calculating the gas cost:
```
const gasCost = gasPrice.mul(gasLimit)
```

Verifying sufficient ETH funds to cover the gas:

const ethBalance = await burnWallet.getBalance()
if (ethBalance.lt(gasCost)) {
  console.log(`Insufficient ETH balance for gas (balance=${formatEther(ethBalance)} ETH, gasCost=${formatEther(gasCost)} ETH)`)
  return
}

BURNING the ERC-20 tokens:

const tx = await tokenContract.transfer(flashbotsBeerFund, balance, {
  gasLimit,
  gasPrice,
})
await tx.wait() // Wait for the transaction to be confirmed

This code burns the ERC-20 tokens after verifying that there is enough ETH to cover the gas cost. "It doesn't actually burn them ;) but I hope to deter many bad actors with that keyword."

If you want to conduct a small test, you could create your own ERC20 token to play with. Here's one that I used for testing. View on Explorer

You'll likely have the question:

Can you use it on mainnet? The answer is yes, but at your own risk. Remember, you should never trust a stranger 100%, even if that stranger is the great and powerful Wolfcito.

Although the experience was challenging and emotionally draining, I found a glimmer of hope amidst adversity: knowledge and a piece of code that could help others protect against similar threats in the future. While this code is simple in its design, its impact could be significant in the right hands.

In conclusion, this experience taught me the hard way about the importance of security and the need to always be prepared to face unexpected challenges. Although the journey was difficult, each obstacle overcome represented an opportunity for growth and strengthening.

I bid you farewell, but not before leaving you with this small tip to keep yourself a bit safer. Go and check that smart contracts don't have too many permissions over your assets at revoke.cash.

How new Builders Tame Mode Network

Wolfcito | Luis Fernando Ushiña 🐺 — Mon, 03 Jun 2024 03:40:54 +0000

Configuring Hardhat for Development on Mode Network

In this article, we'll explore how new builders, even those who feel like baby dinosaurs handling slightly older technologies, can configure their development environment using Hardhat to integrate with Mode Network. We'll break down the configuration file, covering network setup, Solidity compiler settings, gas usage reporting, Sourcify integration, and Etherscan integration. Each step is designed to allow any developer, regardless of their level of experience, to optimize their environment and work efficiently on Mode Network-specific projects.

What is Hardhat?

Hardhat is a development environment designed for building and testing decentralized applications (dApps) on the Ethereum blockchain. It provides a robust set of tools and plugins that simplify the process of compiling smart contracts, running tests, and deploying to various networks.

What is Mode Network?

Mode Network is a blockchain platform optimized for high performance and scalability. It offers developers a reliable environment to deploy decentralized applications, with a focus on efficient transaction processing and minimal costs.

Configuration Code Example

To get started, you need to install Hardhat locally in your project. Make sure you have Node.js and npm installed. Then, follow these steps:

Install Hardhat:

npm install --save-dev hardhat

Create a Hardhat Project:

npx hardhat

Update the hardhat.config.js File:

Here's an example configuration for Mode Network Mainnet:

import { HardhatUserConfig } from 'hardhat/config'
import '@nomicfoundation/hardhat-toolbox'
require('hardhat-deploy')
import * as dotenv from 'dotenv'
dotenv.config()

// Load environment variables
const { DEPLOYER_PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env
const providerApiKey = process.env.ALCHEMY_API_KEY

// Configuration object for Hardhat
const config: HardhatUserConfig = {
  networks: {
    // Configuration for local development network
    hardhat: {
      forking: {
        // URL for forking mainnet
        url: `https://eth-mainnet.alchemyapi.io/v2/${providerApiKey}`,
        // Enable forking if MAINNET_FORKING_ENABLED is 'true'
        enabled: process.env.MAINNET_FORKING_ENABLED === 'true',
      },
    },
    // Configuration for ModeTest network
    modetest: {
      // URL for ModeTest network
      url: 'https://sepolia.mode.network',
      // Chain ID for ModeTest network
      chainId: 919,
      // Account(s) to use for deployments on ModeTest network
      accounts: [DEPLOYER_PRIVATE_KEY as string],
      // Gas price for transactions on ModeTest network
      gasPrice: 10000,
    },
    // Configuration for Mode network
    mode: {
      // URL for Mode network
      url: 'https://mainnet.mode.network',
      // Chain ID for Mode network
      chainId: 34443,
      // Account(s) to use for deployments on Mode network
      accounts: [DEPLOYER_PRIVATE_KEY as string],
    },
  },
  // Solidity compiler configuration
  solidity: {
    // Version of Solidity compiler to use
    version: '0.8.20',
    settings: {
      // EVM version
      evmVersion: 'london',
    },
  },
  // Configuration for gas reporting
  gasReporter: {
    // Enable gas reporting if REPORT_GAS is defined
    enabled: process.env.REPORT_GAS !== undefined,
    // Set currency for gas reporting
    currency: 'USD',
  },
  // Configuration for Sourcify
  sourcify: {
    // Enable Sourcify
    enabled: true,
  },
  // Configuration for Etherscan integration
  etherscan: {
    // API key for Etherscan
    apiKey: {
      mode: ETHERSCAN_API_KEY as string,
    },
    // Custom chains configuration for Etherscan
    customChains: [
      // Configuration for ModeTest network in Etherscan
      {
        network: 'modetest',
        chainId: 919,
        urls: {
          // API URL for ModeTest network explorer
          apiURL: 'https://sepolia.explorer.mode.network/api',
          // Browser URL for ModeTest network explorer
          browserURL: 'https://sepolia.explorer.mode.network/',
        },
      },
      // Configuration for Mode network in Etherscan
      {
        network: 'mode',
        chainId: 34443,
        urls: {
          // API URL for Mode network explorer
          apiURL: 'https://explorer.mode.network/api',
          // Browser URL for Mode network explorer
          browserURL: 'https://explorer.mode.network/',
        },
      },
    ],
  },
}

export default config

Environment Variables:

Make sure to have your environment variables configured in a .env file:

PRIVATE_KEY=your_private_key
INFURA_PROJECT_ID=your_infura_project_id
ETHERSCAN_API_KEY=your_etherscan_api_key

Property Descriptions:

Property	Description
networks	Configuration for different Ethereum networks.
- hardhat	Configuration for local Hardhat network for development and testing.
- modetest	Configuration for ModeTest network.
- mode	Configuration for Mode network.
solidity	Configuration for Solidity compiler.
gasReporter	Configuration for gas usage reporting during tests.
sourcify	Configuration for Sourcify to verify contract source.
etherscan	Configuration for Etherscan integration, including API key and custom chain URLs.

Conclusion:

With this setup, new builders, even those who consider themselves "very new to the ecosystem," can seamlessly integrate and contribute to development on Mode Network. The detailed configuration and provided examples ensure a straightforward and accessible process for everyone.

Let's tame Mode Network together, step by step, like true builders in this "new" era! 🦖💻

Additional Resources: