refactor: cid component migration to typescript

src/components/cid/cid.stories.tsx

@@ -0,0 +1,37 @@
+import Cid from './cid'
+
+const meta = {
+  title: 'CID',
+  component: Cid,
+  parameters: {
+    actions: { disable: false }
+  },
+  argTypes: {
+    onClick: { action: 'clicked' }
+  },
+  args: {
+    className: 'db ma2 monospace',
+    value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
+    identicon: false
+  }
+} as const
+
+export default meta
+
+export const CidV0 = {}
+
+export const CidV0Identicon = {
+  args: { identicon: true }
+}
+
+export const CidV1 = {
+  args: {
+    value: 'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG'
+  }
+}
+
+export const CidV1Sha3 = {
+  args: {
+    value: 'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y'
+  }
+}

src/components/cid/cid.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Identicon } from '../identicon/identicon.js'
+import ErrorBoundary from '../error/error-boundary.js'
+
+export function cidStartAndEnd (value: string | { toString(): string }) {
+  const valueStr = value.toString()
+  const chars = value.toString().split('')
+  if (chars.length <= 9) {
+    return {
+      value: valueStr,
+      start: valueStr,
+      end: ''
+    }
+  }
+  const start = chars.slice(0, 4).join('')
+  const end = chars.slice(chars.length - 4).join('')
+  return {
+    value,
+    start,
+    end
+  }
+}
+
+export function shortCid (value: string | { toString(): string }): string {
+  const { start, end } = cidStartAndEnd(value)
+  return `${start}…${end}`
+}
+
+export interface CidProps {
+  value: string | { toString(): string }
+  title?: string
+  style?: React.CSSProperties
+  identicon?: boolean
+  className?: string
+  onClick?: () => void
+}
+
+const Cid = React.forwardRef<HTMLElement, CidProps>(({ value, title, style, identicon = false, ...props }, ref) => {
+  style = Object.assign({}, {
+    textDecoration: 'none',
+    marginLeft: identicon ? '5px' : null
+  }, style)
+  const { start, end } = cidStartAndEnd(value)
+  const displayTitle = title || value.toString()
+  return (
+    <abbr title={displayTitle} style={style} ref={ref} {...props}>
+      { identicon && <ErrorBoundary fallback={() => null}><Identicon cid={value.toString()} className='mr2' /></ErrorBoundary> }
+      <span>
+        <span>{start}</span>
+        <span className='o-20'>…</span>
+        <span>{end}</span>
+      </span>
+    </abbr>
+  )
+})
+
+export default Cid

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/peers/PeersTable/PeersTable.js

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next'
 import { Table, Column, AutoSizer, SortDirection } from 'react-virtualized'
 import CountryFlag from 'react-country-flag'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Cid from '../../components/cid/Cid.js'
+import Cid from '../../components/cid/cid.js'
 import { sortByProperty } from '../../lib/sort.js'
 
 import './PeersTable.css'

src/peers/WorldMap/WorldMap.js

@@ -13,7 +13,7 @@ import Popover from '../../components/popover/Popover.js'
 
 // Styles
 import './WorldMap.css'
-import Cid from '../../components/cid/Cid.js'
+import Cid from '../../components/cid/cid.js'
 
 const calculateWidth = (windowWidth) => {
   // the d3 generated svg width includes a lot of ocean, that we crop for now, as it looks weird.

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"