mango-ui-v3/pages/_app.tsx

import Head from 'next/head'
import { ThemeProvider } from 'next-themes'
import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'
import 'intro.js/introjs.css'
import '../styles/index.css'
import useWallet from '../hooks/useWallet'
import useHydrateStore from '../hooks/useHydrateStore'
import Notifications from '../components/Notification'
import useMangoStore from '../stores/useMangoStore'
import useOraclePrice from '../hooks/useOraclePrice'
import { getDecimalCount } from '../utils'
import { useRouter } from 'next/router'
import { ViewportProvider } from '../hooks/useViewport'
import BottomBar from '../components/mobile/BottomBar'
import { appWithTranslation } from 'next-i18next'
import ErrorBoundary from '../components/ErrorBoundary'
import GlobalNotification from '../components/GlobalNotification'
import { useOpenOrders } from '../hooks/useOpenOrders'
import usePerpPositions from '../hooks/usePerpPositions'

const MangoStoreUpdater = () => {
  useHydrateStore()
  return null
}

const WalletStoreUpdater = () => {
  useWallet()
  return null
}

const OpenOrdersStoreUpdater = () => {
  useOpenOrders()
  return null
}

const PerpPositionsStoreUpdater = () => {
  usePerpPositions()
  return null
}

const PageTitle = () => {
  const router = useRouter()
  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
  const market = useMangoStore((s) => s.selectedMarket.current)
  const oraclePrice = useOraclePrice()
  const selectedMarketName = marketConfig.name
  const marketTitleString =
    marketConfig && router.pathname.includes('market')
      ? `${
          oraclePrice
            ? oraclePrice.toFixed(getDecimalCount(market?.tickSize)) + ' | '
            : ''
        }${selectedMarketName} - `
      : ''

  return (
    <Head>
      <title>{marketTitleString}Mango Markets</title>
    </Head>
  )
}

function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Mango Markets</title>
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700&display=swap"
          rel="stylesheet"
        />
        <link rel="icon" href="/favicon.ico" />
        <meta property="og:title" content="Mango Markets" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
          name="keywords"
          content="Mango Markets, Serum, SRM, Serum DEX, DEFI, Decentralized Finance, Decentralised Finance, Crypto, ERC20, Ethereum, Decentralize, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SerumBTC, SerumUSD, SRM Tokens, SPL Tokens"
        />
        <meta
          name="description"
          content="Mango Markets - Decentralised, cross-margin trading up to 10x leverage with lightning speed and near-zero fees."
        />
        <link
          rel="apple-touch-icon"
          sizes="192x192"
          href="/apple-touch-icon.png"
        />
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Mango Markets" />
        <meta
          name="twitter:description"
          content="Mango Markets - Decentralised, cross-margin trading up to 10x leverage with lightning speed and near-zero fees."
        />
        <meta name="twitter:image" content="/twitter-image.png" />
        <meta name="google" content="notranslate" />
        <script src="/datafeeds/udf/dist/polyfills.js"></script>
        <script src="/datafeeds/udf/dist/bundle.js"></script>

        <link rel="manifest" href="/manifest.json"></link>
      </Head>
      <ErrorBoundary>
        <ErrorBoundary>
          <PageTitle />
          <MangoStoreUpdater />
          <WalletStoreUpdater />
          <OpenOrdersStoreUpdater />
          <PerpPositionsStoreUpdater />
        </ErrorBoundary>

        <ThemeProvider defaultTheme="Mango">
          <ViewportProvider>
            <div className="bg-th-bkg-1 min-h-screen">
              <ErrorBoundary>
                <GlobalNotification />
                <Component {...pageProps} />
              </ErrorBoundary>
            </div>
            <div className="md:hidden fixed bottom-0 left-0 w-full z-20">
              <ErrorBoundary>
                <BottomBar />
              </ErrorBoundary>
            </div>

            <Notifications />
          </ViewportProvider>
        </ThemeProvider>
      </ErrorBoundary>
    </>
  )
}

export default appWithTranslation(App)
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`import Head from 'next/head'`
theme start 2021-04-11 14:25:01 -07:00			`import { ThemeProvider } from 'next-themes'`
add trade form component 2021-04-02 11:26:21 -07:00			`import '../node_modules/react-grid-layout/css/styles.css'`
			`import '../node_modules/react-resizable/css/styles.css'`
setup introjs tour 2021-10-29 05:05:55 -07:00			`import 'intro.js/introjs.css'`
add trade form component 2021-04-02 11:26:21 -07:00			`import '../styles/index.css'`
fix issue with wallet disconnect when changing pages 2021-04-15 14:54:42 -07:00			`import useWallet from '../hooks/useWallet'`
			`import useHydrateStore from '../hooks/useHydrateStore'`
add Lagzda's alerts 2021-04-24 19:10:28 -07:00			`import Notifications from '../components/Notification'`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			`import useMangoStore from '../stores/useMangoStore'`
			`import useOraclePrice from '../hooks/useOraclePrice'`
fix: match oracle and markprice decimals to tick size 2021-11-02 02:28:18 -07:00			`import { getDecimalCount } from '../utils'`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			`import { useRouter } from 'next/router'`
improve balances table 2021-09-03 05:11:21 -07:00			`import { ViewportProvider } from '../hooks/useViewport'`
Trade page mobile (#35) * mobile styles for chart, position, account * mobile styles for trade form * trade page mobile styles * tab layout * fix unknown property fill-rule * test swipeable tabs * fix container height * fix orderbook mobile styles * account page mobile styles * fix swipeable container height * stats page mobile styles 2021-09-19 17:36:02 -07:00			`import BottomBar from '../components/mobile/BottomBar'`
Add next-i18next translation framework & Traditional and Simplified Chinese UI Translations (#54) * start english localization * fix typo * add to english localization * add some zh translations, fix discrepencies in en * add more chinese translations * finish trad chinese translations * add simplified folder, add locales.json with meta info, add latest ui updates in english * add latest ui changes for chinese-trad and sort * fix typo * convert trad to simp * Update common.json * add review changes by @HZ2078 * fix typos * add latest ui changes * new ui change & trad-simp convert * delete monospace from locales.json * add next-i18next translation framework. Add translations up to #103 * replace more html with traslate tags * lint & add more phrases * add missing translations * add language select dropdown * add new update transltations * add latest gui update translations * add useTranslation to lang switch * sort common.json, add lang descriptions * update netlify config to support i18n * make translations more consistent Co-authored-by: Hz2078 <92381714+HZ2078@users.noreply.github.com> Co-authored-by: Tyler Shipe <tjshipe@gmail.com> 2021-10-20 05:42:40 -07:00			`import { appWithTranslation } from 'next-i18next'`
add error boundaries to app.tsx 2021-12-28 14:22:50 -08:00			`import ErrorBoundary from '../components/ErrorBoundary'`
add global alert component 2022-01-07 14:52:16 -08:00			`import GlobalNotification from '../components/GlobalNotification'`
store openOrders in zustand 2022-01-27 08:57:36 -08:00			`import { useOpenOrders } from '../hooks/useOpenOrders'`
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`import usePerpPositions from '../hooks/usePerpPositions'`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00
add ws watching for mangoAccount 2021-12-05 17:13:23 -08:00			`const MangoStoreUpdater = () => {`
fix issue with wallet disconnect when changing pages 2021-04-15 14:54:42 -07:00			`useHydrateStore()`
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`return null`
			`}`

			`const WalletStoreUpdater = () => {`
fix issue with wallet disconnect when changing pages 2021-04-15 14:54:42 -07:00			`useWallet()`
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`return null`
			`}`

			`const OpenOrdersStoreUpdater = () => {`
store openOrders in zustand 2022-01-27 08:57:36 -08:00			`useOpenOrders()`
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`return null`
			`}`
add ws watching for mangoAccount 2021-12-05 17:13:23 -08:00
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`const PerpPositionsStoreUpdater = () => {`
			`usePerpPositions()`
add ws watching for mangoAccount 2021-12-05 17:13:23 -08:00			`return null`
			`}`

move state out of parent components that were causing additional renders 2021-12-07 19:40:20 -08:00			`const PageTitle = () => {`
			`const router = useRouter()`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			`const marketConfig = useMangoStore((s) => s.selectedMarket.config)`
fix: match oracle and markprice decimals to tick size 2021-11-02 02:28:18 -07:00			`const market = useMangoStore((s) => s.selectedMarket.current)`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			`const oraclePrice = useOraclePrice()`
			`const selectedMarketName = marketConfig.name`
			`const marketTitleString =`
move state out of parent components that were causing additional renders 2021-12-07 19:40:20 -08:00			`marketConfig && router.pathname.includes('market')`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			? `${
fix: match oracle and markprice decimals to tick size 2021-11-02 02:28:18 -07:00			`oraclePrice`
			`? oraclePrice.toFixed(getDecimalCount(market?.tickSize)) + ' \| '`
			`: ''`
Add market name and price in title (#20) * Add market name and price in title * Reorder title, ensure price always displays on market pages Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net> 2021-09-25 03:17:35 -07:00			}${selectedMarketName} - `
			`: ''`
fix issue with wallet disconnect when changing pages 2021-04-15 14:54:42 -07:00
move state out of parent components that were causing additional renders 2021-12-07 19:40:20 -08:00			`return (`
			`<Head>`
			`<title>{marketTitleString}Mango Markets</title>`
			`</Head>`
			`)`
move page title into it's own component 2021-12-06 18:44:43 -08:00			`}`

			`function App({ Component, pageProps }) {`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`return (`
			`<>`
			`<Head>`
move state out of parent components that were causing additional renders 2021-12-07 19:40:20 -08:00			`<title>Mango Markets</title>`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`<link rel="preconnect" href="https://fonts.gstatic.com" />`
			`<link`
increase information density 2022-01-31 07:52:28 -08:00			`href="https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700&display=swap"`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`rel="stylesheet"`
			`/>`
add favicons 2021-04-13 13:34:06 -07:00			`<link rel="icon" href="/favicon.ico" />`
add more info to tooltip 2021-10-11 14:46:52 -07:00			`<meta property="og:title" content="Mango Markets" />`
add favicons 2021-04-13 13:34:06 -07:00			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
			`<meta`
			`name="keywords"`
			`content="Mango Markets, Serum, SRM, Serum DEX, DEFI, Decentralized Finance, Decentralised Finance, Crypto, ERC20, Ethereum, Decentralize, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SerumBTC, SerumUSD, SRM Tokens, SPL Tokens"`
			`/>`
			`<meta`
			`name="description"`
upgrade nextjs 2021-08-29 21:56:27 -07:00			`content="Mango Markets - Decentralised, cross-margin trading up to 10x leverage with lightning speed and near-zero fees."`
add favicons 2021-04-13 13:34:06 -07:00			`/>`
add apple-touch-icon link sizes to fix phantom 2021-11-03 19:04:06 -07:00			`<link`
			`rel="apple-touch-icon"`
			`sizes="192x192"`
			`href="/apple-touch-icon.png"`
			`/>`
add favicons 2021-04-13 13:34:06 -07:00			`<meta name="msapplication-TileColor" content="#da532c" />`
			`<meta name="theme-color" content="#ffffff" />`
			`<meta name="twitter:card" content="summary_large_image" />`
			`<meta name="twitter:title" content="Mango Markets" />`
			`<meta`
			`name="twitter:description"`
upgrade nextjs 2021-08-29 21:56:27 -07:00			`content="Mango Markets - Decentralised, cross-margin trading up to 10x leverage with lightning speed and near-zero fees."`
add favicons 2021-04-13 13:34:06 -07:00			`/>`
			`<meta name="twitter:image" content="/twitter-image.png" />`
prevent google translate from interfering with localization 2022-01-25 10:57:54 -08:00			`<meta name="google" content="notranslate" />`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`<script src="/datafeeds/udf/dist/polyfills.js"></script>`
			`<script src="/datafeeds/udf/dist/bundle.js"></script>`
add manifest and fix favicon 2021-04-13 13:45:07 -07:00
			`<link rel="manifest" href="/manifest.json"></link>`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`</Head>`
add error boundaries to app.tsx 2021-12-28 14:22:50 -08:00			`<ErrorBoundary>`
			`<ErrorBoundary>`
			`<PageTitle />`
			`<MangoStoreUpdater />`
utilize zustand for perppositions 2022-01-27 19:57:18 -08:00			`<WalletStoreUpdater />`
			`<OpenOrdersStoreUpdater />`
			`<PerpPositionsStoreUpdater />`
add error boundaries to app.tsx 2021-12-28 14:22:50 -08:00			`</ErrorBoundary>`

			`<ThemeProvider defaultTheme="Mango">`
			`<ViewportProvider>`
			`<div className="bg-th-bkg-1 min-h-screen">`
			`<ErrorBoundary>`
add global alert component 2022-01-07 14:52:16 -08:00			`<GlobalNotification />`
add error boundaries to app.tsx 2021-12-28 14:22:50 -08:00			`<Component {...pageProps} />`
			`</ErrorBoundary>`
			`</div>`
			`<div className="md:hidden fixed bottom-0 left-0 w-full z-20">`
			`<ErrorBoundary>`
			`<BottomBar />`
			`</ErrorBoundary>`
			`</div>`

			`<Notifications />`
			`</ViewportProvider>`
			`</ThemeProvider>`
			`</ErrorBoundary>`
create next app with trading view form and orderbook 2021-03-30 15:47:08 -07:00			`</>`
			`)`
			`}`

Add next-i18next translation framework & Traditional and Simplified Chinese UI Translations (#54) * start english localization * fix typo * add to english localization * add some zh translations, fix discrepencies in en * add more chinese translations * finish trad chinese translations * add simplified folder, add locales.json with meta info, add latest ui updates in english * add latest ui changes for chinese-trad and sort * fix typo * convert trad to simp * Update common.json * add review changes by @HZ2078 * fix typos * add latest ui changes * new ui change & trad-simp convert * delete monospace from locales.json * add next-i18next translation framework. Add translations up to #103 * replace more html with traslate tags * lint & add more phrases * add missing translations * add language select dropdown * add new update transltations * add latest gui update translations * add useTranslation to lang switch * sort common.json, add lang descriptions * update netlify config to support i18n * make translations more consistent Co-authored-by: Hz2078 <92381714+HZ2078@users.noreply.github.com> Co-authored-by: Tyler Shipe <tjshipe@gmail.com> 2021-10-20 05:42:40 -07:00			`export default appWithTranslation(App)`