diff --git a/src/components/Avatar/emojiAvatarForAddress.ts b/src/components/Avatar/emojiAvatarForAddress.ts new file mode 100644 index 0000000..54ef9fc --- /dev/null +++ b/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]; +} diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx index b07d4b6..66d4378 100644 --- a/src/components/MenuBar/MenuBar.tsx +++ b/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 = ({ address, endTime }) => {
{timeLeft}
-
{formatWalletAddress(address || '')}
+
{formatWalletAddressWithEmoji(address || '')}
diff --git a/src/components/ProposalList/ProposalItem.tsx b/src/components/ProposalList/ProposalItem.tsx index bacf84e..873bd06 100644 --- a/src/components/ProposalList/ProposalItem.tsx +++ b/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 = ({ proposal, onStartVote, filter, sear
- proposed by {formatWalletAddress(proposal.author.toString())} + proposed by {formatWalletAddressWithEmoji(proposal.author.toString())}
{ 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] };