Fix UI Extrinsics/Events list expand icon, block details and forks co…

…py to clipboard functionality (#117) * fix-work in progress on ui fixes * fix: validator field hover and copy and keep the copy button on mobile * ui fixes working solution * fix: extrinsics and events list expand icon, block details and forks copy to clipboard functionality * fix: refactoring DetailRow by using css props * Simplify CopyToClipboard component by removing unnecessary props --------- Co-authored-by: Aleksandar Drazhev <[email protected]>
LimeChain · Nov 7, 2024 · 548cd5d · 548cd5d
1 parent f871112
commit 548cd5d
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 41 deletions.
diff --git a/src/assets/svgs/icon/expand.svg b/src/assets/svgs/icon/expand.svg
diff --git a/src/components/copyToClipboard/index.tsx b/src/components/copyToClipboard/index.tsx
@@ -24,6 +24,7 @@ interface ICopyToClipboardProps {
   showToast?: boolean;
   className?: string;
   iconSize?: number;
+  textClassName?: string;
 }
 
 export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
@@ -35,6 +36,7 @@ export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
     onCopy,
     className,
     iconSize = 16,
+    textClassName,
   } = props;
 
   const refTimeout = useRef<NodeJS.Timeout>();
@@ -122,8 +124,20 @@ export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
     isCopied,
   ]);
 
-  return children({
-    ClipboardIcon,
-    onClick: copyToClipboard,
-  });
+  return (
+    <div className="flex w-full items-center gap-x-2">
+      {text && (
+        <p
+          className={textClassName}
+          onClick={copyToClipboard}
+        >
+          {text}
+        </p>
+      )}
+      {children({
+        ClipboardIcon,
+        onClick: copyToClipboard,
+      })}
+    </div>
+  );
 });
diff --git a/src/views/blockDetails/blockBody/index.tsx b/src/views/blockDetails/blockBody/index.tsx
@@ -9,6 +9,7 @@ import {
 import { Icon } from '@components/icon';
 import { ModalJSONViewer } from '@components/modals/modalJSONViewer';
 import { Tabs } from '@components/tabs';
+import { ToolTip } from '@components/tooltTip';
 import { cn } from '@utils/helpers';
 
 import type {
@@ -157,11 +158,15 @@ export const BlockBody = (props: BlockBodyProps) => {
                         )
                       </td>
                       <td>
-                        <Icon
-                          className="text-dev-black-1000 dark:text-dev-purple-50"
-                          name="icon-dropdownArrow"
-                          size={[18]}
-                        />
+                        <ToolTip text="Expand the view">
+                          <span className="inline-flex">
+                            <Icon
+                              className="text-dev-black-1000 dark:text-dev-purple-50"
+                              name="icon-expand"
+                              size={[18]}
+                            />
+                          </span>
+                        </ToolTip>
                       </td>
                     </tr>
                   );
@@ -232,11 +237,15 @@ export const BlockBody = (props: BlockBodyProps) => {
                     </td>
                     <td>{event.phase.type}</td>
                     <td>
-                      <Icon
-                        className="text-dev-black-1000 dark:text-dev-purple-50"
-                        name="icon-dropdownArrow"
-                        size={[18]}
-                      />
+                      <ToolTip text="Expand the view">
+                        <span className="inline-flex">
+                          <Icon
+                            className="text-dev-black-1000 dark:text-dev-purple-50"
+                            name="icon-expand"
+                            size={[18]}
+                          />
+                        </span>
+                      </ToolTip>
                     </td>
                   </tr>
                 ))

diff --git a/src/views/blockDetails/blockHeader/index.tsx b/src/views/blockDetails/blockHeader/index.tsx
@@ -9,6 +9,7 @@ import { CopyToClipboard } from '@components/copyToClipboard';
 import { Icon } from '@components/icon';
 import { ToggleButton } from '@components/toggleButton';
 import { useStoreChain } from '@stores';
+import { cn } from '@utils/helpers';
 
 import styles from '../styles.module.css';
 
@@ -22,22 +23,36 @@ interface DetailRowProps {
   label: string;
   value: string | undefined;
   isCopyable?: boolean;
+  iconComponent?: React.ReactNode;
 }
 
 const DetailRow = (props: DetailRowProps) => {
-  const { label, value } = props;
+  const { label, value, iconComponent } = props;
 
   return (
-    <div className={styles['pd-block-details']}>
+    <div className={cn(styles['pd-block-details'], 'group')}>
       <p>{label}</p>
       <div className="flex items-center gap-x-1">
-        <p>{value}</p>
+        {iconComponent && <span className="mr-2">{iconComponent}</span>}
+
         {value && (
           <CopyToClipboard
+            className="relative flex items-center"
             text={value}
+            textClassName="cursor-pointer peer"
             toastMessage={label}
           >
-            {({ ClipboardIcon }) => <>{ClipboardIcon}</>}
+            {({ ClipboardIcon }) => (
+              <div
+                className={cn(
+                  'transition-opacity duration-200 ease-in-out',
+                  'opacity-100 md:opacity-0',
+                  'group-hover:opacity-100 peer-hover:text-dev-pink-400 md:group-hover:opacity-100',
+                )}
+              >
+                {ClipboardIcon}
+              </div>
+            )}
           </CopyToClipboard>
         )}
       </div>
@@ -67,12 +82,22 @@ export const BlockHeader = (props: BlockHeaderProps) => {
       <div className={styles['pd-block-details']}>
         <p>Time stamp</p>
         <div className="flex items-center gap-x-2">
-          <span>{formattedTimestamp}</span>
+          <button
+            className="cursor-pointer"
+            onClick={handleSetCheck}
+          >
+            {formattedTimestamp}
+          </button>
           <ToggleButton
             handleSetCheck={handleSetCheck}
             isChecked={isUTC}
           />
-          <span>UTC</span>
+          <button
+            className="cursor-pointer"
+            onClick={handleSetCheck}
+          >
+            UTC
+          </button>
         </div>
       </div>
       <div className={styles['pd-block-details']}>
@@ -103,28 +128,17 @@ export const BlockHeader = (props: BlockHeaderProps) => {
         value={headerData.extrinsicRoot}
       />
       {headerData.identity && (
-        <div className={styles['pd-block-details']}>
-          <p>Validator</p>
-          <div className={styles['validator']}>
+        <DetailRow
+          label="Validator"
+          value={headerData.identity.address}
+          iconComponent={(
             <Identicon
               size={32}
               theme="polkadot"
               value={headerData.identity.address}
             />
-            <span>
-              {headerData.identity.name}
-              <div className="flex items-center gap-x-2">
-                <span>{headerData.identity.address}</span>
-                <CopyToClipboard
-                  text={headerData.identity.address || ''}
-                  toastMessage="Validator Address"
-                >
-                  {({ ClipboardIcon }) => <>{ClipboardIcon}</>}
-                </CopyToClipboard>
-              </div>
-            </span>
-          </div>
-        </div>
+          )}
+        />
       )}
       <DetailRow
         label="Spec Version"

diff --git a/src/views/forks/virtualizedList.tsx b/src/views/forks/virtualizedList.tsx
@@ -214,13 +214,10 @@ export const VirtualizedList = (props: IVirtualizedListProps) => {
                                 />
                               )
                             }
-                            <div className="truncate">
-                              {item.blockHash}
-                            </div>
-
                             <CopyToClipboard
                               className="hover:text-dev-dev-purple-50"
                               text={item.blockHash}
+                              textClassName="truncate cursor-pointer"
                               toastMessage="Block Hash"
                             >
                               {