UI redesign part 4

apps/mobile-wallet/src/components/AddressesTokensList.tsx

@@ -105,8 +105,7 @@ const AddressesTokensList = ({ addressHash, isRefreshing, style }: AddressesToke
 }
 
 export default styled(AddressesTokensList)`
-  padding-top: 5px;
-  padding-bottom: 10px;
+  padding: 10px 0;
 `
 
 const LoadingRow = styled.View`

apps/mobile-wallet/src/components/NFTsGrid.tsx

@@ -62,6 +62,7 @@ const NFTsGrid = forwardRef(
         {...props}
         data={data}
         ref={ref}
+        overScrollMode="auto"
         keyExtractor={(item) => item.id}
         renderItem={({ item: nft }) => (
           <NFTThumbnailContainer key={nft.id}>
@@ -70,7 +71,7 @@ const NFTsGrid = forwardRef(
         )}
         contentContainerStyle={{ paddingHorizontal: containerHorizontalPadding, paddingBottom: 70 }}
         numColumns={columns}
-        estimatedItemSize={64}
+        estimatedItemSize={props.estimatedItemSize || 64}
         scrollEnabled={scrollEnabled}
         ListEmptyComponent={
           <NoNFTsMessage>

apps/mobile-wallet/src/components/RoundedCard.tsx

@@ -0,0 +1,37 @@
+/*
+Copyright 2018 - 2024 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 { ReactNode } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import styled from 'styled-components/native'
+
+interface RoundedCardProps {
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+const RoundedCard = ({ children, style }: RoundedCardProps) => (
+  <RoundedCardContainer style={style}>{children}</RoundedCardContainer>
+)
+
+export default RoundedCard
+
+const RoundedCardContainer = styled.View`
+  border-radius: 38px;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.bg.primary};
+`

apps/mobile-wallet/src/components/footers/FooterMenu.tsx

@@ -17,10 +17,10 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
-import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
 import { colord } from 'colord'
+import { LinearGradient } from 'expo-linear-gradient'
 import { useState } from 'react'
-import { LayoutChangeEvent, StyleProp, useWindowDimensions, View, ViewStyle } from 'react-native'
+import { LayoutChangeEvent, Platform, StyleProp, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import styled, { css, useTheme } from 'styled-components/native'
 
@@ -30,13 +30,14 @@ interface FooterMenuProps extends BottomTabBarProps {
   style?: StyleProp<ViewStyle>
 }
 
+const isIos = Platform.OS === 'ios'
+
 const FooterMenu = ({ state, descriptors, navigation, style }: FooterMenuProps) => {
   const insets = useSafeAreaInsets()
-  const { width: screenWidth } = useWindowDimensions()
   const theme = useTheme()
   const [footerHeight, setFooterHeight] = useState(120)
 
-  const gradientHeight = footerHeight + 30
+  const gradientHeight = footerHeight + 50
 
   const footerContent = (
     <>
@@ -54,25 +55,25 @@ const FooterMenu = ({ state, descriptors, navigation, style }: FooterMenuProps)
   )
 
   const handleFooterLayout = (e: LayoutChangeEvent) => {
-    setFooterHeight(e.nativeEvent.layout.height + insets.bottom)
+    setFooterHeight(e.nativeEvent.layout.height)
   }
 
   return (
     <View style={style} onLayout={handleFooterLayout}>
-      <FooterGradientCanvas pointerEvents="none" height={gradientHeight}>
-        <Rect x={0} y={0} width={screenWidth} height={gradientHeight}>
-          <LinearGradient
-            start={vec(0, gradientHeight / 1.9)}
-            end={vec(0, 0)}
-            colors={
-              theme.name === 'dark'
-                ? [theme.bg.back2, colord(theme.bg.back2).alpha(0).toHex()]
-                : [theme.bg.highlight, colord(theme.bg.highlight).alpha(0).toHex()]
-            }
-          />
-        </Rect>
-      </FooterGradientCanvas>
-      <FooterMenuContent style={{ paddingBottom: insets.bottom }}>{footerContent}</FooterMenuContent>
+      <FooterGradient
+        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()]
+        }
+        style={{ height: gradientHeight }}
+      />
+      <FooterMenuContent style={{ paddingBottom: isIos ? insets.bottom : insets.bottom + 18 }}>
+        {footerContent}
+      </FooterMenuContent>
     </View>
   )
 }
@@ -97,10 +98,10 @@ const FooterMenuContent = styled.View`
   ${footerMenuStyles}
 `
 
-const FooterGradientCanvas = styled(Canvas)<{ height: number }>`
+// Bottom value is to avoid glitch on Android
+const FooterGradient = styled(LinearGradient)`
   position: absolute;
-  bottom: 0;
+  bottom: -1px;
   left: 0;
   right: 0;
-  height: ${({ height }) => height}px;
 `

apps/mobile-wallet/src/components/headers/BaseHeader.tsx

@@ -17,8 +17,8 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { StackHeaderProps } from '@react-navigation/stack'
-import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
 import { colord } from 'colord'
+import { LinearGradient } from 'expo-linear-gradient'
 import { ReactNode, RefObject, useState } from 'react'
 import { LayoutChangeEvent, Platform, useWindowDimensions, View, ViewProps } from 'react-native'
 import Animated, {
@@ -50,6 +50,8 @@ export interface BaseHeaderProps extends ViewProps {
 
 const isIos = Platform.OS === 'ios'
 
+const AnimatedHeaderGradient = Animated.createAnimatedComponent(LinearGradient)
+
 const BaseHeader = ({
   options: { headerRight, headerLeft, headerTitle, headerTitleRight },
   headerRef,
@@ -64,9 +66,9 @@ const BaseHeader = ({
   const { width: screenWidth } = useWindowDimensions()
   const [headerHeight, setHeaderHeight] = useState(80)
 
-  const gradientHeight = headerHeight + 30
+  const gradientHeight = headerHeight + 42
   const defaultScrollRange = [0 + scrollEffectOffset, 80 + scrollEffectOffset]
-  const paddingTop = isIos ? insets.top : insets.top + 7
+  const paddingTop = isIos ? insets.top : insets.top + 18
 
   const HeaderRight = (headerRight && headerRight({})) || <HeaderSidePlaceholder />
   const HeaderLeft = (headerLeft && headerLeft({})) || <HeaderSidePlaceholder />
@@ -97,19 +99,18 @@ const BaseHeader = ({
   return (
     <BaseHeaderStyled ref={headerRef} onLayout={handleHeaderLayout} {...props}>
       <View pointerEvents="none">
-        <HeaderGradientCanvas height={gradientHeight} pointerEvents="none">
-          <Rect x={0} y={0} width={screenWidth} height={gradientHeight} opacity={animatedOpacity}>
-            <LinearGradient
-              start={vec(0, gradientHeight / 1.5)}
-              end={vec(0, gradientHeight)}
-              colors={
-                theme.name === 'dark'
-                  ? [theme.bg.back2, colord(theme.bg.back2).alpha(0).toHex()]
-                  : [theme.bg.highlight, colord(theme.bg.highlight).alpha(0).toHex()]
-              }
-            />
-          </Rect>
-        </HeaderGradientCanvas>
+        <HeaderGradient
+          pointerEvents="none"
+          style={{ opacity: animatedOpacity, width: screenWidth, height: gradientHeight }}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          locations={[0.6, 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()]
+          }
+        />
       </View>
       <HeaderContainer>
         <Header style={{ paddingTop }}>
@@ -147,12 +148,11 @@ const BaseHeaderStyled = styled(Animated.View)`
   position: absolute;
 `
 
-const HeaderGradientCanvas = styled(Canvas)<{ height: number }>`
+const HeaderGradient = styled(AnimatedHeaderGradient)`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: ${({ height }) => height}px;
 `
 
 const HeaderContainer = styled(Animated.View)`

apps/mobile-wallet/src/components/inputs/Input.tsx

@@ -16,7 +16,11 @@ 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 { getStringAsync } from 'expo-clipboard'
+import { LinearGradient } from 'expo-linear-gradient'
 import { ReactNode, RefObject, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   NativeSyntheticEvent,
   StyleProp,
@@ -31,6 +35,7 @@ import styled, { css, useTheme } from 'styled-components/native'
 
 import { fastSpringConfiguration } from '~/animations/reanimated/reanimatedAnimations'
 import AppText from '~/components/AppText'
+import Button from '~/components/buttons/Button'
 import Row from '~/components/Row'
 import { BORDER_RADIUS } from '~/style/globalStyle'
 
@@ -44,6 +49,7 @@ export interface InputProps<T extends InputValue> extends Omit<TextInputProps, '
   resetDisabledColor?: boolean
   RightContent?: ReactNode
   renderValue?: RenderValueFunc<T>
+  showPasteButton?: boolean
   error?: string
   style?: StyleProp<ViewStyle>
   layout?: AnimatedProps<ViewProps>['layout']
@@ -60,13 +66,16 @@ const Input = <T extends InputValue>({
   resetDisabledColor,
   RightContent,
   renderValue,
+  showPasteButton,
   error,
   layout,
   inputRef,
   ...props
 }: InputProps<T>) => {
+  const { t } = useTranslation()
   const theme = useTheme()
   const [isActive, setIsActive] = useState(false)
+  const [copiedText, setCopiedText] = useState('')
   const localInputRef = useRef<TextInput>(null)
   const usedInputRef = inputRef || localInputRef
 
@@ -81,6 +90,15 @@ const Input = <T extends InputValue>({
     fontSize: withSpring(!isActive ? 15 : 11, fastSpringConfiguration)
   }))
 
+  useEffect(() => {
+    const fetchCopiedText = async () => {
+      const text = await getStringAsync()
+      setCopiedText(text)
+    }
+
+    fetchCopiedText()
+  })
+
   useEffect(() => {
     if (renderedValue) {
       setIsActive(true)
@@ -97,6 +115,10 @@ const Input = <T extends InputValue>({
     onBlur && onBlur(e)
   }
 
+  const handlePasteButtonPress = () => {
+    usedInputRef.current?.setNativeProps({ text: copiedText })
+  }
+
   return (
     <Row
       onPress={onPress}
@@ -129,6 +151,19 @@ const Input = <T extends InputValue>({
           hide={showCustomValueRendering}
           {...props}
         />
+        {copiedText && showPasteButton && (
+          <PasteButtonContainer>
+            <PasteButtonContainerBackground
+              colors={[colord(theme.bg.highlight).alpha(0.1).toHex(), theme.bg.highlight]}
+              start={{ x: 0, y: 0.5 }}
+              end={{ x: 1, y: 0.5 }}
+              locations={[0, 0.2]}
+            />
+            <Button compact onPress={handlePasteButtonPress}>
+              <AppText>{t('Paste')}</AppText>
+            </Button>
+          </PasteButtonContainer>
+        )}
       </InputContainer>
       {RightContent}
       {error && (
@@ -205,3 +240,20 @@ const Error = styled(AppText)`
 
   font-size: 11px;
 `
+
+const PasteButtonContainer = styled.View`
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+`
+
+const PasteButtonContainerBackground = styled(LinearGradient)`
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+`