Aplicación Sui Move

En esta guía para desarrolladores de Sui, aprenderá lo fácil que es crear una interfaz de Sui dApp React y configurar su dApp para Movement Network.

Requisitos

Asegúrese de tener instalado Movement CLI . Si utiliza Sui CLI, consulte nuestra guía sobre cómo configurarlo para Movement .

Vea un ejemplo de la dApp terminada aquí .

Configuración

Arrancaremos nuestra dapp con el siguiente comando proporcionado por Mysten Labs :

Copiar

npm create @mysten/dapp

Cuando se le solicite elegir una plantilla inicial, seleccione react-e2e-counter.

Navegue a la carpeta de su dApp y ábrala en un editor. Aquí estamos usando VS Code.

Copiar

cd your-dapp-name
code .

Publicar el contrato inteligente

Navegue al move/counterdirectorio y cambie su entorno Sui a M2:

Copiar

cd move/counter
sui client new-env --rpc https://sui.testnet.m2.movementlabs.xyz:443 --alias m2
sui client switch --env m2

Ahora puedes publicar tu counter.movemódulo:

Copiar

movement sui client publish --gas-budget 20000000

Una vez publicado el paquete, obtenga su ID Transaction Dataen Object Changes> Published Objects.

Configurar el frontend en M2

Vuelva al directorio raíz de su proyecto e inicie su aplicación:

Copiar

cd ~
npm run dev

Su dApp aparecerá en su navegador:

Configura tu Sui dApp para Movement M2

En constants.ts, comience exportando M2_COUNTER_PACKAGE_IDutilizando el ID del paquete del paso de publicación:

Copiar

export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";
export const M2_COUNTER_PACKAGE_ID = "<your-counter-package-ID>";

Ahora agregue M2_COUNTER_PACKAGE_IDEn la parte superior de networkConfig.tsy la configuración de red M2 de Movement Network que contiene el ID del paquete y su RPC.

Copiar

import {
  DEVNET_COUNTER_PACKAGE_ID,
  MAINNET_COUNTER_PACKAGE_ID,
  M2_COUNTER_PACKAGE_ID
} from "./constants.ts";

const { networkConfig, useNetworkVariable, useNetworkVariables } =
  createNetworkConfig({
    devnet: {
      url: getFullnodeUrl("devnet"),
      variables: {
        counterPackageId: DEVNET_COUNTER_PACKAGE_ID,
      },
    },
    mainnet: {
      url: getFullnodeUrl("mainnet"),
      variables: {
        counterPackageId: MAINNET_COUNTER_PACKAGE_ID,
      },
    },
    m2: {
      url: "https://sui.testnet.m2.movementlabs.xyz:443",
      variables: {
        counterPackageId: M2_COUNTER_PACKAGE_ID,
      },
    },
  });

¡Ahora puede configurar la red predeterminada en M2 en main.tsx!

Copiar

<SuiClientProvider networks={networkConfig} defaultNetwork="m2">

Usando su contador dApp en M2

Para usar la dApp, primero configure una billetera Sui en M2 .

Dirígete a Movement Faucet y deposita fondos en tu billetera M2 testnet.

¡Ahora la parte divertida! ¡Conecte su billetera a su dApp y cree un contador!

Usted (y cualquier otra persona) puede incrementarlo y solo usted puede restablecerlo a 0.

¿Qué dApps desarrollarás en Movement?

Ahora ya sabes cómo configurar una dApp Sui Move para M2.

Consulte CreateCounter.tsxy comprenda la lógica en cadena y la interfaz de la aplicación Counter.tsx. counter.moveComo desafío, intente modificarlo para que aumente en 2 cada vez que un usuario incrementa.

¡Estamos ansiosos por ver qué dApps creas e implementas en Movement Network!