feat: Add opBNB tag (#9223)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update reducers, add new tags for different
chains, and improve UI components in the trading reward section.

### Detailed summary
- Updated reducers and actions in `user/reducer.ts`
- Added `OpBnbTag` for `ChainId.OPBNB` in `PairInfo.tsx`
- Added `OpBnbTag` component in `Tags/index.tsx`
- Improved UI styling with `styled-components` in `PairInfo.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/state/user/reducer.ts

@@ -1,31 +1,30 @@
-import { createReducer } from '@reduxjs/toolkit'
 import { SerializedWrappedToken } from '@pancakeswap/token-lists'
+import { createReducer } from '@reduxjs/toolkit'
 import omitBy from 'lodash/omitBy'
-import { DEFAULT_DEADLINE_FROM_NOW } from '../../config/constants'
 import { updateVersion } from '../global/actions'
+import { GAS_PRICE_GWEI } from '../types'
 import {
+  FarmStakedOnly,
+  SerializedPair,
+  ViewMode,
   addSerializedPair,
   addSerializedToken,
   addWatchlistPool,
   addWatchlistToken,
-  FarmStakedOnly,
   removeSerializedPair,
   removeSerializedToken,
-  SerializedPair,
+  setSubgraphHealthIndicatorDisplayed,
   updateGasPrice,
   updateUserFarmStakedOnly,
   updateUserFarmsViewMode,
+  updateUserLimitOrderAcceptedWarning,
   updateUserPoolStakedOnly,
   updateUserPoolsViewMode,
-  ViewMode,
   updateUserPredictionAcceptedRisk,
-  updateUserPredictionChartDisclaimerShow,
   updateUserPredictionChainlinkChartDisclaimerShow,
+  updateUserPredictionChartDisclaimerShow,
   updateUserUsernameVisibility,
-  setSubgraphHealthIndicatorDisplayed,
-  updateUserLimitOrderAcceptedWarning,
 } from './actions'
-import { GAS_PRICE_GWEI } from '../types'
 
 const currentTimestamp = () => Date.now()
 

apps/web/src/views/TradingReward/components/PairInfo.tsx

@@ -1,9 +1,9 @@
-import { styled } from 'styled-components'
-import { Text, Flex, Skeleton } from '@pancakeswap/uikit'
+import { ChainId } from '@pancakeswap/chains'
+import { Token } from '@pancakeswap/swap-sdk-core'
+import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
 import { FarmWidget } from '@pancakeswap/widgets-internal'
 import { TokenPairImage } from 'components/TokenImage'
-import { Token } from '@pancakeswap/swap-sdk-core'
-import { ChainId } from '@pancakeswap/chains'
+import { styled } from 'styled-components'
 
 const TokenWrapper = styled.div`
   padding-right: 8px;
@@ -14,7 +14,7 @@ const TokenWrapper = styled.div`
   }
 `
 
-const { V3Tag, V3FeeTag, EthTag, BscTag, ZkEVMTag, ZkSyncTag, ArbTag, BaseTag, LineaTag } = FarmWidget.Tags
+const { V3Tag, V3FeeTag, EthTag, BscTag, ZkEVMTag, ZkSyncTag, ArbTag, BaseTag, LineaTag, OpBnbTag } = FarmWidget.Tags
 
 interface PairInfoProps {
   isReady: boolean
@@ -78,6 +78,7 @@ const PairInfo: React.FunctionComponent<React.PropsWithChildren<PairInfoProps>>
               {chainId === ChainId.ARBITRUM_ONE && <ArbTag />}
               {chainId === ChainId.LINEA && <LineaTag />}
               {chainId === ChainId.BASE && <BaseTag />}
+              {chainId === ChainId.OPBNB && <OpBnbTag />}
             </Flex>
           </Flex>
         </Flex>

packages/widgets-internal/farm/components/Tags/index.tsx

@@ -1,32 +1,32 @@
 import { useTranslation } from "@pancakeswap/localization";
-import React, { memo } from "react";
-import type { FeeAmount } from "@pancakeswap/v3-sdk";
 import {
-  Text,
-  TooltipText,
-  Tag,
-  TagProps,
-  useTooltip,
+  AlpIcon,
+  ArbitrumIcon,
   AutoRenewIcon,
+  BaseIcon,
+  BinanceChainIcon,
   BlockIcon,
+  CheckmarkCircleIcon,
   CommunityIcon,
+  CurrencyIcon,
+  EthChainIcon,
+  LineaIcon,
+  LockIcon,
   RefreshIcon,
+  RocketIcon,
+  Tag,
+  TagProps,
+  Text,
   TimerIcon,
+  TooltipText,
   VerifiedIcon,
   VoteIcon,
-  LockIcon,
-  RocketIcon,
-  CheckmarkCircleIcon,
-  CurrencyIcon,
-  BinanceChainIcon,
-  EthChainIcon,
   ZkEVMIcon,
   ZkSyncIcon,
-  LineaIcon,
-  BaseIcon,
-  ArbitrumIcon,
-  AlpIcon,
+  useTooltip,
 } from "@pancakeswap/uikit";
+import type { FeeAmount } from "@pancakeswap/v3-sdk";
+import React, { memo } from "react";
 
 const CoreTag: React.FC<React.PropsWithChildren<TagProps>> = (props) => {
   const { t } = useTranslation();
@@ -226,6 +226,14 @@ const BscTag: React.FC<React.PropsWithChildren<TagProps>> = (props) => {
   );
 };
 
+const OpBnbTag: React.FC<React.PropsWithChildren<TagProps>> = (props) => {
+  return (
+    <Tag style={{ background: "#08060B" }} startIcon={<BinanceChainIcon width="18px" mr="4px" />} {...props}>
+      opBNB
+    </Tag>
+  );
+};
+
 const ZkEVMTag: React.FC<React.PropsWithChildren<TagProps>> = (props) => {
   return (
     <Tag
@@ -305,6 +313,7 @@ const Tags = {
   BaseTag,
   LineaTag,
   AlpBoostedTag,
+  OpBnbTag,
 };
 
 export default Tags;