0xtrails 0.9.2 → 0.9.4

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -1,25 +1,25 @@
-import React, { useState, useRef, useMemo, useEffect } from "react"
-import { useIntentTransactionHistory } from "../hooks/useIntentTransactionHistory.js"
-import type { IntentTransaction } from "../../transactions.js"
-import { TokenImage } from "./TokenImage.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TransactionDetails } from "./TransactionDetails.js"
-import { formatRawAmount } from "../../tokenBalances.js"
-import { formatRelativeDate } from "../../time.js"
-import { SearchInputField } from "./SearchInputField.js"
-import { Identicon } from "./Identicon.js"
-import { truncateAddress } from "../../utils.js"
-import { useConnections, useAccount, useWalletClient } from "wagmi"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import type { Intent } from "@0xtrails/api"
 import { ChevronDown, Info } from "lucide-react"
+import { useAccount, useConnections, useWalletClient } from "wagmi"
 import { getExplorerUrl } from "../../explorer.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
 import { logger } from "../../logger.js"
-import { useIntentRecover } from "../../recover.js"
-import { useGetIntent } from "../hooks/useGetIntent.js"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
-import type { Intent } from "@0xtrails/api"
-import { useTokenInfo, useGetTokenImageUrl } from "../../tokens.js"
 import { getQueryParam } from "../../queryParams.js"
+import { useIntentRecover } from "../../recover.js"
+import { formatRelativeDate } from "../../time.js"
+import { formatRawAmount } from "../../tokenBalances.js"
+import { useGetTokenImageUrl, useTokenInfo } from "../../tokens.js"
+import type { IntentTransaction } from "../../transactions.js"
+import { truncateAddress } from "../../utils.js"
+import { useGetIntent } from "../hooks/useGetIntent.js"
+import { useIntentTransactionHistory } from "../hooks/useIntentTransactionHistory.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+import { Identicon } from "./Identicon.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { SearchInputField } from "./SearchInputField.js"
+import { TokenImage } from "./TokenImage.js"
+import { TransactionDetails } from "./TransactionDetails.js"
 
 interface AccountIntentTransactionHistoryProps {
   accountAddress?: string
@@ -64,7 +64,7 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
 
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(
+      className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${getStatusColor(
         status,
       )}`}
     >
@@ -82,7 +82,7 @@ const TransactionItem: React.FC<{
   onCommitSuccess?: () => void
 }> = ({
   transaction,
-  index,
+  index: _index,
   onRefetch,
   fetchedIntent,
   commitIntentMutation,
@@ -464,17 +464,13 @@ const TransactionItem: React.FC<{
   }, [refundTxHash, transaction.originChainId])
 
   return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-      {/* Header with status and metadata */}
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+      {/* Header with metadata */}
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
-            #{index + 1}
-          </span>
-          <ExecutionStatusBadge status={transaction.executionStatus} />
           {dateInfo.relative && (
             <span
-              className="text-xs text-gray-500 dark:text-gray-400 cursor-help"
+              className="text-xs text-gray-900 dark:text-gray-100 cursor-help"
               title={dateInfo.full || undefined}
             >
               {dateInfo.relative}
@@ -486,9 +482,24 @@ const TransactionItem: React.FC<{
             href={explorerUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs"
+            className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs whitespace-nowrap"
+            title="View transaction on block explorer"
           >
-            View on Explorer ↗
+            <span>View on Explorer</span>
+            <svg
+              className="w-3 h-3 flex-shrink-0"
+              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>
@@ -497,56 +508,83 @@ const TransactionItem: React.FC<{
       <div className="flex items-center justify-center mb-2">
         {/* Show token information if available, otherwise show intent addresses */}
         {transaction.originToken && transaction.destinationToken ? (
-          <div className="flex items-center gap-2">
-            {/* Origin Token with Chain */}
-            <div className="flex items-center gap-1">
+          <div className="flex items-center justify-between w-full gap-3">
+            {/* Origin Token - Image on left, details on right */}
+            <div className="flex items-start gap-2 flex-1 max-w-[130px]">
               <TokenImage
                 symbol={transaction.originToken.symbol}
                 imageUrl={transaction.originToken.imageUrl}
                 chainId={transaction.originToken.chainId}
-                size={20}
+                size={28}
               />
-              <span className="text-xs font-medium text-gray-900 dark:text-gray-100">
-                {formatRawAmount(
-                  transaction.originTokenAmount || "0",
-                  transaction.originToken.decimals,
-                )}{" "}
-                {transaction.originToken.symbol}
-              </span>
+              <div className="flex flex-col gap-0.5">
+                <span
+                  className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
+                  style={{ maxWidth: "85px" }}
+                >
+                  {formatRawAmount(
+                    transaction.originTokenAmount || "0",
+                    transaction.originToken.decimals,
+                  )}{" "}
+                  {transaction.originToken.symbol}
+                </span>
+                {transaction.mainSigner && (
+                  <div className="flex items-center gap-1 whitespace-nowrap">
+                    <Identicon value={transaction.mainSigner} size={12} />
+                    <span
+                      className="text-xs"
+                      style={{ color: "#71717A" }}
+                      title={transaction.mainSigner}
+                    >
+                      {truncateAddress(transaction.mainSigner)}
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Arrow */}
             <div className="flex items-center">
-              <svg
-                className="w-3 h-3 text-gray-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
+              <span className="text-xl text-gray-400 dark:text-gray-500">
+                →
+              </span>
             </div>
 
-            {/* Destination Token with Chain */}
-            <div className="flex items-center gap-1">
+            {/* Destination Token - Image on left, details on right */}
+            <div className="flex items-start gap-2 flex-1 max-w-[130px]">
               <TokenImage
                 symbol={transaction.destinationToken.symbol}
                 imageUrl={transaction.destinationToken.imageUrl}
                 chainId={transaction.destinationToken.chainId}
-                size={20}
+                size={28}
               />
-              <span className="text-xs font-medium text-gray-900 dark:text-gray-100">
-                {formatRawAmount(
-                  transaction.destinationTokenAmount || "0",
-                  transaction.destinationToken.decimals,
-                )}{" "}
-                {transaction.destinationToken.symbol}
-              </span>
+              <div className="flex flex-col gap-0.5">
+                <span
+                  className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
+                  style={{ maxWidth: "85px" }}
+                >
+                  {formatRawAmount(
+                    transaction.destinationTokenAmount || "0",
+                    transaction.destinationToken.decimals,
+                  )}{" "}
+                  {transaction.destinationToken.symbol}
+                </span>
+                {transaction.destinationToAddress && (
+                  <div className="flex items-center gap-1 whitespace-nowrap">
+                    <Identicon
+                      value={transaction.destinationToAddress}
+                      size={12}
+                    />
+                    <span
+                      className="text-xs"
+                      style={{ color: "#71717A" }}
+                      title={transaction.destinationToAddress}
+                    >
+                      {truncateAddress(transaction.destinationToAddress)}
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         ) : (
@@ -687,28 +725,36 @@ const TransactionItem: React.FC<{
             <ErrorDisplay error={recoverError} severity="error" />
           </div>
         )}
-        <button
-          type="button"
-          onClick={() => setIsExpanded(true)}
-          className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-          aria-label="Show more details"
-        >
-          <span>More Details</span>
-          <svg
-            className="w-3 h-3 transition-transform duration-300 ease-out"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
+      </div>
+
+      {/* Bottom section with status and more details button */}
+      <div className="flex items-center justify-between mt-2">
+        <ExecutionStatusBadge status={transaction.executionStatus} />
+        {!isExpanded && (
+          <button
+            type="button"
+            onClick={() => setIsExpanded(true)}
+            className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
+            aria-label="Show more details"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </button>
+            <span>More Details</span>
+            <svg
+              className="w-3 h-3 transition-transform duration-300 ease-out"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <title>Expand</title>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+        )}
       </div>
 
       {/* Details container */}
@@ -735,6 +781,7 @@ const TransactionItem: React.FC<{
                 viewBox="0 0 24 24"
                 aria-hidden="true"
               >
+                <title>Collapse</title>
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -869,6 +916,7 @@ export const AccountIntentTransactionHistory: React.FC<
     string | null
   >(null)
   const walletDropdownRef = useRef<HTMLDivElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   const { address: currentAddress, connector } = useAccount()
   const connections = useConnections()
@@ -1117,6 +1165,7 @@ export const AccountIntentTransactionHistory: React.FC<
               stroke="currentColor"
               viewBox="0 0 24 24"
             >
+              <title>Wallet Lock Icon</title>
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -1161,6 +1210,7 @@ export const AccountIntentTransactionHistory: React.FC<
                 stroke="currentColor"
                 viewBox="0 0 24 24"
               >
+                <title>Refresh</title>
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -1245,6 +1295,7 @@ export const AccountIntentTransactionHistory: React.FC<
                     stroke="currentColor"
                     viewBox="0 0 24 24"
                   >
+                    <title>Clear</title>
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
@@ -1373,6 +1424,7 @@ export const AccountIntentTransactionHistory: React.FC<
                   stroke="currentColor"
                   viewBox="0 0 24 24"
                 >
+                  <title>Error</title>
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -1415,6 +1467,7 @@ export const AccountIntentTransactionHistory: React.FC<
                   stroke="currentColor"
                   viewBox="0 0 24 24"
                 >
+                  <title>No Transactions</title>
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -1442,6 +1495,7 @@ export const AccountIntentTransactionHistory: React.FC<
                   stroke="currentColor"
                   viewBox="0 0 24 24"
                 >
+                  <title>No Results</title>
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -1465,7 +1519,22 @@ export const AccountIntentTransactionHistory: React.FC<
             </div>
           </div>
         ) : (
-          <div className="flex-1 overflow-y-auto space-y-3 pr-2">
+          <div
+            ref={scrollContainerRef}
+            className="flex-1 overflow-y-auto space-y-3 pr-2 relative"
+          >
+            {/* Loading overlay for pagination */}
+            {loading && transactions.length > 0 && (
+              <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm z-10 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-2">
+                  <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 dark:border-blue-400"></div>
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    Loading...
+                  </span>
+                </div>
+              </div>
+            )}
+
             {/* Show fetched intent if available and not already in history */}
             {fetchedIntent && !existingIntentTransaction && (
               <div className="mb-3 p-3 border-2 border-blue-500 dark:border-blue-400 rounded-lg bg-blue-50 dark:bg-blue-900/20">
@@ -1475,7 +1544,7 @@ export const AccountIntentTransactionHistory: React.FC<
                       FETCHED INTENT
                     </span>
                     <span className="text-xs text-gray-500 dark:text-gray-400">
-                      {fetchedIntent.intentId.slice(0, 10)}...
+                      {truncateAddress(fetchedIntent.intentId)}
                     </span>
                   </div>
                   <button
@@ -1545,7 +1614,13 @@ export const AccountIntentTransactionHistory: React.FC<
           <div className="flex items-center justify-center pt-2 mt-2 gap-4">
             <button
               type="button"
-              onClick={prevPage}
+              onClick={() => {
+                prevPage()
+                scrollContainerRef.current?.scrollTo({
+                  top: 0,
+                  behavior: "smooth",
+                })
+              }}
               disabled={!hasPrev || loading}
               className="p-2 rounded-full transition-colors text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
             >
@@ -1555,6 +1630,7 @@ export const AccountIntentTransactionHistory: React.FC<
                 stroke="currentColor"
                 viewBox="0 0 24 24"
               >
+                <title>Previous Page</title>
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -1566,7 +1642,13 @@ export const AccountIntentTransactionHistory: React.FC<
 
             <button
               type="button"
-              onClick={nextPage}
+              onClick={() => {
+                nextPage()
+                scrollContainerRef.current?.scrollTo({
+                  top: 0,
+                  behavior: "smooth",
+                })
+              }}
               disabled={!hasMore || loading}
               className="p-2 rounded-full transition-colors text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
             >
@@ -1576,6 +1658,7 @@ export const AccountIntentTransactionHistory: React.FC<
                 stroke="currentColor"
                 viewBox="0 0 24 24"
               >
+                <title>Next Page</title>
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"

package/src/widget/components/ClassicSwap.tsx

@@ -1061,7 +1061,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   return (
     <div className="space-y-2">
       <ScreenHeader
-        onBack={mode === "fund" ? () => setCurrentScreen("fund-form") : onBack}
+        onBack={
+          mode === "fund"
+            ? () => setCurrentScreen("fund-form")
+            : mode === "earn"
+              ? () => setCurrentScreen("earn")
+              : onBack
+        }
         headerContent={title}
         headerContentAlign="left"
         showAccountActions={true}

package/src/widget/components/ConfigDisplay.tsx

@@ -48,6 +48,11 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
       value: config.trailsApiUrl,
       display: truncateString(config.trailsApiUrl || "N/A"),
     },
+    {
+      label: "App URL",
+      value: config.trailsAppUrl,
+      display: truncateString(config.trailsAppUrl || "N/A"),
+    },
     {
       label: "Indexer URL",
       value: config.sequenceIndexerUrl,

package/src/widget/components/Earn.tsx

@@ -4,12 +4,13 @@ import type { Account, WalletClient } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import { ArrowUpCircle, ArrowDownCircle } from "lucide-react"
+import { ArrowUpCircle, ArrowDownCircle, ArrowLeftRight } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { PoolDeposit } from "./PoolDeposit.js"
 import { PoolWithdraw } from "./PoolWithdraw.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { Token } from "../../tokens.js"
+import { useBack } from "../hooks/useBack.js"
 
 interface EarnProps {
   onBack?: () => void
@@ -55,6 +56,7 @@ export const Earn: React.FC<EarnProps> = ({
 }) => {
   const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit")
   const [isShowingPoolSelector, setIsShowingPoolSelector] = useState(false) // Track if pool selector is shown
+  const { setCurrentScreenWithBack } = useBack()
 
   return (
     <div className="space-y-2">
@@ -63,6 +65,17 @@ export const Earn: React.FC<EarnProps> = ({
         headerContent="Earn"
         headerContentAlign="left"
         showAccountActions={true}
+        customActions={
+          <button
+            type="button"
+            onClick={() => setCurrentScreenWithBack("swap", "earn")}
+            className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+            title="Swap"
+          >
+            <ArrowLeftRight className="h-4 w-4" />
+            <span className="text-sm font-medium">Swap</span>
+          </button>
+        }
       />
 
       {/* Tabs - only show when not in pool selector mode */}