0xtrails 0.1.13 → 0.2.1

package/src/widget/components/AccountActionsDropdown.tsx

@@ -1,170 +1,29 @@
-import {
-  ChevronDown,
-  History,
-  LogOut,
-  Copy,
-  AlignJustify,
-  ArrowLeftRight,
-} from "lucide-react"
+import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useRef, useState } from "react"
 import { truncateAddress } from "../../utils.js"
-import { FeatureFlags } from "../../config.js"
-import { useAccount, useConnections } from "wagmi"
+import { useAccount } from "wagmi"
 import { WalletImage } from "./WalletImage.js"
-import { getWalletName, wagmiConnectorToWalletId } from "../../wallets.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useCurrentScreen, type Screen } from "../hooks/useCurrentScreen.js"
-import { HideBalances } from "./HideBalances.js"
-
-const ACTIONS = [
-  {
-    label: "Account History",
-    screen: "account-history",
-    icon: History,
-    disabled: FeatureFlags.accountIntentTransactionHistory === false,
-  },
-  {
-    label: "Switch wallet",
-    screen: "connect",
-    icon: ArrowLeftRight,
-    disabled: false,
-  },
-  {
-    label: "Connect another wallet",
-    screen: "wallet-list",
-    icon: AlignJustify,
-    disabled: false,
-  },
-  { label: "Disconnect", screen: "disconnect", icon: LogOut, disabled: false },
-] as const
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 
 export const AccountActionsDropdown: React.FC = () => {
-  const { address, connector } = useAccount()
-  const connections = useConnections()
-  const [isOpen, setIsOpen] = useState(false)
-  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const { hideDisconnect, decoupleWagmi } = useWidgetProps()
+  const { address } = useAccount()
   const { setCurrentScreen } = useCurrentScreen()
 
-  // Check if there are multiple wallets connected
-  const hasMultipleWallets = connections.length > 1
-
-  // Handle copy to clipboard with success indication
-  const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    try {
-      await navigator.clipboard.writeText(address)
-      setCopiedAddress(address)
-      setTimeout(() => setCopiedAddress(null), 2000) // Clear after 2 seconds
-    } catch (error) {
-      console.error("Failed to copy address:", error)
-    }
-  }
-
   return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex h-8 px-4 justify-between items-center rounded-full border border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
-        title="Open account actions"
-      >
-        <div className="flex items-center gap-2">
-          <WalletImage size={16} />
-          <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
-            {truncateAddress(address, 4, 2)}
-          </span>
-        </div>
-        <ChevronDown className="w-4 h-4" />
-      </button>
-
-      {isOpen && (
-        <div className="absolute top-full right-0 mt-1 w-56 border border-solid rounded-lg shadow-lg overflow-hidden bg-white border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 z-10">
-          <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-700">
-            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1 text-left">
-              Connected with:
-            </div>
-            <div className="text-xs text-gray-600 dark:text-gray-300 flex items-center gap-2 mb-1">
-              <WalletImage size={14} />
-              <span className="font-medium">
-                {getWalletName(
-                  connector ? wagmiConnectorToWalletId(connector) : "",
-                )}
-              </span>
-            </div>
-            <div className="flex items-center gap-1">
-              <span className="text-xs text-gray-600 dark:text-gray-300">
-                {truncateAddress(address, 8, 6)}
-              </span>
-              <button
-                type="button"
-                onClick={(e) => address && handleCopyAddress(address, e)}
-                className={`p-0.5 rounded transition-all duration-200 cursor-pointer ${
-                  copiedAddress === address
-                    ? "bg-green-100 dark:bg-green-900/30"
-                    : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                }`}
-                title={
-                  copiedAddress === address ? "Copied!" : "Copy full address"
-                }
-              >
-                {copiedAddress === address ? (
-                  <svg
-                    className="w-3 h-3 text-green-600 dark:text-green-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-label="Copied"
-                  >
-                    <title>Copied</title>
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
-                ) : (
-                  <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
-                )}
-              </button>
-            </div>
-          </div>
-
-          <HideBalances />
-
-          {ACTIONS.map((action) => {
-            if (action.disabled) return null
-            // Hide disconnect action if hideDisconnect is true
-            if (
-              (hideDisconnect || decoupleWagmi) &&
-              action.screen === "disconnect"
-            )
-              return null
-            // Hide switch wallet action if there's only one wallet connected
-            if (action.screen === "connect" && !hasMultipleWallets) return null
-            const IconComponent = action.icon
-            return (
-              <button
-                key={action.screen}
-                type="button"
-                onClick={() => {
-                  setCurrentScreen(action.screen as Screen)
-                  setIsOpen(false)
-                }}
-                className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700 flex items-center gap-2 cursor-pointer"
-              >
-                <IconComponent className="w-4 h-4" />
-                {action.label}
-              </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
+    <button
+      type="button"
+      onClick={() => setCurrentScreen("account-settings")}
+      className="flex h-8 px-4 justify-between items-center rounded-full border border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
+      title="Open account settings"
+    >
+      <div className="flex items-center gap-2">
+        <WalletImage size={16} />
+        <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
+          {truncateAddress(address, 4, 2)}
+        </span>
+      </div>
+      <ChevronDown className="w-4 h-4" />
+    </button>
   )
 }