make manager component not take children
This commit is contained in:
parent
e92e708cf1
commit
ac4f833360
@ -1,15 +1,30 @@
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
import { AppProps } from 'next/app';
|
||||
import Head from 'next/head';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { Navbar } from '../components/navbar';
|
||||
import {
|
||||
useVegaWallet,
|
||||
VegaConnectDialog,
|
||||
VegaWalletProvider,
|
||||
} from '@vegaprotocol/react-helpers';
|
||||
import { Connectors } from '../lib/connectors';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { LocalStorage } from '@vegaprotocol/storage';
|
||||
import { createClient } from '../lib/apollo-client';
|
||||
import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
|
||||
import { useVegaWallet } from '@vegaprotocol/react-helpers';
|
||||
import './styles.css';
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
|
||||
function VegaTradingApp({ Component, pageProps }: AppProps) {
|
||||
const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const setConnectDialog = useCallback((isOpen?: boolean) => {
|
||||
setDialogOpen((curr) => {
|
||||
if (isOpen === undefined) return !curr;
|
||||
return isOpen;
|
||||
});
|
||||
}, []);
|
||||
|
||||
useCallback(() => {
|
||||
if (
|
||||
localStorage.theme === 'dark' ||
|
||||
@ -28,24 +43,32 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
|
||||
};
|
||||
return (
|
||||
<ApolloProvider client={client}>
|
||||
<Head>
|
||||
<title>Welcome to trading!</title>
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://vega.xyz/favicon-32x32.png"
|
||||
type="image/png"
|
||||
/>
|
||||
</Head>
|
||||
<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 />
|
||||
<VegaWalletButton />
|
||||
<ThemeSwitcher onToggle={setTheme} className="ml-auto mr-8 -my-2" />
|
||||
<VegaWalletProvider>
|
||||
<Head>
|
||||
<title>Welcome to trading!</title>
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://vega.xyz/favicon-32x32.png"
|
||||
type="image/png"
|
||||
/>
|
||||
</Head>
|
||||
<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 />
|
||||
<VegaWalletButton setConnectDialog={setConnectDialog} />
|
||||
<ThemeSwitcher onToggle={setTheme} className="ml-auto mr-8 -my-2" />
|
||||
</div>
|
||||
<main>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
<VegaConnectDialog
|
||||
connectors={Connectors}
|
||||
dialogOpen={dialogOpen}
|
||||
setDialogOpen={setDialogOpen}
|
||||
/>
|
||||
</div>
|
||||
<main>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
</div>
|
||||
<VegaWalletManager />
|
||||
</VegaWalletProvider>
|
||||
</ApolloProvider>
|
||||
);
|
||||
}
|
||||
@ -55,8 +78,8 @@ interface VegaWalletButtonProps {
|
||||
}
|
||||
|
||||
const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => {
|
||||
const { disconnect, publicKeys } = useVegaWallet();
|
||||
const isConnected = publicKeys !== null;
|
||||
const { disconnect, keypairs } = useVegaWallet();
|
||||
const isConnected = keypairs !== null;
|
||||
|
||||
const handleClick = () => {
|
||||
if (isConnected) {
|
||||
@ -67,10 +90,45 @@ const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleClick}>
|
||||
<button onClick={handleClick} className="inline-block p-8">
|
||||
{isConnected ? 'Disconnect' : 'Connect Vega wallet'}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default VegaTradingApp;
|
||||
|
||||
/**
|
||||
* Wrapper to interact with the vega wallet out side of the provider itself.
|
||||
*/
|
||||
function VegaWalletManager() {
|
||||
// Get keys from vega wallet immediately
|
||||
useEagerConnect();
|
||||
|
||||
// Do other global stuff with vega wallet here
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function useEagerConnect() {
|
||||
const { connect } = useVegaWallet();
|
||||
|
||||
useEffect(() => {
|
||||
const cfg = LocalStorage.getItem('vega_wallet');
|
||||
const cfgObj = JSON.parse(cfg);
|
||||
|
||||
// No stored config, user has never connected or manually cleared storage
|
||||
if (!cfgObj || !cfgObj.connector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const connector = Connectors[cfgObj.connector];
|
||||
|
||||
// Developer hasn't provided this connector
|
||||
if (!connector) {
|
||||
throw new Error(`Connector ${cfgObj?.connector} not configured`);
|
||||
}
|
||||
|
||||
connect(Connectors[cfgObj.connector]);
|
||||
}, [connect]);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user