0xtrails 0.1.2 → 0.1.4

package/src/widget/components/Receive.tsx

@@ -0,0 +1,146 @@
+import type React from "react"
+import { useMemo } from "react"
+import { QrCode } from "./QrCode.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { getExplorerUrlForAddress } from "../../explorer.js"
+import { ExternalLink } from "lucide-react"
+import { truncateAddress } from "../../address.js"
+import { useResolveEnsName } from "../../ens.js"
+
+interface ReceiveProps {
+  accountAddress: string
+  onBack: () => void
+  isConnected?: boolean
+  onConnectWallet?: () => void
+  onPay?: () => void
+  toChainId?: number
+}
+
+export const Receive: React.FC<ReceiveProps> = ({
+  accountAddress,
+  onBack,
+  isConnected = false,
+  onConnectWallet,
+  onPay,
+  toChainId,
+}) => {
+  // Use the provided address directly
+  const resolvedAddress = accountAddress
+
+  // Resolve ENS name from the address
+  const { ensName } = useResolveEnsName({
+    address: accountAddress,
+  })
+
+  // Generate QR code URL for the address
+  const qrCodeUrl = useMemo(() => {
+    if (!resolvedAddress) return ""
+    return `ethereum:${resolvedAddress}`
+  }, [resolvedAddress])
+
+  // Check if accountAddress is provided
+  if (!accountAddress) {
+    return (
+      <div className="space-y-6">
+        <ScreenHeader
+          onBack={onBack}
+          headerContent="Receive"
+          headerContentAlign="center"
+        />
+
+        <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+          <div className="text-center p-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/50 rounded-lg">
+            <div className="flex items-center justify-center space-x-2 text-amber-600 dark:text-amber-400">
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+              <span className="font-medium">Account address is required</span>
+            </div>
+            <p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
+              Please provide an account address as <code>toAddress</code> to
+              generate the receive QR code.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
+        headerContentAlign="center"
+      />
+
+      <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">
+        {/* 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">
+              <QrCode url={qrCodeUrl} size={300} />
+            </div>
+          </div>
+
+          {/* Address Display */}
+          <div className="flex flex-col items-center justify-center gap-1 pt-2">
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                Address:
+              </span>
+              <a
+                href={getExplorerUrlForAddress({
+                  address: resolvedAddress,
+                  chainId: toChainId || 1,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
+              >
+                <span>{truncateAddress(resolvedAddress)}</span>
+                <ExternalLink className="w-3 h-3" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Connect Wallet Button - Only show when not connected */}
+        {!isConnected && onConnectWallet && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onConnectWallet}
+              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
+            >
+              Connect Wallet
+            </button>
+          </div>
+        )}
+
+        {/* Pay Button - Only show when connected */}
+        {isConnected && onPay && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onPay}
+              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-blue-500 hover:bg-blue-600 text-white"
+            >
+              Pay
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/widget/components/RecentTokens.tsx

@@ -27,7 +27,7 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
 
   return (
     <div className="mb-0">
-      <h3 className="text-xs font-medium text-gray-500 dark:text-gray-500">
+      <h3 className="text-xs font-medium text-gray-500 dark:text-gray-500 text-left">
         Recently Used
       </h3>
       <div className="flex gap-2 overflow-x-auto pb-1 trails-scrollbar">

package/src/widget/components/RefundAddressInput.tsx

@@ -0,0 +1,149 @@
+import { ChevronDown, ChevronRight } from "lucide-react"
+import type React from "react"
+import { useState, useEffect } from "react"
+import type { Account } from "viem"
+import { isAddress } from "viem"
+import { TruncatedAddress } from "./TruncatedAddress.js"
+import { useResolveEnsAddress } from "../../ens.js"
+
+interface RefundAddressInputProps {
+  account: Account
+  isOpen: boolean
+  onToggle: () => void
+  refundAddress: string
+  onRefundAddressChange: (address: string) => void
+  chainId: number
+}
+
+export const RefundAddressInput: React.FC<RefundAddressInputProps> = ({
+  account,
+  isOpen,
+  onToggle,
+  refundAddress,
+  onRefundAddressChange,
+  chainId,
+}) => {
+  const [inputValue, setInputValue] = useState(refundAddress)
+
+  // Resolve ENS names to addresses
+  const { ensAddress, isLoading } = useResolveEnsAddress({
+    textInput: inputValue,
+  })
+
+  // Update the refund address when ENS is resolved
+  useEffect(() => {
+    if (ensAddress && inputValue.endsWith(".eth")) {
+      onRefundAddressChange(ensAddress)
+    }
+  }, [ensAddress, inputValue, onRefundAddressChange])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setInputValue(value)
+    // Only update immediately if it's not an ENS name (let ENS resolution handle .eth names)
+    if (!value.endsWith(".eth")) {
+      onRefundAddressChange(value)
+    }
+  }
+
+  const handleUseAccount = () => {
+    setInputValue(account.address)
+    onRefundAddressChange(account.address)
+  }
+
+  // Check if the input is valid (either a valid address or a resolved ENS name)
+  const isValidAddress =
+    inputValue &&
+    (isAddress(inputValue) || (ensAddress && inputValue.endsWith(".eth")))
+
+  return (
+    <div className="space-y-2">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex items-center space-x-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 cursor-pointer"
+      >
+        <span>Set refund address</span>
+        {isOpen ? (
+          <ChevronDown className="w-3 h-3" />
+        ) : (
+          <ChevronRight className="w-3 h-3" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="space-y-2 p-3 trails-border-radius-container trails-bg-secondary trails-border">
+          <div className="flex justify-between items-center">
+            <label
+              htmlFor="refund-address"
+              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Refund Address
+            </label>
+            <button
+              type="button"
+              onClick={handleUseAccount}
+              disabled={
+                inputValue.toLowerCase() === account.address.toLowerCase()
+              }
+              className={`px-2 py-1 text-xs cursor-pointer trails-border-radius-button transition-colors ${
+                inputValue.toLowerCase() === account.address.toLowerCase()
+                  ? "bg-gray-400 cursor-not-allowed text-white"
+                  : "bg-blue-500 hover:bg-blue-600 text-white"
+              }`}
+            >
+              Use Account
+            </button>
+          </div>
+
+          <input
+            id="refund-address"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            placeholder="0x... or name.eth"
+            className="block w-full px-3 py-2 border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm trails-input"
+          />
+
+          {inputValue && (
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {isValidAddress ? (
+                <div className="space-y-1">
+                  <div className="flex items-center space-x-2">
+                    <span>Refund to:</span>
+                    <TruncatedAddress
+                      address={
+                        inputValue.endsWith(".eth")
+                          ? ensAddress || inputValue
+                          : inputValue
+                      }
+                      chainId={chainId}
+                    />
+                  </div>
+                  {inputValue.endsWith(".eth") && ensAddress && (
+                    <div className="text-gray-400">
+                      Resolved from: {inputValue}
+                    </div>
+                  )}
+                </div>
+              ) : inputValue.endsWith(".eth") && isLoading ? (
+                <div className="flex items-center space-x-2 text-blue-500">
+                  <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-blue-500"></div>
+                  <span>Resolving ENS name...</span>
+                </div>
+              ) : (
+                <span className="text-red-500">Invalid address format</span>
+              )}
+            </div>
+          )}
+
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            If the transaction fails or cannot be completed, funds will be
+            refunded to this address. Please make sure that this address can
+            receive funds on both the origin and destination chain.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}