Fix external links in the AppModal.

ui/apps/AppCard.tsx

@@ -9,7 +9,7 @@ import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import notEmpty from 'lib/notEmpty';
 
-import AppLink from './AppLink';
+import AppCardLink from './AppCardLink';
 import { APP_CATEGORIES } from './constants';
 
 interface Props extends AppItemPreview {
@@ -87,7 +87,7 @@ const AppCard = ({
           size={{ base: 'xs', sm: 'sm' }}
           fontWeight="semibold"
         >
-          <AppLink
+          <AppCardLink
             id={ id }
             url={ url }
             external={ external }

ui/apps/AppModal.tsx

 import {
-  Box, Button, Flex, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody,
+  Box, Flex, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody,
   ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text,
 } from '@chakra-ui/react';
-import NextLink from 'next/link';
 import React, { useCallback } from 'react';
 
 import type { AppItemOverview, MarketplaceCategoriesIds } from 'types/client/apps';
@@ -15,9 +14,9 @@ import twIcon from 'icons/social/tweet.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import { nbsp } from 'lib/html-entities';
-import link from 'lib/link/link';
 import notEmpty from 'lib/notEmpty';
 
+import AppModalLink from './AppModalLink';
 import { APP_CATEGORIES } from './constants';
 
 type Props = {
@@ -35,6 +34,8 @@ const AppModal = ({
 }: Props) => {
   const {
     title,
+    url,
+    external,
     author,
     description,
     site,
@@ -119,16 +120,12 @@ const AppModal = ({
             marginTop={{ base: 6, sm: 0 }}
           >
             <Box display="flex">
-              <NextLink href={ link('app_index', { id: id }) } passHref>
-                <Button
-                  as="a"
-                  size="sm"
-                  marginRight={ 2 }
-                  width={{ base: '100%', sm: 'auto' }}
-                >
-                  Launch app
-                </Button>
-              </NextLink>
+              <AppModalLink
+                id={ id }
+                url={ url }
+                external={ external }
+                title={ title }
+              />
 
               <IconButton
                 aria-label="Mark as favorite"

ui/apps/AppModalLink.tsx

+import { Button } 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 AppModalLink = ({ url, external, id }: Props) => {
+  const buttonProps = {
+    size: 'sm',
+    marginRight: 2,
+    width: { base: '100%', sm: 'auto' },
+    ...(external ? {
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    } : {}),
+  };
+
+  return external ? (
+    <Button
+      as="a"
+      href={ url }
+      { ...buttonProps }
+    >Launch app</Button>
+  ) : (
+    <NextLink href={ link('app_index', { id: id }) } passHref>
+      <Button
+        as="a"
+        { ...buttonProps }
+      >Launch app</Button>
+    </NextLink>
+  );
+};
+
+export default AppModalLink;