feat: add emoji to each address

src/components/Avatar/emojiAvatarForAddress.ts

@@ -0,0 +1,80 @@
+const colors = [
+    '#FC5C54',
+    '#FFD95A',
+    '#E95D72',
+    '#6A87C8',
+    '#5FD0F3',
+    '#75C06B',
+    '#FFDD86',
+    '#5FC6D4',
+    '#FF949A',
+    '#FF8024',
+    '#9BA1A4',
+    '#EC66FF',
+    '#FF8CBC',
+    '#FF9A23',
+    '#C5DADB',
+    '#A8CE63',
+    '#71ABFF',
+    '#FFE279',
+    '#B6B1B6',
+    '#FF6780',
+    '#A575FF',
+    '#4D82FF',
+    '#FFB35A',
+] as const;
+
+const avatars = [
+    { color: colors[0], emoji: '🌶' },
+    { color: colors[1], emoji: '🤑' },
+    { color: colors[2], emoji: '🐙' },
+    { color: colors[3], emoji: '🫐' },
+    { color: colors[4], emoji: '🐳' },
+    { color: colors[0], emoji: '🤶' },
+    { color: colors[5], emoji: '🌲' },
+    { color: colors[6], emoji: '🌞' },
+    { color: colors[7], emoji: '🐒' },
+    { color: colors[8], emoji: '🐵' },
+    { color: colors[9], emoji: '🦊' },
+    { color: colors[10], emoji: '🐼' },
+    { color: colors[11], emoji: '🦄' },
+    { color: colors[12], emoji: '🐷' },
+    { color: colors[13], emoji: '🐧' },
+    { color: colors[8], emoji: '🦩' },
+    { color: colors[14], emoji: '👽' },
+    { color: colors[0], emoji: '🎈' },
+    { color: colors[8], emoji: '🍉' },
+    { color: colors[1], emoji: '🎉' },
+    { color: colors[15], emoji: '🐲' },
+    { color: colors[16], emoji: '🌎' },
+    { color: colors[17], emoji: '🍊' },
+    { color: colors[18], emoji: '🐭' },
+    { color: colors[19], emoji: '🍣' },
+    { color: colors[1], emoji: '🐥' },
+    { color: colors[20], emoji: '👾' },
+    { color: colors[15], emoji: '🥦' },
+    { color: colors[0], emoji: '👹' },
+    { color: colors[17], emoji: '🙀' },
+    { color: colors[4], emoji: '⛱' },
+    { color: colors[21], emoji: '⛵️' },
+    { color: colors[17], emoji: '🥳' },
+    { color: colors[8], emoji: '🤯' },
+    { color: colors[22], emoji: '🤠' },
+] as const;
+
+function hashCode(text: string) {
+    let hash = 0;
+    if (text.length === 0) return hash;
+    for (let i = 0; i < text.length; i++) {
+        const chr = text.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0;
+    }
+    return hash;
+}
+
+export function emojiAvatarForAddress(address: string) {
+    const resolvedAddress = typeof address === 'string' ? address : '';
+    const avatarIndex = Math.abs(hashCode(resolvedAddress.toLowerCase()) % avatars.length);
+    return avatars[avatarIndex ?? 0];
+}

src/components/MenuBar/MenuBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './MenuBar.module.css';
-import { formatWalletAddress } from '@/global/utils.ts';
+import { formatWalletAddressWithEmoji } from '@/global/utils.ts';
 import PxCounter from '@/components/MenuBar/PxCounter.tsx';
 
 interface MenuBarProps {
@@ -45,7 +45,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ address, endTime }) => {
             <div className={styles.countdownContainer}>{timeLeft}</div>
 
             <div className={styles.rightSection}>
-                <div className={styles.addressContainer}>{formatWalletAddress(address || '')}</div>
+                <div className={styles.addressContainer}>{formatWalletAddressWithEmoji(address || '')}</div>
                 <PxCounter />
             </div>
         </div>

src/components/ProposalList/ProposalItem.tsx

@@ -3,7 +3,7 @@ import { usePixelawProvider } from '@/providers/PixelawProvider.tsx';
 import { ProposalType } from '@/global/types.ts';
 import { numRGBAToHex } from '@/webtools/utils.ts';
 import { GAME_ID, NEEDED_YES_PX } from '@/global/constants.ts';
-import { formatWalletAddress, toastContractError, formatTimeRemaining, formatTimeRemainingFotTitle } from '@/global/utils.ts';
+import { formatWalletAddressWithEmoji, toastContractError, formatTimeRemaining, formatTimeRemainingFotTitle } from '@/global/utils.ts';
 import { type ProposalDataType } from '@/hooks/useProposals.ts';
 import useGetPixelsToReset from "@/hooks/useGetPixelsToReset.ts";
 
@@ -30,7 +30,7 @@ const createProposalTitle = (proposalType: ProposalType, target_args_1: number,
         case ProposalType.AddNewColor:
             return `Adding A New Color: ${numRGBAToHex(target_args_1).toUpperCase()}`;
         case ProposalType.ResetToWhiteByColor:
-            return `Make A Disaster: ${numRGBAToHex(target_args_1).toUpperCase()}`;
+            return `Reset To White: ${numRGBAToHex(target_args_1).toUpperCase()}`;
         case ProposalType.ExtendGameEndTime:
             return `Extend Game End Time: ${formatTimeRemainingFotTitle(target_args_1)}`;
         case ProposalType.ExpandArea:
@@ -167,7 +167,7 @@ const ProposalItem: React.FC<PropsType> = ({ proposal, onStartVote, filter, sear
                     </div>
                 </div>
                 <div className='mb-2 text-xs text-gray-400'>
-                    proposed by {formatWalletAddress(proposal.author.toString())}
+                    proposed by {formatWalletAddressWithEmoji(proposal.author.toString())}
                 </div>
                 <div
                     className='mr-30 relative mb-1 flex h-2 rounded-full bg-gray-700'

src/global/utils.ts

@@ -2,6 +2,7 @@ import { shortString } from 'starknet';
 import { toastError, toastSuccess } from '@/components/Toast';
 import { type Position } from '@/global/types.ts';
 import { type Coordinate } from '@/webtools/types.ts';
+import { emojiAvatarForAddress } from '@/components/Avatar/emojiAvatarForAddress';
 
 /*
  * @notice converts a number to hexadecimal
@@ -72,6 +73,14 @@ export const formatWalletAddress = (address: string) => {
     return address;
 };
 
+export const formatWalletAddressWithEmoji = (address: string) => {
+    const avatar = emojiAvatarForAddress(address);
+    if (address.length > 10) {
+        return avatar.emoji + `${address.slice(0, 4)}...${address.slice(-4)}`;
+    }
+    return avatar.emoji + address;
+};
+
 // Takes a RGB hex nr and converts it to numeric rgba (0 alpha)
 export const coordinateToPosition = (coord: Coordinate): Position => {
     return { x: coord[0], y: coord[1] };