feat: Add game folder (#8250)

<!--
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 5c40202</samp>

### Summary
🎮🚀🌐

<!--
1. 🎮 - This emoji represents the games app and its features, as well as
the fun and entertainment aspect of the project.
2. 🚀 - This emoji represents the performance and security improvements,
as well as the new configuration and plugins for the Next.js framework
and the games app.
3. 🌐 - This emoji represents the SEO and localization features, as well
as the consistency and compatibility with the PancakeSwap main app and
the other apps.
-->
This pull request adds a new games app to the PancakeSwap frontend
project, using Next.js, TypeScript, and various packages and components
from the PancakeSwap ecosystem. It creates and modifies several files to
configure, develop, build, and run the games app, as well as to provide
some basic pages, components, styles, and SEO features. It also adds
some scripts to the root `package.json` file to simplify the management
of the games app and its dependencies.

> _Sing, O Muse, of the games app, the splendid work of PancakeSwap,_
> _The deft and skillful builders of the next-gen decentralized
platform,_
> _Who with their nimble fingers and their keen and clever minds_
> _Crafted the code and config, the style and SEO, the theme and
language._

### Walkthrough
* Add a new games app to the PancakeSwap project with custom
configuration, components, pages, and scripts
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-b1f0c4615ad1319a9023b4ccb9b488b820334614936974134e2b58c702d46ac6L1-L-1),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-8ccfb148398174687c867fa67f7e4ed8733f1d6e0fbd7ce240a33558d59a4a24R1-R19),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-953bf50986b31ae956d90f7dfe7a9a00136105f54fabd93012cc427609469901R1-R36),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-967cbebab910026c266138bed26eb3393d5b9d4dcdc7033a03c7746c6ac6cca4L1-L-1),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-41d759d1721a501e8ab8500bde896adea347237a8c36ee5ed88482da7098b7abR1-R120),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-38c8c3f7c97b1989cd32845952af72994a3025ac89c2d004c0cce41020c94726R1-R15),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-e8a6e148abf8d9c103819691a1e48d8ef109385d2d3cee9359ba56129b4850aeR1-R23),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-430282ea6f5ee968697b3df90d4fd896122a8f15ba1fc44029daa7bc031ae767R1-R19),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-299aa2d3a195b07231f91fae3d7436f0645483fc4651d4e07da48d5c61f48941R1-R22),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-494a42c511e304d855558e2512ce45b6b47d9cf893e46eea26b472b57034fd65R1-R42),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-7813fdb0f9149af5bc029f36557c1968b34cd4a82e4edc269b0a7493767e86c7R1-R10),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-ba3ca5c774810c195a021c45d3f2f8627c680e00fd3b6a0b7d627d5c52610470R1-R94),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-bcc52e1c62033b3327f10e93d6059a41dd188ef546c64d339ec1a36556ca26dcR1-R59),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-9c034d9c84bab83f338cd274a8c184733a1a2327bb0145a5ec4d5a78f2f551bfR1-R5),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-565cfe8f44e9297e8dcdc7cd2b9c6b11cc0494a31145c23e5c7d6c1235d365e5R1-R8),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R18),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R25))
* Set up the SEO settings for the games app using the `next-seo` package
and the `PageMeta` component
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-e8a6e148abf8d9c103819691a1e48d8ef109385d2d3cee9359ba56129b4850aeR1-R23),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-430282ea6f5ee968697b3df90d4fd896122a8f15ba1fc44029daa7bc031ae767R1-R19),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-7813fdb0f9149af5bc029f36557c1968b34cd4a82e4edc269b0a7493767e86c7R1-R10),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-9c034d9c84bab83f338cd274a8c184733a1a2327bb0145a5ec4d5a78f2f551bfR1-R5))
* Use the PancakeSwap UI kit, localization, hooks, and wrap balancer
packages to create a consistent and user-friendly interface for the
games app, and wrap some components with the `NoSSR` component to avoid
server-side rendering errors
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-41d759d1721a501e8ab8500bde896adea347237a8c36ee5ed88482da7098b7abR1-R120),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-38c8c3f7c97b1989cd32845952af72994a3025ac89c2d004c0cce41020c94726R1-R15),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-ba3ca5c774810c195a021c45d3f2f8627c680e00fd3b6a0b7d627d5c52610470R1-R94),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-9c034d9c84bab83f338cd274a8c184733a1a2327bb0145a5ec4d5a78f2f551bfR1-R5))
* Add the `NEXT_PUBLIC_APEX_URL` environment variable to store the URL
of the PancakeSwap main app, and use it in some components and links
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-b1f0c4615ad1319a9023b4ccb9b488b820334614936974134e2b58c702d46ac6L1-L-1))
* Add the `.eslintrc` file to enforce code quality and style standards
for the games app, and add the `.gitignore` file to avoid committing
unnecessary or sensitive files to the repository
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-8ccfb148398174687c867fa67f7e4ed8733f1d6e0fbd7ce240a33558d59a4a24R1-R19),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-953bf50986b31ae956d90f7dfe7a9a00136105f54fabd93012cc427609469901R1-R36))
* Customize the HTML document and inject the styled-components styles
using the `_document.tsx` file and the `ServerStyleSheet` class
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-bcc52e1c62033b3327f10e93d6059a41dd188ef546c64d339ec1a36556ca26dcR1-R59))
* Enable and customize the TypeScript features and rules for the games
app using the `tsconfig.json` file and the
`@pancakeswap/tsconfig/nextjs.json` file
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-565cfe8f44e9297e8dcdc7cd2b9c6b11cc0494a31145c23e5c7d6c1235d365e5R1-R8))
* Enable some features and plugins for the games app using the
`next.config.mjs` file and the `NextConfig` type
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-299aa2d3a195b07231f91fae3d7436f0645483fc4651d4e07da48d5c61f48941R1-R22))
* Add the Google Tag Manager features using the `Script` component and
some meta tags and scripts in the `_app.tsx` and `_document.tsx` files
([link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-ba3ca5c774810c195a021c45d3f2f8627c680e00fd3b6a0b7d627d5c52610470R1-R94),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8250/files?diff=unified&w=0#diff-bcc52e1c62033b3327f10e93d6059a41dd188ef546c64d339ec1a36556ca26dcR1-R59))

README.md

@@ -67,6 +67,19 @@ pnpm dev:blog
 ```sh
 pnpm build:blog
 ```
+
+## `apps/games`
+<details>
+<summary>
+How to start
+</summary>
+
+```sh
+pnpm dev:games
+```
+```sh
+pnpm build:games
+```
 </details>
 
 

apps/games/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true
+  },
+  "plugins": ["lodash"],
+  "extends": ["plugin:@next/next/recommended"],
+  "rules": {
+    "no-restricted-syntax": 0,
+    "import/no-unresolved": 0,
+    "no-console": ["warn", { "allow": ["info", "warn", "error", "debug"] }],
+    "no-plusplus": 0,
+    "prefer-destructuring": ["warn", { "object": true, "array": false }],
+    "no-underscore-dangle": 0,
+    "lodash/import-scope": [2, "method"],
+    "@next/next/no-img-element": 0
+  }
+}

apps/games/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+

apps/games/README.md

@@ -0,0 +1 @@
+Game page

apps/games/components/Menu.tsx

@@ -0,0 +1,117 @@
+import { useTheme as useNextTheme } from 'next-themes'
+import {
+  Box,
+  Flex,
+  Logo,
+  ThemeSwitcher,
+  Link,
+  Button,
+  LangSelector,
+  DropdownMenuItemType,
+  DropdownMenu,
+  useMatchBreakpoints,
+} from '@pancakeswap/uikit'
+import { useTranslation, languageList, Trans } from '@pancakeswap/localization'
+import { styled, useTheme } from 'styled-components'
+import NextLink from 'next/link'
+import { useRouter } from 'next/router'
+
+const StyledMenuItem = styled('div')<{ $isActive?: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.secondary : theme.colors.textSubtle)};
+  font-size: 14px;
+  font-weight: ${({ $isActive }) => ($isActive ? '600' : '400')};
+
+  padding: 0 6px;
+  height: 48px;
+
+  &:hover {
+    opacity: 0.65;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    font-size: 16px;
+    padding: 0 16px;
+  }
+`
+
+interface MenuConfigItemType {
+  label: string | React.ReactNode
+  href: string
+  type?: DropdownMenuItemType
+}
+
+interface MenuConfigType {
+  title: string | React.ReactNode
+  href: string
+  items?: MenuConfigItemType[]
+}
+
+const MenuConfig: MenuConfigType[] = [
+  { title: <Trans>Developers</Trans>, href: '/developers' },
+  { title: <Trans>Community</Trans>, href: '/community' },
+]
+
+const Menu = () => {
+  const theme = useTheme()
+  const { setTheme } = useNextTheme()
+  const nextRouter = useRouter()
+  const { currentLanguage, setLanguage, t } = useTranslation()
+  const { isDesktop } = useMatchBreakpoints()
+
+  return (
+    <Flex height="56px" bg="backgroundAlt" px="16px" alignItems="center" justifyContent="space-between" zIndex={9}>
+      <Flex>
+        <Logo href="/" />
+        <Flex pl={['10px', '10px', '10px', '50px']}>
+          {MenuConfig.map((menu) => (
+            <Flex key={menu.href}>
+              {menu.items ? (
+                <DropdownMenu items={menu.items}>
+                  <NextLink href={menu.href} passHref>
+                    <StyledMenuItem
+                      $isActive={menu.items.findIndex((item) => item.href === nextRouter.pathname) !== -1}
+                    >
+                      {menu.title}
+                    </StyledMenuItem>
+                  </NextLink>
+                </DropdownMenu>
+              ) : (
+                <Box display="flex">
+                  <NextLink href={menu.href} passHref>
+                    <StyledMenuItem $isActive={nextRouter.pathname === menu.href}>{menu.title}</StyledMenuItem>
+                  </NextLink>
+                </Box>
+              )}
+            </Flex>
+          ))}
+        </Flex>
+      </Flex>
+      <Flex alignItems="center">
+        <Box mt="6px">
+          <LangSelector
+            buttonScale="xs"
+            color="textSubtle"
+            hideLanguage
+            currentLang={currentLanguage.code}
+            langs={languageList}
+            setLang={setLanguage}
+          />
+        </Box>
+        <Box mr="16px">
+          <ThemeSwitcher isDark={theme.isDark} toggleTheme={() => setTheme(theme.isDark ? 'light' : 'dark')} />
+        </Box>
+        {isDesktop && (
+          <Link external href="https://pancakeswap.finance/">
+            <Button scale="sm">{t('Launch App')}</Button>
+          </Link>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Menu

apps/games/components/PageMeta.tsx

@@ -0,0 +1,23 @@
+import { NextSeo } from 'next-seo'
+
+interface PageMetaProps {
+  title: string
+  description: string
+  imgUrl: string
+}
+
+const PageMeta = ({ title, description, imgUrl }: PageMetaProps) => {
+  return (
+    <NextSeo
+      title={title}
+      description={description}
+      openGraph={{
+        title,
+        description,
+        images: [{ url: imgUrl }],
+      }}
+    />
+  )
+}
+
+export default PageMeta

apps/games/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/games/next-seo.config.ts

@@ -0,0 +1,19 @@
+import { DefaultSeoProps } from 'next-seo'
+
+export const SEO: DefaultSeoProps = {
+  titleTemplate: '%s | PancakeSwap',
+  defaultTitle: 'Game | PancakeSwap',
+  description:
+    'Cheaper and faster than Uniswap? Discover PancakeSwap, the leading DEX on BNB Smart Chain (BSC) with the best farms in DeFi and a lottery for CAKE.',
+  twitter: {
+    cardType: 'summary_large_image',
+    handle: '@PancakeSwap',
+    site: '@PancakeSwap',
+  },
+  openGraph: {
+    title: '🥞 PancakeSwap - A next evolution DeFi exchange on BNB Smart Chain (BSC)',
+    description:
+      'The most popular AMM on BSC! Earn CAKE through yield farming or win it in the Lottery, then stake it in Syrup Pools to earn more tokens! Initial Farm Offerings (new token launch model pioneered by PancakeSwap), NFTs, and more, on a platform you can trust.',
+    images: [{ url: 'https://pancakeswap.finance/images/hero.png' }],
+  },
+}

apps/games/next.config.mjs

@@ -0,0 +1,22 @@
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
+import { withAxiom } from 'next-axiom'
+import { withWebSecurityHeaders } from '@pancakeswap/next-config/withWebSecurityHeaders'
+
+const withVanillaExtract = createVanillaExtractPlugin()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  transpilePackages: [
+    '@pancakeswap/uikit',
+    '@pancakeswap/hooks',
+    '@pancakeswap/localization',
+    '@pancakeswap/utils',
+  ],
+  compiler: {
+    styledComponents: true,
+  },
+}
+
+export default withAxiom(withVanillaExtract(withWebSecurityHeaders(nextConfig)))

apps/games/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "games",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3004",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@pancakeswap/localization": "workspace:*",
+    "@pancakeswap/uikit": "workspace:*",
+    "@pancakeswap/hooks": "workspace:*",
+    "@pancakeswap/utils": "workspace:*",
+    "@vanilla-extract/next-plugin": "^2.3.0",
+    "next-seo": "^5.15.0",
+    "next-themes": "^0.2.1",
+    "next": "13.4.2",
+    "next-axiom": "^0.18.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-wrap-balancer": "^0.4.0",
+    "styled-components": "^6.0.7",
+    "swiper": "^10.3.1",
+    "swr": "^2.2.4",
+    "typescript": "^5.1.3",
+    "qs": "^6.0.0",
+    "zod": "^3.22.3"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "13.4.2",
+    "@types/node": "18.0.4",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.32.0",
+    "@types/styled-system": "^5.1.17",
+    "@pancakeswap/tsconfig": "workspace:*",
+    "@pancakeswap/next-config": "workspace:*",
+    "@types/qs": "^6.0.0"
+  }
+}

apps/games/pages/404.tsx

@@ -0,0 +1,10 @@
+import { NotFound } from '@pancakeswap/uikit'
+import { NextSeo } from 'next-seo'
+
+const NotFoundPage = () => (
+  <NotFound>
+    <NextSeo title="404" />
+  </NotFound>
+)
+
+export default NotFoundPage