0xtrails 0.13.2 → 0.14.0

package/src/widget/components/DirectTransfer.tsx

@@ -1,305 +0,0 @@
-import { ChevronDown, ExternalLink } from "lucide-react"
-import {
-  getQRCodeWallets,
-  type QRCodeWalletOption,
-} from "@0xtrails/wallet-registry"
-import type React from "react"
-import { useCallback, useRef, useState } from "react"
-import { formatUnits, getAddress } from "viem"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { isNativeToken, truncateAddress } from "../../utils/address.js"
-import { CopyButton } from "./CopyButton.js"
-import { DepositTracker } from "./DepositTracker.js"
-import { QrCode } from "./QrCode.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import TokenImage from "./TokenImage.js"
-
-interface DirectTransferProps {
-  onBack?: () => void
-  onChangeWallet?: () => void
-  quote?: PrepareSendQuote | null
-  use681QrCode?: boolean
-  selectedWalletId?: string | null
-  walletOptions?: QRCodeWalletOption[]
-  onIntentExecuted?: () => void
-}
-
-export const DirectTransfer: React.FC<DirectTransferProps> = ({
-  onBack,
-  onChangeWallet,
-  quote,
-  use681QrCode,
-  selectedWalletId,
-  walletOptions,
-  onIntentExecuted,
-}) => {
-  const defaultQrCodeWallets = getQRCodeWallets()
-  const defaultWalletOptions = walletOptions || defaultQrCodeWallets
-  const hasTriggeredExecuteRef = useRef(false)
-  const [isAmountCopied, setIsAmountCopied] = useState(false)
-  const selectedWalletOption =
-    defaultWalletOptions.find((option) => option.id === selectedWalletId) ??
-    defaultWalletOptions[0]
-
-  const shouldUseEip681 =
-    use681QrCode ?? selectedWalletOption?.usesEip681 ?? true
-
-  const depositAddress = quote ? getAddress(quote.originDepositAddress) : null
-  const tokenAddress = quote
-    ? getAddress(quote.originToken.contractAddress)
-    : null
-
-  const eip631Url =
-    quote && depositAddress
-      ? `ethereum:${depositAddress}@${quote.originChain.id}`
-      : ""
-
-  const eip681Url =
-    quote && depositAddress && tokenAddress
-      ? isNativeToken(tokenAddress)
-        ? `ethereum:${depositAddress}@${quote.originChain.id}?value=${quote.originAmount}`
-        : `ethereum:${tokenAddress}@${quote.originChain.id}/transfer?address=${depositAddress}&uint256=${quote.originAmount}`
-      : ""
-
-  const qrCodeUrl = shouldUseEip681 ? eip681Url : eip631Url
-
-  const walletIcon = selectedWalletOption?.icon
-  const formattedOriginAmount = quote
-    ? formatUnits(BigInt(quote.originAmount), quote.originToken.decimals)
-    : ""
-  const originTokenExplorerUrl =
-    quote && tokenAddress
-      ? getExplorerUrlForAddress({
-          address: tokenAddress,
-          chainId: quote.originChain.id,
-        })
-      : ""
-
-  const handleDepositComplete = useCallback(async () => {
-    logger.console.log("[DirectTransfer] handleDepositComplete called")
-    if (!quote?.intentId || hasTriggeredExecuteRef.current) {
-      return
-    }
-
-    hasTriggeredExecuteRef.current = true
-
-    try {
-      logger.console.log(
-        "[DirectTransfer] Deposit complete after commit/execute",
-        {
-          intentId: quote.intentId,
-          originDepositAddress: quote.originDepositAddress,
-        },
-      )
-      onIntentExecuted?.()
-    } catch (error) {
-      hasTriggeredExecuteRef.current = false
-      logger.console.error(
-        "[DirectTransfer] Failed to advance after deposit completion:",
-        error,
-      )
-    }
-  }, [quote, onIntentExecuted])
-
-  const handleCopyAmount = useCallback(async () => {
-    if (!quote) return
-    try {
-      await navigator.clipboard.writeText(formattedOriginAmount)
-      setIsAmountCopied(true)
-      setTimeout(() => setIsAmountCopied(false), 2000)
-    } catch (error) {
-      logger.console.error("[DirectTransfer] Failed to copy amount:", error)
-    }
-  }, [quote, formattedOriginAmount])
-
-  return (
-    <div className="flex flex-col min-h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Deposit"
-        headerContentAlign="left"
-        rightSideContent={
-          <div className="flex flex-row items-center gap-2">
-            <TokenImage
-              symbol={quote?.originToken.symbol}
-              chainId={quote?.originChain.id}
-              contractAddress={quote?.originToken.contractAddress}
-              size={30}
-            />
-            <div className="flex flex-col items-start">
-              <div className="flex items-center gap-1">
-                <span className="text-xs font-bold text-gray-900 dark:text-white">
-                  {parseFloat(
-                    formatUnits(
-                      BigInt(quote?.originAmount ?? 0),
-                      quote?.originToken.decimals ?? 0,
-                    ),
-                  ).toLocaleString(undefined, {
-                    maximumFractionDigits: 4,
-                  })}{" "}
-                  <a
-                    href={originTokenExplorerUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-0.5 underline decoration-dotted underline-offset-2 hover:opacity-80 transition-opacity"
-                  >
-                    {quote?.originToken.symbol}
-                  </a>
-                </span>
-              </div>
-              <a
-                href={getExplorerUrlForAddress({
-                  address: quote?.originDepositAddress ?? "",
-                  chainId: quote?.originChain.id ?? 0,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 inline-flex items-center gap-0.5 transition-colors"
-              >
-                on {quote?.originChain.name}
-                <ExternalLink className="w-3 h-3" />
-              </a>
-            </div>
-          </div>
-        }
-      />
-
-      <div className="flex flex-col flex-1">
-        {/* QR Code Card */}
-        {quote && (
-          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-2">
-            {/* Scan QR Code with wallet selector */}
-            <div className="flex items-center justify-center mb-2">
-              <span className="text-sm font-medium text-black dark:text-white">
-                Scan QR code with
-              </span>
-              <button
-                type="button"
-                onClick={onChangeWallet}
-                className="flex items-center gap-1 hover:opacity-80 transition-opacity ml-2"
-              >
-                <img
-                  src={walletIcon}
-                  alt="Wallet"
-                  className="w-6 h-6 rounded"
-                />
-                <ChevronDown className="w-4 h-4 text-gray-400" />
-              </button>
-            </div>
-
-            {/* QR Code */}
-            <div className="flex justify-center mb-2">
-              <QrCode url={qrCodeUrl} size={190} />
-            </div>
-
-            {/* Divider with "or" */}
-            <div className="flex items-center justify-center gap-4 mb-2">
-              <div className="w-20 border-t border-black dark:border-white" />
-              <span className="text-sm text-black dark:text-white">or</span>
-              <div className="w-20 border-t border-black dark:border-white" />
-            </div>
-
-            {/* Copy address */}
-            <div className="flex justify-center">
-              <div className="flex flex-col items-start">
-                <span className="text-sm font-medium text-black dark:text-white mb-2">
-                  Copy the one-time deposit address
-                </span>
-                <div className="flex items-center">
-                  <CopyButton
-                    text={quote.originDepositAddress}
-                    size="md"
-                    className="p-0"
-                    iconColor="#2563EB"
-                    buttonContent={
-                      <span className="text-sm font-mono text-blue-700 dark:text-blue-400">
-                        {truncateAddress(quote.originDepositAddress, 15, 4)}
-                      </span>
-                    }
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Warning Banner */}
-        {quote && (
-          <div className="flex items-start gap-3 bg-orange-50 dark:bg-orange-950/40 border border-orange-200 dark:border-orange-800 rounded-2xl p-4  mt-1">
-            <div className="shrink-0 mt-1">
-              <svg
-                aria-hidden="true"
-                width="30"
-                height="30"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                style={{ color: "#F97316" }}
-              >
-                <path
-                  d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64 18.3 1.55 18.64 1.55 19C1.55 19.36 1.64 19.7 1.82 20C2 20.3 2.26 20.56 2.56 20.74C2.86 20.92 3.21 21.01 3.56 21H20.44C20.79 21.01 21.14 20.92 21.44 20.74C21.74 20.56 22 20.3 22.18 20C22.36 19.7 22.45 19.36 22.45 19C22.45 18.64 22.36 18.3 22.18 18L13.71 3.86C13.53 3.56 13.27 3.32 12.97 3.15C12.67 2.98 12.34 2.89 12 2.89C11.66 2.89 11.33 2.98 11.03 3.15C10.73 3.32 10.47 3.56 10.29 3.86Z"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </div>
-            <div className="flex flex-col">
-              <span className="text-sm font-bold" style={{ color: "#FF6900" }}>
-                Deposit exactly
-                <button
-                  type="button"
-                  className={`cursor-pointer underline inline-flex items-center rounded px-1 transition-colors ${
-                    isAmountCopied
-                      ? "bg-green-100 dark:bg-green-900/30"
-                      : "hover:bg-orange-100/60 dark:hover:bg-orange-900/20"
-                  }`}
-                  onClick={handleCopyAmount}
-                >
-                  {formatUnits(
-                    BigInt(quote.originAmount),
-                    quote.originToken.decimals,
-                  )}{" "}
-                </button>
-                {quote.originToken.symbol} on {quote.originChain.name}
-              </span>
-              <span className="text-xs text-black dark:text-white  mt-1">
-                Deposited funds in excess of the requested amount cannot be
-                refunded. Do not use the same deposit address for other
-                deposits.
-              </span>
-            </div>
-          </div>
-        )}
-
-        {/* Deposit Progress */}
-        {quote && (
-          <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-2xl mt-1">
-            <DepositTracker
-              depositAddress={quote.originDepositAddress}
-              requiredAmount={quote.originAmount}
-              tokenAddress={quote.originToken.contractAddress}
-              tokenSymbol={quote.originToken.symbol}
-              tokenDecimals={quote.originToken.decimals}
-              chainId={quote.originChain.id}
-              onDepositComplete={handleDepositComplete}
-            />
-          </div>
-        )}
-
-        {/* Quote Details - Collapsible */}
-        {quote && (
-          <div className="space-y-2 pb-4 mt-4 px-4">
-            <QuoteDetails quote={quote} showContent={true} />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default DirectTransfer

package/src/widget/components/Disconnect.tsx

@@ -1,68 +0,0 @@
-import type React from "react"
-import { useEffect, useRef } from "react"
-import { logger } from "../../logger.js"
-import { SECOND_MS } from "../../utils/time.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface DisconnectProps {
-  onBack?: () => void
-  disconnectHandler: () => Promise<void>
-}
-
-export const Disconnect: React.FC<DisconnectProps> = ({
-  onBack,
-  disconnectHandler,
-}) => {
-  const hasDisconnectedRef = useRef(false)
-  const disconnectHandlerRef = useRef(disconnectHandler)
-
-  // Keep the ref updated with the latest handler
-  useEffect(() => {
-    disconnectHandlerRef.current = disconnectHandler
-  }, [disconnectHandler])
-
-  useEffect(() => {
-    // Only run once when component mounts
-    if (hasDisconnectedRef.current) {
-      return
-    }
-
-    const handleDisconnect = async () => {
-      hasDisconnectedRef.current = true
-      try {
-        logger.console.log("[trails-sdk] Disconnecting user...")
-        // Ensure minimum 1 second delay to show disconnecting state
-        await Promise.all([
-          disconnectHandlerRef.current(),
-          new Promise((resolve) => setTimeout(resolve, SECOND_MS)),
-        ])
-      } catch (error) {
-        // Still wait for minimum delay even if disconnect fails
-        await new Promise((resolve) => setTimeout(resolve, SECOND_MS))
-        logger.console.error("[trails-sdk] Failed to disconnect:", error)
-      }
-    }
-
-    handleDisconnect()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // Empty dependency array - only run once on mount
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Disconnecting..."
-        headerContentAlign="left"
-      />
-
-      <div className="flex flex-col items-center justify-center space-y-4 py-8">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-        <p className="text-sm text-gray-600 dark:text-gray-400">
-          Disconnecting your wallet...
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export default Disconnect

package/src/widget/components/DynamicInputStyles.tsx

@@ -1,121 +0,0 @@
-import { useMemo } from "react"
-
-interface DynamicInputStylesProps {
-  inputValue: string
-  variant?: "default" | "smaller" | "inline"
-  size?: "standard" | "large"
-  textAlign?: "left" | "center" | "right"
-}
-
-export const useDynamicInputStyles = ({
-  inputValue,
-  variant = "default",
-  size = "standard",
-  textAlign = "left",
-}: DynamicInputStylesProps) => {
-  return useMemo(() => {
-    const inputLength = inputValue.length
-    let fontSize: string
-
-    if (variant === "smaller") {
-      // Used in Fund.tsx - smaller font sizes
-      if (inputLength > 24) {
-        fontSize = "0.75rem" // 12px for maximum length numbers
-      } else if (inputLength > 22) {
-        fontSize = "0.8125rem" // 13px
-      } else if (inputLength > 20) {
-        fontSize = "0.875rem" // 14px for very long numbers
-      } else if (inputLength > 15) {
-        fontSize = "1rem"
-      } else if (inputLength > 12) {
-        fontSize = "1.125rem"
-      } else if (inputLength > 9) {
-        fontSize = "1.25rem"
-      } else if (inputLength > 6) {
-        fontSize = "1.375rem"
-      } else {
-        fontSize = "1.5rem"
-      }
-    } else if (variant === "inline") {
-      // Used in PoolWithdraw.tsx and PoolDeposit.tsx - inline styles with width
-      if (inputLength > 24) {
-        fontSize = "0.75rem" // 12px for maximum length numbers
-      } else if (inputLength > 22) {
-        fontSize = "0.8125rem" // 13px
-      } else if (inputLength > 20) {
-        fontSize = "0.875rem" // 14px for very long numbers
-      } else if (inputLength > 15) {
-        fontSize = "1rem"
-      } else if (inputLength > 12) {
-        fontSize = "1.125rem"
-      } else if (inputLength > 9) {
-        fontSize = "1.25rem"
-      } else if (inputLength > 6) {
-        fontSize = "1.375rem"
-      } else {
-        fontSize = "1.5rem"
-      }
-    } else if (size === "large") {
-      // Large size variant - used in Pay.tsx and Fund.tsx
-      // 60px maximum, scaling down as text gets longer
-      if (inputLength > 24) {
-        fontSize = "0.875rem" // 14px for maximum length numbers
-      } else if (inputLength > 22) {
-        fontSize = "1rem" // 16px for extremely long numbers
-      } else if (inputLength > 20) {
-        fontSize = "1.125rem" // 18px for very long numbers
-      } else if (inputLength > 18) {
-        fontSize = "1.25rem" // 20px
-      } else if (inputLength > 15) {
-        fontSize = "1.5rem" // 24px
-      } else if (inputLength > 12) {
-        fontSize = "1.875rem" // 30px
-      } else if (inputLength > 9) {
-        fontSize = "2.25rem" // 36px
-      } else if (inputLength > 6) {
-        fontSize = "3rem" // 48px
-      } else {
-        fontSize = "3.75rem" // 60px
-      }
-    } else {
-      // Default variant - used in ClassicSwap.tsx
-      if (inputLength > 24) {
-        fontSize = "0.75rem" // 12px for maximum length numbers
-      } else if (inputLength > 22) {
-        fontSize = "0.875rem" // 14px for extremely long numbers
-      } else if (inputLength > 20) {
-        fontSize = "1rem" // 16px for very long numbers
-      } else if (inputLength > 15) {
-        fontSize = "1.125rem" // 18px
-      } else if (inputLength > 12) {
-        fontSize = "1.5rem"
-      } else if (inputLength > 9) {
-        fontSize = "1.75rem"
-      } else if (inputLength > 6) {
-        fontSize = "2rem"
-      } else {
-        fontSize = "2.25rem"
-      }
-    }
-
-    const baseStyles = {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-      textAlign,
-    }
-
-    // Add width and other properties for inline variant
-    if (variant === "inline") {
-      return {
-        ...baseStyles,
-        width: `${Math.max((inputValue || "0").length, 1)}ch`,
-        minWidth: "1ch",
-        maxWidth: "270px",
-        padding: "0",
-        margin: "0",
-      }
-    }
-
-    return baseStyles
-  }, [inputValue, variant, size, textAlign])
-}