Add support to visually represent addresses and hashes with 'blo'

app/components/pixel-avatar.tsx

@@ -1,45 +1,25 @@
 import React, { useMemo } from 'react';
+import {blo} from 'blo';
 
 interface PixelAvatarProps {
   address: string;
   size?: number;
 }
 
 const PixelAvatar: React.FC<PixelAvatarProps> = ({ address, size = 20 }) => {
-  const generateColor = () => {
-    const r = Math.floor(Math.random() * 256);
-    const g = Math.floor(Math.random() * 256);
-    const b = Math.floor(Math.random() * 256);
-    return `rgb(${r},${g},${b})`;
-  };
-
-  const pixels = useMemo(() => {
-    const seed = parseInt(address.slice(2, 10), 16);
-    const pixelArray = [];
-    for (let i = 0; i < 5; i++) {
-      for (let j = 0; j < 5; j++) {
-        if ((seed >> (i * 5 + j)) & 1) {
-          pixelArray.push(
-            <rect
-              key={`${i}-${j}`}
-              x={i * 4}
-              y={j * 4}
-              width="4"
-              height="4"
-              fill={generateColor()}
-            />
-          );
-        }
-      }
+  const style = useMemo(() => {
+    const blockie = blo(address as `0x${string}`)
+    return {
+      backgroundImage: `url(${blockie})`,
+      backgroundSize: 'contain',
+      borderRadius: '50%',
+      width: `${size}px`,
+      height: `${size}px`,
     }
-    return pixelArray;
-  }, [address]);
+  }, [address, size]);
 
   return (
-    <svg width={size} height={size} viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#f0f0f0" />
-      {pixels}
-    </svg>
+      <div style={style} />
   );
 };
 

app/components/result/input-field.tsx

@@ -120,10 +120,10 @@ export default function InputField({
                 <div className="text-gray-500 dark:text-gray-300 text-lg">{label}</div>
                 {isAddress ? (
                     <div className="flex  items-center gap-2">
-                        <div className="flex h-5 w-5">
+                        <div className="flex h-7.5 w-7.5">
                         <PixelAvatar address={value} />
                         </div>
-                        <div className="text-md break-all mt-1">
+                        <div className="text-md break-all">
                             {value}
                         </div>
                     </div>

app/components/transaction/AdvancedParamsStep.tsx

@@ -10,6 +10,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
 import { HelpCircle } from "lucide-react";
+import PixelAvatar from "@/components/pixel-avatar";
 
 interface AdvancedParamsStepProps {
   form: UseFormReturn<FormData>;
@@ -89,7 +90,7 @@ export default function AdvancedParamsStep({ form }: AdvancedParamsStepProps) {
           <FormItem>
             <FormLabel>Gas token</FormLabel>
             <FormControl>
-              <Input placeholder="Enter gasToken address" {...field} />
+              <Input placeholder="Enter gasToken address" leftIcon={<PixelAvatar address={field.value} />} {...field} />
             </FormControl>
           </FormItem>
         )}
@@ -102,7 +103,7 @@ export default function AdvancedParamsStep({ form }: AdvancedParamsStepProps) {
           <FormItem>
             <FormLabel>Refund receiver</FormLabel>
             <FormControl>
-              <Input placeholder="Enter refundReceiver address" {...field} />
+              <Input placeholder="Enter refundReceiver address" leftIcon={<PixelAvatar address={field.value} />} {...field} />
             </FormControl>
           </FormItem>
         )}

app/package.json

@@ -36,7 +36,8 @@
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "blo": "^1.1.1"
   },
   "devDependencies": {
     "@types/node": "^20.17.19",