0xtrails 0.2.4 → 0.2.6

package/src/widget/components/ErrorAnimationIcon.tsx

@@ -0,0 +1,130 @@
+import { type CSSProperties, useEffect, useState } from "react"
+
+export function ErrorAnimationIcon() {
+  const [animate, setAnimate] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimate(true)
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const styles: Record<string, CSSProperties> = {
+    container: {
+      width: "80px",
+      height: "80px",
+      position: "relative" as const,
+    },
+    circleContainer: {
+      position: "relative" as const,
+      width: "100%",
+      height: "100%",
+    },
+    circleFill: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: "#ef4444",
+      transform: animate ? "scale(1)" : "scale(0)",
+      opacity: animate ? 1 : 0,
+      transition: "transform 0.15s ease-out 0.3s, opacity 0.15s ease-out 0.3s",
+    },
+    progressRing: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      transform: "rotate(-90deg)",
+    },
+    circle: {
+      fill: "none",
+      stroke: "url(#redGradient)",
+      strokeWidth: 4,
+      strokeLinecap: "round" as const,
+      strokeDasharray: 226,
+      strokeDashoffset: animate ? 0 : 226,
+      transition: "stroke-dashoffset 0.3s ease-out",
+    },
+    xContainer: {
+      position: "absolute" as const,
+      top: "50%",
+      left: "50%",
+      transform: animate
+        ? "translate(-50%, -50%) scale(1)"
+        : "translate(-50%, -50%) scale(0)",
+      opacity: animate ? 1 : 0,
+      zIndex: 10,
+      transition: "transform 0.1s ease-out 0.4s, opacity 0.1s ease-out 0.4s",
+    },
+    xPath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 3,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 15,
+      strokeDashoffset: animate ? 0 : 15,
+      transition: "stroke-dashoffset 0.15s ease-out 0.45s",
+    },
+    xPathSecond: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 3,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 15,
+      strokeDashoffset: animate ? 0 : 15,
+      transition: "stroke-dashoffset 0.15s ease-out 0.5s",
+    },
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.circleContainer}>
+        {/* Circle fill */}
+        <div style={styles.circleFill} />
+
+        {/* Progress ring */}
+        <svg style={styles.progressRing}>
+          <defs>
+            <radialGradient
+              id="redGradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              gradientUnits="objectBoundingBox"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "#ef4444", stopOpacity: 0 }}
+              />
+              <stop
+                offset="70%"
+                style={{ stopColor: "#ef4444", stopOpacity: 0.3 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "#ef4444", stopOpacity: 1 }}
+              />
+            </radialGradient>
+          </defs>
+          <circle cx="40" cy="40" r="36" style={styles.circle} />
+        </svg>
+
+        {/* X icon */}
+        <div style={styles.xContainer}>
+          <svg width="48" height="48" viewBox="0 0 24 24">
+            <path d="M6 6L18 18" style={styles.xPath} />
+            <path d="M18 6L6 18" style={styles.xPathSecond} />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,13 +1,8 @@
-import {
-  ChevronRight,
-  Search,
-  Loader2,
-  ChevronDown,
-  ArrowDown,
-} from "lucide-react"
+import { ChevronRight, Search, Loader2, ArrowDown } from "lucide-react"
 import { useEffect, useState, useMemo, useRef, useCallback } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
+import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
@@ -35,11 +30,14 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 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
@@ -154,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,
@@ -524,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) => {
@@ -637,7 +618,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select From Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -684,7 +664,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select To Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -728,7 +707,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={onBack}
           headerContent="Fund"
           headerContentAlign="left"
-          showAccountActions={true}
         />
 
         <div className="space-y-2">
@@ -770,7 +748,7 @@ export const Fund: React.FC<FundProps> = ({
       <div className="space-y-1">
         {/* Origin Amount Input Section */}
         <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 focus-within:border-gray-400 dark:focus-within:border-gray-500">
-          {/* Deposit Label and Percentage Buttons */}
+          {/* Deposit Label */}
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-medium trails-text-secondary text-left">
               Deposit
@@ -782,40 +760,6 @@ export const Fund: React.FC<FundProps> = ({
                 ""
               )}
             </div>
-
-            {/* Percentage Buttons */}
-            {originToken && (
-              <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(25)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  25%
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(50)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  50%
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(75)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  75%
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(100)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  Max
-                </button>
-              </div>
-            )}
           </div>
 
           <div className="flex items-center space-x-2">
@@ -869,39 +813,17 @@ export const Fund: React.FC<FundProps> = ({
             </div>
 
             {/* Token Selection Button */}
-            <button
-              type="button"
-              onClick={() => setShowOriginTokenSelector(true)}
-              className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
-            >
-              {originToken ? (
-                <>
-                  <TokenImage
-                    symbol={originToken.symbol}
-                    imageUrl={originToken.imageUrl}
-                    chainId={originToken.chainId}
-                    size={20}
-                  />
-                  <span className="font-medium trails-text-primary text-sm">
-                    {originToken.symbol}
-                  </span>
-                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                </>
-              ) : (
-                <>
-                  <span className="font-medium trails-text-muted text-sm">
-                    Select Token
-                  </span>
-                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                </>
-              )}
-            </button>
+            <TokenSelectorButton
+              token={originToken}
+              chainId={originToken?.chainId}
+              onSelect={() => setShowOriginTokenSelector(true)}
+            />
           </div>
 
           {/* 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"}</>
               ) : (
@@ -909,12 +831,12 @@ export const Fund: React.FC<FundProps> = ({
               )}
             </div>
 
-            {/* Origin Token Balance */}
-            <div className="text-xs trails-text-muted text-right">
-              {originToken ? (
+            {/* Origin Token Balance and Percentage Buttons */}
+            {originToken && balanceFormatted && (
+              <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 === " ") {
@@ -925,14 +847,25 @@ export const Fund: React.FC<FundProps> = ({
                   title="Click to use full balance"
                 >
                   Balance:{" "}
-                  {isBalanceVisible
-                    ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
-                    : "••••••"}
+                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
                 </button>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </div>
+
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={balanceFormatted}
+                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  chainId={originToken.chainId}
+                  onAmountSelect={(amount) => {
+                    setTokenAmountForBackend(amount)
+                    setSendFormAmount(amount)
+                    setGlobalAmount(amount)
+                    setInputDisplayValue(amount)
+                  }}
+                  className="opacity-100"
+                />
+              </div>
+            )}
           </div>
         </div>