0xtrails 0.5.0 → 0.6.0

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