0xtrails 0.6.6 → 0.7.0

package/src/widget/components/FeeOptions.tsx

@@ -5,13 +5,13 @@ import { TokenImage } from "./TokenImage.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import { logger } from "../../logger.js"
-import type { FeeOption } from "@0xsequence/trails-api"
+import type { FeeOption } from "@0xtrails/api"
 import {
   FeeOption as FeeOptionComponent,
   isFeeOptionDisabled,
 } from "./FeeOption.js"
 import { isNativeToken, normalizeAddress } from "../../utils.js"
-import type { Token } from "../hooks/useOriginSelectedToken.js"
+import type { Token } from "../../tokens.js"
 
 interface FeeOptionsProps {
   processedFeeOptions: ProcessedFeeOption[]
@@ -148,19 +148,10 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   }
 
   return (
-    <div className="space-y-1" ref={accordionRef}>
+    <div ref={accordionRef}>
       <div className="p-2">
-        <div className="flex justify-between items-center mb-2">
-          <div className="text-xs font-medium trails-text-primary">
-            Gas Fee Options
-          </div>
-          <div className="text-xs trails-text-muted">
-            Choose how to pay for gas for transfer
-          </div>
-        </div>
-
-        {/* Accordion Header */}
         <button
+          className="w-full flex justify-between items-center mb-2 cursor-pointer"
           type="button"
           onClick={
             processedFeeOptions.length === 1
@@ -168,40 +159,27 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
               : () => setIsOpen(!isOpen)
           }
           disabled={processedFeeOptions.length === 1}
-          className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border trails-border-primary transition-colors ${
-            processedFeeOptions.length === 1
-              ? "cursor-default"
-              : "hover:trails-hover-bg cursor-pointer"
-          }`}
         >
-          <div className="flex items-center space-x-2">
+          <div className="text-sm font-semibold text-900 dark:text-white">
+            Gas Fee Options
+          </div>
+          <div className="flex items-center gap-1">
             {displayOption && (
-              <>
-                <TokenImage
-                  imageUrl={displayOption.tokenImageUrl}
-                  symbol={displayOption.tokenSymbol}
-                  chainId={displayOption.chainId || chainId}
-                  size={16}
-                />
-                <div className="ml-2 text-left">
-                  <div className="text-xs font-medium trails-text-primary">
-                    {displayOption.amountFormatted}
-                  </div>
-                </div>
-              </>
+              <TokenImage
+                imageUrl={displayOption.tokenImageUrl}
+                symbol={displayOption.tokenSymbol}
+                chainId={displayOption.chainId || chainId}
+                size={16}
+              />
             )}
-          </div>
-          <div className="flex items-center space-x-2">
             {displayOption && (
-              <div className="text-right">
-                <div className="text-xs font-medium trails-text-primary">
-                  ≈ {displayOption.amountUsdDisplay}
-                </div>
+              <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                {displayOption.amountUsdDisplay}
               </div>
             )}
             {processedFeeOptions.length > 1 && (
               <ChevronDown
-                className={`w-3 h-3 trails-text-muted transition-transform ${
+                className={`w-3 h-3 transition-transform text-gray-600 dark:text-gray-400 ${
                   isOpen ? "transform rotate-180" : ""
                 }`}
               />
@@ -209,6 +187,8 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
           </div>
         </button>
 
+        {/* Accordion Header */}
+
         {/* Accordion Content */}
         {isOpen && processedFeeOptions.length > 1 && (
           <div className="mt-2 space-y-1">

package/src/widget/components/Footer.tsx

@@ -6,7 +6,7 @@ import { SITE_URL } from "../../constants.js"
 import { DebugMenu } from "./DebugMenu.js"
 
 interface FooterProps {
-  onDebugScreenSelect: (screen: string) => void
+  onDebugScreenSelect?: (screen: string) => void
 }
 
 export const Footer: React.FC<FooterProps> = ({ onDebugScreenSelect }) => {

package/src/widget/components/Fund.tsx

@@ -2,7 +2,6 @@ import { ChevronRight, Search, Loader2, ArrowDown } 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"
@@ -27,7 +26,7 @@ import { ErrorDisplay } from "./ErrorDisplay.js"
 import { getChainInfo } from "../../chains.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 { PercentageMaxButtons } from "./PercentageMaxButtons.js"
@@ -49,7 +48,7 @@ interface FundProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -57,10 +56,11 @@ interface FundProps {
       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
@@ -84,7 +84,7 @@ export const Fund: React.FC<FundProps> = ({
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   checkoutOnHandlers,
   recentTokens,
   onRecentTokenSelect,
@@ -167,7 +167,7 @@ export const Fund: React.FC<FundProps> = ({
     quoteProvider,
     fundMethod,
     mode,
-    onNavigateToMeshConnect,
+    onNavigateToOnramp,
     checkoutOnHandlers,
   })
 
@@ -196,17 +196,8 @@ export const Fund: React.FC<FundProps> = ({
         defaultDestinationToken,
       )
 
-      const decimals =
-        defaultDestinationToken.contractInfo?.decimals ??
-        (defaultDestinationToken as any)?.decimals
-
-      setDestinationToken(defaultDestinationToken as any)
-      setSelectedDestToken({
-        symbol: defaultDestinationToken.symbol,
-        name: defaultDestinationToken.name,
-        imageUrl: defaultDestinationToken.imageUrl,
-        decimals,
-      })
+      setDestinationToken(defaultDestinationToken)
+      setSelectedDestToken(defaultDestinationToken)
 
       // Also set the destination chain
       if (setSelectedDestinationChain) {
@@ -240,25 +231,13 @@ export const Fund: React.FC<FundProps> = ({
   // Sync global destination token with useSendForm
   useEffect(() => {
     if (globalDestinationToken && selectedDestToken && !toToken) {
-      const decimals =
-        globalDestinationToken.contractInfo?.decimals ??
-        (globalDestinationToken as any)?.decimals
-
-      // Convert global token format to useSendForm format
-      const formattedToken = {
-        symbol: globalDestinationToken.symbol,
-        name: globalDestinationToken.name,
-        imageUrl: globalDestinationToken.imageUrl,
-        decimals,
-      }
-
       // Only update if the tokens are different (to avoid infinite loops)
-      if (selectedDestToken.symbol !== formattedToken.symbol) {
+      if (selectedDestToken.symbol !== globalDestinationToken.symbol) {
         logger.console.log(
           "[trails-sdk] Restoring destination token from global state:",
-          formattedToken,
+          globalDestinationToken,
         )
-        setSelectedDestToken(formattedToken)
+        setSelectedDestToken(globalDestinationToken)
 
         // Also update destination chain to match the selected token's chain
         if (setSelectedDestinationChain && globalDestinationToken.chainId) {
@@ -280,22 +259,12 @@ export const Fund: React.FC<FundProps> = ({
   // Force restore global destination token on mount (runs after useSendForm initialization)
   useEffect(() => {
     if (globalDestinationToken && !toToken) {
-      const decimals =
-        globalDestinationToken.contractInfo?.decimals ??
-        (globalDestinationToken as any)?.decimals
-
       const timeoutId = setTimeout(() => {
-        const formattedToken = {
-          symbol: globalDestinationToken.symbol,
-          name: globalDestinationToken.name,
-          imageUrl: globalDestinationToken.imageUrl,
-          decimals,
-        }
         logger.console.log(
           "[trails-sdk] Force restoring destination token on mount:",
-          formattedToken,
+          globalDestinationToken,
         )
-        setSelectedDestToken(formattedToken)
+        setSelectedDestToken(globalDestinationToken)
 
         if (setSelectedDestinationChain && globalDestinationToken.chainId) {
           const chainInfo = getChainInfo(globalDestinationToken.chainId)
@@ -524,18 +493,8 @@ export const Fund: React.FC<FundProps> = ({
   })
 
   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,
-        },
-      } as any
-      setOriginToken(formattedToken)
+    (token: Token) => {
+      setOriginToken(token)
       logger.console.log("[trails-sdk] selected origin token", token)
       setShowOriginTokenSelector(false)
       // Track the token selection
@@ -545,21 +504,10 @@ export const Fund: React.FC<FundProps> = ({
   )
 
   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) {
@@ -624,17 +572,7 @@ export const Fund: React.FC<FundProps> = ({
           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)
           }}
@@ -670,18 +608,8 @@ export const Fund: React.FC<FundProps> = ({
           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)
           }}
@@ -852,7 +780,7 @@ export const Fund: React.FC<FundProps> = ({
                   {/* Percentage Buttons */}
                   <PercentageMaxButtons
                     userBalance={balanceFormatted}
-                    isNativeToken={originToken.contractAddress === zeroAddress}
+                    isNativeToken={originToken.isNativeToken ?? false}
                     gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                     chainId={originToken.chainId}
                     onAmountSelect={(amount) => {
@@ -1114,30 +1042,6 @@ export const Fund: React.FC<FundProps> = ({
         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}
-
       {/* Fund Button */}
       <form onSubmit={handleSubmit}>
         <button

package/src/widget/components/FundMethods.tsx

@@ -11,14 +11,12 @@ import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 export interface FundMethodsProps {
   onBack?: () => void
   onSelectWalletConnect: () => void
-  onSelectExchangeList: () => void
   onSelectConnectedAccount: () => void
   onSelectQrCode: () => void
 }
 
 const FundMethods: React.FC<FundMethodsProps> = ({
   onBack,
-  onSelectExchangeList,
   onSelectQrCode,
 }) => {
   const { switchAccount } = useSwitchAccount()
@@ -40,7 +38,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
       )
 
       if (connection) {
-        await switchAccount({
+        switchAccount({
           connector: connection.connector,
         })
         logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
@@ -102,9 +100,14 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
             <button
               type="button"
-              onClick={onSelectExchangeList}
-              disabled
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-not-allowed transition-colors opacity-50"
+              onClick={() => {
+                // Set fund method to "exchange" so useSendForm knows to use onramp
+                setSelectedFundMethod("exchange")
+                // Navigate to home screen so user can fill out the form
+                // When they click "Continue to Exchange", it will navigate to onramp screen
+                setCurrentScreen("home")
+              }}
+              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">
                 <ArrowLeftRight className="w-4 h-4" />

package/src/widget/components/FundSwap.tsx

@@ -1,8 +1,8 @@
 import type React from "react"
 import type { Account, WalletClient } from "viem"
 import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import type { Token } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { ClassicSwap } from "./ClassicSwap.js"
@@ -27,7 +27,7 @@ interface FundProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -35,11 +35,12 @@ interface FundProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   onAmountUpdate?: (amount: string) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   isSequenceWallet?: boolean
 }

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -2,9 +2,9 @@ import { ChevronRight, QrCode, Send } from "lucide-react"
 import type React from "react"
 import { truncateAddress } from "../../utils.js"
 import { useAccount, useConnections } from "wagmi"
-import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
+import { AddressWalletIcon } from "./AddressWalletIcon.js"
 
 export const FundingMethodSelectorButton: React.FC = () => {
   const connections = useConnections()
@@ -52,7 +52,7 @@ export const FundingMethodSelectorButton: React.FC = () => {
         ) : (
           <>
             <div className="flex items-center mr-1">
-              <Identicon value={activeAddress} size={16} />
+              <AddressWalletIcon walletAddress={activeAddress} />
             </div>
             <span className="text-sm font-medium m-0">
               {truncateAddress(activeAddress, 4, 4)}