0xtrails 0.6.6 → 0.7.0

package/src/widget/components/Pay.tsx

@@ -2,7 +2,6 @@ import { Search, Loader2, ChevronRight } from "lucide-react"
 import { useEffect, useState, useMemo, useRef, useCallback } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
-import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
@@ -29,7 +28,7 @@ import { getChainInfo } from "../../chains.js"
 import { FeeOptions } from "./FeeOptions.js"
 import { truncateAddress } from "../../utils.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
 import { TokenSelectorButton } from "./TokenSelectorButton.js"
@@ -57,7 +56,7 @@ interface PayProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -65,10 +64,11 @@ interface PayProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   toRecipient?: string
   toAmount?: string
@@ -94,7 +94,7 @@ export const Pay: React.FC<PayProps> = ({
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   checkoutOnHandlers,
   recentTokens,
   onRecentTokenSelect,
@@ -220,7 +220,7 @@ export const Pay: React.FC<PayProps> = ({
     quoteProvider,
     fundMethod,
     mode,
-    onNavigateToMeshConnect,
+    onNavigateToOnramp,
     checkoutOnHandlers,
   })
 
@@ -254,32 +254,13 @@ export const Pay: React.FC<PayProps> = ({
       )
 
       if (destinationToken) {
-        const decimals =
-          destinationToken.contractInfo?.decimals ??
-          (destinationToken as any)?.decimals
-
-        const formattedToken = {
-          ...destinationToken,
-          contractInfo: {
-            decimals,
-            contractAddress: destinationToken.contractAddress,
-            symbol: destinationToken.symbol,
-            name: destinationToken.name,
-          },
-        }
-
         logger.console.log(
           "[trails-sdk] Auto-selecting destination token from props:",
-          formattedToken,
+          destinationToken,
         )
 
-        setDestinationToken(formattedToken as any)
-        setSelectedDestToken({
-          symbol: destinationToken.symbol,
-          name: destinationToken.name,
-          imageUrl: destinationToken.imageUrl,
-          decimals,
-        })
+        setDestinationToken(destinationToken)
+        setSelectedDestToken(destinationToken)
 
         // Set the destination chain
         if (setSelectedDestinationChain) {
@@ -375,16 +356,7 @@ export const Pay: React.FC<PayProps> = ({
           setDestinationToken(defaultDestinationToken as any)
         }
 
-        const decimals =
-          destTokenToUse.contractInfo?.decimals ??
-          (destTokenToUse as any)?.decimals
-
-        setSelectedDestToken({
-          symbol: destTokenToUse.symbol,
-          name: destTokenToUse.name,
-          imageUrl: destTokenToUse.imageUrl,
-          decimals,
-        })
+        setSelectedDestToken(destTokenToUse)
 
         // Also set the destination chain if available
         if (setSelectedDestinationChain && destTokenToUse.chainId) {
@@ -458,20 +430,9 @@ export const Pay: React.FC<PayProps> = ({
   const inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
 
   const handleOriginTokenSelect = useCallback(
-    (token: any) => {
-      const formattedToken = {
-        ...token,
-        decimals: token.contractInfo?.decimals || token.decimals,
-        contractInfo: {
-          decimals: token.contractInfo?.decimals || token.decimals,
-          contractAddress: token.contractAddress,
-          symbol: token.symbol,
-          name: token.name,
-        },
-      }
-
+    (token: Token) => {
       // Update global origin token state
-      setOriginToken(formattedToken as any)
+      setOriginToken(token)
       setShowOriginTokenSelector(false)
       logger.console.log("[trails-sdk] selected origin token", token)
       // Track the token selection
@@ -481,21 +442,10 @@ export const Pay: React.FC<PayProps> = ({
   )
 
   const handleDestinationTokenSelect = useCallback(
-    (token: any) => {
-      const formattedToken = {
-        ...token,
-        decimals: token.contractInfo?.decimals || token.decimals,
-        contractInfo: {
-          decimals: token.contractInfo?.decimals || token.decimals,
-          contractAddress: token.contractAddress,
-          symbol: token.symbol,
-          name: token.name,
-        },
-      }
-
+    (token: Token) => {
       // Update both global destination token state and useSendForm state
-      setDestinationToken(formattedToken as any)
-      setSelectedDestToken(formattedToken as any)
+      setDestinationToken(token)
+      setSelectedDestToken(token)
 
       // Update destination chain to match the selected token's chain
       if (setSelectedDestinationChain && token.chainId) {
@@ -560,17 +510,7 @@ export const Pay: React.FC<PayProps> = ({
           compactMode={false}
           recentTokens={recentTokens}
           onRecentTokenSelect={(token) => {
-            const formattedToken = {
-              ...token,
-              decimals: token.decimals,
-              contractInfo: {
-                decimals: token.decimals,
-                contractAddress: token.contractAddress,
-                symbol: token.symbol,
-                name: token.name,
-              },
-            } as any
-            setOriginToken(formattedToken)
+            setOriginToken(token)
             setShowOriginTokenSelector(false)
             onRecentTokenSelect?.(token)
           }}
@@ -606,18 +546,8 @@ export const Pay: React.FC<PayProps> = ({
           compactMode={false}
           recentTokens={recentTokens}
           onRecentTokenSelect={(token) => {
-            const formattedToken = {
-              ...token,
-              decimals: token.decimals,
-              contractInfo: {
-                decimals: token.decimals,
-                contractAddress: token.contractAddress,
-                symbol: token.symbol,
-                name: token.name,
-              },
-            } as any
-            setDestinationToken(formattedToken)
-            setSelectedDestToken(formattedToken)
+            setDestinationToken(token)
+            setSelectedDestToken(token)
             setShowDestinationTokenSelector(false)
             onRecentTokenSelect?.(token)
           }}
@@ -672,7 +602,15 @@ export const Pay: React.FC<PayProps> = ({
         /* Payment Request UI */
         <>
           {/* Payment Request Header */}
-          <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
+          <div
+            className="space-y-1 trails-bg-secondary p-3 border bg-white dark:bg-gray-800"
+            style={{
+              borderColor: "var(--trails-bg-secondary-hover)",
+              borderWidth: "1px",
+              borderStyle: "solid",
+              borderRadius: "var(--trails-border-radius-large-button)",
+            }}
+          >
             <div className="flex justify-start">
               <div className="flex items-center font-medium trails-text-primary text-sm flex-wrap whitespace-break-spaces break-all min-w-full">
                 {payMessage}
@@ -682,7 +620,14 @@ export const Pay: React.FC<PayProps> = ({
 
           {/* Origin Token Selection for Payment Request */}
           <div className="mb-4">
-            <div className="pt-4 pb-4 trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent min-h-[120px] flex flex-col">
+            <div
+              className="pt-4 pb-4 trails-border-radius-container p-3 group transition-all duration-200 border bg-white dark:bg-gray-800 min-h-[120px] flex flex-col"
+              style={{
+                borderColor: "var(--trails-bg-secondary-hover)",
+                borderWidth: "1px",
+                borderStyle: "solid",
+              }}
+            >
               {/* Amount to Pay Label */}
               <div className="mb-4 flex justify-between items-center">
                 <div className="text-sm font-medium trails-text-secondary text-left m-0">
@@ -729,7 +674,27 @@ export const Pay: React.FC<PayProps> = ({
                 <div className="text-xs text-gray-500 dark:text-gray-400">
                   {originToken?.symbol &&
                   prepareSendQuote?.originAmountFormatted ? (
-                    <>≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}</>
+                    prepareSendQuote?.originAmountUsdDisplay === "$0.00" ||
+                    prepareSendQuote?.originAmountUsdDisplay === "$0" ? (
+                      <>
+                        {prepareSendQuote.originAmountFormatted}{" "}
+                        {originToken.symbol}
+                      </>
+                    ) : (
+                      <>
+                        ≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}
+                        {prepareSendQuote?.fees?.totalFeeAmountUsd &&
+                        parseFloat(prepareSendQuote.fees.totalFeeAmountUsd) >
+                          0 ? (
+                          <span className="text-green-600 dark:text-green-400">
+                            {" "}
+                            (incl.{" "}
+                            {prepareSendQuote.fees.totalFeeAmountUsdDisplay}{" "}
+                            fees)
+                          </span>
+                        ) : null}
+                      </>
+                    )
                   ) : (
                     <span>&nbsp;</span>
                   )}
@@ -776,10 +741,7 @@ export const Pay: React.FC<PayProps> = ({
                       {!toAmount && (
                         <PercentageMaxButtons
                           userBalance={originTokenBalance.balanceFormatted}
-                          isNativeToken={
-                            originToken.contractAddress === zeroAddress ||
-                            originToken.contractAddress === undefined
-                          }
+                          isNativeToken={originToken.isNativeToken ?? false}
                           gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                           chainId={originToken.chainId}
                           onAmountSelect={(amount) => {
@@ -920,11 +882,15 @@ export const Pay: React.FC<PayProps> = ({
           <div className="space-y-1">
             {/* Destination Amount Input Section - Like Fund.tsx but for destination token */}
             <div
-              className={`pt-4 pb-4 trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent min-h-[120px] flex flex-col ${
-                !toAmount
-                  ? "trails-bg-secondary-hover focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary"
-                  : ""
+              className={`pt-4 pb-4 p-3 group transition-all duration-200 border min-h-[120px] flex flex-col ${
+                !toAmount ? "" : ""
               }`}
+              style={{
+                borderColor: "var(--trails-bg-secondary-hover)",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                borderRadius: "var(--trails-border-radius-large-button)",
+              }}
             >
               {/* Amount to Pay Label */}
               <div className="mb-4 flex justify-between items-center">
@@ -999,30 +965,6 @@ export const Pay: React.FC<PayProps> = ({
         severity="warning"
       />
 
-      {prepareSendQuote?.noSufficientBalance ? (
-        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-4 h-4 text-amber-500 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <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>
-            <p className="text-sm text-amber-600 dark:text-amber-400">
-              Insufficient balance to complete this transaction
-            </p>
-          </div>
-        </div>
-      ) : null}
-
       {/* Fee Options */}
       {fundMethod !== "qr-code" && fundMethod !== "exchange" && originToken && (
         <FeeOptions

package/src/widget/components/PoolDeposit.tsx

@@ -32,7 +32,7 @@ import { getExplorerUrlForAddress } from "../../explorer.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
 import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 import { FeeOptions } from "./FeeOptions.js"
@@ -56,7 +56,7 @@ interface PoolDepositProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -64,10 +64,11 @@ interface PoolDepositProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   onPoolSelectorStateChange?: (isShowing: boolean) => void
 }
@@ -85,7 +86,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   checkoutOnHandlers,
   recentTokens,
   onRecentTokenSelect,
@@ -207,7 +208,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     quoteProvider,
     fundMethod,
     mode,
-    onNavigateToMeshConnect,
+    onNavigateToOnramp,
     checkoutOnHandlers,
   })
 
@@ -227,18 +228,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     ) {
       const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
       if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        const decimals =
-          highestValueToken.contractInfo?.decimals ??
-          (highestValueToken as any)?.decimals
-        setOriginToken({
-          ...highestValueToken,
-          contractInfo: {
-            decimals,
-            contractAddress: highestValueToken.contractAddress,
-            symbol: highestValueToken.symbol,
-            name: highestValueToken.name,
-          },
-        } as any)
+        setOriginToken(highestValueToken)
       }
     }
   }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
@@ -276,18 +266,8 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     setShowEarnPools(false)
   }
 
-  const handleOriginTokenSelect = (token: any) => {
-    const formattedToken = {
-      ...token,
-      decimals: token.contractInfo?.decimals || token.decimals,
-      contractInfo: {
-        decimals: token.contractInfo?.decimals || token.decimals,
-        contractAddress: token.contractAddress,
-        symbol: token.symbol,
-        name: token.name,
-      },
-    } as any
-    setOriginToken(formattedToken)
+  const handleOriginTokenSelect = (token: Token) => {
+    setOriginToken(token)
     logger.console.log("[trails-sdk] selected origin token", token)
     setShowOriginTokenSelector(false)
     // Track the token selection
@@ -420,7 +400,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
                 {/* Percentage Buttons */}
                 <PercentageMaxButtons
                   userBalance={balanceFormatted}
-                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  isNativeToken={originToken.isNativeToken ?? false}
                   gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                   chainId={originToken.chainId}
                   onAmountSelect={handleAmountSelect}
@@ -569,30 +549,6 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
         )}
       </div>
 
-      {prepareSendQuote?.noSufficientBalance ? (
-        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-4 h-4 text-amber-500 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <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>
-            <p className="text-sm text-amber-600 dark:text-amber-400">
-              Insufficient balance to complete this transaction
-            </p>
-          </div>
-        </div>
-      ) : null}
-
       {/* Fee Options */}
       {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
         <FeeOptions

package/src/widget/components/PoolWithdraw.tsx

@@ -17,7 +17,7 @@ import { getChainInfo } from "../../chains.js"
 import { useAmountUsd } from "../hooks/useAmountUsd.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { generateAaveWithdrawCalldata } from "../../aave.js"
 import { generateMorphoWithdrawCalldata } from "../../morpho.js"
@@ -36,8 +36,8 @@ interface PoolWithdrawProps {
   onError: (error: Error | string | null) => void
   onComplete: (result: OnCompleteProps) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   onPoolSelectorStateChange?: (isShowing: boolean) => void
 }