feat: wip: warable preview on l1 items (#1743)

* feat: wip: warable preview on l1 items * feat: fixed wearable preview * fix: removed if on thumbnail item * Update webapp/src/components/AssetImage/AssetImage.tsx Co-authored-by: Juanma Hidalgo <[email protected]> Signed-off-by: Florencia Barreto <[email protected]> * Update webapp/src/components/AssetImage/AssetImage.tsx Co-authored-by: Juanma Hidalgo <[email protected]> Signed-off-by: Florencia Barreto <[email protected]> * Update webapp/src/components/AssetImage/AssetImage.tsx Co-authored-by: Juanma Hidalgo <[email protected]> Signed-off-by: Florencia Barreto <[email protected]> --------- Signed-off-by: Florencia Barreto <[email protected]> Co-authored-by: Juanma Hidalgo <[email protected]>
decentraland · May 30, 2023 · 8377a5e · 8377a5e
1 parent c779cdc
commit 8377a5e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -2,7 +2,14 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import classNames from 'classnames'
 import { Env } from '@dcl/ui-env'
-import { BodyShape, NFTCategory, PreviewEmote, Rarity } from '@dcl/schemas'
+import {
+  BodyShape,
+  NFTCategory,
+  Network,
+  PreviewEmote,
+  PreviewType,
+  Rarity
+} from '@dcl/schemas'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import {
@@ -22,6 +29,7 @@ import ListedBadge from '../ListedBadge'
 import { config } from '../../config'
 import { Coordinate } from '../Coordinate'
 import { JumpIn } from '../AssetPage/JumpIn'
+import { getEthereumItemUrn } from './utils'
 import { ControlOptionAction, Props } from './AssetImage.types'
 import AvailableForMintPopup from './AvailableForMintPopup'
 import './AssetImage.css'
@@ -256,12 +264,25 @@ const AssetImage = (props: Props) => {
 
         const isTryingOnEnabled = isTryingOn && hasRepresentation
 
+        const urn = !isNFT(asset) && asset.network === Network.ETHEREUM ? getEthereumItemUrn(asset) : ''
+
+        const wearablePreviewProps =
+          !isNFT(asset) && asset.network === Network.ETHEREUM
+            ? {
+                urns: [urn],
+                background: Rarity.getColor(asset.rarity),
+                type: isTryingOn ? PreviewType.AVATAR : PreviewType.WEARABLE
+              }
+            : {
+                contractAddress: asset.contractAddress,
+
+                itemId,
+                tokenId
+              }
+
         wearablePreview = (
           <>
             <WearablePreview
-              contractAddress={asset.contractAddress}
-              itemId={itemId}
-              tokenId={tokenId}
               profile={
                 isTryingOnEnabled
                   ? avatar
@@ -274,6 +295,7 @@ const AssetImage = (props: Props) => {
               emote={isTryingOnEnabled ? previewEmote : undefined}
               onLoad={handleLoad}
               onError={handleError}
+              {...wearablePreviewProps}
               dev={config.is(Env.DEVELOPMENT)}
             />
             {isAvailableForMint ? (

diff --git a/webapp/src/components/AssetImage/utils.tsx b/webapp/src/components/AssetImage/utils.tsx
@@ -0,0 +1,7 @@
+import { Item } from '@dcl/schemas'
+
+export const getEthereumItemUrn = (item: Item) => {
+  let regex = /urn:decentraland:ethereum:collections-v1:[^/]+/
+  const match = item.thumbnail.match(regex)
+  return match ? match[0] : ''
+}