Cómo construir un intercambio descentralizado (DEX)

¿Quieres construir una aplicación en blockchain? ¿Por qué no considerar un Exchange Descentralizado (DEX)?

Con thirdweb, construir cualquier aplicación en blockchain es sencillo. Para demostrarlo, esta guía te mostrará todo lo que un desarrollador necesita saber sobre cómo crear una aplicación de Exchange Descentralizado (DEX) que permita a los usuarios intercambiar entre tokens.

¿Listo para construir un DEX? ¡Vamos a sumergirnos!

¿Qué es un exchange descentralizado?

Un exchange descentralizado es un tipo de aplicación descentralizada que aprovecha los pools de liquidez y la funcionalidad de intercambio para ofrecer intercambios de criptomonedas entre pares. Esencialmente, permite a los usuarios comprar tokens de blockchain con criptomonedas.

A diferencia de los exchanges centralizados, los exchanges descentralizados no son operados por intermediarios o proveedores centralizados; en su lugar, soportan billeteras sin custodia, lo que significa que los usuarios no pierden el control de sus activos al usar la aplicación. También significa que no hay un solo punto de fallo: ninguna parte tiene acceso a los fondos de la aplicación.

¿Por qué construir un exchange descentralizado?

Los exchanges descentralizados son esenciales para el mercado de intercambio de criptomonedas, permitiendo a los usuarios intercambiar cripto directamente entre ellos. Construir un DEX significa apoyar el ecosistema blockchain y facilitar transferencias cripto a cripto. También te da control total sobre las características que podrías ofrecer y elimina la responsabilidad de construir billeteras de custodia seguras. Los usuarios simplemente inician sesión con sus billeteras existentes y pueden interactuar con la plataforma a través de contratos inteligentes descentralizados.

Antes de empezar a construir un DEX

Antes de comenzar, asegúrate de tener lo siguiente:

• Una cuenta de thirdweb

• Tu clave API de thirdweb (obtenla desde la configuración de tu cuenta)

• Node.js instalado en tu máquina

• Conocimientos básicos de React, Next.js, TypeScript

Cómo construir un exchange descentralizado

Crea el Contrato Inteligente del DEX

1. Navega a tu terminal y ejecuta:

2. Nombre tu proyecto 'dex-contract' y elige Hardhat y TypeScript.

3. A continuación, cambia al nuevo directorio. Abre el proyecto en tu editor de código. En la carpeta contracts/, renombra Contract.sol a DEX.sol.

4. Actualiza el código del contrato en DEX.sol (puedes encontrarlo en el repositorio de GitHub de Contracts):

5. Despliega el contrato inteligente usando:

Selecciona la red a la que deseas desplegar (asegúrate de que coincida con donde tu token ERC20 está desplegado).

5. Finalmente copia la dirección del contrato. La necesitaremos al construir la app.

¡Ahora tu contrato inteligente DEX está listo!

Construye la Aplicación DEX

El siguiente paso es construir la aplicación DEX; una aplicación web que interactúa con nuestro contrato DEX. Usaremos Next.js y el SDK de thirdweb.

1. Navega a tu terminal y ejecuta:

2. Nombre el proyecto 'dex-app' y elige Next.js y TypeScript.

3. Navega al directorio recién creado:

4. Abre el proyecto en tu editor de código e instala las dependencias:

¡Ahora tu aplicación web está lista! ¡Es hora de conectar las piezas!

Configura el proveedor thirdweb

1. Abre pages/_app.tsx y configura el proveedor thirdweb con tu clave API y red:

import { ThirdwebProvider } from '@thirdweb-dev/react';

function MyApp({ Component, pageProps }) {
  const API_KEY = process.env.NEXT_PUBLIC_API_KEY || '';
  const activeChain = 'mumbai';

  return (
    <ThirdwebProvider supportedChains={[activeChain]} apiKey={API_KEY}>
      <Component {...pageProps} />
    </ThirdwebProvider>

2. Asegúrate de añadir tu clave API de thirdweb al archivo .env.

¡Ahora thirdweb está configurado! Pasemos a las funcionalidades de la app.

Construye los componentes de intercambio

Tu aplicación descentralizada necesitará facilitar intercambios. Con thirdweb, puedes implementar fácilmente un componente que:

• Permita al usuario ingresar una cantidad para intercambiar

• Muestre los saldos de tokens

• Maneje el establecimiento de la cantidad máxima

¡Empecemos!

1. Crea un nuevo componente llamado SwapInput para manejar los campos de entrada:

2. A continuación, actualiza pages/index.tsx con la funcionalidad principal de intercambio:

import { useContract } from '@thirdweb-dev/react';
import SwapInput from 'components/SwapInput';

const TOKEN_ADDRESS = '0x123...'; // ERC20 token address
const DEX_ADDRESS = '0x456...';   // DEX contract address

export default function Home() {
  const tokenContract = useContract(TOKEN_ADDRESS);
  const dexContract = useContract(DEX_ADDRESS);

  const [tokenBalance, setTokenBalance] = useState('0');
  const [nativeBalance, setNativeBalance] = useState('0');
  const [tokenSymbol, setTokenSymbol] = useState('');
  const [amountOut, setAmountOut] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  // useEffect hooks to fetch balances & allowance
  // ...

  async function executeSwap() {
    try {
      setIsLoading(true);

      // Approve DEX to spend token
      await tokenContract.call('approve', [DEX_ADDRESS, tokenAmount]);

      const tx = currentType === 'native'
        ? await dexContract.call('swapEthToToken', {
            value: toWei(nativeAmount),
          })
        : await dexContract.call('swapTokenToEth', [
            toWei(tokenAmount),
          ]);

      await tx.wait();
      alert(`Swap successful!`);
    } catch (err) {
      console.error(err);
      alert('An error occurred');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div>
      <SwapInput
        symbol='MATIC'
        type='native'
        balance={nativeBalance}
        amount={nativeAmount}
        onAmountChange={setNativeAmount}
      />

Este componente maneja:

• La obtención de saldos y símbolos de tokens

• El cálculo de la cantidad de tokens salientes

• La aprobación del DEX para gastar tokens

• La ejecución del intercambio

¡Pruébalo!

Ahora que has construido cada parte de tu aplicación de exchange descentralizado, ¡probémoslo!

1. Inicia el servidor de desarrollo:

2. Abre http://localhost:3000 en tu navegador para probar el DEX.

3. Conecta tu billetera, ingresa una cantidad y haz clic en Intercambiar para cambiar entre el token nativo y tu token ERC20.

Si todo funciona sin problemas, ¡date palmaditas en la espalda! ¡Estás listo para desplegar tu DEX!

Despliega Tu Aplicación DEX

Una vez que hayas probado tu DEX localmente y todo funcione como se espera, puedes desplegarlo para compartirlo con otros.

1. Despliega el Contrato Inteligente

Primero, despliega tu contrato inteligente DEX a una red en vivo usando la CLI de thirdweb. Asegúrate de tener tu billetera configurada con los fondos necesarios para la red a la que estás desplegando.

Desde el directorio dex-contract, ejecuta:

Selecciona la red a la que deseas desplegar y confirma la transacción en tu billetera. Una vez desplegado, verás impresa la dirección del contrato en línea. Cópiala ya que la necesitarás para configurar tu aplicación web.

2. Configura la Aplicación Web

En tu aplicación web, abre el archivo .env y agrega lo siguiente:

NEXT_PUBLIC_DEX_ADDRESS=<your-dex-contract-address>
NEXT_PUBLIC_TOKEN_ADDRESS=<your-token-contract-address>

Reemplaza <tu-dirección-de-contrato-dex> con la dirección de tu contrato DEX desplegado, y <tu-dirección-de-contrato-token> con la dirección de tu contrato de token ERC20.

3. Despliega la Aplicación Web

Para desplegar tu aplicación Next.js, puedes usar un servicio como Vercel.

Instala la CLI de Vercel:

Luego, desde tu directorio dex-app, ejecuta:

Sigue las indicaciones para iniciar sesión y desplegar tu aplicación. Una vez desplegada, obtendrás una URL en vivo donde la gente puede acceder a tu DEX.

¡Felicidades, acabas de construir tu propio exchange descentralizado usando thirdweb! Comparte la URL con otros para que puedan comenzar a intercambiar tokens.

Lleva tu nuevo exchange descentralizado al siguiente nivel

Por supuesto, ahora que tu exchange descentralizado está en vivo, ese no es el fin del viaje. Hay muchas maneras en que puedes expandir esta implementación de DEX, tales como:

• Añadir un pool de liquidez para ganar tarifas en intercambios

• Implementar órdenes limitadas

• Soportar múltiples pares de tokens

• Integrar gráficos y datos de precios

• Permitir a los usuarios crear nuevos pares de tokens

Usa esta guía como un punto de partida y continúa construyendo tu exchange descentralizado ideal. Gracias por seguir esta guía y ¡buena suerte con tu DEX! El código completo de este tutorial está disponible en GitHub — deja una estrella si te resultó útil.

Gracias por seguir esta guía y buena suerte construyendo.