post-review fixes

configs/app/features/swapButton.ts

 import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
+import marketplace from './marketplace';
 
-const appUrl = getEnvValue('NEXT_PUBLIC_SWAP_BUTTON_URL');
+const value = getEnvValue('NEXT_PUBLIC_SWAP_BUTTON_URL');
 
 const title = 'Swap button';
 
-const config: Feature<{ appUrl: string }> = (() => {
-  if (appUrl) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      appUrl,
-    });
+function isValidUrl(string: string) {
+  try {
+    new URL(string);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+const config: Feature<{ dappId: string } | { url: string }> = (() => {
+  if (value) {
+    if (isValidUrl(value)) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        url: value,
+      });
+    } else if (marketplace.isEnabled) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        dappId: value,
+      });
+    }
   }
 
   return Object.freeze({

lib/router/removeQueryParam.ts

@@ -2,6 +2,7 @@ import type { NextRouter } from 'next/router';
 
 export default function removeQueryParam(router: NextRouter, param: string) {
   const { pathname, query } = router;
-  delete router.query[param];
-  router.replace({ pathname, query }, undefined, { shallow: true });
+  const newQuery = { ...query };
+  delete newQuery[param];
+  router.replace({ pathname, query: newQuery }, undefined, { shallow: true });
 }

lib/router/updateQueryParam.ts

@@ -2,6 +2,7 @@ import type { NextRouter } from 'next/router';
 
 export default function updateQueryParam(router: NextRouter, param: string, newValue: string) {
   const { pathname, query } = router;
-  query[param] = newValue;
-  router.replace({ pathname, query }, undefined, { shallow: true });
+  const newQuery = { ...query };
+  newQuery[param] = newValue;
+  router.replace({ pathname, query: newQuery }, undefined, { shallow: true });
 }

ui/marketplace/useWalletConnection.tsx → ui/marketplace/useAutoConnectWallet.tsx

@@ -5,7 +5,7 @@ import removeQueryParam from 'lib/router/removeQueryParam';
 import updateQueryParam from 'lib/router/updateQueryParam';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 
-export default function useMarketplaceWallet() {
+export default function useAutoConnectWallet() {
   const router = useRouter();
   const { isWalletConnected, isModalOpen, connect } = useWallet({ source: 'Swap button' });
   const isConnectionStarted = useRef(false);

ui/pages/MarketplaceApp.tsx

@@ -16,8 +16,8 @@ import * as metadata from 'lib/metadata';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
 
+import useAutoConnectWallet from '../marketplace/useAutoConnectWallet';
 import useMarketplaceWallet from '../marketplace/useMarketplaceWallet';
-import useWalletConnection from '../marketplace/useWalletConnection';
 
 const feature = config.features.marketplace;
 const configUrl = feature.isEnabled ? feature.configUrl : '';
@@ -97,7 +97,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 
 const MarketplaceApp = () => {
   const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
-  useWalletConnection();
+  useAutoConnectWallet();
 
   const apiFetch = useApiFetch();
   const router = useRouter();

ui/shared/LinkExternal.tsx

@@ -10,10 +10,9 @@ interface Props {
   children: React.ReactNode;
   isLoading?: boolean;
   variant?: 'subtle';
-  hideIcon?: boolean;
 }
 
-const LinkExternal = ({ href, children, className, isLoading, variant, hideIcon }: Props) => {
+const LinkExternal = ({ href, children, className, isLoading, variant }: Props) => {
   const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
 
   const styleProps: ChakraProps = (() => {
@@ -60,9 +59,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant, hideIcon
   return (
     <Link className={ className } { ...styleProps } target="_blank" href={ href }>
       { children }
-      { !hideIcon && (
-        <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400" flexShrink={ 0 }/>
-      ) }
+      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400" flexShrink={ 0 }/>
     </Link>
   );
 };

ui/snippets/topBar/SwapButton.tsx

@@ -3,33 +3,37 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import * as regexp from 'lib/regexp';
+import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
 
-const SwapButton = ({ appUrl }: { appUrl: string }) => {
-  const button = (
-    <Button variant="solid" size="xs" borderRadius="sm" height={ 5 } px={ 1.5 }>
+const feature = config.features.swapButton;
+
+const SwapButton = () => {
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  const href = 'url' in feature ?
+    feature.url :
+    route({ pathname: '/apps/[id]', query: { id: feature.dappId, action: 'connect' } });
+
+  return (
+    <Button
+      as="a"
+      href={ href }
+      target={ 'url' in feature ? '_blank' : '_self' }
+      variant="solid"
+      size="xs"
+      borderRadius="sm"
+      height={ 5 }
+      px={ 1.5 }
+    >
       <IconSvg name="swap" boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
       <Box display={{ base: 'none', sm: 'inline' }}>
         Swap
       </Box>
     </Button>
   );
-
-  return regexp.URL_PREFIX.test(appUrl) ? (
-    <LinkExternal href={ appUrl } hideIcon>
-      { button }
-    </LinkExternal>
-  ) : (
-    <LinkInternal
-      href={ route({ pathname: '/apps/[id]', query: { id: appUrl, action: 'connect' } }) }
-      display="contents"
-    >
-      { button }
-    </LinkInternal>
-  );
 };
 
 export default React.memo(SwapButton);

ui/snippets/topBar/TopBar.tsx

@@ -8,14 +8,13 @@ import SwapButton from './SwapButton';
 import TopBarStats from './TopBarStats';
 
 const feature = config.features.swapButton;
-const appUrl = feature.isEnabled && feature.appUrl;
 
 const TopBar = () => {
   const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   return (
     <Flex
-      height="34px"
+      py={ 2 }
       px={ 6 }
       bgColor={ bgColor }
       justifyContent="space-between"
@@ -23,9 +22,9 @@ const TopBar = () => {
     >
       <TopBarStats/>
       <Flex alignItems="center">
-        { appUrl && (
+        { feature.isEnabled && (
           <>
-            <SwapButton appUrl={ appUrl }/>
+            <SwapButton/>
             <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
           </>
         ) }

ui/snippets/walletMenu/WalletTooltip.tsx

@@ -33,17 +33,24 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
     const isTooltipShowAction = router.query.action === 'tooltip';
     const isConnectWalletAction = router.query.action === 'connect';
     const needToShow = (!wasShown && !isConnectWalletAction) || isTooltipShowAction;
+    let timer1: ReturnType<typeof setTimeout>;
+    let timer2: ReturnType<typeof setTimeout>;
 
     if (!isDisabled && isMarketplacePage && needToShow) {
-      setTimeout(() => {
+      timer1 = setTimeout(() => {
         setIsTooltipShown.on();
         window.localStorage.setItem(localStorageKey, 'true');
-        setTimeout(() => setIsTooltipShown.off(), 5 * SECOND);
+        timer2 = setTimeout(() => setIsTooltipShown.off(), 5 * SECOND);
         if (isTooltipShowAction) {
           removeQueryParam(router, 'action');
         }
       }, isTooltipShowAction ? 0 : SECOND);
     }
+
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
   }, [ setIsTooltipShown, localStorageKey, isDisabled, router ]);
 
   return (