0xtrails 0.9.2 → 0.9.4

package/src/widget/components/EarnPools.tsx

@@ -1,6 +1,7 @@
 import { TrendingUp } from "lucide-react"
 import { motion } from "motion/react"
 import { useState, useEffect, useMemo } from "react"
+import { useAccount } from "wagmi"
 import { usePools, type Pool } from "../../pools.js"
 import { TokenImage } from "./TokenImage.js"
 import { getChainInfo } from "../../chains.js"
@@ -11,6 +12,10 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { EarnPoolsFilters, type SortOption } from "./EarnPoolsFilters.js"
 import { ChainList } from "./ChainList.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
+import {
+  useTokenBalances,
+  formatUsdAmountDisplay,
+} from "../../tokenBalances.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
 import { logger } from "../../logger.js"
@@ -25,6 +30,8 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
   onPoolSelect,
 }) => {
   const { data: pools, loading, error } = usePools()
+  const { address } = useAccount()
+  const { sortedTokens: userTokens } = useTokenBalances(address || null)
   const [selectedProtocol, setSelectedProtocol] = useState<string>("all")
   const [searchFilter, setSearchFilter] = useState<string>("")
   const [filterByChainId, setFilterByChainId] = useState<number | null>(null)
@@ -87,6 +94,18 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
     }
   }, [pools])
 
+  // Create a map to quickly lookup user balances by token address and chain
+  const userBalanceMap = useMemo(() => {
+    const map = new Map<string, (typeof userTokens)[0]>()
+    if (userTokens && Array.isArray(userTokens)) {
+      userTokens.forEach((token) => {
+        const key = `${token.contractAddress.toLowerCase()}-${token.chainId}`
+        map.set(key, token)
+      })
+    }
+    return map
+  }, [userTokens])
+
   const filteredPools = useMemo(() => {
     if (!pools || !Array.isArray(pools)) {
       return []
@@ -130,13 +149,58 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
       }
     })
 
-    // Sort the filtered pools
-    return filtered.sort((a, b) => {
+    // Add user balance data to pools and sort
+    const poolsWithBalances = filtered.map((pool) => {
+      const key = `${pool.depositAddress.toLowerCase()}-${pool.chainId}`
+      const userBalance = userBalanceMap.get(key)
+
+      // Calculate USD value if we have balance and price
+      let calculatedUsdValue = userBalance?.balanceUsd || 0
+      if (userBalance?.balanceFormatted && userBalance?.priceUsd) {
+        calculatedUsdValue =
+          parseFloat(userBalance.balanceFormatted) * userBalance.priceUsd
+      }
+
+      return {
+        ...pool,
+        userBalance: userBalance?.balance,
+        userBalanceUsd: calculatedUsdValue,
+        userBalanceFormatted: userBalance?.balanceFormatted,
+        userBalanceDisplay: userBalance?.balanceDisplay,
+        userTokenSymbol: userBalance?.symbol,
+      }
+    })
+
+    // Sort the filtered pools - always prioritize by user balance
+    return poolsWithBalances.sort((a, b) => {
       try {
+        const aHasBalance =
+          a.userBalanceFormatted && parseFloat(a.userBalanceFormatted) > 0
+        const bHasBalance =
+          b.userBalanceFormatted && parseFloat(b.userBalanceFormatted) > 0
+
+        // First prioritize pools with user balance
+        if (aHasBalance && !bHasBalance) return -1
+        if (!aHasBalance && bHasBalance) return 1
+
+        // If both have balance, sort by USD value first, then by token balance
+        if (aHasBalance && bHasBalance) {
+          // Sort by USD value if both have it
+          if (a.userBalanceUsd > 0 && b.userBalanceUsd > 0) {
+            return b.userBalanceUsd - a.userBalanceUsd
+          }
+
+          // Otherwise sort by token balance
+          const aBalance = parseFloat(a.userBalanceFormatted || "0")
+          const bBalance = parseFloat(b.userBalanceFormatted || "0")
+          return bBalance - aBalance
+        }
+
+        // For pools without user balance, use the selected sort
         if (sortBy === "tvl") {
-          return (b.tvl || 0) - (a.tvl || 0) // Descending order (highest first)
+          return (b.tvl || 0) - (a.tvl || 0)
         } else if (sortBy === "apy") {
-          return (b.apy || 0) - (a.apy || 0) // Descending order (highest first)
+          return (b.apy || 0) - (a.apy || 0)
         }
         return 0
       } catch (error) {
@@ -144,7 +208,94 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
         return 0
       }
     })
-  }, [pools, selectedProtocol, filterByChainId, searchFilter, sortBy])
+  }, [
+    pools,
+    selectedProtocol,
+    filterByChainId,
+    searchFilter,
+    sortBy,
+    userBalanceMap,
+  ])
+
+  // Separate pools into user pools and other pools
+  const userPools = useMemo(() => {
+    return filteredPools.filter(
+      (pool) =>
+        pool.userBalanceFormatted && parseFloat(pool.userBalanceFormatted) > 0,
+    )
+  }, [filteredPools])
+
+  const otherPools = useMemo(() => {
+    return filteredPools.filter(
+      (pool) =>
+        !pool.userBalanceFormatted ||
+        parseFloat(pool.userBalanceFormatted) === 0,
+    )
+  }, [filteredPools])
+
+  // Function to render a pool item
+  const renderPoolItem = (pool: any) => (
+    <motion.div
+      key={pool.id}
+      whileHover={{ scale: 1 }}
+      whileTap={{ scale: 0.99 }}
+      onClick={() => onPoolSelect(pool)}
+      className="p-4 trails-border-radius-container trails-list-item cursor-pointer transition-all overflow-hidden"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div style={{ width: "32px", height: "32px" }}>
+            <TokenImage
+              symbol={pool.token.symbol}
+              imageUrl={pool.token.logoUrl}
+              chainId={pool.chainId}
+              size={32}
+            />
+          </div>
+          <div>
+            <h3 className="font-medium text-gray-900 dark:text-white text-sm">
+              {pool.name}
+            </h3>
+            <div className="flex items-center space-x-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                {pool.protocol === "Aave" && (
+                  <img src={aaveLogo} alt="Aave" className="w-3 h-3 mr-1" />
+                )}
+                {pool.protocol === "Morpho" && (
+                  <img src={morphoLogo} alt="Morpho" className="w-3 h-3 mr-1" />
+                )}
+                {pool.protocol}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
+            <TrendingUp className="w-3 h-3" />
+            <span className="font-semibold text-sm">
+              {pool.apy.toFixed(1)}% APY
+            </span>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+            TVL: {formatTvl(pool.tvl)}
+          </p>
+          {/* User balance display below TVL */}
+          {pool.userBalanceFormatted &&
+            parseFloat(pool.userBalanceFormatted) > 0 && (
+              <p
+                className="text-xs font-bold mt-1 whitespace-nowrap"
+                style={{ color: "#71717A" }}
+              >
+                Balance:{" "}
+                {pool.userBalanceUsd > 0
+                  ? formatUsdAmountDisplay(pool.userBalanceUsd)
+                  : pool.userBalanceDisplay || pool.userBalanceFormatted}
+              </p>
+            )}
+        </div>
+      </div>
+    </motion.div>
+  )
 
   // Show chain list screen
   if (showChainList) {
@@ -223,63 +374,33 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
             </p>
           </div>
         ) : (
-          filteredPools.map((pool) => (
-            <motion.div
-              key={pool.id}
-              whileHover={{ scale: 1 }}
-              whileTap={{ scale: 0.99 }}
-              onClick={() => onPoolSelect(pool)}
-              className="p-4 trails-border-radius-container trails-list-item cursor-pointer transition-all overflow-hidden"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3">
-                  <div style={{ width: "32px", height: "32px" }}>
-                    <TokenImage
-                      symbol={pool.token.symbol}
-                      imageUrl={pool.token.logoUrl}
-                      chainId={pool.chainId}
-                      size={32}
-                    />
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                      {pool.name}
-                    </h3>
-                    <div className="flex items-center space-x-1">
-                      <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                        {pool.protocol === "Aave" && (
-                          <img
-                            src={aaveLogo}
-                            alt="Aave"
-                            className="w-3 h-3 mr-1"
-                          />
-                        )}
-                        {pool.protocol === "Morpho" && (
-                          <img
-                            src={morphoLogo}
-                            alt="Morpho"
-                            className="w-3 h-3 mr-1"
-                          />
-                        )}
-                        {pool.protocol}
-                      </span>
-                    </div>
-                  </div>
+          <>
+            {/* My Vaults Section */}
+            {userPools.length > 0 && (
+              <>
+                <div className="px-2 py-1">
+                  <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 tracking-wider">
+                    My Vaults
+                  </p>
                 </div>
-                <div className="text-right">
-                  <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
-                    <TrendingUp className="w-3 h-3" />
-                    <span className="font-semibold text-sm">
-                      {pool.apy.toFixed(1)}% APY
-                    </span>
-                  </div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                    TVL: {formatTvl(pool.tvl)}
+                {userPools.map(renderPoolItem)}
+              </>
+            )}
+
+            {/* Other Vaults Section */}
+            {otherPools.length > 0 && (
+              <>
+                <div
+                  className={`px-2 py-1 ${userPools.length > 0 ? "mt-4" : ""}`}
+                >
+                  <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 tracking-wider">
+                    {userPools.length > 0 ? "Other Vaults" : "Available Vaults"}
                   </p>
                 </div>
-              </div>
-            </motion.div>
-          ))
+                {otherPools.map(renderPoolItem)}
+              </>
+            )}
+          </>
         )}
       </div>
     </div>

package/src/widget/components/Fund.tsx

@@ -1,6 +1,7 @@
 import { Loader2, ArrowLeftRight } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useBack } from "../hooks/useBack.js"
 
 // Helper function to get centered window parameters
 const getCenteredWindowParams = (width: number, height: number): string => {
@@ -146,6 +147,7 @@ const Fund: React.FC<FundProps> = ({
 }) => {
   const { mode } = useMode()
   const { setCurrentScreen } = useCurrentScreen()
+  const { setCurrentScreenWithBack } = useBack()
   const {
     selectedToken: originToken,
     setSelectedToken: setOriginToken,
@@ -1161,7 +1163,7 @@ const Fund: React.FC<FundProps> = ({
         customActions={
           <button
             type="button"
-            onClick={() => setCurrentScreen("swap")}
+            onClick={() => setCurrentScreenWithBack("swap", "fund-form")}
             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"
           >

package/src/widget/components/PoolWithdraw.tsx

@@ -705,7 +705,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
                   }}
                   title="Click to withdraw full balance"
                 >
-                  Pool Balance:{" "}
+                  Balance:{" "}
                   {isBalanceVisible
                     ? isLoadingBalance
                       ? "Loading..."

package/src/widget/components/QuoteDetails.tsx

@@ -9,14 +9,13 @@ import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
 import {
-  Copy,
-  Check,
   Info,
   ExternalLink,
   Clock,
   ChevronDown,
   TriangleAlert,
 } from "lucide-react"
+import { useTrails } from "../providers/TrailsProvider.js"
 import type { MeldQuote } from "../../meld/utils/meld.js"
 import { logger } from "../../logger.js"
 
@@ -50,8 +49,8 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
   const [isExpanded, setIsExpanded] = useState(initialExpanded)
-  const [intentIdCopied, setIntentIdCopied] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
+  const { trailsAppUrl } = useTrails()
   const calldataRef = useRef<HTMLDivElement>(null)
 
   const priceImpactConfig = usePriceImpactWarning()
@@ -86,22 +85,6 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     onExpand?.(isExpanded)
   }, [isExpanded, onExpand])
 
-  const handleCopyIntentId = useCallback(async () => {
-    if (!quote?.intentId) return
-    try {
-      await navigator.clipboard.writeText(quote.intentId)
-      setIntentIdCopied(true)
-    } catch (error) {
-      console.error("[trails-sdk] Failed to copy intentId", error)
-    }
-  }, [quote?.intentId])
-
-  useEffect(() => {
-    if (!intentIdCopied) return
-    const timeout = setTimeout(() => setIntentIdCopied(false), 1500)
-    return () => clearTimeout(timeout)
-  }, [intentIdCopied])
-
   const getFiatToCryptoRate = useCallback(() => {
     if (!onRampQuote || !quote?.originTokenRate) {
       return null
@@ -525,24 +508,18 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
 
                   {/* Intent ID */}
                   {hasIntentId && (
-                    <Row className="gap-2">
+                    <Row>
                       <RowLabel>Intent ID</RowLabel>
-                      <RowValue className="flex items-center gap-1">
-                        <span title={quote.intentId ?? undefined}>
-                          {truncateAddress(quote?.intentId ?? "", 9, 3)}
-                        </span>
-                        <button
-                          type="button"
-                          onClick={handleCopyIntentId}
-                          className="p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                          aria-label="Copy intent ID"
+                      <RowValue>
+                        <a
+                          href={`${trailsAppUrl}/intent/${quote.intentId}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
                         >
-                          {intentIdCopied ? (
-                            <Check className="size-3 text-emerald-500" />
-                          ) : (
-                            <Copy className="size-3 text-gray-500 dark:text-gray-400" />
-                          )}
-                        </button>
+                          {truncateAddress(quote?.intentId ?? "", 9, 3)}
+                          <ExternalLink className="size-3" />
+                        </a>
                       </RowValue>
                     </Row>
                   )}

package/src/widget/components/Receipt.tsx

@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/react-query"
 import type React from "react"
 import type { ReactNode } from "react"
 import { useEffect, useState, useCallback, useMemo } from "react"
-import { ChevronRight } from "lucide-react"
 import type { TransactionState } from "../../transactions.js"
 import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
 import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
@@ -13,11 +12,11 @@ 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"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getExplorerUrl } from "../../explorer.js"
 import { logger } from "../../logger.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 interface ReceiptProps {
   onSendAnother?: () => void
@@ -110,7 +109,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   actionButtonText,
   onRampQuote,
 }) => {
-  const { mode } = useMode()
+  const { trailsAppUrl } = useTrails()
   const [showContent, setShowContent] = useState(false)
   const [showRefundInfo, setShowRefundInfo] = useState(false)
   const [refundMessage, setRefundMessage] = useState<string | ReactNode | null>(
@@ -142,20 +141,12 @@ export const Receipt: React.FC<ReceiptProps> = ({
   }, [transactionStates])
 
   const buttonText = useMemo(() => {
-    // Use custom actionButtonText if provided, otherwise use mode-based text
+    // Use custom actionButtonText if provided, otherwise use "Start new transaction" for all modes
     if (actionButtonText) {
       return actionButtonText
     }
-    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, actionButtonText])
+    return "Start new transaction"
+  }, [actionButtonText])
 
   const {
     finalExplorerUrl,
@@ -163,6 +154,11 @@ export const Receipt: React.FC<ReceiptProps> = ({
     completionTimeSeconds: calculatedCompletionTime,
   } = useReceipt(transactionStates)
 
+  const intentReceiptUrl = useMemo(() => {
+    if (!trailsAppUrl || !quote?.intentId) return null
+    return `${trailsAppUrl}/intent/${quote.intentId}`
+  }, [quote?.intentId, trailsAppUrl])
+
   // Use provided totalCompletionSeconds if available, otherwise use calculated time
   const completionTimeSeconds =
     totalCompletionSeconds ?? calculatedCompletionTime
@@ -517,7 +513,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
         </div>
       </div>
 
-      {finalExplorerUrl && (
+      {(finalExplorerUrl || intentReceiptUrl) && (
         <div
           className={`text-center transition-all duration-500 ease-out delay-100 ${
             showContent
@@ -525,29 +521,60 @@ export const Receipt: React.FC<ReceiptProps> = ({
               : "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"
-          >
-            {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 className="flex flex-col items-center gap-2">
+            {finalExplorerUrl && (
+              <a
+                href={finalExplorerUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+              >
+                {finalChainId && (
+                  <ChainImage chainId={finalChainId} size={16} />
+                )}
+                View on Explorer
+                <svg
+                  className="w-4 h-4 ml-1 text-blue-600 dark:text-blue-400"
+                  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>
+            )}
+
+            {intentReceiptUrl && (
+              <a
+                href={intentReceiptUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+              >
+                View Transaction Receipt
+                <svg
+                  className="w-4 h-4 ml-1 text-blue-600 dark:text-blue-400"
+                  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>
         </div>
       )}
 
@@ -603,10 +630,9 @@ export const Receipt: React.FC<ReceiptProps> = ({
             <button
               type="button"
               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"
+              className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 trails-border-radius-button transition-colors duration-200 text-white cursor-pointer font-medium"
             >
               {buttonText}
-              <ChevronRight className="w-4 h-4" />
             </button>
           </div>
         )}