feat(Queue): add share block to transaction details (#4838)

* feat(Queue): add share block to transaction details

* fix(Queue): use different event for share block

* fix(Queue): rename owners to signers

* feat(Queue): add event to track expanding block

* fix(Queue): change handler property

* fix(Queue): use same event with label

apps/web/src/components/transactions/TxDetails/index.tsx

@@ -21,7 +21,7 @@ import { InfoDetails } from '@/components/transactions/InfoDetails'
 import NamedAddressInfo from '@/components/common/NamedAddressInfo'
 import css from './styles.module.css'
 import ErrorMessage from '@/components/tx/ErrorMessage'
-import TxShareLink from '../TxShareLink'
+import { TxShareButton } from '../TxShareLink/TxShareButton'
 import { ErrorBoundary } from '@sentry/react'
 import ExecuteTxButton from '@/components/transactions/ExecuteTxButton'
 import SignTxButton from '@/components/transactions/SignTxButton'
@@ -37,6 +37,7 @@ import { useGetTransactionDetailsQuery } from '@/store/api/gateway'
 import { asError } from '@/services/exceptions/utils'
 import { POLLING_INTERVAL } from '@/config/constants'
 import { TxNote } from '@/features/tx-notes'
+import { TxShareBlock } from '../TxShareLink/TxShareBlock'
 
 export const NOT_AVAILABLE = 'n/a'
 
@@ -88,7 +89,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
         </div>
 
         <div className={css.shareLink}>
-          <TxShareLink id={txSummary.id} />
+          <TxShareButton txId={txSummary.id} />
         </div>
 
         <div className={css.txData}>
@@ -142,6 +143,8 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
             proposer={proposedByDelegate}
           />
 
+          {isQueue && <TxShareBlock txId={txDetails.txId} />}
+
           {isQueue && (
             <Box className={css.buttons}>
               {awaitingExecution ? <ExecuteTxButton txSummary={txSummary} /> : <SignTxButton txSummary={txSummary} />}

apps/web/src/components/transactions/TxShareLink/TxShareBlock.tsx

@@ -0,0 +1,43 @@
+import { Accordion, AccordionDetails, AccordionSummary, Button, Paper, SvgIcon, Typography } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import type { ReactElement } from 'react'
+
+import ShareIcon from '@/public/images/messages/link.svg'
+import { trackEvent, TX_LIST_EVENTS } from '@/services/analytics'
+import TxShareLink from '.'
+
+import css from './styles.module.css'
+
+export function TxShareBlock({ txId }: { txId: string }): ReactElement | null {
+  const onExpand = (_: React.SyntheticEvent, expanded: boolean) => {
+    if (expanded) {
+      trackEvent(TX_LIST_EVENTS.OPEN_SHARE_BLOCK)
+    }
+  }
+
+  return (
+    <Paper className={css.wrapper}>
+      <Accordion className={css.accordion} onChange={onExpand}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />} className={css.summary}>
+          <Typography className={css.header}>Share link with other signers</Typography>
+        </AccordionSummary>
+        <AccordionDetails className={css.details}>
+          If signers have previously subscribed to notifications, they will be notified about signing this transaction.
+          You can also share the link with them to speed up the process.
+        </AccordionDetails>
+      </Accordion>
+      <div className={css.copy}>
+        <TxShareLink id={txId} eventLabel="share-block">
+          <Button
+            variant="outlined"
+            size="compact"
+            startIcon={<SvgIcon component={ShareIcon} inheritViewBox fontSize="small" className={css.icon} />}
+            className={css.button}
+          >
+            Copy link
+          </Button>
+        </TxShareLink>
+      </div>
+    </Paper>
+  )
+}

apps/web/src/components/transactions/TxShareLink/TxShareButton.tsx

@@ -0,0 +1,16 @@
+import { IconButton, Link, SvgIcon } from '@mui/material'
+import React from 'react'
+import type { ReactElement } from 'react'
+
+import ShareIcon from '@/public/images/common/share.svg'
+import TxShareLink from '.'
+
+export function TxShareButton({ txId }: { txId: string }): ReactElement {
+  return (
+    <TxShareLink id={txId} eventLabel="button">
+      <IconButton data-testid="share-btn" component={Link} aria-label="Share">
+        <SvgIcon component={ShareIcon} inheritViewBox fontSize="small" color="border" />
+      </IconButton>
+    </TxShareLink>
+  )
+}

apps/web/src/components/transactions/TxShareLink/index.tsx

@@ -1,26 +1,30 @@
 import type { ReactElement } from 'react'
-import { IconButton, Link, SvgIcon } from '@mui/material'
-import ShareIcon from '@/public/images/common/share.svg'
 import { AppRoutes } from '@/config/routes'
 import { useRouter } from 'next/router'
 import Track from '@/components/common/Track'
-import { TX_LIST_EVENTS } from '@/services/analytics/events/txList'
+import { TX_LIST_EVENTS } from '@/services/analytics'
 import React from 'react'
 import CopyTooltip from '@/components/common/CopyTooltip'
 import useOrigin from '@/hooks/useOrigin'
 
-const TxShareLink = ({ id }: { id: string }): ReactElement => {
+const TxShareLink = ({
+  id,
+  children,
+  eventLabel,
+}: {
+  id: string
+  children: ReactElement
+  eventLabel: 'button' | 'share-block'
+}): ReactElement => {
   const router = useRouter()
   const { safe = '' } = router.query
   const href = `${AppRoutes.transactions.tx}?safe=${safe}&id=${id}`
   const txUrl = useOrigin() + href
 
   return (
-    <Track {...TX_LIST_EVENTS.COPY_DEEPLINK}>
+    <Track {...TX_LIST_EVENTS.COPY_DEEPLINK} label={eventLabel}>
       <CopyTooltip text={txUrl} initialToolTipText="Copy the transaction URL">
-        <IconButton data-testid="share-btn" component={Link} aria-label="Share">
-          <SvgIcon component={ShareIcon} inheritViewBox fontSize="small" color="border" />
-        </IconButton>
+        {children}
       </CopyTooltip>
     </Track>
   )

apps/web/src/components/transactions/TxShareLink/styles.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  border: 1px solid var(--color-border-light);
+  margin-top: var(--space-2);
+}
+
+.accordion {
+  border: unset;
+}
+
+.summary {
+  background: unset !important;
+}
+
+.header {
+  font-weight: 700;
+}
+
+.details {
+  padding-top: 0;
+  padding-bottom: 12px;
+}
+
+.copy {
+  padding: var(--space-2);
+  padding-top: 4px;
+}
+
+.icon {
+  margin-right: 4px;
+}
+
+.button {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}

apps/web/src/services/analytics/events/txList.ts

@@ -20,6 +20,10 @@ export const TX_LIST_EVENTS = {
     action: 'Copy deeplink',
     category: TX_LIST_CATEGORY,
   },
+  OPEN_SHARE_BLOCK: {
+    action: 'Open share block',
+    category: TX_LIST_CATEGORY,
+  },
   CONFIRM: {
     action: 'Confirm transaction',
     category: TX_LIST_CATEGORY,