More fixes :)

src/components/AccountIcon.tsx

@@ -1,19 +1,40 @@
 import React, { memo, useMemo } from 'react'
 import Jazzicon, { IJazziconProps } from 'react-native-jazzicon'
 import { getJazzSeed } from '../utils/accountUtils'
+import { useAccountStorage } from '@storage/AccountStorageProvider'
+import { useAsync } from 'react-async-hook'
+import { ImageBox } from '.'
 
 type Props = { address?: string; size: number } & Omit<
   IJazziconProps,
   'seed' | 'size'
 >
 const AccountIcon = ({ address, ...jazzIconProps }: Props) => {
+  const { getAvatar } = useAccountStorage()
+
+  const { result: avatar } = useAsync(async () => {
+    if (!address) return
+    return getAvatar(address)
+  }, [address])
+
   const seed = useMemo(() => {
     if (!address) return null
     return getJazzSeed(address)
   }, [address])
 
   if (!seed) return null
 
+  if (avatar) {
+    return (
+      <ImageBox
+        width={jazzIconProps.size}
+        height={jazzIconProps.size}
+        borderRadius="full"
+        source={{ uri: avatar }}
+      />
+    )
+  }
+
   return <Jazzicon {...jazzIconProps} seed={seed} />
 }
 export default memo(AccountIcon)

src/components/ButtonPressable.tsx

@@ -33,6 +33,7 @@ type Props = BoxProps<Theme> & {
   style?: ViewStyle
   LeadingComponent?: React.ReactNode
   TrailingComponent?: React.ReactNode
+  iconProps?: SvgProps
 }
 
 const ButtonPressable = ({
@@ -60,6 +61,7 @@ const ButtonPressable = ({
   height = 60,
   LeadingComponent,
   TrailingComponent,
+  iconProps,
   ...boxProps
 }: Props) => {
   const [pressed, setPressed] = useState(false)
@@ -151,7 +153,7 @@ const ButtonPressable = ({
         padding={height || boxProps.maxHeight || padding ? padding : '6'}
         style={backgroundColorStyle}
         flexDirection="row"
-        justifyContent={Icon ? 'space-between' : 'center'}
+        justifyContent={Icon ? 'center' : 'center'}
         alignItems="center"
         {...containerProps}
       >
@@ -168,7 +170,7 @@ const ButtonPressable = ({
             {title}
           </Text>
         )}
-        {Icon && <Icon color={iconColor} />}
+        {Icon && <Icon color={iconColor} {...iconProps} />}
         {TrailingComponent && <Box marginStart="xs">{TrailingComponent}</Box>}
       </Box>
     </ButtonPressAnimation>

src/components/CopyAddress.tsx

@@ -40,21 +40,21 @@ const CopyAddress = ({ address, ...boxProps }: Props) => {
     <TouchableOpacityBox
       {...boxProps}
       flexDirection="row"
-      backgroundColor="green.light-500"
+      backgroundColor="primaryText"
       borderRadius="full"
       alignItems="center"
       padding="4"
       justifyContent="center"
       onPress={copyAddress}
       marginRight="3"
     >
-      <CopyAddressIcon color={colors.secondaryText} />
+      <CopyAddressIcon color={colors.primaryBackground} />
       <Text
         marginLeft="2"
         variant="textMdRegular"
         fontWeight="500"
         fontSize={17}
-        color="primaryText"
+        color="primaryBackground"
       >
         {t('generic.copy')}
       </Text>

src/components/SegmentedControl.tsx

@@ -1,11 +1,22 @@
-import React, { FC, memo, useCallback, useMemo, useState } from 'react'
+import React, {
+  FC,
+  Ref,
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
 import { BoxProps } from '@shopify/restyle'
 import { GestureResponderEvent, LayoutChangeEvent } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 import { useColors } from '@theme/themeHooks'
 import { Theme } from '../theme/theme'
 import { Box, ReAnimatedBox, Text } from '.'
 import TouchableOpacityBox from './TouchableOpacityBox'
+import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { debounce as lodashDebounce } from 'lodash'
 
 type Option = {
   value: string | number
@@ -28,6 +39,7 @@ const SegmentedItem = ({
   fullWidth?: boolean
 }) => {
   const { primaryBackground, ...colors } = useColors()
+  const [hasTouched, setHasTouched] = useState(false)
 
   const onLayout = useCallback(
     (e: LayoutChangeEvent) => {
@@ -36,18 +48,37 @@ const SegmentedItem = ({
     [onSetWidth],
   )
 
+  const initialBackgroundColor = useMemo(
+    () => (selected ? 'primaryText' : 'transparent'),
+    [selected],
+  )
+
+  const backgroundColor = useMemo(() => {
+    if (!hasTouched) return initialBackgroundColor
+
+    return 'transparent'
+  }, [initialBackgroundColor, selected])
+
+  const onPressHandler = useCallback(
+    (event: GestureResponderEvent) => {
+      setHasTouched(true)
+      onSelected && onSelected(event)
+    },
+    [onSelected],
+  )
+
   return (
     <TouchableOpacityBox
       flex={fullWidth ? 1 : undefined}
       paddingVertical="1.5"
       paddingHorizontal="3"
       justifyContent="center"
       alignItems="center"
-      onPress={onSelected}
+      onPress={onPressHandler}
       onLayout={onLayout}
       gap="sm"
       flexDirection="row"
-      backgroundColor={selected ? 'primaryText' : 'transparent'}
+      backgroundColor={backgroundColor}
       borderRadius="full"
     >
       {option.Icon && (
@@ -67,74 +98,98 @@ const SegmentedItem = ({
     </TouchableOpacityBox>
   )
 }
+export type SegmentedControlRef = {
+  selectedIndex: number
+}
 
 type Props = {
   options: Option[]
-  selectedIndex: number
   onItemSelected: (index: number) => void
   fullWidth?: boolean
 } & BoxProps<Theme>
-const SegmentedControl = ({
-  options,
-  onItemSelected,
-  selectedIndex,
-  fullWidth,
-  ...boxProps
-}: Props) => {
-  const [optionWidths, setOptionWidths] = useState(
-    Array(options.length).fill(0),
-  )
 
-  const itemWidth = useMemo(
-    () => optionWidths[selectedIndex],
-    [optionWidths, selectedIndex],
-  )
+const SegmentedControl = forwardRef(
+  (
+    { options, onItemSelected, fullWidth, ...boxProps }: Props,
+    ref: Ref<SegmentedControlRef>,
+  ) => {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const [hasTouched, setHasTouched] = useState(false)
 
-  const handleItemSelected = useCallback(
-    (index: number) => () => {
-      onItemSelected(index)
-    },
-    [onItemSelected],
-  )
+    useImperativeHandle(ref, () => ({ selectedIndex }))
 
-  const leftPosition = useMemo(() => {
-    return optionWidths
-      .slice(0, selectedIndex)
-      .reduce((acc, width) => (selectedIndex === 0 ? 0 : acc + width), 0)
-  }, [optionWidths, selectedIndex])
-
-  const onSetWidth = useCallback(
-    (index: number) => (width: number) => {
-      setOptionWidths((prev) => {
-        const newOptionWidths = [...prev]
-        newOptionWidths[index] = width
-        return newOptionWidths
-      })
-    },
-    [],
-  )
+    const [optionWidths, setOptionWidths] = useState(
+      Array(options.length).fill(0),
+    )
 
-  return (
-    <Box borderRadius="4xl" alignItems="center">
-      <Box
-        borderRadius="4xl"
-        {...boxProps}
-        flexDirection="row"
-        position="relative"
-      >
-        {options.map((option, index) => (
-          <SegmentedItem
-            fullWidth={fullWidth}
-            key={option.value}
-            option={option}
-            selected={index === selectedIndex}
-            onSelected={handleItemSelected(index)}
-            onSetWidth={onSetWidth(index)}
+    const itemWidth = useMemo(
+      () => optionWidths[selectedIndex],
+      [optionWidths, selectedIndex],
+    )
+
+    const handleItemSelected = useCallback(
+      (index: number) => () => {
+        setHasTouched(true)
+        setSelectedIndex(index)
+        onItemSelected(index)
+      },
+      [onItemSelected],
+    )
+
+    const leftPosition = useMemo(() => {
+      return optionWidths
+        .slice(0, selectedIndex)
+        .reduce((acc, width) => (selectedIndex === 0 ? 0 : acc + width), 0)
+    }, [optionWidths, selectedIndex])
+
+    const onSetWidth = useCallback(
+      (index: number) => (width: number) => {
+        setOptionWidths((prev) => {
+          const newOptionWidths = [...prev]
+          newOptionWidths[index] = width
+          return newOptionWidths
+        })
+      },
+      [],
+    )
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        left: withTiming(leftPosition, { duration: 200 }),
+        width: withTiming(itemWidth, { duration: hasTouched ? 200 : 0 }),
+      }
+    }, [leftPosition, itemWidth, hasTouched])
+
+    return (
+      <Box borderRadius="4xl" alignItems="center">
+        <Box
+          borderRadius="4xl"
+          {...boxProps}
+          flexDirection="row"
+          position="relative"
+        >
+          <ReAnimatedBox
+            position="absolute"
+            width={itemWidth}
+            height="100%"
+            backgroundColor="primaryText"
+            style={[animatedStyle]}
+            borderRadius="4xl"
           />
-        ))}
+          {options.map((option, index) => (
+            <SegmentedItem
+              fullWidth={fullWidth}
+              key={option.value}
+              option={option}
+              selected={index === selectedIndex}
+              onSelected={handleItemSelected(index)}
+              onSetWidth={onSetWidth(index)}
+            />
+          ))}
+        </Box>
       </Box>
-    </Box>
-  )
-}
+    )
+  },
+)
 
 export default memo(SegmentedControl)

src/features/account/AccountActionBar.tsx

@@ -113,9 +113,9 @@ const AccountActionBar = ({
         >
           <FabButton
             icon="fatArrowDown"
-            backgroundColor="green.300"
+            backgroundColor="primaryText"
             backgroundColorOpacityPressed={0.4}
-            iconColor="green.700"
+            iconColor="primaryBackground"
             title={compact || maxCompact ? undefined : t('accountView.deposit')}
             onPress={handleAction('request')}
             width={maxCompact ? 47.5 : undefined}
@@ -205,9 +205,9 @@ const AccountActionBar = ({
         >
           <FabButton
             icon="fatArrowUp"
-            backgroundColor="blue.300"
+            backgroundColor="primaryText"
             backgroundColorOpacityPressed={0.4}
-            iconColor="blue.700"
+            iconColor="primaryBackground"
             title={compact || maxCompact ? undefined : t('accountView.send')}
             onPress={handleAction('send')}
             reverse