Corriendo un Nodo en Base

thirdweb es un marco de desarrollo que te permite incorporar funcionalidad web3 en tus aplicaciones.

En esta guía, te daremos una visión general de cómo usar la CLI de thirdweb para desplegar un contrato en la red de prueba Base Goerli.

Objetivos

Al final de esta lección, deberías ser capaz de:

Crear un proyecto con un contrato inteligente usando thirdweb.
Desplegar contratos inteligentes usando thirdweb.
Interactuar con contratos inteligentes desplegados usando thirdweb.

Prerrequisitos

La interfaz de línea de comandos interactiva de thirdweb tiene todo lo que necesitas para crear, construir y desplegar contratos inteligentes y aplicaciones en Base.

Recomendamos usar npx para obtener siempre la última versión. Alternativamente, puedes instalar la CLI como un comando global en tu máquina:

cssCopy code
npm i -g @thirdweb-dev/cli

Creando un proyecto

Puedes usar la CLI de thirdweb para crear un nuevo proyecto que contenga un contrato inteligente, o alternativamente, puedes desplegar un contrato preconstruido para NFTs, Tokens o Marketplace directamente desde la página de Explorar de thirdweb.

Para crear un nuevo proyecto usando la CLI, ejecuta:

luaCopy code
npx thirdweb create contract

Esto iniciará una serie interactiva de preguntas para ayudarte a comenzar:

Dale un nombre a tu proyecto.
Selecciona Hardhat como el marco.
Selecciona ERC721 como el contrato base.
Selecciona Ninguno para extensiones opcionales.

Explorando el proyecto

El comando de creación genera un nuevo directorio con el nombre de tu proyecto. Abre este directorio en tu editor de texto.

Dentro de la carpeta de contracts, encontrarás un archivo Contract.sol; ¡este es nuestro contrato inteligente escrito en Solidity!

Si echamos un vistazo al código, puedes ver que nuestro contrato está heredando la funcionalidad de ERC721Base, al:

Importar el contrato.
Heredar el contrato; declarando que nuestro contrato es ERC721Base.
Implementar cualquier método requerido, como el constructor.

solidityCopy code
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721Base.sol";

contract Contract is ERC721Base {
    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps
    ) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}

Este patrón de herencia nos permite usar funcionalidad de otros contratos dentro del nuestro, modificarla y agregar lógica personalizada.

Por ejemplo, nuestro contrato actualmente implementa toda la lógica dentro del contrato ERC721Base.sol; que implementa el estándar ERC721A con varias extensiones útiles.

Desplegando el contrato

Puedes usar la CLI de thirdweb para desplegar un contrato inteligente en Base.

Para desplegar tus contratos inteligentes, desde el directorio raíz de tu proyecto, ejecuta:

Copy code
npx thirdweb deploy

Ejecutar este comando:

Compilará todos los contratos en el directorio actual.
Te permitirá seleccionar qué contrato(s) deseas desplegar.
Subirá el código fuente de tu contrato (ABI) a IPFS.
Abrirá el flujo de despliegue en el panel de control. Desde el panel de control, primero deberás ingresar los valores para el constructor de nuestro contrato:
_name: El nombre de nuestro contrato.
_symbol: El símbolo o "ticker" dado a los tokens de nuestros contratos.
_royaltyRecipient: La dirección de la billetera que recibirá las regalías de las ventas secundarias.
_royaltyBps: Los puntos básicos (bps) que se darán al destinatario de las regalías por cada venta secundaria, por ejemplo, 500 = 5%. Finalmente, selecciona la red de prueba Base Goerli como la red a la que deseas desplegar y haz clic en Desplegar Ahora.

INFO

Para despliegues en producción / mainnet selecciona Base (mainnet) como la red en lugar de Base Goerli.

Una vez que tu contrato esté desplegado, serás redirigido a un panel de control para gestionar tu contrato.

Interactuando con tu contrato

Thirdweb proporciona SDKs para varios lenguajes de programación, incluyendo React, React Native, TypeScript, Python, Go y Unity.

Para interactuar con tu contrato inteligente, puedes usar la CLI de thirdweb para crear una aplicación web que esté preconfigurada con el SDK de React de thirdweb.

Para crear una aplicación web preconfigurada con el SDK de thirdweb, ejecuta:

luaCopy code
npx thirdweb create app –evm

Esto iniciará una serie interactiva de preguntas para ayudarte a comenzar:

Dale un nombre a tu proyecto.
Selecciona Create React App como el marco.
Selecciona TypeScript como el lenguaje.

Explorando el proyecto

El comando de creación genera un nuevo directorio con el nombre de tu proyecto. Abre este directorio en tu editor de texto.

Dentro del archivo index.tsx, encontrarás el ThirdwebProvider envolviendo toda la aplicación.

Este envoltorio nos permite usar todos los hooks y componentes de UI del SDK de React a lo largo de la aplicación, así como configurar una activeChain; que declara a qué cadena están desplegados nuestros contratos inteligentes.

Dado que desplegamos nuestro contrato inteligente en la red Base, configuraremos la activeChain a BaseGoerli:

javascriptCopy code
...
import { BaseGoerli } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
 <React.StrictMode>
   <ThirdwebProvider activeChain={BaseGoerli}>
     <App />
   </ThirdwebProvider>
 </React.StrictMode>
);

Interactuando con el contrato

Para conectarte a tu contrato inteligente en la aplicación, proporciona la dirección de tu contrato inteligente (que puedes obtener desde el panel de control) al hook useContract de esta manera:

javascriptCopy code
import { useContract } from '@thirdweb-dev/react';

export default function Home() {
  const { contract } = useContract('<DIRECCIÓN_DEL_CONTRATO>');

  // ¡Ahora puedes usar el contrato en el resto del componente!
}

Ahora puedes llamar a cualquier función en tu contrato inteligente con los hooks [useContractRead](<https://portal.thirdweb.com/sdk/interacting-with-contracts/custom-contracts/using-contracts#read-contract-data>) y useContractWrite.

Por ejemplo, puedes llamar a useContractRead para obtener el nombre del contrato:

javascriptCopy code
const { data, isLoading } = useContractRead(contract, 'name');

El SDK de thirdweb también proporciona hooks para varias interfaces y extensiones que facilitan la lectura y escritura de datos. Por ejemplo, podríamos usar los hooks de ERC721 para obtener los metadatos de nuestro contrato NFT.

Para obtener más información sobre cómo interactuar con contratos inteligentes usando el SDK de thirdweb, visita la documentación para desarrolladores de thirdweb.

Desplegando el proyecto

Para alojar tu aplicación en IPFS, ejecuta el siguiente comando:

Copy code
yarn deploy

Este comando utiliza Storage para:

Crear una versión de producción de tu aplicación.
Subir la versión a IPFS.
Generar una URL donde tu aplicación está alojada permanentemente. ¡Eso es todo! ¡Ahora tienes una aplicación web que interactúa con contratos inteligentes desplegados en Base!

PreviousUsando Remix NextConstruyendo una dApp

Last updated 1 year ago