0xtrails 0.2.4 → 0.2.5

package/src/widget/components/ConnectedWallets.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 import type React from "react"
-import { Wallet, Copy, X } from "lucide-react"
+import { Wallet, Copy, X, ChevronRight } from "lucide-react"
 import {
   useAccount,
   useConnections,
@@ -12,11 +12,17 @@ import { logger } from "../../logger.js"
 import { truncateAddress } from "../../utils.js"
 import { useAccountTotalBalanceUsd } from "../../tokenBalances.js"
 import { Identicon } from "./Identicon.js"
+import { useBack } from "../hooks/useBack.js"
+import type { Screen } from "../hooks/useCurrentScreen.js"
 
 export interface ConnectedWalletsProps {
   onWalletSwitch?: (address: string) => void
+  onWalletSelect?: (address: string, connector: any) => void
   showActiveWallet?: boolean
+  showConnectNewWallet?: boolean
+  showDisconnect?: boolean
   className?: string
+  backScreen?: string
 }
 
 interface WalletItemProps {
@@ -28,17 +34,21 @@ interface WalletItemProps {
     isActive: boolean
   }
   onWalletSwitch: (address: string, connector: any) => void
+  onWalletSelect?: (address: string, connector: any) => void
   onDisconnect: (connector: any, e: React.MouseEvent) => void
   onCopyAddress: (address: string, e: React.MouseEvent) => void
   copiedAddress: string | null
+  showDisconnect?: boolean
 }
 
 const WalletItem: React.FC<WalletItemProps> = ({
   wallet,
   onWalletSwitch,
+  onWalletSelect,
   onDisconnect,
   onCopyAddress,
   copiedAddress,
+  showDisconnect = false,
 }) => {
   const { totalBalanceUsdFormatted, isLoadingTotalBalanceUsd } =
     useAccountTotalBalanceUsd(wallet.address)
@@ -46,22 +56,29 @@ const WalletItem: React.FC<WalletItemProps> = ({
   return (
     <div className="space-y-1">
       {/* Wallet Button */}
-      <div
+      <button
+        type="button"
         onClick={() => {
-          if (!wallet.isActive) {
+          if (onWalletSelect) {
+            onWalletSelect(wallet.address, wallet.connector)
+          } else if (!wallet.isActive) {
             onWalletSwitch(wallet.address, wallet.connector)
           }
         }}
         onKeyDown={(e) => {
-          if ((e.key === "Enter" || e.key === " ") && !wallet.isActive) {
+          if (e.key === "Enter" || e.key === " ") {
             e.preventDefault()
-            onWalletSwitch(wallet.address, wallet.connector)
+            if (onWalletSelect) {
+              onWalletSelect(wallet.address, wallet.connector)
+            } else if (!wallet.isActive) {
+              onWalletSwitch(wallet.address, wallet.connector)
+            }
           }
         }}
         tabIndex={wallet.isActive ? -1 : 0}
-        className={`group w-full flex items-center justify-between font-medium py-2 px-3 rounded-lg transition-all duration-200 ${
+        className={`group w-full flex items-center justify-between font-medium py-2 px-3 transition-all duration-200 ${
           wallet.isActive
-            ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-default"
+            ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-pointer"
             : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
         }`}
       >
@@ -80,23 +97,17 @@ const WalletItem: React.FC<WalletItemProps> = ({
               ) : (
                 <Wallet className="h-4 w-4 text-gray-600 dark:text-gray-400" />
               )}
-              <span className="text-sm">
+              <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
                 {wallet.walletConfig?.name ||
                   wallet.connector?.name ||
                   "Wallet"}
               </span>
-              {!isLoadingTotalBalanceUsd && totalBalanceUsdFormatted && (
-                <span className="text-xs text-gray-400 dark:text-gray-500">
-                  {totalBalanceUsdFormatted}
-                </span>
-              )}
             </div>
             <div className="flex items-center space-x-1">
               <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
                 {truncateAddress(wallet.address)}
               </span>
-              <button
-                type="button"
+              <div
                 onClick={(e) => {
                   e.preventDefault()
                   e.stopPropagation()
@@ -134,7 +145,7 @@ const WalletItem: React.FC<WalletItemProps> = ({
                 ) : (
                   <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
                 )}
-              </button>
+              </div>
             </div>
           </div>
         </div>
@@ -144,38 +155,49 @@ const WalletItem: React.FC<WalletItemProps> = ({
             <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
               Active
             </span>
-          ) : (
+          ) : !onWalletSelect ? (
             <span className="text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
               Set as active
             </span>
+          ) : null}
+          {!isLoadingTotalBalanceUsd && totalBalanceUsdFormatted && (
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {totalBalanceUsdFormatted}
+            </span>
+          )}
+          {showDisconnect && (
+            <div
+              onClick={(e) => onDisconnect(wallet.connector, e)}
+              onMouseDown={(e) => e.stopPropagation()}
+              onMouseUp={(e) => e.stopPropagation()}
+              className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer"
+              title="Disconnect wallet"
+            >
+              <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+            </div>
           )}
-          <button
-            type="button"
-            onClick={(e) => onDisconnect(wallet.connector, e)}
-            onMouseDown={(e) => e.stopPropagation()}
-            onMouseUp={(e) => e.stopPropagation()}
-            className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer"
-            title="Disconnect wallet"
-            aria-label="Disconnect wallet"
-          >
-            <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-          </button>
+          {onWalletSelect && <ChevronRight className="w-5 h-5 text-gray-400" />}
         </div>
-      </div>
+      </button>
     </div>
   )
 }
 
 export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   onWalletSwitch,
+  onWalletSelect,
   showActiveWallet = true,
+  showConnectNewWallet = false,
+  showDisconnect = false,
   className = "",
+  backScreen = "connect",
 }) => {
   const { address, connector } = useAccount()
   const connections = useConnections()
   const { switchAccount } = useSwitchAccount()
   const { disconnect } = useDisconnect()
   const { wallets: allWallets } = useWallets()
+  const { setCurrentScreenWithBack } = useBack()
   const [error, setError] = useState<string | null>(null)
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
 
@@ -302,39 +324,72 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   return (
     <div className={`space-y-2 ${className}`}>
       {/* Header */}
-      <div className="flex items-center gap-2 mb-3">
-        <Wallet className="h-4 w-4 text-gray-400 dark:text-gray-500" />
-        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-          Connected Wallets
-        </span>
+      <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left mb-3">
+        Connected Wallets
       </div>
 
-      {error && (
-        <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
-          <p className="text-sm break-words text-red-600 dark:text-red-200">
-            {error}
-          </p>
-        </div>
-      )}
+      {/* Connected Wallets Container with Border */}
+      <div className="trails-border-radius-container border trails-border-primary">
+        {error && (
+          <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 m-3">
+            <p className="text-sm break-words text-red-600 dark:text-red-200">
+              {error}
+            </p>
+          </div>
+        )}
 
-      {/* Connected Wallets List */}
-      {connectedWallets.map((wallet) => {
-        // Skip active wallet if showActiveWallet is false
-        if (!showActiveWallet && wallet.isActive) {
-          return null
-        }
+        {/* Connected Wallets List */}
+        {connectedWallets.map((wallet, index) => {
+          // Skip active wallet if showActiveWallet is false
+          if (!showActiveWallet && wallet.isActive) {
+            return null
+          }
 
-        return (
-          <WalletItem
-            key={wallet.address}
-            wallet={wallet}
-            onWalletSwitch={handleWalletSwitch}
-            onDisconnect={handleDisconnect}
-            onCopyAddress={handleCopyAddress}
-            copiedAddress={copiedAddress}
-          />
-        )
-      })}
+          return (
+            <div key={wallet.address}>
+              <WalletItem
+                wallet={wallet}
+                onWalletSwitch={handleWalletSwitch}
+                onWalletSelect={onWalletSelect}
+                onDisconnect={handleDisconnect}
+                onCopyAddress={handleCopyAddress}
+                copiedAddress={copiedAddress}
+                showDisconnect={showDisconnect}
+              />
+              {/* Add divider between wallet items */}
+              {index < connectedWallets.length - 1 && (
+                <div className="border-b border-gray-200 dark:border-gray-700"></div>
+              )}
+            </div>
+          )
+        })}
+
+        {/* Connect new wallet Button - inside the same container */}
+        {showConnectNewWallet && (
+          <>
+            {/* Add divider before the connect button */}
+            {connectedWallets.length > 0 && (
+              <div className="border-b border-gray-200 dark:border-gray-700"></div>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                logger.console.log(
+                  "[trails-sdk] Navigating from connected-wallets to wallet-list",
+                )
+                setCurrentScreenWithBack("wallet-list", backScreen as Screen)
+              }}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary hover:trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <Wallet className="w-4 h-4" />
+                <span className="text-sm font-bold">Connect new wallet</span>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+          </>
+        )}
+      </div>
     </div>
   )
 }