0xtrails 0.2.4 → 0.2.6

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"
@@ -83,14 +84,14 @@ export type OnCompleteProps = {
 }
 
 export type UseSendProps = {
-  account: Account
+  account?: Account
   toAmount?: string
   toRecipient?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
   refundAddress?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (quote: PrepareSendQuote) => void
@@ -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") {
@@ -682,6 +687,7 @@ export function useSendForm({
   const getQuote = useCallback(async () => {
     // Only get quote if all required inputs are present
     if (
+      !account ||
       !amount ||
       !destinationTokenAddress ||
       !isValidRecipient ||
@@ -804,6 +810,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 +849,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 +911,7 @@ export function useSendForm({
     checkoutOnHandlers,
     mode,
     selectedFeeToken,
+    walletId,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -935,6 +946,7 @@ export function useSendForm({
     selectedToken?.chainId,
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
+    recipient, // Add recipient to trigger quote re-fetch when it changes
     // selectedFeeToken is passed to send() at execution time, not needed here
   ])
 
@@ -948,7 +960,8 @@ export function useSendForm({
   }, [prepareSendResult, toAmountFormatted])
 
   const quotedDestinationAmountDisplay = useMemo(() => {
-    return formatAmountDisplay(quotedDestinationAmount || "0")
+    const formattedAmount = formatAmount(quotedDestinationAmount || 0)
+    return Number(formattedAmount) === 0 ? "0" : formattedAmount
   }, [quotedDestinationAmount])
 
   // Set raw fee options in the hook whenever prepareSendResult changes
@@ -1148,6 +1161,7 @@ export function useSendForm({
 
   // Get button text based on recipient and calldata
   const buttonText = useMemo(() => {
+    if (!account?.address) return "Connect your wallet"
     if (!selectedToken) return "Select a token"
     if (!amount) return "Enter an amount"
     if (!selectedDestToken?.symbol) return "Select a token"
@@ -1194,7 +1208,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") {
@@ -1229,7 +1255,7 @@ export function useSendForm({
     amount,
     isValidRecipient,
     recipient,
-    account.address,
+    account?.address,
     selectedDestToken?.symbol,
     isWaitingForWalletConfirm,
     isSubmitting,

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 */