refactor: migrating identicon component to typescript

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) {

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 }
+}

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

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
+}

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.tsx",
     "src/i18n-decorator.js",
     "src/i18n.js",
     "src/lib/i18n-localeParser.js"