chore: merkl tooltip wording (#10003)

<!--
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 `merklUserLink` feature across multiple
components and hooks to allow users to earn rewards on both Merkl and
Farms simultaneously.

### Detailed summary
- Added `merklUserLink` feature to generate Merkl user-specific links
- Updated components to display Merkl user links alongside Merkl links
- Created `useMerklUserLink` hook for generating user-specific Merkl
links

> The following files were skipped due to too many changes:
`packages/localization/src/config/translations.json`

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

<!-- end pr-codex -->

apps/web/src/utils/getMerklLink.tsx

@@ -1,6 +1,8 @@
 import { ChainId } from '@pancakeswap/chains'
 import MERKL_POOLS from 'config/constants/merklPools.json'
+import { useMemo } from 'react'
 import { Address } from 'viem'
+import { useAccount } from 'wagmi'
 
 type MerklPools = {
   chainId: ChainId
@@ -27,3 +29,11 @@ export const getMerklLink = ({
 
   return link
 }
+
+export const useMerklUserLink = (): string => {
+  const { address: account } = useAccount()
+  const link = useMemo(() => {
+    return `https://merkl.angle.money/user/${account ?? ''}`
+  }, [account])
+  return link
+}

apps/web/src/views/Farms/components/FarmCard/CardHeading.tsx

@@ -43,6 +43,7 @@ type ExpandableSectionProps = {
   farmCakePerSecond?: string
   totalMultipliers?: string
   merklLink?: string
+  merklUserLink?: string
   hasBothFarmAndMerkl?: boolean
   isBoosted?: boolean
   lpAddress?: Address
@@ -73,6 +74,7 @@ const CardHeading: React.FC<React.PropsWithChildren<ExpandableSectionProps>> = (
   farmCakePerSecond,
   totalMultipliers,
   merklLink,
+  merklUserLink,
   hasBothFarmAndMerkl,
   merklApr,
   lpAddress,
@@ -113,6 +115,7 @@ const CardHeading: React.FC<React.PropsWithChildren<ExpandableSectionProps>> = (
                   merklLink={merklLink}
                   hasFarm={hasBothFarmAndMerkl}
                   merklApr={merklApr}
+                  merklUserLink={merklUserLink}
                 />
               </Box>
             ) : null}

apps/web/src/views/Farms/components/FarmCard/V3/FarmV3Card.tsx

@@ -9,7 +9,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { multiChainPaths } from 'state/info/constant'
 import { styled } from 'styled-components'
 import { getBlockExploreLink } from 'utils'
-import { getMerklLink } from 'utils/getMerklLink'
+import { getMerklLink, useMerklUserLink } from 'utils/getMerklLink'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import { isAddressEqual } from 'viem'
 import { AddLiquidityV3Modal } from 'views/AddLiquidityV3/Modal'
@@ -68,7 +68,7 @@ export const FarmV3Card: React.FC<React.PropsWithChildren<FarmCardProps>> = ({ f
   const { lpAddress } = farm
   const isPromotedFarm = farm.token.symbol === 'CAKE'
   const { status: boostStatus } = useBoostStatus(farm.pid)
-
+  const merklUserLink = useMerklUserLink()
   const merklLink = getMerklLink({ chainId, lpAddress })
   const { merklApr } = useMerklInfo(merklLink ? lpAddress : null)
   const infoUrl = useMemo(() => {
@@ -119,6 +119,7 @@ export const FarmV3Card: React.FC<React.PropsWithChildren<FarmCardProps>> = ({ f
           lpAddress={lpAddress}
           merklApr={merklApr}
           isBooster={isBoosted}
+          merklUserLink={merklUserLink}
         />
         {!removed && (
           <Flex justifyContent="space-between" alignItems="center">

apps/web/src/views/Farms/components/FarmTable/Actions/ActionPanel.tsx

@@ -24,6 +24,7 @@ import { FC, useContext, useMemo } from 'react'
 import { ChainLinkSupportChains, multiChainPaths } from 'state/info/constant'
 import { css, keyframes, styled } from 'styled-components'
 import { getBlockExploreLink } from 'utils'
+import { useMerklUserLink } from 'utils/getMerklLink'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import { isAddressEqual } from 'viem'
 import { AddLiquidityV3Modal } from 'views/AddLiquidityV3/Modal'
@@ -190,13 +191,19 @@ const StyleMerklWarning = styled.div`
 
 const MerklWarning: React.FC<{
   merklLink: string
+  merklUserLink?: string
   hasFarm?: boolean
-}> = ({ merklLink, hasFarm }) => {
+}> = ({ merklLink, hasFarm, merklUserLink }) => {
   return (
     <StyleMerklWarning>
       <Message variant="primary" icon={<VerifiedIcon color="#7645D9" />}>
         <MessageText color="#7645D9">
-          <MerklNotice.Content hasFarm={hasFarm} merklLink={merklLink} linkColor="currentColor" />
+          <MerklNotice.Content
+            hasFarm={hasFarm}
+            merklLink={merklLink}
+            linkColor="currentColor"
+            merklUserLink={merklUserLink}
+          />
         </MessageText>
       </Message>
     </StyleMerklWarning>
@@ -219,6 +226,7 @@ export const ActionPanelV3: FC<ActionPanelV3Props> = ({
   const { address: account } = useAccount()
   const { merklLink } = farm_
   const farm = details
+  const merklUserLink = useMerklUserLink()
   const isActive = farm.multiplier !== '0X'
   const lpLabel = useMemo(() => farm.lpSymbol && farm.lpSymbol.replace(/pancake/gi, ''), [farm.lpSymbol])
   const bsc = useMemo(
@@ -299,7 +307,9 @@ export const ActionPanelV3: FC<ActionPanelV3Props> = ({
           </>
         }
       >
-        {!isDesktop && merklLink ? <MerklWarning hasFarm={hasBothFarmAndMerkl} merklLink={merklLink} /> : null}
+        {!isDesktop && merklLink ? (
+          <MerklWarning hasFarm={hasBothFarmAndMerkl} merklLink={merklLink} merklUserLink={merklUserLink} />
+        ) : null}
         {!userDataReady ? (
           <Skeleton height={200} width="100%" />
         ) : account && !hasNoPosition ? (

apps/web/src/views/Farms/components/FarmTable/Farm.tsx

@@ -28,6 +28,7 @@ export const FarmCell: React.FunctionComponent<
   merklApr,
   lpAddress,
   chainId,
+  merklUserLink,
 }) => {
   const { t } = useTranslation()
   const hasSwellReward = useHasSwellReward(lpAddress)
@@ -47,12 +48,12 @@ export const FarmCell: React.FunctionComponent<
         isReady={isReady}
         isStaking={isStaking}
         merklLink={merklLink}
+        merklUserLink={merklUserLink}
         hasBothFarmAndMerkl={hasBothFarmAndMerkl}
         merklApr={merklApr}
       >
         <TokenPairImage width={40} height={40} variant="inverted" primaryToken={token} secondaryToken={quoteToken} />
       </FarmTokenInfo>
-
       {chainId === bsc.id && lpAddress && isAddressEqual(lpAddress, '0xdD82975ab85E745c84e497FD75ba409Ec02d4739') ? (
         <GiftTooltip>
           <Box>
@@ -74,7 +75,6 @@ export const FarmCell: React.FunctionComponent<
           </Box>
         </GiftTooltip>
       ) : null}
-
       {hasSwellReward && (
         <Box marginLeft={1}>
           <SwellTooltip />

apps/web/src/views/Farms/components/FarmTable/Row.tsx

@@ -9,6 +9,7 @@ import { styled } from 'styled-components'
 import { ChainId } from '@pancakeswap/chains'
 import { useActiveChainId } from 'hooks/useActiveChainId'
 import { useMerklInfo } from 'hooks/useMerkl'
+import { useMerklUserLink } from 'utils/getMerklLink'
 import { V2Farm, V3Farm } from 'views/Farms/FarmsV3'
 import { useBCakeBoostLimitAndLockInfo } from 'views/Farms/components/YieldBooster/hooks/bCakeV3/useBCakeV3Info'
 import { RewardPerDay } from 'views/PositionManagers/components/RewardPerDay'
@@ -145,6 +146,7 @@ const Row: React.FunctionComponent<React.PropsWithChildren<RowPropsWithLoading>>
     return isSmallerScreen ? MobileColumnSchema : props.type === 'v3' ? V3DesktopColumnSchema : DesktopColumnSchema
   }, [isSmallerScreen, props.type])
   const columnNames = useMemo(() => tableSchema.map((column) => column.name), [tableSchema])
+  const merklUserLink = useMerklUserLink()
 
   const { merklApr } = useMerklInfo(farm?.merklLink ? props.details.lpAddress : null)
   return (
@@ -289,6 +291,7 @@ const Row: React.FunctionComponent<React.PropsWithChildren<RowPropsWithLoading>>
                             chainId: props?.details?.token.chainId,
                             lpAddress: props?.details?.lpAddress,
                             merklApr,
+                            merklUserLink,
                           })}
                         </CellLayout>
                       </CellInner>
@@ -304,7 +307,12 @@ const Row: React.FunctionComponent<React.PropsWithChildren<RowPropsWithLoading>>
           <tr style={{ cursor: 'pointer' }} onClick={toggleActionPanel}>
             <FarmMobileCell colSpan={3}>
               <Flex justifyContent="space-between" alignItems="center">
-                <FarmCell {...props.farm} lpAddress={props?.details?.lpAddress} merklApr={merklApr} />
+                <FarmCell
+                  {...props.farm}
+                  lpAddress={props?.details?.lpAddress}
+                  merklApr={merklApr}
+                  merklUserLink={merklUserLink}
+                />
                 <Flex
                   mr="16px"
                   alignItems={isMobile ? 'end' : 'center'}

packages/localization/src/config/translations.json

@@ -2707,9 +2707,7 @@
   "Unstaking from v2 farm?": "Unstaking from v2 farm?",
   "Migrate to v3 here": "Migrate to v3 here",
   "Migrate to V3": "Migrate to V3",
-  "Incentives have moved to": "Incentives have moved to",
   "Merkl": "Merkl",
-  "To earn Merkl rewards, continue seeding liquidity on PancakeSwap, but DO NOT stake your LP token in the Farm. Otherwise, you will not accrue rewards.": "To earn Merkl rewards, continue seeding liquidity on PancakeSwap, but DO NOT stake your LP token in the Farm. Otherwise, you will not accrue rewards.",
   "Learn more about the strategy": "Learn more about the strategy",
   "Earn rewards hassle-free with single-sided staking": "Earn rewards hassle-free with single-sided staking",
   "You are providing liquidity via a 3rd party liquidity manager": "You are providing liquidity via a 3rd party liquidity manager",
@@ -3003,9 +3001,7 @@
   "PancakeSwap Meetup": "PancakeSwap Meetup",
   "Spain": "Spain",
   "Automated Liquidity Optimization": "Automated Liquidity Optimization",
-  "Incentives can be earned on either Merkl or Farm but NOT both": "Incentives can be earned on either Merkl or Farm but NOT both",
   "To earn Farm rewards, continue seeding liquidity on PancakeSwap and stake your LP token in the Farm.": "To earn Farm rewards, continue seeding liquidity on PancakeSwap and stake your LP token in the Farm.",
-  "To earn Merkl rewards, continue seeding liquidity on PancakeSwap but DO NOT stake your LP token in the Farm. Claim your rewards directly on ": "To earn Merkl rewards, continue seeding liquidity on PancakeSwap but DO NOT stake your LP token in the Farm. Claim your rewards directly on ",
   "An active veCAKE staking position is required for activating farm yield boosters.": "An active veCAKE staking position is required for activating farm yield boosters.",
   "Go to CAKE Staking": "Go to CAKE Staking",
   "Yield booster active": "Yield booster active",
@@ -3390,5 +3386,9 @@
   "I've read and understood the following update.": "I've read and understood the following update.",
   "Please be informed that the Affiliate who referred you and through whose referral link you signed up to trade is no longer part of PancakeSwap's Affiliate Program. As a result, effective immediately June 12, 2024, you will no longer receive any trading discounts from this Affiliate if they were previously enabled.": "Please be informed that the Affiliate who referred you and through whose referral link you signed up to trade is no longer part of PancakeSwap's Affiliate Program. As a result, effective immediately June 12, 2024, you will no longer receive any trading discounts from this Affiliate if they were previously enabled.",
   "You can still access the affiliate claims dashboard until July 31, 2024. If you have any outstanding discounts unclaimed, please %claim% them before this date. After July 31, 2024, any unclaimed discounts will be forfeited, and you will no longer have access to the affiliate claims dashboard.": "You can still access the affiliate claims dashboard until July 31, 2024. If you have any outstanding discounts unclaimed, please %claim% them before this date. After July 31, 2024, any unclaimed discounts will be forfeited, and you will no longer have access to the affiliate claims dashboard.",
-  "Overnight has temporarily paused USD+ operations on zkSync due to the recent Velocore exploit.Swap, approve, and add / remove liquidity functions are currently unavailable. More information can be found on Overnight's": "Overnight has temporarily paused USD+ operations on zkSync due to the recent Velocore exploit.Swap, approve, and add / remove liquidity functions are currently unavailable. More information can be found on Overnight's"
+  "Overnight has temporarily paused USD+ operations on zkSync due to the recent Velocore exploit.Swap, approve, and add / remove liquidity functions are currently unavailable. More information can be found on Overnight's": "Overnight has temporarily paused USD+ operations on zkSync due to the recent Velocore exploit.Swap, approve, and add / remove liquidity functions are currently unavailable. More information can be found on Overnight's",
+  "Incentives can now be earned on BOTH Merkl and Farms at the same time.": "Incentives can now be earned on BOTH Merkl and Farms at the same time.",
+  "Stake your LP token in the Farm and accrue both Merkl and Farm rewards.": "Stake your LP token in the Farm and accrue both Merkl and Farm rewards.",
+  "Claim your Farm rewards on PancakeSwap and your Merkl rewards on": "Claim your Farm rewards on PancakeSwap and your Merkl rewards on",
+  "Merkl's website": "Merkl's website"
 }

packages/widgets-internal/farm/components/FarmTable/FarmTokenInfo.tsx

@@ -32,6 +32,7 @@ const Farm: React.FunctionComponent<React.PropsWithChildren<FarmTableFarmTokenIn
   hasBothFarmAndMerkl,
   children,
   merklApr,
+  merklUserLink,
 }) => {
   const { t } = useTranslation();
 
@@ -66,7 +67,12 @@ const Farm: React.FunctionComponent<React.PropsWithChildren<FarmTableFarmTokenIn
         <Row gap="sm">
           <Text bold>{label}</Text>
           {merklLink ? (
-            <MerklNotice.WithTooltip hasFarm={hasBothFarmAndMerkl} merklLink={merklLink} merklApr={merklApr} />
+            <MerklNotice.WithTooltip
+              hasFarm={hasBothFarmAndMerkl}
+              merklLink={merklLink}
+              merklApr={merklApr}
+              merklUserLink={merklUserLink}
+            />
           ) : null}
         </Row>
       </div>

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

@@ -11,6 +11,7 @@ const InlineLink = styled(LinkExternal)`
 type MerklNoticeContentProps = {
   linkColor?: string;
   merklLink: string;
+  merklUserLink?: string;
   hasFarm?: boolean;
   merklApr?: number;
 };
@@ -20,6 +21,7 @@ export const MerklNoticeContent: React.FC<MerklNoticeContentProps> = ({
   merklLink,
   hasFarm,
   merklApr,
+  merklUserLink,
 }) => {
   const { t } = useTranslation();
 
@@ -28,15 +30,14 @@ export const MerklNoticeContent: React.FC<MerklNoticeContentProps> = ({
       <>
         <Box>
           <Text display="inline" color="currentColor">
-            {t("Incentives can be earned on either Merkl or Farm but NOT both")}
-            <br />
-            <br />
+            {t("Incentives can now be earned on BOTH Merkl and Farms at the same time.")}
             <p>
-              {t(
-                "To earn Merkl rewards, continue seeding liquidity on PancakeSwap but DO NOT stake your LP token in the Farm. Claim your rewards directly on "
-              )}
-              <InlineLink color={linkColor} external display="inline" href={merklLink}>
-                {t("Merkl")}
+              {t("Stake your LP token in the Farm and accrue both Merkl and Farm rewards.")}
+              <br />
+              <br />
+              {t("Claim your Farm rewards on PancakeSwap and your Merkl rewards on")}
+              <InlineLink color={linkColor} external display="inline" href={merklUserLink}>
+                {t("Merkl's website")}
               </InlineLink>
             </p>
             <br />
@@ -57,23 +58,24 @@ export const MerklNoticeContent: React.FC<MerklNoticeContentProps> = ({
     <>
       <Box>
         <Text display="inline" color="currentColor">
-          <p>
-            {t("Incentives have moved to")}
-            <InlineLink color={linkColor} external display="inline" href={merklLink}>
-              {t("Merkl")}
-            </InlineLink>
-          </p>
+          <p>{t("Incentives can now be earned on BOTH Merkl and Farms at the same time.")}</p>
+          <br />
           {merklApr && (
-            <InlineLink color={linkColor} external display="inline" href={merklLink}>
-              {t("Merkl APR")}: {merklApr?.toFixed(2)}%
-            </InlineLink>
+            <>
+              <InlineLink color={linkColor} external display="inline" href={merklLink}>
+                {t("Merkl APR")}: {merklApr?.toFixed(2)}%
+              </InlineLink>
+              <br />
+              <br />
+            </>
           )}
+          {t("Stake your LP token in the Farm and accrue both Merkl and Farm rewards.")}
           <br />
           <br />
-          <br />
-          {t(
-            "To earn Merkl rewards, continue seeding liquidity on PancakeSwap, but DO NOT stake your LP token in the Farm. Otherwise, you will not accrue rewards."
-          )}
+          {t("Claim your Farm rewards on PancakeSwap and your Merkl rewards on")}
+          <InlineLink color={linkColor} external display="inline" href={merklUserLink}>
+            {t("Merkl's website")}
+          </InlineLink>
         </Text>
       </Box>
     </>
@@ -86,6 +88,7 @@ type MerklNoticeProps = {
   placement?: Placement;
   tooltipOffset?: [number, number];
   merklLink: string;
+  merklUserLink?: string;
   hasFarm?: boolean;
   merklApr?: number;
 };
@@ -97,9 +100,10 @@ const MerklNotice: React.FC<MerklNoticeProps> = ({
   merklLink,
   hasFarm,
   merklApr,
+  merklUserLink,
 }) => {
   const { tooltip, tooltipVisible, targetRef } = useTooltip(
-    <MerklNoticeContent merklLink={merklLink} hasFarm={hasFarm} merklApr={merklApr} />,
+    <MerklNoticeContent merklLink={merklLink} hasFarm={hasFarm} merklApr={merklApr} merklUserLink={merklUserLink} />,
     {
       placement,
       tooltipOffset,

packages/widgets-internal/farm/types.ts

@@ -39,6 +39,7 @@ export interface FarmTableFarmTokenInfoProps {
   lpAddress?: Address;
   merklApr?: number;
   rewardCakePerSecond?: number;
+  merklUserLink?: string;
 }
 
 export type ColumnsDefTypes = {