🚸staking: add etherscan link

exactly · Sep 10, 2024 · a5a7bb2 · a5a7bb2
1 parent 10b334d
commit a5a7bb2
Showing 1 changed file with 41 additions and 2 deletions.
diff --git 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"