0xtrails 0.13.1 → 0.13.2

package/src/onramp/MeshConnectFlow.tsx

@@ -0,0 +1,86 @@
+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}
+    />
+  )
+}