feat: add BNB Chain placeholder to token explore network menu (#6198)

* feat: add BNB Chain placeholder to token explore network menu

* don't make badge .6 opacity

src/components/Tokens/TokenTable/NetworkFilter.tsx

+import Badge from 'components/Badge'
 import { getChainInfo } from 'constants/chainInfo'
 import { BACKEND_CHAIN_NAMES, CHAIN_NAME_TO_CHAIN_ID, validateUrlChainParam } from 'graphql/data/util'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -6,7 +7,7 @@ import { Check, ChevronDown, ChevronUp } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'
 
 import FilterOption from './FilterOption'
 
@@ -20,7 +21,7 @@ const InternalMenuItem = styled.div`
     text-decoration: none;
   }
 `
-const InternalLinkMenuItem = styled(InternalMenuItem)`
+const InternalLinkMenuItem = styled(InternalMenuItem)<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -32,6 +33,13 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
     background-color: ${({ theme }) => theme.hoverState};
     text-decoration: none;
   }
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 60%;
+      pointer-events: none;
+    `}
 `
 const MenuTimeFlyout = styled.span`
   min-width: 240px;
@@ -87,6 +95,13 @@ const CheckContainer = styled.div`
 const NetworkFilterOption = styled(FilterOption)`
   width: 156px;
 `
+const Tag = styled(Badge)`
+  background-color: ${({ theme }) => theme.backgroundModule};
+  color: ${({ theme }) => theme.textSecondary};
+  font-size: 10px;
+  opacity: 1;
+  padding: 4px 6px;
+`
 
 export default function NetworkFilter() {
   const theme = useTheme()
@@ -100,6 +115,7 @@ export default function NetworkFilter() {
   const currentChainName = validateUrlChainParam(chainName)
 
   const chainInfo = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[currentChainName])
+  const BNBChainInfo = getChainInfo(CHAIN_NAME_TO_CHAIN_ID.BNB)
 
   return (
     <StyledMenu ref={node}>
@@ -148,6 +164,13 @@ export default function NetworkFilter() {
               </InternalLinkMenuItem>
             )
           })}
+          <InternalLinkMenuItem data-testid="tokens-network-filter-option-bnb-chain" disabled>
+            <NetworkLabel>
+              <Logo src={BNBChainInfo.logoUrl} />
+              {BNBChainInfo.label}
+            </NetworkLabel>
+            <Tag>Coming soon</Tag>
+          </InternalLinkMenuItem>
         </MenuTimeFlyout>
       )}
     </StyledMenu>