move get gas button to top bar

ui/address/details/GetGasButton.tsx → ui/snippets/topBar/GetGasButton.tsx

-import { Image } from '@chakra-ui/react';
+import { Image, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import LinkInternal from 'ui/shared/links/LinkInternal';
-import TextSeparator from 'ui/shared/TextSeparator';
 
 const getGasFeature = config.features.getGasButton;
 
 const GetGasButton = () => {
+  const isMobile = useIsMobile(false);
+
   const onGetGasClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });
   }, []);
 
-  if (getGasFeature.isEnabled) {
+  if (getGasFeature.isEnabled && !isMobile) {
     try {
       const dappId = getGasFeature.dappId;
       const urlObj = new URL(getGasFeature.url);
@@ -32,12 +34,12 @@ const GetGasButton = () => {
 
       return (
         <>
-          <TextSeparator mx={ 2 } color="gray.500"/>
+          <Box h="1px" w="8px" bg="divider" mx={ 1 }/>
           <Link
             href={ href }
             display="flex"
             alignItems="center"
-            fontSize="sm"
+            fontSize="xs"
             lineHeight={ 5 }
             onClick={ onGetGasClick }
           >
@@ -45,10 +47,8 @@ const GetGasButton = () => {
               <Image
                 src={ getGasFeature.logoUrl }
                 alt={ getGasFeature.name }
-                boxSize={ 5 }
-                mr={ 2 }
-                borderRadius="4px"
-                overflow="hidden"
+                boxSize="14px"
+                mr={ 1 }
               />
             ) }
             { getGasFeature.name }

ui/snippets/topBar/TopBarStats.tsx

@@ -10,6 +10,8 @@ import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
 import GasPrice from 'ui/shared/gas/GasPrice';
 import TextSeparator from 'ui/shared/TextSeparator';
 
+import GetGasButton from './GetGasButton';
+
 const TopBarStats = () => {
   const isMobile = useIsMobile();
 
@@ -76,14 +78,17 @@ const TopBarStats = () => {
       ) }
       { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <chakra.span color="text_secondary">Gas </chakra.span>
-          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
-            <Link>
-              <GasPrice data={ data.gas_prices.average }/>
-            </Link>
-          </GasInfoTooltip>
-        </Skeleton>
+        <>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">Gas </chakra.span>
+            <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
+              <Link>
+                <GasPrice data={ data.gas_prices.average }/>
+              </Link>
+            </GasInfoTooltip>
+          </Skeleton>
+          { !isPlaceholderData && <GetGasButton/> }
+        </>
       ) }
     </Flex>
   );