0xtrails 0.13.2 → 0.14.0

package/src/meld/components/MeldTokensList.tsx

@@ -1,321 +0,0 @@
-import { Search } from "lucide-react"
-import type React from "react"
-import { useMemo, useState } from "react"
-import { useQuery } from "@tanstack/react-query"
-import { zeroAddress } from "viem"
-import type { TrailsOnramp } from "../../onrampClient.js"
-import { TokenImage } from "../../widget/components/TokenImage.js"
-import { getChainInfo } from "../../chains.js"
-import { commonTokens } from "../../tokens.js"
-import { useSupportedChains } from "../../query/chains.hooks.js"
-import { meldQueries } from "../../query/meld.queries.js"
-import { MELD_CHAIN_SUFFIX_TO_ID, type MeldToken } from "../utils/meld.js"
-import { SimpleHeader } from "./SimpleHeader.js"
-
-// Get chain badge color
-const getChainColor = (chain: string): string => {
-  const colorMap: Record<string, string> = {
-    ETH: "bg-polygon-100 dark:bg-polygon-900/30 text-polygon-700 dark:text-polygon-400",
-    BASE: "bg-polygon-100 dark:bg-polygon-900/30 text-polygon-700 dark:text-polygon-400",
-    OP: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
-    ARB: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-400",
-    MATIC:
-      "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
-    AVAX: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
-    BSC: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
-    CELO: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
-  }
-  return (
-    colorMap[chain] ||
-    "bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400"
-  )
-}
-
-export interface MeldTokensListProps {
-  onBack?: () => void
-  onSelectToken?: (token: MeldToken) => void
-  selectedToken?: MeldToken | null
-  trailsClient: TrailsOnramp | null
-  countryCode?: string
-}
-
-export const MeldTokensList: React.FC<MeldTokensListProps> = ({
-  onBack,
-  onSelectToken,
-  selectedToken,
-  trailsClient,
-  countryCode,
-}) => {
-  const {
-    data: rawCurrencies = [],
-    isLoading: isLoadingCurrencies,
-    error: currenciesError,
-  } = useQuery(
-    meldQueries.cryptoCurrencyList(trailsClient, countryCode ?? null),
-  )
-  const { data: supportedChains = [] } = useSupportedChains()
-  const supportedChainIds = useMemo(
-    () => supportedChains.map((c) => c.id),
-    [supportedChains],
-  )
-
-  // Transform raw API data into MeldToken[] with filtering
-  const tokens = useMemo(() => {
-    const allowedSymbols = new Set([
-      "ETH",
-      "MATIC",
-      "AVAX",
-      "BNB",
-      "USDC",
-      "USDT",
-      "DAI",
-    ])
-    const stablecoins = ["USDC", "USDT", "DAI"]
-
-    return rawCurrencies
-      .map((crypto) => {
-        const code = crypto.currencyCode || ""
-        const name = crypto.name || code
-        const parts = code.split("_")
-        const symbol = parts[0] || code
-        const chain = parts[1] || ""
-        const chainId = MELD_CHAIN_SUFFIX_TO_ID[chain]
-        let contractAddress: string | undefined
-
-        if (chainId && symbol) {
-          const isNativeToken =
-            (symbol === "ETH" && [1, 10, 8453, 42161].includes(chainId)) ||
-            (symbol === "MATIC" && chainId === 137) ||
-            (symbol === "AVAX" && chainId === 43114) ||
-            (symbol === "BNB" && chainId === 56)
-
-          if (isNativeToken) {
-            contractAddress = zeroAddress
-          } else {
-            const commonToken = commonTokens.find(
-              (token) => token.symbol === symbol && token.chainId === chainId,
-            )
-            contractAddress = commonToken?.contractAddress
-          }
-        }
-
-        return {
-          code,
-          name,
-          symbol,
-          chain,
-          chainName: chainId ? (getChainInfo(chainId)?.name ?? chain) : chain,
-          chainId,
-          contractAddress,
-        } satisfies MeldToken
-      })
-      .filter((token) => allowedSymbols.has(token.symbol))
-      .filter(
-        (token) =>
-          token.chainId != null && supportedChainIds.includes(token.chainId),
-      )
-      .filter(
-        (token, index, self) =>
-          index === self.findIndex((t) => t.code === token.code),
-      )
-      .sort((a, b) => {
-        const aIsStable = stablecoins.includes(a.symbol)
-        const bIsStable = stablecoins.includes(b.symbol)
-        if (aIsStable && !bIsStable) return -1
-        if (!aIsStable && bIsStable) return 1
-        return a.symbol.localeCompare(b.symbol)
-      })
-  }, [rawCurrencies, supportedChainIds])
-
-  const isLoading = isLoadingCurrencies
-  const error = currenciesError
-  const [searchTerm, setSearchTerm] = useState("")
-
-  // Filter tokens based on search term and put selected token at the top
-  const filteredTokens = useMemo(() => {
-    let tokensToFilter = tokens
-
-    if (searchTerm.trim()) {
-      const lowerSearchTerm = searchTerm.toLowerCase().trim()
-      tokensToFilter = tokens.filter(
-        (token) =>
-          token.name.toLowerCase().includes(lowerSearchTerm) ||
-          token.symbol.toLowerCase().includes(lowerSearchTerm) ||
-          token.chainName.toLowerCase().includes(lowerSearchTerm),
-      )
-    }
-
-    // Sort to put the selected token at the top
-    if (selectedToken) {
-      const sortedTokens = [...tokensToFilter]
-      const selectedIndex = sortedTokens.findIndex(
-        (token) => token.code === selectedToken.code,
-      )
-
-      if (selectedIndex > 0) {
-        // Move selected token to the top
-        const [selectedTokenItem] = sortedTokens.splice(selectedIndex, 1)
-        if (selectedTokenItem) {
-          sortedTokens.unshift(selectedTokenItem)
-        }
-      }
-
-      return sortedTokens
-    }
-
-    return tokensToFilter
-  }, [tokens, searchTerm, selectedToken])
-
-  const handleTokenSelect = (token: MeldToken) => {
-    if (onSelectToken) {
-      onSelectToken(token)
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <SimpleHeader onBack={onBack} title="Select Token" />
-
-      <div className="flex-1 overflow-y-auto">
-        {isLoading && (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-center">
-              <div className="w-8 h-8 border-solid border-2 border-polygon-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-              <p className="text-gray-600 dark:text-gray-400">
-                Loading tokens...
-              </p>
-            </div>
-          </div>
-        )}
-
-        {error && (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-center p-4 border border-solid border-red-200 dark:border-red-700 rounded-lg bg-red-50 dark:bg-red-900/20">
-              <p className="text-red-600 dark:text-red-400">
-                Error loading tokens: {error.message}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {!isLoading && !error && (
-          <>
-            {/* Search Input Field */}
-            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Search className="h-5 w-5 text-gray-500 dark:text-gray-500" />
-                </div>
-                <input
-                  type="text"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  placeholder="Search tokens..."
-                  className="block w-full pl-10 pr-4 py-2 border border-solid border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-polygon-500 focus:border-polygon-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
-                />
-              </div>
-            </div>
-
-            {/* Token List */}
-            <div className="space-y-2 p-4 max-h-[400px] overflow-y-auto">
-              {filteredTokens.length === 0 && searchTerm.trim() ? (
-                <div className="flex items-center justify-center py-8">
-                  <div className="text-gray-600 dark:text-gray-400">
-                    No tokens found matching "{searchTerm}"
-                  </div>
-                </div>
-              ) : tokens.length === 0 && !searchTerm.trim() ? (
-                <div className="flex items-center justify-center py-8">
-                  <div className="text-gray-600 dark:text-gray-400">
-                    No tokens available for {countryCode || "this country"}
-                  </div>
-                </div>
-              ) : (
-                filteredTokens.map((token) => {
-                  const isSelected = selectedToken?.code === token.code
-
-                  return (
-                    <button
-                      key={token.code}
-                      type="button"
-                      onClick={() => handleTokenSelect(token)}
-                      className={`w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 ${
-                        isSelected
-                          ? "bg-polygon-50 dark:bg-polygon-900/20 border-2 border-polygon-500 dark:border-polygon-400"
-                          : "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent"
-                      } text-gray-900 dark:text-white`}
-                    >
-                      <div className="flex items-center space-x-3 flex-1">
-                        <div className="mr-2">
-                          <TokenImage
-                            symbol={token.symbol}
-                            chainId={token.chainId}
-                            contractAddress={token.contractAddress}
-                            size={48}
-                          />
-                        </div>
-                        <div className="flex-1 text-left">
-                          <div className="flex items-center gap-2">
-                            <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                              {token.symbol}
-                            </h4>
-                            <span
-                              className={`text-xs px-2 py-0.5 rounded-full ${getChainColor(token.chain)}`}
-                            >
-                              {token.chainName === "Ethereum/mainnet"
-                                ? "Ethereum"
-                                : token.chainName}
-                            </span>
-                          </div>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">
-                            {token.name}
-                          </p>
-                        </div>
-                      </div>
-                      {isSelected && (
-                        <div className="text-polygon-500 dark:text-polygon-400">
-                          <svg
-                            className="w-5 h-5"
-                            fill="currentColor"
-                            viewBox="0 0 20 20"
-                            aria-label="Selected"
-                          >
-                            <title>Selected</title>
-                            <path
-                              fillRule="evenodd"
-                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      )}
-                      {!isSelected && (
-                        <div className="text-gray-400">
-                          <svg
-                            className="w-5 h-5"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-label="Chevron right"
-                          >
-                            <title>Chevron right</title>
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M9 5l7 7-7 7"
-                            />
-                          </svg>
-                        </div>
-                      )}
-                    </button>
-                  )
-                })
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/meld/components/SimpleHeader.tsx

@@ -1,35 +0,0 @@
-import type React from "react"
-import { ChevronLeft } from "lucide-react"
-
-export interface SimpleHeaderProps {
-  onBack?: () => void
-  title?: string | React.ReactNode
-  className?: string
-}
-
-export const SimpleHeader: React.FC<SimpleHeaderProps> = ({
-  onBack,
-  title,
-  className = "",
-}) => {
-  return (
-    <div className={`flex items-center gap-2 mb-4 ${className}`}>
-      {onBack && (
-        <button
-          type="button"
-          onClick={onBack}
-          className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
-          title="Back"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-      )}
-
-      {title && (
-        <h2 className="text-lg font-semibold text-left text-gray-900 dark:text-white">
-          {title}
-        </h2>
-      )}
-    </div>
-  )
-}

package/src/meld/utils/meld.ts

@@ -1,77 +0,0 @@
-/**
- * Utility functions for Meld integration
- */
-
-import { getOnrampClient, type TrailsOnramp } from "../../onrampClient.js"
-import {
-  mainnet,
-  base,
-  optimism,
-  arbitrum,
-  polygon,
-  avalanche,
-  bsc,
-} from "viem/chains"
-import { getConfig } from "../../config.js"
-import { PROD_TRAILS_API_URL } from "../../constants.js"
-
-export const MELD_CHAIN_SUFFIX_TO_ID: Record<string, number> = {
-  ETH: mainnet.id,
-  BASE: base.id,
-  OP: optimism.id,
-  ARB: arbitrum.id,
-  MATIC: polygon.id,
-  AVAX: avalanche.id,
-  BSC: bsc.id,
-}
-
-/**
- * Get an OnrampClient configured for Meld endpoints
- */
-export function getMeldOnrampClient(
-  apiKey: string,
-  meldApiUrl?: string,
-): TrailsOnramp {
-  const trailsApiUrl = getConfig("trailsApiUrl")
-  return getOnrampClient({
-    apiKey,
-    hostname: meldApiUrl || trailsApiUrl || PROD_TRAILS_API_URL,
-  })
-}
-
-export interface Country {
-  countryCode: string
-  name: string
-}
-
-export interface MeldToken {
-  code: string // e.g., "USDC_ETH"
-  name: string // e.g., "USD Coin"
-  symbol: string // e.g., "USDC"
-  chain: string // e.g., "ETH"
-  chainName: string // e.g., "Ethereum"
-  chainId?: number // Optional: mapped chain ID
-  contractAddress?: string // Optional: token contract address
-}
-
-export interface MeldQuote {
-  transactionType: string
-  sourceAmount: number
-  sourceAmountWithoutFees: number
-  fiatAmountWithoutFees: number
-  destinationAmountWithoutFees: number | null
-  sourceCurrencyCode: string
-  countryCode: string
-  totalFee: number
-  networkFee: number
-  transactionFee: number
-  destinationAmount: number
-  destinationCurrencyCode: string
-  exchangeRate: number
-  paymentMethodType: string
-  customerScore: number
-  serviceProvider: string
-  institutionName: string | null
-  lowKyc: boolean | null
-  partnerFee: number
-}

package/src/mutations.ts

@@ -1,166 +0,0 @@
-import { useMutation } from "@tanstack/react-query"
-import type { Intent, DepositSignature } from "@0xtrails/api"
-import { useTrailsClient } from "./trailsClient.js"
-import { logger } from "./logger.js"
-import { getFullErrorMessage, getIntentStatusFromError } from "./error.js"
-import {
-  trackIntentCommitStarted,
-  trackIntentCommitCompleted,
-  trackIntentCommitError,
-} from "./analytics.js"
-import type { ExecuteIntentResponse, IntentStatus } from "@0xtrails/api"
-
-/**
- * Hook for committing an intent to the Trails API
- * Wraps trailsClient.commitIntent with mutation state and analytics tracking
- */
-export function useCommitIntent() {
-  const trailsClient = useTrailsClient()
-
-  return useMutation({
-    mutationFn: async (intent: Intent) => {
-      logger.console.log("[trails-sdk] useCommitIntent: mutationFn called", {
-        intentId: intent.intentId,
-        originIntentAddress: intent.originIntentAddress,
-        stackTrace: new Error().stack,
-      })
-
-      logger.console.log("[trails-sdk] useCommitIntent: Starting commit", {
-        intentId: intent.intentId,
-        originIntentAddress: intent.originIntentAddress,
-      })
-
-      const originChainIdStr = intent.quoteRequest.originChainId.toString()
-      const destinationChainIdStr =
-        intent.quoteRequest.destinationChainId.toString()
-
-      try {
-        // Track intent commit start
-        trackIntentCommitStarted({
-          intentAddress: intent.originIntentAddress,
-          userAddress: intent.ownerAddress,
-          originChainId: originChainIdStr
-            ? Number(originChainIdStr)
-            : undefined,
-          destinationChainId: destinationChainIdStr
-            ? Number(destinationChainIdStr)
-            : undefined,
-        })
-
-        // Commit the intent
-        const response = await trailsClient.commitIntent({
-          intent,
-        })
-
-        logger.console.log("[trails-sdk] useCommitIntent: Commit successful", {
-          intentId: intent.intentId,
-          response,
-        })
-
-        // Track successful intent commit
-        trackIntentCommitCompleted({
-          intentAddress: intent.originIntentAddress,
-          userAddress: intent.ownerAddress,
-          originChainId: originChainIdStr
-            ? Number(originChainIdStr)
-            : undefined,
-          destinationChainId: destinationChainIdStr
-            ? Number(destinationChainIdStr)
-            : undefined,
-        })
-
-        return response
-      } catch (error) {
-        // Track intent commit error
-        trackIntentCommitError({
-          error: getFullErrorMessage(error),
-          userAddress: intent.ownerAddress,
-          intentAddress: intent.originIntentAddress,
-          originChainId: originChainIdStr
-            ? Number(originChainIdStr)
-            : undefined,
-          destinationChainId: destinationChainIdStr
-            ? Number(destinationChainIdStr)
-            : undefined,
-        })
-        throw error
-      }
-    },
-  })
-}
-
-/**
- * Hook for executing an intent
- * Wraps trailsClient.executeIntent with mutation state and analytics tracking
- */
-export function useExecuteIntent() {
-  const trailsClient = useTrailsClient()
-
-  return useMutation({
-    mutationFn: async ({
-      intentId,
-      depositTransactionHash,
-      depositSignature,
-    }: {
-      intentId: string
-      depositTransactionHash?: string
-      depositSignature?: DepositSignature
-    }) => {
-      logger.console.log("[trails-sdk] useExecuteIntent: Starting execution", {
-        intentId,
-        providedDepositTransactionHash: depositTransactionHash,
-        hasDepositSignature: !!depositSignature,
-      })
-
-      let response: ExecuteIntentResponse
-
-      try {
-        response = await trailsClient.executeIntent({
-          intentId,
-          depositSignature,
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] useExecuteIntent: Error executing intent",
-          {
-            intentId,
-            error,
-            errorJSON: JSON.stringify(error, null, 2),
-          },
-        )
-        const intentStatus = getIntentStatusFromError(error)
-
-        if (intentStatus) {
-          logger.console.error(
-            "[trails-sdk] useExecuteIntent: Intent already advanced, treating as current state",
-            { intentId, intentStatus },
-          )
-          return {
-            intentId,
-            intentStatus: intentStatus as IntentStatus,
-          }
-        } else {
-          logger.console.error(
-            "[trails-sdk] useExecuteIntent did not return an intent status",
-            {
-              intentId,
-              error,
-              errorJSON: JSON.stringify(error, null, 2),
-            },
-          )
-          throw error
-        }
-      }
-
-      logger.console.log(
-        "[trails-sdk] useExecuteIntent: Execution successful",
-        {
-          intentId,
-          response,
-        },
-      )
-
-      return response
-    },
-  })
-}

package/src/onramp/MeshConnectFlow.tsx

@@ -1,86 +0,0 @@
-import type React from "react"
-import { useEffect, useState } from "react"
-import { SimpleHeader } from "../meld/components/SimpleHeader.js"
-import { MeshConnectIframe } from "./MeshConnectIframe.js"
-
-export interface SelectedMeshExchange {
-  integrationId: string
-  exchangeKey: string
-  exchangeName: string
-}
-
-export interface MeshConnectFlowProps {
-  onBack?: () => void
-  onComplete?: (transferData: unknown) => void
-  toTokenSymbol?: string
-  toTokenAmount?: string
-  toChainId?: number
-  toRecipientAddress?: string
-  toAmountUsd?: number
-  selectedExchange?: SelectedMeshExchange | null
-}
-
-export const MeshConnectFlow: React.FC<MeshConnectFlowProps> = ({
-  onBack,
-  onComplete,
-  toTokenSymbol,
-  toTokenAmount,
-  toChainId,
-  toRecipientAddress,
-  toAmountUsd: _toAmountUsd, // Not used in MeshConnect flow
-  selectedExchange,
-}) => {
-  const [currentSelection, setCurrentSelection] =
-    useState<SelectedMeshExchange | null>(selectedExchange || null)
-  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>(
-    selectedExchange?.integrationId || "",
-  )
-  const [selectedExchangeName, setSelectedExchangeName] = useState<string>(
-    selectedExchange?.exchangeName || "",
-  )
-
-  useEffect(() => {
-    if (selectedExchange) {
-      setCurrentSelection(selectedExchange)
-      setSelectedIntegrationId(selectedExchange.integrationId)
-      setSelectedExchangeName(selectedExchange.exchangeName)
-    } else {
-      setCurrentSelection(null)
-      setSelectedIntegrationId("")
-      setSelectedExchangeName("")
-    }
-  }, [selectedExchange])
-
-  const handleBackFromConnect = () => {
-    if (onBack) {
-      onBack()
-    }
-  }
-
-  if (!currentSelection) {
-    return (
-      <div className="flex flex-col h-full">
-        <SimpleHeader onBack={onBack} title="Send From Exchange" />
-
-        <div className="flex flex-1 items-center justify-center">
-          <div className="rounded-lg border border-solid border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-300">
-            No exchange selected.
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <MeshConnectIframe
-      onBack={handleBackFromConnect}
-      onComplete={onComplete}
-      toTokenSymbol={toTokenSymbol}
-      toTokenAmount={toTokenAmount}
-      toChainId={toChainId}
-      toRecipientAddress={toRecipientAddress}
-      integrationId={selectedIntegrationId}
-      exchangeName={selectedExchangeName}
-    />
-  )
-}