Conecta tu cartera Arweave y sube tu data a la permaweb desde NextJS
Tags: nextjs, blockchain, react, tutorial
Published: 2022-02-01 00:15:37

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 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4u88eeccyhid8tm0090.png)


 





**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 
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bio15ktarw5to0yxpar.png)

**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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snnihldt1liqwrkxejcb.png)

*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()
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6uuw43buzd2sw5iq9hf.png)

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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0h48rt8rsiewoq9gbu5.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibgac9db5u6d8mdw4z5v.png)
  



**Subir archivos, fotos o video**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq0avijuu11hc63kyftd.png)


**Transacción de AR token a otra billetera**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a76jt0y8gwmv1tpzpjj7.png)
 
 



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 submit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pen12j44pcjansba5aq.png)
 


*Respuesta con post*
![Respuesta con post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkx2x2n6l99ycmq3ijik.png)


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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9iwhqpxqjrjfpkc2jt6q.png)
 
 


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](https://github.com/jsvanilla/nextjs-arweave-example) 
![Next Arweave Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kl9urkgchnzcfdh0542.png)
 

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 🐆