Add ability to open marketplace apps in a new window.

README.md

@@ -66,7 +66,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` *(optional)* | Link to staking dashboard in the footer | `https://duneanalytics.com/maxaleks/xdai-staking` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` *(optional)* | Set to false if network doesn't have gas tracker | `true` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` *(optional)* | Set to false if average block time is useless for the network | `true` |
-| NEXT_PUBLIC_MARKETPLACE_APP_LIST | `Array<MarketplaceApp>` where `MarketplaceApp` can have following [properties](#marketplace-app-configuration-properties) | List of apps that will be shown on the marketplace page | `[{'author': 'Bob', 'id': 'app', 'title': 'The App', 'logo': 'https://foo.app/icon.png', 'categories': ['security'], 'shortDescription': 'Awesome app', 'site': 'https://foo.app', 'description': 'The best app', 'url': 'https://foo.app/launch'}]` |
+| NEXT_PUBLIC_MARKETPLACE_APP_LIST | `Array<MarketplaceApp>` where `MarketplaceApp` can have following [properties](#marketplace-app-configuration-properties) | List of apps that will be shown on the marketplace page | `[{'author': 'Bob', 'id': 'app', 'external': true, 'title': 'The App', 'logo': 'https://foo.app/icon.png', 'categories': ['security'], 'shortDescription': 'Awesome app', 'site': 'https://foo.app', 'description': 'The best app', 'url': 'https://foo.app/launch'}]` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | `https://airtable.com/shrqUAcjgGJ4jU88C` |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers.  | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
 | NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` *(optional)* | Verification type in the network | `mining` |
@@ -125,6 +125,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | Property | Type | Description | Example value
 | --- | --- | --- | --- |
 | id | `string` | Used as slug for the app. Must be unique in the app list. | `'app'` |
+| external | `boolean` | If true means that the application opens in a new window, but not in an iframe. | `true` |
 | title | `string` | Displayed title of the app. | `'The App'` |
 | logo | `string` | URL to logo file. Should be at least 144x144. | `'https://foo.app/icon.png'` |
 | shortDescription | `string` | Displayed only in the app list. | `'Awesome app'` |

types/client/apps.ts

@@ -19,15 +19,16 @@ export type MarketplaceCategory = { id: MarketplaceCategoriesIds; name: string }
 
 export type AppItemPreview = {
   id: string;
+  external: boolean;
   title: string;
   logo: string;
   shortDescription: string;
   categories: Array<MarketplaceCategoriesIds>;
+  url: string;
 }
 
 export type AppItemOverview = AppItemPreview & {
   author: string;
-  url: string;
   description: string;
   site?: string;
   twitter?: string;

ui/apps/AppCard.tsx

-import { Box, Heading, Icon, IconButton, Image, Link, LinkBox, LinkOverlay, Text, useColorModeValue } from '@chakra-ui/react';
-import NextLink from 'next/link';
+import { Box, Heading, Icon, IconButton, Image, Link, LinkBox, Text, useColorModeValue } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React, { useCallback } from 'react';
 
@@ -8,9 +7,9 @@ import type { AppItemPreview } from 'types/client/apps';
 import northEastIcon from 'icons/arrows/north-east.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
-import link from 'lib/link/link';
 import notEmpty from 'lib/notEmpty';
 
+import AppLink from './AppLink';
 import { APP_CATEGORIES } from './constants';
 
 interface Props extends AppItemPreview {
@@ -19,7 +18,10 @@ interface Props extends AppItemPreview {
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
 }
 
-const AppCard = ({ id,
+const AppCard = ({
+  id,
+  url,
+  external,
   title,
   logo,
   shortDescription,
@@ -85,11 +87,12 @@ const AppCard = ({ id,
           size={{ base: 'xs', sm: 'sm' }}
           fontWeight="semibold"
         >
-          <NextLink href={ link('app_index', { id: id }) } passHref>
-            <LinkOverlay>
-              { title }
-            </LinkOverlay>
-          </NextLink>
+          <AppLink
+            id={ id }
+            url={ url }
+            external={ external }
+            title={ title }
+          />
         </Heading>
 
         <Text

ui/apps/AppLink.tsx

+import { LinkOverlay } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import link from 'lib/link/link';
+
+type Props = {
+  id: string;
+  url: string;
+  external: boolean;
+  title: string;
+}
+
+const AppLink = ({ url, external, id, title }: Props) => {
+  return external ? (
+    <LinkOverlay href={ url } isExternal={ true }>
+      { title }
+    </LinkOverlay>
+  ) : (
+    <NextLink href={ link('app_index', { id: id }) } passHref>
+      <LinkOverlay>
+        { title }
+      </LinkOverlay>
+    </NextLink>
+  );
+};
+
+export default AppLink;

ui/apps/AppList.tsx

@@ -41,6 +41,8 @@ const AppList = ({ apps, onAppClick, displayedAppId, onModalClose, favoriteApps,
               <AppCard
                 onInfoClick={ onAppClick }
                 id={ app.id }
+                external={ app.external }
+                url={ app.url }
                 title={ app.title }
                 logo={ app.logo }
                 shortDescription={ app.shortDescription }