Fix correct linking for token allocation (#4111)

src/components/AppLayout/Header/components/SafeTokenWidget/index.tsx

@@ -1,6 +1,8 @@
-import { Box, ButtonBase } from '@material-ui/core'
+import { Box } from '@material-ui/core'
 import { Text, Tooltip } from '@gnosis.pm/safe-react-components'
 import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+
 import Img from 'src/components/layout/Img'
 import { getShortName, _getChainId } from 'src/config'
 import useSafeAddress from 'src/logic/currentSession/hooks/useSafeAddress'
@@ -33,18 +35,19 @@ const StyledWrapper = styled(Box)`
   justify-content: center;
 `
 
-const buttonStyle = {
-  alignSelf: 'stretch',
-  display: 'flex',
-  borderRadius: '8px',
-  padding: '0px 8px 0px 8px',
-  backgroundColor: background,
-  margin: '8px 16px',
-  height: '30px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '8px',
-}
+const StyledLink = styled(Link)`
+  align-self: stretch;
+  display: flex;
+  border-radius: 8px;
+  padding: 0px 8px 0px 8px;
+  text-decoration: none;
+  background-color: ${background};
+  margin: 8px 16px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`
 
 const SafeTokenWidget = (): JSX.Element | null => {
   const safeTokens = useSelector(extendedSafeTokensSelector)
@@ -83,12 +86,12 @@ const SafeTokenWidget = (): JSX.Element | null => {
     <StyledWrapper>
       <Tooltip title={`Open ${claimingApp.name}`}>
         <Track {...OVERVIEW_EVENTS.SAFE_TOKEN_WIDGET}>
-          <ButtonBase href={url || '#'} aria-describedby={'safe-token-widget'} style={buttonStyle}>
+          <StyledLink to={url || '#'} aria-describedby={'safe-token-widget'}>
             <Img alt="Safe token" src={SafeTokenIcon} />
             <Text size="xl" strong>
               {flooredTotalAllocation}
             </Text>
-          </ButtonBase>
+          </StyledLink>
         </Track>
       </Tooltip>
     </StyledWrapper>