Skip to content

Commit

Permalink
Handle error step special error cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedromcunha
pedromcunha committed Aug 22, 2024
1 parent fb40368 commit fb51498
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 93 deletions.
3 changes: 2 additions & 1 deletion packages/ui/src/components/common/TransactionModal/SwapModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,8 @@ const InnerSwapModal: FC<InnerSwapModalProps> = ({
onOpenChange={onOpenChange}
contentCss={{
overflow: 'hidden',
p: isReviewQuoteStep ? '4' : '5'
p: isReviewQuoteStep ? '4' : '5',
maxWidth: 400
}}
showCloseButton={isReviewQuoteStep}
>
Expand Down
201 changes: 109 additions & 92 deletions packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Button,
Flex,
Pill,
Skeleton,
Text
} from '../../../primitives/index.js'
import { motion } from 'framer-motion'
Expand All @@ -22,7 +23,6 @@ import {
faRotateRight
} from '@fortawesome/free-solid-svg-icons/index.js'
import type { useRequests } from '@reservoir0x/relay-kit-hooks'
import { isAPIError } from '@reservoir0x/relay-sdk'

type ErrorStepProps = {
error?: Error | null
Expand Down Expand Up @@ -72,10 +72,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
fillTx?.chainId,
relayClient?.chains
)
const mergedError =
error && (isAPIError(error) || isSolverStatusTimeout)
? error
: new Error(errorMessage)
const mergedError = isRefund && errorMessage ? new Error(errorMessage) : error
const refundDetails = transaction?.data?.refundCurrencyData
const refundChain = transaction?.data?.refundCurrencyData?.currency?.chainId
? relayClient?.chains.find(
Expand Down Expand Up @@ -132,95 +129,115 @@ export const ErrorStep: FC<ErrorStepProps> = ({
) : (
<ErrorWell error={mergedError} hasTxHashes={hasTxHashes} />
)}
{depositTx || fillTx ? (
<>
<Flex
direction="column"
css={{
px: '4',
py: '3',
gap: '3',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
borderRadius: 12,
width: '100%',
mb: 24
}}
>
<Flex justify="between" align="center" css={{ gap: '3' }}>
<Text style="subtitle1">Deposit Tx</Text>
{depositTx ? (
<Anchor
href={`${depositExplorer}/tx/${depositTx.txHash}`}
target="_blank"
css={{ display: 'flex', alignItems: 'center', gap: '1' }}
>
{truncateAddress(depositTx.txHash)}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
style={{ width: 16, height: 16 }}
/>
</Anchor>
) : (
<Text color="red" style="subtitle2">
Order has not been filled
</Text>
)}
</Flex>
<Flex justify="between" align="center" css={{ gap: '3' }}>
<Flex align="center" css={{ gap: '2' }}>
<Text style="subtitle1">Fill Tx</Text>
{isRefund ? (
<Pill
color="gray"
css={{ p: '1', display: 'flex', alignItems: 'center' }}
>
<FontAwesomeIcon
icon={faRotateRight}
style={{ width: 16, height: 16, marginRight: 4 }}
color="#889096"
/>{' '}
<Text style="subtitle2">Refunded</Text>
</Pill>
) : null}
</Flex>

<Flex
direction="column"
css={{
px: '4',
py: '3',
gap: '3',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
borderRadius: 12,
width: '100%',
mb: 24
}}
>
<Flex justify="between" align="center" css={{ gap: '3' }}>
<Text style="subtitle1">Deposit Tx</Text>
{depositTx ? (
<Anchor
href={`${depositExplorer}/tx/${depositTx.txHash}`}
target="_blank"
css={{ display: 'flex', alignItems: 'center', gap: '1' }}
>
{truncateAddress(depositTx.txHash)}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
style={{ width: 16, height: 16 }}
/>
</Anchor>
) : (
<Text color="red" style="subtitle2">
Order has not been filled
</Text>
)}
</Flex>
<Flex justify="between" align="center" css={{ gap: '3' }}>
<Flex align="center" css={{ gap: '2' }}>
<Text style="subtitle1">Fill Tx</Text>
{isRefund ? (
<Pill
color="gray"
css={{ p: '1', display: 'flex', alignItems: 'center' }}
>
<FontAwesomeIcon
icon={faRotateRight}
style={{ width: 16, height: 16, marginRight: 4 }}
color="#889096"
/>{' '}
<Text style="subtitle2">Refunded</Text>
</Pill>
) : null}
{fillTx ? (
<Anchor
href={`${fillExplorer}/tx/${fillTx.txHash}`}
target="_blank"
css={{ display: 'flex', alignItems: 'center', gap: '1' }}
>
{truncateAddress(fillTx.txHash)}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
style={{ width: 16, height: 16 }}
/>
</Anchor>
) : null}

{!fillTx && !isSolverStatusTimeout ? (
<Text color="red" style="subtitle2">
Order has not been filled
</Text>
) : null}

{!fillTx && isSolverStatusTimeout ? <Skeleton /> : null}
</Flex>
</Flex>
{fillTx ? (
<Anchor
href={`${fillExplorer}/tx/${fillTx.txHash}`}
target="_blank"
css={{ display: 'flex', alignItems: 'center', gap: '1' }}
>
{truncateAddress(fillTx.txHash)}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
style={{ width: 16, height: 16 }}
/>
</Anchor>
) : (
<Text color="red" style="subtitle2">
Order has not been filled
</Text>
)}
</Flex>
</Flex>

<Flex css={{ gap: '3', width: '100%' }}>
<Button
color="secondary"
onClick={() => {
window.open(
depositTx
? `${baseTransactionUrl}/transaction/${depositTx.txHash}`
: `${baseTransactionUrl}/transactions?address=${address}`,
'_blank'
)
}}
css={{
justifyContent: 'center',
width: '100%'
}}
>
View Details
</Button>
<Flex css={{ gap: '3', width: '100%' }}>
<Button
color="secondary"
onClick={() => {
window.open(
depositTx
? `${baseTransactionUrl}/transaction/${depositTx.txHash}`
: `${baseTransactionUrl}/transactions?address=${address}`,
'_blank'
)
}}
css={{
justifyContent: 'center',
width: '100%'
}}
>
View Details
</Button>
<Button
onClick={() => {
onOpenChange(false)
}}
css={{
justifyContent: 'center',
width: '100%'
}}
>
Done
</Button>
</Flex>
</>
) : (
<Button
onClick={() => {
onOpenChange(false)
Expand All @@ -232,7 +249,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
>
Done
</Button>
</Flex>
)}
</Flex>
)
}

0 comments on commit fb51498

Please sign in to comment.