NFT UI

golos-blockchain · Sep 19, 2023 · 16a9306 · 16a9306
1 parent cc3352d
commit 16a9306
Show file tree

Hide file tree

Showing 28 changed files with 1,800 additions and 44 deletions.
diff --git a/app/ResolveRoute.js b/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'};
 }
diff --git a/app/RootRoute.js b/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') {

diff --git a/app/assets/images/nft.png b/app/assets/images/nft.png
diff --git a/app/components/all.scss b/app/components/all.scss
@@ -67,6 +67,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";

diff --git a/app/components/elements/DropdownMenu.jsx b/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}` : '')

diff --git a/app/components/modules/Header.jsx b/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();
         }