Swaps: fix initial input native currency value, light mode coin icon …

…placeholder (#5856) * Fix initial native currency input value, reset slider position when input asset changes * Fix light mode swap coin icon placeholder
rainbow-me · Jun 17, 2024 · 4f93e49 · 4f93e49
1 parent 47d7037
commit 4f93e49
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
@@ -58,8 +58,12 @@ export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
   });
 
   const animatedCoinIconWrapperStyles = useAnimatedStyle(() => {
+    const showEmptyState = !asset.value?.uniqueId;
+    const showFallback = didErrorForUniqueId.value === asset.value?.uniqueId;
+    const shouldDisplay = !showFallback && !showEmptyState;
+
     return {
-      shadowColor: isDarkMode ? colors.shadow : asset.value?.shadowColor['light'],
+      shadowColor: shouldDisplay ? (isDarkMode ? colors.shadow : asset.value?.shadowColor['light']) : 'transparent',
     };
   });
 
@@ -100,9 +104,9 @@ export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
       <Animated.View
         style={[
           sx.reactCoinIconContainer,
-          animatedCoinIconWrapperStyles,
           small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
           sx.withShadow,
+          animatedCoinIconWrapperStyles,
         ]}
       >
         <Animated.View style={animatedCoinIconStyles}>
@@ -140,7 +144,7 @@ export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
 
         <Box
           as={Animated.View}
-          background="fillQuaternary"
+          background={isDarkMode ? 'fillQuaternary' : 'fillTertiary'}
           style={[
             animatedEmptyStateStyles,
             small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,

diff --git a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts
@@ -59,7 +59,7 @@ function getInitialInputValues(initialSelectedInputAsset: ExtendedAnimatedAssetW
   const initialInputNativeValue = Number(mulWorklet(initialInputAmount, initialSelectedInputAsset?.price?.value ?? 0)).toLocaleString(
     'en-US',
     {
-      useGrouping: true,
+      useGrouping: false,
       minimumFractionDigits: nativeCurrency === 'ETH' ? undefined : decimals,
       maximumFractionDigits: decimals,
     }
@@ -891,6 +891,11 @@ export function useSwapInputsController({
             return;
           }
 
+          if (didInputAssetChange) {
+            inputMethod.value = 'inputAmount';
+            sliderXPosition.value = withSpring(SLIDER_WIDTH / 2, snappySpringConfig);
+          }
+
           const assetBalanceDisplay = internalSelectedInputAsset.value?.balance.display ?? '';
 
           const inputAmount = niceIncrementFormatter({
@@ -899,8 +904,8 @@ export function useSwapInputsController({
             inputAssetNativePrice: inputNativePrice.value,
             assetBalanceDisplay,
             niceIncrement: niceIncrement.value,
-            percentageToSwap: percentageToSwap.value,
-            sliderXPosition: sliderXPosition.value,
+            percentageToSwap: didInputAssetChange ? 0.5 : percentageToSwap.value,
+            sliderXPosition: didInputAssetChange ? SLIDER_WIDTH / 2 : sliderXPosition.value,
             stripSeparators: true,
             isStablecoin: internalSelectedInputAsset.value?.type === 'stablecoin' ?? false,
           });