From 28ede7e45081cd6604a9aa0a9831a1b44b8e41ba Mon Sep 17 00:00:00 2001
From: ChefMomota <98292246+ChefMomota@users.noreply.github.com>
Date: Thu, 7 Mar 2024 11:40:33 +0800
Subject: [PATCH] feat: Add opBNB tag (#9223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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            | 17 ++++----
 .../TradingReward/components/PairInfo.tsx     | 11 ++---
 .../farm/components/Tags/index.tsx            | 43 +++++++++++--------
 3 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/state/user/reducer.ts b/apps/web/src/state/user/reducer.ts
index 16ed93e290bd6..aa1510214476d 100644
--- a/apps/web/src/state/user/reducer.ts
+++ b/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()
 
diff --git a/apps/web/src/views/TradingReward/components/PairInfo.tsx b/apps/web/src/views/TradingReward/components/PairInfo.tsx
index be8b9d1e411a5..c7992746716c6 100644
--- a/apps/web/src/views/TradingReward/components/PairInfo.tsx
+++ b/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>
diff --git a/packages/widgets-internal/farm/components/Tags/index.tsx b/packages/widgets-internal/farm/components/Tags/index.tsx
index 99c47beaf2902..a6fe9ee4fb31a 100644
--- a/packages/widgets-internal/farm/components/Tags/index.tsx
+++ b/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;