fix: add handler click to balance (#482)

* fix: add handler click to balance

* style: prettier

src/components/UserMenu/ManaBalances/ManaBalances.tsx

@@ -21,6 +21,7 @@ export const ManaBalances = (props: ManaBalancesProps) => {
             className={classNames(onClickBalance && 'clickable')}
             title={`${manaBalances[network].toLocaleString()} MANA`}
             href={config.get('ACCOUNT_URL')}
+            onClick={onClickBalance}
           >
             {Number(manaBalances[network].toFixed(2)).toLocaleString()}
           </Mana>

src/components/UserMenu/UserMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import classNames from 'classnames'
+import { Network } from '@dcl/schemas/dist/dapps/network'
 
 import { UserMenuSignedIn } from './UserMenuSignedIn/UserMenuSignedIn'
 import { i18n as i18nUserMenu } from './UserMenu.i18n'
@@ -50,6 +51,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
 
   const handleClickJumpIn = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      event.preventDefault()
       onClickUserMenuItem &&
         onClickUserMenuItem(event, {
           eventTrackingName: UserMenuEventId.JUMP_IN,
@@ -71,6 +73,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
 
   const handleClickSignIn = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      event.preventDefault()
       onClickUserMenuItem &&
         onClickUserMenuItem(event, {
           eventTrackingName: UserMenuEventId.SIGN_IN,
@@ -83,6 +86,22 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     [onClickSignIn, onClickUserMenuItem, trackingId]
   )
 
+  const handleClickBalance = useCallback(
+    (
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+      network: Network
+    ) => {
+      event.preventDefault()
+      onClickUserMenuItem &&
+        onClickUserMenuItem(event, {
+          eventTrackingName: UserMenuEventId.BALANCE
+        })
+
+      onClickBalance(event, network)
+    },
+    [onClickBalance, onClickUserMenuItem, trackingId]
+  )
+
   return (
     <Column align="right">
       <Row className={classNames('dcl', 'user-menu-wrapper')}>
@@ -100,7 +119,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
               i18n={i18n}
               onClickToggle={handleToggle}
               onClickUserMenuItem={onClickUserMenuItem}
-              onClickBalance={onClickBalance}
+              onClickBalance={handleClickBalance}
             />
           )}
           {!isSignedIn && (
@@ -113,6 +132,8 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
             primary
             disabled={isSigningIn}
             onClick={handleClickJumpIn}
+            as={'a'}
+            href={config.get('EXPLORER_URL')}
           >
             {i18n.jumpIn}
           </Button>

src/components/UserMenu/UserMenu.types.ts

@@ -39,5 +39,6 @@ export enum UserMenuEventId {
   SIGN_OUT = 'sign_out',
   GUEST = 'guest',
   WALLET = 'wallet',
-  JUMP_IN = 'jump_in'
+  JUMP_IN = 'jump_in',
+  BALANCE = 'balance'
 }