review

rainbow-me · Jun 6, 2024 · 26dce80 · 26dce80
1 parent 8983396
commit 26dce80
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/src/__swaps__/screens/Swap/components/SearchInput.tsx b/src/__swaps__/screens/Swap/components/SearchInput.tsx
@@ -20,7 +20,6 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { useDebouncedCallback } from 'use-debounce';
-import { isAddress } from 'viem';
 import { GestureHandlerV1Button } from './GestureHandlerV1Button';
 
 const AnimatedInput = Animated.createAnimatedComponent(Input);
@@ -73,7 +72,9 @@ export const SearchInput = ({
   });
 
   const buttonVisibilityStyle = useAnimatedStyle(() => {
-    const isVisible = output || inputProgress.value === NavigationSteps.SEARCH_FOCUSED || internalSelectedOutputAsset.value;
+    const isInputSearchFocused = inputProgress.value === NavigationSteps.SEARCH_FOCUSED;
+    const isInputAssetSelected = !!internalSelectedOutputAsset.value;
+    const isVisible = output || isInputSearchFocused || isInputAssetSelected;
 
     return {
       opacity: isVisible ? 1 : 0,
@@ -103,15 +104,10 @@ export const SearchInput = ({
       (output && outputProgress.value === NavigationSteps.SEARCH_FOCUSED)
   );
 
-  const isPaste = useDerivedValue(
-    () => output && outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value
-  );
-
   const pastedSearchInputValue = useSharedValue('');
   const searchInputValue = useAnimatedProps(() => {
     // Removing the value when the input is focused allows the input to be reset to the correct value on blur
     const query = isSearchFocused.value ? undefined : '';
-
     return {
       text: pastedSearchInputValue.value || query,
       defaultValue: '',
@@ -131,10 +127,9 @@ export const SearchInput = ({
 
   const onPaste = () => {
     Clipboard.getString().then(text => {
-      if (text.length < 10 || isAddress(text)) {
-        pastedSearchInputValue.value = text;
-        useSwapsStore.setState({ outputSearchQuery: text });
-      }
+      const v = text.trim().slice(0, 42);
+      pastedSearchInputValue.value = v;
+      useSwapsStore.setState({ outputSearchQuery: v });
     });
   };
 
@@ -211,7 +206,7 @@ export const SearchInput = ({
               }}
               onPressWorklet={() => {
                 'worklet';
-                if (isPaste.value) {
+                if (output && outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value) {
                   runOnJS(onPaste)();
                 }
 

diff --git a/src/__swaps__/screens/Swap/hooks/useAnimatedSwapStyles.ts b/src/__swaps__/screens/Swap/hooks/useAnimatedSwapStyles.ts
@@ -19,7 +19,7 @@ import { foregroundColors } from '@/design-system/color/palettes';
 import { IS_ANDROID } from '@/env';
 import { safeAreaInsetValues } from '@/utils';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
-import { SharedValue, interpolate, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
+import { SharedValue, interpolate, useAnimatedStyle, useDerivedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { NavigationSteps } from './useSwapNavigation';
 
 export function useAnimatedSwapStyles({
@@ -206,10 +206,12 @@ export function useAnimatedSwapStyles({
     };
   });
 
-  const searchOutputAssetButtonStyle = useAnimatedStyle(() => {
-    const isPasteMode = outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value;
+  const isPasteMode = useDerivedValue(
+    () => outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value
+  );
 
-    const color = isPasteMode ? foregroundColors.blue : internalSelectedOutputAsset.value?.highContrastColor;
+  const searchOutputAssetButtonStyle = useAnimatedStyle(() => {
+    const color = isPasteMode.value ? foregroundColors.blue : internalSelectedOutputAsset.value?.highContrastColor;
 
     return {
       color: getColorValueForThemeWorklet(color, isDarkMode, true),
@@ -242,14 +244,12 @@ export function useAnimatedSwapStyles({
   });
 
   const searchOutputAssetButtonWrapperStyle = useAnimatedStyle(() => {
-    const isPasteMode = outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value;
-
-    const color = isPasteMode ? foregroundColors.blue : internalSelectedOutputAsset.value?.highContrastColor;
+    const color = isPasteMode.value ? foregroundColors.blue : internalSelectedOutputAsset.value?.highContrastColor;
 
     return {
       backgroundColor: opacityWorklet(getColorValueForThemeWorklet(color, isDarkMode, true), isDarkMode ? 0.1 : 0.08),
       borderColor: opacityWorklet(getColorValueForThemeWorklet(color, isDarkMode, true), isDarkMode ? 0.06 : 0.01),
-      borderWidth: isPasteMode ? 0 : THICK_BORDER_WIDTH,
+      borderWidth: isPasteMode.value ? 0 : THICK_BORDER_WIDTH,
     };
   });