En el artículo anterior, completamos la función de exportación de cuenta de la billetera. Esta vez planeamos desarrollar la función de la billetera para mostrar la lista de tokens ERC20. Debido a que estamos imitando MetaMask, solo podemos agregar tokens Erc20 manualmente.
1. Demostración de la función principal
Después de que el usuario inicie sesión en la billetera, haga clic en el botón de menú en la esquina superior izquierda y aparecerá la interfaz de Mi cuenta:
Esta interfaz se implementa en MetaMask con un cajón, es decir, hay una animación de cajón. Las animaciones de los cajones en Material UI son todas de pantalla completa, y nuestra billetera ocupa solo una pequeña parte del centro de la pantalla en la página web, por lo que después de muchos intentos, debido a problemas de habilidad personal, el cajón no se puede implementar. Por lo tanto, la función de enrutamiento de uso común se usa para saltar y simplificar el procesamiento de esta parte. Los lectores interesados pueden estudiar la animación del cajón de Material UI.
Haga clic en la dirección de la cuenta en la interfaz para copiar y haga clic en el botón de detalles para mostrar la interfaz de detalles del usuario implementada en el artículo anterior. Hagamos clic para agregar tokens (aquí, tokens ERC20), y aparece la siguiente interfaz:
aquí también hemos hecho algunas simplificaciones en comparación con la interfaz MetaMask. Ingrese la dirección del contrato del token de la red correspondiente en el cuadro de texto superior y haga clic en Consulta. Después de completar la consulta, se mostrarán el símbolo del token, la precisión y el saldo del token. Si la dirección que ingresó no es una dirección de token válida, se le indicará que la dirección no es válida.
Haga clic en el botón Agregar para agregarlo a nuestra lista de tokens. Tenga en cuenta que la lista aquí se puede desplazar hacia arriba y hacia abajo. Si hace clic en Cancelar, volverá a la interfaz principal de la billetera.Si se agregaron los tokens, se le preguntará.
Puede ver que ya hay tokens GEC en nuestra lista. Haga clic en el botón de expansión a la derecha de los tokens GEC, y aparecerá un menú, que contiene tokens ocultos y visualización en EtherScan:
hacemos clic en tokens ocultos (oculto es No se muestra en la lista, y no perderá sus tokens), aparecerá una pantalla de confirmación:
haga clic en Cancelar para volver a la lista, hagamos clic en Ocultar, y los tokens GEC se eliminarán de su lista y volverán al token Lista de divisas, verá la misma pantalla que cuando no se agregó. Si desea volver a mostrar los tokens GEC, solo puede volver a agregarlos.
Emitamos una moneda de aire KHC (la billetera se llama KHWallet y, por supuesto, la moneda se llama KHCoins), y agréguela y GEC a la lista:
ahora puede agregar todas sus fichas a la lista. Si desea conocer la información relevante de un determinado token que se ha agregado, haga clic en el botón de extensión a la derecha y luego haga clic en el botón de visualización en etherscan, puede verlo en el navegador. Tenga en cuenta que la barra de direcciones contiene la dirección del token.
Este desarrollo solo completa la adición, visualización y ocultación de tokens ERC20 en la lista. No se ha desarrollado la función de hacer clic en tokens para mostrar y transferir tokens en la interfaz principal de la billetera. Esto se incluirá en el próximo desarrollo, pero se implementará el monitoreo del saldo de tokens de la cuenta corriente, que se puede usar para mantener actualizado el saldo de tokens en tiempo real.
2. Prueba de visualización del saldo de fichas
Probemos si el saldo del token se puede actualizar en tiempo real, cambiemos a la red de prueba de Kovan para una operación gratuita. He mencionado el método de adquisición de prueba ETH de Kovan testnet en el artículo anterior. Los lectores pueden consultar toda mi serie de artículos para obtener una comprensión completa de la billetera.
Abramos tanto la billetera como MetaMask, y preparemos dos cuentas, una para usar en la billetera y otra para usar en MetaMask, las cuales agregan el mismo token, como se muestra en la siguiente figura: Como
puede ver, mi cuenta de la izquierda tiene 988,004,400 pruebas Tokens, la cuenta de Kovan 2 a la derecha tiene 200 tokens de prueba. Transfieramos 100 tokens de prueba de Kovan2 a mi cuenta.
Haga clic en la moneda de prueba en la interfaz de la lista de tokens de MetaMask (la forma de abrirla es la misma que nuestra billetera), ingrese a la siguiente interfaz (esto es lo que implementaremos en el siguiente paso):
Puede ver que la interfaz principal de MetaMask muestra 200 tokens de prueba, en nuestro Haga clic en la dirección de la cuenta en la billetera para copiar y luego haga clic en el botón enviar en MetaMask (es posible que deba volver a abrir la página):
Pegue mi cuenta directamente en la barra de direcciones e ingrese 100 en la columna de cantidad. Haga clic en Siguiente, haga clic en Confirmar en la siguiente pantalla, espere a que se complete la transacción y mire fijamente la interfaz de la billetera:
antes de que se envíen los tokens de MetaMask, se actualizó el saldo de los tokens 确认en la billetera de la izquierda. Esto se debe a que el saldo del token se actualiza monitoreando y filtrando los eventos de la transacción, y la recepción del evento será anterior a la confirmación de la recepción de la transacción.
También puede realizar una prueba inversa, que consiste en iniciar sesión en mi cuenta con MetaMask y enviar 100 tokens de prueba a la cuenta 2 de Kovan. Antes de que se confirme la transacción, se actualizará el saldo del token en la billetera izquierda. Aquí no lo demostraremos más.
Tres, los puntos principales de este desarrollo
Además de la carga de trabajo relativamente grande de empalme, actualización o visualización de la interfaz de usuario, este desarrollo también tiene algunos puntos de diseño o escritura de código:
- Diseño de almacenamiento local. La lista de tokens de la cuenta debe almacenarse en el almacenamiento local y debe diseñarse cuidadosamente en qué formato, cómo actualizarla y cómo leerla. La implementación específica está
src\contexts\StorageProvider.jsaquí, y los lectores también pueden tener mejores ideas de diseño. Aquí está una de las notas:
/** 本地存储计划示例，
{
"0x1234....":{
crypt:"ifajfay08",
erc20Tokens:{
homestead:[
{
address:'0x1234....'
balance:0x78,
symbol:'',
decimals:''
},
{
address:'0x1234....'
symbol:'',
decimals:''
}
]
}
}
}
*/
El almacenamiento local está en formato Json y cada dirección corresponde a una clave cifrada (utilizada para iniciar sesión) y una lista de 20 tokens. Entre ellos, la lista de 20 tokens se distingue según la red. Los 20 tokens de una determinada red son una matriz. Cada elemento de la matriz es un objeto de 20 tokens, incluida su dirección, saldo de cuenta, símbolo y precisión.
Aquí hay un pequeño detalle: porque en la biblioteca Js, el valor entero devuelto por Ethereum está en el bigNumberformato, se convierte en un formato de cadena hexadecimal cuando se guarda localmente, y necesita convertirse en él cuando se lee y se usa localmente bigNumber.
- Contrato de token ERC20. Dado que es necesario tratar con tokens, los contratos de tokens deben estar involucrados. Los elementos principales de un contrato de token son la dirección del token, la ABI del contrato de token y, por supuesto, a qué red pertenece. Entre ellos, el ABI del contrato de token puede ser el ABI generado por un compilador ordinario o un ABI legible por humanos (
ethersse pueden usar ambas bibliotecas, el autor no ha usado otras bibliotecas, verifíquelo usted mismo si es necesario). El ABI del contrato de token ERC20 utilizado en esta billetera es un ABI legible, el código es el siguiente:
[
"function balanceOf(address owner) view returns (uint)",
"function decimals() view returns (uint8)",
"function symbol() view returns (string)",
"function allowance(address tokenOwner, address spender) view returns (uint)",
"function transfer(address to, uint amount)",
"function approve(address spender, uint amount)",
"event Transfer(address indexed from, address indexed to, uint amount)",
"event Approval(address indexed tokenOwner, address indexed spender, uint amount)"
]
El fragmento de código para obtener el contrato es el siguiente:
//获取ERC20代币合约
export function getErc20Token(tokenAddress,network,wallet) {
if(!isAddress(tokenAddress) || !network) {
return null;
}
try{
let provider = ethers.getDefaultProvider(network);
if(wallet) {
provider = wallet.connect(provider)
}
return new ethers.Contract(tokenAddress,ERC20_ABI,provider)
}catch{
return null
}
}
Aquí de nuevo: si los lectores están interesados en desarrollar Dapp en Ethereum, ethersprimero lea la biblioteca.
- Para obtener y actualizar el saldo del token ERC20 de la cuenta, primero veamos el código de obtención:
//获取某个地址在某个token余额
export async function getTokenBalance(tokenContract,address) {
return tokenContract.balanceOf(address).catch(error => {
error.code = ERROR_CODES.TOKEN_BALANCE
throw error
})
}
Este código es muy simple, llame directamente al balanceOfmétodo del contrato , tenga en cuenta que devuelve una promesa.
Veamos de nuevo la implementación de la actualización. Esto es relativamente complicado y puede haber una mejor forma de optimización:
//监听用户代币变化
useEffect(()=>{
if(tokens.length > 1) {
let stale = false
let allContracts = []
for (let token of tokens) {
if(token.symbol !== 'ETH'){
allContracts.push(getErc20Token(token.address,network,wallet))
}
}
for (let contract of allContracts) {
let filter1 = contract.filters.Transfer(wallet.address,null)
let filter2 = contract.filters.Transfer(null,wallet.address)
// eslint-disable-next-line
contract.on(filter1,(from,to,amount,event) => {
getTokenBalance(contract,wallet.address).then(_balance => {
if(!stale) {
updateTokenBalance(wallet.address,network,contract.address,_balance)
}
})
})
// eslint-disable-next-line
contract.on(filter2,(from,to,amount,event) => {
getTokenBalance(contract,wallet.address).then(_balance => {
if(!stale) {
updateTokenBalance(wallet.address,network,contract.address,_balance)
}
})
})
}
return () => {
stale = true
for (let contract of allContracts) {
contract.removeAllListeners('Transfer')
}
}
}
},[tokens,network,wallet,updateTokenBalance])
Aquí configuramos oyentes para todos los contratos de tokens para monitorear sus Transfereventos. Establezca filtros por separado para filtrar los eventos en los que el remitente o el receptor es una cuenta de usuario. Después de escuchar el evento, obtenga el último saldo del usuario para actualizar. Cuando la interfaz salga, cancele todos los oyentes.
También hay pequeños consejos, para una matriz pura de matrices (sin propiedad adicional) for (let key of arrays)y los for (let key in arrays)términos son diferentes, la adquisición anterior es un elemento, que se obtiene bajo estándar, cuando desea usar cuidado de no usar el incorrecto .
Cuatro, resumen
Comparado con las pocas veces anteriores, este desarrollo es relativamente más complicado, el tiempo es escaso, no hay una prueba detallada, cualquier imperfección o error son bienvenidos los lectores para dar correcciones en el proceso de lectura o uso, muchas gracias.
Con la profundización del desarrollo, sentirá cada vez más que necesita aclarar cada atributo de cada componente del marco de la interfaz de usuario de Material, e incluso cada regla de CSS. Sin embargo, este es un proceso a largo plazo y le resulta difícil profundizar en la implementación subyacente. Por lo tanto, es muy necesario seguir aprendiendo todos los componentes del marco Material UI y aprender lo nuevo revisando el pasado. No solo es necesario conocer el uso de los atributos de los componentes de uso común, sino que también necesita saber cuáles son las reglas de CSS de uso común y cómo modificarlas. Creo que incluso si no está aprendiendo Material UI, incluso si está aprendiendo algunos marcos en Vue, lo mismo es cierto.
El código de IU específico es engorroso y complicado, por lo que no daré un ejemplo aquí. Puede descargar mi código y echar un vistazo.
Además, recomiendo un artículo: CSS, arte, ciencia o pesadilla (todo lo que debes saber) . Personalmente, creo que este es un artículo de lectura obligada para todos los desarrolladores front-end, aunque no soy un desarrollador front-end.
En el próximo desarrollo, planeamos implementar la función de transferencia de tokens ERC20
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.