Merge pull request #28 from blockscout/redesign-w-fixes

redesign fixes

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.2",
-    "@chakra-ui/react": "^2.1.2",
+    "@chakra-ui/react": "^2.2.1",
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",

theme/components/Form.ts

@@ -40,7 +40,7 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
       // label's styles
       label: {
         top: '20px',
-        left: '20px',
+        left: '22px',
         zIndex: 2,
         position: 'absolute',
         color: mode('gray.500', 'whiteAlpha.400')(props),

theme/components/Table.ts

@@ -21,6 +21,7 @@ const Table: ComponentMultiStyleConfig = {
       borderTopLeftRadius: 'md',
       borderTopRightRadius: 'md',
       overflow: 'hidden',
+      fontVariant: 'normal',
     },
   },
   sizes: {

ui/WatchlistTable/WatchListAddressItem.tsx

 import React from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
-import { Box, Link, HStack, VStack, Image, Text, Icon } from '@chakra-ui/react';
+import { Box, Link, HStack, VStack, Image, Text, Icon, Tooltip } from '@chakra-ui/react';
 
-import CopyToClipboard from '../CopyToClipboard/CopyToClipboard';
+import AddressWithDots from '../shared/AddressWithDots';
+import CopyToClipboard from '../shared/CopyToClipboard';
 import type { TWatchlistItem } from '../../data/watchlist';
 import { nbsp } from '../../lib/html-entities';
 import TokensIcon from '../../icons/tokens.svg';
@@ -11,22 +12,22 @@ import WalletIcon from '../../icons/wallet.svg';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
 
-  const image = <Jazzicon diameter={ 50 } seed={ jsNumberForAddress(item.address) }/>
+  const image = <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(item.address) }/>
   return (
     <HStack spacing={ 3 } align="top">
-      <Box width="50px">{ image }</Box>
+      <Box width="24px">{ image }</Box>
       <VStack spacing={ 2 } align="stretch" overflow="hidden">
         <HStack spacing={ 2 } alignContent="center">
           <Link
             href="#"
             color="blue.500"
-            title={ item.address }
             overflow="hidden"
-            textOverflow="ellipsis"
             fontWeight={ 600 }
             lineHeight="24px"
           >
-            { item.address }
+            <Tooltip hasArrow label={ item.address }>
+              <AddressWithDots address={ item.address }/>
+            </Tooltip>
           </Link>
           <CopyToClipboard text={ item.address }/>
         </HStack>

ui/WatchlistTable/WatchListTableItem.tsx

@@ -7,6 +7,7 @@ import {
   Switch,
   Icon,
   HStack,
+  Tooltip,
 } from '@chakra-ui/react'
 
 import EditIcon from '../../icons/edit.svg';
@@ -35,9 +36,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
       <Td>
-        <Tag variant="gray" lineHeight="24px" title={ item.tag }>
-          { item.tag }
-        </Tag>
+        <Tooltip hasArrow label={ item.tag }>
+          <Tag variant="gray" lineHeight="24px">
+            { item.tag }
+          </Tag>
+        </Tooltip>
       </Td>
       <Td><Switch colorScheme="blue" size="md" isChecked={ item.notification }/></Td>
       <Td>

ui/WatchlistTable/WatchlistTable.tsx

@@ -27,7 +27,7 @@ const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
           <Tr>
             <Th width="70%">Address</Th>
             <Th width="30%">Private tag</Th>
-            <Th width="108px">Notification</Th>
+            <Th width="160px">Email notification</Th>
             <Th width="108px"></Th>
           </Tr>
         </Thead>

ui/navigation/AccountNavLink.tsx

@@ -19,8 +19,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         as="li"
         listStyleType="none"
         w="220px"
-        px={ 5 }
-        py={ 4 }
+        px={ 4 }
+        py={ 2.5 }
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
         _hover={{ color: 'blue.600' }}

ui/navigation/AccountNavigation.tsx

@@ -18,7 +18,7 @@ const navItems = [
 const AccountNavigation = () => {
   return (
     <Box as="nav">
-      <VStack as="ul" spacing="3">
+      <VStack as="ul" spacing="2">
         { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>

ui/navigation/MainNavLink.tsx

@@ -20,8 +20,8 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         as="li"
         listStyleType="none"
         w="220px"
-        px={ 5 }
-        py={ 4 }
+        px={ 4 }
+        py={ 2.5 }
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
         borderRadius="base"

ui/navigation/MainNavigation.tsx

@@ -18,7 +18,7 @@ const navItems = [
 const MainNavigation = () => {
   return (
     <Box as="nav">
-      <VStack as="ul" spacing="3">
+      <VStack as="ul" spacing="2">
         { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>

ui/shared/AddressWithDots.tsx

+// this component trims address like 0x123...4567 (always 4 chars after dots)
+// or shows full address, if fits
+
+// i can't do this with pure css. if you can, feel free to replace it
+
+// if i use <span text-overflow=ellipsis>some chars</span><span>last 4 chars</span>
+// i have an unremovable gap between dots and second span
+
+// so i did it with js
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import _debounce from 'lodash/debounce';
+
+const TAIL_LENGTH = 4;
+const HEAD_MIN_LENGTH = 4;
+
+const AddressWithDots = ({ address }: {address: string}) => {
+  const addressRef = useRef<HTMLSpanElement>(null);
+
+  const calculateString = useCallback(() => {
+    const addressEl = addressRef.current;
+    if (!addressEl) {
+      return;
+    }
+
+    const parent = addressRef?.current?.parentNode as HTMLElement;
+    if (!parent) {
+      return;
+    }
+
+    const shadowEl = document.createElement('span');
+    shadowEl.style.opacity = '0';
+    parent.appendChild(shadowEl);
+    shadowEl.textContent = address;
+
+    const parentWidth = getWidth(parent);
+
+    if (getWidth(shadowEl) > parentWidth) {
+      for (let i = 1; i <= address.length - TAIL_LENGTH - HEAD_MIN_LENGTH; i++) {
+        const res = address.slice(0, address.length - i - TAIL_LENGTH) + '...' + address.slice(-TAIL_LENGTH);
+        shadowEl.textContent = res;
+        if (getWidth(shadowEl) < parentWidth || i === address.length - TAIL_LENGTH - HEAD_MIN_LENGTH) {
+          addressRef.current.textContent = res;
+          break;
+        }
+      }
+    } else {
+      addressRef.current.textContent = address;
+    }
+    parent.removeChild(shadowEl);
+  }, [ address ]);
+
+  useEffect(() => {
+    calculateString();
+    const resizeHandler = _debounce(calculateString, 50)
+    window.addEventListener('resize', resizeHandler)
+    return function cleanup() {
+      window.removeEventListener('resize', resizeHandler)
+    };
+  }, [ calculateString ]);
+  return <span ref={ addressRef }>{ address }</span>;
+}
+
+function getWidth(el: HTMLElement) {
+  return el.getBoundingClientRect().width;
+}
+
+export default AddressWithDots;