move get gas button to a separate file and refactor

ui/address/details/AddressBalance.tsx

-import { Image } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Address } from 'types/api/address';
 
-import { route } from 'nextjs-routes';
-
 import config from 'configs/app';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
-import * as mixpanel from 'lib/mixpanel/index';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import LinkExternal from 'ui/shared/links/LinkExternal';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
-import TextSeparator from 'ui/shared/TextSeparator';
 
-const getGasFeature = config.features.getGasButton;
+import GetGasButton from './GetGasButton';
 
 interface Props {
   data: Pick<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate' | 'is_contract'>;
@@ -81,60 +74,8 @@ const AddressBalance = ({ data, isLoading }: Props) => {
   const accuracyUsd = 2;
   const accuracy = 8;
 
-  const onGetGasClick = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });
-  }, []);
-
-  let getGasButton = null;
   const { usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals });
 
-  if (getGasFeature.isEnabled && !data?.is_contract && Number(usdResult) < getGasFeature.usdThreshold) {
-    const buttonContent = (
-      <>
-        { getGasFeature.logoUrl && (
-          <Image src={ getGasFeature.logoUrl } alt={ getGasFeature.name } boxSize={ 5 } mr={ 2 } borderRadius="4px" overflow="hidden"/>
-        ) }
-        { getGasFeature.name }
-      </>
-    );
-
-    const linkProps = {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: 'sm',
-      lineHeight: 5,
-      onClick: onGetGasClick,
-    };
-
-    try {
-      const getGasUrl = new URL(getGasFeature.url);
-      getGasUrl.searchParams.append('utm_source', 'blockscout');
-      getGasUrl.searchParams.append('utm_medium', 'address');
-      const dappId = getGasFeature.dappId;
-      getGasButton = (
-        <>
-          <TextSeparator mx={ 2 } color="gray.500"/>
-          { typeof dappId === 'string' ? (
-            <LinkInternal
-              href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: getGasUrl.toString() } }) }
-              { ...linkProps }
-            >
-              { buttonContent }
-            </LinkInternal>
-          ) : (
-            <LinkExternal
-              href={ getGasUrl.toString() }
-              { ...linkProps }
-            >
-              { buttonContent }
-            </LinkExternal>
-          ) }
-        </>
-      );
-    } catch (error) {}
-
-  }
-
   return (
     <>
       <DetailsInfoItem.Label
@@ -155,7 +96,9 @@ const AddressBalance = ({ data, isLoading }: Props) => {
           flexWrap="wrap"
           isLoading={ isLoading }
         />
-        { !isLoading && getGasButton }
+        { !isLoading && (
+          <GetGasButton usdValue={ usdResult } isContract={ data?.is_contract }/>
+        ) }
       </DetailsInfoItem.Value>
     </>
   );

ui/address/details/GetGasButton.tsx

+import { Image } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+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;
+
+interface Props {
+  usdValue?: string;
+  isContract?: boolean;
+}
+
+const GetGasButton = ({ usdValue, isContract }: Props) => {
+  const onGetGasClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });
+  }, []);
+
+  if (getGasFeature.isEnabled && !isContract && usdValue && Number(usdValue) < getGasFeature.usdThreshold) {
+    try {
+      const dappId = getGasFeature.dappId;
+      const urlObj = new URL(getGasFeature.url);
+
+      urlObj.searchParams.append('utm_source', 'blockscout');
+      urlObj.searchParams.append('utm_medium', 'address');
+
+      const url = urlObj.toString();
+      const isInternal = typeof dappId === 'string';
+
+      const Link = isInternal ? LinkInternal : LinkExternal;
+      const href = isInternal ? route({ pathname: '/apps/[id]', query: { id: dappId, url } }) : url;
+
+      return (
+        <>
+          <TextSeparator mx={ 2 } color="gray.500"/>
+          <Link
+            href={ href }
+            display="flex"
+            alignItems="center"
+            fontSize="sm"
+            lineHeight={ 5 }
+            onClick={ onGetGasClick }
+          >
+            { getGasFeature.logoUrl && (
+              <Image
+                src={ getGasFeature.logoUrl }
+                alt={ getGasFeature.name }
+                boxSize={ 5 }
+                mr={ 2 }
+                borderRadius="4px"
+                overflow="hidden"
+              />
+            ) }
+            { getGasFeature.name }
+          </Link>
+        </>
+      );
+    } catch (error) {}
+  }
+
+  return null;
+};
+
+export default GetGasButton;