0xtrails 0.9.2 → 0.9.4

package/src/widget/components/UserPreferences.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, RotateCcw } from "lucide-react"
+import { RotateCcw } from "lucide-react"
 import type React from "react"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useThemePreference } from "../hooks/useTheme.js"
@@ -18,7 +18,7 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
     useThemePreference()
   const { customCss, theme: widgetTheme } = useWidgetProps()
 
-  const handleThemeChange = (newTheme: "auto" | "light" | "dark") => {
+  const handleThemeChange = (newTheme: "light" | "dark") => {
     // Only allow theme changes if customCss is not set
     if (!customCss) {
       setSelectedTheme(newTheme)
@@ -52,24 +52,9 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
       />
 
       <div className="space-y-6">
-        {/* Hide Balances Setting */}
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Hide Balances
-          </span>
-          <button
-            type="button"
-            onClick={toggleBalanceVisible}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-              !isBalanceVisible ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                !isBalanceVisible ? "translate-x-6" : "translate-x-1"
-              }`}
-            />
-          </button>
+        {/* Slippage Settings */}
+        <div>
+          <SlippageToleranceSettings />
         </div>
 
         {/* Theme Setting */}
@@ -88,34 +73,122 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
               </span>
             )}
           </span>
-          <div className="relative">
-            <select
-              value={selectedTheme || widgetTheme || "auto"}
-              onChange={(e) =>
-                handleThemeChange(e.target.value as "auto" | "light" | "dark")
-              }
+          <div className="flex items-center gap-2">
+            {/* Light mode button */}
+            <button
+              type="button"
+              onClick={() => handleThemeChange("light")}
               disabled={!!customCss}
-              className={`appearance-none border text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-24 p-2 pr-8 ${
-                customCss
-                  ? "bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed"
-                  : "bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 cursor-pointer"
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+                selectedTheme === "light" ||
+                (!selectedTheme && widgetTheme === "light") ||
+                (
+                  !selectedTheme &&
+                    !widgetTheme &&
+                    typeof window !== "undefined" &&
+                    !window.matchMedia("(prefers-color-scheme: dark)").matches
+                )
+                  ? "bg-[#DBEAFE] text-[#2563EB]"
+                  : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"
+              } ${
+                customCss ? "cursor-not-allowed opacity-50" : "cursor-pointer"
               }`}
             >
-              <option value="auto">Auto</option>
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
-            </select>
-            <ChevronDown
-              className={`absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 pointer-events-none ${
-                customCss ? "text-gray-300 dark:text-gray-600" : "text-gray-400"
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Light Mode</title>
+                <g clipPath="url(#clip0_light_icon)">
+                  <path
+                    d="M7.33335 14.6665V13.3332C7.33335 12.965 7.63183 12.6665 8.00002 12.6665C8.36821 12.6665 8.66669 12.965 8.66669 13.3332V14.6665C8.66669 15.0347 8.36821 15.3332 8.00002 15.3332C7.63183 15.3332 7.33335 15.0347 7.33335 14.6665ZM3.75523 11.3019C4.01558 11.0416 4.43759 11.0416 4.69794 11.3019C4.95823 11.5623 4.95827 11.9843 4.69794 12.2446L3.75783 13.1847C3.49748 13.4449 3.07541 13.445 2.81512 13.1847C2.55485 12.9245 2.55499 12.5024 2.81512 12.242L3.75523 11.3019ZM11.3021 11.3019C11.5625 11.0416 11.9845 11.0416 12.2448 11.3019L13.1849 12.242C13.445 12.5024 13.4452 12.9245 13.1849 13.1847C12.9247 13.445 12.5026 13.4448 12.2422 13.1847L11.3021 12.2446C11.0418 11.9843 11.0418 11.5623 11.3021 11.3019ZM10 7.99984C10 6.89527 9.10459 5.99984 8.00002 5.99984C6.89545 5.99984 6.00002 6.89527 6.00002 7.99984C6.00002 9.10441 6.89545 9.99984 8.00002 9.99984C9.10459 9.99984 10 9.10441 10 7.99984ZM2.66669 7.33317C3.03488 7.33317 3.33335 7.63165 3.33335 7.99984C3.33335 8.36803 3.03488 8.6665 2.66669 8.6665H1.33335C0.965164 8.6665 0.666687 8.36803 0.666687 7.99984C0.666687 7.63165 0.965164 7.33317 1.33335 7.33317H2.66669ZM14.6667 7.33317C15.0349 7.33317 15.3334 7.63165 15.3334 7.99984C15.3334 8.36803 15.0349 8.6665 14.6667 8.6665H13.3334C12.9652 8.6665 12.6667 8.36803 12.6667 7.99984C12.6667 7.63165 12.9652 7.33317 13.3334 7.33317H14.6667ZM2.81512 2.81494C3.07542 2.55465 3.49747 2.55475 3.75783 2.81494L4.69794 3.75505C4.95829 4.0154 4.95829 4.4374 4.69794 4.69775C4.43759 4.9581 4.01558 4.9581 3.75523 4.69775L2.81512 3.75765C2.55494 3.49729 2.55483 3.07524 2.81512 2.81494ZM12.2422 2.81494C12.5026 2.55481 12.9246 2.55466 13.1849 2.81494C13.4451 3.07522 13.445 3.4973 13.1849 3.75765L12.2448 4.69775C11.9845 4.95809 11.5625 4.95805 11.3021 4.69775C11.0418 4.4374 11.0418 4.0154 11.3021 3.75505L12.2422 2.81494ZM7.33335 2.6665V1.33317C7.33335 0.964981 7.63183 0.666504 8.00002 0.666504C8.36821 0.666504 8.66669 0.964981 8.66669 1.33317V2.6665C8.66669 3.03469 8.36821 3.33317 8.00002 3.33317C7.63183 3.33317 7.33335 3.03469 7.33335 2.6665ZM11.3334 7.99984C11.3334 9.84079 9.84097 11.3332 8.00002 11.3332C6.15907 11.3332 4.66669 9.84079 4.66669 7.99984C4.66669 6.15889 6.15907 4.6665 8.00002 4.6665C9.84097 4.6665 11.3334 6.15889 11.3334 7.99984Z"
+                    fill="currentColor"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_light_icon">
+                    <rect width="16" height="16" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+              <span>Light</span>
+            </button>
+            {/* Dark mode button */}
+            <button
+              type="button"
+              onClick={() => handleThemeChange("dark")}
+              disabled={!!customCss}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+                selectedTheme === "dark" ||
+                (!selectedTheme && widgetTheme === "dark") ||
+                (
+                  !selectedTheme &&
+                    !widgetTheme &&
+                    typeof window !== "undefined" &&
+                    window.matchMedia("(prefers-color-scheme: dark)").matches
+                )
+                  ? "bg-[#DBEAFE] text-[#2563EB]"
+                  : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"
+              } ${
+                customCss ? "cursor-not-allowed opacity-50" : "cursor-pointer"
               }`}
-            />
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Dark Mode</title>
+                <path
+                  d="M7.7207 1.34229C8.12353 1.35288 8.42496 1.60511 8.5651 1.89827C8.70858 2.19855 8.70802 2.57945 8.50781 2.89893L8.50716 2.89827C8.10787 3.53737 7.93751 4.29341 8.02278 5.04216C8.10811 5.79102 8.4449 6.48902 8.97786 7.02197C9.51083 7.55485 10.2088 7.89112 10.9577 7.9764C11.7065 8.06164 12.4624 7.89084 13.1016 7.49137L13.2233 7.42562C13.5135 7.29382 13.8376 7.30794 14.1009 7.43343C14.4146 7.58299 14.6797 7.91693 14.6556 8.36051C14.5861 9.64638 14.1455 10.8847 13.3874 11.9256C12.6291 12.9666 11.5855 13.7658 10.3828 14.2264C9.18016 14.6869 7.8696 14.7895 6.61002 14.5213C5.35045 14.2531 4.19583 13.6253 3.28515 12.7147C2.37445 11.8041 1.74687 10.6494 1.47851 9.38981C1.21017 8.13019 1.3123 6.81977 1.77278 5.61702C2.23329 4.41426 3.03259 3.3708 4.07356 2.61247C5.11452 1.85416 6.35267 1.41314 7.63867 1.34359L7.7207 1.34229ZM7.08072 2.74723C6.28037 2.88708 5.51928 3.20826 4.85807 3.68994C4.02544 4.29656 3.38661 5.13153 3.01822 6.09359C2.64983 7.05577 2.56789 8.10413 2.78255 9.11182C2.99723 10.1195 3.49927 11.0435 4.22786 11.772C4.95644 12.5005 5.88029 13.0027 6.88801 13.2173C7.89573 13.4318 8.94409 13.3495 9.90624 12.981C10.8684 12.6124 11.7033 11.9733 12.3099 11.1405C12.7914 10.4794 13.1115 9.71859 13.2513 8.91846C12.489 9.26194 11.645 9.39674 10.8066 9.30127C9.75813 9.18186 8.7807 8.71088 8.0345 7.96468C7.28837 7.2185 6.81731 6.241 6.69791 5.19255C6.60247 4.354 6.73706 3.50961 7.08072 2.74723Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span>Dark</span>
+            </button>
           </div>
         </div>
 
-        {/* Slippage Tolerance Settings */}
-        <div className="pt-2">
-          <SlippageToleranceSettings />
+        {/* Hide Balances Setting */}
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            Hide Balances
+          </span>
+          <button
+            type="button"
+            onClick={toggleBalanceVisible}
+            className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+              !isBalanceVisible ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
+            }`}
+          >
+            <span
+              className={`inline-flex items-center justify-center h-6 w-6 transform rounded-full bg-white transition-transform ${
+                !isBalanceVisible ? "translate-x-7" : "translate-x-1"
+              }`}
+            >
+              {!isBalanceVisible && (
+                <svg
+                  className="w-3.5 h-3.5 text-blue-600"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                >
+                  <title>Enabled</title>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              )}
+            </span>
+          </button>
         </div>
 
         {/* Reset Preferences Button */}

package/src/widget/components/WalletConnect.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react"
-import { useAccount, useConnect } from "wagmi"
+import { useAccount, useConnect, useDisconnect } from "wagmi"
 import { QrCode } from "./QrCode.js"
-import { TruncatedAddress } from "./TruncatedAddress.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import {
   getWalletIcon,
@@ -28,10 +27,12 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   selectedWalletId,
 }) => {
   const { status, connectAsync } = useConnect() as any
-  const { isConnected, address, connector } = useAccount()
+  const { isConnected, connector } = useAccount()
+  const { disconnect } = useDisconnect()
   const [showUri, setShowUri] = useState(false)
   const [showQrCodeMobile, setShowQrCodeMobile] = useState(false)
   const [copied, setCopied] = useState(false)
+  const [isResetting, setIsResetting] = useState(false)
   const isMobile = useIsMobile()
   const walletConfigs = useWalletConfigs()
 
@@ -46,8 +47,11 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   }
 
   // Use the WalletConnect URI hook to manage connection and URI
-  const { walletConnectUri: wcUri, isConnecting } =
-    useWalletConnectUri(projectIdProp)
+  const {
+    walletConnectUri: wcUri,
+    isConnecting,
+    reconnect,
+  } = useWalletConnectUri(projectIdProp)
 
   // Get connector for the selected wallet
   const coinbaseConnector = useConnector(
@@ -58,21 +62,96 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     return connector?.name === "WalletConnect" && isConnected
   }, [connector, isConnected])
 
-  // Track if we were connected when the component mounted
-  const wasConnectedOnMount = React.useRef(isConnected)
+  // Track if we've already processed the initial disconnect
+  const [hasDisconnected, setHasDisconnected] = useState(false)
+  const [hasAutoContined, setHasAutoContined] = useState(false)
 
-  // Only auto-navigate back if we successfully connect a new wallet
-  // Don't auto-navigate if user was already connected when they entered this screen
+  // 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 || connector?.id === "walletConnect") {
+        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 &&
-      status === "success" &&
-      !wasConnectedOnMount.current &&
-      onBack
+      connector?.id === "walletConnect" &&
+      hasDisconnected &&
+      !isResetting &&
+      !hasAutoContined
     ) {
-      onBack()
+      logger.console.log(
+        "[trails-sdk] [WalletConnect] Wallet connected via WalletConnect, auto-continuing",
+      )
+      setHasAutoContined(true)
+      setTimeout(() => {
+        onContinue()
+      }, 100)
     }
-  }, [isConnected, status, onBack])
+  }, [
+    isConnected,
+    connector?.id,
+    hasDisconnected,
+    isResetting,
+    hasAutoContined,
+    onContinue,
+    isWalletConnectConnector,
+    status,
+  ])
 
   const title = useMemo(() => {
     const walletName = getWalletName(selectedWalletId)
@@ -177,41 +256,25 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
 
       <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">
-          {isWalletConnectConnector ? (
+          {isResetting || (isWalletConnectConnector && !wcUri) ? (
             <div className="flex flex-col items-center">
-              <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mb-4">
-                <svg
-                  className="w-8 h-8 text-green-600 dark:text-green-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
-                Wallet Connected
-              </h3>
-              <div className="mb-4">
-                <TruncatedAddress
-                  address={address || ""}
-                  chainId={1}
-                  className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline"
-                />
-              </div>
-              <div className="flex gap-3">
-                <button
-                  onClick={() => onContinue()}
-                  className="px-4 py-2 text-sm 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 disabled:bg-gray-300 text-white"
-                >
-                  Continue
-                </button>
-              </div>
+              {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">