Auto scroll to end after adding or editing addresses & amounts

Author: paullinator

CHANGELOG.md

@@ -2,15 +2,17 @@
 
 ## Unreleased (develop)
 
+- changed: Auto launch QR scanner for multi-out payments if previously used
+- changed: Auto populate amount for multi-out payments if prior amounts are similar
+- changed: Auto scroll to end of `SendScene2` when addresses or amounts change
+
 ## 4.28.0 (staging)
 
 - added: Dismissed promo cards added to `NotificationCenterScene`
 - added: `Edge-ucation` section in `WalletDetailsScene`
 - added: Multiple memo support to `SendScene2`
 - added: Add os version to the "OS" line of logs
 - changed: "MAX" button in `FlipInput` restyled to tertiary and moved next to the text input field
-- changed: Auto launch QR scanner for multi-out payments if previously used
-- changed: Auto populate amount for multi-out payments if prior amounts are similar
 - fixed: Primary button transforming on the animation on `GettingStartedScene`
 - fixed: `NotificationCenterScene` could crash if there was an undismissed new token notification and the associated wallet no longer existed
 - removed: Disable Fantom transaction list

src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap

@@ -209,6 +209,7 @@ exports[`SendScene2 1 spendTarget 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -1605,6 +1606,7 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -3229,6 +3231,7 @@ exports[`SendScene2 2 spendTargets 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -4811,6 +4814,7 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -6052,6 +6056,7 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -7269,6 +7274,7 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -8304,6 +8310,7 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -9661,6 +9668,7 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -10976,6 +10984,7 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}
@@ -12225,6 +12234,7 @@ exports[`SendScene2 Render SendScene 1`] = `
       extraScrollHeight={62}
       getScrollResponder={[Function]}
       handleOnScroll={[Function]}
+      innerRef={[Function]}
       keyboardDismissMode="interactive"
       keyboardOpeningTime={250}
       keyboardSpace={0}

src/components/scenes/SendScene2.tsx

@@ -69,6 +69,8 @@ import { ErrorTile } from '../tiles/ErrorTile'
 
 // TODO: Check contentPadding
 
+const SCROLL_TO_END_DELAY_MS = 150
+
 interface Props extends EdgeAppSceneProps<'send2'> {}
 
 export interface SendScene2Params {
@@ -128,7 +130,9 @@ const SendComponent = (props: Props) => {
   const theme = useTheme()
   const styles = getStyles(theme)
 
+  const needsScrollToEnd = React.useRef<boolean>(false)
   const makeSpendCounter = React.useRef<number>(0)
+  const scrollViewRef = React.useRef<KeyboardAwareScrollView | null>(null)
 
   const initialMount = React.useRef<boolean>(true)
   const pinInputRef = React.useRef<TextInput>(null)
@@ -269,12 +273,14 @@ const SendComponent = (props: Props) => {
         setMinNativeAmount(parsedUri.minNativeAmount)
         setExpireDate(parsedUri?.expireDate)
         setSpendInfo({ ...spendInfo })
+        needsScrollToEnd.current = true
       }
     }
 
   const handleAddressAmountPress = (index: number) => () => {
     spendInfo.spendTargets.splice(index, 1)
     setSpendInfo({ ...spendInfo })
+    needsScrollToEnd.current = true
   }
 
   const renderAddressAmountTile = (index: number, spendTarget: EdgeSpendTarget) => {
@@ -351,6 +357,7 @@ const SendComponent = (props: Props) => {
     setSpendInfo({ ...spendInfo })
     setMaxSpendSetter(-1)
     setFieldChanged(newField)
+    needsScrollToEnd.current = true
   }
 
   const handleSetMax = (index: number) => () => {
@@ -476,6 +483,7 @@ const SendComponent = (props: Props) => {
   const handleAddAddress = useHandler(() => {
     spendInfo.spendTargets.push({})
     setSpendInfo({ ...spendInfo })
+    needsScrollToEnd.current = true
   })
 
   const renderAddAddress = () => {
@@ -1133,6 +1141,19 @@ const SendComponent = (props: Props) => {
     backgroundColors[0] = scaledColor
   }
 
+  React.useEffect(() => {
+    // Hack: While you would think to use InteractionManager.runAfterInteractions,
+    // it doesn't work because several renders occur before the full height is
+    // determined and the scrollToEnd call would be effective.
+    const timeout = setTimeout(() => {
+      if (needsScrollToEnd.current) {
+        scrollViewRef.current?.scrollToEnd(true)
+        needsScrollToEnd.current = false
+      }
+    }, SCROLL_TO_END_DELAY_MS)
+    return () => clearTimeout(timeout)
+  })
+
   return (
     <SceneWrapper
       hasNotifications
@@ -1146,6 +1167,10 @@ const SendComponent = (props: Props) => {
       {({ insetStyle }) => (
         <>
           <StyledKeyboardAwareScrollView
+            innerRef={ref => {
+              const kbRef: KeyboardAwareScrollView | null = ref as any
+              scrollViewRef.current = kbRef
+            }}
             contentContainerStyle={{
               ...insetStyle,
               paddingTop: 0,