Account for NaN values on sliderPosition (#5741)

* adjusted logic for updating slider to account for NaN values * Update src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts
rainbow-me · May 17, 2024 · 56987ab · 56987ab
1 parent 73451f4
commit 56987ab
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts
@@ -185,9 +185,11 @@ export function useSwapInputsController({
         } else {
           const inputBalance = Number(internalSelectedInputAsset.value?.balance.amount || '0');
           const updatedSliderPosition = clamp((inputAmount / inputBalance) * SLIDER_WIDTH, 0, SLIDER_WIDTH);
-
-          // Update slider position
-          sliderXPosition.value = withSpring(updatedSliderPosition, snappySpringConfig);
+          if (Number.isNaN(updatedSliderPosition)) {
+            sliderXPosition.value = withSpring(0, snappySpringConfig);
+          } else {
+            sliderXPosition.value = withSpring(updatedSliderPosition, snappySpringConfig);
+          }
         }
       }
 
@@ -413,7 +415,7 @@ export function useSwapInputsController({
 
   const fetchQuoteAndAssetPrices = () => {
     'worklet';
-    // reset the quote data, so we don't use stale data
+    // reset the quote data immediately, so we don't use stale data
     setQuote({ data: null });
 
     const isSomeInputGreaterThanZero = Number(inputValues.value.inputAmount) > 0 || Number(inputValues.value.outputAmount) > 0;
@@ -423,7 +425,6 @@ export function useSwapInputsController({
       return;
     }
     isFetching.value = true;
-    isQuoteStale.value = 1;
 
     runOnJS(fetchAndUpdatePrices)({
       inputAsset: internalSelectedInputAsset.value,
@@ -467,6 +468,7 @@ export function useSwapInputsController({
       if (setStale) isQuoteStale.value = 1;
       const updateWorklet = () => {
         'worklet';
+        // if the user types in the inputAmount let's optimistically update the slider position
         if (inputKey === 'inputAmount') {
           const inputAssetBalance = Number(internalSelectedInputAsset.value?.balance.amount || '0');
           const updatedSliderPosition = clamp((amount / inputAssetBalance) * SLIDER_WIDTH, 0, SLIDER_WIDTH);
@@ -598,28 +600,22 @@ export function useSwapInputsController({
       if (!previous) {
         // Handle setting of initial values using niceIncrementFormatter,
         // because we will likely set a percentage-based default input value
-        if (
-          !current.assetToSell ||
-          !current.assetToBuy ||
-          !internalSelectedInputAsset.value?.nativePrice ||
-          !internalSelectedOutputAsset.value?.nativePrice
-        )
-          return;
+        if (!current.assetToSell?.nativePrice || !current.assetToBuy?.nativePrice) return;
 
         const balance = Number(current.assetToSell.balance.amount);
         const inputAmount = niceIncrementFormatter(
           incrementDecimalPlaces.value,
           balance,
-          internalSelectedInputAsset.value.nativePrice,
+          current.assetToSell.nativePrice,
           niceIncrement.value,
           percentageToSwap.value,
           sliderXPosition.value,
           true
         );
 
-        const inputNativeValue = Number(inputAmount) * internalSelectedInputAsset.value.nativePrice;
-        const outputAmount = (inputNativeValue / internalSelectedOutputAsset.value.nativePrice) * (1 - SWAP_FEE); // TODO: Implement swap fee
-        const outputNativeValue = outputAmount * internalSelectedOutputAsset.value.nativePrice;
+        const inputNativeValue = Number(inputAmount) * current.assetToSell.nativePrice;
+        const outputAmount = (inputNativeValue / current.assetToBuy.nativePrice) * (1 - SWAP_FEE); // TODO: Implement swap fee
+        const outputNativeValue = outputAmount * current.assetToBuy.nativePrice;
 
         inputValues.modify(values => {
           return {
@@ -652,7 +648,7 @@ export function useSwapInputsController({
             if (!current.assetToSell) return;
 
             const balance = Number(current.assetToSell.balance.amount);
-            if (!balance || !internalSelectedInputAsset.value?.nativePrice) {
+            if (!balance || !current.assetToSell.nativePrice) {
               inputValues.modify(values => {
                 return {
                   ...values,
@@ -669,13 +665,13 @@ export function useSwapInputsController({
             const inputAmount = niceIncrementFormatter(
               incrementDecimalPlaces.value,
               balance,
-              internalSelectedInputAsset.value?.nativePrice,
+              current.assetToSell.nativePrice,
               niceIncrement.value,
               percentageToSwap.value,
               sliderXPosition.value,
               true
             );
-            const inputNativeValue = Number(inputAmount) * internalSelectedInputAsset.value?.nativePrice;
+            const inputNativeValue = Number(inputAmount) * current.assetToSell.nativePrice;
             inputValues.modify(values => {
               return {
                 ...values,

diff --git a/src/__swaps__/screens/Swap/hooks/useSwapWarning.ts b/src/__swaps__/screens/Swap/hooks/useSwapWarning.ts
@@ -46,6 +46,7 @@ type UsePriceImpactWarningProps = {
   quote: SharedValue<Quote | CrosschainQuote | QuoteError | null>;
   sliderXPosition: SharedValue<number>;
   isFetching: SharedValue<boolean>;
+  isQuoteStale: SharedValue<number>;
 };
 
 type CurrentProps = {
@@ -62,6 +63,7 @@ export const useSwapWarning = ({
   outputAsset,
   quote,
   isFetching,
+  isQuoteStale,
   sliderXPosition,
 }: UsePriceImpactWarningProps) => {
   const { nativeCurrency: currentCurrency } = useAccountSettings();
@@ -165,19 +167,22 @@ export const useSwapWarning = ({
   // TODO: How can we make this more efficient?
   useAnimatedReaction(
     () => ({
+      inputAsset: inputAsset.value,
+      outputAsset: outputAsset.value,
       inputNativeValue: SwapInputController.inputValues.value.inputNativeValue,
       outputNativeValue: SwapInputController.inputValues.value.outputNativeValue,
       quote: quote.value,
       isFetching: isFetching.value,
+      isQuoteStale: isQuoteStale.value,
       sliderXPosition: sliderXPosition.value,
     }),
     (current, previous) => {
-      if (!inputAsset || !outputAsset) {
+      if (!current.inputAsset || !current.outputAsset) {
         return;
       }
 
-      if (previous?.sliderXPosition && previous?.sliderXPosition !== current.sliderXPosition) {
-        swapWarning.modify(prev => ({ ...prev, display: '', type: SwapWarningType.none }));
+      if ((previous?.sliderXPosition && previous?.sliderXPosition !== current.sliderXPosition) || current.isQuoteStale) {
+        updateWarning({ type: SwapWarningType.none, title: '', color: colorMap[SwapWarningType.none], icon: '', subtitle: '' });
       } else if (
         (current.quote && previous?.quote !== current.quote) ||
         previous?.inputNativeValue !== current.inputNativeValue ||

diff --git a/src/__swaps__/screens/Swap/providers/swap-provider.tsx b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
@@ -124,6 +124,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
     quote,
     sliderXPosition,
     isFetching,
+    isQuoteStale,
   });
 
   const AnimatedSwapStyles = useAnimatedSwapStyles({