mango-ui-v3/pages/_app.tsx

217 lines
7.1 KiB
TypeScript
Raw Normal View History

import Head from 'next/head'
2021-04-11 14:25:01 -07:00
import { ThemeProvider } from 'next-themes'
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'
2021-10-29 05:05:55 -07:00
import 'intro.js/introjs.css'
2021-04-02 11:26:21 -07:00
import '../styles/index.css'
2022-03-29 19:05:12 -07:00
import 'react-nice-dates/build/style.css'
2022-03-28 17:14:12 -07:00
import '../styles/datepicker.css'
import useHydrateStore from '../hooks/useHydrateStore'
2021-04-24 19:10:28 -07:00
import Notifications from '../components/Notification'
import useMangoStore from '../stores/useMangoStore'
import useOraclePrice from '../hooks/useOraclePrice'
import { getDecimalCount } from '../utils'
import { useRouter } from 'next/router'
2021-09-03 05:11:21 -07:00
import { ViewportProvider } from '../hooks/useViewport'
import BottomBar from '../components/mobile/BottomBar'
import { appWithTranslation } from 'next-i18next'
2021-12-28 14:22:50 -08:00
import ErrorBoundary from '../components/ErrorBoundary'
2022-01-07 14:52:16 -08:00
import GlobalNotification from '../components/GlobalNotification'
2022-01-27 08:57:36 -08:00
import { useOpenOrders } from '../hooks/useOpenOrders'
2022-01-27 19:57:18 -08:00
import usePerpPositions from '../hooks/usePerpPositions'
2022-03-24 07:39:24 -07:00
import { useEffect, useMemo } from 'react'
2022-03-23 03:42:21 -07:00
import { PublicKey } from '@solana/web3.js'
import { connectionSelector, mangoGroupSelector } from '../stores/selectors'
2022-02-14 09:17:11 -08:00
import {
ReferrerIdRecordLayout,
ReferrerIdRecord,
} from '@blockworks-foundation/mango-client'
import useTradeHistory from '../hooks/useTradeHistory'
2022-03-29 05:21:54 -07:00
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'
2022-03-22 04:27:13 -07:00
import { WalletProvider, WalletListener } from 'components/WalletAdapter'
2022-03-24 07:39:24 -07:00
import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom'
import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare'
import { SolletWalletAdapter } from '@solana/wallet-adapter-sollet'
import { SlopeWalletAdapter } from '@solana/wallet-adapter-slope'
import { BitpieWalletAdapter } from '@solana/wallet-adapter-bitpie'
import { HuobiWalletAdapter } from '@solana/wallet-adapter-huobi'
import { GlowWalletAdapter } from '@solana/wallet-adapter-glow'
2022-03-31 09:33:13 -07:00
const SENTRY_URL = process.env.NEXT_PUBLIC_SENTRY_URL
if (SENTRY_URL) {
Sentry.init({
dsn: SENTRY_URL,
integrations: [new BrowserTracing()],
})
}
2021-12-05 17:13:23 -08:00
const MangoStoreUpdater = () => {
useHydrateStore()
2022-01-27 19:57:18 -08:00
return null
}
const OpenOrdersStoreUpdater = () => {
2022-01-27 08:57:36 -08:00
useOpenOrders()
2022-01-27 19:57:18 -08:00
return null
}
2021-12-05 17:13:23 -08:00
2022-01-27 19:57:18 -08:00
const PerpPositionsStoreUpdater = () => {
usePerpPositions()
2021-12-05 17:13:23 -08:00
return null
}
const TradeHistoryStoreUpdater = () => {
useTradeHistory()
return null
}
2022-02-14 09:17:11 -08:00
const FetchReferrer = () => {
2022-02-14 09:15:46 -08:00
const setMangoStore = useMangoStore((s) => s.set)
2022-03-23 11:40:24 -07:00
const router = useRouter()
2022-02-14 09:15:46 -08:00
const mangoGroup = useMangoStore(mangoGroupSelector)
2022-02-14 09:17:11 -08:00
const connection = useMangoStore(connectionSelector)
2022-02-14 09:15:46 -08:00
const { query } = router
useEffect(() => {
const storeReferrer = async () => {
if (query.ref && mangoGroup) {
2022-02-14 09:17:11 -08:00
let referrerPk
2022-02-14 09:15:46 -08:00
if (query.ref.length === 44) {
2022-02-14 09:17:11 -08:00
referrerPk = new PublicKey(query.ref)
2022-02-14 09:15:46 -08:00
} else {
2022-03-29 06:02:29 -07:00
let decodedRefLink: string | null = null
try {
decodedRefLink = decodeURIComponent(query.ref as string)
} catch (e) {
console.log('Failed to decode referrer link', e)
}
const mangoClient = useMangoStore.getState().connection.client
2022-03-29 06:02:29 -07:00
if (!decodedRefLink) return
2022-02-14 09:15:46 -08:00
const { referrerPda } = await mangoClient.getReferrerPda(
mangoGroup,
decodedRefLink
2022-02-14 09:15:46 -08:00
)
2022-02-14 09:17:11 -08:00
const info = await connection.getAccountInfo(referrerPda)
if (info) {
const decoded = ReferrerIdRecordLayout.decode(info.data)
const referrerRecord = new ReferrerIdRecord(decoded)
referrerPk = referrerRecord.referrerMangoAccount
}
2022-02-14 09:15:46 -08:00
}
setMangoStore((state) => {
2022-02-14 09:17:11 -08:00
state.referrerPk = referrerPk
2022-02-14 09:15:46 -08:00
})
}
}
storeReferrer()
}, [query, mangoGroup])
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 =
2022-02-28 10:22:14 -08:00
marketConfig && router.pathname == '/'
? `${
oraclePrice
? oraclePrice.toFixed(getDecimalCount(market?.tickSize)) + ' | '
: ''
}${selectedMarketName} - `
: ''
return (
<Head>
<title>{marketTitleString}Mango Markets</title>
</Head>
)
}
function App({ Component, pageProps }) {
2022-03-24 07:39:24 -07:00
const wallets = useMemo(
() => [
new PhantomWalletAdapter(),
new SolflareWalletAdapter(),
new SolletWalletAdapter(),
new SlopeWalletAdapter(),
new BitpieWalletAdapter(),
new HuobiWalletAdapter(),
new GlowWalletAdapter(),
],
[]
)
2022-03-22 04:27:13 -07:00
return (
<>
<Head>
<title>Mango Markets</title>
2021-04-13 13:34:06 -07:00
<link rel="icon" href="/favicon.ico" />
2021-10-11 14:46:52 -07:00
<meta property="og:title" content="Mango Markets" />
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"
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."
2021-04-13 13:34:06 -07:00
/>
<link
rel="apple-touch-icon"
sizes="192x192"
href="/apple-touch-icon.png"
/>
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"
2022-02-15 08:33:30 -08:00
content="Mango Markets - Decentralised, cross-margin trading up to 20x leverage with lightning speed and near-zero fees."
/>
<meta
name="twitter:image"
2022-02-15 09:14:51 -08:00
content="https://www.mango.markets/socials/twitter-image-1200x600.png?34567878"
2021-04-13 13:34:06 -07:00
/>
<meta name="google" content="notranslate" />
2021-04-13 13:45:07 -07:00
<link rel="manifest" href="/manifest.json"></link>
</Head>
2021-12-28 14:22:50 -08:00
<ErrorBoundary>
2022-04-03 15:47:16 -07:00
<PageTitle />
<MangoStoreUpdater />
<OpenOrdersStoreUpdater />
<PerpPositionsStoreUpdater />
<TradeHistoryStoreUpdater />
<FetchReferrer />
2021-12-28 14:22:50 -08:00
<ThemeProvider defaultTheme="Mango">
2022-03-23 03:42:21 -07:00
<WalletProvider wallets={wallets}>
<WalletListener />
<ViewportProvider>
<div className="min-h-screen bg-th-bkg-1">
2022-04-03 15:47:16 -07:00
<GlobalNotification />
<Component {...pageProps} />
2022-03-23 03:42:21 -07:00
</div>
<div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
2022-04-03 15:47:16 -07:00
<BottomBar />
2022-03-23 03:42:21 -07:00
</div>
<Notifications />
</ViewportProvider>
</WalletProvider>
2021-12-28 14:22:50 -08:00
</ThemeProvider>
</ErrorBoundary>
</>
)
}
export default appWithTranslation(App)