fix: address react doctor findings

src/components/icons/TokenIcon.tsx

@@ -26,6 +26,7 @@ export function TokenIcon({ token, size = 32 }: Props) {
       {imageSrc && !fallbackToText ? (
         <img
           src={imageSrc}
+          alt={title}
           className="h-full w-full"
           onError={() => setFallbackToText(true)}
           loading="lazy"

src/components/search/SearchFilterBar.tsx

@@ -131,6 +131,16 @@ function DatetimeSelector({
   // Need local state as buffer before user hits apply
   const [startTime, setStartTime] = useState<number | null>(startValue);
   const [endTime, setEndTime] = useState<number | null>(endValue);
+  const [prevStartValue, setPrevStartValue] = useState(startValue);
+  const [prevEndValue, setPrevEndValue] = useState(endValue);
+  if (startValue !== prevStartValue) {
+    setPrevStartValue(startValue);
+    setStartTime(startValue);
+  }
+  if (endValue !== prevEndValue) {
+    setPrevEndValue(endValue);
+    setEndTime(endValue);
+  }
 
   const onClickClear = () => {
     setStartTime(null);

src/features/messages/MessageSearch.tsx

@@ -101,13 +101,13 @@ export function MessageSearch() {
   const [destinationChainFilter, setDestinationChainFilter] = useState<string | null>(
     defaultDestinationQuery || null,
   );
-  const [startTimeFilter, setStartTimeFilter] = useState<number | null>(
+  const [startTimeFilter, setStartTimeFilter] = useState<number | null>(() =>
     tryToDecimalNumber(defaultStartTime),
   );
-  const [endTimeFilter, setEndTimeFilter] = useState<number | null>(
+  const [endTimeFilter, setEndTimeFilter] = useState<number | null>(() =>
     tryToDecimalNumber(defaultEndTime),
   );
-  const [statusFilter, setStatusFilter] = useState<MessageStatusFilter>(
+  const [statusFilter, setStatusFilter] = useState<MessageStatusFilter>(() =>
     parseStatusFilter(defaultStatus),
   );
 

src/features/messages/cards/CollateralCards.tsx

@@ -98,8 +98,8 @@ function RebalanceList({ rebalances }: { rebalances: RebalanceInfo[] }) {
         {count} rebalance transaction{count > 1 ? 's' : ''} in progress:
       </p>
       <ul className="space-y-2">
-        {pendingRebalances.slice(0, 3).map((rebalance, idx) => (
-          <li key={idx} className="flex items-center space-x-2 text-xs">
+        {pendingRebalances.slice(0, 3).map((rebalance) => (
+          <li key={rebalance.txHash} className="flex items-center space-x-2 text-xs">
             <span className="rounded bg-white font-mono">{rebalance.txHash.slice(0, 12)}...</span>
             {rebalance.messageId && (
               <Link

src/features/messages/cards/ContentDetailsCard.tsx

@@ -37,16 +37,17 @@ export function ContentDetailsCard({
 }: Props) {
   const multiProvider = useMultiProvider();
   const [bodyDecodeType, setBodyDecodeType] = useState<string>(decodedBody ? 'utf8' : 'hex');
+  const [prevDecodedBody, setPrevDecodedBody] = useState(decodedBody);
+  if (decodedBody !== prevDecodedBody) {
+    setPrevDecodedBody(decodedBody);
+    if (decodedBody) setBodyDecodeType('utf8');
+  }
   const [blockExplorerAddressUrls, setBlockExplorerAddressUrls] = useState<
     BlockExplorerAddressUrls | undefined
   >(undefined);
 
   const formattedRecipient = formatAddress(recipient, destinationDomainId, multiProvider);
   const formattedSender = formatAddress(sender, originDomainId, multiProvider);
-
-  useEffect(() => {
-    if (decodedBody) setBodyDecodeType('utf8');
-  }, [decodedBody]);
   const onChangeBodyDecode = (value: string) => {
     setBodyDecodeType(value);
   };
@@ -143,7 +144,7 @@ export function ContentDetailsCard({
       </div>
       <div>
         <div className="flex items-center">
-          <label className="text-sm text-gray-500">Message Content:</label>
+          <span className="text-sm text-gray-500">Message Content:</span>
           <SelectField
             classes="w-16 h-7 py-0.5 ml-3 mb-0.5"
             options={decodeOptions}

src/features/messages/cards/GasDetailsCard.tsx

@@ -15,13 +15,15 @@ import { GasPayment } from '../../debugger/types';
 
 import { KeyValueRow } from './KeyValueRow';
 
+const EMPTY_IGP_PAYMENTS: AddressTo<GasPayment[]> = {};
+
 interface Props {
   message: Message;
   igpPayments?: AddressTo<GasPayment[]>;
   blur: boolean;
 }
 
-export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
+export function GasDetailsCard({ message, blur, igpPayments = EMPTY_IGP_PAYMENTS }: Props) {
   const multiProvider = useMultiProvider();
   const unitOptions = useMemo(() => {
     const originMetadata = multiProvider.tryGetChainMetadata(message.originDomainId);
@@ -157,7 +159,7 @@ function IgpPaymentsTable({ payments }: { payments: Array<GasPayment & { contrac
       </thead>
       <tbody>
         {payments.map((p, i) => (
-          <tr key={`igp-payment-${i}`}>
+          <tr key={`${p.contract}-${p.gasAmount}-${i}`}>
             <td className={style.td}>{p.contract}</td>
             <td className={style.td}>{p.gasAmount}</td>
             <td className={style.td}>{p.paymentAmount}</td>

src/features/messages/cards/IcaDetailsCard.tsx

@@ -64,10 +64,10 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
           />
           {decodeResult.calls.length ? (
             decodeResult.calls.map((c, i) => (
-              <div key={`ica-call-${i}`}>
-                <label className="text-sm text-gray-500">{`Function call ${i + 1} of ${
+              <div key={`${c.destinationAddress}-${i}`}>
+                <span className="text-sm text-gray-500">{`Function call ${i + 1} of ${
                   decodeResult.calls.length
-                }:`}</label>
+                }:`}</span>
                 <div className="mt-2 space-y-2.5 border-l-2 border-gray-400 pl-4">
                   <KeyValueRow
                     label="Destination address:"
@@ -90,7 +90,7 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
             ))
           ) : (
             <div>
-              <label className="text-sm text-gray-500">Call List:</label>
+              <span className="text-sm text-gray-500">Call List:</span>
               <div className="mt-1 text-sm italic">No calls found for this message.</div>
             </div>
           )}

src/features/messages/cards/WarpTransferDetailsCard.tsx

@@ -28,21 +28,23 @@ export function WarpTransferDetailsCard({ message, warpRouteDetails, blur }: Pro
   > => {
     if (!warpRouteDetails) return undefined;
 
-    const originToken = await tryGetBlockExplorerAddressUrl(
-      multiProvider,
-      message.originChainId,
-      warpRouteDetails.originToken.addressOrDenom,
-    );
-    const destinationToken = await tryGetBlockExplorerAddressUrl(
-      multiProvider,
-      message.destinationChainId,
-      warpRouteDetails.destinationToken.addressOrDenom,
-    );
-    const transferRecipient = await tryGetBlockExplorerAddressUrl(
-      multiProvider,
-      message.destinationChainId,
-      warpRouteDetails.transferRecipient,
-    );
+    const [originToken, destinationToken, transferRecipient] = await Promise.all([
+      tryGetBlockExplorerAddressUrl(
+        multiProvider,
+        message.originChainId,
+        warpRouteDetails.originToken.addressOrDenom,
+      ),
+      tryGetBlockExplorerAddressUrl(
+        multiProvider,
+        message.destinationChainId,
+        warpRouteDetails.destinationToken.addressOrDenom,
+      ),
+      tryGetBlockExplorerAddressUrl(
+        multiProvider,
+        message.destinationChainId,
+        warpRouteDetails.transferRecipient,
+      ),
+    ]);
     return { originToken, destinationToken, transferRecipient };
   }, [message, multiProvider, warpRouteDetails]);
 

src/pages/api/og.tsx

@@ -295,6 +295,7 @@ export default async function handler(req: NextRequest) {
         {/* Sparkle background */}
         <img
           src={backgroundUrl}
+          alt=""
           style={{
             position: 'absolute',
             top: '-75%',