0xtrails 0.2.4 → 0.2.5

package/src/widget/hooks/useCheckout.ts

@@ -2,6 +2,7 @@ import { useCallback, useRef } from "react"
 import { getSessionId } from "../../analytics.js"
 import { logger } from "../../logger.js"
 import { updatePersistentToast } from "../../toast.js"
+import { getPrettifiedErrorMessage } from "../../error.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -17,7 +18,7 @@ export type CheckoutCallbacks = {
 export type CheckoutOnHandlers = {
   triggerCheckoutStart: () => void
   triggerCheckoutQuote: (quote: any) => void
-  triggerCheckoutComplete: () => void
+  triggerCheckoutComplete: (txStatus: "success" | "fail") => void
   triggerCheckoutError: (error: string) => void
   triggerCheckoutStatusUpdate: (transactionStates: any[]) => void
 }
@@ -81,26 +82,38 @@ export function useCheckout({
     [onCheckoutQuote],
   )
 
-  const triggerCheckoutComplete = useCallback(() => {
-    if (onCheckoutComplete && sessionIdRef.current) {
-      try {
-        onCheckoutComplete({
-          sessionId: sessionIdRef.current,
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error calling onCheckoutComplete:",
-          error,
-        )
+  const triggerCheckoutComplete = useCallback(
+    (txStatus: "success" | "fail") => {
+      if (onCheckoutComplete && sessionIdRef.current) {
+        try {
+          onCheckoutComplete({
+            sessionId: sessionIdRef.current,
+          })
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error calling onCheckoutComplete:",
+            error,
+          )
+        }
       }
-    }
 
-    updatePersistentToast(
-      "Transaction Complete",
-      "Your transaction has been successfully processed",
-      "success",
-    )
-  }, [onCheckoutComplete])
+      if (txStatus === "success") {
+        updatePersistentToast(
+          "Transaction Complete",
+          "Your transaction has been successfully processed",
+          "success",
+        )
+      } else {
+        // Default to error for any non-success status (including 'fail' and any unexpected values)
+        updatePersistentToast(
+          "Transaction Failed",
+          "Your transaction failed or was refunded",
+          "error",
+        )
+      }
+    },
+    [onCheckoutComplete],
+  )
 
   const triggerCheckoutError = useCallback(
     (error: string) => {
@@ -120,7 +133,10 @@ export function useCheckout({
 
       updatePersistentToast(
         "Transaction Failed",
-        error || "An error occurred while processing your transaction",
+        getPrettifiedErrorMessage(
+          error,
+          "An error occurred while processing your transaction",
+        ),
         "error",
       )
     },

package/src/widget/hooks/useCurrentScreen.tsx

@@ -25,6 +25,7 @@ export type Screen =
   | "user-preferences"
   | "chain-list"
   | "disconnect"
+  | "home"
 
 interface CurrentScreenContextType {
   currentScreen: Screen

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -14,6 +14,7 @@ import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
 
 const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
+const MINIMUM_BALANCE_USD_FOR_PRIORITIZATION = 1 // $1
 
 /**
  * Hook for intelligent default token selection in 0xtrails widget.
@@ -33,9 +34,9 @@ const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
  * - Fallback to any token with balance > 0
  *
  * Destination Token Logic (only when toToken/toChainId not provided):
- * - Matches origin token symbol on different chain when possible
- * - Default destination chain: Base (unless origin is Base, then Arbitrum)
- * - Fallback priority: USDC > ETH > first available token
+ * - Default destination chain: Base if origin is not Base, Arbitrum if origin is Base
+ * - Default destination token: USDC on destination chain
+ * - Fallback: Same symbol on destination chain > ETH on destination chain > first available token on destination chain
  *
  * @returns defaultOriginToken - Best origin token that can cover targetAmountUsd (if specified)
  * @returns defaultDestinationToken - Matching token on different chain (null if toToken/toChainId set)
@@ -231,8 +232,11 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     }
 
     // Helper to sort tokens by balance USD and volume
-    const sortTokensByBalanceAndVolume = (tokens: TokenBalanceExtended[]) => {
-      return [...tokens].sort((a, b) => {
+    const sortTokensByBalanceAndVolume = (
+      tokens: TokenBalanceExtended[],
+      targetAmount?: number,
+    ) => {
+      const sortedTokens = [...tokens].sort((a, b) => {
         const aVolume = getToken24hVolume(a)
         const bVolume = getToken24hVolume(b)
         const aHighVolume = aVolume >= MINIMUM_24H_VOLUME_USD
@@ -247,6 +251,56 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const bBalanceUsd = b.balanceUsd ?? 0
         return bBalanceUsd - aBalanceUsd
       })
+
+      // After initial sorting, prioritize USDC and native tokens at the top
+      const effectiveTargetAmount =
+        targetAmount ?? MINIMUM_BALANCE_USD_FOR_PRIORITIZATION
+
+      const prioritizedTokens: TokenBalanceExtended[] = []
+      const remainingTokens: TokenBalanceExtended[] = []
+
+      // Separate tokens into prioritized and remaining
+      for (const token of sortedTokens) {
+        const balanceUsd = token.balanceUsd ?? 0
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
+        const isUSDC =
+          !isNative && token.contractInfo?.symbol?.toUpperCase() === "USDC"
+
+        if ((isUSDC || isNative) && balanceUsd >= effectiveTargetAmount) {
+          prioritizedTokens.push(token)
+        } else {
+          remainingTokens.push(token)
+        }
+      }
+
+      // Sort prioritized tokens: USDC first, then native tokens
+      prioritizedTokens.sort((a, b) => {
+        const aIsNative =
+          !("contractAddress" in a) || a.contractAddress === zeroAddress
+        const bIsNative =
+          !("contractAddress" in b) || b.contractAddress === zeroAddress
+        const aIsUSDC =
+          !aIsNative && a.contractInfo?.symbol?.toUpperCase() === "USDC"
+        const bIsUSDC =
+          !bIsNative && b.contractInfo?.symbol?.toUpperCase() === "USDC"
+
+        // USDC comes first
+        if (aIsUSDC && !bIsUSDC) return -1
+        if (!aIsUSDC && bIsUSDC) return 1
+
+        // Then native tokens
+        if (aIsNative && !bIsNative) return -1
+        if (!aIsNative && bIsNative) return 1
+
+        // Within same type, sort by balance USD (highest first)
+        const aBalanceUsd = a.balanceUsd ?? 0
+        const bBalanceUsd = b.balanceUsd ?? 0
+        return bBalanceUsd - aBalanceUsd
+      })
+
+      // Return prioritized tokens first, then remaining tokens
+      return [...prioritizedTokens, ...remainingTokens]
     }
 
     // Find the best origin token using intelligent selection
@@ -281,7 +335,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const sameChainTokens = tokensWithSufficientBalance.filter(
           (token) => token.chainId === targetChainId,
         )
-        const sortedSameChain = sortTokensByBalanceAndVolume(sameChainTokens)
+        const sortedSameChain = sortTokensByBalanceAndVolume(
+          sameChainTokens,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedSameChain[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -296,7 +353,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
           (token) =>
             tokenMatches(token, toToken) && token.chainId !== targetChainId,
         )
-        const sortedSameToken = sortTokensByBalanceAndVolume(sameTokenDiffChain)
+        const sortedSameToken = sortTokensByBalanceAndVolume(
+          sameTokenDiffChain,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedSameToken[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -310,8 +370,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const diffChainDiffToken = tokensWithSufficientBalance.filter(
           (token) => token.chainId !== targetChainId,
         )
-        const sortedDiffChainDiffToken =
-          sortTokensByBalanceAndVolume(diffChainDiffToken)
+        const sortedDiffChainDiffToken = sortTokensByBalanceAndVolume(
+          diffChainDiffToken,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedDiffChainDiffToken[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -322,7 +384,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       // Fallback: If no token can cover target amount, use any token (sorted by balance/volume)
       if (!bestOriginToken) {
-        const allTokensSorted = sortTokensByBalanceAndVolume(tokensWithBalance)
+        const allTokensSorted = sortTokensByBalanceAndVolume(
+          tokensWithBalance,
+          effectiveTargetAmount,
+        )
         bestOriginToken = allTokensSorted[0] ?? null
         logger.console.log(
           "[trails-sdk] Fallback: No token can cover target amount, using highest balance token",
@@ -330,8 +395,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       }
     } else {
       // When no specific destination is set, select highest value token with good liquidity
-      const sortedByBalanceAndVolume =
-        sortTokensByBalanceAndVolume(tokensWithBalance)
+      const sortedByBalanceAndVolume = sortTokensByBalanceAndVolume(
+        tokensWithBalance,
+        MINIMUM_BALANCE_USD_FOR_PRIORITIZATION,
+      ) // Use minimum balance for prioritization
       bestOriginToken = sortedByBalanceAndVolume[0] ?? null
       logger.console.log(
         "[trails-sdk] No destination specified, selected highest value token with best liquidity",
@@ -358,30 +425,39 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     let destinationToken: DefaultToken | null = null
 
     if (shouldComputeDestination) {
-      // Determine default destination chain: Base if origin is not Base, Arbitrum if origin is Base
+      // Determine destination chain: Base if origin is not Base, Arbitrum if origin is Base
       const defaultDestChainId =
         originToken.chainId === base.id ? arbitrum.id : base.id
 
-      // Find matching token on destination chain (prefer same symbol)
-      const destChainTokens = supportedTokens.filter(
-        (token: any) => token.chainId === defaultDestChainId,
+      // Find USDC on destination chain first
+      const usdcOnDestChain = supportedTokens.find(
+        (token: any) =>
+          token.chainId === defaultDestChainId && token.symbol === "USDC",
       )
 
       let destToken: any = null
 
-      // Try to find same symbol on dest chain
-      const sameSymbolToken = destChainTokens.find((token: any) => {
-        return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
-      })
-
-      if (sameSymbolToken) {
-        destToken = sameSymbolToken
+      if (usdcOnDestChain) {
+        destToken = usdcOnDestChain
       } else {
-        // Fallback: USDC > ETH > first available token
-        destToken =
-          destChainTokens.find((token: any) => token.symbol === "USDC") ||
-          destChainTokens.find((token: any) => token.symbol === "ETH") ||
-          destChainTokens[0]
+        // Fallback: Find matching token on destination chain
+        const destChainTokens = supportedTokens.filter(
+          (token: any) => token.chainId === defaultDestChainId,
+        )
+
+        // Try to find same symbol on destination chain first
+        const sameSymbolOnDestChain = destChainTokens.find((token: any) => {
+          return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
+        })
+
+        if (sameSymbolOnDestChain) {
+          destToken = sameSymbolOnDestChain
+        } else {
+          // Fallback: ETH on destination chain > first available token on destination chain
+          destToken =
+            destChainTokens.find((token: any) => token.symbol === "ETH") ||
+            destChainTokens[0]
+        }
       }
 
       const decimals = destToken?.decimals

package/src/widget/hooks/usePayMessage.tsx

@@ -8,6 +8,7 @@ import { truncateAddress } from "../../utils.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import ChainImage from "../components/ChainImage.js"
 import TokenImage from "../components/TokenImage.js"
+import { Identicon } from "../components/Identicon.js"
 import { logger } from "../../logger.js"
 
 export interface PayMessagePart {
@@ -85,25 +86,23 @@ export function usePayMessage(): UsePayMessageReturn {
   })
 
   const parsed = useMemo(() => {
-    // Default message if no payMessage provided
-    const defaultMessage = appName
-      ? `Pay {APP_IMAGE} {APP_NAME} {TO_AMOUNT_USD}`
-      : `Pay {TO_AMOUNT_USD}`
-
-    const template = payMessage || defaultMessage
+    // If no payMessage provided, return empty parts (default layout handled separately)
+    if (!payMessage) {
+      return []
+    }
 
     // Parse the template into parts
     const parts: PayMessagePart[] = []
     const regex = /\{([^}]+)\}/g
     let lastIndex = 0
-    let match: RegExpExecArray | null = regex.exec(template)
+    let match: RegExpExecArray | null = regex.exec(payMessage)
 
     while (match !== null) {
       // Add text before the placeholder
       if (match.index > lastIndex) {
         parts.push({
           type: "text",
-          value: template.substring(lastIndex, match.index),
+          value: payMessage.substring(lastIndex, match.index),
         })
       }
 
@@ -176,14 +175,14 @@ export function usePayMessage(): UsePayMessageReturn {
       }
 
       lastIndex = regex.lastIndex
-      match = regex.exec(template)
+      match = regex.exec(payMessage)
     }
 
     // Add remaining text
-    if (lastIndex < template.length) {
+    if (lastIndex < payMessage.length) {
       parts.push({
         type: "text",
-        value: template.substring(lastIndex),
+        value: payMessage.substring(lastIndex),
       })
     }
 
@@ -206,6 +205,78 @@ export function usePayMessage(): UsePayMessageReturn {
 
   // Render the message
   const message = useMemo(() => {
+    // If no payMessage provided, render default layout
+    if (!payMessage) {
+      return (
+        <div className="flex flex-col items-center justify-center px-8 py-4 space-y-4 min-w-full">
+          {/* App image above the amount if it exists */}
+          {appImageUrl && (
+            <img
+              src={appImageUrl}
+              alt={appName || "App"}
+              className="w-12 h-12 rounded-lg"
+              onError={(e) => {
+                logger.console.error(
+                  `Error loading app image: ${e}, appImageUrl: ${appImageUrl}`,
+                )
+                // Hide image on error
+                e.currentTarget.style.display = "none"
+              }}
+            />
+          )}
+
+          {/* Large amount in center */}
+          <div className="font-bold text-center">
+            {(() => {
+              const amountToShow = targetAmountUsdFormatted || toAmount || "0"
+              const tokenSymbol = tokenInfo?.symbol || ""
+              const displayText = targetAmountUsdFormatted
+                ? amountToShow
+                : `${amountToShow} ${tokenSymbol}`.trim()
+
+              // Dynamic font size based on text length
+              const textLength = displayText.length
+              let fontSize = "text-6xl" // Default large size
+
+              if (textLength > 12) {
+                fontSize = "text-2xl"
+              } else if (textLength > 10) {
+                fontSize = "text-3xl"
+              } else if (textLength > 8) {
+                fontSize = "text-4xl"
+              } else if (textLength > 6) {
+                fontSize = "text-5xl"
+              }
+
+              return <div className={fontSize}>{displayText}</div>
+            })()}
+          </div>
+
+          {/* Recipient info below */}
+          {toAddress && (
+            <div className="flex items-center space-x-2 text-center">
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                to
+              </span>
+              <Identicon value={toAddress} size={20} />
+              <a
+                href={getExplorerUrlForAddress({
+                  address: toAddress,
+                  chainId: toChainId ? Number(toChainId) : 1,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm hover:underline cursor-pointer text-blue-600 dark:text-blue-400"
+              >
+                {truncateAddress(toAddress)}
+              </a>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    // Render user-provided message with handlebar interpolation
     return (
       <>
         {parsed.map((part) => {
@@ -354,6 +425,7 @@ export function usePayMessage(): UsePayMessageReturn {
       </>
     )
   }, [
+    payMessage,
     parsed,
     appName,
     appUrl,
@@ -361,6 +433,9 @@ export function usePayMessage(): UsePayMessageReturn {
     appDescription,
     tokenInfo,
     toChainId,
+    toAddress,
+    targetAmountUsdFormatted,
+    toAmount,
   ])
 
   return {

package/src/widget/hooks/useSelectedFundMethod.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, type ReactNode } from "react"
+
+interface SelectedFundMethodContextType {
+  selectedFundMethod: string
+  setSelectedFundMethod: (method: string) => void
+}
+
+const SelectedFundMethodContext = createContext<
+  SelectedFundMethodContextType | undefined
+>(undefined)
+
+interface SelectedFundMethodProviderProps {
+  children: ReactNode
+}
+
+export const SelectedFundMethodProvider = ({
+  children,
+}: SelectedFundMethodProviderProps) => {
+  const [selectedFundMethod, setSelectedFundMethod] = useState<string>("wallet")
+
+  const value: SelectedFundMethodContextType = {
+    selectedFundMethod,
+    setSelectedFundMethod,
+  }
+
+  return (
+    <SelectedFundMethodContext.Provider value={value}>
+      {children}
+    </SelectedFundMethodContext.Provider>
+  )
+}
+
+export const useSelectedFundMethod = (): SelectedFundMethodContextType => {
+  const context = useContext(SelectedFundMethodContext)
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedFundMethod must be used within a SelectedFundMethodProvider",
+    )
+  }
+  return context
+}

package/src/widget/hooks/useSelectedRecipient.tsx

@@ -2,8 +2,10 @@ import React, {
   createContext,
   useContext,
   useState,
+  useEffect,
   type ReactNode,
 } from "react"
+import { useAccount } from "wagmi"
 
 interface SelectedRecipientContextType {
   selectedRecipient: string | null
@@ -21,10 +23,18 @@ interface SelectedRecipientProviderProps {
 export const SelectedRecipientProvider: React.FC<
   SelectedRecipientProviderProps
 > = ({ children }) => {
+  const { address } = useAccount()
   const [selectedRecipient, setSelectedRecipient] = useState<string | null>(
     null,
   )
 
+  // Set recipient to address only if address exists and no recipient is selected
+  useEffect(() => {
+    if (address && !selectedRecipient) {
+      setSelectedRecipient(address)
+    }
+  }, [address, selectedRecipient])
+
   return (
     <SelectedRecipientContext.Provider
       value={{

package/src/widget/hooks/useSendForm.ts

@@ -9,6 +9,7 @@ import {
   type WalletClient,
   zeroAddress,
 } from "viem"
+import { useAccount } from "wagmi"
 import { useAPIClient } from "../../apiClient.js"
 import { getChainInfo, useSupportedChains } from "../../chains.js"
 import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
@@ -207,6 +208,10 @@ export function useSendForm({
   checkoutOnHandlers,
   refetchTrigger = 0,
 }: UseSendProps): UseSendReturn {
+  // Get the active wallet ID from wagmi
+  const { connector } = useAccount()
+  const walletId = connector?.id
+
   // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
   const effectiveQuoteProvider = useMemo(() => {
     if (!quoteProvider || quoteProvider === "auto") {
@@ -804,6 +809,9 @@ export function useSendForm({
         nativeTokenPriceUsd = nativePrice?.price?.value ?? 0
       }
 
+      // Disable gasless for sequence-waas wallet
+      const effectiveGasless = walletId === "sequence-waas" ? false : gasless
+
       const options = {
         account,
         originTokenAddress: selectedToken.contractAddress,
@@ -840,13 +848,14 @@ export function useSendForm({
           paymasterUrls?.find(
             (p) => p.chainId.toString() === selectedToken.chainId.toString(),
           )?.url ?? undefined,
-        gasless,
+        gasless: effectiveGasless,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
         quoteProvider: effectiveQuoteProvider,
         mode,
         fundMethod,
         checkoutOnHandlers,
         selectedFeeToken,
+        walletId,
       }
 
       logger.console.log(
@@ -901,6 +910,7 @@ export function useSendForm({
     checkoutOnHandlers,
     mode,
     selectedFeeToken,
+    walletId,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -1194,7 +1204,19 @@ export function useSendForm({
       }
 
       if (!fundMethod || fundMethod === "wallet") {
-        return `Continue on wallet`
+        if (mode === "pay") {
+          return `Pay`
+        } else if (mode === "fund") {
+          return `Fund`
+        } else if (mode === "swap") {
+          return `Swap`
+        } else if (mode === "earn") {
+          return `Deposit`
+        } else if (mode === "receive") {
+          return `Pay`
+        } else {
+          return `Continue on wallet`
+        }
       }
 
       if (mode === "swap") {

package/src/widget/index.css

@@ -39,6 +39,11 @@
   --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Defaults to primary hover */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
+
+  /* Percentage Button Colors - Customizable percentage buttons */
+  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Utility Classes that use CSS Variables */
@@ -110,6 +115,18 @@
   color: var(--trails-hover-text);
 }
 
+.trails-bg-percentage-button {
+  background-color: var(--trails-percentage-button-bg);
+}
+
+.trails-text-percentage-button {
+  color: var(--trails-percentage-button-text);
+}
+
+.trails-hover-percentage-button:hover {
+  background-color: var(--trails-percentage-button-hover-bg);
+}
+
 
 
 /* Font Family Utility Class */
@@ -304,6 +321,11 @@
   /* Shadow */
   --trails-shadow:
     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  /* Percentage Button Colors - Light Mode */
+  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Dark Mode Theme Variables */
@@ -391,6 +413,11 @@
   /* Shadow */
   --trails-shadow:
     0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+
+  /* Percentage Button Colors - Dark Mode */
+  --trails-percentage-button-bg: rgb(55 65 81); /* gray-700 - Dark gray background */
+  --trails-percentage-button-text: rgb(209 213 219); /* gray-300 - Light gray text */
+  --trails-percentage-button-hover-bg: rgb(75 85 99); /* gray-600 - Slightly lighter on hover */
 }
 
 /* Custom Scrollbar Styles */