NFT UI

app/ResolveRoute.js

@@ -1,14 +1,15 @@
 export const routeRegex = {
     UserProfile1: /^\/(@[\w\.\d-]+)\/?$/,
-    UserProfile2: /^\/(@[\w\.\d-]+)\/(transfers|assets|create-asset|invites|curation-rewards|author-rewards|donates-from|donates-to|filled-orders|permissions|created|password|witness|settings)\/??(?:&?[^=&]*=[^=&]*)*$/,
+    UserProfile2: /^\/(@[\w\.\d-]+)\/(transfers|assets|create-asset|invites|curation-rewards|author-rewards|donates-from|donates-to|nft|nft-collections|filled-orders|permissions|created|password|witness|settings)\/??(?:&?[^=&]*=[^=&]*)*$/,
     UserProfile3: /^\/(@[\w\.\d-]+)\/[\w\.\d-]+/,
     UserAssetEndPoints: /^\/(@[\w\.\d-]+)\/assets\/([\w\d.-]+)\/(update|transfer)$/,
-    UserEndPoints: /^(transfers|assets|create-asset|invites|curation-rewards|author-rewards|donates-from|donates-to|filled-orders|permissions|created|password|witness|settings)$/,
+    UserEndPoints: /^(transfers|assets|create-asset|invites|curation-rewards|author-rewards|donates-from|donates-to|nft|nft-collections|filled-orders|permissions|created|password|witness|settings)$/,
     WorkerSort: /^\/workers\/([\w\d\-]+)\/?($|\?)/,
     WorkerSearchByAuthor: /^\/workers\/([\w\d\-]+)\/(\@[\w\d.-]+)\/?($|\?)/,
     WorkerRequest: /^\/workers\/([\w\d\-]+)\/(\@[\w\d.-]+)\/([\w\d-]+)\/?($|\?)/,
     MarketPair: /^\/market\/([\w\d\.]+)\/([\w\d.]+)\/?($|\?)/,
     ConvertPair: /^\/convert\/([\w\d\.]+)\/([\w\d.]+)\/?($|\?)/,
+    NFTMarket: /^\/nft-market\/([\w\d\.]+)\/?($|\?)/,
     UserJson: /^\/(@[\w\.\d-]+)(\.json)$/,
     UserNameJson: /^.*(?=(\.json))/
 };
@@ -89,5 +90,12 @@ export default function resolveRoute(path)
     if (match) { 
         return {page: 'ConvertAssetsPage', params: match.slice(1)}
     }
+    if (path === '/nft-market') {
+        return {page: 'NFTMarketPage'}
+    }
+    match = path.match(routeRegex.NFTMarket);
+    if (match) { 
+        return {page: 'NFTMarketPage', params: match.slice(1)}
+    }
     return {page: 'NotFound'};
 }

app/RootRoute.js

@@ -33,6 +33,8 @@ export default {
             cb(null, [require('@pages/UserProfile')]);
         } else if (route.page === 'ConvertAssetsPage') {
             cb(null, [require('@pages/ConvertAssetsPage')]);
+        } else if (route.page === 'NFTMarketPage') {
+            cb(null, [require('@pages/NFTMarketPage')]);
         } else if (route.page === 'Market') {
             cb(null, [require('@pages/MarketLoader')]);
        } else if (route.page === 'Rating') {

app/components/all.scss

@@ -39,6 +39,7 @@
 @import "./elements/market/MarketPair";
 @import "./elements/market/OrderForm";
 @import "./elements/market/TickerPriceStat";
+@import "./elements/nft/NFTSmallIcon";
 @import "./elements/workers/WorkerRequestVoting";
 
 // dialogs
@@ -67,6 +68,12 @@
 @import "./modules/Powerdown.scss";
 @import "./modules/QuickBuy.scss";
 @import "./modules/Modals";
+@import "./modules/nft/NFTCollections";
+@import "./modules/nft/CreateNFTCollection";
+@import "./modules/nft/IssueNFTToken";
+@import "./modules/nft/NFTTokens";
+@import "./modules/nft/NFTTokenTransfer";
+@import "./modules/nft/NFTTokenDetails";
 
 // pages
 @import "./pages/Exchanges";

app/components/elements/DropdownMenu.jsx

@@ -68,15 +68,15 @@ export default class DropdownMenu extends React.Component {
     }
 
     render() {
-        const {el, items, selected, children, className, title, href, noArrow} = this.props;
+        const {el, items, selected, children, className, title, href, onClick, noArrow} = this.props;
         const hasDropdown = items.length > 0
 
         let entry = children || <span key='label'>
                 {this.getSelectedLabel(items, selected)}
                 {hasDropdown && !noArrow && <Icon name="dropdown-arrow" />}
             </span>
 
-        if(hasDropdown) entry = <a key="entry" href={href || '#'} onClick={this.toggle}>{entry}</a>
+        if(hasDropdown) entry = <a key="entry" href={href || '#'} onClick={onClick ? (e) => { onClick(e); this.toggle(e) } : this.toggle}>{entry}</a>
 
         const menu = <VerticalMenu key="menu" title={title} items={items} hideValue={selected} className="VerticalMenu" />;
         const cls = 'DropdownMenu' + (this.state.shown ? ' show' : '') + (className ? ` ${className}` : '')

app/components/elements/nft/NFTSmallIcon.jsx

@@ -0,0 +1,12 @@
+import React, { Component, } from 'react'
+
+class NFTSmallIcon extends Component {
+    render() {
+        const { image, ...rest } = this.props
+
+        return <a className='NFTSmallIcon' 
+            style={{ backgroundImage: `url(${image})` }} href={image} target='_blank' rel='nofollow noreferrer' {...rest}></a>
+    }
+}
+
+export default NFTSmallIcon

app/components/elements/nft/NFTSmallIcon.scss

@@ -0,0 +1,11 @@
+.NFTSmallIcon {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    border-radius: 50%;
+
+    width: 3rem;
+    height: 3rem;
+    display: inline-block;
+    vertical-align: top;
+}

app/components/modules/Header.jsx

@@ -91,23 +91,25 @@ class Header extends React.Component {
             const name = acct_meta ? normalizeProfile(acct_meta.toJS()).name : null;
             const user_title = name ? `${name} (@${user_name})` : user_name;
             page_title = user_title;
-            if(route.params[1] === "curation-rewards"){
+            if (route.params[1] === "curation-rewards"){
                 page_title = tt('header_jsx.curation_rewards_by') + " " + user_title;
-            }
-            if(route.params[1] === "author-rewards"){
+            } else if (route.params[1] === "author-rewards"){
                 page_title = tt('header_jsx.author_rewards_by') + " " + user_title;
-            }
-            if(route.params[1] === "donates-from"){
+            } else if (route.params[1] === "donates-from"){
                 page_title = tt('header_jsx.donates_from') + " " + user_title;
-            }
-            if(route.params[1] === "donates-to"){
+            } else if (route.params[1] === "donates-to"){
                 page_title = tt('header_jsx.donates_to') + " " + user_title;
-            }
-            if(route.params[1] === "recent-replies"){
+            } else if (route.params[1] === "recent-replies"){
                 page_title = tt('header_jsx.replies_to') + " " + user_title;
+            } else if (route.params[1] === "nft"){
+                page_title = tt('header_jsx.nft_tokens') + " " + user_title
+            } else if (route.params[1] === "nft-collections"){
+                page_title = tt('header_jsx.nft_collections') + " " + user_title
             }
         } else if (route.page === 'ConvertAssetsPage') {
             page_title = tt('g.convert_assets')
+        } else if (route.page === `NFTMarketPage`){
+            page_title = tt('header_jsx.nft_market')
         } else {
             page_name = ''; //page_title = route.page.replace( /([a-z])([A-Z])/g, '$1 $2' ).toLowerCase();
         }