0xtrails 0.13.0 → 0.13.2

package/src/onramp/SendFromExchangeButton.tsx

@@ -0,0 +1,81 @@
+import type React from "react"
+import { AlertCircle, ArrowLeftRight, ChevronRight } from "lucide-react"
+import { isMeshEnabled, useTrailsOnRamp } from "./TrailsOnRampProvider.js"
+
+export interface SendFromExchangeButtonProps {
+  /**
+   * Callback to navigate to the onramp screen.
+   * The onramp screen will show the exchange list.
+   */
+  onNavigateToOnramp?: () => void
+}
+
+/**
+ * Button component for "Send from Exchange" option in FundMethods.
+ * Only renders if Mesh onramp is configured and exchanges are configured.
+ * Shows an error message if no exchanges are configured.
+ * When clicked, navigates directly to the onramp screen which shows the exchange list.
+ */
+export const SendFromExchangeButton: React.FC<SendFromExchangeButtonProps> = ({
+  onNavigateToOnramp,
+}) => {
+  const onRampContext = useTrailsOnRamp()
+
+  // Check if exchanges are configured
+  const hasExchanges =
+    onRampContext?.config.mesh?.exchanges &&
+    onRampContext.config.mesh.exchanges.length > 0
+
+  const meshEnabled = isMeshEnabled(onRampContext?.config)
+
+  if (!meshEnabled) {
+    return null
+  }
+
+  // If no exchanges configured, show error message
+  if (!hasExchanges) {
+    return (
+      <>
+        {/* Divider between buttons */}
+        <div className="border-b border-gray-200 dark:border-gray-700"></div>
+
+        <div className="px-3 py-4 text-sm">
+          <div className="flex items-center gap-3 text-amber-600 dark:text-amber-400">
+            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+            <div className="flex-1">
+              <p className="font-medium">Exchange list not configured</p>
+              <p className="text-xs mt-1 text-amber-500 dark:text-amber-500">
+                Please configure at least one exchange in the onramp settings.
+              </p>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  // If no navigation callback provided, don't render button
+  if (!onNavigateToOnramp) {
+    return null
+  }
+
+  // Render the button - clicking navigates to the onramp screen which shows the exchange list
+  return (
+    <>
+      {/* Divider between buttons */}
+      <div className="border-b border-gray-200 dark:border-gray-700"></div>
+
+      <button
+        type="button"
+        onClick={onNavigateToOnramp}
+        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" />
+          <span className="text-sm font-bold">Send from Exchange</span>
+        </div>
+        <ChevronRight className="w-5 h-5 text-gray-400" />
+      </button>
+    </>
+  )
+}

package/src/onramp/TrailsOnRampProvider.tsx

@@ -0,0 +1,59 @@
+import type React from "react"
+import { createContext, useContext, useMemo } from "react"
+
+export interface MeshConfig {
+  exchanges?: string[]
+  clientId?: string
+  environment?: "sandbox" | "production"
+  sandbox?: boolean
+  sandboxEnabled?: boolean
+  productionEnabled?: boolean
+  mode?: "sandbox" | "production"
+}
+
+export interface TrailsOnRampConfig {
+  mesh?: MeshConfig
+  environment?: "sandbox" | "production"
+  apiKey?: string
+  jwt?: string
+  hostname?: string
+  clientId?: string
+}
+
+interface TrailsOnRampContextValue {
+  config: TrailsOnRampConfig
+}
+
+const TrailsOnRampContext = createContext<TrailsOnRampContextValue | null>(null)
+
+export interface TrailsOnRampProviderProps {
+  config?: TrailsOnRampConfig
+  children: React.ReactNode
+}
+
+export function TrailsOnRampProvider({
+  config = {},
+  children,
+}: TrailsOnRampProviderProps) {
+  const value = useMemo<TrailsOnRampContextValue>(() => ({ config }), [config])
+
+  return (
+    <TrailsOnRampContext.Provider value={value}>
+      {children}
+    </TrailsOnRampContext.Provider>
+  )
+}
+
+export function useTrailsOnRamp(): TrailsOnRampContextValue | null {
+  return useContext(TrailsOnRampContext)
+}
+
+export function isMeshEnabled(config?: TrailsOnRampConfig | null): boolean {
+  return !!config?.mesh
+}
+
+export function getActiveMeshMode(
+  config?: TrailsOnRampConfig | null,
+): "sandbox" | "production" {
+  return config?.mesh?.environment ?? "production"
+}

package/src/onramp/index.ts

@@ -0,0 +1,31 @@
+export { MeshConnectFlow } from "./MeshConnectFlow.js"
+export type {
+  MeshConnectFlowProps,
+  SelectedMeshExchange,
+} from "./MeshConnectFlow.js"
+export { MeshConnectIframe } from "./MeshConnectIframe.js"
+export type { MeshConnectProps } from "./MeshConnectIframe.js"
+export { SendFromExchangeButton } from "./SendFromExchangeButton.js"
+export type { SendFromExchangeButtonProps } from "./SendFromExchangeButton.js"
+export {
+  SimpleHeader,
+  type SimpleHeaderProps,
+} from "../meld/components/SimpleHeader.js"
+export {
+  TrailsOnRampProvider,
+  getActiveMeshMode,
+  isMeshEnabled,
+  useTrailsOnRamp,
+} from "./TrailsOnRampProvider.js"
+export type {
+  MeshConfig,
+  TrailsOnRampConfig,
+  TrailsOnRampProviderProps,
+} from "./TrailsOnRampProvider.js"
+export {
+  trailsOnramp,
+  getTrailsOnrampConfig,
+  normalizeTrailsOnrampConfig,
+} from "./trailsOnramp.js"
+export type { OnrampFactory, OnrampWidgetHandlers } from "./trailsOnramp.js"
+export * from "./meshconnect.js"

package/src/onramp/meshconnect.ts

@@ -0,0 +1,277 @@
+import {
+  type CreateMeshLinkTokenRequest,
+  type CreateMeshLinkTokenResponse,
+  type GetMeshIntegrationsRequest,
+  type GetMeshSupportedTokensRequest,
+  type GetMeshSupportedTokensResponse,
+  type MeshIntegration,
+  type MeshSupportedToken,
+  TrailsOnrampRpcClient,
+} from "@0xtrails/api/onramp"
+import type { TrailsOnRampConfig } from "./TrailsOnRampProvider.js"
+import { getActiveMeshMode } from "./TrailsOnRampProvider.js"
+
+const MESH_INTEGRATIONS_CACHE_TTL_MS = 30_000
+const MESH_LINK_TOKEN_CACHE_TTL_MS = 5_000
+
+const meshIntegrationsCache = new Map<
+  string,
+  { integrations: MeshIntegration[]; expiresAt: number }
+>()
+const meshIntegrationsInFlight = new Map<string, Promise<MeshIntegration[]>>()
+const meshLinkTokenCache = new Map<
+  string,
+  { response: CreateMeshLinkTokenResponse; expiresAt: number }
+>()
+const meshLinkTokenInFlight = new Map<
+  string,
+  Promise<CreateMeshLinkTokenResponse>
+>()
+const meshSupportedTokensCache = new Map<
+  string,
+  { tokens: MeshSupportedToken[]; expiresAt: number }
+>()
+const meshSupportedTokensInFlight = new Map<
+  string,
+  Promise<MeshSupportedToken[]>
+>()
+
+export interface CreateMeshLinkTokenOptions {
+  address: string
+  symbol: string
+  amount: string
+  destinationChainId: number | string
+  integrationId?: string
+  exchangeType?: string
+  transactionId?: string
+  restrictMultipleAccounts?: boolean
+}
+
+function createOnrampClient(
+  config?: TrailsOnRampConfig,
+): TrailsOnrampRpcClient {
+  const customFetch = (
+    input: RequestInfo,
+    init?: RequestInit,
+  ): Promise<Response> => {
+    const headers: Record<string, string> = {}
+
+    if (config?.jwt && config.jwt.length > 0) {
+      headers.Authorization = `BEARER ${config.jwt}`
+    }
+
+    if (config?.apiKey && config.apiKey.length > 0) {
+      headers["X-Access-Key"] = config.apiKey
+    }
+
+    init = init || {}
+    init.headers = { ...init.headers, ...headers }
+
+    return fetch(input, init)
+  }
+
+  return new TrailsOnrampRpcClient(
+    config?.hostname && config.hostname.length > 0
+      ? config.hostname
+      : "https://trails-api.sequence.app",
+    customFetch,
+  )
+}
+
+function getMeshConfigKey(config?: TrailsOnRampConfig): string {
+  return JSON.stringify({
+    hostname: config?.hostname ?? "",
+    apiKey: config?.apiKey ?? "",
+    jwt: config?.jwt ?? "",
+    environment: getActiveMeshMode(config),
+  })
+}
+
+export async function getMeshIntegrations(
+  config?: TrailsOnRampConfig,
+): Promise<MeshIntegration[]> {
+  const cacheKey = getMeshConfigKey(config)
+  const cached = meshIntegrationsCache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.integrations
+  }
+
+  const inFlight = meshIntegrationsInFlight.get(cacheKey)
+  if (inFlight) {
+    return inFlight
+  }
+
+  const client = createOnrampClient(config)
+  const request: GetMeshIntegrationsRequest = {
+    environment: getActiveMeshMode(config),
+  }
+  const requestPromise = client
+    .getMeshIntegrations(request)
+    .then((response) => {
+      const integrations = response.integrations || []
+      meshIntegrationsCache.set(cacheKey, {
+        integrations,
+        expiresAt: Date.now() + MESH_INTEGRATIONS_CACHE_TTL_MS,
+      })
+      return integrations
+    })
+    .finally(() => {
+      meshIntegrationsInFlight.delete(cacheKey)
+    })
+
+  meshIntegrationsInFlight.set(cacheKey, requestPromise)
+  return requestPromise
+}
+
+export async function getMeshIntegrationId(
+  exchangeType: string,
+  config?: TrailsOnRampConfig,
+): Promise<string | undefined> {
+  const integrations = await getMeshIntegrations(config)
+  return integrations.find((integration) => integration.key === exchangeType)
+    ?.id
+}
+
+export async function getCoinbaseIntegrationId(
+  config?: TrailsOnRampConfig,
+): Promise<string | undefined> {
+  return (
+    (await getMeshIntegrationId("coinbaseRamp", config)) ??
+    getMeshIntegrationId("coinbase", config)
+  )
+}
+
+export async function getBinanceIntegrationId(
+  config?: TrailsOnRampConfig,
+): Promise<string | undefined> {
+  return (
+    (await getMeshIntegrationId("binanceInternationalDirect", config)) ??
+    getMeshIntegrationId("binanceInternational", config)
+  )
+}
+
+export async function getBitfinexIntegrationId(
+  config?: TrailsOnRampConfig,
+): Promise<string | undefined> {
+  return (
+    (await getMeshIntegrationId("bitfinexDirect", config)) ??
+    getMeshIntegrationId("bitfinex", config)
+  )
+}
+
+export async function createMeshLinkToken(
+  options: CreateMeshLinkTokenOptions,
+  config?: TrailsOnRampConfig,
+): Promise<CreateMeshLinkTokenResponse> {
+  const cacheKey = JSON.stringify({
+    config: getMeshConfigKey(config),
+    request: {
+      address: options.address,
+      symbol: options.symbol,
+      amount: options.amount,
+      destinationChainId: options.destinationChainId.toString(),
+      integrationId: options.integrationId ?? "",
+      exchangeType: options.exchangeType ?? "",
+      restrictMultipleAccounts: options.restrictMultipleAccounts ?? false,
+      transactionId: options.transactionId ?? "",
+    },
+  })
+
+  const cached = meshLinkTokenCache.get(cacheKey)
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.response
+  }
+
+  const inFlight = meshLinkTokenInFlight.get(cacheKey)
+  if (inFlight) {
+    return inFlight
+  }
+
+  const client = createOnrampClient(config)
+  const request: CreateMeshLinkTokenRequest = {
+    environment: getActiveMeshMode(config),
+    clientId: config?.mesh?.clientId ?? config?.clientId,
+    recipientAddress: options.address,
+    tokenSymbol: options.symbol,
+    destinationChainId: options.destinationChainId.toString(),
+    amount: options.amount,
+    integrationId: options.integrationId,
+    exchangeType: options.exchangeType,
+    transactionId: options.transactionId,
+    restrictMultipleAccounts: options.restrictMultipleAccounts,
+  }
+  const requestPromise = client
+    .createMeshLinkToken(request)
+    .then((response) => {
+      meshLinkTokenCache.set(cacheKey, {
+        response,
+        expiresAt: Date.now() + MESH_LINK_TOKEN_CACHE_TTL_MS,
+      })
+      return response
+    })
+    .finally(() => {
+      meshLinkTokenInFlight.delete(cacheKey)
+    })
+
+  meshLinkTokenInFlight.set(cacheKey, requestPromise)
+  return requestPromise
+}
+
+export async function getMeshSupportedTokens(
+  request: Omit<GetMeshSupportedTokensRequest, "environment">,
+  config?: TrailsOnRampConfig,
+): Promise<MeshSupportedToken[]> {
+  const cacheKey = JSON.stringify({
+    config: getMeshConfigKey(config),
+    request: {
+      integrationId: request.integrationId ?? "",
+      exchangeType: request.exchangeType ?? "",
+      chainIds: request.chainIds ?? [],
+    },
+  })
+
+  const cached = meshSupportedTokensCache.get(cacheKey)
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.tokens
+  }
+
+  const inFlight = meshSupportedTokensInFlight.get(cacheKey)
+  if (inFlight) {
+    return inFlight
+  }
+
+  const client = createOnrampClient(config)
+  const fullRequest: GetMeshSupportedTokensRequest = {
+    environment: getActiveMeshMode(config),
+    integrationId: request.integrationId,
+    exchangeType: request.exchangeType,
+    chainIds: request.chainIds,
+  }
+  const requestPromise = client
+    .getMeshSupportedTokens(fullRequest)
+    .then((response: GetMeshSupportedTokensResponse) => {
+      const tokens = response.tokens || []
+      meshSupportedTokensCache.set(cacheKey, {
+        tokens,
+        expiresAt: Date.now() + MESH_INTEGRATIONS_CACHE_TTL_MS,
+      })
+      return tokens
+    })
+    .finally(() => {
+      meshSupportedTokensInFlight.delete(cacheKey)
+    })
+
+  meshSupportedTokensInFlight.set(cacheKey, requestPromise)
+  return requestPromise
+}
+
+export default {
+  createMeshLinkToken,
+  getMeshIntegrations,
+  getMeshSupportedTokens,
+  getMeshIntegrationId,
+  getCoinbaseIntegrationId,
+  getBinanceIntegrationId,
+  getBitfinexIntegrationId,
+}

package/src/onramp/trailsOnramp.tsx

@@ -0,0 +1,130 @@
+import type React from "react"
+import { MeshConnectFlow } from "./MeshConnectFlow.js"
+import type { SelectedMeshExchange } from "./MeshConnectFlow.js"
+import {
+  TrailsOnRampProvider,
+  type TrailsOnRampConfig,
+} from "./TrailsOnRampProvider.js"
+
+export interface OnrampWidgetHandlers {
+  setCurrentScreen: (screen: string) => void
+  onComplete?: (transferData: unknown) => void
+  onError?: (error: unknown) => void
+  onBack?: () => void
+  toTokenSymbol?: string
+  toTokenAmount?: string
+  toChainId?: number
+  toRecipientAddress?: string
+  toAmountUsd?: number
+  selectedExchange?: SelectedMeshExchange
+  apiKey?: string
+  hostname?: string
+}
+
+export type OnrampFactory = (
+  handlers: OnrampWidgetHandlers,
+) => React.ReactElement
+
+type OnrampFactoryWithConfig = OnrampFactory & {
+  trailsOnrampConfig?: TrailsOnRampConfig
+}
+
+export function normalizeTrailsOnrampConfig(
+  config?: TrailsOnRampConfig,
+): TrailsOnRampConfig | undefined {
+  if (!config) {
+    return undefined
+  }
+
+  if (!config.mesh) {
+    return config
+  }
+
+  return {
+    ...config,
+    mesh: {
+      environment: "production",
+      ...config.mesh,
+    },
+  }
+}
+
+export function getTrailsOnrampConfig(
+  factory?: OnrampFactory,
+): TrailsOnRampConfig | undefined {
+  return normalizeTrailsOnrampConfig(
+    (factory as OnrampFactoryWithConfig | undefined)?.trailsOnrampConfig,
+  )
+}
+
+export function trailsOnramp(options: {
+  config?: TrailsOnRampConfig
+}): OnrampFactory {
+  const normalizedConfig = normalizeTrailsOnrampConfig(options.config)
+  const factory: OnrampFactoryWithConfig = (handlers: OnrampWidgetHandlers) => {
+    const {
+      setCurrentScreen,
+      onComplete,
+      onBack,
+      toTokenSymbol,
+      toTokenAmount,
+      toChainId,
+      toRecipientAddress,
+      toAmountUsd,
+      selectedExchange,
+      apiKey,
+      hostname,
+    } = handlers
+
+    const handleBack = () => {
+      if (onBack) {
+        onBack()
+      } else {
+        setCurrentScreen("home")
+      }
+    }
+
+    const handleComplete = (transferData: unknown) => {
+      console.log("[onramp] handleComplete called:", {
+        hasOnComplete: !!onComplete,
+        transferData,
+      })
+      if (onComplete) {
+        try {
+          console.log("[onramp] Calling onComplete from widget handlers")
+          onComplete(transferData)
+          console.log("[onramp] onComplete called successfully")
+        } catch (error) {
+          console.error("[onramp] Error in onComplete:", error)
+        }
+      } else {
+        console.warn("[onramp] onComplete handler not provided by widget")
+      }
+    }
+
+    const configWithApiKey = {
+      ...normalizedConfig,
+      apiKey: apiKey || normalizedConfig?.apiKey,
+      hostname: hostname || normalizedConfig?.hostname,
+    }
+
+    return (
+      <TrailsOnRampProvider config={configWithApiKey}>
+        <MeshConnectFlow
+          onBack={handleBack}
+          onComplete={handleComplete}
+          toTokenSymbol={toTokenSymbol}
+          toTokenAmount={toTokenAmount}
+          toChainId={toChainId}
+          toRecipientAddress={toRecipientAddress}
+          toAmountUsd={toAmountUsd}
+          selectedExchange={selectedExchange}
+        />
+      </TrailsOnRampProvider>
+    )
+  }
+
+  factory.trailsOnrampConfig = normalizedConfig
+
+  return factory
+}

package/src/onramp-client/index.ts

@@ -1,8 +1,6 @@
-export * from "./trails-onramp.gen.js"
-
 import type { TrailsApi } from "@0xtrails/api"
-
-import { TrailsOnramp as BaseTrailsOnramp } from "./trails-onramp.gen.js"
+export type * from "@0xtrails/api/onramp"
+import { TrailsOnrampRpcClient } from "@0xtrails/api/onramp"
 
 export interface TrailsOnrampOptions {
   apiKey?: string
@@ -10,11 +8,11 @@ export interface TrailsOnrampOptions {
   hostname?: string
 }
 
-export class TrailsOnramp extends BaseTrailsOnramp {
+export class TrailsOnramp extends TrailsOnrampRpcClient {
   static fromTrailsApiClient(client: TrailsApi): TrailsOnramp {
     const hostname = client.getHostname()
     const fetchFn = client.getFetch()
-    return new BaseTrailsOnramp(hostname, fetchFn)
+    return new TrailsOnrampRpcClient(hostname, fetchFn)
   }
 
   constructor(apiKey: string, options?: TrailsOnrampOptions) {

package/src/paymasterSend.ts

@@ -10,7 +10,6 @@ import {
   toHex,
   zeroAddress,
 } from "viem"
-import { getChainRpcClient } from "./chains.js"
 import type { UserOperation } from "viem/account-abstraction"
 import {
   createBundlerClient,
@@ -193,9 +192,6 @@ export async function getPaymasterGaslessTransaction({
   recipient: `0x${string}`
   delegatorSmartAccount: ToSimpleSmartAccountReturnType
 }): Promise<{ to: string; data: string; value: string }[]> {
-  // Initialize clients
-  const publicClient = getChainRpcClient(chain.id)
-
   if (!walletClient.account) {
     throw new Error("No account found")
   }
@@ -205,7 +201,6 @@ export async function getPaymasterGaslessTransaction({
   logger.console.log("[trails-sdk] Transfer amount:", amount.toString())
 
   const { signature, deadline } = await getPermitSignature({
-    publicClient,
     walletClient,
     signer: connectedAccount,
     spender: delegatorSmartAccount.address,