Skip to content

Commit da57d59

Browse files
janicduplessisjanicduplessis
committed
Refactor some methods to helpers/transactions.ts
1 parent b9b0c66 commit da57d59

File tree

7 files changed

+131
-129
lines changed

7 files changed

+131
-129
lines changed

‎src/components/coin-row/FastTransactionCoinRow.tsx

Lines changed: 6 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -3,125 +3,21 @@ import { StyleSheet, View } from 'react-native';
33
import { ButtonPressAnimation } from '../animations';
44
import FastTransactionStatusBadge from './FastTransactionStatusBadge';
55
import { Bleed, Box, Inline, Text, globalColors, useForegroundColor } from '@/design-system';
6-
import { AssetType, NativeCurrencyKey, RainbowTransaction, TransactionStatus, TransactionType } from '@/entities';
6+
import { NativeCurrencyKey, RainbowTransaction, TransactionStatus, TransactionType } from '@/entities';
77
import { ThemeContextProps } from '@/theme';
88
import { useNavigation } from '@/navigation';
99
import Routes from '@rainbow-me/routes';
1010
import { ImgixImage } from '../images';
1111
import { CardSize } from '../unique-token/CardSize';
1212
import { ChainId } from '@/state/backendNetworks/types';
1313
import { address } from '@/utils/abbreviations';
14-
import {
15-
convertAmountAndPriceToNativeDisplay,
16-
convertAmountToBalanceDisplay,
17-
convertRawAmountToBalance,
18-
convertRawAmountToDecimalFormat,
19-
greaterThan,
20-
handleSignificantDecimals,
21-
} from '@/helpers/utilities';
2214
import { TwoCoinsIcon } from '../coin-icon/TwoCoinsIcon';
2315
import Spinner from '../Spinner';
24-
import * as lang from '@/languages';
16+
2517
import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
26-
import { checkForSwap } from '@/helpers/checkForPendingSwap';
2718
import { ChainImage } from '../coin-icon/ChainImage';
2819
import { useSuperTokenStore } from '@/screens/token-launcher/state/rainbowSuperTokenStore';
29-
30-
export const getApprovalLabel = ({ approvalAmount, asset, type }: Pick<RainbowTransaction, 'type' | 'asset' | 'approvalAmount'>) => {
31-
if (!approvalAmount || !asset) return;
32-
if (approvalAmount === 'UNLIMITED') return lang.t(lang.l.transactions.approvals.unlimited);
33-
if (type === 'revoke') return lang.t(lang.l.transactions.approvals.no_allowance);
34-
const amountDisplay = convertRawAmountToBalance(
35-
approvalAmount,
36-
{ decimals: asset?.decimals, symbol: asset?.symbol },
37-
undefined,
38-
true
39-
)?.display;
40-
return amountDisplay || '';
41-
};
42-
43-
const approvalTypeValues = (transaction: RainbowTransaction) => {
44-
const { asset, approvalAmount } = transaction;
45-
46-
if (!asset || !approvalAmount) return;
47-
transaction.protocol;
48-
return [transaction.protocol || '', getApprovalLabel(transaction)];
49-
};
50-
51-
const swapTypeValues = (changes: RainbowTransaction['changes'], status: RainbowTransaction['status']) => {
52-
const tokenIn = changes?.filter(c => c?.direction === 'in')[0];
53-
const tokenOut = changes?.filter(c => c?.direction === 'out')[0];
54-
55-
// NOTE: For pending txns let's use the change values instead of
56-
// the transaction balance change since that hasn't happened yet
57-
if (status === TransactionStatus.pending) {
58-
const decimalsOut = typeof tokenOut?.asset.decimals === 'number' ? tokenOut.asset.decimals : 18;
59-
const decimalsIn = typeof tokenIn?.asset.decimals === 'number' ? tokenIn.asset.decimals : 18;
60-
61-
const valueOut = `${handleSignificantDecimals(convertRawAmountToDecimalFormat(tokenOut?.value?.toString() || '0', decimalsOut), decimalsOut)} ${tokenOut?.asset.symbol}`;
62-
const valueIn = `+${handleSignificantDecimals(convertRawAmountToDecimalFormat(tokenIn?.value?.toString() || '0', decimalsIn), decimalsIn)} ${tokenIn?.asset.symbol}`;
63-
64-
return [valueOut, valueIn];
65-
}
66-
67-
if (!tokenIn?.asset.balance?.amount || !tokenOut?.asset.balance?.amount) return;
68-
69-
const valueOut = `${convertAmountToBalanceDisplay(tokenOut?.asset.balance?.amount, { ...tokenOut?.asset })}`;
70-
const valueIn = `+${convertAmountToBalanceDisplay(tokenIn?.asset.balance?.amount, { ...tokenIn?.asset })}`;
71-
72-
return [valueOut, valueIn];
73-
};
74-
75-
const checkForPendingSend = (transaction: RainbowTransaction) => {
76-
return transaction.status === TransactionStatus.pending && transaction.type === 'send';
77-
};
78-
79-
const pendingSendTypeValues = (transaction: RainbowTransaction, nativeCurrency: NativeCurrencyKey) => {
80-
if (transaction.asset?.type === AssetType.nft || transaction.amount == null || transaction.asset?.price?.value == null) return;
81-
return [
82-
`${transaction.amount} ${transaction.asset?.symbol}`,
83-
`- ${convertAmountAndPriceToNativeDisplay(transaction.amount, transaction.asset?.price?.value, nativeCurrency)?.display}`,
84-
];
85-
};
86-
87-
export const useRainbowSuperToken = (transaction: RainbowTransaction) => {
88-
return useMemo(() => {
89-
if (transaction?.type === 'launch') {
90-
return useSuperTokenStore.getState().getSuperTokenByTransactionHash(transaction.hash);
91-
}
92-
return undefined;
93-
}, [transaction.hash, transaction.type]);
94-
};
95-
96-
export const activityValues = (transaction: RainbowTransaction, nativeCurrency: NativeCurrencyKey) => {
97-
const { changes, direction, type, status } = transaction;
98-
if (checkForSwap(transaction)) return swapTypeValues(changes, status);
99-
if (checkForPendingSend(transaction)) return pendingSendTypeValues(transaction, nativeCurrency);
100-
if (['approve', 'revoke'].includes(type)) return approvalTypeValues(transaction);
101-
102-
const change = changes?.filter(c => c?.direction === direction && c?.asset.type !== 'nft')[0];
103-
let valueSymbol = direction === 'out' ? '-' : '+';
104-
105-
if (type === 'send') {
106-
valueSymbol = '-';
107-
}
108-
if (type === 'receive') {
109-
valueSymbol = '+';
110-
}
111-
112-
if (!change?.asset) return;
113-
114-
const { balance } = change.asset;
115-
116-
const assetValue = convertAmountToBalanceDisplay(balance?.amount || '0', change.asset);
117-
118-
const nativeBalance = convertAmountAndPriceToNativeDisplay(balance?.amount || '0', change.asset.price?.value || '0', nativeCurrency);
119-
const assetNativeValue = greaterThan(nativeBalance.amount, '0')
120-
? `${valueSymbol}${nativeBalance?.display}`
121-
: lang.t(lang.l.transactions.no_value);
122-
123-
return greaterThan(nativeBalance.amount, '0') ? [`${assetValue}`, assetNativeValue] : [assetNativeValue, `${valueSymbol}${assetValue}`];
124-
};
20+
import { activityValues, useTransactionLaunchToken } from '@/helpers/transactions';
12521

12622
const getIconTopMargin = (type: TransactionType) => {
12723
switch (type) {
@@ -201,7 +97,7 @@ const BottomRow = React.memo(function BottomRow({
20197
nativeCurrency: NativeCurrencyKey;
20298
theme: ThemeContextProps;
20399
}) {
204-
const rainbowSuperToken = useRainbowSuperToken(transaction);
100+
const launchToken = useTransactionLaunchToken(transaction);
205101

206102
const { type, to, asset } = transaction;
207103
const separatorSecondary = useForegroundColor('separatorSecondary');
@@ -213,8 +109,8 @@ const BottomRow = React.memo(function BottomRow({
213109
tag = transaction.description;
214110
}
215111

216-
if (type === 'launch' && rainbowSuperToken) {
217-
description = rainbowSuperToken?.name;
112+
if (type === 'launch' && launchToken) {
113+
description = launchToken?.name;
218114
}
219115

220116
if (transaction?.type === 'mint') {

‎src/components/rainbow-toast/ToastContent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useRainbowSuperToken } from '@/components/coin-row/FastTransactionCoinRow';
21
import { SWAP_ICON_WIDTH, TOAST_ICON_SIZE } from '@/components/rainbow-toast/constants';
32
import { BaseToastIcon } from '@/components/rainbow-toast/icons/BaseToastIcon';
43
import { SendToastIcon } from '@/components/rainbow-toast/icons/SendToastIcon';
@@ -7,6 +6,7 @@ import { RainbowToast } from '@/components/rainbow-toast/types';
76
import { useToastColors } from '@/components/rainbow-toast/useToastColors';
87
import { Text } from '@/design-system';
98
import { AssetType, TransactionStatus } from '@/entities';
9+
import { useTransactionLaunchToken } from '@/helpers/transactions';
1010
import * as lang from '@/languages';
1111
import React, { memo } from 'react';
1212
import { Text as RNText, StyleSheet, View } from 'react-native';
@@ -139,10 +139,10 @@ function SendToastContent({ toast }: { toast: RainbowToast }) {
139139

140140
function BaseToastContent({ toast }: { toast: RainbowToast }) {
141141
const { transaction } = toast;
142-
const rainbowSuperToken = useRainbowSuperToken(transaction);
142+
const launchToken = useTransactionLaunchToken(transaction);
143143
const icon = <BaseToastIcon toast={toast} />;
144144
const title = getToastTitle(toast);
145-
const subtitle = rainbowSuperToken?.name || transaction.contract?.name || transaction.description;
145+
const subtitle = launchToken?.name || transaction.contract?.name || transaction.description;
146146

147147
return (
148148
<ToastContentDisplay

‎src/components/rainbow-toast/ToastExpandedContent.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { activityValues, useRainbowSuperToken } from '@/components/coin-row/FastTransactionCoinRow';
21
import { TOAST_ICON_SIZE } from '@/components/rainbow-toast/constants';
32
import { BaseToastIcon } from '@/components/rainbow-toast/icons/BaseToastIcon';
43
import { isWideSwapIcon, SwapToastIcon } from '@/components/rainbow-toast/icons/SwapToastIcon';
5-
import { getToastTitle, getSwapToastNetworkLabel } from '@/components/rainbow-toast/ToastContent';
4+
import { getSwapToastNetworkLabel, getToastTitle } from '@/components/rainbow-toast/ToastContent';
65
import type { RainbowToast } from '@/components/rainbow-toast/types';
76
import Spinner from '@/components/Spinner';
87
import { Text } from '@/design-system';
98
import { RainbowTransaction, TransactionStatus } from '@/entities';
109
import { returnStringFirstEmoji } from '@/helpers/emojiHandler';
10+
import { activityValues, useTransactionLaunchToken } from '@/helpers/transactions';
1111
import { userAssetsStoreManager } from '@/state/assets/userAssetsStoreManager';
1212
import React, { useMemo, type ReactNode } from 'react';
1313
import { StyleSheet, View } from 'react-native';
@@ -29,9 +29,9 @@ export function ToastExpandedContent({ toast }: { toast: RainbowToast }) {
2929

3030
function BaseToastExpandedContent({ toast }: { toast: RainbowToast }) {
3131
const { transaction } = toast;
32-
const rainbowSuperToken = useRainbowSuperToken(transaction);
32+
const launchToken = useTransactionLaunchToken(transaction);
3333
const icon = <BaseToastIcon size={EXPANDED_ICON_SIZE} toast={toast} />;
34-
const title = rainbowSuperToken?.name || transaction.contract?.name || transaction.description;
34+
const title = launchToken?.name || transaction.contract?.name || transaction.description;
3535
const subtitle = getToastTitle(toast);
3636
const isLoading = transaction.status === TransactionStatus.pending;
3737
return <ToastExpandedContentDisplay isLoading={isLoading} icon={icon} label={title} statusLabel={subtitle} transaction={transaction} />;

‎src/helpers/checkForPendingSwap.ts

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

‎src/helpers/transactions.ts

Lines changed: 116 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
import { TransactionStatus } from '@/entities';
1+
import { AssetType, NativeCurrencyKey, RainbowTransaction, TransactionStatus } from '@/entities';
2+
import {
3+
convertAmountAndPriceToNativeDisplay,
4+
convertAmountToBalanceDisplay,
5+
convertRawAmountToBalance,
6+
convertRawAmountToDecimalFormat,
7+
greaterThan,
8+
handleSignificantDecimals,
9+
} from '@/helpers/utilities';
10+
import * as lang from '@/languages';
11+
import { useSuperTokenStore } from '@/screens/token-launcher/state/rainbowSuperTokenStore';
12+
import { useMemo } from 'react';
213

314
export const calculateTimestampOfToday = () => {
415
const d = new Date();
@@ -32,3 +43,107 @@ export const todayTimestamp = calculateTimestampOfToday();
3243
export const yesterdayTimestamp = calculateTimestampOfYesterday();
3344
export const thisMonthTimestamp = calculateTimestampOfThisMonth();
3445
export const thisYearTimestamp = calculateTimestampOfThisYear();
46+
47+
const checkForPendingSend = (transaction: RainbowTransaction) => {
48+
return transaction.status === TransactionStatus.pending && transaction.type === 'send';
49+
};
50+
51+
const pendingSendTypeValues = (transaction: RainbowTransaction, nativeCurrency: NativeCurrencyKey) => {
52+
if (transaction.asset?.type === AssetType.nft || transaction.amount == null || transaction.asset?.price?.value == null) return;
53+
return [
54+
`${transaction.amount} ${transaction.asset?.symbol}`,
55+
`- ${convertAmountAndPriceToNativeDisplay(transaction.amount, transaction.asset?.price?.value, nativeCurrency)?.display}`,
56+
];
57+
};
58+
59+
export const checkForSwap = (transaction: RainbowTransaction) => {
60+
return ['swap', 'wrap', 'unwrap'].includes(transaction.type);
61+
};
62+
63+
export const checkForPendingSwap = (transaction: RainbowTransaction) => {
64+
return checkForSwap(transaction) && transaction.status === TransactionStatus.pending;
65+
};
66+
67+
export const getApprovalLabel = ({ approvalAmount, asset, type }: Pick<RainbowTransaction, 'type' | 'asset' | 'approvalAmount'>) => {
68+
if (!approvalAmount || !asset) return;
69+
if (approvalAmount === 'UNLIMITED') return lang.t(lang.l.transactions.approvals.unlimited);
70+
if (type === 'revoke') return lang.t(lang.l.transactions.approvals.no_allowance);
71+
const amountDisplay = convertRawAmountToBalance(
72+
approvalAmount,
73+
{ decimals: asset?.decimals, symbol: asset?.symbol },
74+
undefined,
75+
true
76+
)?.display;
77+
return amountDisplay || '';
78+
};
79+
80+
const approvalTypeValues = (transaction: RainbowTransaction) => {
81+
const { asset, approvalAmount } = transaction;
82+
83+
if (!asset || !approvalAmount) return;
84+
transaction.protocol;
85+
return [transaction.protocol || '', getApprovalLabel(transaction)];
86+
};
87+
88+
const swapTypeValues = (changes: RainbowTransaction['changes'], status: RainbowTransaction['status']) => {
89+
const tokenIn = changes?.filter(c => c?.direction === 'in')[0];
90+
const tokenOut = changes?.filter(c => c?.direction === 'out')[0];
91+
92+
// NOTE: For pending txns let's use the change values instead of
93+
// the transaction balance change since that hasn't happened yet
94+
if (status === TransactionStatus.pending) {
95+
const decimalsOut = typeof tokenOut?.asset.decimals === 'number' ? tokenOut.asset.decimals : 18;
96+
const decimalsIn = typeof tokenIn?.asset.decimals === 'number' ? tokenIn.asset.decimals : 18;
97+
98+
const valueOut = `${handleSignificantDecimals(convertRawAmountToDecimalFormat(tokenOut?.value?.toString() || '0', decimalsOut), decimalsOut)} ${tokenOut?.asset.symbol}`;
99+
const valueIn = `+${handleSignificantDecimals(convertRawAmountToDecimalFormat(tokenIn?.value?.toString() || '0', decimalsIn), decimalsIn)} ${tokenIn?.asset.symbol}`;
100+
101+
return [valueOut, valueIn];
102+
}
103+
104+
if (!tokenIn?.asset.balance?.amount || !tokenOut?.asset.balance?.amount) return;
105+
106+
const valueOut = `${convertAmountToBalanceDisplay(tokenOut?.asset.balance?.amount, { ...tokenOut?.asset })}`;
107+
const valueIn = `+${convertAmountToBalanceDisplay(tokenIn?.asset.balance?.amount, { ...tokenIn?.asset })}`;
108+
109+
return [valueOut, valueIn];
110+
};
111+
112+
export const activityValues = (transaction: RainbowTransaction, nativeCurrency: NativeCurrencyKey) => {
113+
const { changes, direction, type, status } = transaction;
114+
if (checkForSwap(transaction)) return swapTypeValues(changes, status);
115+
if (checkForPendingSend(transaction)) return pendingSendTypeValues(transaction, nativeCurrency);
116+
if (['approve', 'revoke'].includes(type)) return approvalTypeValues(transaction);
117+
118+
const change = changes?.filter(c => c?.direction === direction && c?.asset.type !== 'nft')[0];
119+
let valueSymbol = direction === 'out' ? '-' : '+';
120+
121+
if (type === 'send') {
122+
valueSymbol = '-';
123+
}
124+
if (type === 'receive') {
125+
valueSymbol = '+';
126+
}
127+
128+
if (!change?.asset) return;
129+
130+
const { balance } = change.asset;
131+
132+
const assetValue = convertAmountToBalanceDisplay(balance?.amount || '0', change.asset);
133+
134+
const nativeBalance = convertAmountAndPriceToNativeDisplay(balance?.amount || '0', change.asset.price?.value || '0', nativeCurrency);
135+
const assetNativeValue = greaterThan(nativeBalance.amount, '0')
136+
? `${valueSymbol}${nativeBalance?.display}`
137+
: lang.t(lang.l.transactions.no_value);
138+
139+
return greaterThan(nativeBalance.amount, '0') ? [`${assetValue}`, assetNativeValue] : [assetNativeValue, `${valueSymbol}${assetValue}`];
140+
};
141+
142+
export const useTransactionLaunchToken = (transaction: RainbowTransaction) => {
143+
return useMemo(() => {
144+
if (transaction?.type === 'launch') {
145+
return useSuperTokenStore.getState().getSuperTokenByTransactionHash(transaction.hash);
146+
}
147+
return undefined;
148+
}, [transaction.hash, transaction.type]);
149+
};

‎src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import { CardSize } from '@/components/unique-token/CardSize';
1313
import ImgixImage from '@/components/images/ImgixImage';
1414
import { View } from 'react-native';
1515
import { ChainImage } from '@/components/coin-icon/ChainImage';
16-
import { checkForPendingSwap } from '@/helpers/checkForPendingSwap';
1716
import { ChainId } from '@/state/backendNetworks/types';
1817
import { userAssetsStoreManager } from '@/state/assets/userAssetsStoreManager';
18+
import { checkForPendingSwap } from '@/helpers/transactions';
1919

2020
type Props = {
2121
transaction: RainbowTransaction;

‎src/screens/transaction-details/components/TransactionMasthead.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ import { addressHashedColorIndex, addressHashedEmoji } from '@/utils/profileUtil
3333
import ImageAvatar from '@/components/contacts/ImageAvatar';
3434
import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
3535
import * as lang from '@/languages';
36-
import { checkForPendingSwap } from '@/helpers/checkForPendingSwap';
3736
import { ChainId } from '@/state/backendNetworks/types';
3837
import { useAccountAddress } from '@/state/wallets/walletsStore';
38+
import { checkForPendingSwap } from '@/helpers/transactions';
3939

4040
const TransactionMastheadHeight = android ? 153 : 135;
4141

0 commit comments

Comments
 (0)