From 7905f5fa5635148ffeca3ef9ce3d716b4469f829 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 4 Apr 2024 16:32:54 -0400 Subject: [PATCH 1/6] added warning for unknown price impact --- .../exchange/PriceImpactWarning.tsx | 24 ++++++++++++------- src/languages/en_US.json | 1 + 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/exchange/PriceImpactWarning.tsx b/src/components/exchange/PriceImpactWarning.tsx index ab0f2bf59ea..487c1ff99c6 100644 --- a/src/components/exchange/PriceImpactWarning.tsx +++ b/src/components/exchange/PriceImpactWarning.tsx @@ -25,6 +25,8 @@ export default function PriceImpactWarning({ ...props }: PriceImpactWarningProps) { const headingValue = priceImpactNativeAmount ?? priceImpactPercentDisplay; + const hasPriceData = priceImpactPercentDisplay !== '100.00%'; + const impactMsg = !hasPriceData ? 'exchange.price_impact.no_data' : 'exchange.price_impact.small_market'; return ( @@ -34,16 +36,20 @@ export default function PriceImpactWarning({ {`􀇿 `} - {lang.t('exchange.price_impact.small_market')} - - {` • ${lang.t('exchange.price_impact.losing_prefix')} `} - - {headingValue} + {lang.t(impactMsg)} + {hasPriceData && ( + {` • ${lang.t('exchange.price_impact.losing_prefix')} `} + )} + {hasPriceData && ( + + {headingValue} + + )} diff --git a/src/languages/en_US.json b/src/languages/en_US.json index 3f2f45effb3..9e58d244bfc 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -564,6 +564,7 @@ "price_impact": { "losing_prefix": "Losing", "small_market": "Small Market", + "no_data": "Price impact unknown", "label": "Possible loss" }, "source": { From 2741a95ac55a26cd3bc5608a29d6a900bf7c826a Mon Sep 17 00:00:00 2001 From: Derek Date: Tue, 9 Apr 2024 11:42:28 -0400 Subject: [PATCH 2/6] more concise price impact warning --- src/components/exchange/PriceImpactWarning.tsx | 14 ++++++++++---- src/languages/en_US.json | 5 +++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/exchange/PriceImpactWarning.tsx b/src/components/exchange/PriceImpactWarning.tsx index 487c1ff99c6..4ff0cb1f51d 100644 --- a/src/components/exchange/PriceImpactWarning.tsx +++ b/src/components/exchange/PriceImpactWarning.tsx @@ -12,31 +12,37 @@ interface PriceImpactWarningProps extends ViewProps { priceImpactColor?: string; priceImpactNativeAmount?: string | null; priceImpactPercentDisplay?: string | null; + outputCurrencySymbol?: string | null; style?: StyleProp; } +const NO_PRICE_DATA_PERCENTAGE = '100.00%'; + export default function PriceImpactWarning({ onPress, isHighPriceImpact, priceImpactColor = 'primary', priceImpactNativeAmount, priceImpactPercentDisplay, + outputCurrencySymbol, style, ...props }: PriceImpactWarningProps) { const headingValue = priceImpactNativeAmount ?? priceImpactPercentDisplay; - const hasPriceData = priceImpactPercentDisplay !== '100.00%'; - const impactMsg = !hasPriceData ? 'exchange.price_impact.no_data' : 'exchange.price_impact.small_market'; + const hasPriceData = priceImpactPercentDisplay !== NO_PRICE_DATA_PERCENTAGE; + const impactMsg = !hasPriceData + ? `${outputCurrencySymbol} ${lang.t('exchange.price_impact.no_data')}` + : lang.t('exchange.price_impact.small_market'); return ( - {isHighPriceImpact && headingValue && ( + {!isHighPriceImpact && headingValue && ( {`􀇿 `} - {lang.t(impactMsg)} + {impactMsg} {hasPriceData && ( Date: Tue, 9 Apr 2024 11:42:47 -0400 Subject: [PATCH 3/6] prop drilling --- src/components/exchange/ExchangeDetailsRow.tsx | 3 +++ src/screens/ExchangeModal.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/src/components/exchange/ExchangeDetailsRow.tsx b/src/components/exchange/ExchangeDetailsRow.tsx index acaf5dffbc7..fa38179855e 100644 --- a/src/components/exchange/ExchangeDetailsRow.tsx +++ b/src/components/exchange/ExchangeDetailsRow.tsx @@ -21,6 +21,7 @@ interface ExchangeDetailsRowProps { priceImpactColor?: string; priceImpactNativeAmount?: string | null; priceImpactPercentDisplay?: string | null; + outputCurrencySymbol?: string | null; type: string; } @@ -32,6 +33,7 @@ export default function ExchangeDetailsRow({ priceImpactColor, priceImpactNativeAmount, priceImpactPercentDisplay, + outputCurrencySymbol, type, }: ExchangeDetailsRowProps) { const detailsRowOpacity = useSharedValue(1); @@ -83,6 +85,7 @@ export default function ExchangeDetailsRow({ priceImpactColor={priceImpactColor} priceImpactNativeAmount={priceImpactNativeAmount} priceImpactPercentDisplay={priceImpactPercentDisplay} + outputCurrencySymbol={outputCurrencySymbol} style={priceImpactAnimatedStyle} /> Date: Tue, 9 Apr 2024 11:44:12 -0400 Subject: [PATCH 4/6] added common import --- src/components/exchange/PriceImpactWarning.tsx | 3 +-- src/hooks/usePriceImpactDetails.ts | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/exchange/PriceImpactWarning.tsx b/src/components/exchange/PriceImpactWarning.tsx index 4ff0cb1f51d..06d12345758 100644 --- a/src/components/exchange/PriceImpactWarning.tsx +++ b/src/components/exchange/PriceImpactWarning.tsx @@ -5,6 +5,7 @@ import Animated from 'react-native-reanimated'; import { ButtonPressAnimation } from '../animations'; import { Box, ColorModeProvider, Inline, Text } from '@/design-system'; import { position } from '@/styles'; +import { NO_PRICE_DATA_PERCENTAGE } from '@/hooks/usePriceImpactDetails'; interface PriceImpactWarningProps extends ViewProps { onPress: () => void; @@ -16,8 +17,6 @@ interface PriceImpactWarningProps extends ViewProps { style?: StyleProp; } -const NO_PRICE_DATA_PERCENTAGE = '100.00%'; - export default function PriceImpactWarning({ onPress, isHighPriceImpact, diff --git a/src/hooks/usePriceImpactDetails.ts b/src/hooks/usePriceImpactDetails.ts index 0e5656428d6..d359fff1a88 100644 --- a/src/hooks/usePriceImpactDetails.ts +++ b/src/hooks/usePriceImpactDetails.ts @@ -25,6 +25,7 @@ export enum SwapPriceImpactType { const PriceImpactWarningThreshold = 0.05; const SeverePriceImpactThreshold = 0.1; +export const NO_PRICE_DATA_PERCENTAGE = '100.00%'; export default function usePriceImpactDetails( inputCurrency: SwappableAsset | null, From b7b5a21976dbfab033c3d554fdeb82edc109fb82 Mon Sep 17 00:00:00 2001 From: Derek Date: Tue, 9 Apr 2024 11:57:14 -0400 Subject: [PATCH 5/6] price impact warning --- .../expanded-state/SwapDetailsState.js | 1 + .../SwapDetailsSlippageMessage.js | 40 +++++++++++++------ src/languages/en_US.json | 2 +- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/components/expanded-state/SwapDetailsState.js b/src/components/expanded-state/SwapDetailsState.js index 3ae4870636e..d7c18c6ba26 100644 --- a/src/components/expanded-state/SwapDetailsState.js +++ b/src/components/expanded-state/SwapDetailsState.js @@ -149,6 +149,7 @@ export default function SwapDetailsState({ confirmButtonProps, restoreFocusOnSwa /> - - - - {lang.t('expanded_state.swap.losing')}{' '} - - - {headingValue} - - 🥵 - - {lang.t('expanded_state.swap.slippage_message')} - + {hasPriceData ? ( + + + + {lang.t('expanded_state.swap.losing')}{' '} + + + {headingValue} + + 🥵 + + {lang.t('expanded_state.swap.slippage_message')} + + ) : ( + + + {`􀇿 `} + + {impactMsg} + + + {lang.t('exchange.price_impact.no_data_subtitle')} + + )} diff --git a/src/languages/en_US.json b/src/languages/en_US.json index 5d38859e182..378fdb9a07f 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -564,7 +564,7 @@ "price_impact": { "losing_prefix": "Losing", "small_market": "Small Market", - "no_data": "Market value unknown", + "no_data": "Market Value Unknown", "label": "Possible loss", "no_data_subtitle": "If you decide to continue, be sure that you are satisfied with the quoted amount" }, From 9c42851b12939f6cb73ad35a16774dcdd357fe45 Mon Sep 17 00:00:00 2001 From: Derek Date: Tue, 9 Apr 2024 11:57:51 -0400 Subject: [PATCH 6/6] null safety --- src/screens/ExchangeModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/screens/ExchangeModal.tsx b/src/screens/ExchangeModal.tsx index aca831e6b95..aa3c2a97c5d 100644 --- a/src/screens/ExchangeModal.tsx +++ b/src/screens/ExchangeModal.tsx @@ -681,9 +681,9 @@ export default function ExchangeModal({ fromDiscover, ignoreInitialTypeCheck, te android && Keyboard.dismiss(); const lastFocusedInputHandleTemporary = lastFocusedInputHandle.current; android && (lastFocusedInputHandle.current = null); - inputFieldRef?.current?.blur(); - outputFieldRef?.current?.blur(); - nativeFieldRef?.current?.blur(); + inputFieldRef?.current?.blur?.(); + outputFieldRef?.current?.blur?.(); + nativeFieldRef?.current?.blur?.(); const internalNavigate = () => { IS_ANDROID && keyboardListenerSubscription.current?.remove(); setParams({ focused: false });