swap paste button in output field

src/__swaps__/screens/Swap/components/SearchInput.tsx

@@ -1,3 +1,12 @@
+import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
+import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
+import { getColorValueForThemeWorklet, opacity } from '@/__swaps__/utils/swaps';
+import { Input } from '@/components/inputs';
+import { AnimatedText, Bleed, Box, Column, Columns, Text, useColorMode, useForegroundColor } from '@/design-system';
+import { userAssetsStore } from '@/state/assets/userAssets';
+import { useSwapsStore } from '@/state/swaps/swapsStore';
+import Clipboard from '@react-native-clipboard/clipboard';
 import React from 'react';
 import Animated, {
   SharedValue,
@@ -8,16 +17,9 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import { Input } from '@/components/inputs';
-import { AnimatedText, Bleed, Box, Column, Columns, Text, useColorMode, useForegroundColor } from '@/design-system';
-import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
-import { getColorValueForThemeWorklet, opacity } from '@/__swaps__/utils/swaps';
-import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
-import { userAssetsStore } from '@/state/assets/userAssets';
-import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
-import { GestureHandlerV1Button } from './GestureHandlerV1Button';
 import { useDebouncedCallback } from 'use-debounce';
-import { useSwapsStore } from '@/state/swaps/swapsStore';
+import { isAddress } from 'viem';
+import { GestureHandlerV1Button } from './GestureHandlerV1Button';
 
 const AnimatedInput = Animated.createAnimatedComponent(Input);
 
@@ -48,25 +50,26 @@ export const SearchInput = ({
   const labelQuaternary = useForegroundColor('labelQuaternary');
 
   const btnText = useDerivedValue(() => {
-    if ((inputProgress.value === 2 && !output) || (outputProgress.value === 2 && output)) {
+    if (
+      (inputProgress.value === NavigationSteps.SEARCH_FOCUSED && !output) ||
+      (outputProgress.value === NavigationSteps.SEARCH_FOCUSED && output)
+    ) {
       return 'Cancel';
     }
 
     if ((output && internalSelectedOutputAsset.value) || !output) {
       return 'Close';
     }
 
-    // ⚠️ TODO: Add paste functionality to the asset to buy list when no asset is selected
-    // return 'Paste';
+    return 'Paste';
   });
 
   const buttonVisibilityStyle = useAnimatedStyle(() => {
-    const isSearchFocused = (output ? outputProgress : inputProgress).value === NavigationSteps.SEARCH_FOCUSED;
-    const isAssetSelected = output ? internalSelectedOutputAsset.value : internalSelectedInputAsset.value;
+    const isVisible = output || inputProgress.value === NavigationSteps.SEARCH_FOCUSED || internalSelectedOutputAsset.value;
 
     return {
-      opacity: isSearchFocused || isAssetSelected ? 1 : 0,
-      pointerEvents: isSearchFocused || isAssetSelected ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      pointerEvents: isVisible ? 'auto' : 'none',
     };
   });
 
@@ -180,7 +183,19 @@ export const SearchInput = ({
         <Column width="content">
           <Animated.View style={buttonVisibilityStyle}>
             <GestureHandlerV1Button
-              onPressJS={() => (output ? outputSearchRef : inputSearchRef).current?.blur()}
+              onPressJS={() => {
+                (output ? outputSearchRef : inputSearchRef).current?.blur();
+
+                console.log(outputProgress.value);
+                if (output && outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value) {
+                  // its the output field, not focused and no selected asset, means button is in "paste" state
+                  Clipboard.getString().then(text => {
+                    if (text.length < 10 || isAddress(text)) {
+                      useSwapsStore.setState({ outputSearchQuery: text });
+                    }
+                  });
+                }
+              }}
               onPressWorklet={() => {
                 'worklet';
                 const isSearchFocused =

src/__swaps__/screens/Swap/hooks/useAnimatedSwapStyles.ts

@@ -1,6 +1,4 @@
 /* eslint-disable no-nested-ternary */
-import { SharedValue, interpolate, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
-import { globalColors, useColorMode } from '@/design-system';
 import {
   BASE_INPUT_HEIGHT,
   BOTTOM_ACTION_BAR_HEIGHT,
@@ -12,14 +10,17 @@ import {
   fadeConfig,
   springConfig,
 } from '@/__swaps__/screens/Swap/constants';
-import { getColorValueForThemeWorklet, opacityWorklet } from '@/__swaps__/utils/swaps';
 import { SwapWarningType, useSwapWarning } from '@/__swaps__/screens/Swap/hooks/useSwapWarning';
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
+import { getColorValueForThemeWorklet, opacityWorklet } from '@/__swaps__/utils/swaps';
 import { spinnerExitConfig } from '@/components/animations/AnimatedSpinner';
-import { NavigationSteps } from './useSwapNavigation';
+import { globalColors, useColorMode } from '@/design-system';
+import { foregroundColors } from '@/design-system/color/palettes';
 import { IS_ANDROID } from '@/env';
 import { safeAreaInsetValues } from '@/utils';
-import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
+import { SharedValue, interpolate, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
+import { NavigationSteps } from './useSwapNavigation';
 
 export function useAnimatedSwapStyles({
   SwapWarning,
@@ -206,8 +207,12 @@ export function useAnimatedSwapStyles({
   });
 
   const searchOutputAssetButtonStyle = useAnimatedStyle(() => {
+    const isPasteMode = outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value;
+
+    const color = isPasteMode ? foregroundColors['action (Deprecated)'] : internalSelectedOutputAsset.value?.highContrastColor;
+
     return {
-      color: getColorValueForThemeWorklet(internalSelectedOutputAsset.value?.highContrastColor, isDarkMode, true),
+      color: getColorValueForThemeWorklet(color, isDarkMode, true),
     };
   });
 
@@ -237,16 +242,14 @@ export function useAnimatedSwapStyles({
   });
 
   const searchOutputAssetButtonWrapperStyle = useAnimatedStyle(() => {
+    const isPasteMode = outputProgress.value === NavigationSteps.TOKEN_LIST_FOCUSED && !internalSelectedOutputAsset.value;
+
+    const color = isPasteMode ? foregroundColors['action (Deprecated)'] : internalSelectedOutputAsset.value?.highContrastColor;
+
     return {
-      backgroundColor: opacityWorklet(
-        getColorValueForThemeWorklet(internalSelectedOutputAsset.value?.highContrastColor, isDarkMode, true),
-        isDarkMode ? 0.1 : 0.08
-      ),
-      borderColor: opacityWorklet(
-        getColorValueForThemeWorklet(internalSelectedOutputAsset.value?.highContrastColor, isDarkMode, true),
-        isDarkMode ? 0.06 : 0.01
-      ),
-      borderWidth: THICK_BORDER_WIDTH,
+      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,
     };
   });