From 24360a3ffeeda767968f3fe94fcf56039d8b5db5 Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Sun, 28 Sep 2025 22:03:51 +0530
Subject: [PATCH 1/2] refactor: migrating identicon component to typescript

---
 src/components/cid/Cid.js                     |  2 +-
 src/components/identicon/Identicon.js         | 10 -------
 ...nticon.stories.js => identicon.stories.ts} | 25 ++++++-----------
 src/components/identicon/identicon.tsx        | 27 +++++++++++++++++++
 src/types/react-identicons.d.ts               | 13 +++++++++
 tsconfig.json                                 |  2 ++
 6 files changed, 51 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/identicon/Identicon.js
 rename src/components/identicon/{Identicon.stories.js => identicon.stories.ts} (65%)
 create mode 100644 src/components/identicon/identicon.tsx
 create mode 100644 src/types/react-identicons.d.ts

diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js
index 29bf5014d..a77299414 100644
--- a/src/components/cid/Cid.js
+++ b/src/components/cid/Cid.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Identicon } from '../identicon/Identicon.js'
+import { Identicon } from '../identicon/identicon.js'
 import ErrorBoundary from '../error/error-boundary.jsx'
 
 export function cidStartAndEnd (value) {
diff --git a/src/components/identicon/Identicon.js b/src/components/identicon/Identicon.js
deleted file mode 100644
index ddd57a7b2..000000000
--- a/src/components/identicon/Identicon.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactIdenticon from 'react-identicons'
-import theme from 'ipfs-css/theme.json'
-
-const { colors } = theme
-const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green]
-
-export const Identicon = ({ size = 14, cid, className = 'v-btm' }) => <ReactIdenticon string={cid} size={size} palette={identiconPalette} className={className} />
-
-export default Identicon
diff --git a/src/components/identicon/Identicon.stories.js b/src/components/identicon/identicon.stories.ts
similarity index 65%
rename from src/components/identicon/Identicon.stories.js
rename to src/components/identicon/identicon.stories.ts
index e1ce55e4e..f590276ed 100644
--- a/src/components/identicon/Identicon.stories.js
+++ b/src/components/identicon/identicon.stories.ts
@@ -1,10 +1,8 @@
 // @ts-check
-import { Identicon } from './Identicon.js'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Identicon, type IdenticonProps } from './identicon'
 
-/**
- * @type {import('@storybook/react').Meta}
- */
-export default {
+const meta = {
   title: 'Identicon',
   component: Identicon,
   parameters: {
@@ -13,34 +11,27 @@ export default {
       handles: ['click']
     }
   },
-  argTypes: {
-    onClick: { action: 'clicked' }
-  },
   args: {
     cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
     className: 'ma2',
     size: 14
   }
-}
+} satisfies Meta<IdenticonProps>
+
+export default meta
 
-/**
- * @type {import('@storybook/react').StoryObj}
- */
 export const Default = {
   args: {
     cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
     className: 'ma2',
     size: 14
   }
-}
+} as StoryObj<typeof Identicon>
 
-/**
- * @type {import('@storybook/react').StoryObj}
- */
 export const Large = {
   args: {
     cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
     className: 'ma2',
     size: 64
   }
-}
+} as StoryObj<typeof Identicon>
diff --git a/src/components/identicon/identicon.tsx b/src/components/identicon/identicon.tsx
new file mode 100644
index 000000000..d027b8255
--- /dev/null
+++ b/src/components/identicon/identicon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactIdenticon from 'react-identicons'
+import theme from 'ipfs-css/theme.json'
+
+const { colors } = theme
+const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green]
+
+export interface IdenticonProps {
+  size?: number
+  cid: string
+  className?: string
+}
+
+export const Identicon: React.FC<IdenticonProps> = ({
+  size = 14,
+  cid,
+  className = 'v-btm'
+}) => (
+    <ReactIdenticon
+      string={cid}
+      size={size}
+      palette={identiconPalette}
+      className={className}
+    />
+)
+
+export default Identicon
diff --git a/src/types/react-identicons.d.ts b/src/types/react-identicons.d.ts
new file mode 100644
index 000000000..ce336a967
--- /dev/null
+++ b/src/types/react-identicons.d.ts
@@ -0,0 +1,13 @@
+declare module 'react-identicons' {
+  import { FC } from 'react'
+  
+  interface ReactIdenticonProps {
+    string: string
+    size?: number
+    palette?: string[]
+    className?: string
+  }
+  
+  const ReactIdenticon: FC<ReactIdenticonProps>
+  export default ReactIdenticon
+}
diff --git a/tsconfig.json b/tsconfig.json
index 722f98599..d0a0e68f8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -97,6 +97,8 @@
     "src/components/about-webui/AboutWebUI.js",
     "src/components/box/Box.js",
     "src/components/shell/Shell.js",
+    "src/components/identicon/identicon.tsx",
+    "src/components/identicon/identicon.stories.ts",
     "src/i18n-decorator.js",
     "src/i18n.js",
     "src/lib/i18n-localeParser.js"

From e61dcb449dcd88c755e72a3f8e35b187f65cc6a0 Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Sun, 28 Sep 2025 22:34:43 +0530
Subject: [PATCH 2/2] refactor: failing tests fix and improvements

---
 src/components/identicon/identicon.stories.ts | 37 -------------------
 .../identicon/identicon.stories.tsx           | 23 ++++++++++++
 src/types/react-identicons.d.ts               |  4 +-
 tsconfig.json                                 |  2 +-
 4 files changed, 26 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/identicon/identicon.stories.ts
 create mode 100644 src/components/identicon/identicon.stories.tsx

diff --git a/src/components/identicon/identicon.stories.ts b/src/components/identicon/identicon.stories.ts
deleted file mode 100644
index f590276ed..000000000
--- a/src/components/identicon/identicon.stories.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// @ts-check
-import type { Meta, StoryObj } from '@storybook/react'
-import { Identicon, type IdenticonProps } from './identicon'
-
-const meta = {
-  title: 'Identicon',
-  component: Identicon,
-  parameters: {
-    actions: {
-      disable: false,
-      handles: ['click']
-    }
-  },
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 14
-  }
-} satisfies Meta<IdenticonProps>
-
-export default meta
-
-export const Default = {
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 14
-  }
-} as StoryObj<typeof Identicon>
-
-export const Large = {
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 64
-  }
-} as StoryObj<typeof Identicon>
diff --git a/src/components/identicon/identicon.stories.tsx b/src/components/identicon/identicon.stories.tsx
new file mode 100644
index 000000000..a970be4a7
--- /dev/null
+++ b/src/components/identicon/identicon.stories.tsx
@@ -0,0 +1,23 @@
+// @ts-check
+import { Identicon } from './identicon'
+
+const meta = {
+  title: 'Identicon',
+  component: Identicon,
+  parameters: {
+    actions: { disable: false, handles: ['click'] }
+  },
+  args: {
+    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
+    className: 'ma2',
+    size: 14
+  }
+} as const
+
+export default meta
+
+export const Default = {}
+
+export const Large = {
+  args: { size: 64 }
+}
diff --git a/src/types/react-identicons.d.ts b/src/types/react-identicons.d.ts
index ce336a967..92b6a522e 100644
--- a/src/types/react-identicons.d.ts
+++ b/src/types/react-identicons.d.ts
@@ -1,13 +1,13 @@
 declare module 'react-identicons' {
   import { FC } from 'react'
-  
+
   interface ReactIdenticonProps {
     string: string
     size?: number
     palette?: string[]
     className?: string
   }
-  
+
   const ReactIdenticon: FC<ReactIdenticonProps>
   export default ReactIdenticon
 }
diff --git a/tsconfig.json b/tsconfig.json
index d0a0e68f8..28c0040b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -98,7 +98,7 @@
     "src/components/box/Box.js",
     "src/components/shell/Shell.js",
     "src/components/identicon/identicon.tsx",
-    "src/components/identicon/identicon.stories.ts",
+    "src/components/identicon/identicon.stories.tsx",
     "src/i18n-decorator.js",
     "src/i18n.js",
     "src/lib/i18n-localeParser.js"