diff --git a/packages/web/src/components/summary-table/SummaryTable.tsx b/packages/web/src/components/summary-table/SummaryTable.tsx index 8c4dd56923c..a89dc947071 100644 --- a/packages/web/src/components/summary-table/SummaryTable.tsx +++ b/packages/web/src/components/summary-table/SummaryTable.tsx @@ -33,7 +33,7 @@ export type SummaryTableProps = { hideExtraItemsCopy?: string disableExtraItemsToggle?: boolean summaryItem?: SummaryTableItem - title: ReactNode + title?: ReactNode secondaryTitle?: ReactNode summaryLabelColor?: TextColors summaryValueColor?: TextColors @@ -156,7 +156,10 @@ export const SummaryTable = ({ justifyContent='space-between' pv='m' ph='xl' - css={{ opacity: disabled ? 0.5 : 1 }} + css={{ + opacity: disabled ? 0.5 : 1, + '&:first-child': { borderTop: '0' } + }} borderTop='default' > - {renderHeader()} + {title || secondaryTitle ? renderHeader() : null} {collapsible ? ( {renderContent()} ) : ( diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx index 79c484c8300..8074fc678e5 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react' import { USDCPurchaseDetails } from '@audius/common/models' +import { makeSolanaTransactionLink } from '@audius/common/utils' import { ModalContent, ModalHeader, @@ -9,12 +10,13 @@ import { Button, Text, Flex, - IconArrowRight + IconArrowRight, + IconExternalLink } from '@audius/harmony' import moment from 'moment' import DynamicImage from 'components/dynamic-image/DynamicImage' -import { UserLink } from 'components/link' +import { ExternalLink, UserLink } from 'components/link' import { useNavigateToPage } from 'hooks/useNavigateToPage' import { ContentLink } from './ContentLink' @@ -85,7 +87,23 @@ export const PurchaseModalContent = ({ onClick={onClose} /> - + + + {messages.transaction} + + + } + > {moment(purchaseDetails.createdAt).format('MMM DD, YYYY')} diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx index 83c8c197ab3..7fba7d4348b 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx @@ -8,6 +8,7 @@ import { useInboxUnavailableModal, type CommonState } from '@audius/common/store' +import { makeSolanaTransactionLink } from '@audius/common/utils' import { ModalContent, ModalHeader, @@ -16,13 +17,14 @@ import { Button, Text, Flex, - IconMessage + IconMessage, + IconExternalLink } from '@audius/harmony' import moment from 'moment' import { useDispatch, useSelector } from 'react-redux' import DynamicImage from 'components/dynamic-image/DynamicImage' -import { UserLink } from 'components/link' +import { ExternalLink, UserLink } from 'components/link' import { ContentLink } from './ContentLink' import { DetailSection } from './DetailSection' @@ -113,7 +115,23 @@ export const SaleModalContent = ({ onClick={onClose} /> - + + + {messages.transaction} + + + } + > {moment(purchaseDetails.createdAt).format('MMM DD, YYYY')} diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx index 7d469199321..bd0f464d36b 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx @@ -1,10 +1,4 @@ -import { useGetTrackById } from '@audius/common/api' -import { useCurrentStems } from '@audius/common/hooks' -import { - PurchaseAccess, - USDCContentPurchaseType, - USDCPurchaseDetails -} from '@audius/common/models' +import { USDCPurchaseDetails } from '@audius/common/models' import { USDC } from '@audius/fixed-decimal' import { Flex, IconInfo, Text } from '@audius/harmony' @@ -15,9 +9,9 @@ import styles from './styles.module.css' const messages = { payExtra: 'Pay Extra', - downloadable: (count: number) => `Downloadable Files (${count})`, total: 'Total', subtotal: 'Subtotal', + paidToArtist: 'Paid to Artist', networkFee: 'Network Fee', networkFeeRate: '(10%)', networkFeeHelp: @@ -33,15 +27,6 @@ export const TransactionSummary = ({ }) => { const amount = BigInt(transaction.amount) const extraAmount = BigInt(transaction.extraAmount) - const { contentId, contentType } = transaction - const isTrack = contentType === USDCContentPurchaseType.TRACK - const { data: track } = useGetTrackById({ id: contentId }) - const { stemTracks } = useCurrentStems({ - trackId: isTrack && track ? track.track_id : 0 - }) - const downloadableCount = - stemTracks.length + (track?.is_original_available ? 1 : 0) - let creatorTotal = BigInt(0) let networkFee = BigInt(0) for (const split of transaction.splits) { @@ -55,29 +40,13 @@ export const TransactionSummary = ({ const total = isSale ? extraAmount + creatorTotal : extraAmount + amount const items: SummaryTableItem[] = [] - if (transaction.access === PurchaseAccess.STREAM) { - items.push({ - id: 'cost', - label: messages.subtotal, - value: USDC(subtotal).toLocaleString('en-US', { - roundingMode: isSale ? 'floor' : 'ceil' - }) - }) - } else if (transaction.access === PurchaseAccess.DOWNLOAD) { - items.push({ - id: 'download', - label: messages.downloadable(downloadableCount), - value: USDC(subtotal).toLocaleString('en-US', { roundingMode: 'floor' }) - }) - } - - if (extraAmount !== BigInt(0)) { - items.push({ - id: 'payExtra', - label: messages.payExtra, - value: USDC(extraAmount).toLocaleString() + items.push({ + id: 'cost', + label: isSale ? messages.subtotal : messages.paidToArtist, + value: USDC(subtotal).toLocaleString('en-US', { + roundingMode: isSale ? 'floor' : 'ceil' }) - } + }) if (networkFee > 0) { items.push({ @@ -110,15 +79,25 @@ export const TransactionSummary = ({ }) } + if (extraAmount !== BigInt(0)) { + items.push({ + id: 'payExtra', + label: messages.payExtra, + value: USDC(extraAmount).toLocaleString() + }) + } + return ( - {USDC(total).toLocaleString()} - - } + summaryItem={{ + id: 'total', + label: messages.total, + value: ( + + {USDC(total).toLocaleString()} + + ) + }} items={items} /> )