From a5a7bb2c8157b66385dcfe7acc37bdc6db01facc Mon Sep 17 00:00:00 2001
From: franm <fran.marienhoff@gmail.com>
Date: Mon, 9 Sep 2024 16:12:32 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8staking:=20add=20etherscan=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/staking.tsx | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/pages/staking.tsx b/pages/staking.tsx
index 2aac9f8e5..db169de24 100644
--- a/pages/staking.tsx
+++ b/pages/staking.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { NextPage } from 'next';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Typography, useTheme } from '@mui/material';
 import Image from 'next/image';
 import { t } from 'i18next';
 import { useModal } from 'contexts/ModalContext';
@@ -9,16 +9,22 @@ import StakingOperations from 'components/staking/StakingOperations';
 import StakeChart from 'components/charts/StakeChart';
 import Progress from 'components/staking/Progress';
 import { StakeEXAProvider } from 'contexts/StakeEXAContext';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import useEtherscanLink from 'hooks/useEtherscanLink';
+import { useStakedEXA } from 'hooks/useStakedEXA';
 
 const Staking: NextPage = () => {
   const { open: openGetEXA } = useModal('get-exa');
+  const { palette } = useTheme();
+  const { address } = useEtherscanLink();
+  const stakedEXA = useStakedEXA();
 
   return (
     <StakeEXAProvider>
       <Box display="flex" flexDirection="column" gap={3} maxWidth={800} mx="auto" my={5}>
         <Box display="flex" flexDirection="column" gap={3}>
           <Box display="flex" justifyContent="space-between">
-            <Box display="flex" gap={1}>
+            <Box display="flex" gap={1} alignItems="center">
               <Image
                 src={`/img/assets/EXA.svg`}
                 alt={'EXA'}
@@ -32,6 +38,39 @@ const Staking: NextPage = () => {
               <Typography fontSize={24} fontWeight={700}>
                 {t('EXA Staking')}
               </Typography>
+              {stakedEXA && (
+                <Button
+                  id="view"
+                  component="a"
+                  href={address(stakedEXA.address)}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  sx={{
+                    bgcolor: palette.mode === 'light' ? 'figma.grey.100' : 'grey.100',
+                    py: 0.5,
+                    px: 1,
+                  }}
+                >
+                  <Box display="flex" alignItems="center" gap={0.5}>
+                    <Typography
+                      fontSize={10}
+                      fontWeight={500}
+                      fontFamily="IBM Plex Mono"
+                      color={palette.mode === 'light' ? 'figma.grey.600' : 'grey.900'}
+                      textTransform="uppercase"
+                    >
+                      {t('View on Etherscan')}
+                    </Typography>
+                    <OpenInNewIcon
+                      sx={{
+                        height: '10px',
+                        width: '10px',
+                        color: palette.mode === 'light' ? 'figma.grey.600' : 'grey.900',
+                      }}
+                    />
+                  </Box>
+                </Button>
+              )}
             </Box>
             <Button
               variant="contained"