From c52662d67bc40fc2820f0a98b4cebe3aefd433de Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Thu, 10 Oct 2024 23:45:39 +0330
Subject: [PATCH 01/16] Add connect box

---
 app/allocation/components/ConnectBox.tsx      | 58 +++++++++++++++++++
 .../{WarpcaseIcon.tsx => WarpcastIcon.tsx}    |  0
 public/assets/icon-components/WorldIdIcon.tsx | 14 +++++
 3 files changed, 72 insertions(+)
 create mode 100644 app/allocation/components/ConnectBox.tsx
 rename public/assets/icon-components/{WarpcaseIcon.tsx => WarpcastIcon.tsx} (100%)
 create mode 100644 public/assets/icon-components/WorldIdIcon.tsx

diff --git a/app/allocation/components/ConnectBox.tsx b/app/allocation/components/ConnectBox.tsx
new file mode 100644
index 0000000..93bea2e
--- /dev/null
+++ b/app/allocation/components/ConnectBox.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import { WorldIdIcon } from '@/public/assets/icon-components/WorldIdIcon';
+import { XIcon } from '@/public/assets/icon-components/XIcon';
+import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
+
+interface ConnectBoxProps {
+  onConnectWorldID: () => void;
+  onConnectTwitter: () => void;
+  onConnectFarcaster: () => void;
+}
+
+const ConnectBox: React.FC<ConnectBoxProps> = ({
+  onConnectWorldID,
+  onConnectTwitter,
+  onConnectFarcaster
+}) => {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Your voting power</h2>
+      
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold mb-2">Your badges</h3>
+        <Image src="/path-to-badges-image.png" alt="Badges" width={200} height={50} />
+      </div>
+      
+      <p className="mb-4">Increase your voting power by connecting to WorldID</p>
+      
+      <button
+        onClick={onConnectWorldID}
+        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 rounded-md mb-4 flex items-center justify-center"
+      >
+        <WorldIdIcon />
+        Connect with WorldID
+      </button>
+      
+      <p className="mb-4">Check who delegated their voting power to you? Connect your socials to know more.</p>
+      
+      <button
+        onClick={onConnectTwitter}
+        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 rounded-md mb-2 flex items-center justify-center"
+      >
+        <XIcon />
+        Connect with X (Twitter)
+      </button>
+      
+      <button
+        onClick={onConnectFarcaster}
+        className="w-full bg-gray-100 text-gray-800 gap-2 py-2 px-4 rounded-md flex items-center justify-center"
+      >
+        <WarpcastIcon />
+        Connect with Farcaster
+      </button>
+    </div>
+  );
+};
+
+export default ConnectBox;
\ No newline at end of file
diff --git a/public/assets/icon-components/WarpcaseIcon.tsx b/public/assets/icon-components/WarpcastIcon.tsx
similarity index 100%
rename from public/assets/icon-components/WarpcaseIcon.tsx
rename to public/assets/icon-components/WarpcastIcon.tsx
diff --git a/public/assets/icon-components/WorldIdIcon.tsx b/public/assets/icon-components/WorldIdIcon.tsx
new file mode 100644
index 0000000..4b55e6c
--- /dev/null
+++ b/public/assets/icon-components/WorldIdIcon.tsx
@@ -0,0 +1,14 @@
+export const WorldIdIcon = () => {
+  return (
+    <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_302_39967)">
+      <path d="M23.6646 7.33625C23.0573 5.91091 22.1985 4.63232 21.0884 3.5214C19.9783 2.41048 18.7216 1.55109 17.2973 0.94323C15.8102 0.314411 14.2394 0 12.6266 0C10.9929 0 9.42198 0.314411 7.9558 0.94323C6.53153 1.55109 5.25388 2.41048 4.14378 3.5214C3.03369 4.63232 2.17494 5.91091 1.56753 7.33625C0.939177 8.8035 0.625 10.3756 0.625 12.0105C0.625 13.6244 0.939177 15.1965 1.56753 16.6847C2.17494 18.11 3.03369 19.3886 4.14378 20.4996C5.25388 21.6105 6.53153 22.4698 7.9558 23.0568C9.4429 23.6856 11.0138 24 12.6266 24C14.2394 24 15.8102 23.6856 17.2973 23.0568C18.7216 22.4489 19.9992 21.5895 21.1094 20.4786C22.2194 19.3677 23.0782 18.0891 23.6856 16.6637C24.314 15.1756 24.6282 13.6035 24.6282 11.9895C24.6282 10.3756 24.293 8.8035 23.6646 7.33625ZM8.647 10.8786C9.12873 8.9502 10.8882 7.54583 12.9617 7.54583H21.2979C21.8424 8.57295 22.1775 9.70477 22.3032 10.8786H8.647ZM22.3032 13.1423C22.1775 14.3161 21.8215 15.4481 21.2979 16.4751H12.9617C10.8882 16.4751 9.14965 15.0498 8.647 13.1423H22.3032ZM5.73561 5.11441C7.57879 3.26987 10.0294 2.26376 12.6266 2.26376C15.2238 2.26376 17.6744 3.26987 19.5175 5.11441C19.5804 5.1773 19.6223 5.21921 19.6851 5.2821H12.9617C11.1604 5.2821 9.48483 5.9738 8.20712 7.2524C7.20177 8.25855 6.55247 9.51615 6.34302 10.8786H2.94991C3.20125 8.69872 4.16473 6.68646 5.73561 5.11441ZM12.6266 21.7572C10.0294 21.7572 7.57879 20.7511 5.73561 18.9065C4.16473 17.3345 3.20125 15.3013 2.94991 13.1423H6.34302C6.57342 14.5048 7.22272 15.7625 8.20712 16.7686C9.48483 18.0472 11.1604 18.7389 12.9617 18.7389H19.6851C19.6223 18.8018 19.5804 18.8437 19.5175 18.9065C17.6744 20.7511 15.2238 21.7572 12.6266 21.7572Z" fill="black"/>
+      </g>
+      <defs>
+      <clipPath id="clip0_302_39967">
+      <rect width="24.75" height="24" fill="white" transform="translate(0.625)"/>
+      </clipPath>
+      </defs>
+    </svg>
+  );
+};

From f82782f7621f24b70eab6a3a8b76e830346f5e7e Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Thu, 10 Oct 2024 23:45:49 +0330
Subject: [PATCH 02/16] Add category allocation component

---
 .../components/CategoryAllocation.tsx         | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 app/allocation/components/CategoryAllocation.tsx

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
new file mode 100644
index 0000000..1dae5a2
--- /dev/null
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -0,0 +1,73 @@
+import Image from 'next/image';
+import { FC } from 'react';
+
+export interface Category {
+  imageSrc: string;
+  title: string;
+  description: string;
+  projectCount: number;
+}
+
+interface CategoryAllocationProps extends Category {
+  allocationPercentage: number;
+  onDelegate: () => void;
+  onScore: () => void;
+  onLockClick: () => void;
+}
+
+const CategoryAllocation: FC<CategoryAllocationProps> = ({
+  imageSrc,
+  title,
+  description,
+  projectCount,
+  allocationPercentage,
+  onDelegate,
+  onScore,
+  onLockClick,
+}) => {
+  return (
+    <div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
+      <div className="flex items-center space-x-4">
+        <div className="bg-white p-2 rounded-lg">
+          <Image src={imageSrc} alt={title} width={24} height={24} />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg">{title}</h3>
+          <p className="text-sm text-gray-600">{description}</p>
+          <p className="text-xs text-gray-500 mt-1">{projectCount} projects</p>
+        </div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-2">
+          <button className="text-gray-500 font-bold">-</button>
+          <div className="bg-white px-3 py-1 rounded">
+            <span className="font-semibold">{allocationPercentage.toFixed(1)}%</span>
+          </div>
+          <button className="text-gray-500 font-bold">+</button>
+        </div>
+        <div className="text-gray-500 text-sm">
+          {(allocationPercentage * 100000).toLocaleString()} OP
+        </div>
+        <button
+          onClick={onScore}
+          className="bg-red-500 text-white px-4 py-2 rounded-md text-sm font-medium"
+        >
+          Score Projects
+        </button>
+        <button
+          onClick={onDelegate}
+          className="text-gray-700 px-4 py-2 rounded-md text-sm font-medium"
+        >
+          Delegate
+        </button>
+        <button onClick={onLockClick} className="text-gray-500">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryAllocation;
\ No newline at end of file

From b71ac7d2782f27c51c69580bca26ee48fc5bd372 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Thu, 10 Oct 2024 23:46:19 +0330
Subject: [PATCH 03/16] Initial header implementation

---
 app/comparison/card/Header-RF6.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx
index 39bcd3e..b3683a1 100644
--- a/app/comparison/card/Header-RF6.tsx
+++ b/app/comparison/card/Header-RF6.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConnectButton } from '@/app/utils/wallet/Connect';
+import { PwLogo } from '@/public/assets/icon-components/PairwiseLogo';
 
 interface HeaderProps {
   progress: number
@@ -36,10 +37,7 @@ const HeaderRF6: React.FC<HeaderProps> = ({
         {!isFirstSelection && (
           <div className="flex items-center justify-between bg-white px-4 py-2">
             <div className="flex items-center">
-              {/* <OPCharacter /> */}
-              <span className="ml-2 text-lg font-bold italic text-primary">
-                IMPACT = PROFIT
-              </span>
+              <PwLogo />
             </div>
           </div>
         )}

From ebd5030586e65dd728d49acf14e5e2054d4afd47 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Fri, 11 Oct 2024 14:03:51 +0330
Subject: [PATCH 04/16] First draft of the allocation page

---
 .../components/CategoryAllocation.tsx         |  63 ++++++++++--------
 app/allocation/page.tsx                       |  59 +++++++++++++++-
 app/comparison/card/ExternalLink.tsx          |   2 +-
 public/assets/images/category-gl.png          | Bin 0 -> 815 bytes
 public/assets/images/category-gra.png         | Bin 0 -> 879 bytes
 public/assets/images/category-it.png          | Bin 0 -> 785 bytes
 6 files changed, 91 insertions(+), 33 deletions(-)
 create mode 100644 public/assets/images/category-gl.png
 create mode 100644 public/assets/images/category-gra.png
 create mode 100644 public/assets/images/category-it.png

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
index 1dae5a2..12e484c 100644
--- a/app/allocation/components/CategoryAllocation.tsx
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -26,45 +26,50 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   onLockClick,
 }) => {
   return (
-    <div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
-      <div className="flex items-center space-x-4">
-        <div className="bg-white p-2 rounded-lg">
-          <Image src={imageSrc} alt={title} width={24} height={24} />
+    <div className="border rounded-lg p-4 flex justify-between">
+      <div className="flex max-w-[70%] space-x-4">
+        <div className="rounded-lg">
+          <Image src={imageSrc} alt={title} width={128} height={128} />
         </div>
-        <div>
+        <div className='space-y-2'>
           <h3 className="font-semibold text-lg">{title}</h3>
           <p className="text-sm text-gray-600">{description}</p>
-          <p className="text-xs text-gray-500 mt-1">{projectCount} projects</p>
+          <p className="text-xs rounded-lg text-gray-800 mt-1 w-fit p-2 bg-gray-100">{projectCount} projects</p>
         </div>
       </div>
-      <div className="flex items-center space-x-4">
+      <div className="flex flex-col gap-2">
         <div className="flex items-center space-x-2">
-          <button className="text-gray-500 font-bold">-</button>
-          <div className="bg-white px-3 py-1 rounded">
-            <span className="font-semibold">{allocationPercentage.toFixed(1)}%</span>
+          <div className='flex justify-center gap-6 border px-10 py-2'>
+            <button className="text-gray-500 font-bold">-</button>
+            <div className="bg-white rounded">
+              <span className="font-semibold">{allocationPercentage.toFixed(1)}%</span>
+            </div>
+            <button className="text-gray-500 font-bold">+</button>
           </div>
-          <button className="text-gray-500 font-bold">+</button>
+          <button onClick={onLockClick} className="text-gray-500">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+            </svg>
+          </button>
         </div>
-        <div className="text-gray-500 text-sm">
+        <div className="bg-gray-50 border text-gray-500 w-fit text-sm px-[53px] py-2">
           {(allocationPercentage * 100000).toLocaleString()} OP
         </div>
-        <button
-          onClick={onScore}
-          className="bg-red-500 text-white px-4 py-2 rounded-md text-sm font-medium"
-        >
-          Score Projects
-        </button>
-        <button
-          onClick={onDelegate}
-          className="text-gray-700 px-4 py-2 rounded-md text-sm font-medium"
-        >
-          Delegate
-        </button>
-        <button onClick={onLockClick} className="text-gray-500">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
-          </svg>
-        </button>
+        <div className='flex gap-2 my-2'>
+          <button
+            onClick={onScore}
+            className="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium"
+          >
+            Score Projects
+          </button>
+          <button
+            onClick={onDelegate}
+            className="text-gray-700 px-4 py-2 border rounded-md text-sm font-medium"
+          >
+            Delegate
+          </button>
+        </div>
+
       </div>
     </div>
   );
diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index 8f72695..c4d6c23 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -1,6 +1,29 @@
 'use client';
 
-import HeaderRF6 from '../comparison/card/Header-RF6';
+import HeaderRF6 from "../comparison/card/Header-RF6"
+import CategoryAllocation, { Category } from "./components/CategoryAllocation"
+import ConnectBox from "./components/ConnectBox"
+
+const Categories : Category[] = [
+  {
+    title: "Infrastructure & Tooling",
+    description: "Ethereum Core Contributions are infrastructure which supports, or is a dependency, of the OP Stack.",
+    imageSrc: "/assets/images/category-it.png",
+    projectCount: 20
+  },
+  {
+    title: "Gov Research & Analytics",
+    description: "Direct research & development contributions to the OP Stack, and contributions that support protocol upgrades.",
+    imageSrc: "/assets/images/category-gra.png",
+    projectCount: 15
+  },
+  {
+    title: "Governance Leadership",
+    description: "Efforts that improve the usability and accessibility of the OP Stack through tooling enhancements.",
+    imageSrc: "/assets/images/category-gl.png",
+    projectCount: 30
+  },
+]
 
 const AllocationPage = () => {
   return (
@@ -10,8 +33,38 @@ const AllocationPage = () => {
         category="category"
         question="Which project had the greatest impact on the OP Stack?"
         isFirstSelection={false}
-      />
-      <p className="mt-8 p-4"> Allocation page... </p>
+        />
+      <div className="flex gap-4 p-16 justify-between">
+        <div className="max-w-[65%] flex flex-col gap-3">
+          <h2 className="text-3xl font-bold"> Round 6: Governance </h2>
+          <p className="text-gray-600"> Retroactive Public Goods Funding (Retro Funding) 6 will reward contributions to Optimism Governance,
+             including governance infrastructure & tooling, governance analytics, and governance leadership. </p>
+          <p className="bg-yellow-50 p-4"> Decide on the budget for this round, decide how much should go to each category, and score projects in each category using the Pairwise raking. You can also choose to delegate your decision to someone
+             on X (Twitter) or Farcaster. By connecting your X and Farcaster accounts, find out if someone delegated voting decision to you.  </p>
+          <div className="border rounded-md p-6 flex flex-col gap-6">
+            <div>
+              <h3 className="text-2xl font-bold w-full border-b pb-2 mb-4"> Your budget </h3>
+              <div className="flex justify-between">
+                <p> Slider Component Here </p>
+                <p> Choose how much OP should be dedicated to this round, or delegate this decision to someone you trust. </p>
+              </div>
+            </div>
+            <div>
+              <h3 className="text-2xl font-bold w-full border-b pb-2 mb-4"> Categories </h3>
+              <div>
+                <p className="my-4"> Score projects in each category doing the Pairwise ranking, or delegate this decision to someone you trust. </p>
+                <div className="flex flex-col gap-4">
+                {Categories.map((cat) => <CategoryAllocation {...cat} onDelegate={() => {}} 
+                  onLockClick={() => {}} onScore={() => {}} allocationPercentage={33.3}/>)}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="max-w-[25%]">
+          <ConnectBox onConnectFarcaster={() => {}} onConnectTwitter={() => {}} onConnectWorldID={() => {}}/>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/app/comparison/card/ExternalLink.tsx b/app/comparison/card/ExternalLink.tsx
index f3f31c7..b4eeb6b 100644
--- a/app/comparison/card/ExternalLink.tsx
+++ b/app/comparison/card/ExternalLink.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { MirrorIcon } from '@/public/assets/icon-components/MirrorIcon';
-import { WarpcastIcon } from '@/public/assets/icon-components/WarpcaseIcon';
+import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
 import { WebsiteIcon } from '@/public/assets/icon-components/WebsiteIcon';
 import { XIcon } from '@/public/assets/icon-components/XIcon';
 
diff --git a/public/assets/images/category-gl.png b/public/assets/images/category-gl.png
new file mode 100644
index 0000000000000000000000000000000000000000..33bb1ed0b029b901700b49233bc40ba698aba874
GIT binary patch
literal 815
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&di3`|EnT^vIy7~jse&zS5eacutYM=O^0d9{}m
z7F_7!$n%}%H`V2Zf?im=Rg~f8pO0h=?_P1de9+#xwd2u)OC`b~vrZmV73^B)`uy3R
z=f7fq_^5JxiuJnpoA+ewyXbk(Yv1oR=Ui^k@~%!tq08%n#_UMB$&Tz^r5F0MvcARW
z?_F@mp?v#t!LO??REbXR3F<x45o`UlTXg+5v$F+!MlT$mcbO<|3U-U@t1z0L(Pnh<
z{OlLyih^sqCl))Yt&))xS6TXRzQ&XY<|k4NPn0>-B^VyEFe}VSU}zEMX((u76!0@(
zIK;{3U~!P4V$rpVp2z83JK|O*et*7x;`wd%HEyqKrR^-3{6oUSFWmjv`0SYUm$H4y
zpPw#fJ|AGw`^frc-FKPd<^GD^M&}#0s_U~oPTSjc=;-ILg!3~D&%CYv&i?4LvAVIi
zzmd6unP6&&tccqT*31l#=clh9oFn<T`OJ2P#U8>M1y!$B++}(at;M_}Y){eUzL|>G
zr|BhDW(wK`?E3Dh>^x`3!;Z;mwq{A<g_TQ_y5$zjRd?-CE@qawbNh1e@iiB|Ok2RY
zw6*f{&uQCNEdQA1Fzey22S$l9Pkc@t{lN3x@}`%T-R7ig!B^#vMaw@(P<EMj?fd^p
zB{Mg~biUpF-seLW!_nQr4eE!QcbC7Zn4?ya-Fo@aP3}9p3a|D>e!ZM-=Noaqf;+xq
zCF9{oH`$)2`|(^m9w}^O-thMA;q>)ye&j!reQc!oS@%KJzraVbFW(+`{#-bC(-Cj=
z9eJ1LzkRFmF;nUpcSz;J59iPS=TFXT;S+u+u81cljxk(qj<MQf{6#7#@RS6@-KLOV
zfx1DP#cy4RXg29dyQl2em7vGAe)6e>lQZtwv%YannycM)f+fr69dGd}zBQk<biXBS
rE)o+iUVdRt$+jD>r``ReS;t(FEB#OYQ<W4jeKUBv`njxgN@xNA`J8T^

literal 0
HcmV?d00001

diff --git a/public/assets/images/category-gra.png b/public/assets/images/category-gra.png
new file mode 100644
index 0000000000000000000000000000000000000000..814f9bbb2b4810cc8add2ca07ccc9b9e637883ae
GIT binary patch
literal 879
zcmV-#1CacQP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0|ZG#K~#7F?VB-Z
z6Hyq)|L+tbh_&4;BBYBLE!Yl<bg`k6Q&JtWHFoKsNEH<X(IkrKP-rsf5C>~Ibx_ku
zK}tIb>fjC5)+qrI-HZ__D&&0MT@sR*#Ob{&`Q8r>-rc(l-~WC8@4h7W1X}pA;fxCh
z5jl*?BZ%I>mND5C3#q}7C^k-r+MrNy`U6`?$l*owFcy&h89-`iNR;T@6`&gYsvM4h
z2liF~VG_Zjv+Bxo37#0)?ZpfsJs*_*D1af3K-jV>o)R2!97M?ioKn9D8GJ;1{UCK<
zj0NTx0l*w10GMM00CS80V2%+0%rOFhIYt2Z#H%-Jn7g0C`i2cZ(f)hDr_V*qJxF2c
z*+Tu=%9D3E67uJF8La|P@Dpc7Q7)I7u8$ob$J2#X_<>dnEae~n6Ffn7pu-Qe3NUu;
zWXHML>(eOzC_y*c1gLqx+k7^cfo`-2@P5;Fy-#UQe(%J?Tv~e;C>MZMcKX7k>-}5T
z=G|g9Gu8g@$Jk^XeS7+$6XgO>+LH)Z&L`@DUzX#(zUDwrO+=+YY3N3|0PCAxqtm$R
zd*v!$J(s|N{Xt~zJi@T-0iLhqo0=kBR#4st>^m&}`<$m5K^CF=C~zu<*~K(&%Z!Lc
z<50;?D27t~d-d5*R-l7cywU5!hrBNEh0KB*_b$2jc%S<Q)hHK$f}`qx`fRwV+3`F-
z@7loqULb2lZGL8IR@RK9mV&6<0@=k3Zr*KQ^(lA~BAfGyA6bBE0$taI@(idI!FG7f
zPr6<VyY&dFP@Vw?PYkr}|7*|_;p1!dUhjnR$6&YMiPnBVH_9`hwfME8o9ExYRQvXh
z@){6}#9gm%SIiqCV2%+0%rOFhIYt05#|QxC7y-Z>BLJ9V1ORhLfFhV80NbimunevU
zDS+64JeX1eQr2KdtjR3U|7L>E$lx=ykJ#He`UgqcTns+gzXC|oz!hL%RFro8Mwmk;
z(8|~L4b!=3y@9sU!a>q<aMTe!v#GKu178*bd9r-t#9ymuDof~sXUqTq002ovPDHLk
FV1gN+lmh?&

literal 0
HcmV?d00001

diff --git a/public/assets/images/category-it.png b/public/assets/images/category-it.png
new file mode 100644
index 0000000000000000000000000000000000000000..581fe00de28a463ddc377c3a2219d4107be663b4
GIT binary patch
literal 785
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&di3{1;BT^vIy7~jq|%m@w?Y5V_smGi<(S>N1+
zk|N#Bp#rZG3}v(C>aeD_?|KpP_EA8F^Kz~%s~blnR$Nis>TDdb#QW&dW(CHJU3{EN
zGOx`NVOd-`@AIrFCMFl3-qp7J-Yov^ENA2AyOSr+c3<bj8!h>L)#`%gHszA93oJc$
zm00R_d|?aSWwk)7Ipmb>$Hx}SGA#O@sojclQ4tB+ZS#?3%H;bC66I4SsBk7ud+=e+
zo=-uO(tn+@bk2QxNAA0MkU&R~V42s_T4AAu$1EOQSiIztJx}fJmFI7-<34C1&?n09
zFoF@2YJRdwvgY?EPBp_S`v=#~DsExD^|2(8b(ujJV|Hh1&C;v?Khz1Y&&=UcX4>&3
z`Ex)2vx_%1MYt+w9O!8Haay9tdS>%aIo16J|2fny++(iz>fZjlzh`g7*1pT>=N;8=
zX+JplBjRqvmxceVzeKTyNX6Uwn7HIJWl6`|mYBP&wN==@`LF-_$9o+c^kik4*($!?
z&)xHJ*WZ)p@_2aovb{g#|A=G!xHLWF+U53n+>=^v?tC71JYBPQ*8L}Egnx9dXWH@d
ztj|4bqhms1;nzG5l=sBFUjJKew*2M~!tt{c7WbW#UbxjoX4%J32ff=nUcQyQ^)Kx4
z>IR2u_rn#p>o0KBiWaEaTrsdSsE`G!Iq-J3utjis{`rjw>Eb?*f7>NYtb0&k923{I
zaKd@zidEdn<!S{VFQw|sag<Ex`EAhpx1FOUnbpA}i~$R!qrkgUW$vVImX<}|{3j=g
z24y-PdHFUhe<jy51>RFL&kI)jZur4{xn_q%k;k^6b2cAXVmMabo$uP>8p8B6!qWUq
zaHzDt{L-gg7VBp{w<(+@<R4(S`p?Ame18~Y{a)Ao6rQmfn1UHRUHx3vIVCg!0PMh5
AEC2ui

literal 0
HcmV?d00001


From 782770cf36aa24e0d8b33efb62fa0dc8425015ad Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Fri, 11 Oct 2024 17:37:48 +0330
Subject: [PATCH 05/16] Add budget slider

---
 .../components/CategoryAllocation.tsx         |  12 +-
 package.json                                  |   3 +
 yarn.lock                                     | 434 +++++++++++++++++-
 3 files changed, 436 insertions(+), 13 deletions(-)

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
index 12e484c..bcf4e8d 100644
--- a/app/allocation/components/CategoryAllocation.tsx
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -27,17 +27,17 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
 }) => {
   return (
     <div className="border rounded-lg p-4 flex justify-between">
-      <div className="flex max-w-[70%] space-x-4">
-        <div className="rounded-lg">
-          <Image src={imageSrc} alt={title} width={128} height={128} />
+      <div className="flex max-w-[75%] space-x-4">
+        <div className=" rounded-lg">
+          <Image src={imageSrc} alt={title} width={96} height={96}/>
         </div>
-        <div className='space-y-2'>
+        <div className='space-y-2 max-w-[70%]'>
           <h3 className="font-semibold text-lg">{title}</h3>
           <p className="text-sm text-gray-600">{description}</p>
           <p className="text-xs rounded-lg text-gray-800 mt-1 w-fit p-2 bg-gray-100">{projectCount} projects</p>
         </div>
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex w-fit flex-col gap-2">
         <div className="flex items-center space-x-2">
           <div className='flex justify-center gap-6 border px-10 py-2'>
             <button className="text-gray-500 font-bold">-</button>
@@ -58,7 +58,7 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
         <div className='flex gap-2 my-2'>
           <button
             onClick={onScore}
-            className="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium"
+            className="bg-primary text-white px-4 py-2 rounded-md text-sm whitespace-nowrap font-medium"
           >
             Score Projects
           </button>
diff --git a/package.json b/package.json
index 4f9b805..89b1f7c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,9 @@
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.3",
     "@smastrom/react-rating": "^1.5.0",
     "@stylistic/eslint-plugin": "^2.7.2",
     "@tanstack/react-query": "^5.54.1",
diff --git a/yarn.lock b/yarn.lock
index 439db9a..736c22a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,14 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.25.7.tgz#438f2c524071531d643c6f0188e1e28f130cebc7"
+  integrity sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==
+  dependencies:
+    "@babel/highlight" "^7.25.7"
+    picocolors "^1.0.0"
+
 "@babel/code-frame@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
@@ -30,6 +38,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.7.tgz#de86acbeb975a3e11ee92dd52223e6b03b479c56"
+  integrity sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==
+  dependencies:
+    "@babel/types" "^7.25.7"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
@@ -45,6 +63,14 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz#dba00d9523539152906ba49263e36d7261040472"
+  integrity sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==
+  dependencies:
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
 "@babel/helper-plugin-utils@^7.24.7":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
@@ -55,11 +81,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
   integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
 
+"@babel/helper-string-parser@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz#d50e8d37b1176207b4fe9acedec386c565a44a54"
+  integrity sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==
+
 "@babel/helper-validator-identifier@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
   integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
 
+"@babel/helper-validator-identifier@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz#77b7f60c40b15c97df735b38a66ba1d7c3e93da5"
+  integrity sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==
+
 "@babel/highlight@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
@@ -70,6 +106,16 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
+"@babel/highlight@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5"
+  integrity sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
@@ -77,6 +123,13 @@
   dependencies:
     "@babel/types" "^7.25.6"
 
+"@babel/parser@^7.25.7":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.8.tgz#f6aaf38e80c36129460c1657c0762db584c9d5e2"
+  integrity sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==
+  dependencies:
+    "@babel/types" "^7.25.8"
+
 "@babel/plugin-syntax-jsx@^7.22.5":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz#39a1fa4a7e3d3d7f34e2acc6be585b718d30e02d"
@@ -84,6 +137,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.25.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.19.4", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
@@ -100,6 +160,15 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
+"@babel/template@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
+  integrity sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==
+  dependencies:
+    "@babel/code-frame" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
 "@babel/traverse@^7.24.7", "@babel/traverse@^7.4.5":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
@@ -113,6 +182,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.7.tgz#83e367619be1cab8e4f2892ef30ba04c26a40fa8"
+  integrity sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==
+  dependencies:
+    "@babel/code-frame" "^7.25.7"
+    "@babel/generator" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/template" "^7.25.7"
+    "@babel/types" "^7.25.7"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
@@ -122,6 +204,15 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.7", "@babel/types@^7.25.8":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.8.tgz#5cf6037258e8a9bcad533f4979025140cb9993e1"
+  integrity sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
+    to-fast-properties "^2.0.0"
+
 "@coinbase/wallet-sdk@4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-4.0.4.tgz#634cd89bac93eeaf381a1f026476794e53431ed6"
@@ -134,6 +225,39 @@
     preact "^10.16.0"
     sha.js "^2.4.11"
 
+"@emotion/babel-plugin@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.2.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -148,6 +272,13 @@
   dependencies:
     "@emotion/memoize" "^0.9.0"
 
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -158,16 +289,78 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
+"@emotion/react@^11.13.3":
+  version "11.13.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
+  integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.13.0.tgz#633fd700db701472c7a5dbef54d6f9834e9fb190"
+  integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
 "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
+
+"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
+  integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -917,6 +1110,81 @@
     "@motionone/dom" "^10.16.4"
     tslib "^2.3.1"
 
+"@mui/core-downloads-tracker@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.3.tgz#54e22bf569a7764dff36697778cc0ae4591c7ec9"
+  integrity sha512-ajMUgdfhTb++rwqj134Cq9f4SRN8oXUqMRnY72YBnXiXai3olJLLqETheRlq3MM8wCKrbq7g6j7iWL1VvP44VQ==
+
+"@mui/material@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.1.3.tgz#1d17bb2a6aedfa78a1a7a7f3a3a2d0023427a996"
+  integrity sha512-loV5MBoMKLrK80JeWINmQ1A4eWoLv51O2dBPLJ260IAhupkB3Wol8lEQTEvvR2vO3o6xRHuXe1WaQEP6N3riqg==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/core-downloads-tracker" "^6.1.3"
+    "@mui/system" "^6.1.3"
+    "@mui/types" "^7.2.18"
+    "@mui/utils" "^6.1.3"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.1.3.tgz#ec225ec2814e89a1ce9a194809d607116885020f"
+  integrity sha512-XK5OYCM0x7gxWb/WBEySstBmn+dE3YKX7U7jeBRLm6vHU5fGUd7GiJWRirpivHjOK9mRH6E1MPIVd+ze5vguKQ==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/utils" "^6.1.3"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.1.3.tgz#f5e655f59836a5f9fce7b96cd889eee9804d277d"
+  integrity sha512-i4yh9m+eMZE3cNERpDhVr6Wn73Yz6C7MH0eE2zZvw8d7EFkIJlCQNZd1xxGZqarD2DDq2qWHcjIOucWGhxACtA==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@emotion/cache" "^11.13.1"
+    "@emotion/serialize" "^1.3.2"
+    "@emotion/sheet" "^1.4.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.1.3.tgz#64158d2feefb2e470d36c20fd144ac0a140a35fb"
+  integrity sha512-ILaD9UsLTBLjMcep3OumJMXh1PYr7aqnkHm/L47bH46+YmSL1zWAX6tWG8swEQROzW2GvYluEMp5FreoxOOC6w==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/private-theming" "^6.1.3"
+    "@mui/styled-engine" "^6.1.3"
+    "@mui/types" "^7.2.18"
+    "@mui/utils" "^6.1.3"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.18":
+  version "7.2.18"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.18.tgz#4b6385ed2f7828ef344113cdc339d6fdf8e4bc23"
+  integrity sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==
+
+"@mui/utils@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.1.3.tgz#edb63cbd18fea2341efc6d4d087dd48075fc9dba"
+  integrity sha512-4JBpLkjprlKjN10DGb1aiy/ii9TKbQ601uSHtAmYFAS879QZgAD7vRnv/YBE4iBbc7NXzFgbQMCOFrupXWekIA==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/types" "^7.2.18"
+    "@types/prop-types" "^15.7.13"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
 "@next/env@14.2.6":
   version "14.2.6"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.6.tgz#4f8ab1ca549a90bf0c83454b798b0ebae7098b15"
@@ -1128,6 +1396,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
@@ -1434,11 +1707,21 @@
   dependencies:
     undici-types "~6.19.2"
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prop-types@*":
   version "15.7.12"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
+"@types/prop-types@^15.7.13":
+  version "15.7.13"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
+
 "@types/react-dom@^18":
   version "18.3.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
@@ -1446,6 +1729,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.11":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18":
   version "18.3.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.5.tgz#5f524c2ad2089c0ff372bbdabc77ca2c4dbadf8f"
@@ -2340,6 +2630,15 @@ axobject-query@^4.1.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
   integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 "babel-plugin-styled-components@>= 1.12.0":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
@@ -2602,6 +2901,11 @@ clsx@^1.2.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2667,6 +2971,11 @@ consola@^3.2.3:
   resolved "https://registry.yarnpkg.com/consola/-/consola-3.2.3.tgz#0741857aa88cfa0d6fd53f1cff0375136e98502f"
   integrity sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 cookie-es@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cookie-es/-/cookie-es-1.2.2.tgz#18ceef9eb513cac1cb6c14bcbf8bdb2679b34821"
@@ -2677,6 +2986,17 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 crc-32@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
@@ -2729,7 +3049,7 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -2920,6 +3240,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 duplexify@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.3.tgz#a07e1c0d0a2c001158563d32592ba58bddb0236f"
@@ -3016,6 +3344,13 @@ enhanced-resolve@^5.15.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
   version "1.23.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
@@ -3592,6 +3927,11 @@ filter-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
   integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -3931,7 +4271,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4040,6 +4380,11 @@ is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
     call-bind "^1.0.2"
     get-intrinsic "^1.2.1"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -4350,11 +4695,21 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-rpc-engine@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-6.1.0.tgz#bf5ff7d029e1c1bf20cb6c0e9f348dcd8be5a393"
@@ -4990,6 +5345,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -5219,7 +5584,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5332,6 +5697,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-native-webview@^11.26.0:
   version "11.26.1"
   resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.26.1.tgz#658c09ed5162dc170b361e48c2dd26c9712879da"
@@ -5347,6 +5717,16 @@ react-switch@^7.0.0:
   dependencies:
     prop-types "^15.7.2"
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-transition-state@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-transition-state/-/react-transition-state-1.1.5.tgz#22accee21d0011b1d0245be24b6262ae67f494c3"
@@ -5471,7 +5851,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -5695,6 +6075,11 @@ source-map-js@^1.0.2, source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
@@ -5737,7 +6122,16 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5831,7 +6225,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5891,6 +6292,11 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 sucrase@^3.32.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
@@ -6385,7 +6791,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -6403,6 +6809,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -6452,6 +6867,11 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yaml@^2.3.4:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"

From 366c71183c849b357ec4c4dbdb062331ecb22487 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 13:08:22 +0330
Subject: [PATCH 06/16] Add allocation slider

---
 app/allocation/components/ConnectBox.tsx |  10 ++++----
 app/allocation/page.tsx                  |  30 ++++++++++++++++++++---
 app/comparison/card/Header-RF6.tsx       |  15 ++++++++++--
 public/assets/images/badges.png          | Bin 0 -> 7814 bytes
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 public/assets/images/badges.png

diff --git a/app/allocation/components/ConnectBox.tsx b/app/allocation/components/ConnectBox.tsx
index 93bea2e..5b7de4e 100644
--- a/app/allocation/components/ConnectBox.tsx
+++ b/app/allocation/components/ConnectBox.tsx
@@ -16,25 +16,25 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
   onConnectFarcaster
 }) => {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md max-w-md mx-auto">
-      <h2 className="text-2xl font-bold mb-4">Your voting power</h2>
+    <div className="bg-white p-6 rounded-lg border max-w-md">
+      <h2 className="text-2xl font-medium mb-4 w-full border-b pb-2">Your voting power</h2>
       
       <div className="mb-4">
         <h3 className="text-lg font-semibold mb-2">Your badges</h3>
-        <Image src="/path-to-badges-image.png" alt="Badges" width={200} height={50} />
+        <Image src="/assets/images/badges.png" alt="Badges" width={75} height={25} />
       </div>
       
       <p className="mb-4">Increase your voting power by connecting to WorldID</p>
       
       <button
         onClick={onConnectWorldID}
-        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 rounded-md mb-4 flex items-center justify-center"
+        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 mb-4 rounded-md mb-4 flex items-center justify-center"
       >
         <WorldIdIcon />
         Connect with WorldID
       </button>
       
-      <p className="mb-4">Check who delegated their voting power to you? Connect your socials to know more.</p>
+      <p className="mb-4 pt-4 border-t w-full">Check who delegated their voting power to you? Connect your socials to know more.</p>
       
       <button
         onClick={onConnectTwitter}
diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index c4d6c23..f620459 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -3,6 +3,8 @@
 import HeaderRF6 from "../comparison/card/Header-RF6"
 import CategoryAllocation, { Category } from "./components/CategoryAllocation"
 import ConnectBox from "./components/ConnectBox"
+import Slider from '@mui/material/Slider';
+
 
 const Categories : Category[] = [
   {
@@ -44,9 +46,31 @@ const AllocationPage = () => {
           <div className="border rounded-md p-6 flex flex-col gap-6">
             <div>
               <h3 className="text-2xl font-bold w-full border-b pb-2 mb-4"> Your budget </h3>
-              <div className="flex justify-between">
-                <p> Slider Component Here </p>
+              <div className="flex flex-col justify-between">
                 <p> Choose how much OP should be dedicated to this round, or delegate this decision to someone you trust. </p>
+                <div className="flex items-center gap-4 my-3">
+                  <span> 2M </span>
+                  <Slider
+                    className="max-w-[55%] my-2 text-[#aaaaaa]"
+                    defaultValue={2}
+                    shiftStep={0.25}
+                    step={0.25}
+                    marks
+                    min={2}
+                    max={8}
+                  />
+                  <span> 8M </span>
+                  <div className="bg-gray-50 border text-gray-500 w-fit text-sm px-[53px] py-2">
+                    {(33 * 100000).toLocaleString()} OP
+                  </div>
+                  <button
+                    onClick={() => {}}
+                    className="text-gray-700 px-4 py-2 border rounded-md text-sm font-medium"
+                  >
+                    Delegate
+                  </button>
+
+                </div>
               </div>
             </div>
             <div>
@@ -61,7 +85,7 @@ const AllocationPage = () => {
             </div>
           </div>
         </div>
-        <div className="max-w-[25%]">
+        <div className="max-w-[25%] mt-28">
           <ConnectBox onConnectFarcaster={() => {}} onConnectTwitter={() => {}} onConnectWorldID={() => {}}/>
         </div>
       </div>
diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx
index b3683a1..e084c8b 100644
--- a/app/comparison/card/Header-RF6.tsx
+++ b/app/comparison/card/Header-RF6.tsx
@@ -9,6 +9,9 @@ interface HeaderProps {
   isFirstSelection?: boolean
 }
 
+const PAIRWISE_REPORT_URL =
+  'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+';
+
 const HeaderRF6: React.FC<HeaderProps> = ({
   category,
   isFirstSelection,
@@ -42,10 +45,18 @@ const HeaderRF6: React.FC<HeaderProps> = ({
           </div>
         )}
         <div className="flex items-center gap-4">
-          <span className="rounded-full bg-blue-100 px-3 py-1 text-center text-sm text-blue-link">
+          {/* <span className="rounded-full bg-blue-100 px-3 py-1 text-center text-sm text-blue-link">
             {category}
-          </span>
+          </span> */}
           <ConnectButton />
+          <button
+            className="rounded-lg border border-gray-200 p-2 text-sm mr-8"
+            onClick={() =>
+              window.open(PAIRWISE_REPORT_URL + question, '_blank')
+            }
+          >
+            Report an issue
+          </button>
         </div>
       </div>
     </div>
diff --git a/public/assets/images/badges.png b/public/assets/images/badges.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba9a20de83bb4ec82942ea18cbc5feef53196e94
GIT binary patch
literal 7814
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
Y7kfi6QGQf2q5uE@07*qoM6N<$f~PsmdH?_b

literal 0
HcmV?d00001


From b784b52e8dd70080a558b4a3352369793cba84d0 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 14:40:48 +0330
Subject: [PATCH 07/16] Add modify percentages logic

---
 app/allocation/utils.ts | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 app/allocation/utils.ts

diff --git a/app/allocation/utils.ts b/app/allocation/utils.ts
new file mode 100644
index 0000000..27c5c3f
--- /dev/null
+++ b/app/allocation/utils.ts
@@ -0,0 +1,36 @@
+interface RankItem {
+  id: number;
+  percentage: number;
+  locked: boolean;
+}
+
+const roundFractions = (value: number, fractions: number) => {
+  return Math.round(value * Math.pow(10, fractions)) / Math.pow(10, fractions)
+}
+
+const modifyPercentage = <T extends RankItem>(values: T[], newValue: T) : T[] => {
+  // const totalPercentage = 100
+
+  const currIndex = values.findIndex((el) => el.id === newValue.id)
+
+  if (currIndex === -1) throw new Error ("New value id not found");
+
+  const newValueDifference = newValue.percentage - values[currIndex].percentage
+
+  const restSum = values.reduce((acc, curr) => {
+    if (curr.id === newValue.id || curr.locked) return acc
+    else return acc + curr.percentage
+  }, 0)
+
+  if (Math.abs(newValueDifference) > restSum) throw new Error("Modification not possible")
+
+  return values.map((item) => {
+    if (item.id === newValue.id) return newValue
+    if (item.locked) return item
+    else return {
+      ...item,
+      percentage: roundFractions(item.percentage + (-1 * newValueDifference * item.percentage / restSum), 2)
+    }
+
+  })
+}
\ No newline at end of file

From a08d39435cc1db9a7010c8de0cf035729fdf1ff6 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 18:15:38 +0330
Subject: [PATCH 08/16] More improvements to category allocation

---
 .../components/CategoryAllocation.tsx         | 115 ++++++++++----
 app/allocation/page.tsx                       | 140 +++++++++++++-----
 app/allocation/utils.ts                       |  49 +++---
 app/globals.css                               |   8 +
 package.json                                  |   2 +
 yarn.lock                                     |  17 +++
 6 files changed, 243 insertions(+), 88 deletions(-)

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
index bcf4e8d..a29115d 100644
--- a/app/allocation/components/CategoryAllocation.tsx
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -1,18 +1,22 @@
+import debounce from 'lodash.debounce';
 import Image from 'next/image';
-import { FC } from 'react';
+import { ChangeEventHandler, FC, useEffect, useRef } from 'react';
 
 export interface Category {
-  imageSrc: string;
-  title: string;
-  description: string;
-  projectCount: number;
+  id: number
+  imageSrc: string
+  title: string
+  description: string
+  projectCount: number
 }
 
 interface CategoryAllocationProps extends Category {
-  allocationPercentage: number;
-  onDelegate: () => void;
-  onScore: () => void;
-  onLockClick: () => void;
+  allocationPercentage: number
+  onDelegate: () => void
+  onScore: () => void
+  onLockClick: () => void
+  locked: boolean
+  onPercentageChange: (value: number) => void
 }
 
 const CategoryAllocation: FC<CategoryAllocationProps> = ({
@@ -24,47 +28,102 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   onDelegate,
   onScore,
   onLockClick,
+  locked,
+  onPercentageChange,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = debounce((event) => {
+    const value = event.target.value;
+    onPercentageChange(Number(value));
+  }, 1500);
+
+  useEffect(() => {
+    if (inputRef.current?.value) {
+      inputRef.current.value = `${allocationPercentage}`;
+    }
+  }, [allocationPercentage]);
+
   return (
-    <div className="border rounded-lg p-4 flex justify-between">
+    <div className="flex justify-between rounded-lg border p-4">
       <div className="flex max-w-[75%] space-x-4">
         <div className=" rounded-lg">
-          <Image src={imageSrc} alt={title} width={96} height={96}/>
+          <Image src={imageSrc} alt={title} width={96} height={96} />
         </div>
-        <div className='space-y-2 max-w-[70%]'>
-          <h3 className="font-semibold text-lg">{title}</h3>
+        <div className="max-w-[70%] space-y-2">
+          <h3 className="text-lg font-semibold">{title}</h3>
           <p className="text-sm text-gray-600">{description}</p>
-          <p className="text-xs rounded-lg text-gray-800 mt-1 w-fit p-2 bg-gray-100">{projectCount} projects</p>
+          <p className="mt-1 w-fit rounded-lg bg-gray-100 p-2 text-xs text-gray-800">
+            {projectCount}
+            {' '}
+            projects
+          </p>
         </div>
       </div>
       <div className="flex w-fit flex-col gap-2">
         <div className="flex items-center space-x-2">
-          <div className='flex justify-center gap-6 border px-10 py-2'>
-            <button className="text-gray-500 font-bold">-</button>
-            <div className="bg-white rounded">
-              <span className="font-semibold">{allocationPercentage.toFixed(1)}%</span>
+          <div className="flex justify-center gap-6 border px-10 py-2">
+            <button className="font-bold text-gray-500">-</button>
+            <div className="flex gap-1 rounded bg-white">
+              <input
+                onChange={handleInputChange}
+                ref={inputRef}
+                className="w-16 text-center font-semibold"
+                type="number"
+                defaultValue={allocationPercentage}
+              />
+              <span> % </span>
             </div>
-            <button className="text-gray-500 font-bold">+</button>
+            <button className="font-bold text-gray-500">+</button>
           </div>
           <button onClick={onLockClick} className="text-gray-500">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
-            </svg>
+            {locked
+              ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-5"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0
+                     01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )
+              : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-5"
+                    viewBox="0 0 20 20"
+                    fill="red"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0
+                     01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
           </button>
         </div>
-        <div className="bg-gray-50 border text-gray-500 w-fit text-sm px-[53px] py-2">
-          {(allocationPercentage * 100000).toLocaleString()} OP
+        <div className="w-fit border bg-gray-50 px-[53px] py-2 text-sm text-gray-500">
+          {(allocationPercentage * 100000).toLocaleString()}
+          {' '}
+          OP
         </div>
-        <div className='flex gap-2 my-2'>
+        <div className="my-2 flex gap-2">
           <button
             onClick={onScore}
-            className="bg-primary text-white px-4 py-2 rounded-md text-sm whitespace-nowrap font-medium"
+            className="whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-white"
           >
             Score Projects
           </button>
           <button
             onClick={onDelegate}
-            className="text-gray-700 px-4 py-2 border rounded-md text-sm font-medium"
+            className="rounded-md border px-4 py-2 text-sm font-medium text-gray-700"
           >
             Delegate
           </button>
@@ -75,4 +134,4 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   );
 };
 
-export default CategoryAllocation;
\ No newline at end of file
+export default CategoryAllocation;
diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index f620459..4ebe91d 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -1,33 +1,67 @@
 'use client';
 
-import HeaderRF6 from "../comparison/card/Header-RF6"
-import CategoryAllocation, { Category } from "./components/CategoryAllocation"
-import ConnectBox from "./components/ConnectBox"
+import { useState } from 'react';
 import Slider from '@mui/material/Slider';
+import HeaderRF6 from '../comparison/card/Header-RF6';
+import CategoryAllocation, { Category } from './components/CategoryAllocation';
+import ConnectBox from './components/ConnectBox';
+import { modifyPercentage, RankItem } from './utils';
 
-
-const Categories : Category[] = [
+const Categories: Category[] = [
   {
-    title: "Infrastructure & Tooling",
-    description: "Ethereum Core Contributions are infrastructure which supports, or is a dependency, of the OP Stack.",
-    imageSrc: "/assets/images/category-it.png",
-    projectCount: 20
+    id: 1,
+    title: 'Infrastructure & Tooling',
+    description: 'Ethereum Core Contributions are infrastructure which supports, or is a dependency, of the OP Stack.',
+    imageSrc: '/assets/images/category-it.png',
+    projectCount: 20,
   },
   {
-    title: "Gov Research & Analytics",
-    description: "Direct research & development contributions to the OP Stack, and contributions that support protocol upgrades.",
-    imageSrc: "/assets/images/category-gra.png",
-    projectCount: 15
+    id: 2,
+    title: 'Gov Research & Analytics',
+    description: `Direct research & development contributions to the OP Stack, and contributions that
+    support protocol upgrades.`,
+    imageSrc: '/assets/images/category-gra.png',
+    projectCount: 15,
   },
   {
-    title: "Governance Leadership",
-    description: "Efforts that improve the usability and accessibility of the OP Stack through tooling enhancements.",
-    imageSrc: "/assets/images/category-gl.png",
-    projectCount: 30
+    id: 3,
+    title: 'Governance Leadership',
+    description: 'Efforts that improve the usability and accessibility of the OP Stack through tooling enhancements.',
+    imageSrc: '/assets/images/category-gl.png',
+    projectCount: 30,
   },
-]
+];
+
+const ranks: RankItem[] = [{
+  id: 1,
+  locked: false,
+  percentage: 33.4,
+}, {
+  id: 2,
+  locked: false,
+  percentage: 33.3,
+}, {
+  id: 3,
+  locked: false,
+  percentage: 33.3,
+}];
 
 const AllocationPage = () => {
+  const [categoryRanking, setCategoryRanking] = useState(ranks);
+
+  const handleLock = (id: RankItem['id']) => () => {
+    const currValue = categoryRanking.find(el => el.id === id)!;
+    const newRanking = modifyPercentage(categoryRanking, { ...currValue, locked: !currValue.locked });
+    setCategoryRanking(newRanking);
+  };
+
+  const handleNewValue = (id: RankItem['id']) => (percentage: number) => {
+    console.log('Now is running');
+    const currValue = categoryRanking.find(el => el.id === id)!;
+    const newRanking = modifyPercentage(categoryRanking, { ...currValue, percentage });
+    setCategoryRanking(newRanking);
+  };
+
   return (
     <div>
       <HeaderRF6
@@ -35,23 +69,33 @@ const AllocationPage = () => {
         category="category"
         question="Which project had the greatest impact on the OP Stack?"
         isFirstSelection={false}
-        />
-      <div className="flex gap-4 p-16 justify-between">
-        <div className="max-w-[65%] flex flex-col gap-3">
+      />
+      <div className="flex justify-between gap-4 p-16">
+        <div className="flex max-w-[65%] flex-col gap-3">
           <h2 className="text-3xl font-bold"> Round 6: Governance </h2>
-          <p className="text-gray-600"> Retroactive Public Goods Funding (Retro Funding) 6 will reward contributions to Optimism Governance,
-             including governance infrastructure & tooling, governance analytics, and governance leadership. </p>
-          <p className="bg-yellow-50 p-4"> Decide on the budget for this round, decide how much should go to each category, and score projects in each category using the Pairwise raking. You can also choose to delegate your decision to someone
-             on X (Twitter) or Farcaster. By connecting your X and Farcaster accounts, find out if someone delegated voting decision to you.  </p>
-          <div className="border rounded-md p-6 flex flex-col gap-6">
+          <p className="text-gray-600">
+            Retroactive Public Goods Funding (Retro Funding) 6 will reward contributions to Optimism Governance,
+            including governance infrastructure & tooling, governance analytics, and governance leadership.
+          </p>
+          <p className="bg-yellow-50 p-4">
+            Decide on the budget for this round, decide how much should go to each category,
+            and score projects in each category using the Pairwise raking.
+            You can also choose to delegate your decision to someone
+            on X (Twitter) or Farcaster. By connecting your X and Farcaster accounts, find out
+            if someone delegated voting decision to you.
+          </p>
+          <div className="flex flex-col gap-6 rounded-md border p-6">
             <div>
-              <h3 className="text-2xl font-bold w-full border-b pb-2 mb-4"> Your budget </h3>
+              <h3 className="mb-4 w-full border-b pb-2 text-2xl font-bold"> Your budget </h3>
               <div className="flex flex-col justify-between">
-                <p> Choose how much OP should be dedicated to this round, or delegate this decision to someone you trust. </p>
-                <div className="flex items-center gap-4 my-3">
+                <p>
+                  Choose how much OP should be dedicated to this round,
+                  or delegate this decision to someone you trust.
+                </p>
+                <div className="my-3 flex items-center gap-4">
                   <span> 2M </span>
                   <Slider
-                    className="max-w-[55%] my-2 text-[#aaaaaa]"
+                    className="my-2 max-w-[55%] text-[#aaaaaa]"
                     defaultValue={2}
                     shiftStep={0.25}
                     step={0.25}
@@ -60,12 +104,14 @@ const AllocationPage = () => {
                     max={8}
                   />
                   <span> 8M </span>
-                  <div className="bg-gray-50 border text-gray-500 w-fit text-sm px-[53px] py-2">
-                    {(33 * 100000).toLocaleString()} OP
+                  <div className="w-fit border bg-gray-50 px-[53px] py-2 text-sm text-gray-500">
+                    {(33 * 100000).toLocaleString()}
+                    {' '}
+                    OP
                   </div>
                   <button
                     onClick={() => {}}
-                    className="text-gray-700 px-4 py-2 border rounded-md text-sm font-medium"
+                    className="rounded-md border px-4 py-2 text-sm font-medium text-gray-700"
                   >
                     Delegate
                   </button>
@@ -74,19 +120,35 @@ const AllocationPage = () => {
               </div>
             </div>
             <div>
-              <h3 className="text-2xl font-bold w-full border-b pb-2 mb-4"> Categories </h3>
+              <h3 className="mb-4 w-full border-b pb-2 text-2xl font-bold"> Categories </h3>
               <div>
-                <p className="my-4"> Score projects in each category doing the Pairwise ranking, or delegate this decision to someone you trust. </p>
+                <p className="my-4">
+                  Score projects in each category doing the Pairwise ranking,
+                  or delegate this decision to someone you trust.
+                </p>
                 <div className="flex flex-col gap-4">
-                {Categories.map((cat) => <CategoryAllocation {...cat} onDelegate={() => {}} 
-                  onLockClick={() => {}} onScore={() => {}} allocationPercentage={33.3}/>)}
+                  {Categories.map((cat) => {
+                    const rank = categoryRanking.find(el => el.id === cat.id)!;
+                    return (
+                      <CategoryAllocation
+                        {...cat}
+                        key={cat.title}
+                        locked={rank.locked}
+                        onDelegate={() => {}}
+                        onLockClick={handleLock(cat.id)}
+                        onScore={() => {}}
+                        allocationPercentage={rank.percentage}
+                        onPercentageChange={handleNewValue(cat.id)}
+                      />
+                    );
+                  })}
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="max-w-[25%] mt-28">
-          <ConnectBox onConnectFarcaster={() => {}} onConnectTwitter={() => {}} onConnectWorldID={() => {}}/>
+        <div className="mt-28 max-w-[25%]">
+          <ConnectBox onConnectFarcaster={() => {}} onConnectTwitter={() => {}} onConnectWorldID={() => {}} />
         </div>
       </div>
     </div>
diff --git a/app/allocation/utils.ts b/app/allocation/utils.ts
index 27c5c3f..aaee0af 100644
--- a/app/allocation/utils.ts
+++ b/app/allocation/utils.ts
@@ -1,36 +1,43 @@
-interface RankItem {
-  id: number;
-  percentage: number;
-  locked: boolean;
+export interface RankItem {
+  id: number
+  percentage: number
+  locked: boolean
 }
 
 const roundFractions = (value: number, fractions: number) => {
-  return Math.round(value * Math.pow(10, fractions)) / Math.pow(10, fractions)
-}
+  return Math.round(value * Math.pow(10, fractions)) / Math.pow(10, fractions);
+};
 
-const modifyPercentage = <T extends RankItem>(values: T[], newValue: T) : T[] => {
+export const modifyPercentage = <T extends RankItem>(values: T[], newValue: T): T[] => {
   // const totalPercentage = 100
 
-  const currIndex = values.findIndex((el) => el.id === newValue.id)
+  const currIndex = values.findIndex(el => el.id === newValue.id);
+
+  if (currIndex === -1) throw new Error ('New value id not found');
 
-  if (currIndex === -1) throw new Error ("New value id not found");
+  console.log(values, newValue);
 
-  const newValueDifference = newValue.percentage - values[currIndex].percentage
+  const newValueDifference = newValue.percentage - values[currIndex].percentage;
 
   const restSum = values.reduce((acc, curr) => {
-    if (curr.id === newValue.id || curr.locked) return acc
-    else return acc + curr.percentage
-  }, 0)
+    if (curr.id === newValue.id || curr.locked) return acc;
+    else return acc + curr.percentage;
+  }, 0);
 
-  if (Math.abs(newValueDifference) > restSum) throw new Error("Modification not possible")
+  if (newValueDifference > restSum) throw new Error('Modification not possible');
 
-  return values.map((item) => {
-    if (item.id === newValue.id) return newValue
-    if (item.locked) return item
+  const result = values.map((item) => {
+    if (item.id === newValue.id) return newValue;
+    if (item.locked) return item;
     else return {
       ...item,
-      percentage: roundFractions(item.percentage + (-1 * newValueDifference * item.percentage / restSum), 2)
-    }
+      percentage: roundFractions(item.percentage + (-1 * newValueDifference * item.percentage / restSum), 2),
+    };
+  });
+
+  const sum = result.reduce((acc, curr) => acc += curr.percentage, 0);
+
+  if (sum > 100.1) throw new Error('Bigger than 100 error');
 
-  })
-}
\ No newline at end of file
+  return result;
+};
diff --git a/app/globals.css b/app/globals.css
index ebf078f..345cf0b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,6 +48,14 @@ body {
   background: #F2F3F8;
 }
 
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;
diff --git a/package.json b/package.json
index 89b1f7c..7941873 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@smastrom/react-rating": "^1.5.0",
     "@stylistic/eslint-plugin": "^2.7.2",
     "@tanstack/react-query": "^5.54.1",
+    "@types/lodash.debounce": "^4.0.9",
     "@web3modal/base": "^5.0.7",
     "@web3modal/wagmi": "^5.0.7",
     "axios": "^1.7.7",
@@ -23,6 +24,7 @@
     "eslint-plugin-tailwindcss": "^3.17.4",
     "ethers": "^5.7.2",
     "jose": "^5.8.0",
+    "lodash.debounce": "^4.0.8",
     "lottie-react": "^2.4.0",
     "next": "14.2.6",
     "react": "^18",
diff --git a/yarn.lock b/yarn.lock
index 736c22a..d288c29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1688,6 +1688,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash.debounce@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz#0f5f21c507bce7521b5e30e7a24440975ac860a5"
+  integrity sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6"
+  integrity sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==
+
 "@types/ms@*":
   version "0.7.34"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
@@ -4894,6 +4906,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.isequal@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"

From d2c08a692525de7fe25a418be2e08b0621b5e014 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 18:25:10 +0330
Subject: [PATCH 09/16] Add lock/unlock icons

---
 .../components/CategoryAllocation.tsx         | 30 +++----------------
 public/assets/icon-components/Lock.tsx        | 22 ++++++++++++++
 public/assets/icon-components/Unlock.tsx      | 21 +++++++++++++
 3 files changed, 47 insertions(+), 26 deletions(-)
 create mode 100644 public/assets/icon-components/Lock.tsx
 create mode 100644 public/assets/icon-components/Unlock.tsx

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
index a29115d..427ecad 100644
--- a/app/allocation/components/CategoryAllocation.tsx
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -1,6 +1,8 @@
 import debounce from 'lodash.debounce';
 import Image from 'next/image';
 import { ChangeEventHandler, FC, useEffect, useRef } from 'react';
+import { UnlockIcon } from '@/public/assets/icon-components/Unlock';
+import { LockIcon } from '@/public/assets/icon-components/Lock';
 
 export interface Category {
   id: number
@@ -78,34 +80,10 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
           <button onClick={onLockClick} className="text-gray-500">
             {locked
               ? (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="size-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0
-                     01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
+                  <LockIcon />
                 )
               : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="size-5"
-                    viewBox="0 0 20 20"
-                    fill="red"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0
-                     01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
+                  <UnlockIcon />
                 )}
           </button>
         </div>
diff --git a/public/assets/icon-components/Lock.tsx b/public/assets/icon-components/Lock.tsx
new file mode 100644
index 0000000..c5cdca8
--- /dev/null
+++ b/public/assets/icon-components/Lock.tsx
@@ -0,0 +1,22 @@
+export const LockIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.1673 8.33333V6.66667C14.1673 4.36548 12.3018 2.5 10.0007 2.5C7.69946
+      2.5 5.83398 4.36548 5.83398 6.66667V8.33333M10.0007 12.0833V13.75M7.33398 17.5H12.6673C14.0674
+       17.5 14.7675 17.5 15.3023 17.2275C15.7727 16.9878 16.1552 16.6054 16.3948 16.135C16.6673 15.6002
+       16.6673 14.9001 16.6673 13.5V12.3333C16.6673 10.9332 16.6673 10.2331 16.3948 9.69836C16.1552 9.22795
+       15.7727 8.8455 15.3023 8.60582C14.7675 8.33333 14.0674 8.33333 12.6673 8.33333H7.33398C5.93385
+        8.33333 5.23379 8.33333 4.69901 8.60582C4.2286 8.8455 3.84615 9.22795 3.60647 9.69836C3.33398
+        10.2331 3.33398 10.9332 3.33398 12.3333V13.5C3.33398 14.9001 3.33398 15.6002 3.60647
+        16.135C3.84615 16.6054 4.2286 16.9878 4.69901 17.2275C5.23379 17.5 5.93385 17.5 7.33398
+        17.5Z"
+        stroke="#344054"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+  );
+};
diff --git a/public/assets/icon-components/Unlock.tsx b/public/assets/icon-components/Unlock.tsx
new file mode 100644
index 0000000..52a4596
--- /dev/null
+++ b/public/assets/icon-components/Unlock.tsx
@@ -0,0 +1,21 @@
+export const UnlockIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.83398 8.33333V6.66667C5.83398 4.36548 7.69946 2.5 10.0007 2.5C11.7092 2.5 13.1777
+3.52841 13.8206 5M10.0007 12.0833V13.75M7.33398 17.5H12.6673C14.0674 17.5 14.7675 17.5 15.3023
+ 17.2275C15.7727 16.9878 16.1552 16.6054 16.3948 16.135C16.6673 15.6002 16.6673 14.9001 16.6673
+  13.5V12.3333C16.6673 10.9332 16.6673 10.2331 16.3948 9.69836C16.1552 9.22795 15.7727 8.8455
+  15.3023 8.60582C14.7675 8.33333 14.0674 8.33333 12.6673 8.33333H7.33398C5.93385 8.33333 5.23379
+  8.33333 4.69901 8.60582C4.2286 8.8455 3.84615 9.22795 3.60647 9.69836C3.33398 10.2331 3.33398
+   10.9332 3.33398 12.3333V13.5C3.33398 14.9001 3.33398 15.6002 3.60647 16.135C3.84615 16.6054
+    4.2286 16.9878 4.69901 17.2275C5.23379 17.5 5.93385 17.5 7.33398 17.5Z"
+        stroke="#475467"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+  );
+};

From 25a6f1814e530c9c11290d39f8000079760fc6d3 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 18:37:07 +0330
Subject: [PATCH 10/16] Add plus/minus functionality

---
 .../components/CategoryAllocation.tsx         | 21 ++++++++++++++-----
 app/allocation/utils.ts                       |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
index 427ecad..5858a58 100644
--- a/app/allocation/components/CategoryAllocation.tsx
+++ b/app/allocation/components/CategoryAllocation.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { ChangeEventHandler, FC, useEffect, useRef } from 'react';
 import { UnlockIcon } from '@/public/assets/icon-components/Unlock';
 import { LockIcon } from '@/public/assets/icon-components/Lock';
+import { roundFractions } from '../utils';
 
 export interface Category {
   id: number
@@ -36,9 +37,19 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = debounce((event) => {
     const value = event.target.value;
-    onPercentageChange(Number(value));
+    onPercentageChange(roundFractions(Number(value), 2));
   }, 1500);
 
+  const handlePlus = debounce(() => {
+    const value = allocationPercentage;
+    onPercentageChange(Number(Math.min(value + 1, 100)));
+  }, 150);
+
+  const handleMinus = debounce(() => {
+    const value = allocationPercentage;
+    onPercentageChange(Math.max(Number(value - 1), 0));
+  }, 150);
+
   useEffect(() => {
     if (inputRef.current?.value) {
       inputRef.current.value = `${allocationPercentage}`;
@@ -64,18 +75,18 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
       <div className="flex w-fit flex-col gap-2">
         <div className="flex items-center space-x-2">
           <div className="flex justify-center gap-6 border px-10 py-2">
-            <button className="font-bold text-gray-500">-</button>
-            <div className="flex gap-1 rounded bg-white">
+            <button onClick={handleMinus} className="font-bold text-gray-500">-</button>
+            <div className="flex gap-0 rounded bg-white">
               <input
                 onChange={handleInputChange}
                 ref={inputRef}
-                className="w-16 text-center font-semibold"
+                className="w-12 text-center font-semibold outline-none"
                 type="number"
                 defaultValue={allocationPercentage}
               />
               <span> % </span>
             </div>
-            <button className="font-bold text-gray-500">+</button>
+            <button onClick={handlePlus} className="font-bold text-gray-500">+</button>
           </div>
           <button onClick={onLockClick} className="text-gray-500">
             {locked
diff --git a/app/allocation/utils.ts b/app/allocation/utils.ts
index aaee0af..c704572 100644
--- a/app/allocation/utils.ts
+++ b/app/allocation/utils.ts
@@ -4,7 +4,7 @@ export interface RankItem {
   locked: boolean
 }
 
-const roundFractions = (value: number, fractions: number) => {
+export const roundFractions = (value: number, fractions: number) => {
   return Math.round(value * Math.pow(10, fractions)) / Math.pow(10, fractions);
 };
 

From eca04cfd859f8aef3d29a5994e5c53cf36c7b757 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 21:11:33 +0330
Subject: [PATCH 11/16] Improve slider aesthetics

---
 app/allocation/components/Slider.tsx | 50 ++++++++++++++++++++++++++++
 app/allocation/page.tsx              | 31 +++++++++++------
 2 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 app/allocation/components/Slider.tsx

diff --git a/app/allocation/components/Slider.tsx b/app/allocation/components/Slider.tsx
new file mode 100644
index 0000000..e8bce3e
--- /dev/null
+++ b/app/allocation/components/Slider.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Slider, { SliderProps } from '@mui/material/Slider';
+import { styled } from '@mui/material/styles';
+
+const StyledSlider = styled(Slider)({
+  'color': '#c0c0c0',
+  'height': 8,
+  '& .MuiSlider-track': {
+    border: 'none',
+  },
+  '& .MuiSlider-thumb': {
+    'height': 24,
+    'width': 24,
+    'backgroundColor': '#fff',
+    'border': '2px solid #323232',
+    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
+      boxShadow: 'inherit',
+    },
+    '&::before': {
+      display: 'none',
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    'lineHeight': 1.2,
+    'fontSize': 12,
+    'background': 'unset',
+    'padding': 0,
+    'width': 32,
+    'height': 32,
+    'borderRadius': '50% 50% 50% 0',
+    'backgroundColor': '#52af77',
+    'transformOrigin': 'bottom left',
+    'transform': 'translate(50%, -100%) rotate(-45deg) scale(0)',
+    '&::before': { display: 'none' },
+    '&.MuiSlider-valueLabelOpen': {
+      transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
+    },
+    '& > *': {
+      transform: 'rotate(45deg)',
+    },
+  },
+});
+
+export const CustomizedSlider: React.FC<SliderProps> = (props) => {
+  return (
+    <StyledSlider
+      {...props}
+    />
+  );
+};
diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index 4ebe91d..03b99cf 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import Slider from '@mui/material/Slider';
 import HeaderRF6 from '../comparison/card/Header-RF6';
 import CategoryAllocation, { Category } from './components/CategoryAllocation';
 import ConnectBox from './components/ConnectBox';
 import { modifyPercentage, RankItem } from './utils';
+import { CustomizedSlider } from './components/Slider';
 
 const Categories: Category[] = [
   {
@@ -48,6 +48,7 @@ const ranks: RankItem[] = [{
 
 const AllocationPage = () => {
   const [categoryRanking, setCategoryRanking] = useState(ranks);
+  const [totalValue, setTotalValue] = useState(2);
 
   const handleLock = (id: RankItem['id']) => () => {
     const currValue = categoryRanking.find(el => el.id === id)!;
@@ -56,12 +57,17 @@ const AllocationPage = () => {
   };
 
   const handleNewValue = (id: RankItem['id']) => (percentage: number) => {
-    console.log('Now is running');
     const currValue = categoryRanking.find(el => el.id === id)!;
     const newRanking = modifyPercentage(categoryRanking, { ...currValue, percentage });
     setCategoryRanking(newRanking);
   };
 
+  const handleSliderChange = (event: Event, newValue: number | number[]) => {
+    if (typeof newValue === 'number') {
+      setTotalValue(newValue);
+    }
+  };
+
   return (
     <div>
       <HeaderRF6
@@ -94,24 +100,25 @@ const AllocationPage = () => {
                 </p>
                 <div className="my-3 flex items-center gap-4">
                   <span> 2M </span>
-                  <Slider
-                    className="my-2 max-w-[55%] text-[#aaaaaa]"
-                    defaultValue={2}
-                    shiftStep={0.25}
-                    step={0.25}
+                  <CustomizedSlider
+                    className="my-2 min-w-[55%]"
+                    value={totalValue}
+                    onChange={handleSliderChange}
+                    shiftStep={0.1}
+                    step={0.1}
                     marks
                     min={2}
                     max={8}
                   />
                   <span> 8M </span>
-                  <div className="w-fit border bg-gray-50 px-[53px] py-2 text-sm text-gray-500">
-                    {(33 * 100000).toLocaleString()}
+                  <div className="w-64 whitespace-nowrap border bg-gray-50 py-2 text-center text-sm text-gray-500">
+                    {(totalValue * 1_000_000).toLocaleString()}
                     {' '}
                     OP
                   </div>
                   <button
                     onClick={() => {}}
-                    className="rounded-md border px-4 py-2 text-sm font-medium text-gray-700"
+                    className="ml-auto rounded-md border px-4 py-2 text-sm font-medium text-gray-700"
                   >
                     Delegate
                   </button>
@@ -145,7 +152,11 @@ const AllocationPage = () => {
                 </div>
               </div>
             </div>
+            <button className="w-fit self-end rounded-lg bg-primary px-4 py-3 text-white">
+              Submit your votes
+            </button>
           </div>
+
         </div>
         <div className="mt-28 max-w-[25%]">
           <ConnectBox onConnectFarcaster={() => {}} onConnectTwitter={() => {}} onConnectWorldID={() => {}} />

From ca0e0c19de246149d146a126a9e80aaa656f2484 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 21:12:02 +0330
Subject: [PATCH 12/16] Add badges to the header

---
 app/allocation/components/ConnectBox.tsx |   6 ++++--
 app/comparison/card/Header-RF6.tsx       |  14 ++++++++------
 public/assets/images/badges.png          | Bin 7814 -> 0 bytes
 public/assets/images/badges.svg          |  19 +++++++++++++++++++
 4 files changed, 31 insertions(+), 8 deletions(-)
 delete mode 100644 public/assets/images/badges.png
 create mode 100644 public/assets/images/badges.svg

diff --git a/app/allocation/components/ConnectBox.tsx b/app/allocation/components/ConnectBox.tsx
index 5b7de4e..fa36a93 100644
--- a/app/allocation/components/ConnectBox.tsx
+++ b/app/allocation/components/ConnectBox.tsx
@@ -19,9 +19,11 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
     <div className="bg-white p-6 rounded-lg border max-w-md">
       <h2 className="text-2xl font-medium mb-4 w-full border-b pb-2">Your voting power</h2>
       
-      <div className="mb-4">
+      <div className="mb-2">
         <h3 className="text-lg font-semibold mb-2">Your badges</h3>
-        <Image src="/assets/images/badges.png" alt="Badges" width={75} height={25} />
+        <button>
+          <Image src="/assets/images/badges.svg" alt="Badges" width={64} height={16} />
+        </button>
       </div>
       
       <p className="mb-4">Increase your voting power by connecting to WorldID</p>
diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx
index e084c8b..83b54ea 100644
--- a/app/comparison/card/Header-RF6.tsx
+++ b/app/comparison/card/Header-RF6.tsx
@@ -9,12 +9,12 @@ interface HeaderProps {
   isFirstSelection?: boolean
 }
 
-const PAIRWISE_REPORT_URL =
-  'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+';
+const PAIRWISE_REPORT_URL
+  = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+';
 
 const HeaderRF6: React.FC<HeaderProps> = ({
-  category,
   isFirstSelection,
+  question,
 }) => {
   // const [isBarFixed, setIsBarFixed] = useState(false);
 
@@ -48,12 +48,14 @@ const HeaderRF6: React.FC<HeaderProps> = ({
           {/* <span className="rounded-full bg-blue-100 px-3 py-1 text-center text-sm text-blue-link">
             {category}
           </span> */}
+          <button>
+            <Image src="/assets/images/badges.svg" alt="Badges" width={64} height={16} />
+          </button>
           <ConnectButton />
           <button
-            className="rounded-lg border border-gray-200 p-2 text-sm mr-8"
+            className="mr-8 rounded-lg border border-gray-200 p-2 text-sm"
             onClick={() =>
-              window.open(PAIRWISE_REPORT_URL + question, '_blank')
-            }
+              window.open(PAIRWISE_REPORT_URL + question, '_blank')}
           >
             Report an issue
           </button>
diff --git a/public/assets/images/badges.png b/public/assets/images/badges.png
deleted file mode 100644
index ba9a20de83bb4ec82942ea18cbc5feef53196e94..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7814
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
Y7kfi6QGQf2q5uE@07*qoM6N<$f~PsmdH?_b

diff --git a/public/assets/images/badges.svg b/public/assets/images/badges.svg
new file mode 100644
index 0000000..4097fdf
--- /dev/null
+++ b/public/assets/images/badges.svg
@@ -0,0 +1,19 @@
+<svg width="72" height="32" viewBox="0 0 72 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="16" cy="16" r="15.5" fill="url(#pattern0_310_64932)" stroke="white"/>
+<circle cx="36" cy="16" r="15.5" fill="url(#pattern1_310_64932)" stroke="white"/>
+<circle cx="56" cy="16" r="15.5" fill="url(#pattern2_310_64932)" stroke="white"/>
+<defs>
+<pattern id="pattern0_310_64932" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_310_64932" transform="scale(0.015625)"/>
+</pattern>
+<pattern id="pattern1_310_64932" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_310_64932" transform="scale(0.015625)"/>
+</pattern>
+<pattern id="pattern2_310_64932" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image2_310_64932" transform="scale(0.015625)"/>
+</pattern>
+<image id="image0_310_64932" width="64" height="64" xlink:href="data:image/png;base64,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"/>
+<image id="image1_310_64932" width="64" height="64" xlink:href="data:image/png;base64,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"/>
+<image id="image2_310_64932" width="64" height="64" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

From 7ee5adbdd170b521e96a40704a60f29025d69641 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 21:33:14 +0330
Subject: [PATCH 13/16] Fix all eslint issues

---
 app/allocation/components/ConnectBox.tsx      | 39 ++++++++++---------
 app/comparison/card/Header-RF6.tsx            |  3 +-
 public/assets/icon-components/WorldIdIcon.tsx |  9 +++--
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/allocation/components/ConnectBox.tsx b/app/allocation/components/ConnectBox.tsx
index fa36a93..3b9eb58 100644
--- a/app/allocation/components/ConnectBox.tsx
+++ b/app/allocation/components/ConnectBox.tsx
@@ -5,50 +5,53 @@ import { XIcon } from '@/public/assets/icon-components/XIcon';
 import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
 
 interface ConnectBoxProps {
-  onConnectWorldID: () => void;
-  onConnectTwitter: () => void;
-  onConnectFarcaster: () => void;
+  onConnectWorldID: () => void
+  onConnectTwitter: () => void
+  onConnectFarcaster: () => void
 }
 
 const ConnectBox: React.FC<ConnectBoxProps> = ({
   onConnectWorldID,
   onConnectTwitter,
-  onConnectFarcaster
+  onConnectFarcaster,
 }) => {
   return (
-    <div className="bg-white p-6 rounded-lg border max-w-md">
-      <h2 className="text-2xl font-medium mb-4 w-full border-b pb-2">Your voting power</h2>
-      
+    <div className="max-w-md rounded-lg border bg-white p-6">
+      <h2 className="mb-4 w-full border-b pb-2 text-2xl font-medium">Your voting power</h2>
+
       <div className="mb-2">
-        <h3 className="text-lg font-semibold mb-2">Your badges</h3>
+        <h3 className="mb-2 text-lg font-semibold">Your badges</h3>
         <button>
           <Image src="/assets/images/badges.svg" alt="Badges" width={64} height={16} />
         </button>
       </div>
-      
+
       <p className="mb-4">Increase your voting power by connecting to WorldID</p>
-      
+
       <button
         onClick={onConnectWorldID}
-        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 mb-4 rounded-md mb-4 flex items-center justify-center"
+        className="mb-4 flex w-full items-center justify-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-800"
       >
         <WorldIdIcon />
         Connect with WorldID
       </button>
-      
-      <p className="mb-4 pt-4 border-t w-full">Check who delegated their voting power to you? Connect your socials to know more.</p>
-      
+
+      <p className="mb-4 w-full border-t pt-4">
+        Check who delegated their voting power
+        to you? Connect your socials to know more.
+      </p>
+
       <button
         onClick={onConnectTwitter}
-        className="w-full bg-gray-100 gap-2 text-gray-800 py-2 px-4 rounded-md mb-2 flex items-center justify-center"
+        className="mb-2 flex w-full items-center justify-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-800"
       >
         <XIcon />
         Connect with X (Twitter)
       </button>
-      
+
       <button
         onClick={onConnectFarcaster}
-        className="w-full bg-gray-100 text-gray-800 gap-2 py-2 px-4 rounded-md flex items-center justify-center"
+        className="flex w-full items-center justify-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-800"
       >
         <WarpcastIcon />
         Connect with Farcaster
@@ -57,4 +60,4 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
   );
 };
 
-export default ConnectBox;
\ No newline at end of file
+export default ConnectBox;
diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx
index 83b54ea..0f91a78 100644
--- a/app/comparison/card/Header-RF6.tsx
+++ b/app/comparison/card/Header-RF6.tsx
@@ -10,7 +10,8 @@ interface HeaderProps {
 }
 
 const PAIRWISE_REPORT_URL
-  = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+';
+  = `https://github.com/GeneralMagicio/pairwise-rf6/issues/new?
+  assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+`;
 
 const HeaderRF6: React.FC<HeaderProps> = ({
   isFirstSelection,
diff --git a/public/assets/icon-components/WorldIdIcon.tsx b/public/assets/icon-components/WorldIdIcon.tsx
index 4b55e6c..15ec453 100644
--- a/public/assets/icon-components/WorldIdIcon.tsx
+++ b/public/assets/icon-components/WorldIdIcon.tsx
@@ -1,13 +1,14 @@
+/* eslint-disable @stylistic/max-len */
 export const WorldIdIcon = () => {
   return (
     <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_302_39967)">
-      <path d="M23.6646 7.33625C23.0573 5.91091 22.1985 4.63232 21.0884 3.5214C19.9783 2.41048 18.7216 1.55109 17.2973 0.94323C15.8102 0.314411 14.2394 0 12.6266 0C10.9929 0 9.42198 0.314411 7.9558 0.94323C6.53153 1.55109 5.25388 2.41048 4.14378 3.5214C3.03369 4.63232 2.17494 5.91091 1.56753 7.33625C0.939177 8.8035 0.625 10.3756 0.625 12.0105C0.625 13.6244 0.939177 15.1965 1.56753 16.6847C2.17494 18.11 3.03369 19.3886 4.14378 20.4996C5.25388 21.6105 6.53153 22.4698 7.9558 23.0568C9.4429 23.6856 11.0138 24 12.6266 24C14.2394 24 15.8102 23.6856 17.2973 23.0568C18.7216 22.4489 19.9992 21.5895 21.1094 20.4786C22.2194 19.3677 23.0782 18.0891 23.6856 16.6637C24.314 15.1756 24.6282 13.6035 24.6282 11.9895C24.6282 10.3756 24.293 8.8035 23.6646 7.33625ZM8.647 10.8786C9.12873 8.9502 10.8882 7.54583 12.9617 7.54583H21.2979C21.8424 8.57295 22.1775 9.70477 22.3032 10.8786H8.647ZM22.3032 13.1423C22.1775 14.3161 21.8215 15.4481 21.2979 16.4751H12.9617C10.8882 16.4751 9.14965 15.0498 8.647 13.1423H22.3032ZM5.73561 5.11441C7.57879 3.26987 10.0294 2.26376 12.6266 2.26376C15.2238 2.26376 17.6744 3.26987 19.5175 5.11441C19.5804 5.1773 19.6223 5.21921 19.6851 5.2821H12.9617C11.1604 5.2821 9.48483 5.9738 8.20712 7.2524C7.20177 8.25855 6.55247 9.51615 6.34302 10.8786H2.94991C3.20125 8.69872 4.16473 6.68646 5.73561 5.11441ZM12.6266 21.7572C10.0294 21.7572 7.57879 20.7511 5.73561 18.9065C4.16473 17.3345 3.20125 15.3013 2.94991 13.1423H6.34302C6.57342 14.5048 7.22272 15.7625 8.20712 16.7686C9.48483 18.0472 11.1604 18.7389 12.9617 18.7389H19.6851C19.6223 18.8018 19.5804 18.8437 19.5175 18.9065C17.6744 20.7511 15.2238 21.7572 12.6266 21.7572Z" fill="black"/>
+        <path d="M23.6646 7.33625C23.0573 5.91091 22.1985 4.63232 21.0884 3.5214C19.9783 2.41048 18.7216 1.55109 17.2973 0.94323C15.8102 0.314411 14.2394 0 12.6266 0C10.9929 0 9.42198 0.314411 7.9558 0.94323C6.53153 1.55109 5.25388 2.41048 4.14378 3.5214C3.03369 4.63232 2.17494 5.91091 1.56753 7.33625C0.939177 8.8035 0.625 10.3756 0.625 12.0105C0.625 13.6244 0.939177 15.1965 1.56753 16.6847C2.17494 18.11 3.03369 19.3886 4.14378 20.4996C5.25388 21.6105 6.53153 22.4698 7.9558 23.0568C9.4429 23.6856 11.0138 24 12.6266 24C14.2394 24 15.8102 23.6856 17.2973 23.0568C18.7216 22.4489 19.9992 21.5895 21.1094 20.4786C22.2194 19.3677 23.0782 18.0891 23.6856 16.6637C24.314 15.1756 24.6282 13.6035 24.6282 11.9895C24.6282 10.3756 24.293 8.8035 23.6646 7.33625ZM8.647 10.8786C9.12873 8.9502 10.8882 7.54583 12.9617 7.54583H21.2979C21.8424 8.57295 22.1775 9.70477 22.3032 10.8786H8.647ZM22.3032 13.1423C22.1775 14.3161 21.8215 15.4481 21.2979 16.4751H12.9617C10.8882 16.4751 9.14965 15.0498 8.647 13.1423H22.3032ZM5.73561 5.11441C7.57879 3.26987 10.0294 2.26376 12.6266 2.26376C15.2238 2.26376 17.6744 3.26987 19.5175 5.11441C19.5804 5.1773 19.6223 5.21921 19.6851 5.2821H12.9617C11.1604 5.2821 9.48483 5.9738 8.20712 7.2524C7.20177 8.25855 6.55247 9.51615 6.34302 10.8786H2.94991C3.20125 8.69872 4.16473 6.68646 5.73561 5.11441ZM12.6266 21.7572C10.0294 21.7572 7.57879 20.7511 5.73561 18.9065C4.16473 17.3345 3.20125 15.3013 2.94991 13.1423H6.34302C6.57342 14.5048 7.22272 15.7625 8.20712 16.7686C9.48483 18.0472 11.1604 18.7389 12.9617 18.7389H19.6851C19.6223 18.8018 19.5804 18.8437 19.5175 18.9065C17.6744 20.7511 15.2238 21.7572 12.6266 21.7572Z" fill="black" />
       </g>
       <defs>
-      <clipPath id="clip0_302_39967">
-      <rect width="24.75" height="24" fill="white" transform="translate(0.625)"/>
-      </clipPath>
+        <clipPath id="clip0_302_39967">
+          <rect width="24.75" height="24" fill="white" transform="translate(0.625)" />
+        </clipPath>
       </defs>
     </svg>
   );

From 740d641be1de7d815a3a2b7f6f2701e056d0e823 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sat, 12 Oct 2024 22:01:38 +0330
Subject: [PATCH 14/16] Show error messages for percentage modification

---
 app/allocation/page.tsx | 25 +++++++++++++++++++------
 app/allocation/utils.ts |  8 +++++---
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index 03b99cf..2d4c432 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -49,17 +49,29 @@ const ranks: RankItem[] = [{
 const AllocationPage = () => {
   const [categoryRanking, setCategoryRanking] = useState(ranks);
   const [totalValue, setTotalValue] = useState(2);
+  const [percentageError, setPercentageError] = useState<string>()
 
   const handleLock = (id: RankItem['id']) => () => {
-    const currValue = categoryRanking.find(el => el.id === id)!;
-    const newRanking = modifyPercentage(categoryRanking, { ...currValue, locked: !currValue.locked });
-    setCategoryRanking(newRanking);
+    try {
+      const currValue = categoryRanking.find(el => el.id === id)!;
+      const newRanking = modifyPercentage(categoryRanking, { ...currValue, locked: !currValue.locked });
+      setCategoryRanking(newRanking);
+      setPercentageError(undefined)
+    } catch (e: any) {
+      setPercentageError(e.msg)
+    }
   };
 
   const handleNewValue = (id: RankItem['id']) => (percentage: number) => {
-    const currValue = categoryRanking.find(el => el.id === id)!;
-    const newRanking = modifyPercentage(categoryRanking, { ...currValue, percentage });
-    setCategoryRanking(newRanking);
+    try {
+      const currValue = categoryRanking.find(el => el.id === id)!;
+      const newRanking = modifyPercentage(categoryRanking, { ...currValue, percentage });
+      setCategoryRanking(newRanking);
+      setPercentageError(undefined)
+    } catch (e: any) {
+      console.log(e)
+      setPercentageError(e.msg)
+    }
   };
 
   const handleSliderChange = (event: Event, newValue: number | number[]) => {
@@ -152,6 +164,7 @@ const AllocationPage = () => {
                 </div>
               </div>
             </div>
+            <span className='className="w-fit h-4 self-end text-primary'> {percentageError ? `Error: ${percentageError}` : ""} </span>
             <button className="w-fit self-end rounded-lg bg-primary px-4 py-3 text-white">
               Submit your votes
             </button>
diff --git a/app/allocation/utils.ts b/app/allocation/utils.ts
index c704572..d1a94b1 100644
--- a/app/allocation/utils.ts
+++ b/app/allocation/utils.ts
@@ -13,7 +13,7 @@ export const modifyPercentage = <T extends RankItem>(values: T[], newValue: T):
 
   const currIndex = values.findIndex(el => el.id === newValue.id);
 
-  if (currIndex === -1) throw new Error ('New value id not found');
+  if (currIndex === -1) throw ({ msg: 'New value id not found' });
 
   console.log(values, newValue);
 
@@ -24,7 +24,7 @@ export const modifyPercentage = <T extends RankItem>(values: T[], newValue: T):
     else return acc + curr.percentage;
   }, 0);
 
-  if (newValueDifference > restSum) throw new Error('Modification not possible');
+  if (newValueDifference > restSum) throw ({ msg: 'Invalid modification' });
 
   const result = values.map((item) => {
     if (item.id === newValue.id) return newValue;
@@ -37,7 +37,9 @@ export const modifyPercentage = <T extends RankItem>(values: T[], newValue: T):
 
   const sum = result.reduce((acc, curr) => acc += curr.percentage, 0);
 
-  if (sum > 100.1) throw new Error('Bigger than 100 error');
+  if (sum > 100.1) throw ({ msg: 'Bigger than 100 error' });
+
+  if (result.filter(el => !el.locked).length === 1) throw ({ msg: 'At least two categories must be unlocked' });
 
   return result;
 };

From 62c3510ee1e54ae31808d80e89c17cef21755280 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Sun, 13 Oct 2024 12:38:38 +0330
Subject: [PATCH 15/16] Fix eslint issue

---
 app/allocation/page.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
index 2d4c432..7ee393e 100644
--- a/app/allocation/page.tsx
+++ b/app/allocation/page.tsx
@@ -49,16 +49,17 @@ const ranks: RankItem[] = [{
 const AllocationPage = () => {
   const [categoryRanking, setCategoryRanking] = useState(ranks);
   const [totalValue, setTotalValue] = useState(2);
-  const [percentageError, setPercentageError] = useState<string>()
+  const [percentageError, setPercentageError] = useState<string>();
 
   const handleLock = (id: RankItem['id']) => () => {
     try {
       const currValue = categoryRanking.find(el => el.id === id)!;
       const newRanking = modifyPercentage(categoryRanking, { ...currValue, locked: !currValue.locked });
       setCategoryRanking(newRanking);
-      setPercentageError(undefined)
-    } catch (e: any) {
-      setPercentageError(e.msg)
+      setPercentageError(undefined);
+    }
+    catch (e: any) {
+      setPercentageError(e.msg);
     }
   };
 
@@ -67,14 +68,15 @@ const AllocationPage = () => {
       const currValue = categoryRanking.find(el => el.id === id)!;
       const newRanking = modifyPercentage(categoryRanking, { ...currValue, percentage });
       setCategoryRanking(newRanking);
-      setPercentageError(undefined)
-    } catch (e: any) {
-      console.log(e)
-      setPercentageError(e.msg)
+      setPercentageError(undefined);
+    }
+    catch (e: any) {
+      console.log(e);
+      setPercentageError(e.msg);
     }
   };
 
-  const handleSliderChange = (event: Event, newValue: number | number[]) => {
+  const handleSliderChange = (_event: Event, newValue: number | number[]) => {
     if (typeof newValue === 'number') {
       setTotalValue(newValue);
     }
@@ -164,7 +166,11 @@ const AllocationPage = () => {
                 </div>
               </div>
             </div>
-            <span className='className="w-fit h-4 self-end text-primary'> {percentageError ? `Error: ${percentageError}` : ""} </span>
+            <span className='className="w-fit h-4 self-end text-primary'>
+              {' '}
+              {percentageError ? `Error: ${percentageError}` : ''}
+              {' '}
+            </span>
             <button className="w-fit self-end rounded-lg bg-primary px-4 py-3 text-white">
               Submit your votes
             </button>

From 2a419a8217585833cf24b5234c669fbd15ed8a30 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdighajary@gmail.com>
Date: Mon, 14 Oct 2024 15:45:52 +0330
Subject: [PATCH 16/16] Import image from next

---
 app/comparison/card/Header-RF6.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx
index 0f91a78..26cfb01 100644
--- a/app/comparison/card/Header-RF6.tsx
+++ b/app/comparison/card/Header-RF6.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import { ConnectButton } from '@/app/utils/wallet/Connect';
 import { PwLogo } from '@/public/assets/icon-components/PairwiseLogo';