Taller: Interacción con la blockchain de Sui desde el frontend

Nota, si haces fork a este repositorio, lo perimero que debes hacer es, en tu terminal, posicionarte en la carpeta frontend y usar el comando npm install para instalar las dependencias. Con eso, ya te sera posible correr el proyecto sin ningun problema.

Sui es una plataforma de blockchain y contratos inteligentes de capa 1 diseñada para que la propiedad de activos digitales sea rápida, privada, segura y accesible.

Move es un lenguaje de código abierto para escribir paquetes seguros para manipular objetos en blockchain. Permite bibliotecas, herramientas y comunidades de desarrolladores comunes en blockchains con modelos de datos y ejecución muy diferentes.

Proyecto base

Puedes usar este repositorio como tu punto de despliegue de tu proyecto backend. El proyecto base es el de Mi-Empresa-De-, que te permite crear bases de datos para empresas que ofrece un sistema de gestion de clientes basado en niveles.

Abriendo con Codespaces

• Asegúrate de clonar este repositorio a tu cuenta usando el botón Fork.

  

  • Puedes renombrar el repositorio a lo que sea que se ajuste con tu proyecto.

• Presiona el botón <> Code y luego haz click en la sección Codespaces

  

• Por último, presiona Create codespace on master. Esto abrirá el proyecto en una interfaz gráfica de Visual Studio Code e instalará todas las herramientas necesarias para desarrollar con Move.

Configuración inicial para despliegue en testnet

Este repositorio cuenta con un archivo de automatización que permite al usuario obtener su address y entorno de testnet de forma autómatica. Para consultar el address es necesario ejecutar el siguiente comando:

sui client addresses

Fondeando una cuenta

Una vez conectado, el siguiente paso es fondear tu cuenta, es decir, asegurarte de que la dirección que estás utilizando tenga tokens SUI (aunque sean tokens de prueba) suficientes para cubrir las tarifas de las transacciones. Este proceso es esencial para poder desplegar paquetes, ejecutar funciones y validar tu lógica en cualquier red que estés utilizando.

Puedes hacer esto ejecutando el siguiente comando en tu terminal:

sui client faucet

Obtendrás algo similar a esto, probablemente en letras rojas:

For testnet tokens, please use the Web UI: https://faucet.sui.io/?address=0x451ef911c5a1706d4833f89b75f6cb49c55a586821e9b7de6bd9d8b41dac2cda

Puedes hacer click en esa URL, la cual te llevará al faucet de Sui, que es una aplicación que reparte tokens de prueba en las redes testnet y devnet, para que los desarrolladores puedan desplegar y probar sus paquetes Move.

Ya en el sitio, simplemente haz click en Request Testnet SUI. Con esto habremos terminado el proceso de fondeo. Puedes verificarlo en terminal

sui client balance
╭────────────────────────────────────────╮
│ Balance of coins owned by this address │
├────────────────────────────────────────┤
│ ╭──────────────────────────────────╮   │
│ │ coin  balance (raw)  balance     │   │
│ ├──────────────────────────────────┤   │
│ │ Sui   10000000000    10.00 SUI   │   │
│ ╰──────────────────────────────────╯ │
╰────────────────────────────────────────╯

ℹ️ El README distorsiona un poco este output.

Puedes acceder al faucet directamente desde acá: https://faucet.sui.io/

Desplegando el proyecto en la testnet

La testnet es un entorno de pruebas creado para que los desarrolladores de la blockchain Sui experimenten e interactuen con sus paquetes antes de subirlos de manera oficial a la Mainnet, la red real. En esta ocasión realizaremos el despliegue del paquete con el que interactuaremos en el frontend en la testnet.

Una vez recibidos los tokens de testnet mediante el faucet, desplegar a la testnet es muy sencillo, solo es necesario ejecutar el comando:

sui client publish

Lo que dará como resultado mucha informacion relacionada con la transaccion. Sin embargo, la información en la que nos vamos a centrar es la siguiente:

╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Object Changes                                                                                   │
├──────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Created Objects:                                                                                 │
│  ┌──                                                                                             │
│  │ ObjectID: 0xeee71d904b4ba170d130dacdaf5de7eabd23a6d3634fd39e06ceb6e2e630522b                  │
│  │ Sender: 0xfdfb28de3b66e3d21922ed3a1f13cb99b5c7d848264fab94358d17e76647b6a0                    │
│  │ Owner: Account Address ( 0xfdfb28de3b66e3d21922ed3a1f13cb99b5c7d848264fab94358d17e76647b6a0 ) │
│  │ ObjectType: 0x2::package::UpgradeCap                                                          │
│  │ Version: 349180416                                                                            │
│  │ Digest: HuYaAgoVDsdbt3skuHzBgstvupEqL6AjEURbPgjb86sn                                          │
│  └──                                                                                             │
│ Mutated Objects:                                                                                 │
│  ┌──                                                                                             │
│  │ ObjectID: 0x12b4b6e610179a45e4e5824a5189b73bbd88d37adc8e91988ce343689172ba45                  │
│  │ Sender: 0xfdfb28de3b66e3d21922ed3a1f13cb99b5c7d848264fab94358d17e76647b6a0                    │
│  │ Owner: Account Address ( 0xfdfb28de3b66e3d21922ed3a1f13cb99b5c7d848264fab94358d17e76647b6a0 ) │
│  │ ObjectType: 0x2::coin::Coin<0x2::sui::SUI>                                                    │
│  │ Version: 349180416                                                                            │
│  │ Digest: 9pvSJgWuu2Ki7qz5ZKRiarP7XwEHSkXYBnj5RGrPkkF6                                          │
│  └──                                                                                             │
│ Published Objects:                                                                               │
│  ┌──                                                                                             │
│  │ PackageID: 0x8ddace66e376f03067016c51820d512fa1a8fa9e2e518ed0c842086cdb27ae91                 │
│  │ Version: 1                                                                                    │
│  │ Digest: 71yxJBgson9NHunqDvmKiuM5XVfsaszxwhdnXCPTsbeX                                          │
│  │ Modules: empresa                                                                              │
│  └──                                                                                             │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

Donde al final se muestra el PackageID, o ID del paquete (nuestro código). Es importante guardar este ID, ya que mediante su uso es como haremos interaccion con nuestro paquete.

Integración del Frontend

Una vez que cuentes tu proyecto desplegado en testnet y guardado el ID del paquete desplegado lo siguiente es abrir una nueva terminal, lo que puedes hacer pulsando el siguiente boton:

Esto para reiniciar la terminal y que se carguen las configuraciones del npm (gestor de modulos y paquetes de node).

Creación del proyecto con Vite

Introducimos el siguiente comando en la terminal:

npm create vite@latest

Como respuesta obtendremos el siguiente mensaje en consola:

Need to install the following packages:
create-vite@8.1.0
Ok to proceed? (y) 

Donde escribiremos y y daremos enter para continuar, lo que nos mostrara lo siguiente:

> npx
> create-vite

│
◆  Project name:
│  vite-project

Ahora, escribiremos el nombre de nuestro proyecto, el nombre puede ser cualquiera, en este caso lo asignaremos como frontend, una vez escrito, pulsaremos nuevamente enter.

Ahora nos pedira elegir un framework para comenzar a trabajar, en este caso elegiremos React:

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ● Others

Posteriormente, en las opciones de lenguaje seleccionamos JavaScript:

◆  Select a variant:
│  ○ TypeScript
│  ○ TypeScript + React Compiler
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗
│  ● RSC ↗ 

En la siguiente opcion seleccionamos no:

◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
└

Y por ultimo, seleccionamos la yes:

◆  Install with npm and start now?
│  ● Yes / ○ No
└

Ya creado el proyecto de frontend es necesario moverse al directorio creado mediante el siguiente comando:

cd <NOMBRE DE TU PROYECTO>

e instalar las siguientes dependencias:

npm install @mysten/sui.js @mysten/wallet-kit @mysten/dapp-kit 

Este repositorio fue creado con base al sui-starter-kit de ZinHunter: https://github.com/WayLearnLatam/sui-starter-kit Documentacion oficial de Sui de interaccion desde el frontend: https://github.com/MystenLabs/sui-stack-hello-world/tree/main