Conectar wallet - Integración Rainbowkit
Añadir-conexión-a-billetera
Uso del botón Conectar
Ahora que hemos empaquetado nuestra aplicación con los componentes WagmiConfig
y RainbowKitProvider
, podemos usar la biblioteca de ganchos wagmi y el componente ConnectButton
de RainbowKit para permitir a los usuarios conectar su billetera e informar al usuario que su billetera está conectada.
En /components/Navbar.js
, podemos importar el componente ConnectButton
de RainbowKit y los ganchos useAccount
y useDisconnect
de wagmi.
Usaremos el gancho useAccount
para acceder a la billetera conectada, si existe, y el gancho useDisconnect
para desconectar la billetera conectada actualmente.
En nuestra Navbar
, podemos verificar el estado de conexión de la billetera del usuario. Si la billetera del usuario está conectada, visualizaremos un botón que muestra la dirección de la billetera del usuario y activa un menú desplegable. De lo contrario, si la billetera del usuario no está conectada, visualizaremos el botón "Conectar billetera" de RainbowKit. Podemos agregar este botón después del botón Crear evento.
Así es como su archivo Navbar.js se debe observar:
Pasamos el objeto de cuenta y la función de desconexión a nuestro componente Navmenu. Los próximos dos pasos ya están hechos para usted. En /components/Navmenu.js
, notará que mostramos la dirección de la billetera de conexión de la siguiente manera:
También permitimos que los usuarios puedan desconectar sus billeteras:
A lo largo de nuestra dApp, verificamos la conexión de la billetera del usuario para renderizar condicionalmente la interfaz de usuario usando el gancho useAccount
de wagmi.
Después de una configuración e importación exitosas, al hacer clic en el botón de conexión, debe esperar una interfaz de usuario como esta:
Escritoras: Sarah Z, Busayo, Traductoras: Dami, Brenda, Caro Meneses
Last updated