Empty contacts

src/screens/tabs/Profile/modals/ExportPem/components/AccountShowcase/index.tsx → src/components/common/AccountShowcase/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 
-import { CustomCheckbox, Text, Touchable, UserIcon } from '@/components/common';
+import { Text, Touchable, UserIcon } from '@/components/common';
 import { FontStyles } from '@/constants/theme';
 
 import styles from './styles';
@@ -11,6 +11,9 @@ interface Props {
   subtitle?: string;
   icon?: string;
   selected: boolean;
+  right: React.ReactNode;
+  titleStyle?: StyleProp<TextStyle>;
+  titleRight?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   onPress?: () => void;
   onLongPress?: () => void;
@@ -22,6 +25,9 @@ function AccountShowcase({
   subtitle,
   style,
   selected,
+  right,
+  titleStyle,
+  titleRight,
   onPress,
   onLongPress,
 }: Props) {
@@ -31,12 +37,13 @@ function AccountShowcase({
         <View style={[styles.root, selected && styles.selectedRoot]}>
           <UserIcon icon={icon} />
           <View style={styles.leftContainer}>
-            <Text style={FontStyles.Normal}>{title}</Text>
+            <View style={styles.titleContainer}>
+              <Text style={[FontStyles.Normal, titleStyle]}>{title}</Text>
+              {titleRight}
+            </View>
             <Text style={FontStyles.NormalGray}>{subtitle}</Text>
           </View>
-          <View style={styles.rightContainer}>
-            <CustomCheckbox circle selected={selected} onPress={onPress} />
-          </View>
+          <View style={styles.rightContainer}>{right}</View>
         </View>
       </Touchable>
     </View>

src/screens/tabs/Profile/modals/ExportPem/components/AccountShowcase/styles.ts → src/components/common/AccountShowcase/styles.ts

@@ -23,4 +23,8 @@ export default StyleSheet.create({
     alignItems: 'flex-end',
     marginRight: 8,
   },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });

src/components/common/EmptyState/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import RainbowButton from '@/components/buttons/RainbowButton';
+
+import Text from '../Text';
+import styles from './styles';
+
+interface Props {
+  title: string;
+  text: string;
+  emoji?: string;
+  style?: StyleProp<ViewStyle>;
+  buttonTitle?: string;
+  buttonStyle?: StyleProp<ViewStyle>;
+  onTextPress?: () => void;
+  onButtonPress?: () => void;
+}
+
+function EmptyState({
+  title,
+  text,
+  style,
+  emoji = '🤔',
+  buttonTitle,
+  buttonStyle,
+  onTextPress,
+  onButtonPress,
+}: Props) {
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.emoji}>{emoji}</Text>
+      <Text type="body2" style={styles.title}>
+        {title}
+      </Text>
+      <Text
+        type="caption"
+        style={[styles.text, onTextPress && styles.link]}
+        onPress={onTextPress}>
+        {text}
+      </Text>
+      {onButtonPress && buttonTitle && (
+        <RainbowButton
+          text={buttonTitle}
+          onPress={onButtonPress}
+          buttonStyle={buttonStyle}
+        />
+      )}
+    </View>
+  );
+}
+
+export default EmptyState;

src/components/common/EmptyState/styles.js → src/components/common/EmptyState/styles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import { Colors } from '@/constants/theme';
+import { fontMaker } from '@/utils/fonts';
 
 export default StyleSheet.create({
   container: {
@@ -9,17 +10,17 @@ export default StyleSheet.create({
     justifyContent: 'center',
   },
   title: {
-    color: Colors.White.Primary,
+    ...fontMaker({ color: Colors.White.Primary }),
     marginTop: 11,
     marginBottom: 8,
   },
   text: {
-    color: Colors.White.Secondary,
+    ...fontMaker({ color: Colors.White.Secondary }),
     textAlign: 'center',
     paddingHorizontal: 40,
   },
   link: {
-    color: Colors.ActionBlue,
+    ...fontMaker({ color: Colors.ActionBlue }),
   },
   emoji: {
     fontSize: 38,

src/components/common/index.ts

@@ -28,3 +28,4 @@ export { default as Touchable } from './Touchable';
 export { default as UserIcon } from './UserIcon';
 export { default as CustomCheckbox } from './CustomCheckbox';
 export { default as Toast } from './Toast';
+export { default as AccountShowcase } from './AccountShowcase';

src/redux/slices/user.ts

@@ -465,7 +465,6 @@ export const getCollectionInfo = createAsyncThunk(
   }
 );
 
-// eslint-disable-next-line no-spaced-func
 export const addCustomCollection = createAsyncThunk<
   Collection[],
   {

src/screens/tabs/Profile/modals/Accounts/index.tsx

@@ -5,14 +5,15 @@ import { ActivityIndicator, Alert, Platform, View } from 'react-native';
 import { Modalize } from 'react-native-modalize';
 
 import {
+  AccountShowcase,
   ActionSheet,
-  CommonItem,
   Header,
   Modal,
   Text,
   Touchable,
 } from '@/components/common';
 import Icon from '@/components/icons';
+import { COMMON_HITSLOP } from '@/constants/general';
 import { FontStyles } from '@/constants/theme';
 import CopyIcon from '@/icons/material/Copy.svg';
 import EditIcon from '@/icons/material/Edit.svg';
@@ -25,6 +26,7 @@ import { Row } from '@/layout';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { getICPPrice } from '@/redux/slices/icp';
 import { removeAccount, setCurrentPrincipal } from '@/redux/slices/keyring';
+import animationScales from '@/utils/animationScales';
 import shortAddress from '@/utils/shortAddress';
 
 import CreateEditAccount from '../CreateEditAccount';
@@ -106,7 +108,7 @@ function Accounts({ modalRef }: Props) {
     addICNSRef.current?.open();
   };
 
-  const onLongPress = (account: Wallet) => {
+  const openAccountOptions = (account: Wallet) => {
     const isSelectedAccount = currentWallet?.principal === account.principal;
     const isImportedAccount = !account.type.includes('MNEMONIC');
 
@@ -159,9 +161,12 @@ function Accounts({ modalRef }: Props) {
 
   const renderAccountItem = (account: Wallet, index: number) => {
     const isSelectedAccount = currentWallet?.principal === account.principal;
+    const handleOpenAccountOptions = () => openAccountOptions(account);
+
     const selectedAccountProps = {
-      nameStyle: styles.selectedAccount,
-      right: <CheckedBlueCircle viewBox="-2 -2 16 16" />,
+      selected: true,
+      titleStyle: styles.selectedAccount,
+      titleRight: <CheckedBlueCircle style={styles.checkbox} />,
     };
 
     const handleOnPress = () => {
@@ -171,15 +176,24 @@ function Accounts({ modalRef }: Props) {
     };
 
     return (
-      <CommonItem
+      <AccountShowcase
         key={index}
-        name={account?.icnsData?.reverseResolvedName || account.name}
         icon={account.icon}
-        id={account.principal}
         onPress={handleOnPress}
-        style={styles.accountItem}
-        onLongPress={() => onLongPress(account)}
-        onActionPress={() => onLongPress(account)}
+        selected={isSelectedAccount}
+        onLongPress={handleOpenAccountOptions}
+        subtitle={shortAddress(account.principal)}
+        title={account?.icnsData?.reverseResolvedName || account.name}
+        right={
+          <View style={styles.threeDots}>
+            <Touchable
+              onPress={handleOpenAccountOptions}
+              scale={animationScales.large}
+              hitSlop={COMMON_HITSLOP}>
+              <Icon name="threeDots" />
+            </Touchable>
+          </View>
+        }
         {...(isSelectedAccount && selectedAccountProps)}
       />
     );

src/screens/tabs/Profile/modals/Accounts/styles.ts

@@ -4,8 +4,9 @@ import { Colors } from '@/constants/theme';
 
 export default StyleSheet.create({
   content: {
-    paddingHorizontal: 20,
-    paddingVertical: 20,
+    paddingHorizontal: 12,
+    paddingBottom: 20,
+    paddingTop: 10,
     zIndex: 0,
   },
   loading: {
@@ -17,16 +18,24 @@ export default StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
   },
   row: {
-    marginBottom: 30,
-    marginTop: 10,
+    marginBottom: 20,
+    marginLeft: 10,
+    marginTop: 20,
   },
   accountItem: {
-    marginBottom: 20,
+    marginBottom: 8,
   },
   plusIcon: {
     marginRight: 8,
   },
   selectedAccount: {
     color: Colors.ActionBlue,
   },
+  threeDots: {
+    marginLeft: 'auto',
+    justifyContent: 'center',
+  },
+  checkbox: {
+    marginLeft: 6,
+  },
 });

src/screens/tabs/Profile/modals/ExportPem/index.tsx

@@ -7,6 +7,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import RainbowButton from '@/components/buttons/RainbowButton';
 import {
+  AccountShowcase,
   ActionButton,
   CustomCheckbox,
   Header,
@@ -21,7 +22,6 @@ import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { getPemFile, validatePassword } from '@/redux/slices/keyring';
 import shortAddress from '@/utils/shortAddress';
 
-import AccountShowcase from './components/AccountShowcase';
 import styles from './styles';
 
 interface Props {
@@ -113,13 +113,23 @@ function ExportPem({ modalRef }: Props) {
 
   const renderAccount = (account: Wallet) => {
     const { name, walletId, icon, principal } = account;
+    const selected = selectedWallet.walletId === walletId;
+    const handleSetAccount = () => setSelectedWallet(account);
+
     return (
       <AccountShowcase
         icon={icon}
         key={walletId}
+        right={
+          <CustomCheckbox
+            circle
+            selected={selected}
+            onPress={handleSetAccount}
+          />
+        }
         subtitle={shortAddress(principal)}
-        selected={selectedWallet.walletId === walletId}
-        onPress={() => setSelectedWallet(account)}
+        selected={selected}
+        onPress={handleSetAccount}
         title={account?.icnsData?.reverseResolvedName || name}
       />
     );