fix: alianName display

Author: Odyssey98

src/ui/pages/Account/SwitchKeyringScreen.tsx

@@ -86,8 +86,8 @@ export function MyItem({ keyring, autoNav }: MyItemProps, ref) {
           {selected ? <Icon icon="circle-check" color="gold" /> : <Icon icon="circle-check" color="white_muted2" />}
         </Column>
 
-        <Column justifyCenter>
-          <Text text={`${keyring.alianName}`} />
+        <Column justifyCenter style={{ height: 40 }}>
+          <Text text={`${keyring.alianName}`} style={{ overflow: 'hidden', maxWidth: 180 }} />
           <Text text={`${displayAddress}`} preset="sub" />
         </Column>
       </Row>

src/ui/pages/Main/WalletTabScreen/index.tsx

@@ -188,7 +188,7 @@ export default function WalletTabScreen() {
             onClick={() => {
               navigate('SwitchKeyringScreen');
             }}>
-            <Text text={currentKeyring.alianName} size="xxs" />
+            <Text text={currentKeyring.alianName} size="xxs" ellipsis style={{ maxWidth: 100 }} />
           </Card>
         }
         RightComponent={

src/ui/pages/Settings/EditWalletNameScreen.tsx

@@ -2,9 +2,10 @@ import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { WalletKeyring } from '@/shared/types';
-import { Button, Column, Content, Header, Input, Layout } from '@/ui/components';
+import { Button, Column, Content, Header, Layout } from '@/ui/components';
 import { useAppDispatch } from '@/ui/state/hooks';
 import { keyringsActions } from '@/ui/state/keyrings/reducer';
+import { colors } from '@/ui/theme/colors';
 import { useWallet } from '@/ui/utils';
 
 export default function EditWalletNameScreen() {
@@ -14,16 +15,16 @@ export default function EditWalletNameScreen() {
   };
 
   const wallet = useWallet();
-  const [alianName, setAlianName] = useState('');
+  const [alianName, setAlianName] = useState(keyring.alianName || '');
   const dispatch = useAppDispatch();
   const handleOnClick = async () => {
     const newKeyring = await wallet.setKeyringAlianName(keyring, alianName || keyring.alianName);
     dispatch(keyringsActions.updateKeyringName(newKeyring));
     window.history.go(-1);
   };
 
-  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if ('Enter' == e.key) {
+  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ('Enter' == e.key && e.ctrlKey) {
       handleOnClick();
     }
   };
@@ -35,25 +36,67 @@ export default function EditWalletNameScreen() {
     return true;
   }, [alianName]);
 
+  const calculateRows = useMemo(() => {
+    return Math.min(5, Math.max(1, Math.ceil(alianName.length / 40)));
+  }, [alianName]);
+
+  const truncatedTitle = useMemo(() => {
+    if (keyring.alianName.length > 20) {
+      return keyring.alianName.slice(0, 20) + '...';
+    }
+    return keyring.alianName;
+  }, [keyring.alianName]);
+
   return (
     <Layout>
-      <Header
-        onBack={() => {
-          window.history.go(-1);
-        }}
-        title={keyring.alianName}
-      />
+      <div style={{ position: 'relative' }}>
+        <Header
+          onBack={() => {
+            window.history.go(-1);
+          }}
+          title={truncatedTitle}
+        />
+      </div>
       <Content>
         <Column gap="lg">
-          <Input
-            placeholder={keyring.alianName}
-            onChange={(e) => {
-              setAlianName(e.target.value);
-            }}
-            defaultValue={keyring.alianName}
-            onKeyUp={(e) => handleOnKeyUp(e)}
-            autoFocus={true}
-          />
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: colors.black,
+              paddingLeft: 15.2,
+              paddingRight: 15.2,
+              borderRadius: 10,
+              borderWidth: 1,
+              borderColor: colors.line2
+            }}>
+            <textarea
+              placeholder={keyring.alianName}
+              onChange={(e) => {
+                setAlianName(e.target.value);
+              }}
+              value={alianName}
+              onKeyUp={handleOnKeyUp}
+              autoFocus={true}
+              rows={calculateRows}
+              style={{
+                display: 'flex',
+                flex: 1,
+                borderWidth: 0,
+                outlineWidth: 0,
+                backgroundColor: 'rgba(0,0,0,0)',
+                alignSelf: 'stretch',
+                padding: '11px 0',
+                overflowWrap: 'break-word',
+                wordWrap: 'break-word',
+                wordBreak: 'break-all',
+                whiteSpace: 'pre-wrap',
+                resize: 'none',
+                lineHeight: '22px'
+              }}
+            />
+          </div>
           <Button
             disabled={!isValidName}
             text="Change Wallet Name"