feat: added preview to AssetImage (decentraland#467)

* feat: added preview to AssetImage * fixuse right env * feat: show image while loading model * chore: upgrade to latest release * fix: props * feat: remove image background * feat: white loader
oychain · Nov 25, 2021 · 7e4fbf9 · 7e4fbf9
1 parent 0a69277
commit 7e4fbf9
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 31 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.11.0",
+    "decentraland-ui": "^3.13.0",
     "dotenv": "^10.0.0",
     "graphql": "^14.7.0",
     "history": "^4.10.1",

diff --git a/webapp/src/components/AssetImage/AssetImage.css b/webapp/src/components/AssetImage/AssetImage.css
@@ -73,3 +73,21 @@
   white-space: nowrap;
   text-transform: lowercase;
 }
+
+.AssetImage .WearablePreview {
+  position: absolute;
+  opacity: 1;
+  transition: opacity ease 0.2s;
+}
+
+.AssetImage .is-loading-wearable-preview .WearablePreview {
+  opacity: 0;
+}
+
+.AssetImage .ui.loader.wearable-preview-loader:before {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.AssetImage .ui.loader.wearable-preview-loader:after {
+  border-color: white transparent transparent !important;
+}
diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { NFTCategory, Rarity } from '@dcl/schemas'
-import { Loader } from 'decentraland-ui'
+import { Center, Loader, WearablePreview } from 'decentraland-ui'
 import { LazyImage } from 'react-lazy-images'
 
 import { getAssetImage, getAssetName } from '../../modules/asset/utils'
@@ -25,6 +25,11 @@ const AssetImage = (props: Props) => {
   } = props
   const { parcel, estate, wearable, ens } = asset.data
 
+  const [isLoadingWearablePreview, setIsLoadingWearablePreview] = useState(
+    isDraggable
+  )
+  const handleLoad = useCallback(() => setIsLoadingWearablePreview(false), [])
+
   const estateSelection = useMemo(() => (estate ? getSelection(estate) : []), [
     estate
   ])
@@ -64,20 +69,64 @@ const AssetImage = (props: Props) => {
     }
 
     case NFTCategory.WEARABLE: {
+      let wearablePreview = null
+      const isDev = process.env.REACT_APP_NETWORK !== 'mainnet'
+
+      if (isDraggable) {
+        let component: React.ReactNode
+        if ('itemId' in asset && asset.itemId) {
+          component = (
+            <WearablePreview
+              contractAddress={asset.contractAddress}
+              itemId={asset.itemId}
+              dev={isDev}
+              onLoad={handleLoad}
+            />
+          )
+        } else if ('tokenId' in asset && asset.tokenId) {
+          component = (
+            <WearablePreview
+              contractAddress={asset.contractAddress}
+              tokenId={asset.tokenId}
+              dev={isDev}
+              onLoad={handleLoad}
+            />
+          )
+        }
+        wearablePreview = (
+          <>
+            {isLoadingWearablePreview && (
+              <Center>
+                <Loader
+                  className="wearable-preview-loader"
+                  active
+                  size="large"
+                />
+              </Center>
+            )}
+            {component}
+          </>
+        )
+      }
       const [light, dark] = Rarity.getGradient(wearable!.rarity)
       const backgroundImage = `radial-gradient(${light}, ${dark})`
+      const classes =
+        'rarity-background ' +
+        (isLoadingWearablePreview ? 'is-loading-wearable-preview' : '')
       return (
         <div
-          className="rarity-background"
+          className={classes}
           style={{
             backgroundImage
           }}
         >
-          <img
-            alt={getAssetName(asset)}
-            className="image"
-            src={getAssetImage(asset)}
-          />
+          {wearablePreview || (
+            <img
+              alt={getAssetName(asset)}
+              className="image"
+              src={getAssetImage(asset)}
+            />
+          )}
         </div>
       )
     }

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
@@ -31,7 +31,7 @@ const ItemDetail = (props: Props) => {
   return (
     <div className={styles.detail}>
       <PageHeader>
-        <AssetImage asset={item} />
+        <AssetImage asset={item} isDraggable />
       </PageHeader>
       <Container>
         <Title

diff --git a/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx b/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx
@@ -29,7 +29,7 @@ const WearableDetail = (props: Props) => {
   return (
     <div className="WearableDetail">
       <PageHeader>
-        <AssetImage asset={nft} />
+        <AssetImage asset={nft} isDraggable />
       </PageHeader>
       <Container>
         <Title
@@ -55,10 +55,16 @@ const WearableDetail = (props: Props) => {
         </Row>
         <Row>
           <WearableCollection type={AssetType.NFT} asset={nft} />
-          {nft.issuedId ?
+          {nft.issuedId ? (
             <Stats title={t('global.issue_number')}>
-              <Header>{Number(nft.issuedId).toLocaleString()}<span className="issue-number">/{Rarity.getMaxSupply(wearable.rarity).toLocaleString()}</span></Header>
-            </Stats> : null}
+              <Header>
+                {Number(nft.issuedId).toLocaleString()}
+                <span className="issue-number">
+                  /{Rarity.getMaxSupply(wearable.rarity).toLocaleString()}
+                </span>
+              </Header>
+            </Stats>
+          ) : null}
         </Row>
         <WearableHighlights type={AssetType.ITEM} wearable={wearable} />
         <Bids nft={nft} />