0xtrails 0.1.3 → 0.1.4

package/src/widget/components/Receipt.tsx

@@ -1,13 +1,16 @@
 import { useQuery } from "@tanstack/react-query"
 import type React from "react"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useCallback, useMemo } from "react"
+import { ChevronRight } from "lucide-react"
 import type { TransactionState } from "../../transactions.js"
 import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
+import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
 import { getTxTimeDiff } from "../../transactions.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { truncateAddress } from "../../address.js"
 import { formatElapsed } from "../../utils.js"
+import { ChainImage } from "./ChainImage.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -55,8 +58,9 @@ function useTxTimeDiff(firstTx?: TransactionState, lastTx?: TransactionState) {
 
 // Custom hook to compute finalExplorerUrl and completionTimeSeconds
 function useReceipt(transactionStates?: TransactionState[]) {
-  const finalExplorerUrl =
-    transactionStates?.[transactionStates.length - 1]?.explorerUrl
+  const lastTx = transactionStates?.[transactionStates.length - 1]
+  const finalExplorerUrl = lastTx?.explorerUrl
+  const finalChainId = lastTx?.chainId
 
   // Only consider confirmed transactions
   const confirmedTxs = (transactionStates || []).filter(
@@ -67,10 +71,11 @@ function useReceipt(transactionStates?: TransactionState[]) {
   const last = confirmedTxs[confirmedTxs.length - 1]
 
   const completionTimeSeconds = useTxTimeDiff(first, last)
-  return { finalExplorerUrl, completionTimeSeconds }
+  return { finalExplorerUrl, completionTimeSeconds, finalChainId }
 }
 
 export const Receipt: React.FC<ReceiptProps> = ({
+  onSendAnother,
   onClose,
   renderInline = false,
   transactionStates = [],
@@ -78,6 +83,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
   quote,
 }) => {
   const [showContent, setShowContent] = useState(false)
+  const [showRefundInfo, setShowRefundInfo] = useState(false)
+  const [refundMessage, setRefundMessage] = useState<string | null>(null)
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -87,13 +94,155 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return () => clearTimeout(timer)
   }, [])
 
-  const { finalExplorerUrl, completionTimeSeconds: calculatedCompletionTime } =
-    useReceipt(transactionStates)
+  // Helper function to check if a specific transaction has meta tx errors
+  const hasMetaTxError = useCallback((tx: TransactionState) => {
+    return tx?.decodedGuestModuleEvents?.some(
+      (event) => event.type === "CallFailed",
+    )
+  }, [])
+
+  const showMetaTxError = useMemo(() => {
+    return transactionStates.some((tx) => hasMetaTxError(tx))
+  }, [transactionStates, hasMetaTxError])
+
+  const {
+    finalExplorerUrl,
+    finalChainId,
+    completionTimeSeconds: calculatedCompletionTime,
+  } = useReceipt(transactionStates)
 
   // Use provided totalCompletionSeconds if available, otherwise use calculated time
   const completionTimeSeconds =
     totalCompletionSeconds ?? calculatedCompletionTime
 
+  // Detect successful refund events on origin or sweep on destination
+  useEffect(() => {
+    if (!transactionStates || transactionStates.length === 0) return
+
+    const originTx = transactionStates[0]
+    const destinationTx = transactionStates[transactionStates.length - 1]
+
+    // Check if this is a same-chain transaction (all transactions on same chain)
+    const isSameChain =
+      transactionStates.length <= 2 &&
+      transactionStates.every((tx) => tx.chainId === originTx?.chainId)
+
+    const originRefund = originTx?.decodedTrailsTokenSweeperEvents?.find(
+      (e) => e.type === "Refund",
+    )
+
+    // Only check destination sweep for cross-chain transactions
+    const destinationSweep = !isSameChain
+      ? destinationTx?.decodedTrailsTokenSweeperEvents?.find(
+          (e) => e.type === "Sweep",
+        )
+      : null
+
+    if (originRefund) {
+      setRefundMessage(
+        "The origin call failed, but your funds were successfully refunded on the origin chain.",
+      )
+      setShowRefundInfo(true)
+      return
+    }
+
+    if (destinationSweep) {
+      setRefundMessage(
+        "The destination call failed, but a refund was successfully handled on the destination chain.",
+      )
+      setShowRefundInfo(true)
+      return
+    }
+
+    setShowRefundInfo(false)
+    setRefundMessage(null)
+  }, [transactionStates])
+
+  // Extract QuoteDetails section to reuse in both success and failure states
+  const quoteDetailsSection = quote && (
+    <div className="mt-2">
+      <QuoteDetails quote={quote} showContent={true}>
+        {transactionStates.length > 0 && (
+          <>
+            <div className="font-medium text-gray-700 dark:text-gray-300">
+              Transactions:
+            </div>
+            <div className="space-y-2">
+              {transactionStates.map((state, i) => (
+                <div
+                  key={`${state.transactionHash}-${i}`}
+                  className="p-2 rounded bg-gray-100 dark:bg-gray-700/50"
+                >
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      {state.label}:
+                    </span>
+                    <span
+                      className={`px-2 py-0.5 rounded-full text-xs ${
+                        state.state === "confirmed"
+                          ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
+                          : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
+                      }`}
+                    >
+                      {state.state.charAt(0).toUpperCase() +
+                        state.state.slice(1)}
+                    </span>
+                  </div>
+                  <div className="mt-1 flex justify-between items-center">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Hash:
+                    </span>
+                    <a
+                      href={state.explorerUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                    >
+                      {hasMetaTxError(state) && (
+                        <svg
+                          className="w-4 h-4 text-orange-500"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <title>
+                            An internal meta transaction failure occurred
+                          </title>
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                          />
+                        </svg>
+                      )}
+                      <ChainImage chainId={state.chainId} size={16} />
+                      <span>{truncateAddress(state.transactionHash)}</span>
+                      <svg
+                        className="w-3 h-3"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <title>External Link</title>
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        />
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </QuoteDetails>
+    </div>
+  )
+
   if (!finalExplorerUrl) {
     return (
       <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
@@ -126,6 +275,21 @@ export const Receipt: React.FC<ReceiptProps> = ({
           </p>
         </div>
 
+        {onSendAnother && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onSendAnother}
+              className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 trails-border-radius-button transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer font-medium"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+
+        {/* Quote Details - Show even in failed state */}
+        {quoteDetailsSection}
+
         {!renderInline && (
           <div className="text-center">
             <button
@@ -145,15 +309,24 @@ export const Receipt: React.FC<ReceiptProps> = ({
     <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
       <div className="text-center mb-2">
         <div className={`mx-auto flex items-center justify-center`}>
-          <GreenCheckAnimation />
+          {showRefundInfo || showMetaTxError ? (
+            <YellowWarningAnimation />
+          ) : (
+            <GreenCheckAnimation />
+          )}
         </div>
 
         <div
           className={`transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
         >
           <h2 className="mt-4 text-2xl font-bold text-gray-900 dark:text-white">
-            Completed
+            {showRefundInfo ? "Unable to process." : "Completed"}
           </h2>
+          {showRefundInfo && (
+            <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-1 justify-center animate-fade-in-up">
+              Refunded.
+            </div>
+          )}
           {completionTimeSeconds > 0 && (
             <div
               className="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-center animate-fade-in-up"
@@ -162,28 +335,37 @@ export const Receipt: React.FC<ReceiptProps> = ({
                 animationFillMode: "both",
               }}
             >
-              <span className="inline-block animate-fade-in-up">
-                Completed in{" "}
-                <strong>{formatElapsed(completionTimeSeconds)}</strong>
-              </span>
-              {totalCompletionSeconds && totalCompletionSeconds < 15 && (
-                <svg
-                  className="w-4 h-4 ml-1 text-yellow-400 inline"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <title>Lightning Fast</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                    fill="currentColor"
-                  />
-                </svg>
-              )}
+              <div className="inline-block animate-fade-in-up">
+                {showRefundInfo ? (
+                  <span>Transaction confirmed</span>
+                ) : (
+                  <span>
+                    Completed in{" "}
+                    <strong>{formatElapsed(completionTimeSeconds)}</strong>
+                  </span>
+                )}
+              </div>
+              {totalCompletionSeconds &&
+                totalCompletionSeconds < 15 &&
+                !showMetaTxError &&
+                !showRefundInfo && (
+                  <svg
+                    className="w-4 h-4 ml-1 text-yellow-400 inline"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <title>Lightning Fast</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                )}
               <style>{`
                 @keyframes fadeInUp {
                   0% { opacity: 0; transform: translateY(16px); }
@@ -192,6 +374,33 @@ export const Receipt: React.FC<ReceiptProps> = ({
               `}</style>
             </div>
           )}
+
+          {(showMetaTxError || showRefundInfo) && (
+            <div
+              className="mt-2 text-sm text-orange-600 dark:text-orange-400 flex items-center gap-2 justify-center animate-fade-in-up"
+              style={{
+                animation: "fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1)",
+                animationFillMode: "both",
+              }}
+            >
+              <svg
+                className="w-4 h-4 text-orange-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <title>Internal Meta Transaction Error</title>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+              <span>Although one or more errors occurred</span>
+            </div>
+          )}
         </div>
       </div>
 
@@ -204,6 +413,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1 px-3 py-1.5 rounded-md font-medium transition-colors border border-solid text-sm bg-white border-gray-200 text-black hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-900 dark:border-gray-700 dark:text-blue-300 dark:hover:bg-gray-800 dark:hover:text-blue-200"
         >
+          {finalChainId && <ChainImage chainId={finalChainId} size={16} />}
           View on Explorer
           <svg
             className="w-4 h-4 ml-1 text-black dark:text-blue-300"
@@ -222,9 +432,64 @@ export const Receipt: React.FC<ReceiptProps> = ({
         </a>
       </div>
 
+      {showRefundInfo && refundMessage && (
+        <div
+          className="mt-2 text-sm text-yellow-700 dark:text-yellow-400 flex items-center gap-2 justify-center animate-fade-in-up"
+          style={{
+            animation: "fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1)",
+            animationFillMode: "both",
+          }}
+        >
+          <div className="rounded-xl bg-warning">
+            <div className="flex bg-background-overlay rounded-xl p-4 w-full flex-col gap-3">
+              <div className="flex w-full gap-2 justify-between">
+                <div className="flex flex-col gap-1">
+                  <div className="text-sm font-medium text-gray-900 dark:text-white text-left">
+                    Refund Information
+                  </div>
+                  <div className="text-sm text-gray-700 dark:text-gray-300 text-left">
+                    {refundMessage}
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <svg
+                    className="w-5 h-5 text-yellow-600 dark:text-yellow-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <title>Information</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div
         className={`space-y-3 transition-all duration-500 ease-out delay-200 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
       >
+        {onSendAnother && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onSendAnother}
+              className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 trails-border-radius-button transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer font-medium"
+            >
+              Send Again
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+
         {!renderInline && (
           <button
             type="button"
@@ -236,79 +501,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
         )}
 
         {/* Quote Details */}
-        {quote && (
-          <div className="mt-2">
-            <QuoteDetails quote={quote} showContent={true}>
-              {transactionStates.length > 0 && (
-                <>
-                  <div className="font-medium text-gray-700 dark:text-gray-300">
-                    Transactions:
-                  </div>
-                  <div className="space-y-2">
-                    {transactionStates.map((state) => (
-                      <div
-                        key={state.transactionHash}
-                        className="p-2 rounded bg-gray-100 dark:bg-gray-700/50"
-                      >
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            {state.label}:
-                          </span>
-                          <span
-                            className={`px-2 py-0.5 rounded-full text-xs ${
-                              state.state === "confirmed"
-                                ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
-                                : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
-                            }`}
-                          >
-                            {state.state}
-                          </span>
-                        </div>
-                        <div className="mt-1 flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            Chain ID:
-                          </span>
-                          <span className="text-gray-900 dark:text-white">
-                            {state.chainId}
-                          </span>
-                        </div>
-                        <div className="mt-1 flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            Hash:
-                          </span>
-                          <a
-                            href={state.explorerUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                          >
-                            <span>
-                              {truncateAddress(state.transactionHash)}
-                            </span>
-                            <svg
-                              className="w-3 h-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <title>External Link</title>
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                              />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-            </QuoteDetails>
-          </div>
-        )}
+        {quoteDetailsSection}
       </div>
     </div>
   )

package/src/widget/components/Receive.tsx

@@ -0,0 +1,146 @@
+import type React from "react"
+import { useMemo } from "react"
+import { QrCode } from "./QrCode.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { getExplorerUrlForAddress } from "../../explorer.js"
+import { ExternalLink } from "lucide-react"
+import { truncateAddress } from "../../address.js"
+import { useResolveEnsName } from "../../ens.js"
+
+interface ReceiveProps {
+  accountAddress: string
+  onBack: () => void
+  isConnected?: boolean
+  onConnectWallet?: () => void
+  onPay?: () => void
+  toChainId?: number
+}
+
+export const Receive: React.FC<ReceiveProps> = ({
+  accountAddress,
+  onBack,
+  isConnected = false,
+  onConnectWallet,
+  onPay,
+  toChainId,
+}) => {
+  // Use the provided address directly
+  const resolvedAddress = accountAddress
+
+  // Resolve ENS name from the address
+  const { ensName } = useResolveEnsName({
+    address: accountAddress,
+  })
+
+  // Generate QR code URL for the address
+  const qrCodeUrl = useMemo(() => {
+    if (!resolvedAddress) return ""
+    return `ethereum:${resolvedAddress}`
+  }, [resolvedAddress])
+
+  // Check if accountAddress is provided
+  if (!accountAddress) {
+    return (
+      <div className="space-y-6">
+        <ScreenHeader
+          onBack={onBack}
+          headerContent="Receive"
+          headerContentAlign="center"
+        />
+
+        <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+          <div className="text-center p-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/50 rounded-lg">
+            <div className="flex items-center justify-center space-x-2 text-amber-600 dark:text-amber-400">
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+              <span className="font-medium">Account address is required</span>
+            </div>
+            <p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
+              Please provide an account address as <code>toAddress</code> to
+              generate the receive QR code.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
+        headerContentAlign="center"
+      />
+
+      <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">
+        {/* QR Code Section */}
+        <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="flex justify-center">
+            <div className="flex flex-col items-center">
+              <QrCode url={qrCodeUrl} size={300} />
+            </div>
+          </div>
+
+          {/* Address Display */}
+          <div className="flex flex-col items-center justify-center gap-1 pt-2">
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                Address:
+              </span>
+              <a
+                href={getExplorerUrlForAddress({
+                  address: resolvedAddress,
+                  chainId: toChainId || 1,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
+              >
+                <span>{truncateAddress(resolvedAddress)}</span>
+                <ExternalLink className="w-3 h-3" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Connect Wallet Button - Only show when not connected */}
+        {!isConnected && onConnectWallet && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onConnectWallet}
+              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
+            >
+              Connect Wallet
+            </button>
+          </div>
+        )}
+
+        {/* Pay Button - Only show when connected */}
+        {isConnected && onPay && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onPay}
+              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-blue-500 hover:bg-blue-600 text-white"
+            >
+              Pay
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/widget/components/RecentTokens.tsx

@@ -27,7 +27,7 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
 
   return (
     <div className="mb-0">
-      <h3 className="text-xs font-medium text-gray-500 dark:text-gray-500">
+      <h3 className="text-xs font-medium text-gray-500 dark:text-gray-500 text-left">
         Recently Used
       </h3>
       <div className="flex gap-2 overflow-x-auto pb-1 trails-scrollbar">