0xtrails 0.6.0 → 0.6.2

package/src/widget/components/DepositTracker.tsx

@@ -0,0 +1,298 @@
+import type React from "react"
+import { useMemo, useEffect } from "react"
+import { CheckCircle, Clock } from "lucide-react"
+import { formatUnits, zeroAddress } from "viem"
+import { TokenImage } from "./TokenImage.js"
+import {
+  formatAmountDisplay,
+  useTokenBalances,
+  isNativeToken,
+  type TokenBalanceWithPrice,
+} from "../../tokenBalances.js"
+import { useQueryClient } from "@tanstack/react-query"
+
+export interface DepositTrackerProps {
+  depositAddress: string
+  requiredAmount: string
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  chainId: number
+}
+
+export const DepositTracker: React.FC<DepositTrackerProps> = ({
+  depositAddress,
+  requiredAmount,
+  tokenAddress,
+  tokenSymbol,
+  tokenDecimals,
+  chainId,
+}) => {
+  const queryClient = useQueryClient()
+
+  // Fetch all token balances on the deposit address
+  const { sortedTokens } = useTokenBalances(depositAddress as `0x${string}`)
+
+  // Force refresh every 3 seconds to match backend polling
+  useEffect(() => {
+    const interval = setInterval(() => {
+      queryClient.invalidateQueries({
+        queryKey: ["getTokenBalancesWithPrices", "summary", depositAddress],
+      })
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [depositAddress, queryClient])
+
+  // Find the required token deposit
+  const requiredTokenDeposit = useMemo(() => {
+    if (!sortedTokens || sortedTokens.length === 0) return null
+
+    const normalizedTokenAddress = tokenAddress.toLowerCase()
+    const isNativeDeposit = normalizedTokenAddress === zeroAddress.toLowerCase()
+
+    return sortedTokens.find((token) => {
+      const tokenIsNative = isNativeToken(token)
+      const tokenChainId = tokenIsNative
+        ? token.chainId
+        : token.contractInfo?.chainId
+
+      if (tokenChainId !== chainId) return false
+
+      if (isNativeDeposit) {
+        return tokenIsNative
+      } else {
+        return (
+          !tokenIsNative &&
+          token.contractAddress?.toLowerCase() === normalizedTokenAddress
+        )
+      }
+    })
+  }, [sortedTokens, tokenAddress, chainId])
+
+  // Get all deposits (including other tokens)
+  const allDeposits = useMemo(() => {
+    if (!sortedTokens || sortedTokens.length === 0) return []
+
+    return sortedTokens.filter((token) => {
+      const tokenIsNative = isNativeToken(token)
+      const tokenChainId = tokenIsNative
+        ? token.chainId
+        : token.contractInfo?.chainId
+
+      // Only show tokens from the same chain with balance > 0
+      if (tokenChainId !== chainId) return false
+
+      try {
+        return BigInt(token.balance) > 0n
+      } catch {
+        return false
+      }
+    })
+  }, [sortedTokens, chainId])
+
+  // Determine if we should show the "Detected Deposits" section
+  // Only show if there's more than 1 deposit OR if there's a wrong token deposited
+  const shouldShowDetectedDeposits = useMemo(() => {
+    if (allDeposits.length === 0) return false
+    if (allDeposits.length > 1) return true
+
+    // If only 1 deposit, check if it's the required token
+    const singleDeposit = allDeposits[0]
+    if (!singleDeposit) return false
+
+    const normalizedTokenAddress = tokenAddress.toLowerCase()
+    const isNativeDeposit = normalizedTokenAddress === zeroAddress.toLowerCase()
+    const depositIsNative = isNativeToken(singleDeposit)
+
+    // Get contract address for ERC20 tokens
+    const depositTokenAddress = depositIsNative
+      ? undefined
+      : (singleDeposit as TokenBalanceWithPrice).contractAddress?.toLowerCase()
+
+    // If both are native, don't show (it's the correct token)
+    if (isNativeDeposit && depositIsNative) return false
+
+    // If one is native and other isn't, show (wrong token)
+    if (isNativeDeposit !== depositIsNative) return true
+
+    // If both are ERC20, check if addresses match
+    if (!isNativeDeposit && depositTokenAddress === normalizedTokenAddress) {
+      return false // Same token, don't show
+    }
+
+    // Different token, show
+    return true
+  }, [allDeposits, tokenAddress])
+
+  // Calculate deposit progress
+  const depositStats = useMemo(() => {
+    const requiredBigInt = BigInt(requiredAmount)
+    const currentBalance = requiredTokenDeposit?.balance
+      ? BigInt(requiredTokenDeposit.balance)
+      : 0n
+
+    const percentage =
+      requiredBigInt > 0n
+        ? Number((currentBalance * 10000n) / requiredBigInt) / 100
+        : 0
+
+    const isComplete = currentBalance >= requiredBigInt
+    const isPartial = currentBalance > 0n && currentBalance < requiredBigInt
+    const isOverpaid = currentBalance > requiredBigInt
+
+    const currentFormatted = formatUnits(currentBalance, tokenDecimals)
+    const requiredFormatted = formatUnits(requiredBigInt, tokenDecimals)
+
+    return {
+      currentBalance,
+      percentage: Math.min(percentage, 100),
+      isComplete,
+      isPartial,
+      isOverpaid,
+      currentFormatted,
+      requiredFormatted,
+    }
+  }, [requiredAmount, requiredTokenDeposit, tokenDecimals])
+
+  // Determine status icon and color
+  const getStatusDisplay = () => {
+    if (depositStats.isComplete) {
+      return {
+        icon: <CheckCircle className="w-4 h-4 text-green-500" />,
+        text: "Deposit Complete",
+        progressColor: "bg-green-500",
+      }
+    }
+    if (depositStats.isPartial) {
+      return {
+        icon: <Clock className="w-4 h-4 text-yellow-500" />,
+        text: "Deposit Detected",
+        progressColor: "bg-yellow-500",
+      }
+    }
+    return {
+      icon: <Clock className="w-4 h-4 text-gray-400" />,
+      text: "Waiting for deposit...",
+      progressColor: "bg-gray-300",
+    }
+  }
+
+  const statusDisplay = getStatusDisplay()
+
+  return (
+    <div className="space-y-3">
+      {/* Status Header */}
+      <div className="flex items-center gap-2">
+        {statusDisplay.icon}
+        <p className="text-xs font-medium text-gray-600 dark:text-gray-400">
+          {statusDisplay.text}
+        </p>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="space-y-2">
+        <div className="flex justify-between items-center text-xs">
+          <span className="text-gray-600 dark:text-gray-400">
+            Deposit Progress
+          </span>
+          <span className="font-semibold text-gray-900 dark:text-white">
+            {depositStats.percentage.toFixed(1)}%
+          </span>
+        </div>
+        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden">
+          <div
+            className={`${statusDisplay.progressColor} h-full transition-all duration-500 ease-out`}
+            style={{ width: `${Math.min(depositStats.percentage, 100)}%` }}
+          />
+        </div>
+        <div className="flex justify-between items-center text-xs">
+          <div className="flex items-center gap-1">
+            <TokenImage
+              imageUrl={requiredTokenDeposit?.imageUrl}
+              symbol={tokenSymbol}
+              chainId={chainId}
+              contractAddress={tokenAddress}
+              size={16}
+            />
+            <span className="text-gray-600 dark:text-gray-400">
+              {formatAmountDisplay(depositStats.currentFormatted, {
+                maxFractionDigits: 6,
+                minFractionDigits: 2,
+              })}{" "}
+              /{" "}
+              {formatAmountDisplay(depositStats.requiredFormatted, {
+                maxFractionDigits: 6,
+                minFractionDigits: 2,
+              })}{" "}
+              {tokenSymbol}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Current Deposits List */}
+      {shouldShowDetectedDeposits && (
+        <div className="space-y-1.5">
+          <p className="text-xs text-gray-600 dark:text-gray-400">
+            Detected Deposits:
+          </p>
+          <div className="trails-border-radius-container border trails-border-primary">
+            {allDeposits.map((token, index) => {
+              const tokenIsNative = isNativeToken(token)
+              const symbol = tokenIsNative
+                ? token.symbol || "ETH"
+                : token.contractInfo?.symbol
+              const decimals = tokenIsNative
+                ? token.decimals || 18
+                : token.contractInfo?.decimals || 18
+              const balance = formatUnits(BigInt(token.balance), decimals)
+              const tokenChainId = tokenIsNative
+                ? token.chainId
+                : token.contractInfo?.chainId
+
+              const tokenKey = tokenIsNative
+                ? `native-${tokenChainId}`
+                : `${token.contractAddress}-${tokenChainId}`
+
+              return (
+                <div key={tokenKey}>
+                  <div className="px-2 py-1.5 flex items-center gap-2">
+                    <TokenImage
+                      imageUrl={token.imageUrl}
+                      symbol={symbol}
+                      chainId={tokenChainId || chainId}
+                      contractAddress={
+                        tokenIsNative ? undefined : token.contractAddress
+                      }
+                      size={16}
+                    />
+                    <div className="flex flex-col flex-1 min-w-0">
+                      <span className="text-xs text-gray-900 dark:text-white truncate">
+                        {formatAmountDisplay(balance, {
+                          maxFractionDigits: 6,
+                          minFractionDigits: 2,
+                        })}{" "}
+                        {symbol}
+                      </span>
+                      {token.balanceUsdFormatted && (
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          {token.balanceUsdFormatted}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  {index < allDeposits.length - 1 && (
+                    <div className="border-t trails-border-primary" />
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DepositTracker

package/src/widget/components/Disconnect.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import type React from "react"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { logger } from "../../logger.js"
@@ -12,18 +12,39 @@ export const Disconnect: React.FC<DisconnectProps> = ({
   onBack,
   disconnectHandler,
 }) => {
+  const hasDisconnectedRef = useRef(false)
+  const disconnectHandlerRef = useRef(disconnectHandler)
+
+  // Keep the ref updated with the latest handler
+  useEffect(() => {
+    disconnectHandlerRef.current = disconnectHandler
+  }, [disconnectHandler])
+
   useEffect(() => {
+    // Only run once when component mounts
+    if (hasDisconnectedRef.current) {
+      return
+    }
+
     const handleDisconnect = async () => {
+      hasDisconnectedRef.current = true
       try {
         logger.console.log("[trails-sdk] Disconnecting user...")
-        await disconnectHandler()
+        // Ensure minimum 1 second delay to show disconnecting state
+        await Promise.all([
+          disconnectHandlerRef.current(),
+          new Promise((resolve) => setTimeout(resolve, 1000)),
+        ])
       } catch (error) {
+        // Still wait for minimum delay even if disconnect fails
+        await new Promise((resolve) => setTimeout(resolve, 1000))
         logger.console.error("[trails-sdk] Failed to disconnect:", error)
       }
     }
 
     handleDisconnect()
-  }, [disconnectHandler])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // Empty dependency array - only run once on mount
 
   return (
     <div className="space-y-6">

package/src/widget/components/FeeBreakdown.tsx

@@ -1,9 +1,9 @@
 import type React from "react"
 import { useState } from "react"
-import { InfoIcon } from "@0xsequence/design-system"
 import { Tooltip } from "./Tooltip.js"
 import { TokenImage } from "./TokenImage.js"
 import type { TrailsFeeBreakdown, FeeItem } from "../../fees.js"
+import { Info } from "lucide-react"
 
 interface FeeBreakdownProps {
   feeBreakdown: TrailsFeeBreakdown
@@ -22,7 +22,7 @@ const FeeRow: React.FC<FeeRowProps> = ({ label, feeItem, tooltip }) => (
       {label}
       {tooltip && (
         <Tooltip message={tooltip}>
-          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
         </Tooltip>
       )}
     </span>
@@ -75,7 +75,7 @@ export const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
             children
           ) : (
             <Tooltip message="Detailed breakdown of the Trails platform fees">
-              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+              <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
             </Tooltip>
           )}
         </span>

package/src/widget/components/QRCodeDeposit.tsx

@@ -10,6 +10,7 @@ import { formatUnits, getAddress, zeroAddress } from "viem"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
+import { DepositTracker } from "./DepositTracker.js"
 
 interface QRCodeDepositProps {
   onBack?: () => void
@@ -102,18 +103,19 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
           </div>
 
           {quote?.originAmount && (
-            <div className="flex flex-col items-center justify-center gap-1 pt-2">
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-600 dark:text-gray-300">
-                  deposit exactly
-                </span>
+            <div className="flex flex-col items-center justify-center gap-2 pt-2">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                Deposit exactly
+              </div>
+              <div className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                 <TokenImage
                   imageUrl={quote.originToken.imageUrl}
                   symbol={quote.originToken.symbol}
                   chainId={quote.originChain.id}
-                  size={20}
+                  contractAddress={quote.originToken.contractAddress}
+                  size={24}
                 />
-                <span className="text-sm font-bold text-gray-900 dark:text-white">
+                <span className="text-base font-bold text-gray-900 dark:text-white">
                   {formatUnits(
                     BigInt(quote.originAmount),
                     quote.originToken.decimals,
@@ -121,17 +123,11 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                   {quote.originToken.symbol}
                 </span>
               </div>
-              <div className="flex items-center gap-1">
-                <span className="text-xs text-gray-500 dark:text-gray-400">
-                  on
-                </span>
-                <ChainImage chainId={quote.originChain.id} size={16} />
-                <span className="text-xs font-bold text-gray-500 dark:text-gray-400">
-                  {quote.originChain.name}
-                </span>
-                <span className="text-xs text-gray-500 dark:text-gray-400">
-                  to
-                </span>
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                <span>on</span>
+                <ChainImage chainId={quote.originChain.id} size={14} />
+                <span className="font-medium">{quote.originChain.name}</span>
+                <span>to</span>
                 <a
                   href={getExplorerUrlForAddress({
                     address: quote.originDepositAddress,
@@ -139,7 +135,7 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                   })}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
+                  className="flex items-center gap-1 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer"
                 >
                   <span>
                     {quote.originDepositAddress.slice(0, 6)}...
@@ -152,6 +148,20 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
           )}
         </div>
 
+        {/* Deposit Tracker */}
+        {quote && (
+          <div className="space-y-2">
+            <DepositTracker
+              depositAddress={quote.originDepositAddress}
+              requiredAmount={quote.originAmount}
+              tokenAddress={quote.originToken.contractAddress}
+              tokenSymbol={quote.originToken.symbol}
+              tokenDecimals={quote.originToken.decimals}
+              chainId={quote.originChain.id}
+            />
+          </div>
+        )}
+
         {/* Quote Details */}
         {quote && (
           <div className="space-y-2">

package/src/widget/components/QRCodeOptions.tsx

@@ -0,0 +1,65 @@
+import type React from "react"
+import { QrCode, Wallet, ChevronRight } from "lucide-react"
+import { ScreenHeader } from "./ScreenHeader.js"
+
+export interface QRCodeOptionsProps {
+  onBack?: () => void
+  onSelectWalletConnect: () => void
+  onSelectQRCode: () => void
+}
+
+const QRCodeOptions: React.FC<QRCodeOptionsProps> = ({
+  onBack,
+  onSelectWalletConnect,
+  onSelectQRCode,
+}) => {
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="QR Code Options"
+        headerContentAlign="left"
+        rightSideContent={<div className="w-9" />}
+      />
+
+      <div className="flex-1">
+        <div className="space-y-4">
+          {/* QR Code Options */}
+          <div className="trails-border-radius-container border trails-border-primary">
+            <button
+              type="button"
+              onClick={onSelectWalletConnect}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <Wallet className="w-4 h-4" />
+                <span className="text-sm font-bold">Via WalletConnect</span>
+                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                  Recommended
+                </span>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+
+            {/* Divider between buttons */}
+            <div className="border-b border-gray-200 dark:border-gray-700"></div>
+
+            <button
+              type="button"
+              onClick={onSelectQRCode}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <QrCode className="w-4 h-4" />
+                <span className="text-sm font-bold">Via Deposit QR Code</span>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QRCodeOptions