En nuestras publicaciones anteriores vimos qué era Optar en un activo de Algorand y cómo construir un componente de front-end reactivo usando React antes de Algorand 2.0. En esta publicación, veremos cómo se ve crear una cuenta en Algorand en JavaScript, así como construir un objeto de transacción, firmar la transacción y transmitirla a la red.
Usaremos algunos métodos del algosdk para que todo esto suceda:
generateAccount () devuelve una nueva dirección de Algorand y su clave secreta correspondientemnemonicToSecretKey () toma una cadena mnemónica y devuelve la dirección Algorand correspondiente y su clave secretasignTransaction () toma un objeto y devuelve un blob firmadosendRawTransaction () toma una transacción firmada codificada y la transmite a la red
Lo primero es lo primero: activar un nodo Algorand dockerizado con sandbox. Hay un tutorial completo sobre cómo configurar y comenzar con sandbox. Necesita una forma de hablar con Algorand y ejecutar un nodo es la mejor manera de hacerlo. También puede usar el servicio API PureStake como una forma de conectarse a la red, sin embargo, en este tutorial lo haré usando sandbox.
Una vez que haya descargado el sandbox y haya iniciado el nodo usando / sandbox, que arranca desde los binarios de TestNet. Ponga en funcionamiento su aplicación React usando create-react-app
crear-reaccionar-aplicación (APP-NAME)
Asegúrese de tener instalado el entorno create-react-app en su máquina. Esta herramienta hace que el desarrollo de React sea muy fácil porque configura y configura su entorno de desarrollo para usted utilizando las últimas funciones de JS y optimiza su aplicación para la producción. Decidí nombrar mi aplicación "genacct", pero puedes nombrar la tuya como quieras.
genacct / └── node_modules / ├── public /
├── src / │ ├── App.css│ ├── App.js│ ├── App.test.js│ ├── index.css│ ├── index.js│ ├── logo.svg│ ├── serviceWorker.js│ ├── setupTests.js│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ └── bootstrap.min.css.map└ ── package-lock.json
└── package.json
└── README.md
Así es como debería verse su árbol de directorios en este momento.
También tendremos que instalar algunas dependencias para que esta aplicación funcione.
React Router DomAlgosdkBootstrapJqueryPopper.jsclipboard-copynpm install –save react-router-dom
npm install algosdk
npm install bootstrap
npm install jquery
npm install popper.js
npm install clipboard-copy
Comience cambiando el nombre de App.js a App.jsx. JSX es una extensión de sintaxis para JavaScript y describe cómo debería ser la IU. JSX produce elementos React que se devuelven de los componentes y se procesan en el DOM.
A continuación, importe algosdk e instancia el Cliente Algorand.
Dentro de src crea un directorio llamado servicios y un archivo dentro de servicios llamado algorandsdk.js
Los argumentos que se pasan al servidor de token y al puerto deberían ser los mismos, pero si desea encontrar estos valores por sí mismo. Ingrese el contenedor de sandbox con el comando ./sandbox enter y elimine los valores de algod.token y algod.net
./sandbox enter
Entrando en la sesión / bin / bash en el contenedor de sandbox …
root @ 9e650578955b: / opt / algorand / node # cat data / algod.token
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
root @ 9e650578955b: / opt / algorand / node # cat data / algod.net
(: :): 4001
Ahora comencemos a estructurar un poco la aplicación. Dentro de src crea los otros dos directorios: activos y componentes. Cree tres directorios más dentro del directorio de componentes llamados páginas con estado y sin estado.
Para comenzar, cree un archivo llamado appRouter.jsx y use el fragmento de código que se muestra a continuación.
Regrese al archivo index.js que se creó con la herramienta create-react-app e importe el siguiente código.
Esto importará las dependencias popper.js y bootstrap, así como elementos de representación al DOM desde su enrutador de aplicaciones. React Router es una biblioteca de enrutamiento para React, simplifica enormemente la vida de los desarrolladores frontend y backend. React Router mantiene su UI sincronizada con su URL e introduce un nuevo enfoque dinámico de componentes basado en el enrutamiento, en lugar del enrutamiento estático.
Ahora estamos listos para construir nuestros componentes y renderizarlos en los lugares apropiados.
Crear cuenta Botón Componente
Es una buena práctica dividir todo en componentes simples, pequeños y reutilizables para la depuración y para un desarrollo más limpio. Comenzaremos con las piezas más pequeñas, los fundamentos de la aplicación, y seguiremos avanzando. Lo que queremos es que se solicite al usuario que genere una cuenta o restaure una cuenta cuando acceda a la aplicación por primera vez, si aún no ha generado una.
Cree su primer componente dentro del directorio sin estado llamado createaccountbutton.jsx e importe el siguiente código.
Este componente hace uso de generateAccount (); método de algosdk y devolverá una dirección de cuenta de Algorand y un par de claves secretas.
2. Restaurar componente de botón de cuenta
También queremos poder restaurar o importar una cuenta en nuestra aplicación porque el usuario puede tener una cuenta específica que quiere usar dentro de la aplicación. Para hacer esto, cree otro archivo dentro del directorio sin estado llamado restoreaccountbutton.jsx
Observe que en este archivo estamos llamando al método mnemonicToSecretKey () del algosdk que toma una frase mnemónica de cadena de 25 palabras y devuelve un par de claves públicas privadas.
3. Crear componente de página de cuenta
Ahora que tenemos todos los componentes que necesitamos para crear o recuperar una cuenta, escriba las páginas Crear cuenta y Restaurar cuenta. Luego entraremos en el enrutamiento a estas páginas desde un componente de encabezado que escribiremos más adelante. Cree un nuevo archivo dentro de las páginas y llámelo createaccountpage.jsx
Esta página creará una nueva cuenta y la enviará al almacenamiento local.
4. Restaurar componente de página de cuenta
Continúe y cree otro archivo dentro de las páginas y llame a este restoreaccountcomponent.jsx
Esta página obtendrá las claves de cuenta restauradas del restoreaccountbutton.jsx y lo enviará al almacenamiento local.
5. Componente de tarifa sugerido
Ahora desarrollemos la página de transacción y los componentes de tarifa de transacción y sugeridos. El desarrollo de requiere algunos pasos adicionales de lo que los desarrolladores de pila completa podrían estar acostumbrados. Además de verificar los exploradores de bloque entre transacciones y usar los dispensadores para obtener algunos fondos para las pruebas, también debe incluir las tarifas como argumento al construir transacciones. Sin embargo, las tarifas de transacción son dinámicas porque generalmente dependen de varios otros factores en una red . Este componente simplifica ese paso y devuelve el parámetro de tarifa sugerido del cliente de Algorand que creó en algorandsdk.js. Cree un archivo llamado sugeridocomponente dentro del directorio componente / con estado.
Este componente le mostrará la tarifa sugerida y la mostraremos dentro del siguiente componente que construiremos.
6. Componente de transacción
Cree un archivo dentro de stateful y llámelo transaccióncomponente.jsx
Este componente se puede usar para enviar transacciones en línea y puede guardar transacciones para que se firmen sin conexión utilizando una cuenta mnemónica dada como accesorio
Tenga en cuenta que en este componente, estamos recuperando la cuenta llamando al método algosdk.mnemonicToSecretKey () y pasando el mnemónico como accesorio en el método sendtransaction ().
sendTransaction = async () => {let mnemonic = this.props.mnemonic;
let recoveryAccount = algosdk.mnemonicToSecretKey (mnemonic);
Estamos construyendo el objeto de transacción (txn) a partir de la Cuenta recuperada y pasando la dirección como primer argumento.
dejar txn = {
desde: recoveryAccount.addr,
a: this.state.addressTo.value,
tarifa: params.fee,
cantidad: Number.parseInt (this.state.amount),
firstRound: params.lastRound,
lastRound: endRound,
genesisID: params.genesisID,
genesisHash: params.genesishashb64,
nota: algosdk.encodeObj (this.state.note)
};
La transacción se firma utilizando signTransaction (), que acepta el txn como primer argumento y la clave secreta de la dirección de la cuenta remitente.
dejar firmadoTxn = algosdk.signTransaction (txn, recoveryAccount.sk);
Y finalmente, estamos transmitiendo la transacción firmada a la red utilizando el método sendRawTransaction () que acepta un blob txn firmado codificado.
7. Componente de página de transacción
Este componente simplemente representa el Componente de transacción que creamos en el paso anterior.
Los últimos pasos del componente involucran la página de cuentas. Una vez que un usuario genera o recupera una cuenta, debe enrutarse a una página de inicio que enumere todas las cuentas que ha generado o recuperado y tiene una barra de navegación en la parte superior para cambiar a otras funciones (como crear una transacción).
8. Componente de detalle de cuenta
Cree un archivo dentro de sin estado y llámelo accountdetailcomponent.jsx aquí es donde presentaremos una lista de diferentes cuentas disponibles desde la página de cuentas, así como la opción de generar una nueva cuenta o recuperar una cuenta.
Este componente permitirá al usuario cambiar entre cuentas. Representará una imagen en este componente que finalmente se mostrará en accountpage.jsx. Cree un directorio dentro de los activos llamados imágenes y arrastre una pequeña imagen de Algorand desde google de su elección, esto se mostrará en el accountdetailcomponent.jsx. Puedes llamar a esta imagen como quieras.
9. Componente de cuenta
Ahora cree un archivo dentro de stateful llamado accountcomponent.jsx
Este componente mostrará los detalles de la cuenta y proporciona métodos auxiliares para cambiar la cuenta, getAccountBalance y getAccountTransaction.
10. Componente de página de cuenta
El componente final que necesitamos para completar esta versión de la aplicación es un componente de página de cuenta. Así que adelante, cree un archivo accountpage.jsx dentro del directorio de sus páginas e importe el siguiente código.
¡Hemos terminado de construir nuestros componentes!
Ahora volvamos a appRouter.jsx y comencemos a importar los componentes y las páginas que acaba de escribir.
Tenga en cuenta que utilizamos el parámetro exacto que es útil para nuestros propósitos, ya que devuelve las rutas para / cuenta si hay una dirección almacenada en caché en localstorage o to / create, que representa nuestro componente Crear página de cuenta. React utiliza la coincidencia parcial para las rutas, por lo que el parámetro exacto desactiva la coincidencia parcial y se asegura de que solo devuelva la ruta si la ruta es una coincidencia EXACTA con la url actual.
El componente final que necesitamos escribir antes de presentar nuestra aplicación completa es el encabezado para navegar de una página a otra.
11. Componente de encabezado
Cree un archivo llamado headercomponent.jsx dentro de sin estado
En este componente de encabezado, solo mostramos las dos páginas cuyas rutas se definieron en el componente de página de cuenta del enrutador de aplicaciones (/ cuenta) y el componente de página de transacción (/ transacción).
Para envolver todo esto, vaya a su App.jsx e importe el siguiente código
Ahora, en la consola de tu editor o de vuelta en la terminal, ejecuta npm start y tu aplicación debería funcionar bien en localhost: 3000!
Estoy usando https://bank.testnet.algorand.network/ para dispensar pruebas de Algos y https://goalseeker.purestake.io/algorand/testnet como mi explorador de bloques para ver detalles sobre mis cuentas y transacciones.
¡Siéntase libre de clonar el repositorio y usar esto como un bloque de construcción para sus aplicaciones Algorand! https://github.com/wisthsb1519/genAcct_genTxn