added balances to pickers

Change-Id: Ic23ca3f1a6547f6405f66d4a7794ae35531c989c

bridge_ui/src/components/Attest/index.tsx

@@ -1,5 +1,6 @@
 import {
   Container,
+  makeStyles,
   Step,
   StepButton,
   StepContent,
@@ -19,7 +20,14 @@ import { Alert } from "@material-ui/lab";
 
 // TODO: ensure that both wallets are connected to the same known network
 
+const useStyles = makeStyles(() => ({
+  rootContainer: {
+    backgroundColor: "rgba(0,0,0,0.2)",
+  },
+}));
+
 function Attest() {
+  const classes = useStyles();
   const dispatch = useDispatch();
   const activeStep = useSelector(selectAttestActiveStep);
   const signedVAAHex = useSelector(selectAttestSignedVAAHex);
@@ -29,7 +37,11 @@ function Attest() {
         This form allows you to register a token on a new foreign chain. Tokens
         must be registered before they can be transferred.
       </Alert>
-      <Stepper activeStep={activeStep} orientation="vertical">
+      <Stepper
+        activeStep={activeStep}
+        orientation="vertical"
+        className={classes.rootContainer}
+      >
         <Step>
           <StepButton onClick={() => dispatch(setStep(0))}>
             Select a source

bridge_ui/src/components/TokenSelectors/EthereumSourceTokenSelector.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(() =>
       },
     },
     tokenImage: {
-      maxHeight: "2.5rem", //Eyeballing this based off the text size
+      maxHeight: "2.5rem",
     },
   })
 );
@@ -61,6 +61,10 @@ const renderAccount = (
       <div>
         <Typography variant="body1">{mintPrettyString}</Typography>
       </div>
+      <div>
+        <Typography variant="body2">{"Balance"}</Typography>
+        <Typography variant="h6">{account.uiAmountString}</Typography>
+      </div>
     </div>
   );
 };

bridge_ui/src/components/TokenSelectors/SolanaSourceTokenSelector.tsx

@@ -63,6 +63,10 @@ const renderAccount = (
           {"Account :" + accountAddressPrettyString}
         </Typography>
       </div>
+      <div>
+        <Typography variant="body2">{"Balance"}</Typography>
+        <Typography variant="h6">{account.uiAmountString}</Typography>
+      </div>
     </div>
   );
 };

bridge_ui/src/components/Transfer/index.tsx

@@ -1,5 +1,6 @@
 import {
   Container,
+  makeStyles,
   Step,
   StepButton,
   StepContent,
@@ -28,7 +29,14 @@ import Target from "./Target";
 // TODO: refresh displayed token amount after transfer somehow, could be resolved by having different components appear
 // TODO: warn if amount exceeds balance
 
+const useStyles = makeStyles(() => ({
+  rootContainer: {
+    backgroundColor: "rgba(0,0,0,0.2)",
+  },
+}));
+
 function Transfer() {
+  const classes = useStyles();
   useCheckIfWormholeWrapped();
   useFetchTargetAsset();
   useGetBalanceEffect("target");
@@ -49,7 +57,11 @@ function Transfer() {
   }, [preventNavigation]);
   return (
     <Container maxWidth="md">
-      <Stepper activeStep={activeStep} orientation="vertical">
+      <Stepper
+        activeStep={activeStep}
+        orientation="vertical"
+        className={classes.rootContainer}
+      >
         <Step>
           <StepButton onClick={() => dispatch(setStep(0))}>Source</StepButton>
           <StepContent>

bridge_ui/src/muiTheme.js

@@ -6,7 +6,7 @@ export const theme = responsiveFontSizes(
       type: "dark",
       background: {
         default: "#010114",
-        paper: "rgba(0, 0, 0, 0.2)",
+        paper: "#010114",
       },
       divider: "#4e4e54",
       primary: {