feat: send address input autocomplete show recent used time

apps/extension/src/components/biz/AddressInput/EnsSearch.tsx

@@ -25,7 +25,7 @@ const ENSSearchResults = ({
         {<Spin isLoading={loading} />}
         {ensInfo?.name && (
           <div
-            className="cursor-pointer hover:bg-gray-300 px-lg py-md"
+            className="cursor-pointer hover:bg-gray-150 px-lg py-md"
             onClick={onSelectENS}
           >
             <ENSInfoComponent ensInfo={ensInfo} />

apps/extension/src/components/biz/AddressInput/RecentAddress.tsx

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import FragmentedAddress from '../FragmentedAddress';
 import ENSInfoComponent from '../ENSInfo';
+import { useMemo } from 'react';
 
 interface IRecentAddressItemProps {
   item: TRecentAddress;
@@ -15,19 +16,30 @@ const RecentAddressItem = ({
 }: IRecentAddressItemProps) => {
   if (!item.address || !item.time) return null;
 
+  const time = useMemo(
+    () => (
+      <div className="text-gray-600 text-xs font-normal">
+        {dayjs(item.time).fromNow()}
+      </div>
+    ),
+    [item.time]
+  );
+
   return (
     <div
       onClick={onClick}
-      className="px-lg py-md cursor-pointer flex items-center justify-between hover:bg-gray-150"
+      className="px-lg py-md cursor-pointer flex-column items-center justify-between hover:bg-gray-150"
     >
       {item.name ? (
-        <ENSInfoComponent ensInfo={item} />
+        <ENSInfoComponent ensInfo={item} extra={time} />
       ) : (
-        <FragmentedAddress size="md" address={item.address} chainId={chainId} />
+        <FragmentedAddress
+          size="md"
+          address={item.address}
+          chainId={chainId}
+          extra={time}
+        />
       )}
-      <div className="text-gray-600 text-xs font-normal pl-3xl">
-        {dayjs(item.time).fromNow()}
-      </div>
     </div>
   );
 };

apps/extension/src/components/biz/ENSInfo.tsx

@@ -1,5 +1,12 @@
+import { ReactNode } from 'react';
 import FragmentedAddress from './FragmentedAddress';
-const ENSInfo = ({ ensInfo }: { ensInfo: TRecentAddress }) => {
+const ENSInfo = ({
+  ensInfo,
+  extra,
+}: {
+  ensInfo: TRecentAddress;
+  extra?: ReactNode;
+}) => {
   if (!ensInfo || !ensInfo.address) return null;
   return (
     <div className="flex items-center">
@@ -16,8 +23,8 @@ const ENSInfo = ({ ensInfo }: { ensInfo: TRecentAddress }) => {
       )}
       <div className="text-base">
         <div>{ensInfo.name}</div>
-        <div className="text-xs font-normal">
-          <FragmentedAddress address={ensInfo?.address} />
+        <div className="flex text-xs font-normal">
+          <FragmentedAddress address={ensInfo?.address} extra={extra} />
         </div>
       </div>
     </div>

apps/extension/src/components/biz/FragmentedAddress.tsx

@@ -5,6 +5,7 @@ import {
 } from '@/components/ui/tooltip';
 import { SUPPORTED_CHAINS } from '@/constants/chains';
 import { cn } from '@/utils/shadcn/utils';
+import { ReactNode } from 'react';
 import { isAddress } from 'viem';
 
 interface IProps {
@@ -14,6 +15,7 @@ interface IProps {
   size?: keyof typeof SIZE_MAP;
   dotColor?: string;
   showChainIcon?: boolean;
+  extra?: ReactNode;
 }
 
 const SIZE_MAP = {
@@ -38,6 +40,7 @@ export default function FragmentedAddress({
   className,
   dotColor,
   showChainIcon = true,
+  extra,
 }: IProps) {
   if (!address || !isAddress(address)) {
     return '--';
@@ -53,26 +56,29 @@ export default function FragmentedAddress({
       {showChainIcon && chain && (
         <img src={chain.icon} alt={chain.name} className={icon} />
       )}
-      <div className={cn('flex items-center gap-sm', text)}>
-        <span>{prefix}</span>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger>
-            <span
-              className="px-1 bg-gray-300 rounded-xs"
-              style={{ backgroundColor: dotColor }}
-            >
-              …
-            </span>
-          </TooltipTrigger>
-          <TooltipContent className="bg-dark-blue p-4 ">
-            <div className="text-blue">
-              <span className="text-light-blue font-bold">{prefix}</span>
-              {address.slice(6, -6)}
-              <span className="text-light-blue font-bold">{suffix}</span>
-            </div>
-          </TooltipContent>
-        </Tooltip>
-        <span>{suffix}</span>
+      <div className="flex-column">
+        <div className={cn('flex items-center gap-sm', text)}>
+          <span>{prefix}</span>
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger>
+              <span
+                className="px-1 bg-gray-300 rounded-xs"
+                style={{ backgroundColor: dotColor }}
+              >
+                …
+              </span>
+            </TooltipTrigger>
+            <TooltipContent className="bg-dark-blue p-4">
+              <div className="text-blue">
+                <span className="text-light-blue font-bold">{prefix}</span>
+                {address.slice(6, -6)}
+                <span className="text-light-blue font-bold">{suffix}</span>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+          <span>{suffix}</span>
+        </div>
+        {extra && <div>{extra}</div>}
       </div>
     </div>
   );