contract detail design + share functionality

src/pages/contract-detail/contract-detail.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CopyToClipboardButton } from '@/view/components/CopyButton'
 import { MonoTypography } from '@/view/components/MonoTypography'
-import { Box, Typography, Stack, Tooltip } from '@mui/material'
+import { Box, Typography, Stack, Tooltip, Button } from '@mui/material'
 import { DefaultToolTipButton } from '@/view/components/DefaultTooltipButton'
 import EditIcon from '@mui/icons-material/Edit'
 import ShareIcon from '@mui/icons-material/Share'
@@ -10,10 +10,17 @@ import { getChain } from '@/constants/chains'
 import NetworkBadge from '@/view/components/NetworkBadge'
 import { UseModalBehaviour } from '@/hooks/useModalBehaviour'
 import { UserContractDetails } from '@/domain'
-import { isoDate, isoToReadableDate } from '@/utils/formatString'
+import {
+  isoDate,
+  isoToReadableDate,
+  truncateAddress
+} from '@/utils/formatString'
+import { ShareContractModal } from '@/view/components/ShareContractModal'
+import { getUserContractUrl } from '@/view/components/ContractsTable/getUserContractUrl'
 import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 import { ContractDetailsInteraction } from '@/view/ContractDetailsInteraction'
 import { ConnectWalletSection } from '@/view/components/ConnectWalletSection'
+import InfoOutlined from '@mui/icons-material/InfoOutlined'
 
 type ContractTabType = 'Read Contract' | 'Write Contract'
 const types: ContractTabType[] = ['Read Contract', 'Write Contract']
@@ -27,15 +34,14 @@ interface AbiSource {
   source: { language: string }
 }
 
-export default function ContractDetail({
-  modalBehaviour,
-  userContract
-}: Props) {
+export default function ContractDetail({ userContract }: Props): JSX.Element {
+  const [openShareModal, setOpenShareModal] = React.useState(false)
+  const url = getUserContractUrl(userContract)
   const [type, setType] = React.useState(types[0])
   const { accountConnected } = useNetworkAccountsContext()
-  if (!userContract) {
+  /*   if (!userContract) {
     return null
-  }
+  } */
 
   const chainDetails = getChain(userContract.network)
   const isReadContract = type === 'Read Contract'
@@ -56,28 +62,32 @@ export default function ContractDetail({
             title="Edit"
             Icon={EditIcon}
           ></DefaultToolTipButton>
-          <DefaultToolTipButton
-            id="download-contract-address"
-            sx={{ marginLeft: '0.5rem', color: 'white' }}
-            title="Download metadata"
-            Icon={DownloadIcon}
-          ></DefaultToolTipButton>
-          <DefaultToolTipButton
-            id="share-contract-address"
-            sx={{ marginLeft: '0.5rem', color: 'white' }}
-            title="Share"
-            Icon={ShareIcon}
-            onClick={() => modalBehaviour.openModal()}
-          ></DefaultToolTipButton>
         </Stack>
-        <Typography variant="body1">
-          Added {''}
-          <Tooltip placement="top" title={isoDate(userContract.date)}>
-            <Typography variant="body1" component="span">
-              {isoToReadableDate(userContract.date)}
-            </Typography>
-          </Tooltip>
-        </Typography>
+        <Box display="flex" gap="1rem">
+          <Button
+            variant="contained"
+            endIcon={<DownloadIcon />}
+            sx={{
+              borderRadius: '3rem',
+              maxHeight: '3rem',
+              backgroundColor: '#20222D'
+            }}
+          >
+            Download
+          </Button>
+          <Button
+            variant="contained"
+            endIcon={<ShareIcon />}
+            color="primary"
+            onClick={() => setOpenShareModal(true)}
+            sx={{
+              borderRadius: '3rem',
+              maxHeight: '3rem'
+            }}
+          >
+            Share
+          </Button>
+        </Box>
       </Stack>
       <Stack direction="row">
         <MonoTypography>{userContract.address}</MonoTypography>
@@ -94,42 +104,80 @@ export default function ContractDetail({
         sx={{ margin: '2em 0 3rem' }}
       >
         <Box display="flex" flexDirection="column">
-          <Typography variant="caption" align="left">
-            TYPE
-          </Typography>
+          <Box display="flex" flexDirection="row" gap="0.5rem">
+            <Typography variant="caption" align="left">
+              TYPE
+            </Typography>
+            <Tooltip
+              placement="top"
+              title="Type or category of the smart contract. You can find the categories in the 'Builder' page."
+            >
+              <InfoOutlined style={{ fontSize: 16 }} />
+            </Tooltip>
+          </Box>
           <Typography variant="h5" align="left">
             {userContract.type}
           </Typography>
         </Box>
         <Box display="flex" flexDirection="column">
-          <Typography variant="caption" align="left">
-            NETWORK
-          </Typography>
+          <Box display="flex" flexDirection="row" gap="0.5rem">
+            <Typography variant="caption" align="left">
+              NETWORK
+            </Typography>
+            <Tooltip
+              placement="top"
+              title="This network is the one that the contract has been deployed."
+            >
+              <InfoOutlined style={{ fontSize: 16 }} />
+            </Tooltip>
+          </Box>
           <Typography variant="h5" align="left">
             <NetworkBadge
               name={chainDetails.name}
               logo={chainDetails.logo.src}
               logoSize={{ width: 20, height: 20 }}
               description={chainDetails.logo.alt}
-              textTooltip="This network is the one that the contract has been deployed."
+              showTooltip={false}
             />
           </Typography>
         </Box>
         <Box display="flex" flexDirection="column">
-          <Typography variant="caption" align="left">
-            LANGUAGE
-          </Typography>
+          <Box display="flex" flexDirection="row" gap="0.5rem">
+            <Typography variant="caption" align="left">
+              LANGUAGE{' '}
+            </Typography>
+            <Tooltip
+              placement="top"
+              title="Programming language or technology used to write the smart contract's code."
+            >
+              <InfoOutlined style={{ fontSize: 16 }} />
+            </Tooltip>
+          </Box>
           <Typography variant="h5" align="left">
             {abi?.source.language}
           </Typography>
         </Box>
         <Box display="flex" flexDirection="column">
-          <Typography variant="caption" align="left">
-            Actions
-          </Typography>
-          <Typography variant="h5" align="left">
-            --
+          <Typography variant="caption">
+            Added {''}
+            <Tooltip placement="top" title={isoDate(userContract.date)}>
+              <Typography variant="caption" component="span">
+                {isoToReadableDate(userContract.date)}
+              </Typography>
+            </Tooltip>
           </Typography>
+          <Stack direction="row" alignItems="center">
+            <Typography variant="caption">Deployed by</Typography>
+            {''}
+            <MonoTypography sx={{ fontSize: '0.8rem' }}>
+              {truncateAddress(userContract.address, 4)}
+            </MonoTypography>
+            <CopyToClipboardButton
+              id="copy-contract-address"
+              sx={{ marginLeft: '0.5rem' }}
+              data={userContract.address}
+            />
+          </Stack>
         </Box>
       </Box>
       {accountConnected ? (
@@ -139,6 +187,11 @@ export default function ContractDetail({
           text={'You need to connect a wallet to interact with this contract.'}
         />
       )}
+      <ShareContractModal
+        open={openShareModal}
+        handleClose={() => setOpenShareModal(false)}
+        url={url}
+      ></ShareContractModal>
     </>
   )
 }

src/view/components/Logo/index.tsx

@@ -9,7 +9,7 @@ import { CW_POLKADOT, LOGO_POLKADOT } from '@/constants/images'
 export default function Logo() {
   return (
     <NextLink href={ROUTES.HOME}>
-      <Stack sx={{ marginTop: '1rem' }}>
+      <Stack sx={{ marginTop: '2rem' }}>
         <Image
           alt="Logo polkadot"
           src={LOGO_POLKADOT}