0xtrails 0.1.2 → 0.1.4

package/src/widget/components/TransferPendingVertical.tsx

@@ -2,10 +2,13 @@ import { ExternalLink } from "lucide-react"
 import type React from "react"
 import { useEffect, useState } from "react"
 import type { TransactionState } from "../../transactions.js"
-import { TokenImage } from "./TokenImage.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { formatElapsed } from "../../utils.js"
+import { SwapDisplay } from "./SwapDisplay.js"
+import { OriginTransferInformation } from "./OriginTransferInformation.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { ChevronRight } from "lucide-react"
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (
@@ -37,6 +40,23 @@ const XIcon = () => (
   </svg>
 )
 
+const AlertIcon = () => (
+  <svg
+    className="w-4 h-4 text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <title>An internal meta tx 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>
+)
+
 // Spinner icon for active steps
 const SpinnerIcon = () => (
   <svg
@@ -65,6 +85,8 @@ interface TransferPendingProps {
   transactionStates: TransactionState[]
   quote?: PrepareSendQuote | null
   timestamp?: number
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
+  onContinue?: () => void
 }
 
 export const TransferPending: React.FC<TransferPendingProps> = ({
@@ -72,6 +94,8 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   transactionStates,
   quote,
   timestamp,
+  mode,
+  onContinue,
 }) => {
   const [showContent, setShowContent] = useState(false)
   const [activePendingIndex, setActivePendingIndex] = useState(-1)
@@ -80,6 +104,15 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
   const [activePendingTimer, setActivePendingTimer] = useState(0)
 
+  const showContinueButton =
+    (transactionStates?.some((tx) => tx.state === "failed") ||
+      transactionStates?.some((tx) =>
+        tx?.decodedGuestModuleEvents?.some(
+          (event) => event.type === "CallFailed",
+        ),
+      )) &&
+    onContinue
+
   useEffect(() => {
     const timeoutTimer = setTimeout(() => {
       setShowTimeoutWarning(true)
@@ -200,30 +233,6 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     onElapsedTime(elapsedSeconds)
   }, [onElapsedTime, elapsedSeconds])
 
-  // Calculate time difference
-  const getTimeAgo = () => {
-    if (!timestamp) return "Sent just now"
-
-    const now = Date.now()
-    const diffInSeconds = Math.floor((now - timestamp) / 1000)
-
-    if (diffInSeconds < 1) return "Sent just now"
-    if (diffInSeconds === 1) return "Sent 1 second ago"
-    if (diffInSeconds < 60) return `Sent ${diffInSeconds} seconds ago`
-
-    const diffInMinutes = Math.floor(diffInSeconds / 60)
-    if (diffInMinutes === 1) return "Sent 1 minute ago"
-    if (diffInMinutes < 60) return `Sent ${diffInMinutes} minutes ago`
-
-    const diffInHours = Math.floor(diffInMinutes / 60)
-    if (diffInHours === 1) return "Sent 1 hour ago"
-    if (diffInHours < 24) return `Sent ${diffInHours} hours ago`
-
-    const diffInDays = Math.floor(diffInHours / 24)
-    if (diffInDays === 1) return "Sent 1 day ago"
-    return `Sent ${diffInDays} days ago`
-  }
-
   // Compute effective states: a tx is only confirmed if all previous are confirmed, else pending
   const effectiveStates: TransactionState[] = []
   let foundUnconfirmed = false
@@ -244,13 +253,27 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     const isCompleted = tx.state === "confirmed"
     const isFailed = tx.state === "failed"
 
+    // Check if this transaction has meta tx errors
+    const hasMetaTxError = tx?.decodedGuestModuleEvents?.some(
+      (event) => event.type === "CallFailed",
+    )
+
+    // Check if any previous transaction has failed (to disable spinners after failure)
+    const hasPreviousFailure = transactionStates
+      .slice(0, index)
+      .some((prevTx) =>
+        prevTx?.decodedGuestModuleEvents?.some(
+          (event) => event.type === "CallFailed",
+        ),
+      )
+
     // Determine step state
     let stepState: "completed" | "active" | "pending" | "failed"
     if (isFailed) {
       stepState = "failed"
     } else if (isCompleted) {
       stepState = "completed"
-    } else if (isActivePending) {
+    } else if (isActivePending && !hasPreviousFailure) {
       stepState = "active"
     } else {
       stepState = "pending"
@@ -263,6 +286,9 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
 
       switch (stepState) {
         case "completed":
+          if (hasMetaTxError) {
+            return `${baseStyles} bg-orange-500 scale-100`
+          }
           return `${baseStyles} bg-green-600 dark:bg-green-500 scale-100`
         case "active":
           return `${baseStyles} bg-blue-600 dark:bg-blue-500 scale-110`
@@ -287,7 +313,8 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
         {/* Circle with state indicator */}
         <div className="flex-shrink-0">
           <div className={getCircleStyles()}>
-            {stepState === "completed" && <CheckmarkIcon />}
+            {stepState === "completed" && !hasMetaTxError && <CheckmarkIcon />}
+            {stepState === "completed" && hasMetaTxError && <AlertIcon />}
             {stepState === "failed" && <XIcon />}
             {stepState === "active" && <SpinnerIcon />}
           </div>
@@ -331,99 +358,38 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   }
 
   return (
-    <div className="space-y-8 flex flex-col items-center justify-center py-8">
-      <h2
-        className={`text-2xl font-bold transition-all duration-500 ease-out ${
-          showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-        } text-gray-900 dark:text-white`}
-      >
-        Transaction Status
-      </h2>
-
-      {/* Transfer Information */}
+    <div className="space-y-2 flex flex-col items-center justify-center py-8">
       <div
-        className={`w-full max-w-sm p-3 trails-border-radius-container transition-all duration-500 ease-out delay-100 ${
+        className={`w-full max-w-sm transition-all duration-500 ease-out ${
           showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-        } trails-bg-secondary trails-text-secondary`}
+        }`}
       >
-        <div className="flex items-start justify-between">
-          {/* Left side - Chain and Token images with token name */}
-          <div className="flex items-start space-x-2">
-            {/* Token Image and Name */}
-            <div className="flex items-center space-x-2">
-              <div style={{ width: "24px", height: "24px" }}>
-                <TokenImage
-                  imageUrl={quote?.originToken.imageUrl}
-                  symbol={quote?.originToken.symbol}
-                  chainId={quote?.originChain.id}
-                  size={24}
-                />
-              </div>
-              <div className="flex flex-col">
-                <span className="text-xs font-medium text-left text-gray-900 dark:text-white">
-                  {quote?.originToken.name}
-                </span>
-                <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                  {getTimeAgo()}
-                  <span
-                    className="ml-1 font-mono animate-pulse text-gray-500 dark:text-gray-400"
-                    title="Elapsed time"
-                  >
-                    {formatElapsed(elapsedSeconds)}
-                  </span>
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Right side - USD value and amount */}
-          <div className="text-right">
-            <div className="text-xs font-medium text-right text-gray-900 dark:text-white">
-              {quote?.originAmountUsdDisplay}
-            </div>
-            <div className="text-xs text-gray-600 dark:text-gray-400">
-              {quote?.originAmountFormatted} {quote?.originToken.symbol}
-            </div>
-          </div>
-        </div>
+        <ScreenHeader
+          headerContent={
+            mode === "swap" ? "Swap in progress" : "Transaction Status"
+          }
+          headerContentAlign="center"
+        />
       </div>
 
-      {/* Timeout Warning */}
-      {showTimeoutWarning && (
+      {/* Transfer Information Display */}
+      {quote && (
         <div
-          className={`w-full max-w-sm transition-all duration-500 ease-out delay-150 ${
+          className={`w-full max-w-sm transition-all duration-500 ease-out delay-100 ${
             showContent
               ? "opacity-100 translate-y-0"
               : "opacity-0 translate-y-4"
           }`}
         >
-          <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
-            <div className="flex items-start space-x-3">
-              <svg
-                className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <title>Warning</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>
-                <p className="font-medium text-yellow-800 dark:text-yellow-300">
-                  Transaction taking longer than expected
-                </p>
-                <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
-                  This transaction is taking longer than expected. Please reach
-                  out to support for help if the issue persists.
-                </p>
-              </div>
-            </div>
-          </div>
+          {mode === "swap" ? (
+            <SwapDisplay quote={quote} elapsedSeconds={elapsedSeconds} />
+          ) : (
+            <OriginTransferInformation
+              quote={quote}
+              elapsedSeconds={elapsedSeconds}
+              timestamp={timestamp}
+            />
+          )}
         </div>
       )}
 
@@ -435,19 +401,44 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
             className={`absolute left-2.5 top-5 bottom-5 w-0.5 transition-all duration-500 ease-out bg-gray-300 dark:bg-gray-700 ${showLine ? "animate-line-grow" : "h-0"}`}
           />
 
-          {/* Progress line for completed steps */}
+          {/* Progress line for completed steps (excluding those with meta tx errors) */}
           {activePendingIndex > 0 && showLine && (
             <div
               className="absolute left-2.5 top-5 w-0.5 bg-green-500 transition-all duration-1000 ease-out"
               style={{
-                height: `${(activePendingIndex / (transactionStates.length - 1)) * 80}%`,
+                height: `${(() => {
+                  // Find the last step that was completed without meta tx errors
+                  let lastGoodStepIndex = -1
+                  for (let i = 0; i < transactionStates.length; i++) {
+                    const tx = transactionStates[i]
+                    if (
+                      tx &&
+                      tx.state === "confirmed" &&
+                      !tx?.decodedGuestModuleEvents?.some(
+                        (event) => event.type === "CallFailed",
+                      )
+                    ) {
+                      lastGoodStepIndex = i
+                    } else if (
+                      tx?.decodedGuestModuleEvents?.some(
+                        (event) => event.type === "CallFailed",
+                      )
+                    ) {
+                      // Stop at first failure
+                      break
+                    }
+                  }
+                  return lastGoodStepIndex >= 0
+                    ? (lastGoodStepIndex / (transactionStates.length - 1)) * 80
+                    : 0
+                })()}%`,
                 maxHeight: "calc(100% - 20px)",
               }}
             />
           )}
 
           {/* Steps */}
-          <div className="space-y-6">
+          <div className="space-y-6 mt-4">
             {effectiveStates.map((tx, index) => (
               <div
                 key={`${tx.transactionHash}-${index}`}
@@ -465,6 +456,26 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
         </div>
       </div>
 
+      {/* Continue Button - Show only when there are failures */}
+      {showContinueButton && (
+        <div
+          className={`w-full max-w-sm transition-all duration-500 ease-out delay-150 mt-4 flex justify-center ${
+            showContent
+              ? "opacity-100 translate-y-0"
+              : "opacity-0 translate-y-4"
+          }`}
+        >
+          <button
+            type="button"
+            onClick={onContinue}
+            className="inline-flex items-center gap-1 px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
+          >
+            Continue
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
       {/* Details Section */}
       <div
         className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
@@ -475,6 +486,45 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
           <QuoteDetails quote={quote} showContent={true} />
         </div>
       </div>
+
+      {/* Timeout Warning */}
+      {showTimeoutWarning && !showContinueButton && (
+        <div
+          className={`w-full max-w-sm transition-all duration-500 ease-out delay-250 ${
+            showContent
+              ? "opacity-100 translate-y-0"
+              : "opacity-0 translate-y-4"
+          }`}
+        >
+          <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
+            <div className="flex items-start space-x-3">
+              <svg
+                className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <title>Warning</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>
+                <p className="font-medium text-yellow-800 dark:text-yellow-300">
+                  Transaction taking longer than expected
+                </p>
+                <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
+                  This transaction is taking longer than expected. Please reach
+                  out to support for help if the issue persists.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/src/widget/components/WalletConnect.tsx

@@ -5,7 +5,7 @@ import { QrCode } from "./QrCode.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
 import { getWalletConnectProjectId } from "../../config.js"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { getWalletLogo, getWalletName } from "../../wallets.js"
+import { getWalletIcon, getWalletName } from "../../wallets.js"
 
 export interface WalletConnectProps {
   onBack: () => void
@@ -186,7 +186,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
 
   const title = useMemo(() => {
     const walletName = getWalletName(selectedWalletId)
-    if (walletName) {
+    if (walletName && walletName !== "WalletConnect") {
       return `Scan code to connect to ${walletName}`
     }
 
@@ -265,10 +265,10 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                 <div className="flex flex-col items-center">
                   <QrCode
                     url={wcUri}
-                    size={220}
+                    size={300}
                     imageUrl={
-                      getWalletLogo(selectedWalletId) ||
-                      getWalletLogo("walletconnect")
+                      getWalletIcon(selectedWalletId) ||
+                      getWalletIcon("walletconnect")
                     }
                   />
                   <button
@@ -298,7 +298,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                 </div>
               ) : (
                 <div className="flex flex-col items-center">
-                  <div className="w-[220px] h-[220px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
+                  <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
                     <div className="text-center">
                       <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -310,7 +310,9 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
               )}
 
               <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
-                {status === "pending" && <span>Waiting for confirmation…</span>}
+                {status === "pending" && wcUri && (
+                  <span>Waiting for confirmation…</span>
+                )}
               </div>
             </>
           )}

package/src/widget/components/WalletConnectionPending.tsx

@@ -0,0 +1,157 @@
+import { ChevronLeft } from "lucide-react"
+import type React from "react"
+import { useEffect, useState } from "react"
+import { useWallets } from "../../wallets.js"
+
+interface WalletConnectionPendingProps {
+  onBack: () => void
+  onRetry: () => void
+  selectedWalletId: string
+  isConnecting: boolean
+  error: string | null
+  showRetry?: boolean
+}
+
+export const WalletConnectionPending: React.FC<
+  WalletConnectionPendingProps
+> = ({
+  onBack,
+  onRetry,
+  selectedWalletId,
+  isConnecting,
+  error,
+  showRetry = false,
+}) => {
+  const [showContent, setShowContent] = useState(false)
+  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
+  const { wallets: allWallets } = useWallets()
+
+  const walletConfig = allWallets.find((w) => w.id === selectedWalletId)
+  const walletName = walletConfig?.name || selectedWalletId
+
+  useEffect(() => {
+    setShowContent(true)
+  }, [])
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => {
+        if (isConnecting && !error) {
+          setShowTimeoutWarning(true)
+        }
+      },
+      2 * 60 * 1000,
+    ) // 2 minutes
+
+    return () => clearTimeout(timer)
+  }, [isConnecting, error])
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center relative">
+        <button
+          type="button"
+          onClick={onBack}
+          className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
+        >
+          <ChevronLeft className="h-6 w-6" />
+        </button>
+      </div>
+
+      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+        <div className="text-center">
+          <div
+            className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
+          >
+            {error ? (
+              <div className={`h-24 w-24`} />
+            ) : (
+              <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
+            )}
+
+            <div className="absolute">
+              {walletConfig?.icon && typeof walletConfig.icon === "string" ? (
+                <img
+                  src={walletConfig.icon}
+                  alt={walletName}
+                  className="h-16 w-16"
+                />
+              ) : (
+                <div className="h-16 w-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-gray-600 dark:text-gray-400">
+                    {walletName.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div
+            className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+              {error ? "Connection failed" : `Waiting for ${walletName}…`}
+            </h2>
+            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+              {error
+                ? "There was an issue connecting to your wallet. Please try again."
+                : "Please approve the connection request in your wallet"}
+            </p>
+          </div>
+        </div>
+
+        {/* Timeout Warning */}
+        {showTimeoutWarning && !error && (
+          <div
+            className={`transition-all duration-500 ease-out delay-150 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
+              <div className="flex items-start space-x-3">
+                <svg
+                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <title>Warning</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>
+                  <p className="font-medium text-yellow-800 dark:text-yellow-300">
+                    Connection is taking longer than expected
+                  </p>
+                  <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
+                    This connection request is taking longer than expected.
+                    Please reach out to support for help if the issue persists.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Retry Button */}
+        {(error || showRetry) && (
+          <div
+            className={`mb-2 transition-all duration-500 ease-out delay-300 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <button
+              type="button"
+              onClick={onRetry}
+              className="w-full px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default WalletConnectionPending

package/src/widget/components/WalletList.tsx

@@ -3,7 +3,7 @@ import type React from "react"
 import { ChevronRight, Search } from "lucide-react"
 import { Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { featuredWallets } from "../../wallets.js"
+import { topShownWallets } from "../../wallets.js"
 import type { WalletConfig } from "../../wallets.js"
 
 export interface WalletListProps {
@@ -23,8 +23,8 @@ export const WalletList: React.FC<WalletListProps> = ({
     return walletOptions
       .filter((wallet) => wallet.id !== "injected")
       .sort((a, b) => {
-        const aIndex = featuredWallets.indexOf(a.id)
-        const bIndex = featuredWallets.indexOf(b.id)
+        const aIndex = topShownWallets.indexOf(a.id)
+        const bIndex = topShownWallets.indexOf(b.id)
 
         // If both are featured, maintain featured order
         if (aIndex !== -1 && bIndex !== -1) {
@@ -84,14 +84,15 @@ export const WalletList: React.FC<WalletListProps> = ({
             <button
               type="button"
               key={wallet.id}
+              data-wallet-id={wallet.id}
               onClick={() => handleWalletSelect(wallet.id)}
               className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
             >
               <div className="flex items-center space-x-3">
-                {wallet.logo ? (
+                {wallet.icon ? (
                   <>
                     <img
-                      src={wallet.logo}
+                      src={wallet.icon}
                       alt={wallet.name}
                       className="h-6 w-6"
                     />