Hotfix tx hash

src/domain/UserContractDetails.ts

@@ -1,12 +1,13 @@
 import { TokenType } from '@/domain/TokenType'
 import { ContractCompiledRaw } from '@/infrastructure'
 import { ContractType } from '@/domain/repositories/DeploymentRepository'
+import { ChainId } from '@/infrastructure/useink/chains'
 
 export type ContractMetadata = ContractCompiledRaw
 
 export interface UserContractDetails {
   userAddress: string
-  blockchain: string
+  blockchain: ChainId
   address: string
   txHash: string
   codeHash: string

src/view/components/CopyButton/index.tsx

@@ -1,6 +1,5 @@
 import { IconButton, SxProps } from '@mui/material'
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'
-// import { Tooltip } from 'react-tooltip'
 import Tooltip from '@mui/material/Tooltip'
 
 import { useCopyToClipboard } from '@/hooks'

src/view/components/ExplorerLink/index.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react'
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded'
+import { IconButton, Link, Tooltip } from '@mui/material'
+
+import { getChain } from '@/constants/chains'
+import { ChainId } from '@/infrastructure/useink/chains'
+import React from 'react'
+
+interface ExplorerLinkProps {
+  blockchain: ChainId
+  txHash?: string
+}
+
+export function ExplorerLink({
+  blockchain,
+  txHash
+}: ExplorerLinkProps): JSX.Element | null {
+  const explorerUrl = useMemo(
+    () => getChain(blockchain).subscanUrl,
+    [blockchain]
+  )
+  const linkDisabled = txHash ? false : true
+
+  if (!explorerUrl) return null
+
+  const iconWithStyles = linkDisabled ? (
+    <Tooltip title="Transaction hash is not available.">
+      <OpenInNewRoundedIcon fontSize="small" />
+    </Tooltip>
+  ) : (
+    <OpenInNewRoundedIcon fontSize="small" />
+  )
+
+  return (
+    <Link href={`${explorerUrl}extrinsic/${txHash}`} target="_blank">
+      <IconButton
+        component="a"
+        disabled={linkDisabled}
+        size="small"
+        color="primary"
+      >
+        {iconWithStyles}
+      </IconButton>
+    </Link>
+  )
+}

src/view/wizardView/BackNextButtons.tsx

@@ -49,7 +49,8 @@ export default function BackNextButton(props: Props) {
     <Grid
       item
       xs={12}
-      mt={9}
+      mt={8}
+      mb={1}
       sx={{ display: 'flex', justifyContent: 'space-between' }}
     >
       {hiddenBack ? (

src/view/wizardView/GridDeployInfo.tsx

@@ -4,17 +4,19 @@ import { styled } from '@mui/material/styles'
 
 import { emptyAsDash, truncateAddress } from '@/utils/formatString'
 import { CopyToClipboardButton, MonoTypography } from '@/components'
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded'
 import { UserContractDetails } from '@/domain'
+import { ExplorerLink } from '@/components/ExplorerLink'
 
-const BoxGridStyled = styled(Box)<BoxProps>(() => ({
+export const BoxGridStyled = styled(Box)<BoxProps>(() => ({
   display: 'grid',
   gridTemplateColumns: '1fr',
   gridTemplateRows: 'repeat(3, 1fr)',
   gap: '1rem',
-  paddingTop: '2rem'
+  marginTop: '1rem'
 }))
 
-const BoxRow = styled(Box)<BoxProps>(() => ({
+export const BoxRow = styled(Box)<BoxProps>(() => ({
   display: 'inherit'
 }))
 
@@ -52,18 +54,24 @@ export function GridDeployInfo({
       </BoxRow>
       <BoxRow>
         <Typography variant="caption" fontWeight="500">
-          Block Number
+          Transaction Hash
         </Typography>
         <Stack direction="row" alignSelf="center">
           <MonoTypography variant="body1">
             {truncateAddress(deployedContract?.txHash, 8)}
           </MonoTypography>
           {deployedContract?.txHash && (
-            <CopyToClipboardButton
-              id="copy-block-number"
-              sx={{ marginLeft: '0.5rem' }}
-              data={deployedContract.txHash}
-            />
+            <Box flexDirection="row">
+              <CopyToClipboardButton
+                id="copy-block-number"
+                sx={{ marginLeft: '0.5rem' }}
+                data={deployedContract.txHash}
+              />
+              <ExplorerLink
+                blockchain={deployedContract.blockchain}
+                txHash={deployedContract.txHash}
+              />
+            </Box>
           )}
         </Stack>
       </BoxRow>