import React, { useState, useEffect, ReactElement } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { useSnackbar } from 'notistack';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Select from '@material-ui/core/Select';
import Menu from '@material-ui/core/Menu';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import Button from '@material-ui/core/Button';
import PersonIcon from '@material-ui/icons/Person';
import BubbleChartIcon from '@material-ui/icons/BubbleChart';
import SearchIcon from '@material-ui/icons/Search';
import { PublicKey } from '@solana/web3.js';
import {
networks,
State as StoreState,
ActionType,
} from '../store/reducer';
import { useWallet } from './WalletProvider';
export default function Header() {
const { wallet } = useWallet();
const history = useHistory();
const [multisigAddress, setMultisigAddress] = useState('');
const disabled = !isValidPubkey(multisigAddress);
const searchFn = () => {
history.push(`/${multisigAddress}`);
};
return (
{!wallet.publicKey ? (
) : (
)}
);
}
function SerumLogoButton() {
const history = useHistory();
return (
);
}
type BarButtonProps = {
label: string;
hrefClient?: string;
href?: string;
};
function BarButton(props: BarButtonProps) {
const history = useHistory();
const { label, href, hrefClient } = props;
return (
hrefClient && history.push(hrefClient)}
>
);
}
function NetworkSelector() {
const network = useSelector((state: StoreState) => {
return state.common.network;
});
const dispatch = useDispatch();
const [anchorEl, setAnchorEl] = useState(null);
const handleClose = () => {
setAnchorEl(null);
};
return (
);
}
function UserSelector() {
const { wallet } = useWallet();
return (
);
}
type WalletConnectButtonProps = {
style?: any;
};
export function WalletConnectButton(
props: WalletConnectButtonProps,
): ReactElement {
const { showDisconnect } = useSelector((state: StoreState) => {
return {
showDisconnect: state.common.isWalletConnected,
};
});
const dispatch = useDispatch();
const { wallet, multisigClient } = useWallet();
const { enqueueSnackbar } = useSnackbar();
// Wallet connection event listeners.
useEffect(() => {
wallet.on('disconnect', () => {
enqueueSnackbar('Disconnected from wallet', {
variant: 'info',
autoHideDuration: 2500,
});
dispatch({
type: ActionType.CommonWalletDidDisconnect,
item: {},
});
dispatch({
type: ActionType.CommonTriggerShutdown,
item: {},
});
});
wallet.on('connect', async () => {
dispatch({
type: ActionType.CommonWalletDidConnect,
item: {},
});
});
}, [wallet, dispatch, enqueueSnackbar, multisigClient.provider.connection]);
return showDisconnect ? (
) : (
);
}
function isValidPubkey(addr: string): boolean {
try {
new PublicKey(addr);
return true;
} catch (_) {
return false;
}
}