0xtrails 0.1.13 → 0.2.0

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"

package/src/widget/components/FundSendForm.tsx

@@ -835,7 +835,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
         {/* 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"
           />
         ) : (

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