0xtrails 0.1.13 → 0.2.1

package/src/widget/components/FundMethods.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { Wallet, QrCode, Building2 } from "lucide-react"
 import { useAccount } from "wagmi"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { useTheme } from "../components/ThemeProvider.js"
 import WalletConnectLogoWhite from "../assets/WalletConnect-logo-white.svg"
 import WalletConnectLogoBlack from "../assets/WalletConnect-logo-black.svg"
@@ -10,7 +10,7 @@ import { ScreenHeader } from "./ScreenHeader.js"
 export interface FundMethodsProps {
   onBack?: () => void
   onSelectWalletConnect: () => void
-  onSelectExchange: () => void
+  onSelectExchangeList: () => void
   onSelectConnectedAccount: () => void
   onSelectQrCode: () => void
 }
@@ -18,7 +18,7 @@ export interface FundMethodsProps {
 const FundMethods: React.FC<FundMethodsProps> = ({
   onBack,
   onSelectWalletConnect,
-  onSelectExchange,
+  onSelectExchangeList,
   onSelectConnectedAccount,
   onSelectQrCode,
 }) => {
@@ -158,7 +158,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
           <button
             type="button"
-            onClick={onSelectExchange}
+            onClick={onSelectExchangeList}
             className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
           >
             <div className="flex items-center space-x-3 flex-1">

package/src/widget/components/FundSendForm.tsx

@@ -20,7 +20,6 @@ import { ErrorDisplay } from "./ErrorDisplay.js"
 import { useMode } from "../hooks/useMode.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { logger } from "../../logger.js"
-import { FeeOptions } from "./FeeOptions.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 
 interface FundSendFormProps {
@@ -138,9 +137,6 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
     destinationTokenAddress,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
     isRecipientContract,
   } = useSendForm({
     account,
@@ -825,17 +821,10 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           chainId={selectedDestinationChain.id}
         /> */}
 
-        {/* Fee Options */}
-        <FeeOptions
-          options={feeOptions}
-          selectedOption={selectedFeeToken ?? undefined}
-          onSelect={setSelectedFeeToken}
-        />
-
         {/* Warning Messages - Show only one at a time */}
         {isSameTokenWithoutCustomCalldata ? (
           <ErrorDisplay
-            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different origin token."
             severity="error"
           />
         ) : (
@@ -867,28 +856,6 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
               </p>
             </div>
           </div>
-        ) : prepareSendQuote?.minimumNotMet ? (
-          <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-            <div className="flex items-center space-x-2">
-              <svg
-                className="w-4 h-4 text-amber-500 flex-shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <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>
-              <p className="text-sm text-amber-600 dark:text-amber-400">
-                Please enter an amount above $0.15 otherwise transfer may fail
-              </p>
-            </div>
-          </div>
         ) : null}
 
         {/* Continue Button */}

package/src/widget/components/Identicon.tsx

@@ -0,0 +1,158 @@
+import type React from "react"
+
+// MetaMask-style hash function
+const hashCode = (str: string): number => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash
+  }
+  return Math.abs(hash)
+}
+
+// Generate MetaMask-style colors (bright and vibrant)
+const generateMetaMaskColors = (seed: number) => {
+  const colors = [
+    "#FF6B6B",
+    "#4ECDC4",
+    "#45B7D1",
+    "#96CEB4",
+    "#FECA57",
+    "#FF9FF3",
+    "#54A0FF",
+    "#5F27CD",
+    "#00D2D3",
+    "#FF9F43",
+    "#10AC84",
+    "#EE5A24",
+    "#0ABDE3",
+    "#C44569",
+    "#F8B500",
+    "#6C5CE7",
+    "#A3CB38",
+    "#FD79A8",
+    "#636E72",
+    "#00B894",
+  ]
+
+  const bg = colors[seed % colors.length]
+  const spot = colors[(seed + 7) % colors.length]
+
+  return { backgroundColor: bg, spotColor: spot }
+}
+
+// Generate MetaMask-style pattern
+const generateMetaMaskPattern = (address: string) => {
+  const cleanAddress = address.replace(/^0x/i, "").toLowerCase()
+
+  // Use address to generate deterministic values
+  const seed = hashCode(cleanAddress)
+  const { backgroundColor, spotColor } = generateMetaMaskColors(seed)
+
+  // Generate a 8x8 grid pattern like MetaMask
+  const size = 8
+  const pattern: boolean[][] = []
+
+  // Generate pattern with symmetry (like MetaMask)
+  for (let y = 0; y < size; y++) {
+    const row: boolean[] = []
+    for (let x = 0; x < size; x++) {
+      // Create horizontal symmetry
+      const actualX = x < 4 ? x : 7 - x
+
+      // Use different parts of address for different rows/columns
+      const addressIndex = (y * 4 + actualX) % cleanAddress.length
+      const char = cleanAddress.charCodeAt(addressIndex)
+
+      // Determine if this cell should be filled
+      const shouldFill = (char + seed) % 3 === 0
+      row.push(shouldFill)
+    }
+    pattern.push(row)
+  }
+
+  return {
+    backgroundColor,
+    spotColor,
+    pattern,
+  }
+}
+
+interface IdenticonProps {
+  value?: string
+  size?: number
+  className?: string
+}
+
+export const Identicon: React.FC<IdenticonProps> = ({
+  value = "0x0000000000000000000000000000000000000000",
+  size = 64,
+  className = "",
+}) => {
+  if (!value || typeof value !== "string") {
+    return (
+      <div
+        className={`inline-block ${className}`}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: "#cccccc",
+          borderRadius: "50%",
+        }}
+      />
+    )
+  }
+
+  const { backgroundColor, spotColor, pattern } = generateMetaMaskPattern(value)
+
+  const gridSize = 8
+  const cellSize = size / gridSize
+
+  return (
+    <div
+      className={`inline-block ${className}`}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        overflow: "hidden",
+        backgroundColor: backgroundColor,
+      }}
+    >
+      <svg
+        width={size}
+        height={size}
+        style={{ display: "block" }}
+        aria-label={`Identicon for ${value}`}
+      >
+        <title>Identicon for {value}</title>
+        {/* Background circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={size / 2}
+          fill={backgroundColor}
+        />
+
+        {/* Pattern cells */}
+        {pattern.map((row, y) =>
+          row.map((shouldFill, x) =>
+            shouldFill ? (
+              <rect
+                key={`cell-${y}-${x}-${value.slice(-8)}`}
+                x={x * cellSize}
+                y={y * cellSize}
+                width={cellSize}
+                height={cellSize}
+                fill={spotColor}
+              />
+            ) : null,
+          ),
+        )}
+      </svg>
+    </div>
+  )
+}
+
+export default Identicon

package/src/widget/components/MeshConnectExchanges.tsx

@@ -11,16 +11,26 @@ import BinanceLogo from "../assets/Binance_Icon_Logo.svg"
 import CoinbaseLogo from "../assets/Coinbase_Icon_Logo.svg"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { logger } from "../../logger.js"
+import { useSelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
+import { useMode } from "../hooks/useMode.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import type { Mode } from "../../mode.js"
+import type { Screen } from "../hooks/useCurrentScreen.js"
 
 export interface MeshConnectExchangesProps {
-  onBack: () => void
-  onSelectExchange: (integrationId: string, exchangeName: string) => void
+  onBack?: () => void
+  onSelectExchange?: (integrationId: string, exchangeName: string) => void
+  getInitialScreenForMode?: (mode: Mode) => Screen
 }
 
 export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
   onBack,
   onSelectExchange,
+  getInitialScreenForMode,
 }) => {
+  const { setSelectedExchange } = useSelectedMeshExchange()
+  const { mode } = useMode()
+  const { setCurrentScreen } = useCurrentScreen()
   const [coinbaseId, setCoinbaseId] = useState<string | null>(null)
   const [binanceId, setBinanceId] = useState<string | null>(null)
   const [bitfinexId, setBitfinexId] = useState<string | null>(null)
@@ -73,7 +83,26 @@ export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
     logger.console.log(
       `[trails-sdk] Selected exchange: ${exchangeName} (${integrationId})`,
     )
-    onSelectExchange(integrationId, exchangeName)
+
+    // If a callback is provided (MeshConnectFlow), use it
+    if (onSelectExchange) {
+      onSelectExchange(integrationId, exchangeName)
+      return
+    }
+
+    // Otherwise, use the hook-based approach (main widget flow)
+    // Store the selected exchange
+    setSelectedExchange({ integrationId, exchangeName })
+
+    // Navigate to the initial screen for the current mode
+    if (getInitialScreenForMode) {
+      const currentMode = (mode || "pay") as Mode
+      const initialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        `[trails-sdk] Navigating to initial screen for mode ${currentMode}: ${initialScreen}`,
+      )
+      setCurrentScreen(initialScreen)
+    }
   }
 
   if (loading) {

package/src/widget/components/MeshConnectFlow.tsx

@@ -1,7 +1,8 @@
 import type React from "react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { MeshConnectExchanges } from "./MeshConnectExchanges.js"
 import { MeshConnectIframe } from "./MeshConnectIframe.js"
+import type { SelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
 
 export interface MeshConnectFlowProps {
   onBack?: () => void
@@ -10,6 +11,7 @@ export interface MeshConnectFlowProps {
   toTokenAmount?: string
   toChainId?: number
   toRecipientAddress?: string
+  selectedExchange?: SelectedMeshExchange | null
 }
 
 type Screen = "exchanges" | "connect"
@@ -21,10 +23,27 @@ export const MeshConnectFlow: React.FC<MeshConnectFlowProps> = ({
   toTokenAmount,
   toChainId,
   toRecipientAddress,
+  selectedExchange,
 }) => {
-  const [currentScreen, setCurrentScreen] = useState<Screen>("exchanges")
-  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>("")
-  const [selectedExchangeName, setSelectedExchangeName] = useState<string>("")
+  // If an exchange is already selected, start on the connect screen
+  const [currentScreen, setCurrentScreen] = useState<Screen>(
+    selectedExchange ? "connect" : "exchanges",
+  )
+  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>(
+    selectedExchange?.integrationId || "",
+  )
+  const [selectedExchangeName, setSelectedExchangeName] = useState<string>(
+    selectedExchange?.exchangeName || "",
+  )
+
+  // Update state when selectedExchange prop changes
+  useEffect(() => {
+    if (selectedExchange) {
+      setSelectedIntegrationId(selectedExchange.integrationId)
+      setSelectedExchangeName(selectedExchange.exchangeName)
+      setCurrentScreen("connect")
+    }
+  }, [selectedExchange])
 
   const handleSelectExchange = (
     integrationId: string,

package/src/widget/components/NativeGasOption.tsx

@@ -0,0 +1,99 @@
+import type React from "react"
+import { getChainInfo } from "../../chains.js"
+import { TokenImage } from "./TokenImage.js"
+import { getTokenImageUrl } from "../../tokens.js"
+import { zeroAddress } from "viem"
+
+interface NativeGasOptionProps {
+  isSelected: boolean
+  gasCostUsdDisplay?: string
+  gasCostNativeDisplay?: string
+  onClick: () => void
+  chainId?: number
+  notEnoughBalance?: boolean
+}
+
+export const NativeGasOption: React.FC<NativeGasOptionProps> = ({
+  isSelected,
+  gasCostUsdDisplay,
+  gasCostNativeDisplay,
+  onClick,
+  chainId,
+  notEnoughBalance = false,
+}) => {
+  // Helper function to get native symbol for a chain
+  const getNativeSymbol = (chainId?: number) => {
+    if (!chainId) return "ETH"
+    const chainInfo = getChainInfo(chainId)
+    return chainInfo?.nativeCurrency.symbol || "ETH"
+  }
+
+  const nativeSymbol = getNativeSymbol(chainId)
+  const nativeImageUrl = getTokenImageUrl({
+    chainId,
+    contractAddress: zeroAddress,
+    symbol: nativeSymbol,
+  })
+
+  return (
+    <button
+      type="button"
+      className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border transition-colors ${
+        notEnoughBalance
+          ? "cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
+          : isSelected
+            ? "cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+            : "cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
+      }`}
+      onClick={notEnoughBalance ? undefined : onClick}
+      disabled={notEnoughBalance}
+    >
+      <div className="flex items-center space-x-2">
+        <TokenImage
+          imageUrl={nativeImageUrl}
+          symbol={nativeSymbol}
+          chainId={chainId}
+          size={16}
+        />
+        <div className="text-left">
+          <div
+            className={`text-xs font-medium ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {nativeSymbol}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-right">
+        {gasCostNativeDisplay && (
+          <div
+            className={`text-xs font-medium ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {gasCostNativeDisplay}
+          </div>
+        )}
+        {gasCostUsdDisplay && (
+          <div
+            className={`text-xs ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-muted"
+            }`}
+          >
+            {gasCostUsdDisplay}
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}
+
+export default NativeGasOption