0xtrails 0.13.2 → 0.14.0

package/src/widget/components/PaymentMethods.tsx

@@ -1,198 +0,0 @@
-import React from "react"
-import { QrCode, ArrowLeftRight, ChevronRight } from "lucide-react"
-import { useSwitchAccount } from "wagmi"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { ConnectedWallets } from "./ConnectedWallets.js"
-import { useConnections } from "wagmi"
-import { logger } from "../../logger.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import {
-  type PaymentMethod,
-  useOnRampPaymentMethods,
-} from "../hooks/useOnRampPaymentMethods.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-
-export interface PaymentMethodsProps {
-  onBack?: () => void
-  onSelectWalletConnect: () => void
-  onSelectConnectedAccount: () => void
-  onSelectQrCode: () => void
-}
-
-const PaymentMethods: React.FC<PaymentMethodsProps> = ({
-  onBack,
-  onSelectQrCode,
-}) => {
-  const { switchAccount } = useSwitchAccount()
-  const connections = useConnections()
-  const { mode, goHome } = useViewManager()
-  const { setSelectedFundMethod, setPaymentMethod } = useSelectedFundMethod()
-  const { fundOptions } = useWidgetProps()
-  const hideWallets = fundOptions?.hideWallets ?? []
-
-  // Only call useOnRampPaymentMethods if onramp is enabled
-  const { paymentMethods, isLoading, error } = useOnRampPaymentMethods({
-    enabled: true,
-  })
-
-  // Handle wallet selection - switch to the selected wallet and go to home
-  const handleWalletSelect = async (
-    walletAddress: string,
-    walletConnector: unknown,
-  ) => {
-    try {
-      // Find the connection for this wallet
-      const connection = connections.find(
-        (conn) =>
-          conn.accounts.includes(walletAddress as `0x${string}`) &&
-          conn.connector.id === (walletConnector as { id: string }).id,
-      )
-
-      if (connection) {
-        switchAccount({
-          connector: connection.connector,
-        })
-        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
-
-        // Set funding method to "wallet" since user selected a wallet
-        setSelectedFundMethod("wallet")
-
-        // Navigate to home screen which will redirect to the appropriate mode screen
-        goHome()
-      }
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Payment methods"
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-
-      <div className="flex-1">
-        <div className="space-y-4">
-          {/* Connected Wallets Section */}
-          <ConnectedWallets
-            showConnectNewWallet={true}
-            onWalletSelect={handleWalletSelect}
-            backScreen="payment-methods"
-            hiddenWallets={hideWallets as string[]}
-          />
-
-          {/* Divider */}
-          <div className="relative flex items-center justify-center">
-            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
-            <span className="px-4 text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900">
-              or
-            </span>
-            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
-          </div>
-
-          {/* Additional Funding Options */}
-          <div className="trails-border-radius-container border trails-border-primary">
-            {/* Payment Method Buttons - Only show if onramp is enabled AND mode is not "pay" */}
-            {mode !== "pay" && (
-              <>
-                {isLoading ? (
-                  <>
-                    <div className="border-b border-gray-200 dark:border-gray-700"></div>
-                    <div className="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
-                      Loading payment methods...
-                    </div>
-                  </>
-                ) : error ? (
-                  <>
-                    <div className="border-b border-gray-200 dark:border-gray-700"></div>
-                    <div className="px-3 py-4 text-sm text-red-500 dark:text-red-400">
-                      Failed to load payment methods
-                    </div>
-                  </>
-                ) : (
-                  paymentMethods.map(
-                    (method: PaymentMethod, _index: number) => (
-                      <React.Fragment key={method.paymentMethod}>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setSelectedFundMethod("onramp-meld")
-                            setPaymentMethod({
-                              id: method.paymentMethod,
-                              name: method.name,
-                            })
-                            goHome()
-                          }}
-                          className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
-                        >
-                          <div className="flex items-center gap-3">
-                            <img
-                              src={
-                                method.logos?.light || method.logos?.dark || ""
-                              }
-                              alt={method.name}
-                              className="w-6 h-6"
-                            />
-                            <span className="text-sm font-bold">
-                              {method.name}
-                            </span>
-                          </div>
-                          <ChevronRight className="w-5 h-5 text-gray-400" />
-                        </button>
-                      </React.Fragment>
-                    ),
-                  )
-                )}
-
-                <div className="border-b border-gray-200 dark:border-gray-700"></div>
-
-                <button
-                  type="button"
-                  onClick={() => {
-                    // Set fund method to "exchange" so useSendForm knows to use onramp
-                    setSelectedFundMethod("onramp-mesh")
-                    // Navigate to home screen so user can fill out the form
-                    // When they click "Continue to Exchange", it will navigate to onramp screen
-                    goHome()
-                  }}
-                  className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
-                >
-                  <div className="flex items-center gap-3">
-                    <ArrowLeftRight className="w-4 h-4" />
-                    <span className="text-sm font-bold">
-                      Send from Exchange
-                    </span>
-                  </div>
-                  <ChevronRight className="w-5 h-5 text-gray-400" />
-                </button>
-              </>
-            )}
-
-            {/* QR Code - moved to bottom */}
-            {mode !== "pay" && (
-              <div className="border-b border-gray-200 dark:border-gray-700"></div>
-            )}
-
-            <button
-              type="button"
-              onClick={onSelectQrCode}
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
-            >
-              <div className="flex items-center gap-3">
-                <QrCode className="w-4 h-4" />
-                <span className="text-sm font-bold">Pay with QR Code</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PaymentMethods

package/src/widget/components/PercentageMaxButtons.tsx

@@ -1,112 +0,0 @@
-import type React from "react"
-import { formatUnits } from "viem"
-import {
-  calculateMaxNativeAmount,
-  getDefaultGasCostEstimate,
-} from "../../estimate.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { isValidNumber } from "../../utils/validation.js"
-
-interface PercentageMaxButtonsProps {
-  userBalance: string | undefined
-  userBalanceRaw: string
-  decimals: number
-  isNativeToken: boolean
-  gasCostFormatted?: string
-  chainId?: number
-  onAmountSelect: (amount: string) => void
-  className?: string
-}
-
-export const PercentageMaxButtons: React.FC<PercentageMaxButtonsProps> = ({
-  userBalance,
-  userBalanceRaw,
-  decimals,
-  isNativeToken,
-  gasCostFormatted,
-  chainId,
-  onAmountSelect,
-  className = "",
-}) => {
-  const { trackClick } = useClickTracking()
-
-  // Don't render if no balance
-  if (!userBalance) return null
-
-  const handlePercentageClick = (percentage: number) => {
-    trackClick({
-      component: "PercentageMaxButtons",
-      action: "select_percentage",
-      label: `${percentage}%`,
-      value: percentage,
-      metadata: {
-        percentage: percentage.toString(),
-        userBalance,
-        isNativeToken: isNativeToken.toString(),
-        chainId: chainId?.toString(),
-      },
-    })
-
-    const balance = parseFloat(userBalance)
-    if (!isValidNumber(balance)) return
-
-    const amount = (balance * percentage) / 100
-    onAmountSelect(amount.toFixed(6))
-  }
-
-  const handleMaxClick = async () => {
-    trackClick({
-      component: "PercentageMaxButtons",
-      action: "select_max",
-      metadata: {
-        userBalance,
-        isNativeToken: isNativeToken.toString(),
-        chainId: chainId?.toString(),
-        gasCostFormatted,
-      },
-    })
-
-    if (isNativeToken) {
-      // For native tokens, subtract gas cost
-      // Priority: 1) Use actual gas cost from quote, 2) Fetch real gas price, 3) Fallback to 1% of balance
-      const effectiveGasCost =
-        gasCostFormatted && gasCostFormatted !== "0"
-          ? gasCostFormatted
-          : await getDefaultGasCostEstimate(userBalance, chainId)
-      const maxAmount = calculateMaxNativeAmount(userBalance, effectiveGasCost)
-      onAmountSelect(maxAmount)
-    } else {
-      // For ERC20 tokens, use full precision balance to avoid rounding errors
-      const fullPrecisionBalance = formatUnits(BigInt(userBalanceRaw), decimals)
-      onAmountSelect(fullPrecisionBalance)
-    }
-  }
-
-  return (
-    <div
-      className={`flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${className}`}
-    >
-      <button
-        type="button"
-        onClick={() => handlePercentageClick(20)}
-        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-      >
-        20%
-      </button>
-      <button
-        type="button"
-        onClick={() => handlePercentageClick(50)}
-        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-      >
-        50%
-      </button>
-      <button
-        type="button"
-        onClick={handleMaxClick}
-        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-      >
-        Max
-      </button>
-    </div>
-  )
-}