fix: update validators mobile view

CoreumFoundation · Jan 19, 2024 · ccee242 · ccee242
1 parent c601e1c
commit ccee242
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-72",
+  "version": "2.19.3-73",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/packages/ui/declarations.d.ts b/packages/ui/declarations.d.ts
@@ -20,6 +20,7 @@ interface AvatarName {
   image?: React.ReactNode;
   target?: JSX.IntrinsicElements['a']['target'];
   shorten?: boolean;
+  isMobile?: boolean;
 }
 
 type Transactions = {

diff --git a/packages/ui/src/components/avatar_name/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/avatar_name/__snapshots__/index.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`component: AvatarName matches snapshot 1`] = `
   -webkit-flex-flow: row nowrap;
   -ms-flex-flow: row nowrap;
   flex-flow: row nowrap;
+  word-break: break-all;
 }
 
 .emotion-0:hover {
@@ -91,6 +92,7 @@ exports[`component: AvatarName matches snapshot with imageUrl 1`] = `
   -webkit-flex-flow: row nowrap;
   -ms-flex-flow: row nowrap;
   flex-flow: row nowrap;
+  word-break: break-all;
 }
 
 .emotion-0:hover {

diff --git a/packages/ui/src/components/avatar_name/index.tsx b/packages/ui/src/components/avatar_name/index.tsx
@@ -16,10 +16,26 @@ const AvatarName: FC<AvatarName & JSX.IntrinsicElements['div']> = ({
   image,
   target,
   shorten,
+  isMobile,
   ...props
 }) => {
   const { classes, cx } = useStyles();
 
+  if (isMobile) {
+    return (
+      <Link shallow href={href(address)} target={target}>
+        <span className={cx(classes.root, className)} {...props}>
+          <Avatar className={classes.avatar} address={address} imageUrl={imageUrl ?? undefined} />
+          {/* <MiddleEllipsis className={classes.text} content={name} /> */}
+
+          <Typography variant="body1" className={shorten ? classes.short : undefined}>
+            {name}
+          </Typography>
+        </span>
+      </Link>
+    );
+  }
+
   return (
     <Tooltip
       TransitionComponent={Zoom}

diff --git a/packages/ui/src/components/avatar_name/styles.ts b/packages/ui/src/components/avatar_name/styles.ts
@@ -7,6 +7,8 @@ const useStyles = makeStyles()((theme) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
     flexFlow: 'row nowrap',
+    wordBreak: 'break-all',
+
     '&:hover': {
       cursor: 'pointer',
     },

diff --git a/packages/ui/src/screens/validators/components/list/components/mobile/index.tsx b/packages/ui/src/screens/validators/components/list/components/mobile/index.tsx
@@ -41,7 +41,7 @@ const ListItem: FC<ListItemProps> = ({ index, style, setRowHeight, item, isLast,
   const votingPower = numeral(item.votingPower).format('0,0');
   const selectedItem = {
     idx: `#${i + 1}`,
-    validator: <AvatarName address={address} imageUrl={imageUrl} name={name} />,
+    validator: <AvatarName address={address} imageUrl={imageUrl} name={name} isMobile />,
     commission: `${numeral(item.commission).format('0.[00]')}%`,
     condition: <Condition className={condition} />,
     votingPower: (