2022-02-28 23:43:36 +00:00
|
|
|
import { ApolloProvider } from '@apollo/client';
|
2022-02-11 13:56:28 +00:00
|
|
|
import { AppProps } from 'next/app';
|
|
|
|
|
import Head from 'next/head';
|
2022-03-09 13:05:42 +00:00
|
|
|
import { useCallback, useMemo } from 'react';
|
2022-02-17 05:08:17 +00:00
|
|
|
import { Navbar } from '../components/navbar';
|
2022-02-28 23:43:36 +00:00
|
|
|
import { createClient } from '../lib/apollo-client';
|
2022-03-09 13:05:42 +00:00
|
|
|
import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
|
2022-02-22 06:40:55 +00:00
|
|
|
import { useVegaWallet } from '@vegaprotocol/react-helpers';
|
2022-02-23 17:57:44 +00:00
|
|
|
import './styles.css';
|
2022-02-11 13:56:28 +00:00
|
|
|
|
2022-02-17 05:03:46 +00:00
|
|
|
function VegaTradingApp({ Component, pageProps }: AppProps) {
|
2022-02-28 23:43:36 +00:00
|
|
|
const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
|
2022-03-09 13:05:42 +00:00
|
|
|
useCallback(() => {
|
|
|
|
|
if (
|
|
|
|
|
localStorage.theme === 'dark' ||
|
|
|
|
|
(!('theme' in localStorage) &&
|
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
|
|
|
) {
|
|
|
|
|
document.documentElement.classList.add('dark');
|
|
|
|
|
} else {
|
|
|
|
|
document.documentElement.classList.remove('dark');
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
const setTheme = () => {
|
|
|
|
|
localStorage.theme = document.documentElement.classList.toggle('dark')
|
|
|
|
|
? 'dark'
|
|
|
|
|
: undefined;
|
|
|
|
|
};
|
2022-02-11 13:56:28 +00:00
|
|
|
return (
|
2022-02-28 23:43:36 +00:00
|
|
|
<ApolloProvider client={client}>
|
2022-02-11 13:56:28 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>Welcome to trading!</title>
|
2022-03-09 13:05:42 +00:00
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
href="https://vega.xyz/favicon-32x32.png"
|
|
|
|
|
type="image/png"
|
|
|
|
|
/>
|
2022-02-11 13:56:28 +00:00
|
|
|
</Head>
|
2022-03-09 13:05:42 +00:00
|
|
|
<div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60">
|
|
|
|
|
<div className="flex items-center border-b-[7px] border-vega-yellow">
|
|
|
|
|
<Navbar />
|
2022-02-22 06:40:55 +00:00
|
|
|
<VegaWalletButton />
|
2022-03-09 13:05:42 +00:00
|
|
|
<ThemeSwitcher onToggle={setTheme} className="ml-auto mr-8 -my-2" />
|
|
|
|
|
</div>
|
2022-03-01 00:59:18 +00:00
|
|
|
<main>
|
|
|
|
|
<Component {...pageProps} />
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
2022-02-28 23:43:36 +00:00
|
|
|
</ApolloProvider>
|
2022-02-11 13:56:28 +00:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-22 23:06:35 +00:00
|
|
|
interface VegaWalletButtonProps {
|
|
|
|
|
setConnectDialog: (isOpen: boolean) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => {
|
|
|
|
|
const { disconnect, publicKeys } = useVegaWallet();
|
2022-02-22 06:40:55 +00:00
|
|
|
const isConnected = publicKeys !== null;
|
|
|
|
|
|
|
|
|
|
const handleClick = () => {
|
|
|
|
|
if (isConnected) {
|
|
|
|
|
disconnect();
|
|
|
|
|
} else {
|
2022-02-22 23:06:35 +00:00
|
|
|
setConnectDialog(true);
|
2022-02-22 06:40:55 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<button onClick={handleClick}>
|
|
|
|
|
{isConnected ? 'Disconnect' : 'Connect Vega wallet'}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2022-02-17 05:03:46 +00:00
|
|
|
export default VegaTradingApp;
|
