This content originally appeared on DEV Community and was authored by JaguarJS
La permaweb de Arweave es la red de almacenamiento de datos descentralizados con el diferenciador de usar la ley de more para almacenar datos de manera permanente mediante un solo pago. Siendo quiza 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 🐆
This content originally appeared on DEV Community and was authored by JaguarJS
JaguarJS | Sciencx (2022-02-01T00:15:37+00:00) Conecta tu cartera Arweave y sube tu data a la permaweb desde NextJS. Retrieved from https://www.scien.cx/2022/02/01/conecta-tu-cartera-arweave-y-sube-tu-data-a-la-permaweb-desde-nextjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.