En el último desarrollo, cuando mostramos la lista de tokens ERC20 de la cuenta de usuario, perdimos una función, que es actualizar el saldo de tokens del usuario mientras mostramos la lista. En este desarrollo, primero agregaremos esta función y luego completaremos la función de transferencia de los tokens ERC20.
1. Actualizar el saldo del token ERC20 del usuario
En el último desarrollo, el saldo del token ERC20 del usuario solo se obtuvo una vez al agregar tokens. En la interfaz de la lista de visualización, solo se monitorea el evento de cambio de token de usuario, pero si este evento no se transmite cuando se abre la billetera, no se puede monitorear, por lo que el saldo de token de la cuenta de usuario no se actualizará. Y de acuerdo con la lógica normal, el último saldo de tokens debería mostrarse automáticamente cuando se muestra la lista de tokens de usuario, como se muestra a continuación:
La forma habitual de realizar operaciones similares en el componente de la función React es usarlo después de que se cargue el componente useEffectpara obtener el saldo del token del usuario y luego actualizar la información del token correspondiente. Dado que la obtención del saldo del token requiere otra información del token, como la dirección del token, etc., esta useEffectdependencia para actualizar la información del token necesita utilizar la información del token en sí. Esto provocará un bucle infinito, el proceso específico es el siguiente:
Después de que se carga el componente, se muestra el saldo del token => obtenga el último saldo del token, actualice la información del token => vuelva a renderizar el componente => useEffectel contenido de la re-ejecución causada por la actualización de la información del token de dependencia => obtenga el saldo del token nuevamente y actualícelo => Renderizar y volver a adquirir, bucle infinito.
Por lo tanto, debemos usar una variable de estado para controlar esta adquisición repetida de saldos de tokens de usuario. Primero, establezca esta variable en falso. Si se obtiene el saldo, establezca la variable en verdadero antes de actualizar el saldo. Después de actualizar el saldo y volver a renderizar, verifique si la variable es falsa. Si no lo es, significa que se ha actualizado y omita la actualización nuevamente. Al mismo tiempo, la cuenta de usuario o los cambios de red deben restablecer esta variable a falso, de modo que se pueda obtener el último saldo de los tokens correspondientes a otras cuentas o redes. Echemos un vistazo al fragmento de código:
const [isRefresh,setIsRefresh] = useState(false)
//每次切换网络或者用户时，更新刷新状态
useEffect(()=> {
if(wallet && network){
setIsRefresh(false)
}
},[wallet,network])
//每次打开界面时只更新一次代币余额
if(!isRefresh) {
Promise.all(allPromise).then(results => {
//更新所有代币余额
for(let i=0;i<len;i++) {
tokens[i].balance = results[i]
}
if(!stale) {
setIsRefresh(true)
updateAllTokens(wallet.address,network,tokens)
}
}).catch( () =>{
})
}
La primera línea de código aquí es para establecer la variable de estado utilizada para marcar si se ha obtenido el saldo del token. El segundo código es para restablecer el estado cuando la cuenta o la red cambia, y el tercer código es para actualizar todos los saldos de tokens si el estado es falso.
El código de actualización también se puede colocar en segundo plano, es decir, en src\contexts\StorageProvider.jsel proceso, el procesamiento de actualización es similar al procesamiento de actualización del saldo ETH del usuario. Sin embargo, el saldo de tokens de usuario solo se usa cuando se muestra la lista de tokens y se envían tokens. Para reducir el número de actualizaciones, se coloca en la interfaz correspondiente para su procesamiento.
2. Breve descripción de este desarrollo
Este desarrollo es principalmente para realizar la función de transferencia de token de usuario. El desarrollo esta vez no es difícil, principalmente porque se han realizado algunas modificaciones en base a la transferencia ETH que se ha implementado anteriormente.
Haga clic en cualquier token en el representante ERC20 del usuario para ingresar a la interfaz principal de la billetera y mostrar el token:
Nuestra interfaz principal en la imagen de arriba muestra tokens GEC, y su saldo se actualizará automáticamente una vez que se muestre. Al mismo tiempo, también monitorea los eventos de transacciones para actualizarlos en tiempo real. El método de procesamiento es similar al método de actualización del saldo del token del usuario mencionado anteriormente.
Al hacer clic en el botón enviar, aparecerá una interfaz similar a enviar ETH:
ingresamos la dirección del destinatario y la cantidad a enviar, la cantidad también puede ser un decimal. Luego haga clic en el botón enviar, aparecerá un cuadro emergente de confirmación, haga clic en Aceptar y aparecerá una breve interfaz de información de la transacción después de una breve animación de carga.
Nota: No importa si envía ETH o tokens, hay una tarifa y se consume una pequeña cantidad de ETH. Si el envío falla, regrese a la interfaz principal de la billetera para verificar si tiene suficiente ETH.
Nota: puede cambiar de red en esta interfaz. Dado que los tokens en una red no existen en otra red, y ETH sí existe, la billetera se convertirá automáticamente en enviar ETH después de cambiar la red. Aquí, los usuarios deben tener cuidado de no enviar mensajes incorrectos.
Cambie la red a la red de prueba de Kovan y verá que el envío de 100 GEC se convierte en 100 ETH, como se muestra arriba. Debido a que mi cantidad de ETH no es tanta, la primera no se puede enviar y la segunda billetera se lo indicará. Pero si el usuario envía 1 GEC, aquí se convierte en 1 ETH y todavía hay una buena posibilidad de enviarlo.
Hagamos clic en Cancelar para volver a la interfaz principal. Siguiendo la operación anterior, la red se ha convertido en la red de prueba de Kovan en este momento, y tenemos que probar en esta red, haga clic en el botón de menú en la esquina superior izquierda:
hagamos clic en el token FIJO, ingresemos a la interfaz principal nuevamente para reiniciar el proceso de envío:
haga clic en Enviar, aparecerá un botón de confirmación que permitirá a los usuarios comprobar el último antes de enviar para evitar errores de envío.
Haga clic en Aceptar, luego se mostrará una animación de carga y el contrato de token en Ethereum se llamará para la transferencia de token. Después de que se
envíe la transacción, ingresará a la breve interfaz de información de la transacción: en comparación con la información de la transacción al enviar ETH, hemos agregado una información del tipo de transacción. En la actualidad, las posiciones de algunos textos en esta interfaz no están muy alineadas y deben ajustarse con cuidado.
Espere pacientemente a que se complete la transacción, porque la red de prueba de Kovan tiene una tasa de generación de bloques rápida, por lo que la transacción debe confirmarse pronto. La siguiente es la interfaz completa. En este momento, el estado de la transacción se ha actualizado y la animación pendiente se ha detenido.
Haga clic en el botón Atrás para regresar a la interfaz principal de la billetera, porque nuestro saldo de tokens se actualiza después de ingresar a la interfaz principal, por lo que también puede ver la acción de actualización del saldo de tokens en esta interfaz, es decir, 2090 se convierte en 1990 en la figura siguiente.
Bueno, se presentan las principales funciones de este desarrollo. Para el código completo, aún debes ir al repositorio de git. Aquí hay solo algunos puntos.
En tercer lugar, la introducción de puntos de código.
- Agregamos una variable global para
tokenSelectedIndexrepresentar el token seleccionado actualmente, como ETH o GEC. La moneda seleccionada actualmente en la lista de tokens tendrá un mensaje de fondo.
const {
network,wallet,ethPrice,tokenSelectedIndex} = useGlobal()
Al final de la introducción de la función de desarrollo, la interfaz principal de nuestra billetera muestra tokens FIJOS, así que haga clic en el botón de menú en la esquina superior izquierda, y los tokens FIJOS en la lista de tokens se mostrarán como seleccionados. Si no seleccionamos ningún token, ETH se selecciona de forma predeterminada, y si ocultamos los tokens actualmente seleccionados, también se selecciona ETH.
Cada vez que cambiamos de red, estamos configurados para elegir ETH, porque los tokens de una red no existen en otra red.
const handleSelected = key => () => {
if(selectedIndex === key) {
return;
}
setSelectedIndex(key)
setOpen(false);
updateGlobal({
tokenSelectedIndex:0,
network:NET_WORKS[key]
})
};
Aquí se usa un cierre. Debido a que no hay esto en el componente de función, no puede usar this.handleSelected.bind(this,key)este método comúnmente usado en componentes de clase para pasar parámetros mientras se vincula la función. La forma común de vincular eventos de clic en componentes de función es usar cierres para generar una nueva función para el paso de parámetros. Otro método es establecer clics específicos en una valuepropiedad de objeto , cuando la función de clic toma un e.currentTarget.valuevalor vinculante . Pero este valor no siempre está disponible. A veces es más conveniente utilizar cierres. Se recomienda que utilice cierres para vincular eventos de clic cuando necesite pasar parámetros.
- Llame al contrato para enviar tokens, el código aquí explica brevemente:
if(isToken) {
//将钱包绑定合约直接调用方法进行
let contract = getErc20Token(token.address,network,wallet)
if(contract) {
let amount = convertFixedToBigNumber(eth_amount,token.decimals)
let args = [_address,amount]
contract.transfer(...args).then(tx => {
setCircleOpen(false)
if(sendCallback){
sendCallback(tx,eth_amount,SYMBOL)
}
}).catch(err =>{
setCircleOpen(false)
return showSnackbar(SYMBOL + "发送失败",'error')
})
}else{
setCircleOpen(false)
return showSnackbar("合约未初始化，请稍候",'info')
}
}
La tercera línea de código es para obtener un objeto de contrato, que está vinculado a la billetera correspondiente, es decir, el contrato vinculado puede llamar viewal puremétodo para leer los datos del contrato o al método para reescribir los datos del contrato. De hecho, contract.transfer(...args)esta llamada a la función también puede tener un parámetro opcional adicional, que son opciones. Es similar al objeto de transacción creado durante la transferencia directa de ETH que se menciona en el artículo anterior. Por ejemplo, puede establecer la cantidad de ETH enviada con la transacción, establecer el chainId, etc.
Cuatro, resumen
Este desarrollo primero supuso una omisión del desarrollo anterior y luego lo modificó apropiadamente en función de la transferencia ETH para la transferencia del token ERC20. El ejercicio principal useEffectes evitar actualizaciones ilimitadas de los saldos de tokens de los usuarios y cómo llamar al contrato para transferir tokens. Hay otra imperfección en esta billetera que no se ha modificado, es decir, el precio eth se toma de etherscan. No se puede acceder a la API de etherscan sin una escalera. Está previsto cambiarla a otra fuente de datos durante el próximo desarrollo.
Nuestra billetera ahora tiene funciones: creación de cuenta, inicio de sesión, importación y exportación; agregar, mostrar, ocultar y enviar tokens ERC20, mostrar y actualizar el saldo del token ERC20 en tiempo real; enviar ETH y actualizar el saldo ETH en tiempo real; apoyar la red principal y Las tres redes de prueba principales pueden admitir la red de prueba de Goerli, pero no es necesario crear tantas. Actualmente, no admite varias cuentas ni el almacenamiento de registros históricos.
Solo hay una función de nuestra billetera que no se ha implementado desde el plan de desarrollo, y son las transacciones de firma. Debido a que se trata de una billetera web simple, los datos de la transacción solo se pueden enviar a través de una URL y luego firmar. El método de implementación es un poco desagradable. Planeamos implementarlo en el próximo desarrollo.
Además, debido al tiempo limitado, la aplicación del nodo localhost local no está planificada para el desarrollo. Está previsto cancelar la red localhost en el próximo desarrollo y luego agregarla cuando tenga tiempo para desarrollarla.
La dirección del almacén de esta nube de código de billetera (gitee) es: => https://gitee.com/TianCaoJiangLin/khwallet
Los lectores pueden dejar un mensaje para señalar errores o sugerir mejoras.