post-review changes and style fix

ui/marketplace/MarketplaceAppAlert.tsx

@@ -10,7 +10,7 @@ type Props = {
   internalWallet: boolean | undefined;
 }
 
-const MarketplaceAppTopBar = ({ internalWallet }: Props) => {
+const MarketplaceAppAlert = ({ internalWallet }: Props) => {
   const { address } = useMarketplaceWallet();
   const isWalletConnected = Boolean(address);
 
@@ -34,7 +34,6 @@ const MarketplaceAppTopBar = ({ internalWallet }: Props) => {
   return (
     <Alert
       status={ message.status }
-      width={{ base: '100%', md: 'auto' }}
       borderRadius="base"
       px={ 3 }
       py={{ base: 3, md: 1.5 }}
@@ -53,4 +52,4 @@ const MarketplaceAppTopBar = ({ internalWallet }: Props) => {
   );
 };
 
-export default MarketplaceAppTopBar;
+export default MarketplaceAppAlert;

ui/marketplace/MarketplaceAppInfo/WebsiteLink.tsx

@@ -11,6 +11,13 @@ const WebsiteLink = ({ url }: Props) => {
   if (!url) {
     return null;
   }
+
+  function getHostname(url: string) {
+    try {
+      return new URL(url).hostname;
+    } catch (err) {}
+  }
+
   return (
     <Link
       href={ url }
@@ -21,7 +28,7 @@ const WebsiteLink = ({ url }: Props) => {
       mt={ 3 }
     >
       <IconSvg name="link" boxSize={ 5 } color="text_secondary"/>
-      <span>{ (new URL(url)).hostname }</span>
+      <span>{ getHostname(url) }</span>
     </Link>
   );
 };

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -28,6 +28,12 @@ const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
     return route({ pathname: '/apps' });
   }, [ appProps.referrer ]);
 
+  function getHostname(url: string | undefined) {
+    try {
+      return new URL(url || '').hostname;
+    } catch (err) {}
+  }
+
   return (
     <Flex alignItems="center" flexWrap="wrap" mb={{ base: 6, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
       <Tooltip label="Back to dApps list" order={ 1 }>
@@ -35,7 +41,7 @@ const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
           <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
         </LinkInternal>
       </Tooltip>
-      <Skeleton order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
+      <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
         <MarketplaceAppAlert internalWallet={ data?.internalWallet }/>
       </Skeleton>
       <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
@@ -53,7 +59,7 @@ const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
         isLoading={ isLoading }
       >
         <chakra.span isTruncated>
-          { data?.url ? (new URL(data.url)).hostname : '' }
+          { getHostname(data?.url) }
         </chakra.span>
       </LinkExternal>
     </Flex>