2. Configurar el frontend

Este es el segundo capítulo del tutorial sobre construir una dapp de extremo a extremo en Aptos donde ya has creado un contrato inteligente y ahora estás configurando el frontend.

Configurar el frontend

create-aptos-dapp ya ha creado el frontend para nosotros con un diseño básico e implementación de Billetera usando la biblioteca aptos-wallet-adapter.

1. Ejecuta: npm run dev

   En este punto deberías tener tu aplicación ejecutándose en http://localhost:5173, que muestra el diseño de plantilla predeterminado.

2. En el directorio frontend, encuentra todos los archivos del frontend. Limpiémoslo un poco.

3. Abre el archivo App.tsx y actualiza su contenido para que sea:

import { Header } from "@/components/Header";
import { TopBanner } from "@/components/TopBanner";

function App() {
  return (
    <>
      <TopBanner />
      <Header />
      <div className="flex items-center justify-center flex-col">
        <div>Mi aplicación va aquí</div>
      </div>
    </>
  );
}

export default App;

Una vez que guardes los cambios, deberías ver que el contenido de la aplicación ha cambiado en el navegador y muestra Mi aplicación va aquí.

Nuestra interfaz de usuario de dapp

Primero construiremos el diseño de la interfaz de usuario de la dapp. Tenemos dos estados de interfaz de usuario para la aplicación:

• Cuando una cuenta aún no ha creado una lista (a la izquierda).
• Cuando una cuenta ha creado una lista y ahora puede agregar tareas a ella (a la derecha).

Ahora tenemos un cliente funcional con un botón de conectar billetera y un modal selector de billetera. Siéntete libre de jugar con él y conectar una billetera con él.

Luego aprende cómo obtener datos de la cadena en el capítulo 3.