ZachXBT UI Recommendations

packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx

@@ -7,6 +7,8 @@ import { timeAgo } from '@utils/timeAgo'
 import { getBridgeTransactionUrl } from '@urls'
 import { ellipsizeString } from '@utils/ellipsizeString'
 import { addressToSymbol } from '@utils/addressToSymbol'
+import { formatDateTime } from '@utils/formatDate'
+import Link from 'next/link'
 
 export function BridgeTransactionTable({ queryResult }) {
   const handlePending = (date) => {
@@ -18,96 +20,82 @@ export function BridgeTransactionTable({ queryResult }) {
       return <p>Pending</p>
     }
   }
-  const headers = [
-    'Initial',
-    'Final',
-    'Origin',
-    'Destination',
-    'From',
-    'To',
-    'Age',
-    'TXID',
-  ]
 
   const tableRows = []
   queryResult?.map((txn) => {
     const { kappa, pending, fromInfo, toInfo } = txn
 
+    // ]
     const items = [
-      <IconAndAmount
-        formattedValue={fromInfo.formattedValue}
-        tokenAddress={fromInfo.tokenAddress}
-        chainId={fromInfo.chainID}
-        tokenSymbol={addressToSymbol({
-          tokenAddress: fromInfo.tokenAddress,
-          chainId: fromInfo.chainID,
-        }) || fromInfo.tokenSymbol}
-        iconSize="w-4 h-4"
-        textSize="text-sm"
-        styledCoin={true}
-      />,
-      pending ? (
-        handlePending(fromInfo.time)
-      ) : (
-        <IconAndAmount
-          formattedValue={toInfo.formattedValue}
-          tokenAddress={toInfo.tokenAddress}
-          chainId={fromInfo.destinationChainID}
-          tokenSymbol={addressToSymbol({
-            tokenAddress: toInfo.tokenAddress,
-            chainId: fromInfo.destinationChainID,
-            }) || toInfo.tokenSymbol}
-          iconSize="w-4 h-4"
-          textSize="text-sm"
-          styledCoin={true}
-        />
-      ),
-      <ChainInfo
-        chainId={fromInfo.chainID}
-        imgClassName="w-6 h-6 rounded-full"
-        txHash={fromInfo.hash}
-        useExplorerLink={false}
-      />,
-      pending ? (
-        <ChainInfo
-          chainId={fromInfo.destinationChainID}
-          imgClassName="w-6 h-6 rounded-full"
-          txHash={''}
-          useExplorerLink={false}
-        />
-      ) : (
-        <ChainInfo
-          chainId={toInfo.chainID}
-          imgClassName="w-6 h-6 rounded-full"
-          txHash={toInfo.hash}
-          useExplorerLink={false}
-        />
-      ),
-      <StyleAddress sourceInfo={fromInfo} />,
-      pending ? (
-        handlePending(fromInfo.time)
-      ) : (
-        <StyleAddress sourceInfo={toInfo} />
-      ),
-      fromInfo.time
-        ? timeAgo({ timestamp: fromInfo.time })
-        : timeAgo({ timestamp: toInfo?.time }),
-      <a
-        className="underline transition ease-out hover:text-[#8FEBFF]"
+      <Link
         href={getBridgeTransactionUrl({
-          hash: txn.kappa,
-          chainIdFrom: txn.fromInfo.chainID,
-          chainIdTo: txn.toInfo?.chainID,
-        })}
-      >
-        {ellipsizeString({ string: txn.kappa, limiter: 4 })}
-      </a>,
+        hash: txn.kappa,
+        chainIdFrom: txn.fromInfo.chainID,
+        chainIdTo: txn.toInfo?.chainID,
+      })}
+      className="no-underline block w-full"
+    >
+      <div className="flex flex-col">
+        <div className="flex items-center space-x-2">
+          <StyleAddress sourceInfo={fromInfo} />
+          <span className='text-gray-400'>sent</span>
+          <IconAndAmount
+            formattedValue={fromInfo.formattedValue}
+            tokenAddress={fromInfo.tokenAddress}
+            chainId={fromInfo.chainID}
+            tokenSymbol={addressToSymbol({
+              tokenAddress: fromInfo.tokenAddress,
+              chainId: fromInfo.chainID,
+            }) || fromInfo.tokenSymbol}
+            iconSize="w-6 h-6 rounded-full"
+            textSize="text-sm"
+            styledCoin={true}
+          />
+          <span className='text-gray-400'>on  </span>
+          <ChainInfo
+            chainId={fromInfo.chainID}
+            imgClassName="w-6 h-6 rounded-full"
+            txHash={fromInfo.hash}
+            useExplorerLink={false}
+          />
+        </div>
+        <div className="flex items-center space-x-2 mt-2">
+          <span className='text-gray-400'>to </span>
+          {pending ? (
+            <StyleAddress sourceInfo={fromInfo} />
+          ) : (
+            <StyleAddress sourceInfo={toInfo} />
+          )}
+          <span className='text-gray-400'>on  </span>
+            {pending ? (
+              <ChainInfo
+                chainId={fromInfo.destinationChainID}
+              imgClassName="w-6 h-6 rounded-full"
+              txHash={''}
+              useExplorerLink={false}
+            />
+            ) : (
+              <ChainInfo
+                chainId={toInfo?.chainID}
+                imgClassName="w-6 h-6 rounded-full"
+                txHash={toInfo?.hash}
+                useExplorerLink={false}
+            />
+          )}
+        </div>
+        <div className="ml-auto">
+          {fromInfo.time
+            ? timeAgo({ timestamp: fromInfo.time  }) + ' ago'
+            : timeAgo({ timestamp: toInfo?.time  }) + ' ago'}
+        </div>
+        </div>
+      </Link>
     ]
     const row = {
       items,
       key: kappa,
     }
     tableRows.push(row)
   })
-  return <Table header={headers} body={tableRows} />
+  return <Table header={[]} body={tableRows} />
 }

packages/explorer-ui/components/ChainChart/index.tsx

@@ -1,30 +1,17 @@
 import _ from 'lodash';
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { SynapseLogoSvg } from '@components/layouts/MainLayout/SynapseLogoSvg';
-import { formatDate } from '@utils/formatDate';
 import { formatUSD } from '@utils/formatUSD';
-import ReactDOM from 'react-dom';
 import {
   Bar,
   BarChart,
-  Cell,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
 import { CurrencyTooltip } from '@components/misc/ToolTip';
 
-const formatShort = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-});
-
-const formatMonth = new Intl.DateTimeFormat('en-US', {
-  year: 'numeric',
-  month: 'long',
-});
-
 export const addOrSetObject = (obj: any, key: string, value: any) => {
   obj[key] ? (obj[key] += value) : (obj[key] = value);
 };
@@ -62,12 +49,11 @@ export const OverviewChart: React.FC<OverviewChartProps> = ({
     );
   }
 
-  const initialData = (getNames: boolean) => {
+  const initialData = (getNames: boolean, payload) => {
     if (chartData.length === 0) {
       return [];
     }
 
-    const payload = chartData[chartData.length - 1];
     const items = Object.keys(payload).map((key) => {
       if (payload[key] > 0 && key !== 'total') {
         return [key, payload[key]];
@@ -97,11 +83,14 @@ export const OverviewChart: React.FC<OverviewChartProps> = ({
   const toolTipNamesRef = useRef<any>();
   const toolTipValuesRef = useRef<any>();
   const toolTipLabelRef = useRef<any>();
+  const [rerenderToken, setRerenderToken] = useState(0);
 
   useEffect(() => {
-    toolTipNamesRef.current = initialData(true);
-    toolTipValuesRef.current = initialData(false);
+    const payload = chartData[chartData.length - 1]
+    toolTipNamesRef.current = initialData(true, payload);
+    toolTipValuesRef.current = initialData(false, payload);
     toolTipLabelRef.current = chartData[chartData.length - 1]?.date;
+    setRerenderToken(rerenderToken + 1)
   }, [chartData]);
 
   const getToolTip = ({
@@ -115,34 +104,34 @@ export const OverviewChart: React.FC<OverviewChartProps> = ({
     label: string;
     isUSD: boolean;
   }) => {
-    payload?.sort((a, b) => b.value - a.value);
+    payload.sort((a, b) => b.value - a.value);
     const names = _.map(payload, 'name');
     const values = _.map(payload, 'value');
 
     if (active) {
-      if (toolTipNamesRef.current !== names) {
+      if (toolTipNamesRef.current !== names && names.length > 0) {
         toolTipNamesRef.current = names;
       }
-      if (toolTipValuesRef.current !== values) {
+      if (toolTipValuesRef.current !== values && values.length > 0) {
         toolTipValuesRef.current = values;
       }
-      if (toolTipLabelRef.current !== label) {
+      if (toolTipLabelRef.current !== label && label != null) {
         toolTipLabelRef.current = label;
       }
       return (
         <CurrencyTooltip
-          label={label}
-          names={names}
-          values={values}
+          label={toolTipLabelRef.current}
+          names={toolTipNamesRef.current}
+          values={toolTipValuesRef.current}
           isUSD={isUSD}
           dailyStatisticType={dailyStatisticType}
           platform={platform}
           singleChain={singleChain}
           noTooltipLink={noTooltipLink}
+          key={rerenderToken}
         />
       );
     }
-
     return (
       <CurrencyTooltip
         label={toolTipLabelRef.current}
@@ -153,6 +142,7 @@ export const OverviewChart: React.FC<OverviewChartProps> = ({
         platform={platform}
         singleChain={singleChain}
         noTooltipLink={noTooltipLink}
+        key={rerenderToken}
       />
     );
   };

packages/explorer-ui/components/TransactionTable/Table.tsx

@@ -4,7 +4,7 @@ import { TableBody } from './TableBody'
 export function Table({ header, body }) {
   return (
     <div className="pb-2 px-4 sm:px-6 lg:px-8">
-      <div className="mt-8 flex flex-col">
+      <div className="flex flex-col">
         <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle">
             <div className="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">

packages/explorer-ui/components/TransactionTable/TableBody.tsx

@@ -2,9 +2,15 @@ import { TableRow } from './TableRow'
 
 export function TableBody({ rows }) {
   return (
-    <tbody className="transition duration-150 ease-in ">
+    <tbody className="transition duration-150 ease-in">
       {rows.map((row, index) => (
-        <TableRow key={index} items={row.items} />
+        <TableRow
+          key={index}
+          items={row.items}
+          className={` hover:border-y border-slate-800 hover:bg-slate-900 hover:cursor-pointer ${
+            index === 0 ? 'border-t-0' : ''} ${index === rows.length - 1 ? 'border-b-0' : ''}`
+          }
+        />
       ))}
     </tbody>
   )

packages/explorer-ui/components/TransactionTable/TableRow.tsx

@@ -1,6 +1,6 @@
-export function TableRow({ items }) {
+export function TableRow({ items, className }) {
   return (
-    <tr className="transition ease-out">
+    <tr className={`transition ease-out ${className}`}>
       {items.map((item, index) => (
         <td key={index} className="whitespace-nowrap px-2 py-2 text-sm text-white">
           {item}

packages/explorer-ui/components/misc/AssetImage.tsx

@@ -9,11 +9,17 @@ export function AssetImage({ tokenAddress, chainId, className, tokenSymbol= '' }
     const t = chainId && tokenAddress && TOKEN_HASH_MAP[chainId]?.[tokenAddress]
     return(
       <a href={getTokenAddressUrl({ tokenAddress, chainId })}>
+        <div className="w-full relative">
+          <div className="flex justify-between ">
+            <div className="flex flex-row w-[90%] items-center">
         <Image
-          className={`inline w-5 h-5 mr-2 rounded-md ${className}`}
+          className={`${className}`}
           src={t?.icon}
           alt=""
         />
+            </div>
+          </div>
+        </div>
       </a>
     )
   }
@@ -25,7 +31,7 @@ export function AssetImage({ tokenAddress, chainId, className, tokenSymbol= '' }
     return (
       <a href={getTokenAddressUrl({ tokenAddress, chainId })}>
         <Image
-          className={`inline w-5 h-5 mr-2 rounded-md ${className}`}
+          className={`inline mr-[.5rem] rounded-full ${className}`}
           src={t?.icon}
           alt=""
         />
@@ -35,7 +41,7 @@ export function AssetImage({ tokenAddress, chainId, className, tokenSymbol= '' }
     return (
       // temporary fix until either symbolToToken works better as a function or explorer indexer has the right token addresses
       <Image
-      className={`inline w-5 h-5 mr-2 rounded-md ${className}`}
+      className={`${className}`}
       src={USDC?.icon}
       alt=""
     />