Conecta tu cartera Arweave y sube tu data a la permaweb desde NextJS

La permaweb de Arweave es la red de almacenamiento de datos descentralizados con el diferenciador de usar la ley de Moore para almacenar datos de manera permanente mediante un solo pago. Siendo quizá el storage mas económico frente a otros competidores como Storj , IPFS Filecoin o AWS

Si ya tienes una cartera de arweave , una aplicación en NextJS y quieres ir directo al grano, comienza en el paso 4

PASO 1
En la pagina de arweave.org pulsa en Claim a Token, sigue los pasos y tendrás tu primera dirección de cartera Arweave con un poco del token Ar para realizar tus primeras operaciones de almacenamiento en el storage

PASO 2
En lugar de la wallet oficial, te recomiendo usar Arconnect por 2 razones. Mejora la experiencia de usuario a la wallet original, y cuenta con varios componentes de react ya generados por la comunidad para conectar de manera sencilla desde el front, como el que veremos a continuación.

Esta wallet es un proyecto apoyado por la misma arweave fundation, y es bastante usada por los usuarios del storage
https://chrome.google.com/webstore/detail/arconnect/einnioafmpimabjcddiinlhmijaionap

PASO 3
Crea tu app NextJS

npx  create-next-app  nombre-de-mi-app

Si quieres instalarlo de una con tailwind hazlo así

npx create-next-app  -e  with-tailwindcss   nombre-de-mi-app

PASO 4
Instalamos un componente pre hecho para las operaciones del wallet de arweave

npm install arjs-react 

ArjsProvider
Es el componente envoltorio que debe de contener la aplicación o página que requiere accesar al wallet de arweave. Este cuenta con opciones de configuración tanto para el wallet oficial de arweave, tanto para usar arconnect. La diferencia es que arconnect despliega un modal para conectarte a la billetera en lugar de pedirte la key como argumento. Mejorando la experiencia de usuario. Sin este componente, no podrás realizar operaciones de subida de datos y transferencia de tokens arweave a otras billeteras desde el front

EnableSWC Es la opción para habilitar operaciones en Smartweave, la funcionalidad de contratos inteligentes en la red de arweave. Más adelante generaremos un tutorial para explicar su funcionamiento

useArjs
Es una función que llama a toda la librería de arweave con algunas diferencias de azucar sintáctico en algunas de sus funciones

Creamos una constante wallet para mandar a llamar las funciones contenidas en useArjs()

El useState de textData se usa para guardar el estado de lo que se va a mandar a almacenar en la permaweb, y el de lastData almacena el contenido de la ultima operación sin usar los métodos internos de useArjs() para obtener la ultima transacción

Si la billetera esta conectada, wallet.status nos regresará 'connected'

Revisar el balance de la billetera y actualizarlo en el estado

setBalance(wallet.getArweave().ar.winstonToAr( await wallet.getBalance("self")))

Obtener la dirección de la billetera y actualizarla en el estado

setAddress(await wallet.getAddress())

GENERAR UNA TRANSACCIÓN
Tanto si subes texto plano, html estático, una imagen, o quieres realizar una transferencia del token Ar a otra billetera, debes crear un objeto de transacción, luego firmarlo, y posteriormente realizar una operación con dicho objeto mediante el método submit o el método post.

Subir data o texto plano

Subir archivos, fotos o video

Transacción de AR token a otra billetera

El segundo paso es firmar la transacción

await wallet.sign(transaction1) 

Y por ultimo, subirla a la permaweb

wallet.submit(transaction1).then(async(response:any)=>{
    console.log(response)  //response.transaction.id
    setBalance(wallet.getArweave().ar.winstonToAr( await wallet.getBalance("self")))
    setRequesting("Subir data a la permaweb")

    wallet.getArweave().transactions.api.get(response.transaction.id).then((response:any)=>{
      console.log(response)
      setLastData(response.data)
    }) 
  }) 

Diferencia entre wallet.submit y wallet.post
Si bien la literatura de la librería dice que además de la respuesta, post es para usarse para almacenar información más pequeña. Te recomiendo usar submit si vas a ocupar data importante como el id de la transacción más adelante. Post solo te regresa el status de la transacción y tendrás que usar el método getLastTransactionID() para regresar la información de tu ultima transacción si quieres usarla

Respuesta con submit

Respuesta con post

Por ultimo, con la id de la transacción, llamaremos un get para obtener la transacción así como la data de esta de la web permanente

Espero que el tutorial y el código de ejemplo les sirva de ayuda, si algo puede explicarse mas claro cualquier feedback es bien recibido

Ver código de ejemplo COMPLETO

Voy a subir mas tutoriales cada cierto tiempo de funcionalidades pequeñas usando Storage Descentralizados y smartweave, la funcionalidad de contratos inteligentes de la red de Arweave

Espero verlos pronto 🐆