show token symbol

apps/simple-wallet/client/src/components/ReceiveDialog.tsx

@@ -54,7 +54,7 @@ const ReceiveDialog = (props: Props) => {
           onClose={props.handleClose}
           aria-labelledby="alert-dialog-slide-title"
           aria-describedby="alert-dialog-slide-description">
-    <DialogTitle id="alert-dialog-slide-title">Top up your wallet</DialogTitle>
+    <DialogTitle id="alert-dialog-slide-title">Send only {props.tokenSymbol} tokens</DialogTitle>
     <DialogContent className={classes.container}>
       <div>
         <img alt={props.address} className={classes.qrcode} ref={image} />

apps/simple-wallet/client/src/components/TopPanel.tsx

@@ -48,15 +48,11 @@ const TopPanel = (props: Props) => {
   const classes = useStyles();
 
   const [balance, roundedBalance] = roundEther(props.balance);
-  const [availableBalance, roundedAvailableBalance] = roundEther(props.availableBalance);
 
   return <div className={classes.container}>
     <div>
       <Typography variant="h2" color="inherit">
-        {roundedAvailableBalance} Ξ
+        {roundedBalance} {props.tokenSymbol}
-      </Typography>
-      <Typography variant="body1" color="inherit" style={{textAlign: "center"}}>
-        {availableBalance}
       </Typography>
       <div className={classes.actions}>
         <Button

apps/simple-wallet/client/src/containers/TopPanel.ts

@@ -6,6 +6,7 @@ import TopPanel from '../components/TopPanel';
 import { showWalletQRCode } from '../actions/wallet';
 
 export interface StateProps {
+  tokenSymbol: string | undefined
   balance: string | undefined
   availableBalance: string | undefined
 }
@@ -19,6 +20,7 @@ export type Props = StateProps & DispatchProps;
 const mapStateToProps = (state: RootState): StateProps => {
   return {
     balance: state.wallet.balance,
+    tokenSymbol: state.wallet.erc20Symbol,
     availableBalance: state.wallet.availableBalance,
   }
 }