feat: ido (#11114)

apps/web/next-seo.config.ts

@@ -1,3 +1,4 @@
+import { ASSET_CDN } from 'config/constants/endpoints'
 import { DefaultSeoProps } from 'next-seo'
 
 export const SEO: DefaultSeoProps = {
@@ -12,6 +13,6 @@ export const SEO: DefaultSeoProps = {
   openGraph: {
     title: "🥞 PancakeSwap - Everyone's Favorite DEX",
     description: 'Trade, earn, and own crypto on the all-in-one multichain DEX',
-    images: [{ url: 'https://assets.pancakeswap.finance/web/og/v2/hero.jpg' }],
+    images: [{ url: `${ASSET_CDN}/web/og/v2/hero.jpg` }],
   },
 }

apps/web/package.json

@@ -143,6 +143,7 @@
     "uuid": "^8.0.0",
     "viem": "catalog:",
     "wagmi": "catalog:",
+    "vconsole": "^3.15.1",
     "zod": "^3.22.3"
   },
   "devDependencies": {

apps/web/src/Providers.tsx

@@ -6,7 +6,7 @@ import { HistoryManagerProvider } from 'contexts/HistoryContext'
 import { ThemeProvider as NextThemeProvider, useTheme as useNextTheme } from 'next-themes'
 import { useMemo } from 'react'
 import { Provider } from 'react-redux'
-import { createWagmiConfig } from 'utils/wagmi'
+import { createW3WWagmiConfig, createWagmiConfig } from 'utils/wagmi'
 import { WagmiProvider } from 'wagmi'
 
 // Create a client
@@ -22,9 +22,14 @@ const StyledUIKitProvider: React.FC<React.PropsWithChildren> = ({ children, ...p
 }
 
 const Providers: React.FC<
-  React.PropsWithChildren<{ store: Store; children: React.ReactNode; dehydratedState: any }>
-> = ({ children, store, dehydratedState }) => {
-  const wagmiConfig = useMemo(() => createWagmiConfig(), [])
+  React.PropsWithChildren<{
+    store: Store
+    children: React.ReactNode
+    dehydratedState: any
+    w3wWagmiConfig?: boolean
+  }>
+> = ({ children, store, dehydratedState, w3wWagmiConfig }) => {
+  const wagmiConfig = useMemo(() => (w3wWagmiConfig ? createW3WWagmiConfig() : createWagmiConfig()), [w3wWagmiConfig])
   return (
     <WagmiProvider reconnectOnMount config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>

apps/web/src/components/AdPanel/utils.ts

@@ -1,5 +1,6 @@
+import { ASSET_CDN } from 'config/constants/endpoints'
 import memoize from 'lodash/memoize'
 
-const AD_ASSETS_URL = 'https://assets.pancakeswap.finance/web/promotions'
+const AD_ASSETS_URL = `${ASSET_CDN}/web/promotions`
 
 export const getImageUrl = memoize((asset: string) => `${AD_ASSETS_URL}/${asset}.png`)

apps/web/src/components/ConnectW3WButton.tsx

@@ -0,0 +1,141 @@
+import { isInBinance } from '@binance/w3w-utils'
+import { useTranslation } from '@pancakeswap/localization'
+import {
+  Button,
+  type ButtonProps,
+  FlexGap,
+  Modal,
+  ModalBody,
+  ModalV2,
+  SwapLoading,
+  Text,
+  WalletFilledV2Icon,
+  useToast,
+} from '@pancakeswap/uikit'
+import { useCallback, useState } from 'react'
+import { useChainIdByQuery } from 'state/info/hooks'
+import { binanceWeb3WalletConnector } from 'utils/wagmi'
+import { useConnect, useDisconnect } from 'wagmi'
+import Trans from './Trans'
+
+interface ConnectWalletButtonProps extends ButtonProps {
+  withIcon?: boolean
+}
+
+export const getBinanceDeepLink = (url: string, chainId = 1) => {
+  const base = 'bnc://app.binance.com/mp/app'
+  const appId = 'yFK5FCqYprrXDiVFbhyRx7'
+
+  const startPagePath = btoa('/pages/browser/index')
+  const startPageQuery = btoa(`url=${url}&defaultChainId=${chainId}`)
+  const deeplink = `${base}?appId=${appId}&startPagePath=${startPagePath}&startPageQuery=${startPageQuery}`
+  const dp = btoa(deeplink)
+  const http = `https://app.binance.com/en/download?_dp=${dp}`
+  return { http, bnc: deeplink }
+}
+
+const InstallModal = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal title={t('Connect Binance Wallet')}>
+      <ModalBody maxWidth={['100%', '100%', '100%', '360px']}>
+        <FlexGap gap="16px" flexDirection="column">
+          <Text>
+            {t(
+              'This IDO is exclusively available on the Binance Wallet. It seems you do not have the Binance App installed. Please download it on your mobile device to proceed.',
+            )}
+          </Text>
+          <Text color="textSubtle">
+            {t(
+              'To participate, please create a wallet using the Binance Wallet, as importing wallets with seed phrases is not supported for this sale.',
+            )}
+          </Text>
+          <Button as="a" href="https://www.binance.com/en/download" target="_blank" rel="noopener noreferrer">
+            <Text bold fontSize="16px" color="invertedContrast">
+              {t('Download Now')}
+            </Text>
+          </Button>
+        </FlexGap>
+      </ModalBody>
+    </Modal>
+  )
+}
+
+const ConnectW3WButton = ({ children, withIcon, onClick, ...props }: ConnectWalletButtonProps) => {
+  const [open, setOpen] = useState(false)
+  const handleOnDismiss = useCallback(() => setOpen(false), [])
+  const { connectAsync } = useConnect()
+  const chainId = useChainIdByQuery()
+
+  const handleClick = (e) => {
+    if (isInBinance()) {
+      console.debug('debug connect w3w chainId', chainId)
+      connectAsync({
+        // connector: binanceWeb3WalletConnector({ shimDisconnect: false }),
+        connector: binanceWeb3WalletConnector(),
+        chainId,
+      })
+      if (onClick) {
+        onClick(e)
+      }
+    } else {
+      setOpen(true)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={handleClick} {...props}>
+        <FlexGap gap="8px" justifyContent="center" alignItems="center">
+          {children || <Trans>Connect Wallet</Trans>} {withIcon && <WalletFilledV2Icon color="invertedContrast" />}
+        </FlexGap>
+      </Button>
+      <ModalV2 isOpen={open} onDismiss={handleOnDismiss}>
+        <InstallModal />
+      </ModalV2>
+    </>
+  )
+}
+
+export const DisconnectW3WButton: React.FC<ButtonProps> = (props) => {
+  const { disconnectAsync, status } = useDisconnect()
+  const { t } = useTranslation()
+  const { toastError, toastSuccess } = useToast()
+  const disconnect = useCallback(async () => {
+    try {
+      await disconnectAsync(
+        {},
+        {
+          onError: (error) => toastError(error.message),
+          onSuccess: () => toastSuccess(t('Disconnected from Binance Wallet')),
+        },
+      )
+      if (window.ethereum) {
+        // await window.ethereum.request({
+        //   method: 'wallet_revokePermissions',
+        //   params: [
+        //     {
+        //       eth_accounts: {},
+        //     },
+        //   ],
+        // })
+        // @ts-expect-error
+        await window.ethereum.request({
+          method: 'eth_requestAccounts',
+          params: [{ eth_accounts: {} }],
+        })
+      }
+    } catch (error) {
+      console.error('debug disconnect w3w', error)
+    }
+  }, [disconnectAsync, toastError, toastSuccess, t])
+
+  return (
+    <Button onClick={disconnect} {...props}>
+      {t('Disconnect')} {status === 'pending' ? <SwapLoading ml="3px" /> : null}
+    </Button>
+  )
+}
+
+export default ConnectW3WButton

apps/web/src/components/Menu/index.tsx

@@ -14,6 +14,7 @@ import { IdType, useUserNotUsCitizenAcknowledgement } from 'hooks/useUserIsUsCit
 import { useWebNotifications } from 'hooks/useWebNotifications'
 import { useRouter } from 'next/router'
 import { Suspense, lazy, useCallback, useMemo } from 'react'
+import { styled } from 'styled-components'
 import { getOptionsUrl } from 'utils/getOptionsUrl'
 import GlobalSettings from './GlobalSettings'
 import { SettingsMode } from './GlobalSettings/types'
@@ -146,3 +147,26 @@ const Menu = (props) => {
 }
 
 export default Menu
+
+const SharedComponentWithOutMenuWrapper = styled.div`
+  display: none;
+`
+
+export const SharedComponentWithOutMenu: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { enabled } = useWebNotifications()
+  return (
+    <>
+      <SharedComponentWithOutMenuWrapper>
+        <GlobalSettings mode={SettingsMode.GLOBAL} />
+        {enabled && (
+          <Suspense fallback={null}>
+            <Notifications />
+          </Suspense>
+        )}
+        <NetworkSwitcher />
+        <UserMenu />
+      </SharedComponentWithOutMenuWrapper>
+      {children}
+    </>
+  )
+}

apps/web/src/components/TokenImage/index.tsx

@@ -4,8 +4,8 @@ import {
   ImageProps,
   TokenImage as UIKitTokenImage,
   TokenPairImage as UIKitTokenPairImage,
-  TokenPairLogo as UIKitTokenPairLogo,
   TokenPairImageProps as UIKitTokenPairImageProps,
+  TokenPairLogo as UIKitTokenPairLogo,
 } from '@pancakeswap/uikit'
 import uriToHttp from '@pancakeswap/utils/uriToHttp'
 import { ASSET_CDN } from 'config/constants/endpoints'
@@ -44,8 +44,7 @@ export const getImageUrlsFromToken = (token: Currency & { logoURI?: string | und
   return [...uriLocations, imageUri]
 }
 
-export const getChainLogoUrlFromChainId = (chainId: number) =>
-  `https://assets.pancakeswap.finance/web/chains/${chainId}.png`
+export const getChainLogoUrlFromChainId = (chainId: number) => `${ASSET_CDN}/web/chains/${chainId}.png`
 
 export const TokenPairImage: React.FC<React.PropsWithChildren<TokenPairImageProps>> = ({
   primaryToken,

apps/web/src/components/vConsole/index.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import type VConsole from 'vconsole'
+
+const LoadVConsole: React.FC = () => {
+  useEffect(() => {
+    let vConsole: VConsole
+    if (process.env.NODE_ENV === 'development') {
+      const loadVConsole = async () => {
+        const V = (await import('vconsole')).default
+        localStorage.setItem('vConsole_switch_y', `${window.innerHeight / 2}`)
+        vConsole = new V()
+      }
+      loadVConsole()
+    }
+    return () => {
+      if (vConsole) {
+        vConsole.destroy()
+      }
+    }
+  }, [])
+  return null
+}
+
+export default LoadVConsole