0xtrails 0.13.2 → 0.14.0

package/src/widget/components/ConfigDisplay.tsx

@@ -1,158 +0,0 @@
-import type React from "react"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { getChainInfo } from "../../chains.js"
-import { mainnet } from "viem/chains"
-import { logger } from "../../logger.js"
-import { SDK_VERSION } from "../../version.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useTargetAmount } from "../hooks/useTargetAmount.js"
-import { getQueryParam } from "../../queryParams.js"
-import { useDisplayCurrencyPreference } from "../hooks/useDisplayCurrencyPreference.js"
-import { forexRateStore } from "../utils/forexRateStore.js"
-
-interface ConfigDisplayProps {
-  className?: string
-}
-
-export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
-  className = "",
-}) => {
-  const {
-    toast = false,
-    toAddress,
-    toAmount,
-    toToken,
-    toCalldata,
-  } = useWidgetProps()
-  const { targetAmountUsdFormatted } = useTargetAmount()
-  const config = useTrails()
-  const { selectedCurrency } = useDisplayCurrencyPreference()
-
-  // Get forex rate info from store
-  const forexRateInfo = forexRateStore.getRate()
-
-  logger.console.log("[trails-sdk] Config from context:", config)
-
-  const debugMode = config.debug || getQueryParam("debug") === "true"
-  const rpcNodeUrl =
-    getChainInfo(mainnet.id)?.rpcUrls?.default?.http?.[0] || "N/A"
-
-  const truncateString = (str: string, maxLength: number = 30) => {
-    if (str.length <= maxLength) return str
-    return `${str.substring(0, maxLength)}...`
-  }
-
-  const configItems: Partial<{
-    label: string
-    value: string
-    display: string
-  }>[] = [
-    {
-      label: "SDK Version",
-      value: SDK_VERSION,
-      display: SDK_VERSION,
-    },
-    {
-      label: "API URL",
-      value: config.trailsApiUrl,
-      display: truncateString(config.trailsApiUrl || "N/A"),
-    },
-    {
-      label: "App URL",
-      value: config.trailsAppUrl,
-      display: truncateString(config.trailsAppUrl || "N/A"),
-    },
-    {
-      label: "Indexer URL",
-      value: config.sequenceIndexerUrl,
-      display: truncateString(config.sequenceIndexerUrl! || "N/A"),
-    },
-    {
-      label: "RPC Node URL (1)",
-      value: rpcNodeUrl,
-      display: truncateString(rpcNodeUrl),
-    },
-    {
-      label: "Trails API Key",
-      value: config.trailsApiKey,
-      display: truncateString(config.trailsApiKey || "N/A"),
-    },
-    {
-      label: "WalletConnect Project ID",
-      value: truncateString(config.walletConnectProjectId! || "N/A"),
-      display: truncateString(config.walletConnectProjectId! || "N/A"),
-    },
-    { label: "Slippage Tolerance", value: `${config.slippageTolerance}%` },
-    { label: "Debug Mode", value: debugMode ? "Enabled" : "Disabled" },
-    { label: "Toast Notifications", value: toast ? "Enabled" : "Disabled" },
-    {
-      label: "Display Currency",
-      value: selectedCurrency || "USD",
-      display: selectedCurrency || "USD",
-    },
-    {
-      label: "Forex Rate",
-      value: forexRateInfo
-        ? `1 USD = ${forexRateInfo.rate.toFixed(4)} ${forexRateInfo.currency}`
-        : "N/A",
-      display: forexRateInfo
-        ? `1 USD = ${forexRateInfo.rate.toFixed(4)} ${forexRateInfo.currency}`
-        : "N/A",
-    },
-    {
-      label: "Target Amount USD",
-      value: targetAmountUsdFormatted || "N/A",
-      display: targetAmountUsdFormatted || "N/A",
-    },
-    {
-      label: "To Address",
-      value: toAddress || "N/A",
-      display: toAddress ? truncateString(toAddress, 20) : "N/A",
-    },
-    {
-      label: "To Amount",
-      value: toAmount || "N/A",
-      display: toAmount || "N/A",
-    },
-    {
-      label: "To Token",
-      value: toToken || "N/A",
-      display: toToken ? truncateString(toToken, 20) : "N/A",
-    },
-    {
-      label: "To Calldata",
-      value: toCalldata || "N/A",
-      display: toCalldata ? truncateString(toCalldata, 20) : "N/A",
-    },
-  ]
-
-  return (
-    <div
-      className={`p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 ${className}`}
-    >
-      <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">
-        Configuration
-      </div>
-      <div className="space-y-1">
-        {configItems.map((item) => (
-          <div
-            key={item.label}
-            className="flex justify-between items-center text-xs"
-          >
-            <span className="text-gray-500 dark:text-gray-500 font-medium">
-              {item.label}:
-            </span>
-            <span
-              className="text-gray-700 dark:text-gray-300 font-mono ml-2 truncate max-w-[150px]"
-              title={item.value} // Show full value on hover
-            >
-              {item.display || item.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default ConfigDisplay