refactor(web): jazzicons to identicons

web/package.json

@@ -84,7 +84,6 @@
     "react-error-boundary": "^3.1.4",
     "react-identicons": "^1.2.5",
     "react-is": "^18.2.0",
-    "react-jazzicon": "^1.0.4",
     "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",

web/src/components/EvidenceCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Jazzicon, { jsNumberForAddress } from "react-jazzicon";
+import Identicon from "react-identicons";
 import { Card } from "@kleros/ui-components-library";
 import AttachmentIcon from "svgs/icons/attachment.svg";
 import { useIPFSQuery } from "hooks/useIPFSQuery";
@@ -28,14 +28,10 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
         )}
       </TextContainer>
       <BottomShade>
-        <Jazzicon diameter={24} seed={jsNumberForAddress(sender)} />
+        <Identicon size="24" string={sender} />
         <p>{shortenAddress(sender)}</p>
         {data && typeof data.fileURI !== "undefined" && (
-          <StyledA
-            href={`https://cloudflare-ipfs.com${data.fileURI}`}
-            target="_blank"
-            rel="noreferrer"
-          >
+          <StyledA href={`https://cloudflare-ipfs.com${data.fileURI}`} target="_blank" rel="noreferrer">
             <AttachmentIcon />
           </StyledA>
         )}

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
-import Jazzicon, { jsNumberForAddress } from "react-jazzicon";
+import Identicon from "react-identicons";
 import { Tabs, Accordion, Box } from "@kleros/ui-components-library";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import { useVotingHistory } from "queries/useVotingHistory";
@@ -118,7 +118,7 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable })
             items={
               localRounds.at(currentTab)?.votes.map((vote) => ({
                 title: shortenAddress(vote.juror.id),
-                icon: <Jazzicon diameter={20} seed={jsNumberForAddress(vote.juror.id)} />,
+                icon: <Identicon size="20" string={vote.juror.id} />,
                 body: (
                   <AccordionContent
                     choice={vote.choice === 0 ? "Refuse to arbitrate" : disputeTemplate.answers[vote.choice - 1].title}

yarn.lock

@@ -5286,7 +5286,6 @@ __metadata:
     react-error-boundary: ^3.1.4
     react-identicons: ^1.2.5
     react-is: ^18.2.0
-    react-jazzicon: ^1.0.4
     react-loading-skeleton: ^3.3.1
     react-markdown: ^8.0.7
     react-modal: ^3.16.1
@@ -22142,13 +22141,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mersenne-twister@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "mersenne-twister@npm:1.1.0"
-  checksum: 7de1940ded117f2aad9320ae4d21d647b0ecf0667abbadcfe6a2835c669feb674ef46cb7a72da7af69a56d8b19e50e95e2fb7ef6d780efab7a6acd4d87f4cb2d
-  languageName: node
-  linkType: hard
-
 "methods@npm:~1.1.2":
   version: 1.1.2
   resolution: "methods@npm:1.1.2"
@@ -26034,18 +26026,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-jazzicon@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "react-jazzicon@npm:1.0.4"
-  dependencies:
-    mersenne-twister: ^1.1.0
-  peerDependencies:
-    react: ">=17.0.0"
-    react-dom: ">=17.0.0"
-  checksum: e975b143b001f6e06bf6269498749e174550a86dfd85c255c64750f2adfa0b94d5ac8d79e04eb8b136f94067ee30ce47dae06312f9f1d37219319dc2c658d671
-  languageName: node
-  linkType: hard
-
 "react-lifecycles-compat@npm:^3.0.0":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"