0xtrails 0.12.0 → 0.12.2

package/src/widget/components/FundMethods.tsx

@@ -1,12 +1,5 @@
 import type React from "react"
-import {
-  ChevronRight,
-  CreditCard,
-  Wallet,
-  Building2,
-  Smartphone,
-  ZapIcon,
-} from "lucide-react"
+import { ChevronRight, CreditCard, Wallet, ZapIcon } from "lucide-react"
 import { useAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
@@ -20,6 +13,8 @@ import { truncateAddress } from "../../utils/address.js"
 import { useResolveEns } from "../../ens.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import type { FundMethod } from "../../transactionIntent/types.js"
+import type { FundMethodListOption } from "../widget.js"
 
 export interface FundMethodsProps {
   headerContent?: string
@@ -56,6 +51,8 @@ const FundMethods: React.FC<FundMethodsProps> = ({
   const { wallets: allWallets } = useWallets()
   const { fundOptions } = useWidgetProps()
   const hideWallets = fundOptions?.hideWallets ?? []
+  const fundMethodsList = fundOptions?.fundMethodsList
+  const hideUnlistedFundMethods = fundOptions?.hideUnlistedFundMethods ?? false
 
   // Check if onramp is enabled based on mode
   const isOnrampEnabled = mode === "swap" || mode === "fund"
@@ -109,57 +106,118 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
   const showWalletInline = activeConnection && !isActiveWalletHidden
 
-  const displayApplePay = false
-  const displayMeldExchange = false // Meld Exchange remains disabled
   const displayMeshExchange = !!onramp // MeshConnect Exchange enabled when onramp prop is provided
 
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        headerContent={headerContent || "Choose a funding method"}
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
+  const fundMethodAliases: Record<FundMethodListOption, FundMethod> = {
+    "connected-wallet": "wallet",
+    "crypto-transfer": "direct-transfer",
+    "cc-onramp": "onramp-meld",
+    "exchange-onramp": "onramp-mesh",
+  }
 
-      <div className="flex-1">
-        <div className="flex flex-col gap-1">
-          {/* Connected Wallet Option */}
-          {showWalletInline ? (
-            <div
-              onClick={() => {
-                setSelectedFundMethod("wallet")
-                if (onSelectConnectedAccount) {
-                  onSelectConnectedAccount()
-                }
-              }}
-              className={`w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors rounded-xl trails-hover-bg ${
-                selectedFundMethod === "wallet"
-                  ? "bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
-                  : ""
-              }`}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault()
-                  setSelectedFundMethod("wallet")
-                  if (onSelectConnectedAccount) {
-                    onSelectConnectedAccount()
+  const defaultFundMethodsOrder: FundMethod[] = [
+    "wallet",
+    "onramp-meld",
+    "direct-transfer",
+    "onramp-mesh",
+  ]
+
+  const validFundMethods = new Set<FundMethod>([
+    "wallet",
+    "direct-transfer",
+    "onramp-mesh",
+    "onramp-meld",
+  ])
+
+  const mappedConfiguredOrder =
+    fundMethodsList?.map((method) => {
+      const key = method as FundMethodListOption
+      return fundMethodAliases[key]
+    }) ?? []
+
+  const listedInternalSet = new Set<FundMethod>(
+    mappedConfiguredOrder.filter((m): m is FundMethod =>
+      validFundMethods.has(m),
+    ),
+  )
+
+  // Empty list: always show all methods (ignore hideUnlistedFundMethods)
+  const orderedFundMethods: FundMethod[] = !fundMethodsList?.length
+    ? defaultFundMethodsOrder
+    : hideUnlistedFundMethods
+      ? Array.from(
+          new Set(
+            mappedConfiguredOrder.filter((method): method is FundMethod =>
+              validFundMethods.has(method),
+            ),
+          ),
+        )
+      : [
+          ...mappedConfiguredOrder.filter((m): m is FundMethod =>
+            validFundMethods.has(m),
+          ),
+          ...defaultFundMethodsOrder.filter((m) => !listedInternalSet.has(m)),
+        ]
+
+  const isUnlisted = (method: FundMethod): boolean =>
+    !hideUnlistedFundMethods &&
+    listedInternalSet.size > 0 &&
+    !listedInternalSet.has(method)
+
+  const renderFundMethod = (method: FundMethod) => {
+    const forceDisabled = isUnlisted(method)
+    if (method === "wallet") {
+      if (showWalletInline) {
+        return (
+          <div
+            key="wallet-inline"
+            onClick={
+              forceDisabled
+                ? undefined
+                : () => {
+                    setSelectedFundMethod("wallet")
+                    if (onSelectConnectedAccount) {
+                      onSelectConnectedAccount()
+                    }
                   }
-                }
-              }}
-            >
-              <div className="flex items-center gap-3 flex-1">
-                <div className="flex items-center justify-center shrink-0">
-                  <AddressWalletIcon
-                    size={30}
-                    walletAddress={activeConnection?.address as `0x${string}`}
-                  />
-                </div>
-                <span className="text-sm font-medium">
-                  {activeConnection?.address
-                    ? ensName ||
-                      `${truncateAddress(activeConnection.address)} wallet`
-                    : ""}{" "}
-                </span>
+            }
+            onKeyDown={
+              forceDisabled
+                ? undefined
+                : (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      setSelectedFundMethod("wallet")
+                      if (onSelectConnectedAccount) {
+                        onSelectConnectedAccount()
+                      }
+                    }
+                  }
+            }
+            className={`w-full text-left px-4 py-3 flex items-center justify-between transition-colors rounded-xl trails-hover-bg ${
+              forceDisabled
+                ? disabledClassname
+                : `cursor-pointer ${
+                    selectedFundMethod === "wallet"
+                      ? "bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
+                      : ""
+                  }`
+            }`}
+          >
+            <div className="flex items-center gap-3 flex-1">
+              <div className="flex items-center justify-center shrink-0">
+                <AddressWalletIcon
+                  size={30}
+                  walletAddress={activeConnection?.address as `0x${string}`}
+                />
+              </div>
+              <span className="text-sm font-medium">
+                {activeConnection?.address
+                  ? ensName ||
+                    `${truncateAddress(activeConnection.address)} wallet`
+                  : ""}{" "}
+              </span>
+              {!forceDisabled && (
                 <button
                   type="button"
                   onClick={(e) => {
@@ -175,152 +233,157 @@ const FundMethods: React.FC<FundMethodsProps> = ({
                     className="w-5 h-5 dark:invert dark:brightness-150"
                   />
                 </button>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400 dark:text-white" />
+              )}
             </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => {
-                setCurrentScreen(
-                  activeConnection ? "select-funding-wallet" : "wallet-list",
-                )
-              }}
-              className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-            >
-              <div className="flex items-center gap-3">
-                <Wallet className="w-8 h-8 text-gray-700 dark:text-gray-200" />
-                <span className="text-sm font-medium">Crypto wallet</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
+            <ChevronRight className="w-5 h-5 text-gray-400 dark:text-white" />
+          </div>
+        )
+      }
 
-          {isOnrampEnabled && (
-            <button
-              type="button"
-              disabled={!activeConnection}
-              onClick={() => {
-                setSelectedFundMethod("onramp-meld")
-                setIsMeldOnRamp(true)
-                setPaymentMethod({
-                  id: "CREDIT_DEBIT_CARD",
-                  name: "Credit/Debit Card",
-                })
-                if (onSelectOnrampMeld) {
-                  onSelectOnrampMeld()
+      return (
+        <button
+          key="wallet-button"
+          type="button"
+          disabled={forceDisabled}
+          onClick={
+            forceDisabled
+              ? undefined
+              : () => {
+                  setCurrentScreen(
+                    activeConnection ? "select-funding-wallet" : "wallet-list",
+                  )
                 }
-              }}
-              className={
-                activeConnection
-                  ? `w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl`
-                  : disabledClassname
-              }
-            >
-              <div className="flex items-center gap-3">
-                <CreditCard className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-                <span className="text-sm font-medium">Credit/Debit Card</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
+          }
+          className={
+            forceDisabled
+              ? disabledClassname
+              : "w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
+          }
+        >
+          <div className="flex items-center gap-3">
+            <Wallet className="w-8 h-8 text-gray-700 dark:text-gray-200" />
+            <span className="text-sm font-medium">Connected wallet</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-gray-400" />
+        </button>
+      )
+    }
 
-          {isOnrampEnabled && displayApplePay && (
-            <button
-              type="button"
-              onClick={() => {
-                setSelectedFundMethod("onramp-meld")
-                setIsMeldOnRamp(true)
-                setPaymentMethod({
-                  id: "APPLE_PAY",
-                  name: "Apple Pay",
-                })
-                if (onSelectOnrampMeld) {
-                  onSelectOnrampMeld()
+    if (method === "onramp-meld") {
+      if (!isOnrampEnabled) return null
+      const disabled = forceDisabled || !activeConnection
+      return (
+        <button
+          key="onramp-meld"
+          type="button"
+          disabled={disabled}
+          onClick={
+            disabled
+              ? undefined
+              : () => {
+                  setSelectedFundMethod("onramp-meld")
+                  setIsMeldOnRamp(true)
+                  setPaymentMethod({
+                    id: "CREDIT_DEBIT_CARD",
+                    name: "Credit/Debit Card",
+                  })
+                  if (onSelectOnrampMeld) {
+                    onSelectOnrampMeld()
+                  }
                 }
-              }}
-              className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-            >
-              <div className="flex items-center gap-3">
-                <Smartphone className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-                <span className="text-sm font-medium">Apple Pay</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
+          }
+          className={
+            disabled
+              ? disabledClassname
+              : "w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
+          }
+        >
+          <div className="flex items-center gap-3">
+            <CreditCard className="w-8 h-8 text-gray-700 dark:text-gray-100" />
+            <span className="text-sm font-medium">Credit/Debit Card</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-gray-400" />
+        </button>
+      )
+    }
+
+    if (method === "direct-transfer") {
+      const disabled = forceDisabled || !activeConnection
+      return (
+        <button
+          key="direct-transfer"
+          type="button"
+          disabled={disabled}
+          onClick={disabled ? undefined : onSelectTransferCrypto}
+          className={
+            disabled
+              ? disabledClassname
+              : "w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
+          }
+        >
+          <div className="flex items-center gap-3">
+            <ZapIcon className="w-8 h-8 text-gray-700 dark:text-gray-100" />
+            <span className="text-sm font-medium">Crypto transfer</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-gray-400" />
+        </button>
+      )
+    }
 
-          {/* Meld Exchange - disabled for now */}
-          {isOnrampEnabled && displayMeldExchange && (
-            <button
-              type="button"
-              onClick={() => {
-                setSelectedFundMethod("onramp-meld")
-                setIsMeldOnRamp(true)
-                setPaymentMethod({
-                  id: "EXCHANGE",
-                  name: "Exchange",
-                })
-                if (onSelectOnrampMeld) {
-                  onSelectOnrampMeld()
+    if (method === "onramp-mesh") {
+      if (mode === "pay") return null
+      const disabled = forceDisabled || !displayMeshExchange
+      return (
+        <button
+          key="onramp-mesh"
+          type="button"
+          disabled={disabled}
+          title={
+            displayMeshExchange && !forceDisabled ? undefined : "Coming soon"
+          }
+          onClick={
+            disabled
+              ? undefined
+              : () => {
+                  setSelectedFundMethod("onramp-mesh")
+                  if (onSelectOnrampExchange) {
+                    onSelectOnrampExchange()
+                  }
                 }
-              }}
-              className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-            >
-              <div className="flex items-center gap-3">
-                <Building2 className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-                <span className="text-sm font-medium">Exchange (Meld)</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
+          }
+          className={
+            disabled
+              ? "w-full text-left px-4 py-3 flex items-center justify-between cursor-not-allowed transition-colors trails-hover-bg rounded-xl opacity-50"
+              : "w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
+          }
+        >
+          <div className="flex items-center gap-3">
+            <img
+              src={ExchangeIcon}
+              alt="Exchange"
+              className="w-8 h-8 text-gray-700 dark:text-gray-100"
+            />
+            <span className="text-sm font-medium">From Exchange</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-gray-400" />
+        </button>
+      )
+    }
 
-          {/* QR Code */}
-          <button
-            type="button"
-            disabled={!activeConnection}
-            onClick={onSelectTransferCrypto}
-            className={
-              activeConnection
-                ? `w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl`
-                : disabledClassname
-            }
-          >
-            <div className="flex items-center gap-3">
-              <ZapIcon className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-              <span className="text-sm font-medium">Direct transfer</span>
-            </div>
-            <ChevronRight className="w-5 h-5 text-gray-400" />
-          </button>
+    return null
+  }
 
-          {/* From Exchange - MeshConnect - enabled when onramp prop is provided */}
-          {mode !== "pay" && (
-            <button
-              type="button"
-              disabled={!displayMeshExchange}
-              title={displayMeshExchange ? undefined : "Coming soon"}
-              onClick={() => {
-                setSelectedFundMethod("onramp-mesh")
-                if (onSelectOnrampExchange) {
-                  onSelectOnrampExchange()
-                }
-              }}
-              className={
-                displayMeshExchange
-                  ? "w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-                  : "w-full text-left px-4 py-3 flex items-center justify-between cursor-not-allowed transition-colors trails-hover-bg rounded-xl opacity-50"
-              }
-            >
-              <div className="flex items-center gap-3">
-                <img
-                  src={ExchangeIcon}
-                  alt="Exchange"
-                  className="w-8 h-8 dark:invert dark:brightness-150"
-                />
-                <span className="text-sm font-medium">From Exchange</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        headerContent={headerContent || "Choose a funding method"}
+        headerContentAlign="left"
+        rightSideContent={<div className="w-9" />}
+      />
+
+      <div className="flex-1">
+        <div className="flex flex-col gap-1">
+          {orderedFundMethods.map((method) => renderFundMethod(method))}
         </div>
       </div>
     </div>

package/src/widget/components/HookModalContent.tsx

@@ -19,6 +19,7 @@ import Receipt from "./Receipt.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useRecentTokens } from "../hooks/useRecentTokens.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { invalidateTokenBalancesCache } from "../../query/balance.queries.js"
 
 type HookModalScreen =
   | "select-origin-token"
@@ -220,6 +221,9 @@ export function HookModalContent() {
     // Invalidate quote cache to ensure fresh quote on next transaction
     queryClient.invalidateQueries({ queryKey: ["prepareSend"] })
 
+    // Invalidate balance cache to ensure fresh balances after completed swap
+    invalidateTokenBalancesCache()
+
     // Call custom callback if provided
     if (onReceiptAction) {
       onReceiptAction()