Move all wallet functionality to separate dir

web/src/App.tsx

@@ -7,24 +7,18 @@ import Config from './config';
 import * as Game from './game';
 import GamePlaying from './GamePlaying';
 import { useSnackbar } from 'notistack';
-import Wallet from './Wallet';
+import Wallet from './wallet/Wallet';
 import Banner from './Banner';
 import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import GameTicker from './components/GameTicker';
-import localWallet from './localWallet';
-import keplr from './keplrWallet';
 
 const config = Config();
 
 export const App: React.FC = () => {
   const [client, setClient] = useState<SecretJS.SigningCosmWasmClient | undefined>();
   const [game, setGame] = useLocalStorage<Game.Game | null | undefined>('game', undefined);
   const { enqueueSnackbar } = useSnackbar();
-  useEffect(() => {
-    //localWallet(config.lcdUrl, setClient);
-    keplr(config.chainId, config.chainName, config.lcdUrl, config.rpcUrl, setClient);
-  }, []);
 
   return (
     <div>
@@ -33,7 +27,7 @@ export const App: React.FC = () => {
           <Banner />
         </Grid>
         <Grid item xs={12} sm={4}>
-          <Wallet client={client} faucetUrl={config.faucetUrl} />
+          <Wallet client={client} setClient={setClient} faucetUrl={config.faucetUrl} />
         </Grid>
       </Grid>
       {client && game && (

web/src/Wallet.tsx → web/src/wallet/Wallet.tsx

@@ -4,6 +4,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Button } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
+import Config from '../config';
+import localWallet from './localWallet';
+import keplr from './keplrWallet';
+
+const config = Config();
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -21,13 +26,18 @@ const useStyles = makeStyles((theme) => ({
 
 interface Props {
   client: SecretJS.SigningCosmWasmClient | undefined;
+  setClient: (client: SecretJS.SigningCosmWasmClient) => void;
   faucetUrl: string | undefined;
 }
 
 export default (props: Props) => {
   const classes = useStyles();
-  const { client, faucetUrl } = props;
+  const { client, setClient, faucetUrl } = props;
 
+  useEffect(() => {
+    //localWallet(config.lcdUrl, setClient);
+    keplr(config.chainId, config.chainName, config.lcdUrl, config.rpcUrl, setClient);
+  }, []);
   const [account, setAccount] = useState<SecretJS.Account | undefined>();
   useEffect(() => {
     if (!client) return;