0xtrails 0.9.0 → 0.9.2

package/src/widget/components/MeldForm.tsx

@@ -234,8 +234,8 @@ export const MeldForm: React.FC<MeldFormProps> = ({
 
   // Create OnrampClient client
   const trailsClient = useMemo(() => {
-    return getMeldOnrampClient(trailsApiKey, trailsConfig?.trailsMeldApi)
-  }, [trailsApiKey, trailsConfig?.trailsMeldApi])
+    return getMeldOnrampClient(trailsApiKey, trailsConfig?.trailsApiUrl)
+  }, [trailsApiKey, trailsConfig?.trailsApiUrl])
 
   // Fetch payment methods to get details including images
   const { paymentMethods } = useMeldPaymentMethods(trailsClient, currency)

package/src/widget/components/MeldStepsFlow.tsx

@@ -184,9 +184,9 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
   const trailsClient = useMemo(() => {
     return getMeldOnrampClient(
       trailsConfig.trailsApiKey,
-      trailsConfig.trailsMeldApi,
+      trailsConfig.trailsApiUrl,
     )
-  }, [trailsConfig.trailsApiKey, trailsConfig.trailsMeldApi])
+  }, [trailsConfig.trailsApiKey, trailsConfig.trailsApiUrl])
 
   const [currentScreen, setCurrentScreen] = useState<Screen>("menu")
 

package/src/widget/components/OnrampProviderConfirmation.tsx

@@ -10,7 +10,61 @@ import { useDepositMonitor } from "../hooks/useDepositMonitor.js"
 import { logger } from "../../logger.js"
 import { TruncatedTransactionHash } from "./TruncatedTransactionHash.js"
 import { useAccount } from "wagmi"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import { TokenImage } from "./TokenImage.js"
+
+// TokenDiagram component for displaying the token flow
+interface TokenDiagramProps {
+  onRampQuote?: OnrampQuote | null
+  quote?: PrepareSendQuote | null
+  tokenSize?: number
+  className?: string
+  textClassName?: string
+}
+
+const TokenDiagram: React.FC<TokenDiagramProps> = ({
+  onRampQuote,
+  quote,
+  tokenSize = 20,
+  className = "mt-4 text-sm text-gray-700 dark:text-gray-300 flex items-center gap-3 justify-center",
+  textClassName = "font-medium",
+}) => {
+  if (
+    !onRampQuote?.sourceCurrencyCode ||
+    !quote?.originToken ||
+    !quote?.destinationToken
+  ) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      <span className={textClassName}>{onRampQuote.sourceCurrencyCode}</span>
+      <span className="text-gray-500 dark:text-gray-400">→</span>
+      <div className="flex items-center gap-2">
+        <TokenImage
+          imageUrl={quote.originToken.imageUrl}
+          symbol={quote.originToken.symbol}
+          chainId={quote.originChain?.id}
+          contractAddress={quote.originToken.contractAddress}
+          size={tokenSize}
+        />
+        <span className={textClassName}>{quote.originToken.symbol}</span>
+      </div>
+      <span className="text-gray-500 dark:text-gray-400">→</span>
+      <div className="flex items-center gap-2">
+        <TokenImage
+          imageUrl={quote.destinationToken.imageUrl}
+          symbol={quote.destinationToken.symbol}
+          chainId={quote.destinationChain?.id}
+          contractAddress={quote.destinationToken.contractAddress}
+          size={tokenSize}
+        />
+        <span className={textClassName}>{quote.destinationToken.symbol}</span>
+      </div>
+    </div>
+  )
+}
 
 // Helper function to get centered window parameters
 const getCenteredWindowParams = (width: number, height: number): string => {
@@ -721,7 +775,7 @@ export const OnrampProviderConfirmation: React.FC<
             </div>
 
             {/* Content */}
-            <div className="flex-1">
+            <div className="flex-1 text-left">
               <p className={`text-sm font-medium ${textColorClasses[color]}`}>
                 {getStatusMessage(transaction.status)}
               </p>
@@ -743,14 +797,6 @@ export const OnrampProviderConfirmation: React.FC<
                     transaction.destinationCurrencyCode}
                 </p>
               )}
-              {/* Session ID - subtle display */}
-              {externalSessionId && (
-                <p
-                  className={`text-xs mt-2 ${textColorClasses[color]} opacity-50`}
-                >
-                  Session: {externalSessionId}
-                </p>
-              )}
             </div>
           </div>
         </div>
@@ -759,43 +805,50 @@ export const OnrampProviderConfirmation: React.FC<
 
     // Default case: we have external session ID but no transaction yet
     return (
-      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-        <div className="flex items-start space-x-3">
-          <div className="flex-shrink-0 mt-0.5">
-            <svg
-              className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <title>Loading</title>
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              />
-            </svg>
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-blue-800 dark:text-blue-200">
-              Initializing payment monitoring
-            </p>
-            <p className="text-xs mt-1 text-blue-800 dark:text-blue-200 opacity-75">
-              Status: INITIALIZING
-            </p>
-            <p className="text-xs mt-2 text-blue-800 dark:text-blue-200 opacity-50">
-              Session: {externalSessionId}
-            </p>
+      <>
+        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
+          <div className="flex items-start space-x-3">
+            <div className="flex-shrink-0 mt-0.5">
+              <svg
+                className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <title>Loading</title>
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                />
+              </svg>
+            </div>
+            <div className="flex-1">
+              <p className="text-sm font-medium text-blue-800 dark:text-blue-200">
+                Initializing payment monitoring
+              </p>
+              <p className="text-xs mt-1 text-blue-800 dark:text-blue-200 opacity-75">
+                Status: INITIALIZING
+              </p>
+            </div>
           </div>
         </div>
-      </div>
+        {/* Onramp quote info - subtle display - outside status div */}
+        <TokenDiagram
+          onRampQuote={onRampQuote}
+          quote={quote}
+          tokenSize={14}
+          className="text-xs mt-2 text-gray-600 dark:text-gray-400 opacity-70 flex items-center gap-2 justify-center"
+          textClassName=""
+        />
+      </>
     )
   }
 
@@ -880,13 +933,18 @@ export const OnrampProviderConfirmation: React.FC<
 
             {/* Warning */}
             {!isCountingUp && (
-              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-                Complete the payment within the time limit or the transaction
-                will be canceled.
+              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
+                Complete the payment within the time limit. We use USDC on Base
+                network as the intermediary token, please do not change it.
               </p>
             )}
+            <TokenDiagram
+              onRampQuote={onRampQuote}
+              quote={quote}
+              tokenSize={20}
+            />
             {isCountingUp && (
-              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
                 Your transaction is settling with payment provider. This usually
                 takes 1-5 minutes to complete.
               </p>
@@ -900,10 +958,20 @@ export const OnrampProviderConfirmation: React.FC<
 
             {/* Important Notice - Now at the bottom */}
             <div className="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
-              <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                ⚠️ Important: Do not close this window or navigate away while
-                your payment is processing.
-              </p>
+              <div className="flex items-start space-x-3">
+                {/* Icon */}
+                <div className="flex-shrink-0 mt-0.5">
+                  <span className="text-amber-600 dark:text-amber-400">⚠️</span>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 text-left">
+                  <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                    Important: Do not close this window or navigate away while
+                    your payment is processing.
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
 

package/src/widget/components/Receipt.tsx

@@ -17,7 +17,7 @@ import { useMode } from "../hooks/useMode.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getExplorerUrl } from "../../explorer.js"
 import { logger } from "../../logger.js"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 
 interface ReceiptProps {
   onSendAnother?: () => void

package/src/widget/components/Swap.tsx

@@ -6,7 +6,7 @@ import type { Token } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { ClassicSwap } from "./ClassicSwap.js"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 
 interface SwapProps {
   selectedToken: Token | null

package/src/widget/components/TransferPendingVertical.tsx

@@ -11,7 +11,7 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { ChevronRight } from "lucide-react"
 import { useMode } from "../hooks/useMode.js"
 import { TRAILS_SUPPORT_URL } from "../../constants.js"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (

package/src/widget/components/WalletConfirmation.tsx

@@ -8,7 +8,7 @@ import { QuoteDetails } from "./QuoteDetails.js"
 import { WaasFeeOptions } from "./WaasFeeOptions.js"
 import { useAccount } from "wagmi"
 import { logger } from "../../logger.js"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 
 interface WalletConfirmationProps {
   onBack?: () => void

package/src/widget/providers/TrailsProvider.tsx

@@ -35,7 +35,6 @@ export interface TrailsConfig {
   // Onramp feature flags
   fundOnramp: boolean
   buyCryptoOnramp: boolean
-  trailsMeldApi: string
 }
 
 export interface TrailsProviderProps {
@@ -53,8 +52,6 @@ export interface TrailsProviderProps {
     // Onramp feature flags
     fundOnramp?: boolean
     buyCryptoOnramp?: boolean
-    // Optional Meld API URL to make it easy to test Meld integration with a local API
-    trailsMeldApi?: string
   }
 }
 
@@ -81,8 +78,6 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
       // Onramp feature flags with defaults
       fundOnramp: config.fundOnramp ?? false,
       buyCryptoOnramp: config.buyCryptoOnramp ?? false,
-      trailsMeldApi:
-        config.trailsMeldApi || config.trailsApiUrl || PROD_TRAILS_API_URL,
     } satisfies TrailsConfig
   }, [
     config.trailsApiKey,
@@ -96,7 +91,6 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
     config.debug,
     config.fundOnramp,
     config.buyCryptoOnramp,
-    config.trailsMeldApi,
   ])
 
   // Set global debug mode for backward compatibility with getDebug()

package/src/widget/widget.tsx

@@ -139,7 +139,7 @@ import {
 import { useTrailsModal } from "./providers/TrailsModalProvider.js"
 import { usePreviousScreen } from "./hooks/usePreviousScreen.js"
 import PaymentMethods from "./components/PaymentMethods.js"
-import { OnrampQuote } from "./hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "./hooks/useOnRampQuote.js"
 
 // Validate toToken - must be "ETH", "USDC", or a valid hex address
 const isValidToToToken = (toToken: string | null | undefined) => {
@@ -253,8 +253,6 @@ export type TrailsWidgetProps = {
   // Feature flags
   fundOnramp?: boolean
   buyCryptoOnramp?: boolean
-  // Optional Meld API URL to make it easy to test Meld integration with a local API
-  trailsMeldApi?: string
 }
 
 export interface TrailsWidgetRef {
@@ -2874,7 +2872,6 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       debug: props.debug,
       fundOnramp: props.fundOnramp,
       buyCryptoOnramp: props.buyCryptoOnramp,
-      trailsMeldApi: props.trailsMeldApi,
     }
 
     logger.console.log("trailsConfig", trailsConfig)