diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx index b852cd9822d..7fb1d982f2f 100644 --- a/src/components/coin-row/FastTransactionCoinRow.tsx +++ b/src/components/coin-row/FastTransactionCoinRow.tsx @@ -25,6 +25,7 @@ import { TwoCoinsIcon } from '../coin-icon/TwoCoinsIcon'; import Spinner from '../Spinner'; import * as lang from '@/languages'; import RainbowCoinIcon from '../coin-icon/RainbowCoinIcon'; +import { checkForPendingSwap } from '@/screens/transaction-details/helpers/checkForPendingSwap'; export const getApprovalLabel = ({ approvalAmount, asset, type }: Pick) => { if (!approvalAmount || !asset) return; @@ -70,7 +71,7 @@ const swapTypeValues = (changes: RainbowTransaction['changes'], status: RainbowT const activityValues = (transaction: RainbowTransaction, nativeCurrency: NativeCurrencyKey) => { const { changes, direction, type, status } = transaction; - if (['swap', 'wrap', 'unwrap'].includes(type)) return swapTypeValues(changes, status); + if (checkForPendingSwap(transaction)) return swapTypeValues(changes, status); if (['approve', 'revoke'].includes(type)) return approvalTypeValues(transaction as RainbowTransaction); const change = changes?.filter(c => c?.direction === direction && c?.asset.type !== 'nft')[0]; @@ -83,7 +84,7 @@ const activityValues = (transaction: RainbowTransaction, nativeCurrency: NativeC valueSymbol = '+'; } - if (!change) return; + if (!change?.asset) return; const { balance } = change.asset; diff --git a/src/raps/actions/crosschainSwap.ts b/src/raps/actions/crosschainSwap.ts index 724d84068b7..61b03f16c26 100644 --- a/src/raps/actions/crosschainSwap.ts +++ b/src/raps/actions/crosschainSwap.ts @@ -170,6 +170,8 @@ export const crosschainSwap = async ({ const transaction = { data: parameters.quote.data, + from: parameters.quote.from as Address, + to: parameters.quote.to as Address, value: parameters.quote.value?.toString(), asset: { ...parameters.assetToBuy, @@ -203,8 +205,7 @@ export const crosschainSwap = async ({ value: quote.buyAmountMinusFees.toString(), }, ], - from: parameters.quote.from as Address, - to: parameters.quote.to as Address, + gasLimit, hash: swap.hash as TxHash, // TODO: MARK - Replace this once we migrate network => chainId network, @@ -213,7 +214,7 @@ export const crosschainSwap = async ({ status: 'pending', type: 'swap', flashbots: parameters.flashbots, - ...gasParams, + ...gasParamsToUse, } satisfies NewTransaction; addNewTransaction({ diff --git a/src/resources/transactions/transaction.ts b/src/resources/transactions/transaction.ts index ca3e9d62925..c2253efbb74 100644 --- a/src/resources/transactions/transaction.ts +++ b/src/resources/transactions/transaction.ts @@ -9,6 +9,7 @@ import { ADDYS_API_KEY } from 'react-native-dotenv'; import { parseTransaction } from '@/parsers/transactions'; import { Network } from '@/networks/types'; import { RainbowError, logger } from '@/logger'; +import { TransactionApiResponse } from './types'; export type ConsolidatedTransactionsResult = QueryFunctionResult; export type PaginatedTransactions = { pages: ConsolidatedTransactionsResult[] }; @@ -37,7 +38,7 @@ export const fetchTransaction = async ({ try { const chainId = getNetworkObj(network).id; const url = `https://addys.p.rainbow.me/v3/${chainId}/${address}/transactions/${hash}`; - const response = await rainbowFetch(url, { + const response = await rainbowFetch<{ payload: { transaction: TransactionApiResponse } }>(url, { method: 'get', params: { currency: currency.toLowerCase(), @@ -47,6 +48,7 @@ export const fetchTransaction = async ({ Authorization: `Bearer ${ADDYS_API_KEY}`, }, }); + const tx = response?.data?.payload?.transaction || {}; if (!tx) { return null; diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx index bcc68853810..67b5b94937f 100644 --- a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx +++ b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx @@ -16,6 +16,7 @@ import { CardSize } from '@/components/unique-token/CardSize'; import ImgixImage from '@/components/images/ImgixImage'; import { View } from 'react-native'; import ChainBadge from '@/components/coin-icon/ChainBadge'; +import { checkForPendingSwap } from '../helpers/checkForPendingSwap'; type Props = { transaction: RainbowTransaction; @@ -31,7 +32,7 @@ export const TransactionDetailsValueAndFeeSection: React.FC = ({ transact const assetData = transaction?.asset; const change = transaction?.changes?.[0]; - const isPendingSwap = ['swap', 'wrap', 'unwrap'].includes(transaction.type) && transaction.status === 'pending'; + const isPendingSwap = checkForPendingSwap(transaction); const value = change?.value || transaction.balance?.display; const valueDisplay = value ? convertRawAmountToBalance(value || '', assetData!).display : ''; diff --git a/src/screens/transaction-details/components/TransactionMasthead.tsx b/src/screens/transaction-details/components/TransactionMasthead.tsx index 3ab623b421e..cc8d16df1b7 100644 --- a/src/screens/transaction-details/components/TransactionMasthead.tsx +++ b/src/screens/transaction-details/components/TransactionMasthead.tsx @@ -34,6 +34,7 @@ import ImageAvatar from '@/components/contacts/ImageAvatar'; import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon'; import { Network } from '@/networks/types'; import * as lang from '@/languages'; +import { checkForPendingSwap } from '../helpers/checkForPendingSwap'; const TransactionMastheadHeight = android ? 153 : 135; @@ -81,7 +82,6 @@ function CurrencyTile({ const accountAddress = useSelector((state: AppState) => state.settings.accountAddress); const theme = useTheme(); - // @ts-ignore const { contacts } = useContacts(); const { userAccounts, watchedAccounts } = useUserAccounts(); @@ -95,7 +95,7 @@ function CurrencyTile({ watchedAccounts.find(account => isLowerCaseMatch(account.address, address)) ); } - }, [address]); + }, [address, userAccounts, watchedAccounts]); const formattedAddress = formatAddressForDisplay(address, 4, 6); const [fetchedEnsName, setFetchedEnsName] = useState(); @@ -103,7 +103,7 @@ function CurrencyTile({ const [imageLoaded, setImageLoaded] = useState(!!addressAccount?.image); const accountEmoji = useMemo(() => returnStringFirstEmoji(addressAccount?.label), [addressAccount]); - const accountName = useMemo(() => removeFirstEmojiFromString(addressAccount?.label), []); + const accountName = useMemo(() => removeFirstEmojiFromString(addressAccount?.label), [addressAccount?.label]); const avatarColor = addressAccount?.color ?? addressContact?.color ?? theme.colors.avatarBackgrounds[addressHashedColorIndex(address) || 1]; const emoji = accountEmoji || addressHashedEmoji(address); @@ -141,7 +141,7 @@ function CurrencyTile({ }); } } - }, [fetchedEnsName]); + }, [addressAccount?.image, addressContact?.ens, fetchedEnsName]); const colorForAsset = usePersistentDominantColorFromImage(showAsset ? asset?.icon_url : imageUrl) || avatarColor; @@ -280,6 +280,8 @@ const DoubleChevron = () => ( export default function TransactionMasthead({ transaction }: { transaction: RainbowTransaction }) { const nativeCurrency = useSelector((state: AppState) => state.settings.nativeCurrency); + const isPendingSwap = checkForPendingSwap(transaction); + const inputAsset = useMemo(() => { const change = transaction?.changes?.find(a => a?.direction === 'in'); @@ -287,7 +289,7 @@ export default function TransactionMasthead({ transaction }: { transaction: Rain // NOTE: For pending transactions let's use the change value // since the balance hasn't been updated yet. - if (['swap', 'wrap', 'unwrap'].includes(transaction.type) && transaction.status === 'pending') { + if (isPendingSwap) { const inAssetValueDisplay = `${handleSignificantDecimals(convertRawAmountToDecimalFormat(change?.value?.toString() || '0', change?.asset.decimals || 18), change?.asset.decimals || 18)} ${change?.asset.symbol}`; return { inAssetValueDisplay, @@ -311,7 +313,7 @@ export default function TransactionMasthead({ transaction }: { transaction: Rain : '-', ...inAsset, }; - }, []); + }, [isPendingSwap, nativeCurrency, transaction?.changes]); const outputAsset = useMemo(() => { const change = transaction?.changes?.find(a => a?.direction === 'out'); @@ -320,7 +322,7 @@ export default function TransactionMasthead({ transaction }: { transaction: Rain // NOTE: For pending transactions let's use the change value // since the balance hasn't been updated yet. - if (['swap', 'wrap', 'unwrap'].includes(transaction.type) && transaction.status === 'pending') { + if (isPendingSwap) { const inAssetValueDisplay = `${handleSignificantDecimals(convertRawAmountToDecimalFormat(change?.value?.toString() || '0', change?.asset.decimals || 18), change?.asset.decimals || 18)} ${change?.asset.symbol}`; return { inAssetValueDisplay, @@ -345,7 +347,7 @@ export default function TransactionMasthead({ transaction }: { transaction: Rain : '-', ...outAsset, }; - }, []); + }, [isPendingSwap, nativeCurrency, transaction?.changes]); const contractImage = transaction?.contract?.iconUrl; const contractName = transaction?.contract?.name; diff --git a/src/screens/transaction-details/helpers/checkForPendingSwap.ts b/src/screens/transaction-details/helpers/checkForPendingSwap.ts new file mode 100644 index 00000000000..e780eedd2b7 --- /dev/null +++ b/src/screens/transaction-details/helpers/checkForPendingSwap.ts @@ -0,0 +1,5 @@ +import { RainbowTransaction } from '@/entities'; + +export const checkForPendingSwap = (transaction: RainbowTransaction) => { + return ['swap', 'wrap', 'unwrap'].includes(transaction.type) && transaction.status === 'pending'; +};