0xtrails 0.2.5 → 0.3.0

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -1,18 +1,24 @@
 import { ChevronRight, QrCode, Send } from "lucide-react"
 import type React from "react"
 import { truncateAddress } from "../../utils.js"
-import { useAccount } from "wagmi"
+import { useAccount, useConnections } from "wagmi"
 import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 
 export const FundingMethodSelectorButton: React.FC = () => {
-  const { address, isConnected } = useAccount()
+  const connections = useConnections()
+  const { address } = useAccount()
   const { setCurrentScreenWithBack } = useBack()
   const { selectedFundMethod } = useSelectedFundMethod()
 
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+  // Use the active account from useAccount(), fallback to first connection if needed
+  const activeAddress = address || connections[0]?.accounts[0]
+
   const handleClick = () => {
-    if (isConnected && address) {
+    if (isConnected && activeAddress) {
       // If wallet is connected, go to fund methods
       setCurrentScreenWithBack("fund-methods")
     } else {
@@ -27,32 +33,36 @@ export const FundingMethodSelectorButton: React.FC = () => {
       onClick={handleClick}
       className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
       title={
-        isConnected && address ? "Select funding method" : "Connect wallet"
+        isConnected && activeAddress
+          ? "Select funding method"
+          : "Connect wallet"
       }
     >
-      {isConnected && address ? (
+      {isConnected && activeAddress ? (
         selectedFundMethod === "qr-code" ? (
           <>
-            <QrCode className="w-4 h-4" />
-            <span className="text-sm font-medium">QR Code</span>
+            <QrCode className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">QR Code</span>
           </>
         ) : selectedFundMethod === "exchange" ? (
           <>
-            <Send className="w-4 h-4" />
-            <span className="text-sm font-medium">Exchange</span>
+            <Send className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">Exchange</span>
           </>
         ) : (
           <>
-            <Identicon value={address} size={16} />
-            <span className="text-sm font-medium">
-              {truncateAddress(address, 4, 2)}
+            <div className="flex items-center mr-1">
+              <Identicon value={activeAddress} size={16} />
+            </div>
+            <span className="text-sm font-medium m-0">
+              {truncateAddress(activeAddress, 4, 4)}
             </span>
           </>
         )
       ) : (
-        <span className="text-sm font-medium">Connect Wallet</span>
+        <span className="text-sm font-medium mr-1">Connect Wallet</span>
       )}
-      <ChevronRight className="w-4 h-4" />
+      <ChevronRight className="w-4 h-4 m-0" />
     </button>
   )
 }

package/src/widget/components/Identicon.tsx

@@ -1,81 +1,99 @@
 import type React from "react"
+import { useId } from "react"
+
+const MOD = 1000
+const SIZE = 64
+const RADIUS = SIZE / 2
+const prefix = "gradient-avatar-"
+
+const scaledMod = (value: number, mod: number = MOD): number => {
+  return (value % mod) / (MOD / SIZE)
+}
+
+const cyrb53 = (str: string, seed: number = 0): number => {
+  let h1 = 0xdeadbeef ^ seed
+  let h2 = 0x41c6ce57 ^ seed
 
-// 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
+    const ch = str.charCodeAt(i)
+    h1 = Math.imul(h1 ^ ch, 2654435761)
+    h2 = Math.imul(h2 ^ ch, 1597334677)
   }
-  return Math.abs(hash)
+
+  h1 =
+    Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
+    Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+  h2 =
+    Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
+    Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0)
 }
 
-// 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 }
+const createId = (name: string, id: string): string => `${prefix}${name}${id}`
+
+const createHues = (a: number, _b: number, c: number) => {
+  const hueA = a % 360
+  const hueB = (a + 120) % 360
+  const hueC = c % 360
+  return { hueA, hueB, hueC }
 }
 
-// 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)
+interface Gradient {
+  id: string
+  stopColor0: string
+  stopColor1: string
+  cx: number
+  cy: number
+  r: number
+}
+
+interface Gradients {
+  background: Gradient
+  primary: Gradient
+  secondary: Gradient
+}
+
+const createGradients = (id: string, address: string): Gradients => {
+  const hash = {
+    a: cyrb53(`${address}a`, 0),
+    b: cyrb53(`${address}b`, 1),
+    c: cyrb53(`${address}c`, 2),
+    x: cyrb53(`${address}d`, 3),
+    y: cyrb53(`${address}e`, 4),
+    r: cyrb53(`${address}f`, 5),
   }
 
+  const { hueA, hueB, hueC } = createHues(hash.a, hash.b, hash.c)
+  const cx = scaledMod(hash.x)
+  const cy = scaledMod(hash.y)
+  const r = SIZE / 10 + scaledMod(hash.r, MOD * 1.5)
+
   return {
-    backgroundColor,
-    spotColor,
-    pattern,
+    background: {
+      id: createId("background", id),
+      stopColor0: `hsl(${hueC}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueA}deg 100% 50% / 1)`,
+      cx,
+      cy,
+      r,
+    },
+    primary: {
+      id: createId("primary", id),
+      stopColor0: `hsl(${hueA}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueB}deg 100% 50% / 1)`,
+      cx,
+      cy,
+      r,
+    },
+    secondary: {
+      id: createId("secondary", id),
+      stopColor0: `hsl(${hueC}deg 100% 50% / 1)`,
+      stopColor1: `hsl(${hueB}deg 100% 50% / 1)`,
+      cx: cy,
+      cy: cx,
+      r: r / 2,
+    },
   }
 }
 
@@ -90,6 +108,8 @@ export const Identicon: React.FC<IdenticonProps> = ({
   size = 64,
   className = "",
 }) => {
+  const id = useId()
+
   if (!value || typeof value !== "string") {
     return (
       <div
@@ -104,10 +124,8 @@ export const Identicon: React.FC<IdenticonProps> = ({
     )
   }
 
-  const { backgroundColor, spotColor, pattern } = generateMetaMaskPattern(value)
-
-  const gridSize = 8
-  const cellSize = size / gridSize
+  const gradients = createGradients(id, value.toLowerCase())
+  const getId = (name: string) => createId(name, id)
 
   return (
     <div
@@ -117,39 +135,90 @@ export const Identicon: React.FC<IdenticonProps> = ({
         height: size,
         borderRadius: "50%",
         overflow: "hidden",
-        backgroundColor: backgroundColor,
+        flexShrink: 0,
       }}
     >
       <svg
         width={size}
         height={size}
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
         style={{ display: "block" }}
+        xmlns="http://www.w3.org/2000/svg"
         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,
-          ),
-        )}
+
+        <defs>
+          <clipPath id={getId("circle-clip")}>
+            <circle cx={RADIUS} cy={RADIUS} r={RADIUS} />
+          </clipPath>
+
+          <filter
+            id={getId("blur-xs")}
+            x="-10%"
+            y="-10%"
+            width="120%"
+            height="120%"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation={SIZE / 10}
+              result="effect1_foregroundBlur"
+            />
+          </filter>
+
+          <linearGradient
+            id={gradients.background.id}
+            x1="0"
+            y1="0"
+            x2="1"
+            y2="1"
+          >
+            <stop offset="0" stopColor={gradients.background.stopColor0} />
+            <stop offset="1" stopColor={gradients.background.stopColor1} />
+          </linearGradient>
+
+          <radialGradient id={gradients.primary.id}>
+            <stop offset="0" stopColor={gradients.primary.stopColor0} />
+            <stop offset="1" stopColor={gradients.primary.stopColor1} />
+          </radialGradient>
+
+          <radialGradient id={gradients.secondary.id}>
+            <stop offset="0" stopColor={gradients.secondary.stopColor0} />
+            <stop offset="1" stopColor={gradients.secondary.stopColor1} />
+          </radialGradient>
+        </defs>
+
+        <g clipPath={`url(#${getId("circle-clip")})`}>
+          <rect
+            width="100%"
+            height="100%"
+            fill={`url(#${gradients.background.id})`}
+          />
+
+          <g filter={`url(#${getId("blur-xs")})`}>
+            <circle
+              fill={`url(#${gradients.primary.id})`}
+              cx={gradients.primary.cx}
+              cy={gradients.primary.cy}
+              r={gradients.primary.r}
+            />
+            <circle
+              fill={`url(#${gradients.secondary.id})`}
+              cx={gradients.secondary.cx}
+              cy={gradients.secondary.cy}
+              r={gradients.secondary.r}
+            />
+          </g>
+        </g>
       </svg>
     </div>
   )

package/src/widget/components/MeshConnectExchanges.tsx

@@ -12,24 +12,18 @@ 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
-  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)
@@ -94,15 +88,8 @@ export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
     // 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)
-    }
+    // Navigate to home screen
+    setCurrentScreen("home")
   }
 
   if (loading) {

package/src/widget/components/Modal.tsx

@@ -1,4 +1,3 @@
-import { X } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import type React from "react"
 import { useEffect, useRef } from "react"
@@ -70,17 +69,6 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
               layoutId="modal-content"
               layout="preserve-aspect"
             >
-              <button
-                type="button"
-                onClick={onClose}
-                className="absolute right-4 top-6 flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 z-20"
-                title="Close"
-              >
-                <X
-                  className="h-4 w-4"
-                  style={{ transform: "translate(0, -2px)" }}
-                />
-              </button>
               {children}
             </motion.div>
           </div>