chore: [PAN-4887] Add MERL trading competition banner ads (#11414)

<!--
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
This PR introduces a new advertisement component for the `Merl` trading
competition alongside the existing `Eos` competition. It updates the
configuration to include the new component and modifies the trading
competition logic to accommodate both types.

### Detailed summary
- Added `AdTradingCompetitionMerl` to the import statement in
`config.tsx`.
- Introduced a new ad configuration for `merl` in `useAdConfig`.
- Updated `AdTradingCompetition` to accept a token of type `keyof typeof
tradingCompetitionConfig`.
- Created `AdTradingCompetitionMerl` function to render the
`AdTradingCompetition` with `merl` token.

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

<!-- end pr-codex -->

Author: Chef-Yogi

apps/web/src/components/AdPanel/Ads/AdTradingCompetition.tsx

@@ -17,9 +17,18 @@ const tradingCompetitionConfig = {
     reward: '75,000',
     unit: '$',
   },
+  merl: {
+    imgUrl: 'merl_competition',
+    swapUrl:
+      'https://pancakeswap.finance/swap?inputCurrency=BNB&outputCurrency=0xa0c56a8c0692bD10B3fA8f8bA79Cf5332B7107F9&utm_source=Website&utm_medium=banner&utm_campaign=MERL&utm_id=TradingCompetition',
+    learnMoreUrl:
+      'https://blog.pancakeswap.finance/articles/pancake-swap-x-merl-trading-competition-50-000-in-rewards?utm_source=Website&utm_medium=banner&utm_campaign=MERL&utm_id=TradingCompetition',
+    reward: '50,000',
+    unit: '$',
+  },
 }
 
-export const AdTradingCompetition = (props: AdPlayerProps & { token: 'eos' }) => {
+export const AdTradingCompetition = (props: AdPlayerProps & { token: keyof typeof tradingCompetitionConfig }) => {
   const { t } = useTranslation()
   const { isMobile } = useMatchBreakpoints()
   const { token, ...rest } = props
@@ -52,3 +61,7 @@ export const AdTradingCompetition = (props: AdPlayerProps & { token: 'eos' }) =>
 export const AdTradingCompetitionEos = (props: AdPlayerProps) => {
   return <AdTradingCompetition token="eos" {...props} />
 }
+
+export const AdTradingCompetitionMerl = (props: AdPlayerProps) => {
+  return <AdTradingCompetition token="merl" {...props} />
+}

apps/web/src/components/AdPanel/config.tsx

@@ -1,5 +1,5 @@
 import { useMatchBreakpoints } from '@pancakeswap/uikit'
-import { AdTradingCompetitionEos } from 'components/AdPanel/Ads/AdTradingCompetition'
+import { AdTradingCompetitionEos, AdTradingCompetitionMerl } from 'components/AdPanel/Ads/AdTradingCompetition'
 import { AdsIds, useAdsConfigs } from 'components/AdPanel/hooks/useAdsConfig'
 import { useMemo } from 'react'
 import { AdCakeStaking } from './Ads/AdCakeStaking'
@@ -55,6 +55,10 @@ export const useAdConfig = () => {
         id: 'ad-springboard',
         component: <AdSpringboard />,
       },
+      {
+        id: 'ad-merl-tc',
+        component: <AdTradingCompetitionMerl />,
+      },
       {
         id: 'ad-eos-tc',
         component: <AdTradingCompetitionEos />,