0xtrails 0.6.0 → 0.6.2

package/src/widget/components/Receipt.tsx

@@ -15,6 +15,7 @@ import { ChainImage } from "./ChainImage.js"
 import { getChainInfo } from "../../chains.js"
 import { useMode } from "../hooks/useMode.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { getExplorerUrl } from "../../explorer.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -63,11 +64,26 @@ function useTxTimeDiff(firstTx?: TransactionState, lastTx?: TransactionState) {
 
 // Custom hook to compute finalExplorerUrl and completionTimeSeconds
 function useReceipt(transactionStates?: TransactionState[]) {
-  const lastTx = transactionStates?.[transactionStates.length - 1]
-  const finalExplorerUrl = lastTx?.explorerUrl
-  const finalChainId = lastTx?.chainId
-
-  // Only consider confirmed transactions
+  // Find the latest transaction with a hash (regardless of state)
+  // This ensures we can link to explorer even for failed/refunded transactions
+  const latestTxWithHash = (transactionStates || [])
+    .slice()
+    .reverse()
+    .find((tx) => tx.transactionHash && tx.chainId)
+
+  // Generate explorer URL if we have a hash but no URL
+  const finalExplorerUrl =
+    latestTxWithHash?.explorerUrl ||
+    (latestTxWithHash?.transactionHash && latestTxWithHash?.chainId
+      ? getExplorerUrl({
+          txHash: latestTxWithHash.transactionHash,
+          chainId: latestTxWithHash.chainId,
+        })
+      : null)
+
+  const finalChainId = latestTxWithHash?.chainId
+
+  // Only consider confirmed transactions for completion time
   const confirmedTxs = (transactionStates || []).filter(
     (tx) => tx.state === "confirmed",
   )
@@ -172,9 +188,12 @@ export const Receipt: React.FC<ReceiptProps> = ({
       <QuoteDetails quote={quote} showContent={true} compact={true}>
         {transactionStates.length > 0 && (
           <>
-            <div className="font-medium text-gray-700 dark:text-gray-300">
-              Transactions:
+            <div className="h-px bg-gray-200 dark:bg-gray-800 my-4" />
+
+            <div className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+              Transactions
             </div>
+
             <div className="space-y-2">
               {transactionStates.map((state, i) => (
                 <div
@@ -182,8 +201,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
                   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 className="text-xs text-gray-600 dark:text-gray-400">
+                      {state.label}
                     </span>
                     <span
                       className={`px-2 py-0.5 rounded-full text-xs ${
@@ -197,14 +216,14 @@ export const Receipt: React.FC<ReceiptProps> = ({
                     </span>
                   </div>
                   <div className="mt-1 flex justify-between items-center">
-                    <span className="text-gray-600 dark:text-gray-400">
-                      Hash:
+                    <span className="text-xs 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"
+                      className="text-xs 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
@@ -251,7 +270,12 @@ export const Receipt: React.FC<ReceiptProps> = ({
     </div>
   )
 
-  if (!finalExplorerUrl && !showRefundInfo) {
+  // Only show error state if we truly have no transaction hash at all
+  const hasAnyTransactionHash = transactionStates.some(
+    (tx) => tx.transactionHash,
+  )
+
+  if (!finalExplorerUrl && !showRefundInfo && !hasAnyTransactionHash) {
     return (
       <div className="flex flex-col justify-center min-h-full space-y-6">
         <ScreenHeader />
@@ -327,7 +351,11 @@ export const Receipt: React.FC<ReceiptProps> = ({
         </div>
 
         <div
-          className={`transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          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">
             {showRefundInfo ? "Unable to process." : "Completed"}
@@ -414,33 +442,39 @@ export const Receipt: React.FC<ReceiptProps> = ({
         </div>
       </div>
 
-      <div
-        className={`text-center transition-all duration-500 ease-out delay-100 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-      >
-        <a
-          href={finalExplorerUrl}
-          target="_blank"
-          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"
+      {finalExplorerUrl && (
+        <div
+          className={`text-center transition-all duration-500 ease-out delay-100 ${
+            showContent
+              ? "opacity-100 translate-y-0"
+              : "opacity-0 translate-y-4"
+          }`}
         >
-          {finalChainId && <ChainImage chainId={finalChainId} size={16} />}
-          View on Explorer
-          <svg
-            className="w-4 h-4 ml-1 text-black dark:text-blue-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
+          <a
+            href={finalExplorerUrl}
+            target="_blank"
+            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"
           >
-            <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>
+            {finalChainId && <ChainImage chainId={finalChainId} size={16} />}
+            View on Explorer
+            <svg
+              className="w-4 h-4 ml-1 text-black dark:text-blue-300"
+              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>
+      )}
 
       {showRefundInfo && refundMessage && (
         <div
@@ -485,7 +519,9 @@ export const Receipt: React.FC<ReceiptProps> = ({
       )}
 
       <div
-        className={`space-y-3 transition-all duration-500 ease-out delay-200 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+        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">

package/src/widget/components/ThemeProvider.tsx

@@ -1,7 +1,6 @@
 import type React from "react"
 import { createContext, useContext, useEffect, useState } from "react"
 import type { Theme } from "../../theme.js"
-import { ThemeProvider as DesignSystemThemeProvider } from "@0xsequence/design-system"
 import { logger } from "../../logger.js"
 import { DEFAULT_THEME } from "../../constants.js"
 
@@ -98,18 +97,14 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   }
 
   return (
-    <DesignSystemThemeProvider theme={theme === "dark" ? "dark" : "light"}>
-      <ThemeContext.Provider
-        value={{ theme, setTheme, isDark, getActiveTheme }}
+    <ThemeContext.Provider value={{ theme, setTheme, isDark, getActiveTheme }}>
+      <div
+        className={isDark ? "dark" : ""}
+        data-theme={isDark ? "dark" : "light"}
       >
-        <div
-          className={isDark ? "dark" : ""}
-          data-theme={isDark ? "dark" : "light"}
-        >
-          {children}
-        </div>
-      </ThemeContext.Provider>
-    </DesignSystemThemeProvider>
+        {children}
+      </div>
+    </ThemeContext.Provider>
   )
 }
 

package/src/widget/components/Toast.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../toast.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 import { useTheme } from "./ThemeProvider.js"
+import { TRAILS_SUPPORT_URL } from "../../constants.js"
 import css from "../compiled.css?inline"
 
 const TRAILS_ICON_URL = "https://trails.build/web-app-manifest-192x192.png"
@@ -300,10 +301,10 @@ function ToastItem({ toast, onRemove }: ToastItemProps) {
             </p>
             {toast.type === "error" && (
               <a
-                href="https://support.trails.build/en/"
+                href={TRAILS_SUPPORT_URL}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline inline-block"
+                className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline inline-block"
               >
                 Visit support
               </a>

package/src/widget/components/TokenSelector.tsx

@@ -1,7 +1,7 @@
 import { ChevronLeft, Copy } from "lucide-react"
 import type React from "react"
 import { useState, useMemo } from "react"
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "motion/react"
 import { zeroAddress } from "viem"
 import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
 import { useTokenList } from "../hooks/useTokenList.js"

package/src/widget/components/Tooltip.tsx

@@ -1,5 +1,5 @@
 import type React from "react"
-import { TooltipPrimitive } from "@0xsequence/design-system"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { useTheme } from "./ThemeProvider.js"
 
 interface TooltipProps {

package/src/widget/components/TransferPendingVertical.tsx

@@ -10,6 +10,7 @@ import { OriginTransferInformation } from "./OriginTransferInformation.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { ChevronRight } from "lucide-react"
 import { useMode } from "../hooks/useMode.js"
+import { TRAILS_SUPPORT_URL } from "../../constants.js"
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (
@@ -521,8 +522,16 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
                   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.
+                  This transaction is taking longer than expected.{" "}
+                  <a
+                    href={TRAILS_SUPPORT_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
+                  >
+                    Visit support
+                  </a>{" "}
+                  for help if the issue persists.
                 </p>
               </div>
             </div>

package/src/widget/components/WalletConnectionPending.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft } from "lucide-react"
 import type React from "react"
 import { useEffect, useState } from "react"
 import { useWallets } from "../../wallets.js"
+import { TRAILS_SUPPORT_URL } from "../../constants.js"
 
 interface WalletConnectionPendingProps {
   onBack?: () => void
@@ -93,9 +94,23 @@ export const WalletConnectionPending: React.FC<
               {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"}
+              {error ? (
+                <>
+                  There was an issue connecting to your wallet. Please try
+                  again.{" "}
+                  <a
+                    href={TRAILS_SUPPORT_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
+                  >
+                    Visit support
+                  </a>{" "}
+                  if the issue persists.
+                </>
+              ) : (
+                "Please approve the connection request in your wallet"
+              )}
             </p>
           </div>
         </div>
@@ -126,8 +141,16 @@ export const WalletConnectionPending: React.FC<
                     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.
+                    This connection request is taking longer than expected.{" "}
+                    <a
+                      href={TRAILS_SUPPORT_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
+                    >
+                      Visit support
+                    </a>{" "}
+                    for help if the issue persists.
                   </p>
                 </div>
               </div>

package/src/widget/hooks/useCheckout.ts

@@ -1,7 +1,11 @@
 import { useCallback, useRef } from "react"
 import { getSessionId } from "../../analytics.js"
 import { logger } from "../../logger.js"
-import { updatePersistentToast } from "../../toast.js"
+import {
+  updatePersistentToast,
+  showToast,
+  removePersistentToast,
+} from "../../toast.js"
 import {
   getPrettifiedErrorMessage,
   getIsUserRejectionError,
@@ -239,10 +243,14 @@ export function useCheckout({
         // Invalidate token balances cache to trigger a refresh
         invalidateTokenBalancesCache(accountAddress)
 
-        updatePersistentToast(
+        // Dismiss any persistent toast before showing success toast
+        removePersistentToast()
+
+        showToast(
           "Transaction Complete",
           "Your transaction has been successfully processed",
           "success",
+          5000, // 5 seconds
         )
       } else {
         // Default to error for any non-success status (including 'fail' and any unexpected values)

package/src/widget/hooks/useCurrentScreen.tsx

@@ -27,6 +27,7 @@ export type Screen =
   | "chain-list"
   | "disconnect"
   | "home"
+  | "qrcode-options"
 
 interface CurrentScreenContextType {
   currentScreen: Screen

package/src/widget/hooks/useDebugScreens.ts

@@ -28,6 +28,7 @@ type Screen =
   | "account-settings"
   | "user-preferences"
   | "chain-list"
+  | "qrcode-options"
 
 interface UseDebugScreensProps {
   setCurrentScreen: (screen: Screen) => void