feat: use skin hair and body shape from avatar (decentraland#487)

* feat: use skin hair and body shape from avatar * fix: user without avatar
hnihsan · Dec 20, 2021 · ae1d3ab · ae1d3ab
1 parent e502949
commit ae1d3ab
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 26 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -10,7 +10,7 @@
     "date-fns": "^2.23.0",
     "decentraland-dapps": "^12.32.0",
     "decentraland-transactions": "^1.23.1",
-    "decentraland-ui": "^3.14.0",
+    "decentraland-ui": "^3.15.0",
     "dotenv": "^10.0.0",
     "graphql": "^14.7.0",
     "history": "^4.10.1",

diff --git a/webapp/src/components/AssetImage/AssetImage.container.ts b/webapp/src/components/AssetImage/AssetImage.container.ts
@@ -0,0 +1,28 @@
+import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors'
+import { Avatar } from 'decentraland-ui'
+import { connect } from 'react-redux'
+import { RootState } from '../../modules/reducer'
+import { getWallet } from '../../modules/wallet/selectors'
+import {
+  MapStateProps,
+  MapDispatchProps,
+  MapDispatch
+} from './AssetImage.types'
+import AssetImage from './AssetImage'
+
+const mapState = (state: RootState): MapStateProps => {
+  const profiles = getProfiles(state)
+  const wallet = getWallet(state)
+  let avatar: Avatar | undefined = undefined
+  if (wallet && !!profiles[wallet.address]) {
+    const profile = profiles[wallet.address]
+    avatar = profile.avatars[0]
+  }
+  return {
+    avatar
+  }
+}
+
+const mapDispatch = (_dispatch: MapDispatch): MapDispatchProps => ({})
+
+export default connect(mapState, mapDispatch)(AssetImage)
diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -13,6 +13,12 @@ import './AssetImage.css'
 const PIXEL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII='
 
+const valueToHex = (value: number) =>
+  ('00' + Math.min(255, (value * 255) | 0).toString(16)).slice(-2)
+
+const colorToHex = (color: { r: number; g: number; b: number }) =>
+  valueToHex(color.r) + valueToHex(color.g) + valueToHex(color.b)
+
 const AssetImage = (props: Props) => {
   const {
     asset,
@@ -21,7 +27,8 @@ const AssetImage = (props: Props) => {
     hasPopup,
     zoom,
     isSmall,
-    showMonospace
+    showMonospace,
+    avatar
   } = props
   const { parcel, estate, wearable, ens } = asset.data
 
@@ -75,28 +82,24 @@ const AssetImage = (props: Props) => {
       const isDev = process.env.REACT_APP_NETWORK !== 'mainnet'
 
       if (isDraggable) {
-        let component: React.ReactNode
+        let itemId: string | undefined
+        let tokenId: string | undefined
+        let skin = 'bbbbbb'
+        let hair = 'bbbbbb'
+        let shape: 'male' | 'female' = 'male'
         if ('itemId' in asset && asset.itemId) {
-          component = (
-            <WearablePreview
-              contractAddress={asset.contractAddress}
-              itemId={asset.itemId}
-              dev={isDev}
-              onLoad={handleLoad}
-              onError={handleError}
-            />
-          )
+          itemId = asset.itemId
         } else if ('tokenId' in asset && asset.tokenId) {
-          component = (
-            <WearablePreview
-              contractAddress={asset.contractAddress}
-              tokenId={asset.tokenId}
-              dev={isDev}
-              onLoad={handleLoad}
-              onError={handleError}
-            />
-          )
+          tokenId = asset.tokenId
         }
+        if (avatar) {
+          skin = colorToHex(avatar.avatar.skin.color)
+          hair = colorToHex(avatar.avatar.hair.color)
+          shape = avatar.avatar.bodyShape.toLowerCase().includes('female')
+            ? 'female'
+            : 'male'
+        }
+
         wearablePreview = (
           <>
             {isLoadingWearablePreview && (
@@ -108,7 +111,17 @@ const AssetImage = (props: Props) => {
                 />
               </Center>
             )}
-            {component}
+            <WearablePreview
+              contractAddress={asset.contractAddress}
+              itemId={itemId}
+              tokenId={tokenId}
+              skin={skin}
+              hair={hair}
+              shape={shape}
+              dev={isDev}
+              onLoad={handleLoad}
+              onError={handleError}
+            />
           </>
         )
       }

diff --git a/webapp/src/components/AssetImage/AssetImage.types.ts b/webapp/src/components/AssetImage/AssetImage.types.ts
@@ -1,3 +1,5 @@
+import { Dispatch } from 'redux'
+import { Avatar } from 'decentraland-ui'
 import { Item } from '@dcl/schemas'
 import { NFT } from '../../modules/nft/types'
 
@@ -10,4 +12,9 @@ export type Props = {
   zoom?: number
   isSmall?: boolean
   showMonospace?: boolean
+  avatar?: Avatar
 }
+
+export type MapStateProps = Pick<Props, 'avatar'>
+export type MapDispatchProps = {}
+export type MapDispatch = Dispatch
diff --git a/webapp/src/components/AssetImage/index.ts b/webapp/src/components/AssetImage/index.ts
@@ -1,2 +1,2 @@
-import AssetImage from './AssetImage'
+import AssetImage from './AssetImage.container'
 export { AssetImage }