0xtrails 0.4.3 → 0.6.0

package/src/widget/components/Pay.tsx

@@ -194,9 +194,9 @@ export const Pay: React.FC<PayProps> = ({
     isValidCustomToken,
     isSenderContractOnOrigin,
     isSenderContractOnDestination,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
+    processedFeeOptions,
+    selectedFeeOption,
+    setSelectedFeeOption,
   } = useSendForm({
     account,
     toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
@@ -672,7 +672,7 @@ export const Pay: React.FC<PayProps> = ({
           {/* Payment Request Header */}
           <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
             <div className="flex justify-start">
-              <div className="flex items-center font-medium trails-text-primary text-sm whitespace-nowrap overflow-hidden min-w-full">
+              <div className="flex items-center font-medium trails-text-primary text-sm flex-wrap whitespace-break-spaces break-all min-w-full">
                 {payMessage}
               </div>
             </div>
@@ -1019,13 +1019,20 @@ export const Pay: React.FC<PayProps> = ({
       ) : null}
 
       {/* Fee Options */}
-      <FeeOptions
-        feeOptions={feeOptions || []}
-        selectedFeeToken={selectedFeeToken}
-        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
-        chainId={originToken?.chainId}
-        isRefetching={isLoadingQuote}
-      />
+      {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+        <FeeOptions
+          processedFeeOptions={processedFeeOptions}
+          selectedFeeOption={selectedFeeOption}
+          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
+          chainId={originToken?.chainId}
+          isRefetching={isLoadingQuote}
+          originTokenInfo={{
+            originToken: originToken!,
+            originTokenBalance: originToken?.balance ?? "0",
+            originTokenAmount: tokenAmountForBackend ?? "0",
+          }}
+        />
+      )}
 
       {/* Quote Details */}
       {prepareSendQuote && (

package/src/widget/components/PoolDeposit.tsx

@@ -39,6 +39,7 @@ import { FeeOptions } from "./FeeOptions.js"
 import { generateAaveDepositCalldata } from "../../aave.js"
 import { generateMorphoDepositCalldata } from "../../morpho.js"
 import { TRAILS_ROUTER_PLACEHOLDER_AMOUNT } from "../../trailsRouter.js"
+import { ScreenHeader } from "./ScreenHeader.js"
 
 interface PoolDepositProps {
   account?: Account
@@ -180,9 +181,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     isSubmitting,
     buttonText,
     isValidRecipient,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
+    processedFeeOptions,
+    selectedFeeOption,
+    setSelectedFeeOption,
   } = useSendForm({
     account,
     toAmount: undefined,
@@ -320,6 +321,11 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   if (showOriginTokenSelector) {
     return (
       <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowOriginTokenSelector(false)}
+          headerContent="Select Token"
+          headerContentAlign="left"
+        />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
           onError={onError}
@@ -583,13 +589,20 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
       ) : null}
 
       {/* Fee Options */}
-      <FeeOptions
-        feeOptions={feeOptions || []}
-        selectedFeeToken={selectedFeeToken as any}
-        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
-        chainId={originToken?.chainId}
-        isRefetching={isLoadingQuote}
-      />
+      {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+        <FeeOptions
+          processedFeeOptions={processedFeeOptions}
+          selectedFeeOption={selectedFeeOption as any}
+          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
+          chainId={originToken?.chainId}
+          isRefetching={isLoadingQuote}
+          originTokenInfo={{
+            originToken: originToken!,
+            originTokenBalance: originToken?.balance ?? "0",
+            originTokenAmount: amount ?? "0",
+          }}
+        />
+      )}
 
       {/* Quote Details */}
       {prepareSendQuote && (

package/src/widget/components/QRCodeDeposit.tsx

@@ -2,35 +2,68 @@ import { TokenImage } from "./TokenImage.js"
 import { ChainImage } from "./ChainImage.js"
 import { ExternalLink } from "lucide-react"
 import type React from "react"
-import { useState, useMemo } from "react"
+import { useMemo } from "react"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { QrCode } from "./QrCode.js"
-import { formatUnits } from "viem"
+import { formatUnits, getAddress, zeroAddress } from "viem"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
 
 interface QRCodeDepositProps {
   onBack?: () => void
+  onChangeWallet?: () => void
   quote?: PrepareSendQuote | null
+  use681QrCode?: boolean
+  selectedWalletId?: string | null
+  walletOptions?: QRCodeWalletOption[]
 }
 
 export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
   onBack,
+  onChangeWallet,
   quote,
+  use681QrCode,
+  selectedWalletId,
+  walletOptions,
 }) => {
-  const [useSimpleQrCode, setUseSimpleQrCode] = useState(true)
+  const defaultQrCodeWallets = useQRCodeWallets()
+  const defaultWalletOptions = walletOptions || defaultQrCodeWallets
+  const selectedWalletOption =
+    defaultWalletOptions.find((option) => option.id === selectedWalletId) ??
+    defaultWalletOptions[0]
+
+  const shouldUseEip681 =
+    use681QrCode ?? selectedWalletOption?.usesEip681 ?? true
 
   const eip631Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originDepositAddress}@${quote.originChain.id}`
+    const depositAddress = getAddress(quote.originDepositAddress)
+    return `ethereum:${depositAddress}@${quote.originChain.id}`
   }, [quote])
 
   const eip681Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originToken.contractAddress}@${quote.originChain.id}/transfer?address=${quote.originDepositAddress}&uint256=${quote.originAmount}`
+
+    const tokenAddress = getAddress(quote.originToken.contractAddress)
+    const depositAddress = getAddress(quote.originDepositAddress)
+
+    if (tokenAddress === zeroAddress) {
+      return `ethereum:${depositAddress}@${quote.originChain.id}?value=${quote.originAmount}`
+    } else {
+      return `ethereum:${tokenAddress}@${quote.originChain.id}/transfer?address=${depositAddress}&uint256=${quote.originAmount}`
+    }
   }, [quote])
 
+  const qrCodeUrl = useMemo(() => {
+    if (!quote) return ""
+    if (shouldUseEip681) return eip681Url
+    return eip631Url
+  }, [quote, shouldUseEip681, eip631Url, eip681Url])
+
+  const walletIcon = selectedWalletOption?.icon
+
   return (
     <div className="space-y-6">
       <ScreenHeader
@@ -48,36 +81,23 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
           </p>
         </div>
 
-        {/* QR Code Section - Always Visible */}
+        {/* QR Code Section */}
         <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-          <div className="flex justify-center">
-            <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-3 text-center">
+            {onChangeWallet && use681QrCode === undefined && (
               <button
                 type="button"
-                onClick={() => setUseSimpleQrCode(!useSimpleQrCode)}
-                className="cursor-pointer transition-opacity hover:opacity-80"
-                title={
-                  useSimpleQrCode
-                    ? `Click to show detailed transfer QR code (EIP-681). Current URL: ${eip631Url}`
-                    : `Click to show simple address QR code (EIP-631). Current URL: ${eip681Url}`
-                }
+                onClick={onChangeWallet}
+                className="text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors cursor-pointer"
               >
-                <QrCode
-                  url={useSimpleQrCode ? eip631Url : eip681Url}
-                  size={300}
-                />
+                Choose a different wallet
               </button>
-              {!useSimpleQrCode && (
-                <a
-                  href="https://eips.ethereum.org/EIPS/eip-681"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-2 flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:underline transition-all"
-                >
-                  EIP-681
-                  <ExternalLink className="w-3 h-3" />
-                </a>
-              )}
+            )}
+          </div>
+
+          <div className="flex justify-center">
+            <div className="flex flex-col items-center">
+              <QrCode url={qrCodeUrl} size={300} imageUrl={walletIcon} />
             </div>
           </div>
 

package/src/widget/components/QRCodeWalletSelect.tsx

@@ -0,0 +1,77 @@
+import type React from "react"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
+
+interface QRCodeWalletSelectProps {
+  onBack?: () => void
+  onSelect: (walletId: string) => void
+  selectedWalletId?: string | null
+  walletOptions?: QRCodeWalletOption[]
+  title?: string
+  disabled?: boolean
+}
+
+export const QRCodeWalletSelect: React.FC<QRCodeWalletSelectProps> = ({
+  onBack,
+  onSelect,
+  selectedWalletId,
+  walletOptions,
+  title = "Which wallet will scan the QR code?",
+  disabled = false,
+}) => {
+  const defaultQrCodeWallets = useQRCodeWallets()
+  const defaultWalletOptions = walletOptions || defaultQrCodeWallets
+  return (
+    <div className="space-y-6">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Deposit"
+        headerContentAlign="left"
+      />
+
+      <div className="space-y-6">
+        <div className="text-center px-4">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            {title}
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          {defaultWalletOptions.map((wallet) => {
+            const isSelected = wallet.id === selectedWalletId
+            return (
+              <button
+                key={wallet.id}
+                type="button"
+                onClick={() => !disabled && onSelect(wallet.id)}
+                disabled={disabled}
+                className={`flex flex-col items-center justify-center gap-3 rounded-xl border px-4 py-6 text-center transition-all duration-200 min-h-[120px] ${
+                  isSelected
+                    ? "border-blue-500 bg-blue-50 shadow-md dark:border-blue-400 dark:bg-blue-900/30"
+                    : "border-gray-200 bg-white hover:bg-gray-50 hover:shadow-sm active:scale-[0.98] dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800"
+                } ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+              >
+                {wallet.icon ? (
+                  <img
+                    src={wallet.icon}
+                    alt={wallet.label}
+                    className="h-12 w-12 rounded-full object-contain shrink-0"
+                  />
+                ) : (
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-200 text-sm font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-200 shrink-0">
+                    {wallet.label.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                  {wallet.label}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QRCodeWalletSelect