Support typing into native inputs in swap #6100
Conversation
| @@ -212,18 +212,6 @@ export function useAnimatedSwapStyles({ | |||
| }; | |||
| }); | |||
|
|
|||
| const assetToSellCaretStyle = useAnimatedStyle(() => { | |||
There was a problem hiding this comment.
these styles were moved out to be in the new SwapInputValuesCaret component (around line 64)
| const { navigate } = useNavigation(); | ||
| const { focusedInput, SwapTextStyles, SwapInputController, AnimatedSwapStyles, outputQuotesAreDisabled } = useSwapContext(); | ||
|
|
||
| const handleTapWhileDisabled = useCallback(() => { |
There was a problem hiding this comment.
handleTapWhileDisabled is moved down to line 133 where it can be shared between both the output amount and the output native value
| import { inputKeys } from '@/__swaps__/types/swap'; | ||
| import { getColorValueForThemeWorklet } from '@/__swaps__/utils/swaps'; | ||
|
|
||
| export function SwapInputValuesCaret({ inputCaretType, disabled }: { inputCaretType: inputKeys; disabled?: SharedValue<boolean> }) { |
There was a problem hiding this comment.
new component for the caret that is used for the input amount, output amount, input native value, and output native value
| import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider'; | ||
| import { equalWorklet } from '@/__swaps__/safe-math/SafeMath'; | ||
|
|
||
| export function SwapNativeInput({ |
There was a problem hiding this comment.
new component for the input native value and the output native value
| 'worklet'; | ||
| return stripNonDecimalNumbers(SwapInputController[getFormattedInputKey(inputKey)].value); |
There was a problem hiding this comment.
created a more generic formatter that strips away commas as well as native currency symbols for native input values
| return stripNonDecimalNumbers(SwapInputController[getFormattedInputKey(inputKey)].value); | ||
| }; | ||
|
|
||
| const ignoreChange = ({ currentValue, addingDecimal = false }: { currentValue?: string; addingDecimal?: boolean }) => { |
There was a problem hiding this comment.
pulled out the logic into a separate shared function for when to ignore an update from either adding a number / adding a decimal / deleting a character
| } | ||
|
|
||
| // ignore when: corresponding asset does not have a price and we are updating native inputs | ||
| const inputAssetPrice = internalSelectedInputAsset.value?.nativePrice || internalSelectedInputAsset.value?.price?.value || 0; |
There was a problem hiding this comment.
this section makes sure that we only let the user update the native value if the corresponding asset has a price
|
|
||
| // ignore when: decimals exceed native currency decimals | ||
| if (currentValue) { | ||
| const currentValueDecimals = currentValue.split('.')?.[1]?.length ?? -1; |
There was a problem hiding this comment.
this section takes into account the current value and any decimals it may have, and confirms if it would exceed the allowable decimals for a native currency
There was a problem hiding this comment.
it's -1 in the instance of there not being any decimal - if there is a decimal but no numbers after, the length will be 0
| const currentValueDecimals = currentValue.split('.')?.[1]?.length ?? -1; | ||
| const nativeCurrencyDecimals = supportedNativeCurrencies[nativeCurrency].decimals; | ||
|
|
||
| if (addingDecimal && nativeCurrencyDecimals === 0) { |
There was a problem hiding this comment.
adding a case to prevent adding a decimal character on a native value that doesn't have any decimals allowed (e.g, JPY or KRW currencies with no decimals)
|
|
||
| const newValue = currentValue === '0' ? `${number}` : `${currentValue}${number}`; | ||
| const isNativePlaceholderValue = |
There was a problem hiding this comment.
need this to handle for the case when there is a placeholder zero value for the native inputs (e.g, "$0.00" that doesn't match "0")
| @@ -314,7 +314,8 @@ export const convertBipsToPercentage = (value: BigNumberish, decimals = 2): stri | |||
| export const convertAmountToNativeDisplayWorklet = ( | |||
| value: number | string, | |||
| nativeCurrency: keyof nativeCurrencyType, | |||
| useThreshold = false | |||
| useThreshold = false, | |||
| ignoreAlignment = false | |||
There was a problem hiding this comment.
for the swap native input values, we want to keep the native currency symbol on the left (ignore alignment) so that the user can easily update the value
| @@ -170,81 +162,10 @@ export function useSwapTextStyles({ | |||
| }; | |||
| }); | |||
|
|
|||
| // TODO: Create a reusable InputCaret component | |||
| const inputCaretStyle = useAnimatedStyle(() => { | |||
There was a problem hiding this comment.
these styles have been moved out to the new NativeInputCaret component
| (inputValues.value.inputAmount === 0 && inputMethod.value !== 'slider') || | ||
| (inputMethod.value === 'slider' && equalWorklet(inputValues.value.inputAmount, 0)); | ||
| return isZero; | ||
| const isInputAmountZero = inputValues.value.inputAmount === 0; |
There was a problem hiding this comment.
the isInputZero and isOutputZero still unfortunately rely on distinguishing between 0 (number) and "0" (string) for what is a zero state from when a user deletes all the values (number) vs when the user explicitly typed in a 0 (string)
the isInputZero is trying to figure out when it's the default (number) 0 state in particular.
| if (inputMethod.value === 'slider' && equalWorklet(inputValues.value.inputAmount, 0)) return true; | ||
|
|
||
| if (inputMethod.value === 'inputNativeValue' && isInputAmountZero) { | ||
| return inputValues.value.inputNativeValue === 0; |
There was a problem hiding this comment.
this adds an extra case to distinguish when we have typed into the inputNativeValue as the inputMethod and deleted all the characters, thus resulting in inputNativeValue equal to 0 (number)
| if ( | ||
| (inputMethod.value === 'slider' && percentageToSwap.value === 0) || | ||
| !inputValues.value.inputNativeValue || | ||
| !isNumberStringWorklet(inputValues.value.inputNativeValue.toString()) || | ||
| equalWorklet(inputValues.value.inputNativeValue, 0) | ||
| ) { | ||
| return convertAmountToNativeDisplayWorklet(0, currentCurrency); | ||
| return convertAmountToNativeDisplayWorklet(0, currentCurrency, false, true); |
There was a problem hiding this comment.
I didn't want to convert the convertAmountToNativeDisplayWorklet function to accept object params yet, but just updating to add a final parameter to ignore currency alignment for swaps inputs (e.g, if a native currency is right-aligned, display it still with the symbol on the left)
| const inputMethodValue = inputMethod.value; | ||
| const isNativeInputMethod = inputMethodValue === 'inputNativeValue'; | ||
| const isNativeOutputMethod = inputMethodValue === 'outputNativeValue'; | ||
| if ( |
There was a problem hiding this comment.
main reaction logic for handling native input / native output changes
jinchung
force-pushed
the
@jin/update-native-inputs
branch
from
9e32236 to
d651c00
Compare
|
Small edge case that I think needs the following change. Typing in the output native amount, and then sliding the slider should move the caret back to the appropriate place (in this case the inputAmount). @jinchung this poses another question of if there other instances where the caret doesn't change based on what's fetching the quote. Should we always place the caret on the place of which that's determining the quote? Here's a short video of what I mean. (note: I'm typing in the output native amount, but as soon as I touch the slider the quote is based on the input amount) Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-13.at.10.41.10.mp4 |
I had spoken with Christian about this a while back when making changes to the flip / change assets logic since you get into all sorts of scenarios with that depending on if there's a balance, a price, what you last typed, etc. The last convo we had was basically treating focus, lastTypedInput, and inputMethod as separate concepts - where inputMethod determines what is being used to calculate the quote, so there could be scenarios in which the inputMethod then differs from where the focus is (e.g, in the example of updating with slider). We can revisit this later, but I think we were wanting to reduce the focus hopping around, but maybe there's an ideal way to do it. |
Remove formatting that isn't a decimal or number on inputs. Previously, we were removing only commas, but now that we support native inputs, we want to remove the native currency symbols. Prevent updating of the native inputs if their is no corresponding price for the input / output asset.
…handler for basic currency formatting
… update output native amount
…there are no native currency decimals
jinchung
force-pushed
the
@jin/update-native-inputs
branch
from
b466d76 to
c0b102c
Compare
* Remove unused TODO as build quote params should always rely on the corresponding input output amounts even if native values are updated * Support input native changes in swap inputs controller animated reaction * Temp cleanup on SwapInputAsset to pull out SwapInputAmountCaret and SwapInputNativeAmount * Temp cleanup on SwapOutputAsset to pull out SwapOutputAmountCaret and SwapOutputNativeAmount * Placeholder: generic SwapInputValuesCaret that still need to be hooked up with native inputs * Add caret animatedStyle to SwapInputValuesCaret * Use SwapInputValuesCaret component in SwapInputAsset and SwapOutputAsset * Remove old input and output caret styles from useSwapTextStyles * Cleanup of unused imports in swaps types * Add assetToSellCaretStyle and assetToBuyCaretStyle to caret component * Remove now unused assetToSell/BuyCaretStyles from useAnimatedSwapStyles * Update native input in SwapInputAsset to be typeable * Define size style for native caret in SwapInputValuesCaret * Update swap number pad Remove formatting that isn't a decimal or number on inputs. Previously, we were removing only commas, but now that we support native inputs, we want to remove the native currency symbols. Prevent updating of the native inputs if their is no corresponding price for the input / output asset. * Create separate SwapNativeInput component * Remove unused caret styles from SwapInputAsset and SwapOutputAsset * Add param to ignore alignment for native currency formatting and add handler for basic currency formatting * Update width on nativeCaret * Add support for changes to native output value * Fix missing checks for inputNativeValue and outputNativeValue * Split native currency symbol from value in native input component * Disable caret when correponding asset does not have price for native input * Update formatting for input amount if input method is native inputs * Disable pointer events when no price on native inputs * Distinguish between placeholder values vs typed inputs for native input values * Update checks for color for zero value in swap text styles * Disable focus and pointer events on native output if output based quotes disabled * Support showing explainer if output quotes disabled and user tries to update output native amount * Ignore native input changes if native currency decimals exceeded * Update add decimal in swap number pad to also handle scenarios where there are no native currency decimals * Update South Korea and Japan currencies as they do not use decimals * Fix numbers test after JPY decimal changes * Update numbers test value which should get rounded up * Fix: check for native placeholder value while checking native input decimal places
* sortDirection * asc/desc menu * imports * imports * i18n * Merge remote-tracking branch origin/develop into gregs/app-1756-sorting-nfts-on-android-is-broken * Merge remote-tracking branch origin/develop into gregs/app-1756-sorting-nfts-on-android-is-broken * fix types * update ts * add back isAnchoredToRight * ?? * grey out the selected option * android * Fix iOS 18 cool-modals context menu bug (#6112) * Fix send crashes / blank screen (#6116) * Fix disabled paste button on Android (#6118) * imageVariants (#6114) * Fix send sheet stuck on loading (#6119) * fix stuck loading phase * Update src/screens/SendSheet.js * fix deleting contact resetting toAddress to undefined * fix some shit with ens names * rm logs * fix failed to send * fix lint * prefer contact name over wallet label * force linter 2 re-rerun --------- Co-authored-by: Bruno Barbieri <[email protected]> * Support typing into native inputs in swap (#6100) * Remove unused TODO as build quote params should always rely on the corresponding input output amounts even if native values are updated * Support input native changes in swap inputs controller animated reaction * Temp cleanup on SwapInputAsset to pull out SwapInputAmountCaret and SwapInputNativeAmount * Temp cleanup on SwapOutputAsset to pull out SwapOutputAmountCaret and SwapOutputNativeAmount * Placeholder: generic SwapInputValuesCaret that still need to be hooked up with native inputs * Add caret animatedStyle to SwapInputValuesCaret * Use SwapInputValuesCaret component in SwapInputAsset and SwapOutputAsset * Remove old input and output caret styles from useSwapTextStyles * Cleanup of unused imports in swaps types * Add assetToSellCaretStyle and assetToBuyCaretStyle to caret component * Remove now unused assetToSell/BuyCaretStyles from useAnimatedSwapStyles * Update native input in SwapInputAsset to be typeable * Define size style for native caret in SwapInputValuesCaret * Update swap number pad Remove formatting that isn't a decimal or number on inputs. Previously, we were removing only commas, but now that we support native inputs, we want to remove the native currency symbols. Prevent updating of the native inputs if their is no corresponding price for the input / output asset. * Create separate SwapNativeInput component * Remove unused caret styles from SwapInputAsset and SwapOutputAsset * Add param to ignore alignment for native currency formatting and add handler for basic currency formatting * Update width on nativeCaret * Add support for changes to native output value * Fix missing checks for inputNativeValue and outputNativeValue * Split native currency symbol from value in native input component * Disable caret when correponding asset does not have price for native input * Update formatting for input amount if input method is native inputs * Disable pointer events when no price on native inputs * Distinguish between placeholder values vs typed inputs for native input values * Update checks for color for zero value in swap text styles * Disable focus and pointer events on native output if output based quotes disabled * Support showing explainer if output quotes disabled and user tries to update output native amount * Ignore native input changes if native currency decimals exceeded * Update add decimal in swap number pad to also handle scenarios where there are no native currency decimals * Update South Korea and Japan currencies as they do not use decimals * Fix numbers test after JPY decimal changes * Update numbers test value which should get rounded up * Fix: check for native placeholder value while checking native input decimal places * Fix chainId not being passed in for dapp browser getProvider function (#6121) * Update rainbow provider package to latest 0.1.1 * Fix: getProvider function needs to use an object param * Cleanup * Update arbitrum default back to mainnet for WC message signing (#6122) * Bump deps for Xcode 16 compatibility (#6110) * RN upgrade * update ios files * fixes for android * iOS working fine * bump sentry again * patches and missing dep bump * bump more deps * update lockfile * fix android * changes to pbxproj * revert RN upgrade * new line missing * force linter 2 re-rerun * update pod lock * bump iOS and Android to v1.9.40 (#6131) * Update CI to work with Xcode 16 / iOS 18 (#6129) * omit_from_total (#6103) * Fix speed up and cancel bug (#6133) * change txTo -> to * idk * bump iOS and Android to v1.9.41 (#6136) * MWP (#6142) * mwp compat * prettier * log only if there is an error * Dapp browser url updates fix (#6150) * remove unused import * restrict JS nav from SPA to same domain * clean up * Update src/components/DappBrowser/BrowserTab.tsx * Internal networks filtering (#6148) * filter internal networks out * rm apechains refs * Fix token search crash for newly added chains (#6147) * fix token search crash * rm assets * Claimables [PR #1]: updates to query, types, utils, wallet screen rendering logic + wallet screen components (#6140) * updates to query, types, & wallet screen components * rm onPress * thanks greg * Fix improper gas fee calculation (#6125) * add missing mul to eip1559 * use preferred network if available * another NaN check guard * Claimables [PR #2]: claim panel ui (#6141) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * claim panel ui * nav * onPress -> onLongPress * i18n * pending state, i18n * comment * shimmer * tweak gas fee formatting * number formatting * wallet screen number format * route types * do not require long press for goBack * tweak button text * nit * formatting * thanks greg * revert * fix android button width * rm memo * try catch gas * rm functionality from tx * rm rapsv2 * raps v2 (#6138) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * thanks greg * Claimables [PR #3]: claim functionality (#6146) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * claim panel ui * nav * onPress -> onLongPress * i18n * pending state, i18n * comment * shimmer * functionality * tweak gas fee formatting * number formatting * wallet screen number format * route types * set pending state if no tx hash * do not require long press for goBack * tweak button text * nit * fix pending tx * disable read only wallet * formatting * thanks greg * revert * fix android button width * rm memo * try catch gas * rm functionality from tx * [APP-1907] Add Claiming Status to Pending Claimable TX's (plus types and unused code cleanup) (#6155) * fix: use claim type for pending claimable tx * [APP-1909] Await Claimable TX Before Resolving Rap (#6156) * fix: await claimable tx mining before displaying success * fix: add pending tx prior to waiting for mining * Claimables fixes (#6158) * number formatting * fix border radius for claim dapp icon * poll gas by chain id * haptics * adjust button enabled logic + shadows * fix (#6159) * convert sends to typescript (#6120) * convert sends to typescript * more conversions * fix lint * fix optimism security fee * fix file renaming weirdness * fix rotation from max asset to nft not working * fix some typescript bs * fix lint * fix nft sends * comments watchdog action (#6153) * pod unlock (#6168) * Fix WalletconnectV2 changeAccount issues (#6160) * fix wc v2 change account issues * Update src/walletConnect/index.tsx * Update src/components/walletconnect-list/WalletConnectV2ListItem.tsx * Update src/components/walletconnect-list/WalletConnectV2ListItem.tsx * fix deps array * bump android and iOS to version v1.9.42 (#6170) * fix approval sheet not using verifiedData incoming from walletconnect (#6162) * network expansion (#6149) * init apechain support * fix wrong images * Apply suggestions from code review * Update chain badge * Update chain colors * Add all badge assets * add backend networks runtime * added back internal flag * remove unused NATIVE_ASSETS_PER_CHAIN * fix some discrepancies --------- Co-authored-by: Christian Baroni <[email protected]> * Analytics changes (#6169) * analytics changes * idk * watched wallets cohort + properly track watched wallets * [CHORE]: Walletconnect Approval / Redirect sheet typescript conversion (#6167) * wc ts conversion * remove memo and fix lint * nft expanded state fix crash (#6115) * fix crash * destructure in same line * fix lint issues on develop (#6174) * Fix MWP from failing to prompt if dapp metadata retrieval fails (#6164) * prevent mwp flow from failing if failed to fetch dapp metadata * prevent logging user rejections * ignore logging some user errors * lel wtf (#6166) * WC migration to WalletKit (#6163) * Fix networks crash (#6176) * fix networks crash * remove duplicated walletconnect chain ids * use all supported chains for walletconnect * fix weird space on approval sheet * Update src/screens/WalletConnectApprovalSheet.tsx * hide send button when not transferable (#6123) * Claim button fixes (#6165) * hold -> tap * debounce * fix lint (#6180) * chore: use new fields from swap sdk and remove extraneous code (#6171) * chore: update swaps * chore: replace extraneous crosschain logic with needsAllowance field * chore: get rid of all WRAPPED_ASSET references and use quote swap type * chore: remove swapType as a param to get quotes * chore: replace swap unlock logic with needsAllowance field * chore: code review changes * Zeego Dropdown Menus [MintFilters] (#6143) * zeego setup * bump react-native-menu/menu * fix android settings menu * update deps * fix type inference * mvp to fix android context menus * fix some inconsistencies on Android * remove debug logs * Update src/components/asset-list/RecyclerAssetList2/core/RawRecyclerList.tsx * Update src/components/DropdownMenu.tsx * remove unused deps * fix build maybe * update lock * Claim bug fix (#6182) * fixes * fix experimental config usage * nits * use setTimeout * defaultConfig fix * fix ledger image blocking text * 👍 * lint * lint --------- Co-authored-by: Christian Baroni <[email protected]> Co-authored-by: Matthew Wall <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: Jin <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: Ibrahim Taveras <[email protected]> Co-authored-by: Ben Goldberg <[email protected]> Co-authored-by: Christopher Howard <[email protected]> Co-authored-by: Wayne Cheng <[email protected]>
Fixes APP-1465
What changed (plus any additional context for devs)
Screen recordings / screenshots
Simulator.Screen.Recording.-.iPhone.15.Pro.iOS.17.5.-.2024-09-12.at.04.24.59.mp4
Flipping / changing assets:
https://github.com/user-attachments/assets/e10b0d15-77f6-4c55-9950-afc6331d67ca
Example (forced
useSwapOutputQuotesDisabledto return true) in order to show what it looks like when trying to update either native output or output amount when output-based quotes disabled:https://github.com/user-attachments/assets/e214357e-ff53-4f2b-bb7c-20ba25bdbf93
What to test