0xtrails 0.13.2 → 0.14.0

package/src/widget/components/WalletConfirmation.tsx

@@ -1,220 +0,0 @@
-import { ChevronLeft } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useState } from "react"
-import { useAccount } from "wagmi"
-import { logger } from "../../logger.js"
-import { MINUTE_MS } from "../../utils/time.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import { ErrorAnimationIcon } from "./ErrorAnimationIcon.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { TokenImage } from "./TokenImage.js"
-import { WaasFeeOptions } from "./WaasFeeOptions.js"
-
-interface WalletConfirmationProps {
-  onBack?: () => void
-  onComplete: () => void
-  retryEnabled?: boolean
-  onRetry?: () => void
-  quote?: PrepareSendQuote | null
-  onRampQuote?: OnrampQuote | null
-}
-
-export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
-  retryEnabled = false,
-  onRetry,
-  onBack,
-  quote,
-  onRampQuote,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
-  const [isFeeOptionConfirmed, setIsFeeOptionConfirmed] = useState(false)
-  const [areFeeOptionsLoaded, setAreFeeOptionsLoaded] = useState(false)
-  const [feeOptionsError, setFeeOptionsError] = useState<boolean>(false)
-  const { connector } = useAccount()
-
-  useEffect(() => {
-    setAreFeeOptionsLoaded(false)
-    setShowContent(true)
-  }, [])
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (!retryEnabled) {
-        setShowTimeoutWarning(true)
-      }
-    }, 2 * MINUTE_MS) // 2 minutes
-
-    return () => clearTimeout(timer)
-  }, [retryEnabled])
-
-  const isSequenceWaas = useMemo(() => {
-    if (!connector) return false
-    const connectorName = connector.name?.toLowerCase() || ""
-    const connectorId = connector.id?.toLowerCase() || ""
-    const isSequenceWaas =
-      connectorName.includes("waas") ||
-      connectorId.includes("waas") ||
-      connectorId === "sequence-waas"
-
-    logger.console.log("[trails-sdk] Sequence WaaS detection:", {
-      connectorName,
-      connectorId,
-      isSequenceWaas,
-      connector: connector.name,
-    })
-
-    return isSequenceWaas
-  }, [connector])
-
-  const hasOriginTokenVisual =
-    !!quote?.originToken?.symbol || !!quote?.originToken?.imageUrl
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center relative">
-        <button
-          type="button"
-          onClick={onBack}
-          className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
-        >
-          <ChevronLeft className="h-6 w-6" />
-        </button>
-      </div>
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-        <div className="text-center">
-          <div
-            className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
-          >
-            {feeOptionsError ? (
-              <ErrorAnimationIcon />
-            ) : retryEnabled ? (
-              <div className={`h-24 w-24`} />
-            ) : (
-              <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
-            )}
-
-            {!feeOptionsError && hasOriginTokenVisual && (
-              <div className="absolute">
-                <TokenImage
-                  imageUrl={quote?.originToken.imageUrl}
-                  symbol={quote?.originToken.symbol}
-                  chainId={quote?.originChain.id}
-                  contractAddress={quote?.originToken.contractAddress}
-                  size={64}
-                />
-              </div>
-            )}
-          </div>
-
-          <div
-            className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
-              {retryEnabled
-                ? "Try again"
-                : !isSequenceWaas
-                  ? "Waiting for wallet…"
-                  : isFeeOptionConfirmed
-                    ? "Waiting for wallet…"
-                    : areFeeOptionsLoaded
-                      ? "Waiting for fee selection…"
-                      : feeOptionsError
-                        ? "No fee token found"
-                        : "Waiting for fee options…"}
-            </h2>
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-              {!isSequenceWaas
-                ? "Please approve the request in your wallet"
-                : isFeeOptionConfirmed
-                  ? "Please approve the request in your wallet"
-                  : ""}
-            </p>
-          </div>
-
-          {isSequenceWaas && (
-            <div
-              className={`mb-2 mt-4 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-            >
-              <WaasFeeOptions
-                chainId={quote?.originChain.id}
-                originTokenAmount={quote?.originAmount}
-                originToken={quote?.originToken}
-                setIsFeeOptionConfirmed={setIsFeeOptionConfirmed}
-                setIsError={setFeeOptionsError}
-                onFeeOptionsLoaded={() => {
-                  logger.console.log(
-                    "[trails-sdk] Fee options loaded callback called",
-                  )
-                  setAreFeeOptionsLoaded(true)
-                }}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Timeout Warning */}
-        {showTimeoutWarning && (
-          <div
-            className={`transition-all duration-500 ease-out delay-150 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
-              <div className="flex items-start space-x-3">
-                <svg
-                  className="w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <title>Warning</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  />
-                </svg>
-                <div>
-                  <p className="font-medium text-yellow-800 dark:text-yellow-300">
-                    Request is taking longer than expected
-                  </p>
-                  <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
-                    This transaction request is taking longer than expected.
-                    Please reach out to support for help if the issue persists.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Retry Button */}
-        {retryEnabled && onRetry && (
-          <div
-            className={`mb-2 transition-all duration-500 ease-out delay-300 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <button
-              type="button"
-              onClick={onRetry}
-              className="w-full px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
-            >
-              Try Again
-            </button>
-          </div>
-        )}
-
-        {/* Transaction Details */}
-        <QuoteDetails
-          quote={quote}
-          onRampQuote={onRampQuote}
-          showContent={true}
-          compact={true}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default WalletConfirmation

package/src/widget/components/WalletConnect.tsx

@@ -1,348 +0,0 @@
-import { getWalletIcon, getWalletName } from "@0xtrails/wallet-registry"
-import { type FC, useEffect, useMemo, useState } from "react"
-import { useAccount, useConnect, useDisconnect } from "wagmi"
-import { logger } from "../../logger.js"
-import { isWalletConnectConnector as checkIsWalletConnectConnector } from "../../walletUtils.js"
-import { useWalletConfigs } from "../../wallets.js"
-import { useConnector } from "../hooks/useConnector.js"
-import { useIsMobile } from "../hooks/useIsMobile.js"
-import { useWalletConnectUri } from "../hooks/useWalletConnectUri.js"
-import { CopyButton } from "./CopyButton.js"
-import { QrCode } from "./QrCode.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-export interface WalletConnectProps {
-  onBack?: () => void
-  onContinue: () => void
-  projectId?: string
-  onReconnectPreviousWallet?: () => void
-  selectedWalletId?: string
-}
-
-export const WalletConnectScreen: FC<WalletConnectProps> = ({
-  onBack,
-  onContinue,
-  projectId: projectIdProp,
-  selectedWalletId,
-}) => {
-  const { status, connectAsync } = useConnect() as any
-  const { isConnected, connector } = useAccount()
-  const { disconnect } = useDisconnect()
-  const [showUri, setShowUri] = useState(false)
-  const [showQrCodeMobile, setShowQrCodeMobile] = useState(false)
-  const [isResetting, setIsResetting] = useState(false)
-  const isMobile = useIsMobile()
-  const walletConfigs = useWalletConfigs()
-
-  // Use the WalletConnect URI hook to manage connection and URI
-  const {
-    walletConnectUri: wcUri,
-    isConnecting,
-    reconnect,
-  } = useWalletConnectUri(projectIdProp)
-
-  // Get connector for the selected wallet
-  const coinbaseConnector = useConnector(
-    selectedWalletId === "coinbase" ? "coinbaseWalletSDK" : "",
-  )
-
-  const isWalletConnectConnector =
-    checkIsWalletConnectConnector(connector) && isConnected
-
-  // Track if we've already processed the initial disconnect
-  const [hasDisconnected, setHasDisconnected] = useState(false)
-  const [hasAutoContined, setHasAutoContined] = useState(false)
-
-  // Disconnect from WalletConnect on mount to ensure QR code is shown
-  // biome-ignore lint/correctness/useExhaustiveDependencies: This effect should only run on mount to reset the connection
-  useEffect(() => {
-    const resetWalletConnect = async () => {
-      // Check if we're connected via WalletConnect
-      if (
-        isWalletConnectConnector ||
-        checkIsWalletConnectConnector(connector)
-      ) {
-        setIsResetting(true)
-        logger.console.log(
-          "[trails-sdk] [WalletConnect] Resetting WalletConnect connection to show fresh QR code",
-        )
-        try {
-          // Disconnect first
-          await disconnect()
-
-          // Wait a bit for disconnect to complete
-          await new Promise((resolve) => setTimeout(resolve, 500))
-
-          // Force reconnect to generate new QR
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] Forcing new connection for QR code",
-          )
-          reconnect()
-        } catch (error) {
-          logger.console.error(
-            "[trails-sdk] [WalletConnect] Error resetting connection:",
-            error,
-          )
-          // Even if disconnect fails, try to reconnect
-          reconnect()
-        } finally {
-          setIsResetting(false)
-          // Mark that we've disconnected after resetting is done
-          setTimeout(() => setHasDisconnected(true), 100)
-        }
-      } else {
-        // If not connected, mark as ready and trigger QR generation if needed
-        setHasDisconnected(true)
-        if (!wcUri) {
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] No existing connection, triggering QR generation",
-          )
-          reconnect()
-        }
-      }
-    }
-    resetWalletConnect()
-  }, [])
-
-  // Auto-continue when wallet successfully connects
-  useEffect(() => {
-    logger.console.log("[trails-sdk] [WalletConnect] Auto-continue check:", {
-      isConnected,
-      status,
-      hasDisconnected,
-      isResetting,
-      hasAutoContined,
-      connectorId: connector?.id,
-      isWalletConnectConnector,
-    })
-
-    // Check if we're connected with WalletConnect after initial setup
-    if (
-      isConnected &&
-      connector?.id === "walletConnect" &&
-      hasDisconnected &&
-      !isResetting &&
-      !hasAutoContined
-    ) {
-      logger.console.log(
-        "[trails-sdk] [WalletConnect] Wallet connected via WalletConnect, auto-continuing",
-      )
-      setHasAutoContined(true)
-      setTimeout(() => {
-        onContinue()
-      }, 100)
-    }
-  }, [
-    isConnected,
-    connector?.id,
-    hasDisconnected,
-    isResetting,
-    hasAutoContined,
-    onContinue,
-    isWalletConnectConnector,
-    status,
-  ])
-
-  const title = useMemo(() => {
-    const walletName = getWalletName(selectedWalletId)
-    if (walletName && walletName !== "WalletConnect") {
-      if (isMobile) {
-        return `Connect to ${walletName}`
-      }
-      return `Scan code to connect to ${walletName}`
-    }
-
-    return `Connect with WalletConnect`
-  }, [selectedWalletId, isMobile])
-
-  // Shared QR code component
-  const qrCodeComponent = wcUri ? (
-    <QrCode
-      url={wcUri}
-      size={300}
-      imageUrl={
-        getWalletIcon(selectedWalletId) || getWalletIcon("walletconnect")
-      }
-    />
-  ) : null
-
-  // Shared URI display component
-  const uriDisplayComponent = (
-    <>
-      <button
-        type="button"
-        onClick={() => setShowUri(!showUri)}
-        className="mt-3 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
-      >
-        {showUri ? "Hide URI" : "Show URI"}
-        <svg
-          aria-hidden="true"
-          className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-      {showUri && (
-        <div className="mt-2 flex items-center gap-2 w-full sm:max-w-sm">
-          <p className="text-xs text-gray-600 dark:text-gray-400 break-all flex-1">
-            {wcUri}
-          </p>
-          <CopyButton
-            text={wcUri || ""}
-            className="shrink-0 px-2 py-1"
-            size="md"
-          />
-        </div>
-      )}
-    </>
-  )
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={title}
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-
-      <div className="flex-1 flex items-center justify-center">
-        <div className="text-center p-6 w-full sm:max-w-sm sm:mx-auto trails-border-radius-container trails-bg-secondary">
-          {isResetting || (isWalletConnectConnector && !wcUri) ? (
-            <div className="flex flex-col items-center">
-              {isMobile ? (
-                <div className="flex flex-col items-center">
-                  <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600"></div>
-                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                    Preparing connection...
-                  </p>
-                </div>
-              ) : (
-                <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
-                  <div className="text-center">
-                    <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Preparing QR code...
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : wcUri ? (
-            <div className="flex flex-col items-center">
-              {/* Mobile: Show Connect button with collapsible QR code */}
-              {isMobile &&
-              selectedWalletId &&
-              walletConfigs[selectedWalletId]?.getWalletConnectDeepLink ? (
-                <div className="flex flex-col items-center w-full">
-                  {selectedWalletId.toLowerCase().includes("coinbase") &&
-                  coinbaseConnector ? (
-                    <button
-                      type="button"
-                      onClick={async () => {
-                        try {
-                          await connectAsync({
-                            connector: coinbaseConnector,
-                          })
-                          if (onContinue) {
-                            onContinue()
-                          }
-                        } catch (error) {
-                          logger.console.error(error)
-                        }
-                      }}
-                      className="w-full px-4 py-3 text-base transition-all duration-200 cursor-pointer hover:scale-[1.02] shadow-sm hover:shadow-md trails-border-radius-button font-medium trails-primary-button-bg trails-primary-button-text bg-blue-500 hover:bg-blue-600 text-white text-center"
-                    >
-                      Connect
-                    </button>
-                  ) : (
-                    <a
-                      href={walletConfigs[selectedWalletId]
-                        .getWalletConnectDeepLink!(wcUri)}
-                      className="w-full px-4 py-3 text-base transition-all duration-200 cursor-pointer hover:scale-[1.02] shadow-sm hover:shadow-md trails-border-radius-button font-medium trails-primary-button-bg trails-primary-button-text bg-blue-500 hover:bg-blue-600 text-white text-center"
-                    >
-                      Connect
-                    </a>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => setShowQrCodeMobile(!showQrCodeMobile)}
-                    className="mt-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer flex items-center gap-1"
-                  >
-                    or scan QR code
-                    <svg
-                      aria-hidden="true"
-                      className={`w-4 h-4 transition-transform ${showQrCodeMobile ? "rotate-180" : ""}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  {showQrCodeMobile && (
-                    <div className="mt-4 flex flex-col items-center w-full">
-                      {qrCodeComponent}
-                      {uriDisplayComponent}
-                      {isConnecting && wcUri && (
-                        <p className="mt-3 text-xs text-gray-600 dark:text-gray-400">
-                          Waiting for confirmation…
-                        </p>
-                      )}
-                    </div>
-                  )}
-                </div>
-              ) : (
-                /* Desktop: Show QR code with URI toggle */
-                <>
-                  {qrCodeComponent}
-                  <div className="mt-2">{uriDisplayComponent}</div>
-                  {isConnecting && wcUri && (
-                    <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
-                      <span>Waiting for confirmation…</span>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          ) : (
-            <div className="flex flex-col items-center">
-              {isMobile ? (
-                <div className="flex flex-col items-center">
-                  <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600"></div>
-                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                    Loading link...
-                  </p>
-                </div>
-              ) : (
-                <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
-                  <div className="text-center">
-                    <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Generating QR code...
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default WalletConnectScreen