feat: Show network in third party image (#3174)

Author: LautaroPetaccio

src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, FC, SyntheticEvent } from 'react'
-import { Collection, TP_COLLECTION_NAME_MAX_LENGTH } from 'modules/collection/types'
+import { ContractNetwork } from '@dcl/schemas'
 import {
   ModalNavigation,
   Button,
@@ -16,20 +16,12 @@ import uuid from 'uuid'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import Modal from 'decentraland-dapps/dist/containers/Modal'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics'
+import { Collection, TP_COLLECTION_NAME_MAX_LENGTH } from 'modules/collection/types'
 import { buildThirdPartyURN, decodeURN, getDefaultThirdPartyUrnSuffix } from 'lib/urn'
 import { shorten } from 'lib/address'
-import ethereumSvg from '../../../icons/ethereum.svg'
-import polygonSvg from '../../../icons/polygon.svg'
+import { imgSrcByNetwork } from 'components/NetworkIcon'
 import { Props } from './CreateThirdPartyCollectionModal.types'
 import styles from './CreateThirdPartyCollectionModal.module.css'
-import { ContractNetwork } from '@dcl/schemas'
-
-const imgSrcByNetwork = {
-  [ContractNetwork.MAINNET]: ethereumSvg,
-  [ContractNetwork.MATIC]: polygonSvg,
-  [ContractNetwork.SEPOLIA]: ethereumSvg,
-  [ContractNetwork.AMOY]: polygonSvg
-}
 
 export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
   const {

src/components/NetworkIcon/NetworkIcon.tsx

@@ -0,0 +1,6 @@
+import { Props } from './NetworkIcon.types'
+import { imgSrcByNetwork, NETWORK_ICON_DATA_TEST_ID } from './utils'
+
+export const NetworkIcon = (props: Props) => (
+  <img data-testid={NETWORK_ICON_DATA_TEST_ID} src={imgSrcByNetwork[props.network]} alt={props.network} className={props.className} />
+)

src/components/NetworkIcon/NetworkIcon.types.ts

@@ -0,0 +1,6 @@
+import { ContractNetwork } from '@dcl/schemas'
+
+export type Props = {
+  network: ContractNetwork
+  className?: string
+}

src/components/NetworkIcon/index.ts

@@ -0,0 +1,2 @@
+export * from './NetworkIcon'
+export * from './utils'

src/components/NetworkIcon/utils.ts

@@ -0,0 +1,12 @@
+import { ContractNetwork } from '@dcl/schemas'
+import ethereumSvg from '../../icons/ethereum.svg'
+import polygonSvg from '../../icons/polygon.svg'
+
+export const NETWORK_ICON_DATA_TEST_ID = 'network-icon'
+
+export const imgSrcByNetwork = {
+  [ContractNetwork.MAINNET]: ethereumSvg,
+  [ContractNetwork.MATIC]: polygonSvg,
+  [ContractNetwork.SEPOLIA]: ethereumSvg,
+  [ContractNetwork.AMOY]: polygonSvg
+}

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx

@@ -237,7 +237,7 @@ export default function ThirdPartyCollectionDetailPage({
             <Back absolute onClick={handleGoBack} />
             <div className={styles.content}>
               <div className={styles.title}>
-                <ThirdPartyImage thirdPartyId={thirdParty.id} />
+                <ThirdPartyImage thirdPartyId={thirdParty.id} network={collection.linkedContractNetwork} />
                 <Header size="large" className={styles.name} onClick={handleEditName}>
                   {collection.name}
                 </Header>

src/components/ThirdPartyImage/ThirdPartyImage.module.css

@@ -1,4 +1,14 @@
+.image,
 .main {
+  position: relative;
   width: 48px;
   height: 48px;
 }
+
+.network {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+}

src/components/ThirdPartyImage/ThirdPartyImage.spec.tsx

@@ -0,0 +1,38 @@
+import { ContractNetwork } from '@dcl/schemas'
+import { render } from '@testing-library/react'
+import { NETWORK_ICON_DATA_TEST_ID } from 'components/NetworkIcon'
+import { ThirdPartyImage } from './ThirdPartyImage'
+import { Props } from './ThirdPartyImage.types'
+
+const renderThirdPartyImage = (props: Partial<Props> = {}) => render(<ThirdPartyImage thirdPartyId="aThirdPartyId" {...props} />)
+
+describe('when rendering the component', () => {
+  let props: Partial<Props>
+  let renderedComponent: ReturnType<typeof renderThirdPartyImage>
+
+  beforeEach(() => {
+    props = {}
+  })
+
+  describe('without a contract network', () => {
+    beforeEach(() => {
+      props.network = undefined
+      renderedComponent = renderThirdPartyImage(props)
+    })
+
+    it('should not render the network image', () => {
+      expect(renderedComponent.queryByTestId(NETWORK_ICON_DATA_TEST_ID)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('with a contract network', () => {
+    beforeEach(() => {
+      props.network = ContractNetwork.MAINNET
+      renderedComponent = renderThirdPartyImage(props)
+    })
+
+    it('should render the network image', () => {
+      expect(renderedComponent.getByTestId(NETWORK_ICON_DATA_TEST_ID)).toBeInTheDocument()
+    })
+  })
+})

src/components/ThirdPartyImage/ThirdPartyImage.tsx

@@ -1,9 +1,15 @@
 import { Blockie } from 'decentraland-ui'
 import classNames from 'classnames'
+import { NetworkIcon } from 'components/NetworkIcon'
 import styles from './ThirdPartyImage.module.css'
 import { Props } from './ThirdPartyImage.types'
 
 export const ThirdPartyImage = (props: Props) => {
-  const { thirdPartyId, className, shape } = props
-  return <Blockie className={classNames(styles.main, className)} seed={thirdPartyId} size={8} scale={8} shape={shape ?? 'circle'} />
+  const { thirdPartyId, network, className, shape } = props
+  return (
+    <div className={classNames(styles.main, className)}>
+      <Blockie className={styles.image} seed={thirdPartyId} size={8} scale={8} shape={shape ?? 'circle'} />
+      {network ? <NetworkIcon network={network} className={styles.network} /> : null}
+    </div>
+  )
 }

src/components/ThirdPartyImage/ThirdPartyImage.types.ts

@@ -1,5 +1,8 @@
+import { ContractNetwork } from '@dcl/schemas'
+
 export type Props = {
   className?: string
+  network?: ContractNetwork
   thirdPartyId: string
   shape?: 'circle' | 'square'
 }