Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions src/components/Request/Components/ReferenceAndAttachment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Icon from '@/components/Global/Icon'

export const ReferenceAndAttachment = ({
reference,
attachmentUrl,
}: {
reference?: string | null
attachmentUrl?: string | null
}) => {
if (!reference && !attachmentUrl) return null
return (
<>
<div className={`flex w-full flex-col items-center justify-center gap-2`}>
{reference && (
<label className="max-w-full text-h8">
Ref: <span className="font-normal"> {reference} </span>
</label>
)}
{attachmentUrl && (
<a
href={attachmentUrl}
download
target="_blank"
className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
Comment on lines +20 to +24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add security attributes and improve accessibility

The download link needs security attributes and accessibility improvements:

     <a
         href={attachmentUrl}
         download
         target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Download attachment file"
         className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
     >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a
href={attachmentUrl}
download
target="_blank"
className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
<a
href={attachmentUrl}
download
target="_blank"
rel="noopener noreferrer"
aria-label="Download attachment file"
className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "

>
<Icon name={'download'} />
Download attachment
</a>
)}
Comment on lines +19 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Validate attachment URL before rendering

Consider adding URL validation before rendering the download link to prevent potential security issues:

-    {attachmentUrl && (
+    {attachmentUrl && isValidUrl(attachmentUrl) && (
         <a
             href={attachmentUrl}
             download
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Download attachment file"
             className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
         >
             <Icon name={'download'} />
             Download attachment
         </a>
     )}

+// Add this utility function
+const isValidUrl = (url: string): boolean => {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        console.error('Invalid attachment URL provided');
+        return false;
+    }
+};

Committable suggestion skipped: line range outside the PR's diff.

</div>
<div className="flex w-full border-t border-dotted border-black" />
</>
)
}
25 changes: 16 additions & 9 deletions src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,29 @@ import * as consts from '@/constants'
import * as _consts from '../../Pay.consts'
import * as utils from '@/utils'
import Link from 'next/link'
import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'

export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _consts.IRequestLinkData | undefined }) => {

const chainName = consts.supportedPeanutChains && consts.supportedPeanutChains.find((chain) => chain.chainId == requestLinkData?.chainId)?.name
const chainName =
consts.supportedPeanutChains &&
consts.supportedPeanutChains.find((chain) => chain.chainId == requestLinkData?.chainId)?.name
const tokenSymbolAvailable: boolean = !!requestLinkData?.tokenSymbol
const tokenAmountAvailable: boolean = !!requestLinkData?.tokenAmount
const chainAvailable: boolean = !!requestLinkData?.chainId
const recipientAddressAvailable: boolean = !!requestLinkData?.recipientAddress
const dataAvailable: boolean = tokenSymbolAvailable || tokenAmountAvailable || chainAvailable || recipientAddressAvailable

const dataAvailable: boolean =
tokenSymbolAvailable || tokenAmountAvailable || chainAvailable || recipientAddressAvailable

return (
<div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
<ReferenceAndAttachment
reference={requestLinkData?.reference}
attachmentUrl={requestLinkData?.attachmentUrl}
/>
<label className="text-h2">Sorry, this link has already been paid.</label>
{dataAvailable && (
<div className="flex w-full flex-col items-center justify-center gap-2">
<label className="text-h8 ">
This link previously contained:
</label>
<label className="text-h8 ">This link previously contained:</label>
{tokenSymbolAvailable && (
<div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
<div className="flex w-max flex-row items-center justify-center gap-1">
Expand Down Expand Up @@ -50,8 +55,10 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
</div>
<span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
<img
src={consts.supportedPeanutChains.find((detail) => detail.chainId === requestLinkData?.chainId)?.icon
.url
src={
consts.supportedPeanutChains.find(
(detail) => detail.chainId === requestLinkData?.chainId
)?.icon.url
}
className="h-6 w-6"
/>
Expand Down
29 changes: 5 additions & 24 deletions src/components/Request/Pay/Views/Initial.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { peanut, interfaces } from '@squirrel-labs/peanut-sdk'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
import { switchNetwork as switchNetworkUtil } from '@/utils/general.utils'
import { type ITokenPriceData } from '@/interfaces'
import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'

const ERR_NO_ROUTE = 'No route found to pay in this chain and token'

Expand Down Expand Up @@ -321,30 +322,10 @@ export const InitialView = ({

return (
<div className="flex w-full flex-col items-center justify-center gap-6 text-center">
{(requestLinkData.reference || requestLinkData.attachmentUrl) && (
<>
<div className={`flex w-full flex-col items-center justify-center gap-2`}>
{requestLinkData.reference && (
<label className="max-w-full text-h8">
Ref: <span className="font-normal"> {requestLinkData.reference} </span>
</label>
)}
{requestLinkData.attachmentUrl && (
<a
href={requestLinkData.attachmentUrl}
download
target="_blank"
className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
>
<Icon name={'download'} />
Download attachment
</a>
)}
</div>
<div className="flex w-full border-t border-dotted border-black" />
</>
)}

<ReferenceAndAttachment
reference={requestLinkData?.reference}
attachmentUrl={requestLinkData?.attachmentUrl}
/>
<div className="flex w-full flex-col items-center justify-center gap-2">
<label className="text-h4">
<AddressLink address={requestLinkData.recipientAddress} /> is requesting
Expand Down
5 changes: 5 additions & 0 deletions src/components/Request/Pay/Views/Success.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { fetchDestinationChain } from '@/components/utils/utils'
import * as context from '@/context'
import { peanut } from '@squirrel-labs/peanut-sdk'
import { useAccount } from 'wagmi'
import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'

export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }: _consts.IPayScreenProps) => {
const { selectedChainID, selectedTokenAddress } = useContext(context.tokenSelectorContext)
Expand Down Expand Up @@ -80,6 +81,10 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }

return (
<div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
<ReferenceAndAttachment
reference={requestLinkData?.reference}
attachmentUrl={requestLinkData?.attachmentUrl}
/>
{isLoading ? (
<>
<div className="animate-spin">
Expand Down