Select bottom modals, headers cleanup

src/components/AddressCard.tsx

@@ -18,8 +18,9 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { calculateAmountWorth } from '@alephium/sdk'
 import { colord } from 'colord'
+import { LinearGradient } from 'expo-linear-gradient'
 import { Copy, SettingsIcon } from 'lucide-react-native'
-import { StyleProp, View, ViewStyle } from 'react-native'
+import { StyleProp, ViewStyle } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
 
 import AddressBadge from '~/components/AddressBadge'
@@ -60,7 +61,7 @@ const AddressCard = ({ style, addressHash }: AddressCardProps) => {
   const textColor = themes[textColorTheme].font.primary
 
   return (
-    <View style={[style, { backgroundColor: bgColor }]}>
+    <LinearGradient style={style} colors={[bgColor, colord(bgColor).darken(0.1).toHex()]} start={{ x: 0.1, y: 0.3 }}>
       <Header>
         <AddressBadgeContainer>
           <AddressBadgeStyled
@@ -103,7 +104,7 @@ const AddressCard = ({ style, addressHash }: AddressCardProps) => {
           Group {address.group}
         </AppText>
       </BottomRow>
-    </View>
+    </LinearGradient>
   )
 }
 

src/components/AppText.tsx

@@ -27,7 +27,7 @@ export type AppTextProps = {
   bold?: boolean
   semiBold?: boolean
   medium?: boolean
-  color?: FontColor | GlobalColor
+  color?: FontColor | GlobalColor | string
   colorTheme?: ThemeType
   size?: number
 }
@@ -36,7 +36,7 @@ export default styled.Text<AppTextProps>`
   color: ${({ color, theme, colorTheme }) => {
     const th = colorTheme ? themes[colorTheme] : theme
 
-    return color ? th.font[color as FontColor] || th.global[color as GlobalColor] : th.font.primary
+    return color ? th.font[color as FontColor] || th.global[color as GlobalColor] || color : th.font.primary
   }};
 
   ${({ bold }) =>

src/components/ExpandableRow.tsx

@@ -18,50 +18,46 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { ChevronDown } from 'lucide-react-native'
 import { ReactNode, useState } from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { StyleProp, View, ViewStyle } from 'react-native'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import styled, { useTheme } from 'styled-components/native'
 
 import AppText from '~/components/AppText'
-import HighlightRow from '~/components/HighlightRow'
 
 interface ExpandableRowProps {
-  // TODO: Find a better way to measure the height of the collapsable section
-  expandedHeight: number
   children: ReactNode
   title?: string
   style?: StyleProp<ViewStyle>
 }
 
-const ExpandableRow = ({ expandedHeight, children, title = 'Advanced options', style }: ExpandableRowProps) => {
+const ExpandableRow = ({ children, title = 'Advanced options', style }: ExpandableRowProps) => {
   const theme = useTheme()
   const [isExpanded, setIsExpanded] = useState(false)
 
   const toggleExpanded = () => setIsExpanded(!isExpanded)
 
   const collapsableSectionStyle = useAnimatedStyle(() => ({
-    height: withTiming(isExpanded ? expandedHeight : 0)
+    opacity: withTiming(isExpanded ? 1 : 0)
   }))
 
   const chevronStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: withTiming(isExpanded ? '180deg' : '0deg') }]
   }))
 
   return (
-    <HighlightRow style={style}>
+    <View style={style}>
       <Header onPress={toggleExpanded}>
         <Title>{title}</Title>
         <Animated.View style={chevronStyle}>
           <ChevronDownStyled size={20} color={theme.font.primary} />
         </Animated.View>
       </Header>
-      <CollapsableSection style={collapsableSectionStyle}>{children}</CollapsableSection>
-    </HighlightRow>
+      <Animated.View style={collapsableSectionStyle}>{children}</Animated.View>
+    </View>
   )
 }
 
 export default styled(ExpandableRow)`
-  background-color: ${({ theme }) => theme.bg.secondary};
   flex-direction: column;
   justify-content: center;
   padding-top: 0;
@@ -84,9 +80,3 @@ const Header = styled.TouchableOpacity`
   width: 100%;
   padding: 25px 0 25px 6px;
 `
-
-const CollapsableSection = styled(Animated.View)`
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-`

src/components/buttons/Button.tsx

@@ -54,7 +54,7 @@ const Button = ({
 
   const colors = {
     bg: {
-      default: theme.bg.primary,
+      default: theme.bg.secondary,
       contrast: theme.font.primary,
       accent: theme.global.accent,
       valid: colord(theme.global.valid).alpha(0.1).toRgbString(),

src/components/headers/BottomModalHeader.tsx

@@ -16,18 +16,26 @@ 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 { StackHeaderProps } from '@react-navigation/stack'
 import { ReactNode } from 'react'
 import { View } from 'react-native'
 import { useTheme } from 'styled-components/native'
 
+import { BottomModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
+
+interface BottomModalHeaderProps {
+  title?: StackHeaderProps['options']['title']
+  children?: ReactNode
+}
+
 export const bottomModalHeights = {
   pullTab: {
     container: 20,
     bar: 4
   }
 }
 
-const BottomModalHeader = ({ children }: { children?: ReactNode }) => {
+const BottomModalHeader = ({ children, title }: BottomModalHeaderProps) => {
   const theme = useTheme()
 
   return (
@@ -42,6 +50,11 @@ const BottomModalHeader = ({ children }: { children?: ReactNode }) => {
       >
         <View style={{ width: 35, height: '100%', backgroundColor: theme.font.tertiary, borderRadius: 20 }} />
       </View>
+      {title && (
+        <ScreenSection>
+          <BottomModalScreenTitle>{title}</BottomModalScreenTitle>
+        </ScreenSection>
+      )}
       {children && <View>{children}</View>}
     </View>
   )

src/components/inputs/Select.tsx

@@ -17,7 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ChevronDown } from 'lucide-react-native'
-import { ReactNode, useState } from 'react'
+import { useState } from 'react'
 import styled, { useTheme } from 'styled-components/native'
 
 import AppText from '~/components/AppText'
@@ -28,7 +28,7 @@ import ModalWithBackdrop from '~/components/ModalWithBackdrop'
 
 export type SelectOption<T extends InputValue> = {
   value: T
-  label: ReactNode
+  label: string
 }
 
 export interface SelectProps<T extends InputValue> extends Omit<InputProps<T>, 'value'> {

src/contexts/NewAddressContext.tsx

@@ -0,0 +1,39 @@
+/*
+Copyright 2018 - 2022 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 { createContext, ReactNode, useContext, useState } from 'react'
+
+interface NewAddressContextProps {
+  group?: number
+  setGroup: (group?: number) => void
+}
+
+const initialValues: NewAddressContextProps = {
+  group: undefined,
+  setGroup: () => null
+}
+
+const NewAddressContext = createContext(initialValues)
+
+export const NewAddressContextProvider = ({ children }: { children: ReactNode }) => {
+  const [group, setGroup] = useState<NewAddressContextProps['group']>(initialValues.group)
+
+  return <NewAddressContext.Provider value={{ group, setGroup }}>{children}</NewAddressContext.Provider>
+}
+
+export const useNewAddressContext = () => useContext(NewAddressContext)

src/contexts/ScrollContext.tsx

@@ -22,27 +22,46 @@ import { SharedValue, useSharedValue } from 'react-native-reanimated'
 
 interface ScrollContextProps {
   scrollY?: SharedValue<number>
-  isScrolling?: SharedValue<boolean>
+  scrollDirection?: SharedValue<ScrollDirection>
 }
 
+const scrollDirectionDeltaThreshold = 10
+
+export type ScrollDirection = 'up' | 'down' | undefined
+
 const ScrollContext = createContext<ScrollContextProps>({
-  scrollY: undefined
+  scrollY: undefined,
+  scrollDirection: undefined
 })
 
 export const ScrollContextProvider = ({ children }: { children: ReactNode }) => {
   const scrollY = useSharedValue(0)
+  const scrollDirection = useSharedValue(undefined as ScrollDirection)
 
-  return <ScrollContext.Provider value={{ scrollY }}>{children}</ScrollContext.Provider>
+  return <ScrollContext.Provider value={{ scrollY, scrollDirection }}>{children}</ScrollContext.Provider>
 }
 
 export const useScrollContext = () => useContext(ScrollContext)
 
 export const useScrollEventHandler = () => {
-  const { scrollY } = useScrollContext()
+  const { scrollY, scrollDirection } = useScrollContext()
 
   const scrollHandler = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (!scrollY) return
-    scrollY.value = e.nativeEvent.contentOffset.y
+    if (!scrollY || !scrollDirection) return
+
+    const newScrollY = e.nativeEvent.contentOffset.y
+    const delta = scrollY.value - newScrollY
+    const direction = delta > 0 ? 'up' : 'down'
+
+    if (newScrollY === 0) {
+      scrollDirection.value = undefined
+    } else if (direction === 'up' && delta > scrollDirectionDeltaThreshold) {
+      scrollDirection.value = 'up'
+    } else if (direction === 'down' && delta < -scrollDirectionDeltaThreshold) {
+      scrollDirection.value = 'down'
+    }
+
+    scrollY.value = newScrollY
   }
 
   return scrollHandler

src/hooks/layout/useBottomModalOptions.tsx

@@ -41,7 +41,7 @@ const useBottomModalOptions = (options?: BottomModalOptions): StackNavigationOpt
       borderTopLeftRadius: borderRadius,
       backgroundColor: theme.bg.primary
     },
-    header: () => <BottomModalHeader />
+    header: ({ options }) => <BottomModalHeader title={options.title} />
   }
 }
 

src/navigation/NewAddressNavigation.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2018 - 2022 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 { ParamListBase } from '@react-navigation/native'
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack'
+
+import { NewAddressContextProvider } from '~/contexts/NewAddressContext'
+import useBottomModalOptions from '~/hooks/layout/useBottomModalOptions'
+import RootStackParamList from '~/navigation/rootStackRoutes'
+import GroupSelectScreen from '~/screens/Address/GroupSelectScreen'
+import NewAddressScreen from '~/screens/Address/NewAddressScreen'
+
+export interface NewAddressNavigationParamList extends ParamListBase {
+  NewAddressScreen: undefined
+  GroupSelectScreen: undefined
+}
+
+const NewAddressStack = createStackNavigator<NewAddressNavigationParamList>()
+
+const NewAddressNavigation = (props: StackScreenProps<RootStackParamList, 'NewAddressNavigation'>) => {
+  const bottomModalOptions = useBottomModalOptions()
+
+  return (
+    <NewAddressContextProvider>
+      <NewAddressStack.Navigator initialRouteName={'NewAddressScreen'}>
+        <NewAddressStack.Screen
+          name="NewAddressScreen"
+          component={NewAddressScreen}
+          options={{ headerTitle: 'New address', headerBackTitleVisible: false }}
+        />
+        <NewAddressStack.Screen
+          name="GroupSelectScreen"
+          component={GroupSelectScreen}
+          options={{ ...bottomModalOptions, title: 'Address group' }}
+        />
+      </NewAddressStack.Navigator>
+    </NewAddressContextProvider>
+  )
+}
+
+export default NewAddressNavigation