Merge pull request #1683 from oasisprotocol/mz/floatingCopyBtn

Add optional floating copy to clipboard button to JSON code preview

.changelog/1683.bugfix.md

@@ -0,0 +1 @@
+Add optional floating copy to clipboard button to JSON code preview

src/app/components/CodeDisplay/index.tsx

@@ -1,10 +1,10 @@
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
 import { ScrollableDataDisplay } from '../../components/ScrollableDataDisplay'
-import { CopyToClipboard } from '../../components/CopyToClipboard'
+import { CopyToClipboard, FloatingCopyToClipboard } from '../../components/CopyToClipboard'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { base64ToHex } from '../../utils/helpers'
 
@@ -13,31 +13,36 @@ type CodeDisplayProps = {
   copyToClipboardValue: string
   label?: string
   extraTopPadding?: boolean
-  withCopyButton?: boolean
+  floatingCopyButton?: boolean
 }
 
 const CodeDisplay: FC<CodeDisplayProps> = ({
   code,
   copyToClipboardValue,
   label,
   extraTopPadding,
-  withCopyButton = true,
+  floatingCopyButton = false,
 }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
+  const [isHovering, setIsHovering] = useState(false)
 
   if (!code) {
     return null
   }
 
   return (
-    <>
+    <Box
+      sx={{ flex: 1, position: 'relative' }}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          my: 3,
+          my: floatingCopyButton ? 0 : 3,
           pt: extraTopPadding ? 4 : 0,
         }}
       >
@@ -46,16 +51,17 @@ const CodeDisplay: FC<CodeDisplayProps> = ({
             {label}
           </Typography>
         )}
-        {withCopyButton && (
+        {floatingCopyButton ? (
+          <FloatingCopyToClipboard isVisible={isHovering} value={copyToClipboardValue} />
+        ) : (
           <CopyToClipboard
             value={copyToClipboardValue}
             label={isMobile ? t('common.copy') : t('contract.copyButton', { subject: label })}
           />
         )}
       </Box>
-
       <ScrollableDataDisplay data={code} />
-    </>
+    </Box>
   )
 }
 
@@ -83,18 +89,18 @@ const StyledPre = styled('pre')({
 type JsonCodeDisplayProps = {
   data: Record<string, any>
   label?: string
-  withCopyButton?: boolean
+  floatingCopyButton?: boolean
 }
 
-export const JsonCodeDisplay: FC<JsonCodeDisplayProps> = ({ data, label, withCopyButton = true }) => {
+export const JsonCodeDisplay: FC<JsonCodeDisplayProps> = ({ data, label, floatingCopyButton }) => {
   const formattedJson = JSON.stringify(data, null, 2)
 
   return (
     <CodeDisplay
       code={<StyledPre>{formattedJson}</StyledPre>}
       copyToClipboardValue={formattedJson}
       label={label}
-      withCopyButton={withCopyButton}
+      floatingCopyButton={floatingCopyButton}
     />
   )
 }

src/app/components/CopyToClipboard/index.tsx

@@ -10,11 +10,15 @@ import Button from '@mui/material/Button'
 const clipboardTooltipDuration = 2000
 
 type CopyToClipboardProps = {
+  floating?: boolean
+  isFloatingVisible?: boolean
   value: string
   label?: string
 }
 
-const StyledIconButton = styled(ButtonBase)(({ theme }) => ({
+const StyledIconButton = styled(ButtonBase, {
+  shouldForwardProp: prop => prop !== 'floating' && prop !== 'isFloatingVisible',
+})<{ floating?: boolean; isFloatingVisible?: boolean }>(({ theme, floating, isFloatingVisible }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   border: 0,
@@ -24,9 +28,34 @@ const StyledIconButton = styled(ButtonBase)(({ theme }) => ({
   fontFamily: 'inherit',
   padding: 0,
   marginLeft: theme.spacing(4),
+  ...(floating && {
+    position: 'absolute',
+    right: theme.spacing(5),
+    top: theme.spacing(4),
+    opacity: isFloatingVisible ? 1 : 0,
+    transition: 'opacity 0.2s ease-in-out',
+    zIndex: theme.zIndex.fab,
+    boxShadow: theme.shadows[1],
+    background: COLORS.white,
+    borderRadius: '50%',
+    width: 40,
+    height: 40,
+    display: 'flex',
+    justifyContent: 'center',
+    marginLeft: 0,
+  }),
 }))
 
-export const CopyToClipboard: FC<CopyToClipboardProps> = ({ value, label }) => {
+type FloatingCopyToClipboardProps = {
+  isVisible: boolean
+  value: string
+}
+
+export const FloatingCopyToClipboard: FC<FloatingCopyToClipboardProps> = ({ isVisible, value }) => {
+  return <CopyToClipboard floating isFloatingVisible={isVisible} value={value} />
+}
+
+export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, floating, isFloatingVisible, value }) => {
   const { t } = useTranslation()
   const timeout = useRef<number | undefined>(undefined)
   const ariaLabel = t('clipboard.label')
@@ -59,7 +88,13 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ value, label }) => {
           {label}
         </Button>
       ) : (
-        <StyledIconButton color="inherit" onClick={handleCopyToClipboard} aria-label={ariaLabel}>
+        <StyledIconButton
+          floating={floating}
+          isFloatingVisible={isFloatingVisible}
+          color="inherit"
+          onClick={handleCopyToClipboard}
+          aria-label={ariaLabel}
+        >
           <ContentCopyIcon sx={{ fontSize: '1.25em', color: COLORS.brandDark }} />
         </StyledIconButton>
       )}

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -254,7 +254,7 @@ export const RuntimeTransactionDetailView: FC<{
             <>
               <dt>{t('transaction.rawData')}</dt>
               <dd>
-                <JsonCodeDisplay data={transaction.body} withCopyButton={false} />
+                <JsonCodeDisplay data={transaction.body} floatingCopyButton />
               </dd>
             </>
           )}