Skip to content

Commit 374b0b3

Browse files
shoom3301shoom3301
committed
fix: generalize OrderNotification for any type of order
1 parent 94df4d2 commit 374b0b3

File tree

18 files changed

+366
-383
lines changed

18 files changed

+366
-383
lines changed

‎apps/cowswap-frontend/src/legacy/state/enhancedTransactions/hooks/index.ts‎

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ export function useTransactionAdder(): TransactionAdder {
4545
chainId,
4646
...addTransactionParams,
4747
nonce,
48-
})
48+
}),
4949
)
5050
} catch (e) {
5151
console.error('Cannot add a transaction', e)
5252
}
5353
},
54-
[dispatch, chainId, account, isSafeWallet, provider]
54+
[dispatch, chainId, account, isSafeWallet, provider],
5555
)
5656
}
5757

@@ -99,47 +99,3 @@ export function useTransactionsByHash({ hashes }: { hashes: string[] }): Enhance
9999
}, {})
100100
}, [allTxs, hashes])
101101
}
102-
103-
// TODO: Add proper return type annotation
104-
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
105-
export function useAllClaimingTransactions() {
106-
const transactionsMap = useAllTransactions()
107-
const transactions = Object.values(transactionsMap)
108-
109-
return useMemo(() => {
110-
return transactions.filter((tx) => !!tx.claim)
111-
}, [transactions])
112-
}
113-
114-
// TODO: Add proper return type annotation
115-
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
116-
export function useAllClaimingTransactionIndices() {
117-
const claimingTransactions = useAllClaimingTransactions()
118-
return useMemo(() => {
119-
const flattenedClaimingTransactions = claimingTransactions.reduce<number[]>((acc, { claim, receipt }) => {
120-
if (claim && claim.indices && !receipt) {
121-
acc.push(...claim.indices)
122-
}
123-
return acc
124-
}, [])
125-
126-
return new Set(flattenedClaimingTransactions)
127-
}, [claimingTransactions])
128-
}
129-
130-
// // watch for submissions to claim
131-
// // return null if not done loading, return undefined if not found
132-
// export function useUserHasSubmittedClaim(account?: string): {
133-
// claimSubmitted: boolean
134-
// claimTxn: EnhancedTransactionDetails | undefined
135-
// } {
136-
// const pendingClaims = useAllClaimingTransactions()
137-
// const claimTxn = useMemo(
138-
// () =>
139-
// // find one that is both the user's claim, AND not mined
140-
// pendingClaims.find((claim) => claim.claim?.recipient === account),
141-
// [account, pendingClaims]
142-
// )
143-
144-
// return { claimSubmitted: !!claimTxn, claimTxn }
145-
// }

‎apps/cowswap-frontend/src/modules/orders/containers/BridgingSuccessNotification/index.tsx‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,56 +5,26 @@ import { ExternalLink } from '@cowprotocol/ui'
55

66
import { t } from '@lingui/core/macro'
77
import { Trans } from '@lingui/react/macro'
8-
import { useBridgeOrderData } from 'entities/bridgeOrders'
98

109
import type { OrderSummaryTemplateProps } from 'common/pure/OrderSummary/summaryTemplates'
11-
import { getUiOrderType } from 'utils/orderUtils/getUiOrderType'
1210

1311
import { OrderNotification } from '../OrderNotification'
14-
import { mapBridgingResultToOrderInfo } from '../OrderNotification/utils'
15-
16-
function summaryTemplate({
17-
inputAmount,
18-
outputAmount,
19-
srcChainData,
20-
dstChainData,
21-
}: OrderSummaryTemplateProps): ReactNode {
22-
return (
23-
<>
24-
<Trans>Sell</Trans> {inputAmount}{' '}
25-
{srcChainData && (
26-
<>
27-
({srcChainData.label}) <Trans>for a total of</Trans> {outputAmount}{' '}
28-
{dstChainData && <> ({dstChainData.label})</>}
29-
</>
30-
)}
31-
</>
32-
)
33-
}
3412

3513
interface BridgingSuccessNotificationProps {
3614
payload: OnBridgingSuccessPayload
3715
}
3816

3917
export function BridgingSuccessNotification({ payload }: BridgingSuccessNotificationProps): ReactNode {
4018
const { chainId, order } = payload
41-
const bridgingOrder = useBridgeOrderData(order.uid)
42-
43-
if (!bridgingOrder) return null
44-
45-
const orderInfo = mapBridgingResultToOrderInfo(payload, bridgingOrder)
4619

4720
return (
4821
<OrderNotification
4922
title={<Trans>Bridging succeeded</Trans>}
5023
actionTitle={t`Bridge`}
5124
skipExplorerLink
5225
chainId={chainId}
53-
orderInfo={orderInfo}
5426
customTemplate={summaryTemplate}
55-
orderType={getUiOrderType(order)}
5627
orderUid={order.uid}
57-
receiver={bridgingOrder.recipient}
5828
messageType={ToastMessageType.ORDER_FULFILLED}
5929
bottomContent={
6030
payload.explorerUrl ? (
@@ -69,3 +39,22 @@ export function BridgingSuccessNotification({ payload }: BridgingSuccessNotifica
6939
/>
7040
)
7141
}
42+
43+
function summaryTemplate({
44+
inputAmount,
45+
outputAmount,
46+
srcChainData,
47+
dstChainData,
48+
}: OrderSummaryTemplateProps): ReactNode {
49+
return (
50+
<>
51+
<Trans>Sell</Trans> {inputAmount}{' '}
52+
{srcChainData && (
53+
<>
54+
({srcChainData.label}) <Trans>for a total of</Trans> {outputAmount}{' '}
55+
{dstChainData && <> ({dstChainData.label})</>}
56+
</>
57+
)}
58+
</>
59+
)
60+
}

‎apps/cowswap-frontend/src/modules/orders/containers/OrderNotification/index.tsx‎

Lines changed: 43 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,65 @@
1-
import { ReactNode, useCallback, useMemo } from 'react'
1+
import { ReactNode, useMemo } from 'react'
22

3-
import { shortenOrderId } from '@cowprotocol/common-utils'
4-
import { EnrichedOrder, SupportedChainId, getChainInfo } from '@cowprotocol/cow-sdk'
5-
import { ToastMessageType } from '@cowprotocol/events'
6-
import { useTokensByAddressMap } from '@cowprotocol/tokens'
7-
import { TokenInfo, UiOrderType } from '@cowprotocol/types'
3+
import { getIsNativeToken } from '@cowprotocol/common-utils'
4+
import { SupportedChainId, getChainInfo, ChainInfo } from '@cowprotocol/cow-sdk'
85

9-
import { Trans } from '@lingui/react/macro'
106
import { useBridgeSupportedNetwork } from 'entities/bridgeProvider'
117

12-
import { useOrder } from 'legacy/state/orders/hooks'
8+
import { useUltimateOrder } from 'common/hooks/useUltimateOrder'
9+
import { getUltimateOrderTradeAmounts } from 'common/updaters/orders/utils'
10+
import { getUiOrderType } from 'utils/orderUtils/getUiOrderType'
1311

14-
import { OrderSummary } from 'common/pure/OrderSummary'
15-
import { SellForAtLeastTemplate } from 'common/pure/OrderSummary/summaryTemplates'
12+
import { OrderNotificationContent, OrderNotificationContentProps } from '../../pure/OrderNotificationContent'
13+
import { OrderNotificationInfo } from '../../types'
1614

17-
import {
18-
getToastMessageCallback,
19-
isEnrichedOrder,
20-
mapEnrichedOrderToInfo,
21-
mapStoreOrderToInfo,
22-
OrderInfo,
23-
} from './utils'
24-
25-
import { ReceiverInfo } from '../../pure/ReceiverInfo'
26-
import { TransactionContentWithLink } from '../TransactionContentWithLink'
27-
28-
export interface BaseOrderNotificationProps {
29-
title: ReactNode
30-
messageType: ToastMessageType
15+
interface BaseOrderNotificationProps extends Omit<OrderNotificationContentProps, 'orderInfo'> {
3116
chainId: SupportedChainId
3217
orderUid: string
33-
orderType: UiOrderType
34-
actionTitle?: string
35-
orderInfo?: OrderInfo | EnrichedOrder
36-
transactionHash?: string
37-
skipExplorerLink?: boolean
38-
isEthFlow?: boolean
39-
children?: ReactNode
40-
bottomContent?: ReactNode
41-
hideReceiver?: boolean
42-
receiver?: string
43-
customTemplate?: typeof SellForAtLeastTemplate
18+
orderInfo?: OrderNotificationInfo
4419
}
4520

4621
export function OrderNotification(props: BaseOrderNotificationProps): ReactNode {
47-
const {
48-
title,
49-
actionTitle,
50-
orderUid,
51-
orderType,
52-
transactionHash,
53-
chainId,
54-
messageType,
55-
children,
56-
orderInfo,
57-
isEthFlow,
58-
skipExplorerLink,
59-
hideReceiver,
60-
receiver,
61-
} = props
62-
const allTokens = useTokensByAddressMap()
63-
64-
const orderFromStore = useOrder({ chainId, id: orderInfo ? undefined : orderUid })
65-
66-
const order = useMemo(() => {
67-
if (orderInfo) {
68-
return isEnrichedOrder(orderInfo) ? mapEnrichedOrderToInfo(orderInfo, allTokens) : orderInfo
22+
const { orderUid, chainId, orderInfo: _orderInfo, ...rest } = props
23+
const ultimateOrder = useUltimateOrder(chainId, orderUid)
24+
25+
const orderInfo: OrderNotificationInfo | undefined = useMemo(() => {
26+
if (ultimateOrder) {
27+
const { id, kind, owner, receiver } = ultimateOrder.orderFromStore
28+
29+
return {
30+
...getUltimateOrderTradeAmounts(ultimateOrder),
31+
orderUid: id,
32+
kind: kind,
33+
owner: owner,
34+
orderType: getUiOrderType(ultimateOrder.orderFromStore),
35+
isEthFlowOrder: getIsNativeToken(ultimateOrder.orderFromStore.inputToken),
36+
receiver: ultimateOrder.bridgeOrderFromStore?.recipient ?? receiver,
37+
}
6938
}
7039

71-
return orderFromStore ? mapStoreOrderToInfo(orderFromStore) : undefined
72-
}, [orderFromStore, orderInfo, allTokens])
73-
74-
const sourceChainId = order?.inputToken.chainId
75-
const srcChainData = sourceChainId ? getChainInfo(sourceChainId) : undefined
76-
const dstChainData = useBridgeSupportedNetwork(order?.outputToken.chainId)
40+
if (_orderInfo) return _orderInfo
7741

78-
const onToastMessage = useMemo(
79-
() =>
80-
getToastMessageCallback(messageType, {
81-
orderUid,
82-
orderType,
83-
}),
84-
[messageType, orderType, orderUid],
85-
)
42+
return undefined
43+
}, [ultimateOrder, _orderInfo])
8644

87-
const ref = useCallback(
88-
(node: HTMLDivElement) => {
89-
if (node) onToastMessage(node.innerText)
90-
},
91-
[onToastMessage],
45+
const { srcChainData, dstChainData } = useTradeChainsInfo(
46+
orderInfo?.inputAmount.currency.chainId,
47+
orderInfo?.outputAmount.currency.chainId,
9248
)
9349

94-
if (!order) return
50+
if (!orderInfo) return
9551

96-
const content = (
97-
<div ref={ref}>
98-
<strong>{title}</strong>
99-
<br />
100-
<p>
101-
<Trans>Order</Trans> <strong>{shortenOrderId(orderUid)}</strong>:
102-
</p>
103-
{children ||
104-
(order.inputToken && order.outputToken ? (
105-
<OrderSummary
106-
actionTitle={actionTitle}
107-
customTemplate={props.customTemplate}
108-
kind={order.kind}
109-
inputToken={order.inputToken as TokenInfo}
110-
outputToken={order.outputToken as TokenInfo}
111-
sellAmount={order.inputAmount.toString()}
112-
buyAmount={order.outputAmount.toString()}
113-
srcChainData={srcChainData}
114-
dstChainData={dstChainData}
115-
/>
116-
) : null)}
117-
{!hideReceiver && <ReceiverInfo receiver={receiver ?? order.receiver} owner={order.owner} />}
118-
{props.bottomContent}
119-
</div>
52+
return (
53+
<OrderNotificationContent {...rest} orderInfo={orderInfo} srcChainData={srcChainData} dstChainData={dstChainData} />
12054
)
55+
}
12156

122-
if (skipExplorerLink) {
123-
return content
124-
}
57+
function useTradeChainsInfo(
58+
sourceChainId: SupportedChainId | undefined,
59+
destChainId: SupportedChainId | undefined,
60+
): { srcChainData: ChainInfo | undefined; dstChainData: ChainInfo | undefined } {
61+
const srcChainData = sourceChainId ? getChainInfo(sourceChainId) : undefined
62+
const dstChainData = useBridgeSupportedNetwork(destChainId)
12563

126-
return (
127-
<TransactionContentWithLink isEthFlow={isEthFlow} transactionHash={transactionHash} orderUid={orderUid}>
128-
{content}
129-
</TransactionContentWithLink>
130-
)
64+
return { srcChainData, dstChainData }
13165
}

‎apps/cowswap-frontend/src/modules/orders/containers/OrderNotification/utils.ts‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

0 commit comments

Comments
 (0)