Merge pull request #68 from cowprotocol/66-copy-btn-batch-id

Add a copy button and navigation to the last batch

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx

@@ -8,6 +8,8 @@ import { CardRow } from 'components/common/CardRow'
 import { TotalSummaryResponse } from '.'
 import { abbreviateString } from 'utils'
 import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint'
+import { CopyButton } from 'components/common/CopyButton'
+import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
 
 const BatchInfoHeight = '19.6rem'
 const DESKTOP_TEXT_SIZE = 1.8 // rem
@@ -110,9 +112,18 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.
               valueSize={valueTextSize}
             />
             <CardContent
-              variant="3row"
+              variant={rowsByCard}
               label1="Batch ID"
-              value1={batchInfo && abbreviateString(batchInfo?.batchId, 0, 6)}
+              value1={
+                batchInfo && (
+                  <>
+                    <LinkWithPrefixNetwork to={`/tx/${batchInfo.batchId}`}>
+                      {abbreviateString(batchInfo?.batchId, 6, 4)}
+                    </LinkWithPrefixNetwork>
+                    <CopyButton heightIcon={1.35} text={batchInfo?.batchId || ''} />
+                  </>
+                )
+              }
               loading={isLoading}
               valueSize={valueTextSize}
             />

src/components/common/Card/CardContent.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import ShimmerBar from 'apps/explorer/components/common/ShimmerBar'
+import { media } from 'theme/styles/media'
 
 export type statusType = 'success' | 'danger'
 
@@ -10,7 +11,7 @@ export interface CardContentProps {
   direction?: string
   icon1?: React.ReactElement
   label1: string
-  value1: string | number | undefined
+  value1: string | number | undefined | React.ReactElement
   valueSize?: number
   labelWidth?: number
   caption1?: string | number
@@ -52,6 +53,10 @@ const CardBody = styled.div<{
       justify-content: ${({ variant, direction }): string =>
         variant === 'double' && direction === 'row' ? 'flex-end' : 'center'};
       width: ${({ labelWidth }): string => (labelWidth ? `${labelWidth}px` : 'initial')};
+      flex-direction: row-reverse;
+      span {
+        padding-left: 0.5rem;
+      }
     }
     > div {
       display: flex;
@@ -63,6 +68,9 @@ const CardBody = styled.div<{
       > h3 {
         font-size: ${({ valueSize }): number => valueSize || 1.8}rem;
         margin: 0px;
+        ${media.mobile} {
+          font-size: 1.45rem;
+        }
       }
       > span {
         font-weight: bold;
@@ -130,8 +138,8 @@ export const CardContent: React.FC<CardContentProps> = ({
       {!loading && label2 && (
         <div>
           <p>
-            {icon2 && <React.Fragment>{icon2} &nbsp;</React.Fragment>}
             {label2}
+            {icon2 && <React.Fragment>{icon2} &nbsp;</React.Fragment>}
           </p>
           <div>
             <h3>{value2}</h3>

src/components/common/CopyButton/index.tsx

@@ -1,23 +1,32 @@
 import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components'
 import { faCopy } from '@fortawesome/free-regular-svg-icons'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CopyToClipboard from 'react-copy-to-clipboard'
 
 import { DISPLAY_TEXT_COPIED_CHECK } from 'apps/explorer/const'
+import { media } from 'theme/styles/media'
 
 // Why is `copied` not a boolean?
 //   Because it's passed down to parent component (`FontAwesomeIcon`) and
 // since it's not consumed in the component, it's passed down to the HTML.
 //   Which does not like to receive boolean values, with an error like:
 // "Warning: Received `false` for a non-boolean attribute `copied`"
 //   Effectively though, it's treated as a boolean, thus the value doesn't matter
-const Icon = styled(FontAwesomeIcon)<{ copied?: string }>`
+const Icon = styled(FontAwesomeIcon)<{ copied?: string; height?: number }>`
   color: ${({ theme, copied }): string => (copied ? theme.green : theme.grey)};
-  transition: color 0.2s ease-in;
+  transition: color 0.1s ease-in;
   cursor: ${({ copied }): string => (copied ? 'reset' : 'pointer')};
-  vertical-align: top;
+  vertical-align: baseline;
+  margin: 0 0 0 0.3rem;
+  width: 1.6rem !important;
+
+  ${({ height }): FlattenSimpleInterpolation | undefined | number =>
+    height &&
+    css`
+      height: ${height}rem;
+    `}
 
   &:hover {
     color: ${({ theme, copied }): string => (copied ? theme.green : theme.white)};
@@ -26,11 +35,21 @@ const Icon = styled(FontAwesomeIcon)<{ copied?: string }>`
   + span {
     color: ${({ theme }): string => theme.green};
     font-weight: ${({ theme }): string => theme.fontMedium};
-    margin: 0 0 0 0.1rem;
+    font-size: 1.2rem;
+    position: absolute;
+    border: 1px solid ${({ theme }): string => theme.green};
+    background-color: ${({ theme }): string => theme.green2};
+    padding: 0.5rem;
+    border-radius: 0.4rem;
+    margin-top: -3rem;
+    margin-left: -3.3rem;
+    ${media.mediumDownMd} {
+      display: none;
+    }
   }
 `
 
-export type Props = { text: string; onCopy?: (value: string) => void }
+export type Props = { text: string; onCopy?: (value: string) => void; heightIcon?: number }
 
 /**
  * Simple CopyButton component.
@@ -41,7 +60,7 @@ export type Props = { text: string; onCopy?: (value: string) => void }
  * then is back to original copy icon
  */
 export function CopyButton(props: Props): JSX.Element {
-  const { text, onCopy } = props
+  const { text, onCopy, heightIcon } = props
 
   const [copied, setCopied] = useState(false)
   const handleOnCopy = (): void => {
@@ -64,7 +83,7 @@ export function CopyButton(props: Props): JSX.Element {
   return (
     <CopyToClipboard text={text} onCopy={handleOnCopy}>
       <span>
-        <Icon icon={copied ? faCheck : faCopy} copied={copied ? 'true' : undefined} />{' '}
+        <Icon height={heightIcon} icon={copied ? faCheck : faCopy} copied={copied ? 'true' : undefined} />{' '}
         {copied && <span className="copy-text">Copied</span>}
       </span>
     </CopyToClipboard>

src/components/common/RowWithCopyButton/index.tsx

@@ -16,6 +16,7 @@ const Wrapper = styled.span`
 
 const Content = styled.div`
   display: inline-block;
+  position: relative;
 `
 
 type Props = {

src/components/orders/OrdersUserDetailsTable/index.tsx

@@ -82,7 +82,7 @@ const Wrapper = styled(StyledUserDetailsTable)`
         align-items: center;
       }
       .copy-text {
-        margin-left: 5px;
+        display: none;
       }
     }
   }

src/components/transaction/TransactionTable/index.tsx

@@ -83,7 +83,7 @@ const Wrapper = styled(StyledUserDetailsTable)`
         align-items: center;
       }
       .copy-text {
-        margin-left: 5px;
+        display: none;
       }
     }
   }