diff --git a/package.json b/package.json index ee9353f..19026d3 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "@project-serum/tokens": "0.0.7", "@solana/spl-token": "^0.1.6", "@solana/spl-token-registry": "^0.2.41", + "@solana/wallet-adapter-base": "^0.4.1", + "@solana/wallet-adapter-material-ui": "^0.7.1", + "@solana/wallet-adapter-react": "^0.7.1", + "@solana/wallet-adapter-wallets": "^0.6.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -69,6 +73,7 @@ }, "devDependencies": { "eslint-config-react-app": "^6.0.0", - "gh-pages": "^3.1.0" + "gh-pages": "^3.1.0", + "prettier": "^2.3.2" } } diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index d3b595d..1e2a249 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -1,30 +1,35 @@ -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 RefreshIcon from '@material-ui/icons/Refresh'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { refreshAccounts } from './BootstrapProvider'; -import { networks } from '../../store/config'; +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 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 RefreshIcon from "@material-ui/icons/Refresh"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import { + WalletDialogProvider, + WalletDisconnectButton, + WalletMultiButton, +} from "@solana/wallet-adapter-material-ui"; +import { Popper, MenuList, MenuItem, Grow } from "@material-ui/core"; +import { refreshAccounts } from "./BootstrapProvider"; +import { networks } from "../../store/config"; import { State as StoreState, ProgramAccount, BootstrapState, -} from '../../store/reducer'; -import { ActionType } from '../../store/actions'; -import { useWallet } from './WalletProvider'; +} from "../../store/reducer"; +import { ActionType } from "../../store/actions"; +import { useWallet } from "./WalletProvider"; type HeaderProps = { isAppReady: boolean; @@ -49,25 +54,28 @@ export default function Header(props: HeaderProps) {
-
+
- + {network.srmFaucet && (
{ setIsRefreshing(true); enqueueSnackbar(`Refreshing`, { - variant: 'info', + variant: "info", }); refreshAccounts({ dispatch, @@ -98,30 +106,30 @@ export default function Header(props: HeaderProps) { setIsRefreshing(false); closeSnackbar(); }) - .catch(err => { + .catch((err) => { setIsRefreshing(false); closeSnackbar(); enqueueSnackbar(`There was a problem refreshing: ${err}`, { - variant: 'error', + variant: "error", autoHideDuration: 2500, }); }); }} style={{ - display: isAppReady ? 'block' : 'none', - justifyContent: 'center', - flexDirection: 'column', - marginRight: '10px', + display: isAppReady ? "block" : "none", + justifyContent: "center", + flexDirection: "column", + marginRight: "10px", }} > {isRefreshing ? (
- +
) : (
@@ -132,12 +140,7 @@ export default function Header(props: HeaderProps) { )}
- - {isAppReady && } +
@@ -148,19 +151,19 @@ export default function Header(props: HeaderProps) { function SerumLogoButton() { const history = useHistory(); return ( -
history.push('/')}> +
history.push("/")}> @@ -224,24 +227,24 @@ function NetworkSelector() { return (
@@ -250,8 +253,8 @@ function NetworkSelector() { open={Boolean(anchorEl)} onClose={handleClose} style={{ - marginLeft: '12px', - color: 'white', + marginLeft: "12px", + color: "white", }} > {Object.keys(networks).map((n: string) => ( @@ -276,46 +279,7 @@ function NetworkSelector() { ); } -function UserSelector() { - const { wallet } = useWallet(); - - return ( - - ); -} - -type WalletConnectButtonProps = { - style?: any; -}; - -export function WalletConnectButton( - props: WalletConnectButtonProps, -): ReactElement { +export function WalletConnectButton(): ReactElement { const { showDisconnect } = useSelector((state: StoreState) => { return { showDisconnect: state.common.isWalletConnected, @@ -327,9 +291,9 @@ export function WalletConnectButton( // Wallet connection event listeners. useEffect(() => { - wallet.on('disconnect', () => { - enqueueSnackbar('Disconnected from wallet', { - variant: 'info', + wallet.on("disconnect", () => { + enqueueSnackbar("Disconnected from wallet", { + variant: "info", autoHideDuration: 2500, }); dispatch({ @@ -341,7 +305,7 @@ export function WalletConnectButton( item: {}, }); }); - wallet.on('connect', async () => { + wallet.on("connect", async () => { dispatch({ type: ActionType.CommonWalletDidConnect, item: {}, @@ -353,27 +317,28 @@ export function WalletConnectButton( }); }, [wallet, dispatch, enqueueSnackbar, lockupClient.provider.connection]); - return showDisconnect ? ( - - ) : ( - + return ( + +
wallet.disconnect()} + > + +
+
wallet.connect()} + style={{ + display: "flex", + justifyContent: "center", + flexDirection: "column", + }} + > + +
+ ); } diff --git a/src/components/common/OwnedTokenAccountsSelect.tsx b/src/components/common/OwnedTokenAccountsSelect.tsx index 7afc22d..6bc0e0d 100644 --- a/src/components/common/OwnedTokenAccountsSelect.tsx +++ b/src/components/common/OwnedTokenAccountsSelect.tsx @@ -1,17 +1,17 @@ -import React, { useState } from 'react'; -import { useSelector } from 'react-redux'; -import BN from 'bn.js'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import { PublicKey } from '@solana/web3.js'; -import { State as StoreState } from '../../store/reducer'; -import { toDisplay } from '../../utils/tokens'; +import React, { useState } from "react"; +import { useSelector } from "react-redux"; +import BN from "bn.js"; +import Select from "@material-ui/core/Select"; +import MenuItem from "@material-ui/core/MenuItem"; +import { PublicKey } from "@solana/web3.js"; +import { State as StoreState } from "../../store/reducer"; +import { toDisplay } from "../../utils/tokens"; type Props = { style?: any; mint?: PublicKey | null; decimals?: number; - variant?: 'outlined' | 'standard'; + variant?: "outlined" | "standard"; onChange: (from: PublicKey, maxAmount: BN) => void; }; @@ -21,13 +21,12 @@ export default function OwnedTokenAccountsSelect(p: Props) { if (!mint) { return []; } - console.log('state', state.common); return state.common.ownedTokenAccounts.filter( - ota => ota.account.mint.toString() === mint.toString(), + (ota) => ota.account.mint.toString() === mint.toString() ); }); - const [fromAccount, setFromAccount] = useState(''); + const [fromAccount, setFromAccount] = useState(""); return (