feat: share link on transaction page (#5440)

* feat: share link on transaction page

* responding to comment

src/nft/components/collection/TransactionCompleteModal.tsx

@@ -2,6 +2,7 @@ import { formatEther } from '@ethersproject/units'
 import { Trace, useTrace } from '@uniswap/analytics'
 import { EventName, ModalName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
+import { OpacityHoverState } from 'components/Common'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Row } from 'nft/components/Flex'
@@ -15,15 +16,36 @@ import {
   formatEthPrice,
   formatUsdPrice,
   formatUSDPriceWithCommas,
+  generateTweetForPurchase,
   getSuccessfulImageSize,
   parseTransactionResponse,
 } from 'nft/utils'
 import { formatAssetEventProperties } from 'nft/utils/formatEventProperties'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { Upload } from 'react-feather'
+import styled from 'styled-components/macro'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import * as styles from './TransactionCompleteModal.css'
 
+const TWITTER_WIDTH = 560
+const TWITTER_HEIGHT = 480
+
+const UploadLink = styled.a`
+  position: absolute;
+  right: 32px;
+  top: 32px;
+  color: ${({ theme }) => theme.textSecondary};
+  cursor: pointer;
+
+  ${OpacityHoverState}
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    right: 12px;
+    top: 28px;
+  }
+`
+
 const TxCompleteModal = () => {
   const [ethPrice, setEthPrice] = useState(3000)
   const [showUnavailable, setShowUnavailable] = useState(false)
@@ -69,6 +91,16 @@ const TxCompleteModal = () => {
     useSendTransaction.subscribe((state) => (transactionStateRef.current = state.state))
   }, [])
 
+  const shareTweet = () => {
+    window.open(
+      generateTweetForPurchase(nftsPurchased, txHashUrl),
+      'newwindow',
+      `left=${(window.screen.width - TWITTER_WIDTH) / 2}, top=${
+        (window.screen.height - TWITTER_HEIGHT) / 2
+      }, width=${TWITTER_WIDTH}, height=${TWITTER_HEIGHT}`
+    )
+  }
+
   return (
     <>
       {shouldShowModal && (
@@ -94,6 +126,9 @@ const TxCompleteModal = () => {
                     <h1 className={styles.title}>Complete!</h1>
                     <p className={styles.subHeading}>Uniswap has granted your wish!</p>
                   </Box>
+                  <UploadLink onClick={shareTweet} target="_blank">
+                    <Upload size={24} strokeWidth={2} />
+                  </UploadLink>
                   <Box
                     className={styles.successAssetsContainer}
                     style={{

src/nft/utils/asset.ts

-import { DetailsOrigin, GenieAsset, WalletAsset } from 'nft/types'
+import { DetailsOrigin, GenieAsset, UpdatedGenieAsset, WalletAsset } from 'nft/types'
 
 export function getRarityStatus(
   rarityStatusCache: Map<string, boolean>,
@@ -36,3 +36,11 @@ export const generateTweetForAsset = (asset: GenieAsset): string => {
     asset.tokenId
   }%20via%20@uniswap`
 }
+
+export const generateTweetForPurchase = (assets: UpdatedGenieAsset[], txHashUrl: string): string => {
+  const multipleCollections = assets.length > 0 && assets.some((asset) => asset.address !== assets[0].address)
+  const tweetText = `I just purchased ${
+    multipleCollections ? `${assets.length} NFTs` : `${assets.length} ${assets[0].collectionName ?? 'NFT'}`
+  } with Uniswap 🦄\n\nhttps://app.uniswap.org/#/nfts/collection/0x60bb1e2aa1c9acafb4d34f71585d7e959f387769\n${txHashUrl}`
+  return `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`
+}