Stop using progress header in Send flow, add gradient to BottomButtons

Goal: reduce visual load to a minimum
alephium · Nov 2, 2024 · ed21fc6 · ed21fc6
1 parent 0598baa
commit ed21fc6
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 77 deletions.
diff --git a/apps/mobile-wallet/src/components/buttons/BottomButtons.tsx b/apps/mobile-wallet/src/components/buttons/BottomButtons.tsx
@@ -15,18 +15,43 @@ GNU Lesser General Public License for more details.
 You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
+import { colord } from 'colord'
+import { LinearGradient } from 'expo-linear-gradient'
 import { ReactNode } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
-import styled from 'styled-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import styled, { useTheme } from 'styled-components/native'
 
 import { DEFAULT_MARGIN, VERTICAL_GAP } from '~/style/globalStyle'
 
 interface BottomButtonsProps {
   children: ReactNode
+  bottomInset?: boolean
   style?: StyleProp<ViewStyle>
 }
 
-const BottomButtons = ({ children, style }: BottomButtonsProps) => <Container style={style}>{children}</Container>
+const BottomButtons = ({ children, bottomInset, style }: BottomButtonsProps) => {
+  const theme = useTheme()
+  const insets = useSafeAreaInsets()
+
+  return (
+    <Container style={[{ paddingBottom: bottomInset ? insets.bottom : 0 }, style]}>
+      <Gradient
+        start={{ x: 0.5, y: 1 }}
+        end={{ x: 0.5, y: 0 }}
+        locations={[0.45, 1]}
+        colors={
+          theme.name === 'dark'
+            ? [theme.bg.back2, colord(theme.bg.back2).alpha(0).toHex()]
+            : [theme.bg.highlight, colord(theme.bg.highlight).alpha(0).toHex()]
+        }
+        pointerEvents="none"
+        style={{ height: bottomInset ? '240%' : '160%' }}
+      />
+      {children}
+    </Container>
+  )
+}
 
 export default BottomButtons
 
@@ -36,3 +61,10 @@ const Container = styled.View`
   margin: ${VERTICAL_GAP * 2}px ${DEFAULT_MARGIN}px ${VERTICAL_GAP}px;
   gap: 20px;
 `
+
+const Gradient = styled(LinearGradient)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`
diff --git a/apps/mobile-wallet/src/components/headers/BaseHeader.tsx b/apps/mobile-wallet/src/components/headers/BaseHeader.tsx
@@ -89,7 +89,7 @@ const BaseHeader = ({
             Extrapolation.CLAMP
           )
         }
-      : {}
+      : { opacity: 1 }
   )
 
   const handleHeaderLayout = (e: LayoutChangeEvent) => {

diff --git a/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx b/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx
@@ -44,7 +44,7 @@ export interface ScrollScreenBaseProps extends ScreenProps {
   fill?: boolean
   screenTitle?: string
   screenIntro?: string
-  screenTitleAlwaysVisible?: boolean
+  headerTitleAlwaysVisible?: boolean
   floatingHeader?: boolean
   headerScrollEffectOffset?: number
   TitleSideComponent?: ReactNode
@@ -69,7 +69,7 @@ const ScrollScreen = ({
   headerOptions,
   screenTitle,
   screenIntro,
-  screenTitleAlwaysVisible,
+  headerTitleAlwaysVisible,
   floatingHeader,
   headerScrollEffectOffset,
   TitleSideComponent,
@@ -99,7 +99,7 @@ const ScrollScreen = ({
             options={{ headerTitle: screenTitle, ...headerOptions }}
             scrollY={screenScrollY}
             scrollEffectOffset={headerScrollEffectOffset}
-            titleAlwaysVisible={screenTitleAlwaysVisible}
+            titleAlwaysVisible={headerTitleAlwaysVisible}
             style={floatingHeader ? { position: 'absolute', top: 0, left: 0, right: 0 } : undefined}
           />
         )}

diff --git a/apps/mobile-wallet/src/features/send/screens/DestinationScreen.tsx b/apps/mobile-wallet/src/features/send/screens/DestinationScreen.tsx
@@ -29,6 +29,7 @@ import styled, { useTheme } from 'styled-components/native'
 
 import { sendAnalytics } from '~/analytics'
 import { defaultSpringConfiguration } from '~/animations/reanimated/reanimatedAnimations'
+import BottomButtons from '~/components/buttons/BottomButtons'
 import Button, { CloseButton, ContinueButton } from '~/components/buttons/Button'
 import Input from '~/components/inputs/Input'
 import { ScreenProps, ScreenSection } from '~/components/layout/Screen'
@@ -176,78 +177,89 @@ const DestinationScreen = ({ navigation, route: { params }, ...props }: Destinat
   }))
 
   return (
-    <ScrollScreen
-      verticalGap
-      contentPaddingTop
-      screenTitle={t('Destination')}
-      screenIntro={t('Send to an address, a contact, or one of your other addresses.')}
-      onScroll={screenScrollHandler}
-      {...props}
-    >
-      <ScreenSection>
-        <Controller
-          name="toAddressHash"
-          render={({ field: { onChange, onBlur, value } }) => (
-            <Input
-              label={t('Destination address')}
-              value={value}
-              onChangeText={onChange}
-              onBlur={onBlur}
-              error={errors.toAddressHash?.type === 'required' ? requiredErrorMessage : errors.toAddressHash?.message}
-              style={inputStyle}
-            />
-          )}
-          rules={{
-            required: true,
-            validate: validateIsAddressValid
-          }}
-          control={control}
-        />
-      </ScreenSection>
-      <ScreenSection>
-        <ButtonsRow>
-          <Button
-            compact
-            iconProps={{ name: 'maximize' }}
-            title={t('Scan')}
-            onPress={openQRCodeScannerModal}
-            variant="accent"
-            type="secondary"
-          />
-          <Button
-            compact
-            iconProps={{ name: 'copy' }}
-            title={t('Paste')}
-            onPress={handlePastePress}
-            variant="accent"
-            type="secondary"
+    <>
+      <ScrollScreen
+        verticalGap
+        contentPaddingTop
+        headerTitleAlwaysVisible
+        headerOptions={{
+          type: 'stack',
+          headerTitle: t('Send')
+        }}
+        screenTitle={t('Destination')}
+        screenIntro={t('Send to an address, a contact, or one of your other addresses.')}
+        onScroll={screenScrollHandler}
+        fill
+        {...props}
+      >
+        <ScreenSection>
+          <Controller
+            name="toAddressHash"
+            render={({ field: { onChange, onBlur, value } }) => (
+              <Input
+                label={t('Destination address')}
+                value={value}
+                onChangeText={onChange}
+                onBlur={onBlur}
+                error={errors.toAddressHash?.type === 'required' ? requiredErrorMessage : errors.toAddressHash?.message}
+                style={inputStyle}
+              />
+            )}
+            rules={{
+              required: true,
+              validate: validateIsAddressValid
+            }}
+            control={control}
           />
-          <Button
-            compact
-            iconProps={{ name: 'user' }}
-            title={t('Contacts')}
-            onPress={openSelectContactModal}
-            variant="accent"
-            type="secondary"
-          />
-          <Button
-            compact
-            iconProps={{ name: 'bookmark' }}
-            title={t('Addresses')}
-            onPress={openAddressSelectModal}
-            variant="accent"
-            type="secondary"
+        </ScreenSection>
+        <ScreenSection>
+          <ButtonsRow>
+            <Button
+              compact
+              iconProps={{ name: 'maximize' }}
+              title={t('Scan')}
+              onPress={openQRCodeScannerModal}
+              variant="accent"
+              type="secondary"
+            />
+            <Button
+              compact
+              iconProps={{ name: 'copy' }}
+              title={t('Paste')}
+              onPress={handlePastePress}
+              variant="accent"
+              type="secondary"
+            />
+            <Button
+              compact
+              iconProps={{ name: 'user' }}
+              title={t('Contacts')}
+              onPress={openSelectContactModal}
+              variant="accent"
+              type="secondary"
+            />
+            <Button
+              compact
+              iconProps={{ name: 'bookmark' }}
+              title={t('Addresses')}
+              onPress={openAddressSelectModal}
+              variant="accent"
+              type="secondary"
+            />
+          </ButtonsRow>
+        </ScreenSection>
+        {isCameraOpen && (
+          <QRCodeScannerModal
+            onClose={closeQRCodeScannerModal}
+            onQRCodeScan={handleQRCodeScan}
+            text={t('Scan an Alephium address QR code')}
           />
-        </ButtonsRow>
-      </ScreenSection>
-      {isCameraOpen && (
-        <QRCodeScannerModal
-          onClose={closeQRCodeScannerModal}
-          onQRCodeScan={handleQRCodeScan}
-          text={t('Scan an Alephium address QR code')}
-        />
-      )}
-    </ScrollScreen>
+        )}
+      </ScrollScreen>
+      <BottomButtons bottomInset>
+        <Button title={t('Continue')} variant="highlight" onPress={handleSubmit(handleContinuePress)} />
+      </BottomButtons>
+    </>
   )
 }
 

diff --git a/apps/mobile-wallet/src/navigation/SendNavigation.tsx b/apps/mobile-wallet/src/navigation/SendNavigation.tsx
@@ -44,7 +44,6 @@ const SendStack = createStackNavigator<SendNavigationParamList>()
 const SendNavigation = () => (
   <SendContextProvider>
     <HeaderContextProvider>
-      <SendProgressHeader />
       <SendStack.Navigator
         screenOptions={{
           headerShown: false,