CP-5410 Update Fab design (#687)

app/components/AvaButton.tsx

@@ -257,6 +257,7 @@ const BtnSecondaryMedium: FC<BaseProps> = ({
 const BtnTextLarge: FC<BaseProps> = ({
   onPress,
   disabled,
+  textColor,
   children,
   style
 }) => {
@@ -268,7 +269,11 @@ const BtnTextLarge: FC<BaseProps> = ({
       disabled={disabled}>
       <AvaText.ButtonLarge
         textStyle={{
-          color: disabled ? theme.colorDisabled : theme.colorPrimary1
+          color: disabled
+            ? theme.colorDisabled
+            : textColor
+            ? textColor
+            : theme.colorPrimary1
         }}
         testID="btnTextLarge">
         {children}

app/components/fab/ActionItems.tsx

@@ -0,0 +1,62 @@
+import { useApplicationContext } from 'contexts/ApplicationContext'
+import { assertNotUndefined } from 'utils/assertions'
+import React from 'react'
+import { ActionProp } from 'components/fab/types'
+import AvaButton from 'components/AvaButton'
+import { Row } from 'components/Row'
+import { View } from 'react-native'
+
+const ActionItems = ({
+  items,
+  resetOnItemPress,
+  reset
+}: {
+  items: Record<string, ActionProp>
+  resetOnItemPress: boolean
+  reset: () => void
+}) => {
+  const { theme } = useApplicationContext()
+
+  const renderItems = () => {
+    const rItems = [] as Element[]
+    Object.keys(items).forEach(key => {
+      const value = items[key]
+      try {
+        assertNotUndefined(value)
+      } catch (e) {
+        return
+      }
+      rItems.push(
+        <Row key={key} style={{ marginBottom: 8, alignItems: 'center' }}>
+          {value.image}
+          <AvaButton.TextLarge
+            textColor={theme.colorBg1}
+            onPress={() => {
+              if (resetOnItemPress) {
+                reset()
+              }
+              value.onPress()
+            }}>
+            {key}
+          </AvaButton.TextLarge>
+        </Row>
+      )
+    })
+    return rItems
+  }
+
+  return (
+    <View
+      style={{
+        backgroundColor: theme.white,
+        paddingHorizontal: 16,
+        paddingTop: 8,
+        borderRadius: 8,
+        marginBottom: 8
+      }}>
+      {renderItems()}
+    </View>
+  )
+}
+
+export default ActionItems

app/components/FloatingActionButton.tsx → app/components/fab/FloatingActionButton.tsx

@@ -4,26 +4,12 @@ import Animated, {
   useSharedValue,
   withSpring
 } from 'react-native-reanimated'
-import React, { Dispatch, useCallback, useEffect, useMemo } from 'react'
-import { Pressable, StyleSheet, View, ViewStyle } from 'react-native'
-import { assertNotUndefined } from 'utils/assertions'
-import CircularButton from 'components/CircularButton'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { Pressable, StyleSheet, ViewStyle } from 'react-native'
 import { useApplicationContext } from 'contexts/ApplicationContext'
 import { usePostCapture } from 'hooks/usePosthogCapture'
-
-export type ActionProp = {
-  image: React.ReactNode
-  onPress: () => void
-}
-
-interface FABProps {
-  actionItems: Record<string, ActionProp>
-  icon: React.ReactNode
-  size?: number
-  resetOnItemPress?: boolean
-  expanded: boolean
-  setExpanded: Dispatch<boolean>
-}
+import { FABProps } from 'components/fab/types'
+import ActionItems from 'components/fab/ActionItems'
 
 const springConfig = { damping: 11.5, stiffness: 95 }
 
@@ -33,7 +19,8 @@ const FloatingActionButton = ({
   icon,
   size = 48,
   setExpanded,
-  resetOnItemPress = true
+  resetOnItemPress = true,
+  isLeftHanded
 }: FABProps) => {
   const progress = useSharedValue(0)
   const { theme } = useApplicationContext()
@@ -85,13 +72,13 @@ const FloatingActionButton = ({
 
   const wrapperStyle = useMemo(() => {
     return {
-      alignItems: 'center',
-      width: 100,
-      backgroundColor: expanded ? theme.colorBg2 : undefined,
+      marginEnd: isLeftHanded ? undefined : 16,
+      marginStart: isLeftHanded ? 16 : undefined,
+      alignItems: isLeftHanded ? 'flex-start' : 'flex-end',
       paddingVertical: 24,
       borderRadius: 70
     } as ViewStyle
-  }, [expanded, theme.colorBg2])
+  }, [isLeftHanded])
 
   const iconStyle = useMemo(() => {
     return [
@@ -126,42 +113,6 @@ const FloatingActionButton = ({
   )
 }
 
-const ActionItems = ({
-  items,
-  resetOnItemPress,
-  reset
-}: {
-  items: Record<string, ActionProp>
-  resetOnItemPress: boolean
-  reset: () => void
-}) => {
-  const { theme } = useApplicationContext()
-
-  return (
-    <>
-      {Object.keys(items).map(key => {
-        const value = items[key]
-        assertNotUndefined(value)
-        return (
-          <View key={key} style={{ marginBottom: 10 }}>
-            <CircularButton
-              style={{ backgroundColor: theme.white }}
-              image={value.image}
-              caption={key}
-              onPress={() => {
-                if (resetOnItemPress) {
-                  reset()
-                }
-                value.onPress()
-              }}
-            />
-          </View>
-        )
-      })}
-    </>
-  )
-}
-
 const styles = StyleSheet.create({
   actionContainer: {
     flexDirection: 'column',

app/components/fab/types.ts

@@ -0,0 +1,16 @@
+import React, { Dispatch } from 'react'
+
+export type ActionProp = {
+  image: React.ReactNode
+  onPress: () => void
+}
+
+export interface FABProps {
+  actionItems: Record<string, ActionProp>
+  icon: React.ReactNode
+  size?: number
+  resetOnItemPress?: boolean
+  expanded: boolean
+  setExpanded: Dispatch<boolean>
+  isLeftHanded: boolean
+}

app/navigation/wallet/DrawerScreenStack.tsx

@@ -8,9 +8,7 @@ import React, { FC, useMemo, useState } from 'react'
 import { createDrawerNavigator } from '@react-navigation/drawer'
 import { UI, useIsUIDisabled } from 'hooks/useIsUIDisabled'
 import { useApplicationContext } from 'contexts/ApplicationContext'
-import FloatingActionButton, {
-  ActionProp
-} from 'components/FloatingActionButton'
+import FloatingActionButton from 'components/fab/FloatingActionButton'
 import { useDeeplink } from 'contexts/DeeplinkContext/DeeplinkContext'
 import { Pressable, View, ViewStyle } from 'react-native'
 import ArrowSVG from 'components/svg/ArrowSVG'
@@ -28,6 +26,8 @@ import { selectActiveNetwork } from 'store/network'
 import BridgeSVG from 'components/svg/BridgeSVG'
 import { Opacity50 } from 'resources/Constants'
 import { usePostCapture } from 'hooks/usePosthogCapture'
+import { selectIsLeftHanded } from 'store/settings/advanced'
+import { ActionProp } from 'components/fab/types'
 
 export type DrawerParamList = {
   [AppNavigation.Wallet.Tabs]: NavigatorScreenParams<TabNavigatorParamList>
@@ -76,42 +76,42 @@ const Fab: FC = () => {
   const activeNetwork = useSelector(selectActiveNetwork)
   const [expanded, setExpanded] = useState(false)
   const { capture } = usePostCapture()
+  const isLeftHanded = useSelector(selectIsLeftHanded)
 
   const actionItems = useMemo(() => {
     const actions: Record<string, ActionProp> = {}
 
-    actions.Bridge = {
-      image: <BridgeSVG color={theme.background} size={24} />,
+    actions.Send = {
+      image: (
+        <View
+          testID="tab_navigator__send_button"
+          style={{
+            width: 24,
+            height: 24,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}>
+          <ArrowSVG rotate={180} color={theme.background} size={17} />
+        </View>
+      ),
       onPress: () => {
-        if (isBridgeDisabled) {
-          showSnackBarCustom({
-            component: (
-              <GeneralToast
-                message={`Bridge not available on ${activeNetwork.chainName}`}
-              />
-            ),
-            duration: 'short'
-          })
-        } else {
-          navigation.navigate(AppNavigation.Wallet.Bridge)
-          capture('FABItemSelected_Bridge')
-        }
+        navigation.navigate(AppNavigation.Wallet.SendTokens)
+        capture('FABItemSelected_Send')
       }
     } as ActionProp
-    if (!wcDisabled) {
-      actions.WalletConnect = {
-        image: <WalletConnectSVG color={theme.background} size={24} />,
+    actions.Receive = {
+      image: <QRCodeSVG color={theme.background} size={24} />,
+      onPress: () => {
+        navigation.navigate(AppNavigation.Wallet.ReceiveTokens)
+        capture('FABItemSelected_Receive')
+      }
+    } as ActionProp
+    if (!buyDisabled) {
+      actions.Buy = {
+        image: <BuySVG color={theme.background} size={24} />,
         onPress: () => {
-          navigation.navigate(AppNavigation.Wallet.QRCode, {
-            onScanned: uri => {
-              setPendingDeepLink({
-                url: uri,
-                origin: DeepLinkOrigin.ORIGIN_QR_CODE
-              })
-              navigation.goBack()
-            }
-          })
-          capture('FABItemSelected_WalletConnect')
+          navigation.navigate(AppNavigation.Wallet.Buy)
+          capture('FABItemSelected_Buy')
         }
       } as ActionProp
     }
@@ -124,39 +124,39 @@ const Fab: FC = () => {
         }
       } as ActionProp
     }
-    if (!buyDisabled) {
-      actions.Buy = {
-        image: <BuySVG color={theme.background} size={24} />,
+    if (!wcDisabled) {
+      actions.WalletConnect = {
+        image: <WalletConnectSVG color={theme.background} size={24} />,
         onPress: () => {
-          navigation.navigate(AppNavigation.Wallet.Buy)
-          capture('FABItemSelected_Buy')
+          navigation.navigate(AppNavigation.Wallet.QRCode, {
+            onScanned: uri => {
+              setPendingDeepLink({
+                url: uri,
+                origin: DeepLinkOrigin.ORIGIN_QR_CODE
+              })
+              navigation.goBack()
+            }
+          })
+          capture('FABItemSelected_WalletConnect')
         }
       } as ActionProp
     }
-    actions.Receive = {
-      image: <QRCodeSVG color={theme.background} size={24} />,
-      onPress: () => {
-        navigation.navigate(AppNavigation.Wallet.ReceiveTokens)
-        capture('FABItemSelected_Receive')
-      }
-    } as ActionProp
-
-    actions.Send = {
-      image: (
-        <View
-          testID="tab_navigator__send_button"
-          style={{
-            width: 24,
-            height: 24,
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}>
-          <ArrowSVG rotate={180} color={theme.background} size={17} />
-        </View>
-      ),
+    actions.Bridge = {
+      image: <BridgeSVG color={theme.background} size={24} />,
       onPress: () => {
-        navigation.navigate(AppNavigation.Wallet.SendTokens)
-        capture('FABItemSelected_Send')
+        if (isBridgeDisabled) {
+          showSnackBarCustom({
+            component: (
+              <GeneralToast
+                message={`Bridge not available on ${activeNetwork.chainName}`}
+              />
+            ),
+            duration: 'short'
+          })
+        } else {
+          navigation.navigate(AppNavigation.Wallet.Bridge)
+          capture('FABItemSelected_Bridge')
+        }
       }
     } as ActionProp
 
@@ -184,18 +184,19 @@ const Fab: FC = () => {
       width: '100%',
       height: '100%',
       justifyContent: 'flex-end',
-      alignItems: 'flex-end',
+      alignItems: isLeftHanded ? 'flex-start' : 'flex-end',
       paddingBottom: 60,
       backgroundColor: expanded ? theme.colorBg1 + Opacity50 : theme.transparent
     } as ViewStyle
-  }, [expanded, theme.colorBg1, theme.transparent])
+  }, [expanded, isLeftHanded, theme.colorBg1, theme.transparent])
 
   return (
     <Pressable
       pointerEvents={expanded ? 'auto' : 'box-none'}
       onPress={dismiss}
       style={fabStyle}>
       <FloatingActionButton
+        isLeftHanded={isLeftHanded}
         setExpanded={setExpanded}
         expanded={expanded}
         actionItems={actionItems}