feat: make NFTs unique (#515)

src/components/AssetCard/AssetCard.css

@@ -5,3 +5,8 @@
 .AssetCard.is-dragging {
   opacity: 0.5;
 }
+
+.AssetCard.disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}

src/components/AssetCard/AssetCard.dnd.ts

@@ -21,6 +21,9 @@ export const assetSource: DragSourceSpec<Props, DragObject> = {
     return {
       asset: props.asset
     }
+  },
+  canDrag(props) {
+    return !props.asset.isDisabled
   }
 }
 

src/components/AssetCard/HorizontalCard/HorizontalCard.tsx

@@ -12,10 +12,13 @@ export default class HorizontalCard extends React.PureComponent<Props> {
     if (isDragging) {
       classes += ' is-dragging'
     }
+    if (asset.isDisabled) {
+      classes += ' disabled'
+    }
 
     return (
       <div className={classes}>
-        <img className="thumbnail" src={thumbnail} alt="" />
+        <img className="thumbnail" src={thumbnail} alt="" draggable={false} />
         <Header size="small" className="title">
           {name}
         </Header>

src/components/AssetCard/VerticalCard/VerticalCard.tsx

@@ -17,14 +17,17 @@ export default class VerticalCard extends React.PureComponent<Props> {
     if (asset.category === GROUND_CATEGORY) {
       classes += ' ground'
     }
+    if (asset.isDisabled) {
+      classes += ' disabled'
+    }
 
     return (
       <Popup
         content={name}
         position="top center"
         trigger={
           <div className={classes}>
-            <img className="thumbnail" src={thumbnail} alt="" />
+            <img className="thumbnail" src={thumbnail} alt="" draggable={false} />
           </div>
         }
         hideOnScroll={true}

src/components/EditorPage/ItemDragLayer/ItemDragLayer.tsx

@@ -22,7 +22,7 @@ function getItemStyles(props: CollectedProps) {
 class ItemDragLayer extends React.PureComponent<CollectedProps> {
   render() {
     const { asset } = this.props
-    if (!asset) return null
+    if (!asset || asset.isDisabled) return null
     const { thumbnail } = asset
 
     return (

src/components/TopBar/TopBar.container.ts

@@ -9,7 +9,8 @@ import {
   getSelectedEntityId,
   isLoading,
   areEntitiesOutOfBoundaries,
-  isReady
+  isReady,
+  getEnabledTools
 } from 'modules/editor/selectors'
 import { openModal } from 'modules/modal/actions'
 import { setGizmo, togglePreview, toggleSidebar } from 'modules/editor/actions'
@@ -18,16 +19,20 @@ import { getCurrentMetrics } from 'modules/scene/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './TopBar.types'
 import TopBar from './TopBar'
 
-const mapState = (state: RootState): MapStateProps => ({
-  gizmo: getGizmo(state),
-  currentProject: getCurrentProject(state),
-  metrics: getCurrentMetrics(state),
-  selectedEntityId: getSelectedEntityId(state),
-  isLoading: !isReady(state) || isLoading(state),
-  isPreviewing: isPreviewing(state),
-  isSidebarOpen: isSidebarOpen(state),
-  areEntitiesOutOfBoundaries: areEntitiesOutOfBoundaries(state)
-})
+const mapState = (state: RootState): MapStateProps => {
+  const selectedEntityId = getSelectedEntityId(state)
+  return {
+    gizmo: getGizmo(state),
+    currentProject: getCurrentProject(state),
+    metrics: getCurrentMetrics(state),
+    selectedEntityId,
+    isLoading: !isReady(state) || isLoading(state),
+    isPreviewing: isPreviewing(state),
+    isSidebarOpen: isSidebarOpen(state),
+    enabledTools: getEnabledTools(selectedEntityId)(state),
+    areEntitiesOutOfBoundaries: areEntitiesOutOfBoundaries(state)
+  }
+}
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSetGizmo: gizmo => dispatch(setGizmo(gizmo)),

src/components/TopBar/TopBar.tsx

@@ -55,7 +55,18 @@ export default class TopBar extends React.PureComponent<Props> {
   }
 
   render() {
-    const { gizmo, currentProject, isLoading, isPreviewing, isSidebarOpen, selectedEntityId, onReset, onDelete, onDuplicate } = this.props
+    const {
+      gizmo,
+      currentProject,
+      isLoading,
+      isPreviewing,
+      isSidebarOpen,
+      selectedEntityId,
+      enabledTools,
+      onReset,
+      onDelete,
+      onDuplicate
+    } = this.props
 
     return (
       <Grid className="TopBar">
@@ -82,27 +93,27 @@ export default class TopBar extends React.PureComponent<Props> {
                   <Chip
                     icon="move"
                     isActive={gizmo === Gizmo.MOVE && !!selectedEntityId}
-                    isDisabled={!selectedEntityId}
+                    isDisabled={!enabledTools.move}
                     onClick={this.handleMoveMode}
                   />
                 </ShortcutTooltip>
                 <ShortcutTooltip shortcut={Shortcut.ROTATE} position="bottom center" className="tool" popupClassName="top-bar-popup">
                   <Chip
                     icon="rotate"
                     isActive={gizmo === Gizmo.ROTATE && !!selectedEntityId}
-                    isDisabled={!selectedEntityId}
+                    isDisabled={!enabledTools.rotate}
                     onClick={this.handleRotateMode}
                   />
                 </ShortcutTooltip>
               </span>
               <ShortcutTooltip shortcut={Shortcut.RESET_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="undo" isDisabled={!selectedEntityId} onClick={onReset} />
+                <Chip icon="undo" isDisabled={!enabledTools.reset} onClick={onReset} />
               </ShortcutTooltip>
               <ShortcutTooltip shortcut={Shortcut.DUPLICATE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="duplicate" isDisabled={!selectedEntityId} onClick={onDuplicate} />
+                <Chip icon="duplicate" isDisabled={!enabledTools.duplicate} onClick={onDuplicate} />
               </ShortcutTooltip>
               <ShortcutTooltip shortcut={Shortcut.DELETE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="delete" isDisabled={!selectedEntityId} onClick={onDelete} />
+                <Chip icon="delete" isDisabled={!enabledTools.delete} onClick={onDelete} />
               </ShortcutTooltip>
             </div>
           </Grid.Row>

src/components/TopBar/TopBar.types.ts

@@ -23,6 +23,7 @@ export type Props = {
   isLoading: boolean
   isPreviewing: boolean
   isSidebarOpen: boolean
+  enabledTools: Record<string, boolean>
   areEntitiesOutOfBoundaries: boolean
   onSetGizmo: typeof setGizmo
   onTogglePreview: typeof togglePreview
@@ -42,6 +43,7 @@ export type MapStateProps = Pick<
   | 'isPreviewing'
   | 'isSidebarOpen'
   | 'selectedEntityId'
+  | 'enabledTools'
   | 'areEntitiesOutOfBoundaries'
 >
 

src/modules/asset/selectors.ts

@@ -4,6 +4,9 @@ import { AssetState } from 'modules/asset/reducer'
 import { Asset, GROUND_CATEGORY } from 'modules/asset/types'
 import { ModelById } from 'decentraland-dapps/dist/lib/types'
 import { COLLECTIBLE_ASSET_PACK_ID } from 'modules/ui/sidebar/utils'
+import { ComponentDefinition, ComponentType } from 'modules/scene/types'
+import { getComponentsByType } from 'modules/scene/selectors'
+import { isNFT, isGround } from './utils'
 
 export const getState: (state: RootState) => AssetState = state => state.asset
 
@@ -44,3 +47,43 @@ export const getCollectibleAssets = createSelector<RootState, AssetState['data']
     return out
   }
 )
+
+export const getDisabledAssets = createSelector<
+  RootState,
+  ComponentDefinition<ComponentType.NFTShape>[],
+  ComponentDefinition<ComponentType.GLTFShape>[],
+  ModelById<Asset>,
+  string[]
+>(
+  getComponentsByType(ComponentType.NFTShape),
+  getComponentsByType(ComponentType.GLTFShape),
+  getData,
+  (nfts, gltfs, assets) => {
+    let result: string[] = []
+
+    for (let assetId in assets) {
+      const asset = assets[assetId]
+
+      if (isNFT(asset)) {
+        const component = nfts.find(nft => nft.data.url.split('/').pop() === asset.id)
+        if (component) {
+          result.push(asset.id)
+        }
+      } else if (isGround(asset)) {
+        const component = gltfs.find(gltf => {
+          const { src } = gltf.data
+          const assetPath = src.substring(src.indexOf('/') + 1, src.length)
+          if (Object.keys(asset.contents).includes(assetPath)) {
+            return true
+          }
+          return false
+        })
+
+        if (component) {
+          result.push(asset.id)
+        }
+      }
+    }
+    return result
+  }
+)

src/modules/asset/types.ts

@@ -2,6 +2,7 @@ export const GROUND_CATEGORY = 'ground'
 
 export type Asset = BaseAsset & {
   assetPackId: string | null // collectibles and custom gltfs wouldn't have asset
+  isDisabled?: boolean
 }
 
 export type BaseAsset = AssetResource & {

src/modules/asset/utils.ts

@@ -1,4 +1,5 @@
 import { Asset } from 'modules/asset/types'
+import { COLLECTIBLE_ASSET_PACK_ID, CategoryName } from 'modules/ui/sidebar/utils'
 
 export function getMappings(asset: Asset) {
   const mappings: Record<string, string> = {}
@@ -10,3 +11,11 @@ export function getMappings(asset: Asset) {
   }
   return mappings
 }
+
+export function isNFT(asset: Asset) {
+  return asset.assetPackId === COLLECTIBLE_ASSET_PACK_ID
+}
+
+export function isGround(asset: Asset) {
+  return asset.category === CategoryName.GROUND_CATEGORY
+}

src/modules/editor/selectors.ts

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect'
 
 import { RootState } from 'modules/common/types'
 import { ComponentDefinition, ComponentType } from 'modules/scene/types'
-import { getComponentByType } from 'modules/scene/selectors'
+import { getComponentsByType, getEntityComponentByType } from 'modules/scene/selectors'
 
 export const getState = (state: RootState) => state.editor
 export const getGizmo = (state: RootState) => getState(state).gizmo
@@ -15,7 +15,7 @@ export const isLoading = (state: RootState) => getState(state).isLoading
 export const getEntitiesOutOfBoundaries = (state: RootState) => getState(state).entitiesOutOfBoundaries
 export const areEntitiesOutOfBoundaries = (state: RootState) => getState(state).entitiesOutOfBoundaries.length > 0
 export const getSceneMappings = createSelector<RootState, ComponentDefinition<ComponentType.GLTFShape>[], Record<string, string>>(
-  getComponentByType<ComponentType.GLTFShape>(ComponentType.GLTFShape),
+  getComponentsByType<ComponentType.GLTFShape>(ComponentType.GLTFShape),
   components =>
     components.reduce<Record<string, string>>(
       (mappings, component) => ({
@@ -25,3 +25,17 @@ export const getSceneMappings = createSelector<RootState, ComponentDefinition<Co
       {}
     )
 )
+export const getEnabledTools = (selectedEntityId: string | null) =>
+  createSelector<RootState, ComponentDefinition<ComponentType.NFTShape> | null, any>(
+    getEntityComponentByType(selectedEntityId, ComponentType.NFTShape),
+    nftShape => {
+      const isNFT = !!nftShape
+      return {
+        move: !!selectedEntityId,
+        rotate: !!selectedEntityId,
+        duplicate: !!selectedEntityId && !isNFT,
+        reset: !!selectedEntityId,
+        delete: !!selectedEntityId
+      }
+    }
+  )

src/modules/scene/sagas.ts

@@ -182,6 +182,8 @@ function* handleDuplicateItem(_: DuplicateItemAction) {
     getEntityComponentByType(selectedEntityId, ComponentType.Transform)
   )
 
+  if (shape && shape.type === ComponentType.NFTShape) return
+
   if (!shape || !transform) return
 
   const {

src/modules/scene/selectors.ts

@@ -63,7 +63,7 @@ export const getEntityComponents = (entityId: string) =>
     }
   )
 
-export const getEntityComponentByType = <T extends ComponentType>(entityId: string, type: T) =>
+export const getEntityComponentByType = <T extends ComponentType>(entityId: string | null, type: T) =>
   createSelector<RootState, Scene['entities'], Scene['components'], ComponentDefinition<T> | null>(
     getEntities,
     getComponents,
@@ -97,7 +97,7 @@ export const getEntityShape = <T extends ComponentType>(entityId: string) =>
     }
   )
 
-export const getComponentByType = <T extends ComponentType>(type: T) => (state: RootState) => {
+export const getComponentsByType = <T extends ComponentType>(type: T) => (state: RootState) => {
   const scene = getCurrentScene(state)
   if (!scene) return []
 

src/modules/ui/sidebar/selectors.ts

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect'
 import { RootState } from 'modules/common/types'
 import { SidebarState } from 'modules/ui/sidebar/reducer'
 import { Category, SidebarView } from 'modules/ui/sidebar/types'
-import { getData as getAssets, isLoading as isLoadingAssets } from 'modules/asset/selectors'
+import { getData as getAssets, isLoading as isLoadingAssets, getDisabledAssets } from 'modules/asset/selectors'
 import { AssetState } from 'modules/asset/reducer'
 import { Asset } from 'modules/asset/types'
 import { AssetPackState } from 'modules/assetPack/reducer'
@@ -59,15 +59,17 @@ export const getSideBarCategories = createSelector<
   string,
   string | null,
   SidebarView,
+  string[],
   AssetState['data'],
   Category[]
 >(
   getSelectedAssetPack,
   getSearch,
   getSelectedCategory,
   getSidebarView,
+  getDisabledAssets,
   getAssets,
-  (selectedAssetPack, search, selectedCategory, view, assets) => {
+  (selectedAssetPack, search, selectedCategory, view, disabledAssets, assets) => {
     const categories: { [categoryName: string]: Category } = {}
 
     let results = Object.values(assets)
@@ -93,7 +95,14 @@ export const getSideBarCategories = createSelector<
           thumbnail: ''
         }
       }
-      categories[asset.category].assets.push(asset)
+
+      if (disabledAssets.includes(asset.id)) {
+        let newAsset = { ...asset }
+        newAsset.isDisabled = true
+        categories[asset.category].assets.push(newAsset)
+      } else {
+        categories[asset.category].assets.push(asset)
+      }
     }
 
     let categoryArray = Object.values(categories).map<Category>(({ name }) => {