diff --git a/web/src/wallet/Wallet.tsx b/web/src/wallet/Wallet.tsx index 7923182..88ace92 100644 --- a/web/src/wallet/Wallet.tsx +++ b/web/src/wallet/Wallet.tsx @@ -7,6 +7,7 @@ import CardContent from '@material-ui/core/CardContent'; 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 { useLocalStorage } from '../utils'; @@ -22,6 +23,9 @@ const useStyles = makeStyles((theme) => ({ address: { wordBreak: 'break-all', }, + progress: { + marginRight: '0.7rem', + }, })); interface Props { @@ -30,6 +34,11 @@ interface Props { faucetUrl: string | undefined; } +interface Account { + balance: number; + loading: boolean; +} + const Wallet = (props: Props) => { const classes = useStyles(); const { client, setClient, faucetUrl } = props; @@ -38,7 +47,7 @@ const Wallet = (props: Props) => { undefined, ); - const [account, setAccount] = useState(); + const [account, setAccount] = useState(); useEffect(() => { if (!client) return; getAccount(client, setAccount); @@ -47,6 +56,7 @@ const Wallet = (props: Props) => { }, 10000); return () => clearInterval(interval); }, [client]); + console.log('account', account); return (
@@ -71,13 +81,16 @@ const Wallet = (props: Props) => { > {client.senderAddress} - {faucetUrl && getScrtBalance(account) < 20 && ( + {faucetUrl && account && account.balance < 20 && ( )} - {getScrtBalance(account)} SCRT + {!account?.loading && ( + + )} + {account?.balance} SCRT ) : ( @@ -103,9 +116,10 @@ const Wallet = (props: Props) => { const getAccount = async (client: SecretJS.SigningCosmWasmClient, setAccount: Function) => { try { const account = await client.getAccount(client.senderAddress); - setAccount(account); - } catch (e) { - setAccount(undefined); + console.log('a', account); + setAccount({ balance: getScrtBalance(account), loading: true }); + } catch { + setAccount((a: Account) => ({ ...a, loading: false })); } };