add action button to NFT pages

ui/token/TokenDetails.tsx

@@ -7,6 +7,7 @@ import { scroller } from 'react-scroll';
 
 import type { TokenInfo } from 'types/api/token';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
@@ -14,6 +15,8 @@ import getCurrencyValue from 'lib/getCurrencyValue';
 import useIsMounted from 'lib/hooks/useIsMounted';
 import { TOKEN_COUNTERS } from 'stubs/token';
 import type { TokenTabs } from 'ui/pages/Token';
+import ActionButton from 'ui/shared/ActionButton/ActionButton';
+import useActionData from 'ui/shared/ActionButton/useActionData';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -34,6 +37,8 @@ const TokenDetails = ({ tokenQuery }: Props) => {
     queryOptions: { enabled: Boolean(router.query.hash), placeholderData: TOKEN_COUNTERS },
   });
 
+  const actionData = useActionData(hash);
+
   const changeUrlAndScroll = useCallback((tab: TokenTabs) => () => {
     router.push(
       { pathname: '/token/[hash]', query: { hash: hash || '', tab } },
@@ -167,7 +172,18 @@ const TokenDetails = ({ tokenQuery }: Props) => {
         </DetailsInfoItem>
       ) }
 
-      { type !== 'ERC-20' && <TokenNftMarketplaces hash={ hash } isLoading={ tokenQuery.isPlaceholderData }/> }
+      { type !== 'ERC-20' && <TokenNftMarketplaces hash={ hash } isLoading={ tokenQuery.isPlaceholderData } actionData={ actionData }/> }
+
+      { (type !== 'ERC-20' && config.UI.views.nft.marketplaces.length === 0 && actionData) && (
+        <DetailsInfoItem
+          title="Dapp"
+          hint="Link to the dapp"
+          alignSelf="center"
+          py={ 1 }
+        >
+          <ActionButton data={ actionData } height="30px"/>
+        </DetailsInfoItem>
+      ) }
 
       <DetailsSponsoredItem isLoading={ tokenQuery.isPlaceholderData }/>
     </Grid>

ui/token/TokenNftMarketplaces.tsx

 import { Image, Link, Skeleton, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
 import config from 'configs/app';
+import ActionButton from 'ui/shared/ActionButton/ActionButton';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TextSeparator from 'ui/shared/TextSeparator';
 
 interface Props {
   hash: string | undefined;
   id?: string;
   isLoading?: boolean;
+  actionData?: AddressMetadataTagFormatted['meta'];
 }
 
-const TokenNftMarketplaces = ({ hash, id, isLoading }: Props) => {
+const TokenNftMarketplaces = ({ hash, id, isLoading, actionData }: Props) => {
   if (!hash || config.UI.views.nft.marketplaces.length === 0) {
     return null;
   }
@@ -21,8 +26,9 @@ const TokenNftMarketplaces = ({ hash, id, isLoading }: Props) => {
       hint="Marketplaces trading this NFT"
       alignSelf="center"
       isLoading={ isLoading }
+      py={ actionData ? 1 : 2 }
     >
-      <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap">
+      <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center">
         { config.UI.views.nft.marketplaces.map((item) => {
 
           const hrefTemplate = id ? item.instance_url : item.collection_url;
@@ -41,6 +47,12 @@ const TokenNftMarketplaces = ({ hash, id, isLoading }: Props) => {
             </Tooltip>
           );
         }) }
+        { actionData && (
+          <>
+            <TextSeparator color="gray.500" margin={ 0 }/>
+            <ActionButton data={ actionData } height="30px"/>
+          </>
+        ) }
       </Skeleton>
     </DetailsInfoItem>
   );

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 
 import type { TokenInfo, TokenInstance } from 'types/api/token';
 
+import config from 'configs/app';
+import ActionButton from 'ui/shared/ActionButton/ActionButton';
+import useActionData from 'ui/shared/ActionButton/useActionData';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
@@ -24,6 +27,8 @@ interface Props {
 }
 
 const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
+  const actionData = useActionData(token?.address);
+
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
       // cannot do scroll instantly, have to wait a little
@@ -71,7 +76,17 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
             </Flex>
           </DetailsInfoItem>
           <TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
-          <TokenNftMarketplaces isLoading={ isLoading } hash={ token.address } id={ data.id }/>
+          <TokenNftMarketplaces isLoading={ isLoading } hash={ token.address } id={ data.id } actionData={ actionData }/>
+          { (config.UI.views.nft.marketplaces.length === 0 && actionData) && (
+            <DetailsInfoItem
+              title="Dapp"
+              hint="Link to the dapp"
+              alignSelf="center"
+              py={ 1 }
+            >
+              <ActionButton data={ actionData } height="30px"/>
+            </DetailsInfoItem>
+          ) }
         </Grid>
         <NftMedia
           animationUrl={ data.animation_url }