From bf11e9c38d64f3d93a5059e75a44d1142fafd3b3 Mon Sep 17 00:00:00 2001
From: Sem <931684+sembrestels@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:41:07 +0100
Subject: [PATCH] Randomize projects order on display

---
 apps/web/src/components/VotingCard.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/VotingCard.tsx b/apps/web/src/components/VotingCard.tsx
index 1362b3e..296ac28 100644
--- a/apps/web/src/components/VotingCard.tsx
+++ b/apps/web/src/components/VotingCard.tsx
@@ -10,7 +10,7 @@ import {
 } from "@repo/ui/components/ui/card";
 import { Input } from "@repo/ui/components/ui/input";
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import VotingButton from "./VotingButton";
 
 type Project = { account: `0x${string}`; name: string };
@@ -33,6 +33,11 @@ const VotingCard = ({
   maxVotedProjects?: number;
   isLoading: boolean;
 }) => {
+  const randomizedProjects = useMemo(
+    () => [...projects].sort(() => Math.random() - 0.5),
+    [projects],
+  );
+
   const [votes, setVotes] = useState<Allocation>(
     Object.fromEntries(
       projects.map((project) => [
@@ -98,7 +103,7 @@ const VotingCard = ({
                 </span>
               </div>
             </div>
-            {projects.map((project) => {
+            {randomizedProjects.map((project) => {
               return (
                 <div
                   key={project.account}