chore: Temporary sort sable farm (need to be fixed) (#7422)

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

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at 7be0866</samp>

### Summary
🐛🎨🚧

<!--
1. 🐛 - This emoji represents a bug fix, as the change is meant to
address a potential issue where users might be confused by the farm
sorting order and think that the sable v2 farm is a v3 farm. The emoji
also implies that the change is not a permanent solution and might need
further refinement or removal later.
2. 🎨 - This emoji represents an improvement to the UI or design, as the
change is meant to enhance the visual appearance and clarity of the
farms page and make it easier for users to distinguish between different
farm versions and types. The emoji also implies that the change is not a
functional or logical change, but rather a cosmetic or aesthetic one.
3. 🚧 - This emoji represents a work in progress or a temporary change,
as the change is marked with a `FIXME` comment and is not intended to be
a final or optimal solution. The emoji also implies that the change
might introduce some technical debt or complexity that needs to be
resolved or simplified later.
-->
Sort sable v2 farm before v3 farms on BSC chain in `FarmsV3.tsx`. This
is a temporary fix to avoid user confusion.

> _`sort` sable v2 farm_
> _avoid confusion for users_
> _spring cleaning later_

### Walkthrough
* Add temporary logic to sort sable v2 farm in front of v3 farms on BSC
chain
([link](https://github.com/pancakeswap/pancake-frontend/pull/7422/files?diff=unified&w=0#diff-7c64c760be1e393dee45fb35e38cd0932308e931c85928c64cd5d66186d8440fL203-R225))

apps/web/src/views/Farms/FarmsV3.tsx

@@ -200,12 +200,29 @@ const Farms: React.FC<React.PropsWithChildren> = ({ children }) => {
     userDataLoaded: v3UserDataLoaded,
   } = useFarmsV3WithPositionsAndBooster({ mockApr })
 
+  // FIXME: temporary sort sable v2 farm in front of v3 farms
   const farmsLP: V2AndV3Farms = useMemo(() => {
-    return [
+    const farms: V2AndV3Farms = [
       ...farmsV3.map((f) => ({ ...f, version: 3 } as V3FarmWithoutStakedValue)),
       ...farmsV2.map((f) => ({ ...f, version: 2 } as V2FarmWithoutStakedValue)),
     ]
-  }, [farmsV2, farmsV3])
+    if (chainId !== ChainId.BSC) {
+      return farms
+    }
+    const sableFarm = farms.find((f) => f.version === 2 && f.pid === 167)
+    const v3TargetFarm = farms.find((f) => f.version === 3 && f.pid === 5)
+    if (!sableFarm || !v3TargetFarm) {
+      return farms
+    }
+    const sableFarmIndex = farms.indexOf(sableFarm)
+    const targetIndex = farms.indexOf(v3TargetFarm)
+    return [
+      ...farms.slice(0, targetIndex + 1),
+      sableFarm,
+      ...farms.slice(targetIndex + 1, sableFarmIndex),
+      ...farms.slice(sableFarmIndex + 1),
+    ]
+  }, [farmsV2, farmsV3, chainId])
 
   const cakePrice = usePriceCakeUSD()