Improve communicating balance required to play

lindlof · Dec 8, 2020 · 312a469 · 312a469
1 parent bfb73de
commit 312a469
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 40 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Button } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import * as SecretJS from 'secretjs';
 import { useLocalStorage } from './utils';
 import * as Msg from './msg';
@@ -8,6 +9,7 @@ import * as Game from './game';
 import GamePlaying from './GamePlaying';
 import { useSnackbar } from 'notistack';
 import Wallet from './wallet/Wallet';
+import useAccount from './wallet/useAccount';
 import Banner from './Banner';
 import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -22,6 +24,8 @@ export const App: React.FC = () => {
     undefined,
     Game.defaults,
   );
+  const account = useAccount(client, game);
+  const lowBalance = account && account.balance < 20;
   const { enqueueSnackbar } = useSnackbar();
   routeUrl(client, setGame, enqueueSnackbar);
 
@@ -34,10 +38,10 @@ export const App: React.FC = () => {
         <Grid item xs={12} sm={4}>
           <Grid container justify="flex-end">
             <Wallet
+              account={account}
               client={client}
               setClient={setClient}
               faucetUrl={config.faucetUrl}
-              refreshBalance={game}
             />
           </Grid>
         </Grid>
@@ -58,11 +62,25 @@ export const App: React.FC = () => {
       {game === null && <CircularProgress />}
       {game === undefined && client && (
         <Grid container direction="column" justify="center" alignItems="center" spacing={1}>
+          <Grid item xs={12}>
+            <Box bgcolor="secondary.main" color="primary.contrastText" p={1}>
+              {lowBalance && (
+                <div>
+                  <Typography>11 SCRT required to play</Typography>
+                  <Typography variant="subtitle2" align="center">
+                    (10 SCRT entry + fees)
+                  </Typography>
+                </div>
+              )}
+              {!lowBalance && <Typography>Play for 10 SCRT</Typography>}
+            </Box>
+          </Grid>
           <Grid item xs={12}>
             <Button
               variant="contained"
               color="primary"
               size="large"
+              disabled={lowBalance}
               onClick={() => playGame(client, config.contract, true, setGame, enqueueSnackbar)}
             >
               Play with Friend
@@ -72,6 +90,7 @@ export const App: React.FC = () => {
             <Button
               variant="contained"
               color="primary"
+              disabled={lowBalance}
               onClick={() => playGame(client, config.contract, false, setGame, enqueueSnackbar)}
             >
               Play with Anyone

diff --git a/web/src/wallet/Wallet.tsx b/web/src/wallet/Wallet.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import * as SecretJS from 'secretjs';
 import { makeStyles } from '@material-ui/core/styles';
 import { Button } from '@material-ui/core';
@@ -8,7 +8,7 @@ import CardActions from '@material-ui/core/CardActions';
 import Typography from '@material-ui/core/Typography';
 import SelectWalletModal from './SelectWalletModal';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { WalletType, walletTypeName } from './model';
+import { Account, WalletType, walletTypeName } from './model';
 import { useLocalStorage } from '../utils';
 
 const useStyles = makeStyles((theme) => ({
@@ -29,35 +29,20 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 interface Props {
+  account: Account | undefined;
   client: SecretJS.SigningCosmWasmClient | undefined;
   setClient: (client: SecretJS.SigningCosmWasmClient | undefined) => void;
   faucetUrl: string | undefined;
-  refreshBalance: Object;
-}
-
-interface Account {
-  balance: number;
-  loading: boolean;
 }
 
 const Wallet = (props: Props) => {
   const classes = useStyles();
-  const { client, setClient, faucetUrl, refreshBalance } = props;
+  const { account, client, setClient, faucetUrl } = props;
   const [walletType, setWalletType] = useLocalStorage<WalletType | undefined>(
     'wallet_type',
     undefined,
   );
 
-  const [account, setAccount] = useState<Account | undefined>();
-  useEffect(() => {
-    if (!client) return;
-    getAccount(client, setAccount);
-    const interval = setInterval(() => {
-      getAccount(client, setAccount);
-    }, 10000);
-    return () => clearInterval(interval);
-  }, [client, refreshBalance]);
-
   return (
     <div className={classes.root}>
       <SelectWalletModal
@@ -113,23 +98,4 @@ const Wallet = (props: Props) => {
   );
 };
 
-const getAccount = async (client: SecretJS.SigningCosmWasmClient, setAccount: Function) => {
-  try {
-    const account = await client.getAccount(client.senderAddress);
-    setAccount({ balance: getScrtBalance(account), loading: true });
-  } catch {
-    setAccount((a: Account) => ({ ...a, loading: false }));
-  }
-};
-
-const getScrtBalance = (account: SecretJS.Account | undefined): number => {
-  if (account === undefined) return 0;
-  for (let balance of account.balance) {
-    if (balance.denom === 'uscrt') {
-      return parseFloat(balance.amount) / 1000000;
-    }
-  }
-  return 0;
-};
-
 export default Wallet;
diff --git a/web/src/wallet/model.tsx b/web/src/wallet/model.tsx
@@ -1,3 +1,8 @@
+interface Account {
+  balance: number;
+  loading: boolean;
+}
+
 enum WalletType {
   Keplr = 'KEPLR',
   LocalWallet = 'LOCAL_WALLET',
@@ -8,4 +13,5 @@ const walletTypeName = new Map([
   [WalletType.LocalWallet, 'Local'],
 ]);
 
+export type { Account };
 export { WalletType, walletTypeName };
diff --git a/web/src/wallet/useAccount.ts b/web/src/wallet/useAccount.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import * as SecretJS from 'secretjs';
+import { Account } from './model';
+
+const useAccount = (
+  client: SecretJS.SigningCosmWasmClient | undefined,
+  refreshOn: any,
+): Account | undefined => {
+  const [account, setAccount] = useState<Account | undefined>();
+  useEffect(() => {
+    if (!client) return;
+    getAccount(client, setAccount);
+    const interval = setInterval(() => {
+      getAccount(client, setAccount);
+    }, 10000);
+    return () => clearInterval(interval);
+  }, [client, refreshOn]);
+  return account;
+};
+
+const getAccount = async (client: SecretJS.SigningCosmWasmClient, setAccount: Function) => {
+  try {
+    const account = await client.getAccount(client.senderAddress);
+    setAccount({ balance: getScrtBalance(account), loading: true });
+  } catch {
+    setAccount((a: Account) => ({ ...a, loading: false }));
+  }
+};
+
+const getScrtBalance = (account: SecretJS.Account | undefined): number => {
+  if (account === undefined) return 0;
+  for (let balance of account.balance) {
+    if (balance.denom === 'uscrt') {
+      return parseFloat(balance.amount) / 1000000;
+    }
+  }
+  return 0;
+};
+
+export default useAccount;