fix: long wallet names

src/components/settings-account-edit.tsx

@@ -50,6 +50,7 @@ export const SettingsAccountEdit = ({
       />
       <KeyboardSafeArea style={page.container}>
         <Input
+          multiline
           onChangeText={onChange}
           i18nLabel={I18N.name}
           value={inputName}

src/components/settings/settings-account-detail/settings-account-detail.tsx

@@ -102,7 +102,11 @@ export const SettingsAccountDetail = observer(
                 onCopy(wallet?.address);
               }}>
               <View style={[styles.row, styles.alignItemsCenter]}>
-                <Text variant={TextVariant.t10} style={styles.headerName}>
+                <Text
+                  variant={TextVariant.t10}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={styles.headerName}>
                   {wallet.name}
                 </Text>
                 <Text
@@ -238,6 +242,7 @@ const styles = createTheme({
   },
   row: {
     flexDirection: 'row',
+    marginBottom: 4,
   },
   button: {
     flex: 1,
@@ -256,7 +261,7 @@ const styles = createTheme({
     marginBottom: 20,
   },
   headerName: {
-    marginBottom: 4,
+    flex: 1,
   },
   cardMask: {
     margin: 4,

src/components/token-viewer/token-viewer.tsx

@@ -28,6 +28,7 @@ export interface TokenViewerProps {
   wallet?: WalletModel;
   hideFilter?: boolean;
   onPressToken?: (wallet: WalletModel, token: IToken) => void;
+  onPressWallet?: (wallet: WalletModel) => void;
 }
 
 const SortingNamesMap = {
@@ -44,6 +45,7 @@ export const TokenViewer = observer(
     wallet,
     hideFilter = false,
     onPressToken,
+    onPressWallet,
   }: TokenViewerProps) => {
     const data = useMemo(() => computed(() => _data), [_data]).get();
     const wallets = useMemo(
@@ -189,6 +191,7 @@ export const TokenViewer = observer(
               tokensOnly={!!wallet}
               isLast={index === list.length - 1}
               onPressToken={onPressToken}
+              onPressWallet={onPressWallet}
             />
           );
         })}

src/components/total-value-info/total-value-info.tsx

@@ -39,6 +39,7 @@ export type TotalValueInfoProps = {
   onPressTxRow: (tx: Transaction) => void;
   onPressInfo: () => void;
   onPressToken?: (wallet: IWalletModel, token: IToken) => void;
+  onPressWallet?: (wallet: IWalletModel) => void;
 };
 
 export const TotalValueInfo = observer(
@@ -50,6 +51,7 @@ export const TotalValueInfo = observer(
     onPressTxRow,
     onPressInfo,
     onPressToken,
+    onPressWallet,
   }: TotalValueInfoProps) => {
     const showNft = useShowNft();
 
@@ -140,6 +142,7 @@ export const TotalValueInfo = observer(
                 data={tokens}
                 style={styles.nftViewerContainer}
                 onPressToken={onPressToken}
+                onPressWallet={onPressWallet}
               />
             </>
           )}

src/components/ui/data-content.tsx

@@ -46,6 +46,7 @@ export const DataContent = ({
         reversed && styles.reverse,
         short && styles.short,
         style,
+        styles.flexOne,
       ]}>
       <View style={styles.titleContainer}>
         <Text
@@ -91,6 +92,9 @@ const styles = createTheme({
     minHeight: 22,
     flexDirection: 'row',
   },
+  flexOne: {
+    flex: 1,
+  },
   reverse: {flexDirection: 'column-reverse'},
   boldTitle: {fontSize: 16, fontWeight: 'bold', marginBottom: 2},
 });

src/components/ui/walletCard.tsx

@@ -84,6 +84,10 @@ export const WalletCard = observer(
           <DataContent
             style={styles.info}
             title={available.toEtherString()}
+            subtitleProps={{
+              numberOfLines: 1,
+              ellipsizeMode: 'tail',
+            }}
             subtitle={wallet.name}
             bold
           />

src/components/wallet-card/card-name.tsx

@@ -4,7 +4,14 @@ import {observer} from 'mobx-react';
 import {View} from 'react-native';
 
 import {Color} from '@app/colors';
-import {Icon, IconsName, Spacer, Text, TextVariant} from '@app/components/ui';
+import {
+  First,
+  Icon,
+  IconsName,
+  Spacer,
+  Text,
+  TextVariant,
+} from '@app/components/ui';
 import {CopyMenu} from '@app/components/ui/copy-menu';
 import {app} from '@app/contexts';
 import {createTheme} from '@app/helpers';
@@ -26,7 +33,7 @@ export const CardName = observer(
 
     return (
       <View style={styles.topNav}>
-        <View>
+        <Spacer flex={1}>
           <Text
             variant={TextVariant.t12}
             style={styles.name}
@@ -35,35 +42,43 @@ export const CardName = observer(
             suppressHighlighting={true}
             disabled={Wallet.isBalancesLoading}
             onPress={onAccountInfo}>
-            {wallet.name || 'Unknown'}
+            {wallet.name}
           </Text>
-        </View>
-        {(app.isTesterMode || app.isDeveloper) && (
-          <Text variant={TextVariant.t15} color={Color.textBase3}>
-            {wallet.path} {wallet.type}
-          </Text>
-        )}
-        <Spacer flex={1} />
-        <CopyMenu style={styles.copyIcon} wallet={wallet} withSettings>
-          <Text
-            variant={TextVariant.t14}
-            color={Color.textBase3}
-            testID={`${testID}_address`}>
-            {formattedAddress}
-          </Text>
-          <Icon
-            i16
-            name={IconsName.copy}
-            color={Color.graphicBase3}
-            style={styles.marginLeft}
-          />
-          <Icon
-            i16
-            name={IconsName.more}
-            color={Color.graphicBase3}
-            style={styles.marginLeft}
-          />
-        </CopyMenu>
+        </Spacer>
+
+        <First>
+          {(app.isTesterMode || app.isDeveloper) && (
+            <Spacer flex={1}>
+              <Text variant={TextVariant.t15} color={Color.textBase3}>
+                [{wallet.type[0].toUpperCase()}] {wallet.path}
+              </Text>
+            </Spacer>
+          )}
+          <Spacer flex={1} />
+        </First>
+
+        <Spacer flex={1}>
+          <CopyMenu style={styles.copyIcon} wallet={wallet} withSettings>
+            <Text
+              variant={TextVariant.t14}
+              color={Color.textBase3}
+              testID={`${testID}_address`}>
+              {formattedAddress}
+            </Text>
+            <Icon
+              i16
+              name={IconsName.copy}
+              color={Color.graphicBase3}
+              style={styles.marginLeft}
+            />
+            <Icon
+              i16
+              name={IconsName.more}
+              color={Color.graphicBase3}
+              style={styles.marginLeft}
+            />
+          </CopyMenu>
+        </Spacer>
       </View>
     );
   },
@@ -85,6 +100,6 @@ const styles = createTheme({
   copyIcon: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: 12,
+    marginLeft: 8,
   },
 });

src/models/wallet/wallet.model.ts

@@ -61,7 +61,10 @@ export class WalletModel implements IWalletModel {
   };
 
   get name() {
-    return this.model.name;
+    if (!this.model.name) {
+      return 'Unknown';
+    }
+    return this.model.name.replaceAll(' ', ' ');
   }
 
   get data() {

src/screens/total-value-info.tsx

@@ -70,6 +70,15 @@ export const TotalValueInfoScreen = observer(() => {
     [navigation],
   );
 
+  const onPressWallet = useCallback(
+    (wallet: IWalletModel) => {
+      navigation.navigate(HomeStackRoutes.AccountInfo, {
+        accountId: wallet.address,
+      });
+    },
+    [navigation],
+  );
+
   if (!wallets?.length) {
     return <Loading />;
   }
@@ -83,6 +92,7 @@ export const TotalValueInfoScreen = observer(() => {
       onPressInfo={onPressInfo}
       onPressTxRow={onPressTxRow}
       onPressToken={onPressToken}
+      onPressWallet={onPressWallet}
     />
   );
 });