From f8b1c1981857e65eb4a2fc13ac6fac84499f30f6 Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Tue, 18 Jun 2024 11:41:55 -0400 Subject: [PATCH 1/2] start on tap balance badge functionality --- .../Swap/components/SwapInputAsset.tsx | 35 ++++++++++++++++--- .../Swap/components/SwapOutputAsset.tsx | 26 ++++++++++++-- .../Swap/hooks/useSwapInputsController.ts | 3 ++ 3 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx index f27c8a0ac30..7094e9a5efe 100644 --- a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx +++ b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx @@ -1,7 +1,7 @@ import MaskedView from '@react-native-masked-view/masked-view'; -import React from 'react'; +import React, { useCallback } from 'react'; import { StyleSheet, StatusBar } from 'react-native'; -import Animated, { useDerivedValue } from 'react-native-reanimated'; +import Animated, { runOnJS, useDerivedValue, withSpring } from 'react-native-reanimated'; import { ScreenCornerRadius } from 'react-native-screen-corner-radius'; import { AnimatedText, Box, Column, Columns, Stack, useColorMode } from '@/design-system'; @@ -12,11 +12,13 @@ import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask'; import { SwapInput } from '@/__swaps__/screens/Swap/components/SwapInput'; import { BalanceBadge } from '@/__swaps__/screens/Swap/components/BalanceBadge'; import { TokenList } from '@/__swaps__/screens/Swap/components/TokenList/TokenList'; -import { BASE_INPUT_WIDTH, INPUT_INNER_WIDTH, INPUT_PADDING, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants'; +import { BASE_INPUT_WIDTH, INPUT_INNER_WIDTH, INPUT_PADDING, SLIDER_WIDTH, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants'; import { IS_ANDROID } from '@/env'; import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider'; import { AnimatedSwapCoinIcon } from './AnimatedSwapCoinIcon'; import * as i18n from '@/languages'; +import { triggerHapticFeedback } from '@/screens/points/constants'; +import { SPRING_CONFIGS } from '@/components/animations/animationConfigs'; const SELECT_LABEL = i18n.t(i18n.l.swap.select); const NO_BALANCE_LABEL = i18n.t(i18n.l.swap.no_balance); @@ -78,7 +80,7 @@ function SwapInputIcon() { } function InputAssetBalanceBadge() { - const { internalSelectedInputAsset } = useSwapContext(); + const { internalSelectedInputAsset, sliderXPosition, SwapInputController } = useSwapContext(); const label = useDerivedValue(() => { const asset = internalSelectedInputAsset.value; @@ -88,7 +90,30 @@ function InputAssetBalanceBadge() { return asset ? balance : TOKEN_TO_SWAP_LABEL; }); - return ; + const onChangeInputAmount = () => { + 'worklet'; + const asset = internalSelectedInputAsset.value; + const hasBalance = Number(asset?.balance.amount) > 0 && asset?.balance.display; + if (!hasBalance) return; + + const isAlreadyMax = SwapInputController.percentageToSwap.value === 1; + if (isAlreadyMax) { + runOnJS(triggerHapticFeedback)('impactMedium'); + return; + } + + sliderXPosition.value = withSpring(SLIDER_WIDTH, SPRING_CONFIGS.snappySpringConfig, isFinished => { + if (isFinished) { + runOnJS(SwapInputController.onChangedPercentage)(1); + } + }); + }; + + return ( + + + + ); } export function SwapInputAsset() { diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx index e639139a9ed..529a28ca279 100644 --- a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx +++ b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx @@ -20,6 +20,7 @@ import { useSwapsStore } from '@/state/swaps/swapsStore'; import { ethereumUtils } from '@/utils'; import { ChainId } from '@/__swaps__/types/chains'; import * as i18n from '@/languages'; +import { triggerHapticFeedback } from '@/screens/points/constants'; const SELECT_LABEL = i18n.t(i18n.l.swap.select); const NO_BALANCE_LABEL = i18n.t(i18n.l.swap.no_balance); @@ -106,7 +107,7 @@ function SwapInputIcon() { } function OutputAssetBalanceBadge() { - const { internalSelectedOutputAsset } = useSwapContext(); + const { internalSelectedOutputAsset, sliderXPosition, SwapInputController } = useSwapContext(); const label = useDerivedValue(() => { const asset = internalSelectedOutputAsset.value; @@ -116,7 +117,28 @@ function OutputAssetBalanceBadge() { return asset ? balance : TOKEN_TO_GET_LABEL; }); - return ; + const onChangeOutputAmount = useCallback(() => { + 'worklet'; + const asset = internalSelectedOutputAsset.value; + const hasBalance = Number(asset?.balance.amount) > 0 && asset?.balance.display; + if (!hasBalance) return; + + const isAlreadyMax = SwapInputController.percentageToSwap.value === 1; + if (isAlreadyMax) { + runOnJS(triggerHapticFeedback)('impactMedium'); + return; + } + + // TODO: This doesn't work... think about this more + const outputAmount = asset?.balance.amount; + runOnJS(SwapInputController.onTypedNumber)(Number(outputAmount), 'outputAmount'); + }, [internalSelectedOutputAsset, SwapInputController]); + + return ( + + + + ); } export function SwapOutputAsset() { diff --git a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts index 73b36084629..0d9d3c3cc48 100644 --- a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts +++ b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts @@ -810,6 +810,8 @@ export function useSwapInputsController({ } if (inputMethod.value === 'outputAmount' && !equalWorklet(current.values.outputAmount, previous.values.outputAmount)) { // If the number in the output field changes + + console.log('here'); if (equalWorklet(current.values.outputAmount, 0)) { // If the output amount was set to 0 quoteFetchingInterval.stop(); @@ -968,6 +970,7 @@ export function useSwapInputsController({ inputMethod, inputValues, niceIncrement, + onTypedNumber, onChangedPercentage, percentageToSwap, quoteFetchingInterval, From 75faaadf41c8efb233609cf1aa4f0d71ab5054f1 Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Tue, 18 Jun 2024 11:43:15 -0400 Subject: [PATCH 2/2] Update src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts --- src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts index 0d9d3c3cc48..62690789840 100644 --- a/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts +++ b/src/__swaps__/screens/Swap/hooks/useSwapInputsController.ts @@ -810,8 +810,6 @@ export function useSwapInputsController({ } if (inputMethod.value === 'outputAmount' && !equalWorklet(current.values.outputAmount, previous.values.outputAmount)) { // If the number in the output field changes - - console.log('here'); if (equalWorklet(current.values.outputAmount, 0)) { // If the output amount was set to 0 quoteFetchingInterval.stop();