0xtrails 0.2.4 → 0.2.6

package/src/widget/components/PriceImpactWarning.tsx

@@ -1,6 +1,6 @@
 import type React from "react"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { Tooltip } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
 
 interface PriceImpactWarningProps {
   quote?: PrepareSendQuote | null

package/src/widget/components/QuoteDetails.tsx

@@ -1,5 +1,6 @@
 import { TokenImage } from "./TokenImage.js"
-import { InfoIcon, Tooltip } from "@0xsequence/design-system"
+import { InfoIcon } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
 import type React from "react"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
@@ -7,6 +8,7 @@ import { useState, useEffect, useRef } from "react"
 import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
+import { FeeBreakdown } from "./FeeBreakdown.js"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -14,6 +16,7 @@ interface QuoteDetailsProps {
   children?: React.ReactNode
   onExpand?: (isExpanded: boolean) => void
   swapMode?: boolean
+  compact?: boolean
 }
 
 // Helper function to format completion time
@@ -44,6 +47,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   children,
   onExpand,
   swapMode,
+  compact = false,
 }) => {
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
@@ -83,12 +87,12 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
 
       {/* More Details Button - only visible when collapsed */}
       {!isExpanded && (
-        <div className={`flex justify-center ${swapMode ? "" : "mb-4"}`}>
+        <div className={`flex justify-center`}>
           {swapMode ? (
             <button
               type="button"
               onClick={() => setIsExpanded(true)}
-              className="w-full flex items-center justify-between py-2 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600"
+              className="w-full flex items-center justify-between py-2 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs"
               aria-label="Show more details"
             >
               <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 whitespace-nowrap max-w-48 truncate">
@@ -161,10 +165,10 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             <button
               type="button"
               onClick={() => setIsExpanded(true)}
-              className="w-full flex items-center justify-center gap-2 py-1 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-              aria-label="Show more details"
+              className={`w-full max-w-md flex items-center ${compact ? "justify-center" : "justify-between"} gap-2 py-1 px-1 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300`}
+              aria-label="Show transaction details"
             >
-              <span>More Details</span>
+              <span>Transaction details</span>
               <svg
                 className="w-3 h-3 transition-transform duration-300 ease-out"
                 fill="none"
@@ -191,9 +195,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
           isExpanded ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="p-4 rounded-lg text-sm space-y-4 trails-bg-secondary">
+        <div
+          className={`text-sm ${swapMode ? "p-2 space-y-2" : "p-4 rounded-lg space-y-4 trails-bg-secondary"}`}
+        >
           {/* Close Button - only visible when expanded, at top center */}
-          <div className="flex justify-center mb-4 -mt-2">
+          <div className={`flex justify-center mb-4 -mt-2`}>
             {swapMode ? (
               <button
                 type="button"
@@ -367,6 +373,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             imageUrl={quote.originToken.imageUrl}
                             symbol={quote.originToken.symbol}
                             chainId={quote.originChain.id}
+                            contractAddress={quote.originToken.contractAddress}
                             size={16}
                           />
                           {quote.originAmountDisplay} {quote.originToken.symbol}
@@ -393,6 +400,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               imageUrl={quote.originToken.imageUrl}
                               symbol={quote.originToken.symbol}
                               chainId={quote.originChain.id}
+                              contractAddress={
+                                quote.originToken.contractAddress
+                              }
                               size={16}
                             />
                             {quote.originAmountDisplay}{" "}
@@ -430,6 +440,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             imageUrl={quote.destinationToken.imageUrl}
                             symbol={quote.destinationToken.symbol}
                             chainId={quote.destinationChain.id}
+                            contractAddress={
+                              quote.destinationToken.contractAddress
+                            }
                             size={16}
                           />
                           {quote.destinationAmountDisplay}{" "}
@@ -457,6 +470,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               imageUrl={quote.destinationToken.imageUrl}
                               symbol={quote.destinationToken.symbol}
                               chainId={quote.destinationChain.id}
+                              contractAddress={
+                                quote.destinationToken.contractAddress
+                              }
                               size={16}
                             />
                             {quote.destinationAmountDisplay}{" "}
@@ -651,7 +667,22 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 )
               })()}
 
-            {quote?.fees?.totalFeeAmountUsd != null && (
+            {/* Total Fees with optional breakdown */}
+            {quote?.trailsFeeBreakdown ? (
+              <FeeBreakdown feeBreakdown={quote.trailsFeeBreakdown}>
+                <div className="flex justify-between items-center w-full">
+                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 w-full">
+                    Total Fees:
+                    <Tooltip message="The total fees charged for this transaction, including gas fees, bridge fees, and any platform fees. These fees are deducted from your transaction.">
+                      <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                    </Tooltip>
+                  </span>
+                  <span className="font-medium text-xs text-gray-900 dark:text-white">
+                    {quote.fees.totalFeeAmountUsdDisplay}
+                  </span>
+                </div>
+              </FeeBreakdown>
+            ) : quote?.fees?.totalFeeAmountUsd != null ? (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   Total Fees:
@@ -663,9 +694,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                   {quote.fees.totalFeeAmountUsdDisplay}
                 </span>
               </div>
-            )}
+            ) : null}
 
-            {quote?.quoteProvider && (
+            {quote?.quoteProvider?.name && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   {quote.originChain.id === quote.destinationChain.id
@@ -766,7 +797,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             )}
 
             {/* Children content */}
-            {children && <div className="space-y-2">{children}</div>}
+            {children && <div className="mb-0">{children}</div>}
           </div>
         </div>
       </div>

package/src/widget/components/Receipt.tsx

@@ -13,6 +13,7 @@ import { truncateAddress } from "../../utils.js"
 import { formatElapsed } from "../../utils.js"
 import { ChainImage } from "./ChainImage.js"
 import { getChainInfo } from "../../chains.js"
+import { useMode } from "../hooks/useMode.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -86,6 +87,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   quote,
   showCloseButton,
 }) => {
+  const { mode } = useMode()
   const [showContent, setShowContent] = useState(false)
   const [showRefundInfo, setShowRefundInfo] = useState(false)
   const [refundMessage, setRefundMessage] = useState<string | ReactNode | null>(
@@ -111,6 +113,18 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return transactionStates.some((tx) => hasMetaTxError(tx))
   }, [transactionStates, hasMetaTxError])
 
+  const buttonText = useMemo(() => {
+    if (mode === "pay") {
+      return "Pay Again"
+    } else if (mode === "fund") {
+      return "Fund Again"
+    } else if (mode === "swap") {
+      return "Swap Again"
+    } else {
+      return "Send Again"
+    }
+  }, [mode])
+
   const {
     finalExplorerUrl,
     finalChainId,
@@ -154,7 +168,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   // Extract QuoteDetails section to reuse in both success and failure states
   const quoteDetailsSection = quote && (
     <div className="mt-2">
-      <QuoteDetails quote={quote} showContent={true}>
+      <QuoteDetails quote={quote} showContent={true} compact={true}>
         {transactionStates.length > 0 && (
           <>
             <div className="font-medium text-gray-700 dark:text-gray-300">
@@ -477,7 +491,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
               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
+              {buttonText}
               <ChevronRight className="w-4 h-4" />
             </button>
           </div>

package/src/widget/components/Receive.tsx

@@ -60,7 +60,6 @@ export const Receive: React.FC<ReceiveProps> = ({
           onBack={onBack}
           headerContent="Receive"
           headerContentAlign="left"
-          showAccountActions={true}
         />
 
         <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
@@ -97,7 +96,6 @@ export const Receive: React.FC<ReceiveProps> = ({
         onBack={onBack}
         headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
         headerContentAlign="left"
-        showAccountActions={true}
       />
 
       <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">

package/src/widget/components/RecipientSelectorButton.tsx

@@ -0,0 +1,44 @@
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { truncateAddress } from "../../utils.js"
+import { Identicon } from "./Identicon.js"
+import { useBack } from "../hooks/useBack.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+
+export const RecipientSelectorButton: React.FC = () => {
+  const { setCurrentScreenWithBack } = useBack()
+  const { selectedRecipient } = useSelectedRecipient()
+
+  const handleClick = () => {
+    setCurrentScreenWithBack("recipients")
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
+      title={
+        selectedRecipient
+          ? `Selected: ${selectedRecipient}`
+          : "Select recipient"
+      }
+    >
+      {selectedRecipient ? (
+        <>
+          <div className="flex items-center mr-1">
+            <Identicon value={selectedRecipient} size={16} />
+          </div>
+          <span className="text-sm font-medium m-0">
+            {truncateAddress(selectedRecipient, 4, 4)}
+          </span>
+        </>
+      ) : (
+        <span className="text-sm font-medium m-0">Select Recipient</span>
+      )}
+      <ChevronRight className="w-4 h-4 m-0" />
+    </button>
+  )
+}
+
+export default RecipientSelectorButton

package/src/widget/components/Recipients.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from "react"
 import type React from "react"
 import { isAddress } from "viem"
-import { Copy, RotateCcw } from "lucide-react"
+import { Copy, RotateCcw, ChevronRight } from "lucide-react"
 import { useAccount, useConnections } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { SearchInputField } from "./SearchInputField.js"
@@ -12,8 +12,8 @@ import { useRecipients, type RecentRecipient } from "../hooks/useRecipients.js"
 import { useResolveEnsAddress, useResolveEnsName } from "../../ens.js"
 import { truncateAddress } from "../../utils.js"
 import { logger } from "../../logger.js"
-import { useMode } from "../hooks/useMode.js"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { ConnectedWallets } from "./ConnectedWallets.js"
 
 interface RecipientsProps {
   onBack?: () => void
@@ -26,7 +26,6 @@ export const Recipients: React.FC<RecipientsProps> = ({
   selectedRecipient = "",
   onRecipientSelect,
 }) => {
-  const { mode } = useMode()
   const { setCurrentScreen } = useCurrentScreen()
   const { setSelectedRecipient } = useSelectedRecipient()
   const { recentRecipients, addRecentRecipient, clearRecentRecipients } =
@@ -136,9 +135,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       logger.console.log("[trails-sdk] Selected recent recipient:", recipient)
       setSelectedRecipient(recipient.address)
       onRecipientSelect?.(recipient.address)
-      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+      setCurrentScreen("home")
     },
-    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen],
   )
 
   // Handle connected wallet selection
@@ -150,9 +149,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       )
       setSelectedRecipient(walletAddress)
       onRecipientSelect?.(walletAddress)
-      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+      setCurrentScreen("home")
     },
-    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen],
   )
 
   // Handle copy to clipboard with success indication
@@ -202,7 +201,6 @@ export const Recipients: React.FC<RecipientsProps> = ({
         onBack={onBack}
         headerContent="Recipient address"
         headerContentAlign="left"
-        showAccountActions={true}
       />
 
       <div className="space-y-4">
@@ -223,14 +221,23 @@ export const Recipients: React.FC<RecipientsProps> = ({
           )}
         </div>
 
+        {/* Connected Wallets - only show when no input */}
+        {connectedWallets.length > 0 && !recipientInput.trim() && (
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            onWalletSelect={handleConnectedWalletSelect}
+            backScreen="recipients"
+          />
+        )}
+
         {/* Recent Recipients */}
         {recentRecipients.length > 0 && (
           <div className="space-y-2">
-            <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
-              Recents
+            <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left">
+              Recent wallets
             </div>
-            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
-              {recentRecipients.map((recipient) => {
+            <div className="trails-border-radius-container border trails-border-primary">
+              {recentRecipients.map((recipient, index) => {
                 // Only highlight if search field contains a valid address that matches this recipient
                 const searchQuery = recipientInput.trim()
                 const isHighlighted =
@@ -240,53 +247,51 @@ export const Recipients: React.FC<RecipientsProps> = ({
                     searchQuery.trim().toLowerCase()
 
                 return (
-                  <button
-                    key={recipient.address}
-                    type="button"
-                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
-                      isHighlighted
-                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
-                        : "trails-list-item"
-                    }`}
-                    onClick={() => handleRecentRecipientSelect(recipient)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleRecentRecipientSelect(recipient)
-                      }
-                    }}
-                    aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
-                  >
-                    {/* Identicon */}
-                    <div className="relative flex-shrink-0 mr-2">
-                      <Identicon
-                        value={recipient.address}
-                        size={32}
-                        className="flex-shrink-0"
-                      />
-                    </div>
-
-                    <div className="flex-1 min-w-0 text-left">
-                      <div className="flex items-start">
-                        <div className="flex-1">
-                          <div className="flex items-center">
-                            <span className="text-sm font-medium text-gray-900 dark:text-white">
+                  <div key={recipient.address}>
+                    <button
+                      type="button"
+                      className={`w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors ${
+                        isHighlighted
+                          ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
+                          : "trails-text-primary trails-hover-bg"
+                      }`}
+                      onClick={() => handleRecentRecipientSelect(recipient)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          handleRecentRecipientSelect(recipient)
+                        }
+                      }}
+                      aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Identicon
+                          value={recipient.address}
+                          size={32}
+                          className="flex-shrink-0"
+                        />
+                        <div className="text-left">
+                          <div className="flex items-center space-x-1">
+                            <span className="text-sm font-bold">
                               {truncateAddress(recipient.address, 8, 4)}
                             </span>
-                            <button
-                              type="button"
-                              onClick={(e) =>
+                            <div
+                              onClick={(e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
                                 handleCopyAddress(recipient.address, e)
-                              }
-                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
+                              }}
+                              onMouseDown={(e) => e.stopPropagation()}
+                              onMouseUp={(e) => e.stopPropagation()}
+                              className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
                                 copiedAddress === recipient.address
-                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
+                                  ? "bg-green-100 dark:bg-green-900/30"
                                   : "hover:bg-gray-200 dark:hover:bg-gray-600"
                               }`}
                               title={
                                 copiedAddress === recipient.address
                                   ? "Copied!"
-                                  : "Copy address"
+                                  : "Copy full address"
                               }
                             >
                               {copiedAddress === recipient.address ? (
@@ -308,7 +313,7 @@ export const Recipients: React.FC<RecipientsProps> = ({
                               ) : (
                                 <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
                               )}
-                            </button>
+                            </div>
                           </div>
                           {recipient.ensName && (
                             <div className="text-xs text-gray-500 dark:text-gray-400">
@@ -317,112 +322,13 @@ export const Recipients: React.FC<RecipientsProps> = ({
                           )}
                         </div>
                       </div>
-                    </div>
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-        )}
-
-        {/* Connected Wallets - only show when no input */}
-        {connectedWallets.length > 0 && !recipientInput.trim() && (
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
-                Connected Wallets
-              </div>
-            </div>
-            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
-              {connectedWallets.map((wallet) => {
-                // Only highlight if search field contains a valid address that matches this wallet
-                const searchQuery = recipientInput.trim()
-                const isHighlighted =
-                  searchQuery &&
-                  isAddress(searchQuery) &&
-                  wallet.address.toLowerCase() ===
-                    searchQuery.trim().toLowerCase()
-
-                return (
-                  <button
-                    key={wallet.address}
-                    type="button"
-                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
-                      isHighlighted
-                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
-                        : "trails-list-item"
-                    }`}
-                    onClick={() => handleConnectedWalletSelect(wallet.address)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleConnectedWalletSelect(wallet.address)
-                      }
-                    }}
-                    aria-label={`Select wallet ${wallet.walletConfig?.name || "Wallet"} - ${wallet.address}`}
-                  >
-                    {/* Identicon */}
-                    <div className="relative flex-shrink-0 mr-2">
-                      <Identicon
-                        value={wallet.address}
-                        size={32}
-                        className="flex-shrink-0"
-                      />
-                    </div>
-
-                    <div className="flex-1 min-w-0 text-left">
-                      <div className="flex items-start">
-                        <div className="flex-1">
-                          <div className="flex items-center">
-                            <span className="text-sm font-medium text-gray-900 dark:text-white">
-                              {truncateAddress(wallet.address, 8, 4)}
-                            </span>
-                            <button
-                              type="button"
-                              onClick={(e) =>
-                                handleCopyAddress(wallet.address, e)
-                              }
-                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
-                                copiedAddress === wallet.address
-                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
-                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                              }`}
-                              title={
-                                copiedAddress === wallet.address
-                                  ? "Copied!"
-                                  : "Copy address"
-                              }
-                            >
-                              {copiedAddress === wallet.address ? (
-                                <svg
-                                  className="w-3 h-3 text-green-600 dark:text-green-400"
-                                  fill="none"
-                                  viewBox="0 0 24 24"
-                                  stroke="currentColor"
-                                  aria-label="Copied"
-                                >
-                                  <title>Copied</title>
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M5 13l4 4L19 7"
-                                  />
-                                </svg>
-                              ) : (
-                                <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
-                              )}
-                            </button>
-                          </div>
-                          <div className="text-xs text-gray-500 dark:text-gray-400">
-                            {wallet.walletConfig?.name ||
-                              wallet.connector?.name ||
-                              "Wallet"}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </button>
+                      <ChevronRight className="w-5 h-5 text-gray-400" />
+                    </button>
+                    {/* Add divider between items */}
+                    {index < recentRecipients.length - 1 && (
+                      <div className="border-b border-gray-200 dark:border-gray-700"></div>
+                    )}
+                  </div>
                 )
               })}
             </div>

package/src/widget/components/RequiredPropsError.tsx

@@ -0,0 +1,33 @@
+import type React from "react"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+
+interface RequiredPropsErrorProps {
+  missingProps: string[]
+  componentName: string
+}
+
+export const RequiredPropsError: React.FC<RequiredPropsErrorProps> = ({
+  missingProps,
+  componentName,
+}) => {
+  if (missingProps.length === 0) {
+    return null
+  }
+
+  const isMultiple = missingProps.length > 1
+
+  const prettifiedMessage = `Missing required ${componentName} prop${isMultiple ? "s" : ""}`
+
+  const detailedMessage = `The following required props are missing for the ${componentName} component:
+${missingProps.map((prop) => `- ${prop}`).join("\n")}
+
+Please ensure all required props are provided when rendering the ${componentName} component.`
+
+  return (
+    <ErrorDisplay
+      errorPrettified={prettifiedMessage}
+      error={detailedMessage}
+      severity="error"
+    />
+  )
+}