diff --git a/src/App.js b/src/App.js index 091c47e..4d35627 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ -import React, { Suspense } from 'react'; +import React, { Suspense, useState } from 'react'; +import { makeStyles } from '@material-ui/core'; import CssBaseline from '@material-ui/core/CssBaseline'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { @@ -6,6 +7,12 @@ import { unstable_createMuiStrictModeTheme as createMuiTheme, } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogActions from '@material-ui/core/DialogActions'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import DialogForm from './components/DialogForm'; import NavigationFrame from './components/NavigationFrame'; import { ConnectionProvider } from './utils/connection'; import WalletPage from './pages/WalletPage'; @@ -77,8 +84,17 @@ export default function App() { function PageContents() { const wallet = useWallet(); const [page] = usePage(); + const [showWalletSuggestion, setShowWalletSuggestion] = useState(true); if (!wallet) { - return ; + return ( + <> + setShowWalletSuggestion(false)} + /> + + > + ); } if (window.opener) { return ; @@ -89,3 +105,102 @@ function PageContents() { return ; } } + +const useStyles = makeStyles(() => ({ + walletButton: { + padding: '16px', + '&:hover': { + cursor: 'pointer', + background: '#f7f7f7', + }, + }, +})); + +function WalletSuggestionDialog({ open, onClose }) { + const classes = useStyles(); + return ( + + Looking for a Wallet? + + + Sollet is an{' '} + + {' '} + open source + {' '} + wallet for advanced users and developers. For the best Solana + experience and user support, it is recommended to use + Phantom + {' '} + or Solflare. + + { + window.location = 'https://phantom.app/'; + }} + > + + + + + + Phantom + + + + { + window.location = 'https://solflare.com/'; + }} + className={classes.walletButton} + style={{ display: 'flex' }} + > + + + + + + Solflare + + + + + + + + Ok + + + + ); +}