0xtrails 0.6.6 → 0.7.0

package/src/widget/components/MeshConnectExchanges.tsx

@@ -1,290 +0,0 @@
-import type React from "react"
-import { useEffect, useState } from "react"
-import {
-  getCoinbaseIntegrationId,
-  getBinanceIntegrationId,
-  getBitfinexIntegrationId,
-  getMeshConnectEnvironment,
-} from "../../meshconnect.js"
-import BitfinexLogo from "../assets/Bitfinex_Icon_Logo.svg"
-import BinanceLogo from "../assets/Binance_Icon_Logo.svg"
-import CoinbaseLogo from "../assets/Coinbase_Icon_Logo.svg"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { logger } from "../../logger.js"
-import { useSelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-
-export interface MeshConnectExchangesProps {
-  onBack?: () => void
-  onSelectExchange?: (integrationId: string, exchangeName: string) => void
-}
-
-export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
-  onBack,
-  onSelectExchange,
-}) => {
-  const { setSelectedExchange } = useSelectedMeshExchange()
-  const { setCurrentScreen } = useCurrentScreen()
-  const [coinbaseId, setCoinbaseId] = useState<string | null>(null)
-  const [binanceId, setBinanceId] = useState<string | null>(null)
-  const [bitfinexId, setBitfinexId] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  // Fetch integration IDs on component mount
-  useEffect(() => {
-    const fetchIntegrationIds = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-
-        const environment = getMeshConnectEnvironment()
-
-        // Fetch all integration IDs in parallel
-        const [coinbase, binance, bitfinex] = await Promise.all([
-          getCoinbaseIntegrationId(environment),
-          getBinanceIntegrationId(environment),
-          getBitfinexIntegrationId(environment),
-        ])
-
-        setCoinbaseId(coinbase || null)
-        setBinanceId(binance || null)
-        setBitfinexId(bitfinex || null)
-
-        if (!coinbase && !binance && !bitfinex) {
-          setError("No supported exchanges found")
-        }
-      } catch (err) {
-        logger.console.error(
-          "[trails-sdk] Failed to fetch integration IDs:",
-          err,
-        )
-        setError(
-          err instanceof Error ? err.message : "Failed to load exchanges",
-        )
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchIntegrationIds()
-  }, [])
-
-  const handleExchangeSelect = (
-    integrationId: string,
-    exchangeName: string,
-  ) => {
-    logger.console.log(
-      `[trails-sdk] Selected exchange: ${exchangeName} (${integrationId})`,
-    )
-
-    // If a callback is provided (MeshConnectFlow), use it
-    if (onSelectExchange) {
-      onSelectExchange(integrationId, exchangeName)
-      return
-    }
-
-    // Otherwise, use the hook-based approach (main widget flow)
-    // Store the selected exchange
-    setSelectedExchange({ integrationId, exchangeName })
-
-    // Navigate to home screen
-    setCurrentScreen("home")
-  }
-
-  if (loading) {
-    return (
-      <div className="flex flex-col h-full">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Select Exchange"
-          headerContentAlign="left"
-        />
-
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center">
-            <div className="w-8 h-8 border-solid border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-            <p className="text-gray-600 dark:text-gray-400">
-              Loading available exchanges...
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col h-full">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Select Exchange"
-          headerContentAlign="left"
-        />
-
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center p-4 border border-solid border-red-200 rounded-lg bg-red-50 dark:bg-red-900/20 dark:border-red-800">
-            <p className="text-red-600 dark:text-red-200 mb-4">{error}</p>
-            <button
-              type="button"
-              onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Select Exchange"
-        headerContentAlign="left"
-      />
-
-      <div className="flex-1">
-        <div className="space-y-4">
-          {coinbaseId && (
-            <button
-              type="button"
-              onClick={() => handleExchangeSelect(coinbaseId, "Coinbase")}
-              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-            >
-              <div className="flex items-center space-x-3 flex-1">
-                <div className="w-12 h-12 bg-[#1652f0] rounded-lg flex items-center justify-center">
-                  <img src={CoinbaseLogo} alt="Coinbase" className="w-6 h-6" />
-                </div>
-                <div className="flex-1 text-left">
-                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                    Coinbase
-                  </h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Connect your Coinbase account to transfer funds
-                  </p>
-                </div>
-              </div>
-              <div className="text-gray-400">
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-label="Chevron right"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </div>
-            </button>
-          )}
-
-          {binanceId && (
-            <button
-              type="button"
-              onClick={() => handleExchangeSelect(binanceId, "Binance")}
-              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-            >
-              <div className="flex items-center space-x-3 flex-1">
-                <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center">
-                  <img src={BinanceLogo} alt="Binance" className="w-6 h-6" />
-                </div>
-                <div className="flex-1 text-left">
-                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                    Binance
-                  </h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Connect your Binance account to transfer funds
-                  </p>
-                </div>
-              </div>
-              <div className="text-gray-400">
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-label="Chevron right"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </div>
-            </button>
-          )}
-
-          {bitfinexId && (
-            <button
-              type="button"
-              onClick={() => handleExchangeSelect(bitfinexId, "Bitfinex")}
-              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-            >
-              <div className="flex items-center space-x-3 flex-1">
-                <div className="w-12 h-12 bg-[#03ca9b] rounded-lg flex items-center justify-center">
-                  <img src={BitfinexLogo} alt="Bitfinex" className="w-6 h-6" />
-                </div>
-                <div className="flex-1 text-left">
-                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                    Bitfinex
-                  </h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Connect your Bitfinex account to transfer funds
-                  </p>
-                </div>
-              </div>
-              <div className="text-gray-400">
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-label="Chevron right"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </div>
-            </button>
-          )}
-
-          {!coinbaseId && !binanceId && !bitfinexId && (
-            <div className="text-center p-8 border border-solid border-gray-200 dark:border-gray-700 rounded-lg">
-              <p className="text-gray-600 dark:text-gray-400">
-                No supported exchanges are currently available.
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Sandbox Environment Banner */}
-      {getMeshConnectEnvironment() === "sandbox" && (
-        <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-solid border-yellow-200 dark:border-yellow-800">
-          <div className="text-center">
-            <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-              Sandbox environment
-            </p>
-            <p className="text-xs text-yellow-600 dark:text-yellow-300">
-              No real funds are used
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/widget/components/MeshConnectFlow.tsx

@@ -1,90 +0,0 @@
-import type React from "react"
-import { useState, useEffect } from "react"
-import { MeshConnectExchanges } from "./MeshConnectExchanges.js"
-import { MeshConnectIframe } from "./MeshConnectIframe.js"
-import type { SelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
-
-export interface MeshConnectFlowProps {
-  onBack?: () => void
-  onComplete?: (transferData: any) => void
-  toTokenSymbol?: string
-  toTokenAmount?: string
-  toChainId?: number
-  toRecipientAddress?: string
-  selectedExchange?: SelectedMeshExchange | null
-}
-
-type Screen = "exchanges" | "connect"
-
-export const MeshConnectFlow: React.FC<MeshConnectFlowProps> = ({
-  onBack,
-  onComplete,
-  toTokenSymbol,
-  toTokenAmount,
-  toChainId,
-  toRecipientAddress,
-  selectedExchange,
-}) => {
-  // If an exchange is already selected, start on the connect screen
-  const [currentScreen, setCurrentScreen] = useState<Screen>(
-    selectedExchange ? "connect" : "exchanges",
-  )
-  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>(
-    selectedExchange?.integrationId || "",
-  )
-  const [selectedExchangeName, setSelectedExchangeName] = useState<string>(
-    selectedExchange?.exchangeName || "",
-  )
-
-  // Update state when selectedExchange prop changes
-  useEffect(() => {
-    if (selectedExchange) {
-      setSelectedIntegrationId(selectedExchange.integrationId)
-      setSelectedExchangeName(selectedExchange.exchangeName)
-      setCurrentScreen("connect")
-    }
-  }, [selectedExchange])
-
-  const handleSelectExchange = (
-    integrationId: string,
-    exchangeName: string,
-  ) => {
-    setSelectedIntegrationId(integrationId)
-    setSelectedExchangeName(exchangeName)
-    setCurrentScreen("connect")
-  }
-
-  const handleBackFromConnect = () => {
-    setCurrentScreen("exchanges")
-    setSelectedIntegrationId("")
-    setSelectedExchangeName("")
-  }
-
-  const handleBackFromExchanges = () => {
-    if (onBack) {
-      onBack()
-    }
-  }
-
-  if (currentScreen === "connect") {
-    return (
-      <MeshConnectIframe
-        onBack={handleBackFromConnect}
-        onComplete={onComplete}
-        toTokenSymbol={toTokenSymbol}
-        toTokenAmount={toTokenAmount}
-        toChainId={toChainId}
-        toRecipientAddress={toRecipientAddress}
-        integrationId={selectedIntegrationId}
-        exchangeName={selectedExchangeName}
-      />
-    )
-  }
-
-  return (
-    <MeshConnectExchanges
-      onBack={handleBackFromExchanges}
-      onSelectExchange={handleSelectExchange}
-    />
-  )
-}