0xtrails 0.1.3 → 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/YellowWarningAnimation.tsx

@@ -0,0 +1,146 @@
+import { type CSSProperties, useEffect, useState } from "react"
+
+export function YellowWarningAnimation() {
+  const [animate, setAnimate] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimate(true)
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const styles: Record<string, CSSProperties> = {
+    container: {
+      width: "80px",
+      height: "80px",
+      position: "relative" as const,
+    },
+    circleContainer: {
+      position: "relative" as const,
+      width: "100%",
+      height: "100%",
+    },
+    circleFill: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: "#f59e0b",
+      transform: animate ? "scale(1)" : "scale(0)",
+      opacity: animate ? 1 : 0,
+      transition: "transform 0.15s ease-out 0.3s, opacity 0.15s ease-out 0.3s",
+    },
+    progressRing: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      transform: "rotate(-90deg)",
+    },
+    circle: {
+      fill: "none",
+      stroke: "url(#yellowGradient)",
+      strokeWidth: 4,
+      strokeLinecap: "round" as const,
+      strokeDasharray: 226,
+      strokeDashoffset: animate ? 0 : 226,
+      transition: "stroke-dashoffset 0.3s ease-out",
+    },
+    iconContainer: {
+      position: "absolute" as const,
+      top: "50%",
+      left: "50%",
+      transform: animate
+        ? "translate(-50%, -50%) scale(1)"
+        : "translate(-50%, -50%) scale(0)",
+      opacity: animate ? 1 : 0,
+      zIndex: 10,
+      transition: "transform 0.1s ease-out 0.4s, opacity 0.1s ease-out 0.4s",
+    },
+    trianglePath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 2.5,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      // Approx perimeter; animate drawing
+      strokeDasharray: 120,
+      strokeDashoffset: animate ? 0 : 120,
+      transition: "stroke-dashoffset 0.2s ease-out 0.45s",
+    },
+    exclamationPath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 2.5,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 20,
+      strokeDashoffset: animate ? 0 : 20,
+      transition: "stroke-dashoffset 0.15s ease-out 0.55s",
+    },
+    dot: {
+      fill: "white",
+      opacity: animate ? 1 : 0,
+      transition: "opacity 0.1s ease-out 0.65s",
+    },
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.circleContainer}>
+        {/* Circle fill */}
+        <div style={styles.circleFill} />
+
+        {/* Progress ring */}
+        <svg style={styles.progressRing}>
+          <defs>
+            <radialGradient
+              id="yellowGradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              gradientUnits="objectBoundingBox"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 0 }}
+              />
+              <stop
+                offset="70%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 0.3 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 1 }}
+              />
+            </radialGradient>
+          </defs>
+          <circle cx="40" cy="40" r="36" style={styles.circle} />
+        </svg>
+
+        {/* Warning icon */}
+        <div style={styles.iconContainer}>
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            role="img"
+            aria-labelledby="warning-icon-title"
+          >
+            <title id="warning-icon-title">Warning icon</title>
+            {/* Triangle outline */}
+            <path d="M12 3 L22 20 H2 Z" style={styles.trianglePath} />
+            {/* Exclamation mark */}
+            <path d="M12 9 L12 14" style={styles.exclamationPath} />
+            <circle cx="12" cy="17" r="1.5" style={styles.dot} />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}