feat: Use Profile Name (#1)

* feat: Use Profile name in the ParticipantTile component

* chore: Update configs to only use the CHAIN_ID property

* fix: Update name

src/components/VideoConference/ParticipantTile/ParticipantTile.container.ts

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors'
+import { RootState } from '../../../modules/reducer'
+import { ParticipantTile } from './ParticipantTile'
+import type { MapStateProps } from './ParticipantTile.types'
+
+const mapStateToProps = (state: RootState): MapStateProps => {
+  return {
+    profiles: getProfiles(state)
+  }
+}
+
+export default connect(mapStateToProps)(ParticipantTile)

src/components/VideoConference/ParticipantTile/ParticipantTile.tsx

@@ -16,8 +16,9 @@ import {
 } from '@livekit/components-react'
 import { Track } from 'livekit-client'
 import Profile from 'decentraland-dapps/dist/containers/Profile'
-import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import type { Participant, TrackPublication } from 'livekit-client'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import type { Participant } from 'livekit-client'
+import type { Props } from './ParticipantTile.types'
 
 /** @public */
 export function ParticipantContextIfNeeded(
@@ -33,16 +34,6 @@ export function ParticipantContextIfNeeded(
   )
 }
 
-/** @public */
-export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElement> {
-  disableSpeakingIndicator?: boolean
-  participant?: Participant
-  source?: Track.Source
-  publication?: TrackPublication
-  onParticipantClick?: (event: ParticipantClickEvent) => void
-  imageSize?: 'normal' | 'large' | 'huge' | 'massive'
-}
-
 /**
  * The ParticipantTile component is the base utility wrapper for displaying a visual representation of a participant.
  * This component can be used as a child of the `TrackLoop` component or by spreading a track reference as properties.
@@ -63,8 +54,9 @@ export function ParticipantTile({
   publication,
   disableSpeakingIndicator,
   imageSize,
+  profiles,
   ...htmlProps
-}: ParticipantTileProps) {
+}: Props) {
   const p = useEnsureParticipant(participant)
   const trackRef: TrackReferenceOrPlaceholder = useMaybeTrackContext() ?? {
     participant: p,
@@ -101,9 +93,9 @@ export function ParticipantTile({
   const participantWithProfile: Participant = React.useMemo(
     () => ({
       ...trackRef.participant,
-      name: 'Edita me'
+      name: profiles[trackRef.participant.identity]?.avatars[0]?.name ?? trackRef.participant.identity
     }),
-    [trackRef.participant]
+    [trackRef.participant, profiles]
   ) as Participant
 
   return (

src/components/VideoConference/ParticipantTile/ParticipantTile.types.ts

@@ -0,0 +1,18 @@
+import type { ParticipantClickEvent } from '@livekit/components-core'
+import type { Participant, Track, TrackPublication } from 'livekit-client'
+
+/** @public */
+export interface OwnProps extends React.HTMLAttributes<HTMLDivElement> {
+  disableSpeakingIndicator?: boolean
+  participant?: Participant
+  source?: Track.Source
+  publication?: TrackPublication
+  onParticipantClick?: (event: ParticipantClickEvent) => void
+  imageSize?: 'normal' | 'large' | 'huge' | 'massive'
+}
+
+export type Props = OwnProps & {
+  profiles: ReturnType<typeof import('decentraland-dapps/dist/modules/profile/selectors').getData>
+}
+
+export type MapStateProps = Pick<Props, 'profiles'>

src/components/VideoConference/ParticipantTile/index.tsx

@@ -0,0 +1,3 @@
+import ParticipantTile from './ParticipantTile.container'
+
+export default ParticipantTile

src/components/VideoConference/Videoconference.tsx

@@ -17,7 +17,7 @@ import {
   useTracks
 } from '@livekit/components-react'
 import { RoomEvent, Track } from 'livekit-client'
-import { ParticipantTile } from './ParticipantTile'
+import ParticipantTile from './ParticipantTile'
 import type { TrackReferenceOrPlaceholder, WidgetState } from '@livekit/components-core'
 
 /**

src/modules/config/env/dev.json

@@ -1,6 +1,5 @@
 {
-  "NETWORK": "mainnet",
-  "CHAIN_ID": "1",
-  "PEER_URL": "https://peer.decentraland.org",
+  "CHAIN_ID": "11155111",
+  "PEER_URL": "https://peer.decentraland.zone",
   "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.zone"
 }

src/modules/config/env/prod.json

@@ -1,5 +1,4 @@
 {
-  "NETWORK": "mainnet",
   "CHAIN_ID": "1",
   "EXPLORER_URL": "https://play.decentraland.org",
   "PEER_URL": "https://peer.decentraland.org",

src/modules/config/env/stg.json

@@ -1,5 +1,4 @@
 {
-  "NETWORK": "mainnet",
   "CHAIN_ID": "1",
   "PEER_URL": "https://peer.decentraland.org",
   "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.org"