0xtrails 0.2.5 → 0.2.6

package/src/widget/components/FeeBreakdown.tsx

@@ -0,0 +1,155 @@
+import type React from "react"
+import { useState } from "react"
+import { InfoIcon } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
+import { TokenImage } from "./TokenImage.js"
+import type { TrailsFeeBreakdown, FeeItem } from "../../fees.js"
+
+interface FeeBreakdownProps {
+  feeBreakdown: TrailsFeeBreakdown
+  children?: React.ReactNode
+}
+
+interface FeeRowProps {
+  label: string
+  feeItem: FeeItem
+  tooltip?: string
+}
+
+const FeeRow: React.FC<FeeRowProps> = ({ label, feeItem, tooltip }) => (
+  <div className="flex justify-between items-center py-1 items-start">
+    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+      {label}
+      {tooltip && (
+        <Tooltip message={tooltip}>
+          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+        </Tooltip>
+      )}
+    </span>
+    <div className="text-right">
+      <div className="font-medium text-xs text-gray-900 dark:text-white flex items-center gap-1 justify-end">
+        <TokenImage
+          imageUrl=""
+          symbol={feeItem.tokenSymbol}
+          chainId={feeItem.chainId}
+          contractAddress={feeItem.tokenAddress}
+          size={16}
+        />
+        {feeItem.amount} {feeItem.tokenSymbol}
+      </div>
+      <div className="text-xs text-gray-500 dark:text-gray-400">
+        ~{feeItem.usdValue}
+      </div>
+    </div>
+  </div>
+)
+
+export const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
+  feeBreakdown,
+  children,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // Don't render at all if there are no fees
+  const hasAnyFees =
+    feeBreakdown.originRelayFee ||
+    feeBreakdown.destinationRelayFee ||
+    feeBreakdown.providerFee ||
+    feeBreakdown.trailsFee
+
+  if (!hasAnyFees) {
+    return null
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Accordion header */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between py-1 text-xs transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
+        aria-label={isExpanded ? "Hide fee breakdown" : "Show fee breakdown"}
+      >
+        <span className="flex items-center gap-1 w-full">
+          {children ? (
+            children
+          ) : (
+            <Tooltip message="Detailed breakdown of the Trails platform fees">
+              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+            </Tooltip>
+          )}
+        </span>
+        <svg
+          className={`w-3 h-3 transition-transform duration-300 ease-out ml-2 ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {/* Collapsible content */}
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-out ${
+          isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="space-y-1 pl-2">
+          {feeBreakdown.originRelayFee && (
+            <FeeRow
+              label="Origin Relay Fee"
+              feeItem={feeBreakdown.originRelayFee}
+              tooltip="Fee for relaying the origin chain transaction"
+            />
+          )}
+          {feeBreakdown.destinationRelayFee && (
+            <FeeRow
+              label="Destination Relay Fee"
+              feeItem={feeBreakdown.destinationRelayFee}
+              tooltip="Fee for relaying the destination chain transaction"
+            />
+          )}
+          {feeBreakdown.providerFee && (
+            <FeeRow
+              label="Provider Fee"
+              feeItem={feeBreakdown.providerFee}
+              tooltip="Fee charged by the bridge/swap provider for executing the transaction"
+            />
+          )}
+          {feeBreakdown.trailsFee && (
+            <FeeRow
+              label="Trails Platform Fee"
+              feeItem={feeBreakdown.trailsFee}
+              tooltip="Platform fee for using the Trails service"
+            />
+          )}
+
+          {/* Total line - only show if we have a total value */}
+          {/* {feeBreakdown.totalUsdValue && (
+            <div className="flex justify-between items-center py-1 pt-2 border-t border-gray-200 dark:border-gray-700">
+              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
+                Total Fees
+              </span>
+              <div className="text-right">
+                <div className="font-medium text-xs text-gray-900 dark:text-white">
+                  ~{feeBreakdown.totalUsdValue}
+                </div>
+              </div>
+            </div>
+          )} */}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FeeBreakdown

package/src/widget/components/Fund.tsx

@@ -32,11 +32,12 @@ import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { TokenSelectorButton } from "./TokenSelectorButton.js"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 
 interface FundProps {
   onBack?: () => void
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -151,7 +152,7 @@ export const Fund: React.FC<FundProps> = ({
   } = useSendForm({
     account,
     toAmount: undefined, // Don't pass toAmount for fund form - user enters input amount
-    toRecipient: selectedRecipient || account.address,
+    toRecipient: selectedRecipient || account?.address,
     toChainId,
     toToken,
     toCalldata,
@@ -521,27 +522,10 @@ export const Fund: React.FC<FundProps> = ({
   }, [tokenAmountForBackend, isInputTypeUsd, sourceTokenPrice])
 
   // Dynamic font size based on input length - matching Earn.tsx
-  const inputStyles = useMemo(() => {
-    const inputLength = displayAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "0.875rem"
-    } else if (inputLength > 9) {
-      fontSize = "1rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.125rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.25rem"
-    } else {
-      fontSize = "1.5rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [displayAmount.length])
+  const inputStyles = useDynamicInputStyles({
+    inputValue: displayAmount,
+    variant: "smaller",
+  })
 
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
@@ -839,7 +823,7 @@ export const Fund: React.FC<FundProps> = ({
           {/* Bottom Info Row */}
           <div className="mt-2 flex justify-between items-center">
             {/* USD Amount */}
-            <div className="text-xs trails-text-muted">
+            <div className="text-xs text-gray-500 dark:text-gray-400">
               {originToken?.symbol && displayAmount ? (
                 <>≈ {amountUsdDisplay || "$0.00"}</>
               ) : (
@@ -852,7 +836,7 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 <button
                   type="button"
-                  className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
+                  className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
                   onClick={() => handlePercentageClick(100)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {

package/src/widget/components/FundSwap.tsx

@@ -13,13 +13,13 @@ interface FundProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -1,18 +1,24 @@
 import { ChevronRight, QrCode, Send } from "lucide-react"
 import type React from "react"
 import { truncateAddress } from "../../utils.js"
-import { useAccount } from "wagmi"
+import { useAccount, useConnections } from "wagmi"
 import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 
 export const FundingMethodSelectorButton: React.FC = () => {
-  const { address, isConnected } = useAccount()
+  const connections = useConnections()
+  const { address } = useAccount()
   const { setCurrentScreenWithBack } = useBack()
   const { selectedFundMethod } = useSelectedFundMethod()
 
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+  // Use the active account from useAccount(), fallback to first connection if needed
+  const activeAddress = address || connections[0]?.accounts[0]
+
   const handleClick = () => {
-    if (isConnected && address) {
+    if (isConnected && activeAddress) {
       // If wallet is connected, go to fund methods
       setCurrentScreenWithBack("fund-methods")
     } else {
@@ -27,32 +33,36 @@ export const FundingMethodSelectorButton: React.FC = () => {
       onClick={handleClick}
       className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
       title={
-        isConnected && address ? "Select funding method" : "Connect wallet"
+        isConnected && activeAddress
+          ? "Select funding method"
+          : "Connect wallet"
       }
     >
-      {isConnected && address ? (
+      {isConnected && activeAddress ? (
         selectedFundMethod === "qr-code" ? (
           <>
-            <QrCode className="w-4 h-4" />
-            <span className="text-sm font-medium">QR Code</span>
+            <QrCode className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">QR Code</span>
           </>
         ) : selectedFundMethod === "exchange" ? (
           <>
-            <Send className="w-4 h-4" />
-            <span className="text-sm font-medium">Exchange</span>
+            <Send className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">Exchange</span>
           </>
         ) : (
           <>
-            <Identicon value={address} size={16} />
-            <span className="text-sm font-medium">
-              {truncateAddress(address, 4, 2)}
+            <div className="flex items-center mr-1">
+              <Identicon value={activeAddress} size={16} />
+            </div>
+            <span className="text-sm font-medium m-0">
+              {truncateAddress(activeAddress, 4, 4)}
             </span>
           </>
         )
       ) : (
-        <span className="text-sm font-medium">Connect Wallet</span>
+        <span className="text-sm font-medium mr-1">Connect Wallet</span>
       )}
-      <ChevronRight className="w-4 h-4" />
+      <ChevronRight className="w-4 h-4 m-0" />
     </button>
   )
 }

package/src/widget/components/Identicon.tsx

@@ -1,81 +1,99 @@
 import type React from "react"
+import { useId } from "react"
+
+const MOD = 1000
+const SIZE = 64
+const RADIUS = SIZE / 2
+const prefix = "gradient-avatar-"
+
+const scaledMod = (value: number, mod: number = MOD): number => {
+  return (value % mod) / (MOD / SIZE)
+}
+
+const cyrb53 = (str: string, seed: number = 0): number => {
+  let h1 = 0xdeadbeef ^ seed
+  let h2 = 0x41c6ce57 ^ seed
 
-// MetaMask-style hash function
-const hashCode = (str: string): number => {
-  let hash = 0
   for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash
+    const ch = str.charCodeAt(i)
+    h1 = Math.imul(h1 ^ ch, 2654435761)
+    h2 = Math.imul(h2 ^ ch, 1597334677)
   }
-  return Math.abs(hash)
+
+  h1 =
+    Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
+    Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+  h2 =
+    Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
+    Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0)
 }
 
-// Generate MetaMask-style colors (bright and vibrant)
-const generateMetaMaskColors = (seed: number) => {
-  const colors = [
-    "#FF6B6B",
-    "#4ECDC4",
-    "#45B7D1",
-    "#96CEB4",
-    "#FECA57",
-    "#FF9FF3",
-    "#54A0FF",
-    "#5F27CD",
-    "#00D2D3",
-    "#FF9F43",
-    "#10AC84",
-    "#EE5A24",
-    "#0ABDE3",
-    "#C44569",
-    "#F8B500",
-    "#6C5CE7",
-    "#A3CB38",
-    "#FD79A8",
-    "#636E72",
-    "#00B894",
-  ]
-
-  const bg = colors[seed % colors.length]
-  const spot = colors[(seed + 7) % colors.length]
-
-  return { backgroundColor: bg, spotColor: spot }
+const createId = (name: string, id: string): string => `${prefix}${name}${id}`
+
+const createHues = (a: number, _b: number, c: number) => {
+  const hueA = a % 360
+  const hueB = (a + 120) % 360
+  const hueC = c % 360
+  return { hueA, hueB, hueC }
 }
 
-// Generate MetaMask-style pattern
-const generateMetaMaskPattern = (address: string) => {
-  const cleanAddress = address.replace(/^0x/i, "").toLowerCase()
-
-  // Use address to generate deterministic values
-  const seed = hashCode(cleanAddress)
-  const { backgroundColor, spotColor } = generateMetaMaskColors(seed)
-
-  // Generate a 8x8 grid pattern like MetaMask
-  const size = 8
-  const pattern: boolean[][] = []
-
-  // Generate pattern with symmetry (like MetaMask)
-  for (let y = 0; y < size; y++) {
-    const row: boolean[] = []
-    for (let x = 0; x < size; x++) {
-      // Create horizontal symmetry
-      const actualX = x < 4 ? x : 7 - x
-
-      // Use different parts of address for different rows/columns
-      const addressIndex = (y * 4 + actualX) % cleanAddress.length
-      const char = cleanAddress.charCodeAt(addressIndex)
-
-      // Determine if this cell should be filled
-      const shouldFill = (char + seed) % 3 === 0
-      row.push(shouldFill)
-    }
-    pattern.push(row)
+interface Gradient {
+  id: string
+  stopColor0: string
+  stopColor1: string
+  cx: number
+  cy: number
+  r: number
+}
+
+interface Gradients {
+  background: Gradient
+  primary: Gradient
+  secondary: Gradient
+}
+
+const createGradients = (id: string, address: string): Gradients => {
+  const hash = {
+    a: cyrb53(`${address}a`, 0),
+    b: cyrb53(`${address}b`, 1),
+    c: cyrb53(`${address}c`, 2),
+    x: cyrb53(`${address}d`, 3),
+    y: cyrb53(`${address}e`, 4),
+    r: cyrb53(`${address}f`, 5),
   }
 
+  const { hueA, hueB, hueC } = createHues(hash.a, hash.b, hash.c)
+  const cx = scaledMod(hash.x)
+  const cy = scaledMod(hash.y)
+  const r = SIZE / 10 + scaledMod(hash.r, MOD * 1.5)
+
   return {
-    backgroundColor,
-    spotColor,
-    pattern,
+    background: {
+      id: createId("background", id),
+      stopColor0: `hsl(${hueC}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueA}deg 100% 50% / 1)`,
+      cx,
+      cy,
+      r,
+    },
+    primary: {
+      id: createId("primary", id),
+      stopColor0: `hsl(${hueA}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueB}deg 100% 50% / 1)`,
+      cx,
+      cy,
+      r,
+    },
+    secondary: {
+      id: createId("secondary", id),
+      stopColor0: `hsl(${hueC}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueB}deg 100% 50% / 1)`,
+      cx: cy,
+      cy: cx,
+      r: r / 2,
+    },
   }
 }
 
@@ -90,6 +108,8 @@ export const Identicon: React.FC<IdenticonProps> = ({
   size = 64,
   className = "",
 }) => {
+  const id = useId()
+
   if (!value || typeof value !== "string") {
     return (
       <div
@@ -104,10 +124,8 @@ export const Identicon: React.FC<IdenticonProps> = ({
     )
   }
 
-  const { backgroundColor, spotColor, pattern } = generateMetaMaskPattern(value)
-
-  const gridSize = 8
-  const cellSize = size / gridSize
+  const gradients = createGradients(id, value.toLowerCase())
+  const getId = (name: string) => createId(name, id)
 
   return (
     <div
@@ -117,39 +135,90 @@ export const Identicon: React.FC<IdenticonProps> = ({
         height: size,
         borderRadius: "50%",
         overflow: "hidden",
-        backgroundColor: backgroundColor,
+        flexShrink: 0,
       }}
     >
       <svg
         width={size}
         height={size}
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
         style={{ display: "block" }}
+        xmlns="http://www.w3.org/2000/svg"
         aria-label={`Identicon for ${value}`}
       >
         <title>Identicon for {value}</title>
-        {/* Background circle */}
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={size / 2}
-          fill={backgroundColor}
-        />
-
-        {/* Pattern cells */}
-        {pattern.map((row, y) =>
-          row.map((shouldFill, x) =>
-            shouldFill ? (
-              <rect
-                key={`cell-${y}-${x}-${value.slice(-8)}`}
-                x={x * cellSize}
-                y={y * cellSize}
-                width={cellSize}
-                height={cellSize}
-                fill={spotColor}
-              />
-            ) : null,
-          ),
-        )}
+
+        <defs>
+          <clipPath id={getId("circle-clip")}>
+            <circle cx={RADIUS} cy={RADIUS} r={RADIUS} />
+          </clipPath>
+
+          <filter
+            id={getId("blur-xs")}
+            x="-10%"
+            y="-10%"
+            width="120%"
+            height="120%"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation={SIZE / 10}
+              result="effect1_foregroundBlur"
+            />
+          </filter>
+
+          <linearGradient
+            id={gradients.background.id}
+            x1="0"
+            y1="0"
+            x2="1"
+            y2="1"
+          >
+            <stop offset="0" stopColor={gradients.background.stopColor0} />
+            <stop offset="1" stopColor={gradients.background.stopColor1} />
+          </linearGradient>
+
+          <radialGradient id={gradients.primary.id}>
+            <stop offset="0" stopColor={gradients.primary.stopColor0} />
+            <stop offset="1" stopColor={gradients.primary.stopColor1} />
+          </radialGradient>
+
+          <radialGradient id={gradients.secondary.id}>
+            <stop offset="0" stopColor={gradients.secondary.stopColor0} />
+            <stop offset="1" stopColor={gradients.secondary.stopColor1} />
+          </radialGradient>
+        </defs>
+
+        <g clipPath={`url(#${getId("circle-clip")})`}>
+          <rect
+            width="100%"
+            height="100%"
+            fill={`url(#${gradients.background.id})`}
+          />
+
+          <g filter={`url(#${getId("blur-xs")})`}>
+            <circle
+              fill={`url(#${gradients.primary.id})`}
+              cx={gradients.primary.cx}
+              cy={gradients.primary.cy}
+              r={gradients.primary.r}
+            />
+            <circle
+              fill={`url(#${gradients.secondary.id})`}
+              cx={gradients.secondary.cx}
+              cy={gradients.secondary.cy}
+              r={gradients.secondary.r}
+            />
+          </g>
+        </g>
       </svg>
     </div>
   )

package/src/widget/components/MeshConnectExchanges.tsx

@@ -12,24 +12,18 @@ import CoinbaseLogo from "../assets/Coinbase_Icon_Logo.svg"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { logger } from "../../logger.js"
 import { useSelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
-import { useMode } from "../hooks/useMode.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import type { Mode } from "../../mode.js"
-import type { Screen } from "../hooks/useCurrentScreen.js"
 
 export interface MeshConnectExchangesProps {
   onBack?: () => void
   onSelectExchange?: (integrationId: string, exchangeName: string) => void
-  getInitialScreenForMode?: (mode: Mode) => Screen
 }
 
 export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
   onBack,
   onSelectExchange,
-  getInitialScreenForMode,
 }) => {
   const { setSelectedExchange } = useSelectedMeshExchange()
-  const { mode } = useMode()
   const { setCurrentScreen } = useCurrentScreen()
   const [coinbaseId, setCoinbaseId] = useState<string | null>(null)
   const [binanceId, setBinanceId] = useState<string | null>(null)
@@ -94,15 +88,8 @@ export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
     // Store the selected exchange
     setSelectedExchange({ integrationId, exchangeName })
 
-    // Navigate to the initial screen for the current mode
-    if (getInitialScreenForMode) {
-      const currentMode = (mode || "pay") as Mode
-      const initialScreen = getInitialScreenForMode(currentMode)
-      logger.console.log(
-        `[trails-sdk] Navigating to initial screen for mode ${currentMode}: ${initialScreen}`,
-      )
-      setCurrentScreen(initialScreen)
-    }
+    // Navigate to home screen
+    setCurrentScreen("home")
   }
 
   if (loading) {