add deposit information

frontend/src/components/AdminBridge.tsx

@@ -15,7 +15,8 @@ import { ERC20 } from "../types/ERC20";
 import { fromWei } from "../utils/helpers"
 import { getSetBalance } from "../utils/contracts";
 import { ethereumSNTHandlerAddress } from "../constants/bridges";
-import { getDepositEvents, EnrichedEvent } from "../utils/events";
+import { getDepositEvents, EnrichedDepositEvent } from "../utils/events";
+import Deposit from "./Deposit";
 
 type IBridgeInfo = {
   amount: string,
@@ -38,11 +39,10 @@ export const AdminBridge: React.FC<Props> = ({ account, provider, sntEthereum, s
   const [fujiBridge, setFujiBridge] = useState<IBridge>();
   const [sntEthereumBalance, setSntEthereumBalance] = useState<BigNumberish>();
   const [sntAvalancheBalance, setSntAvalancheBalance] = useState<BigNumberish>();
-  const [deposits, setDeposits] = useState<EnrichedEvent[]>();
+  const [deposits, setDeposits] = useState<EnrichedDepositEvent[]>();
   const { fieldWidth } = classes;
   useEffect(() => {
     getDepositEvents(ethereumBridge, setDeposits)
-
   }, [bridge])
 
   useEffect(() => {
@@ -118,6 +118,9 @@ export const AdminBridge: React.FC<Props> = ({ account, provider, sntEthereum, s
               onBlur={handleBlur}
               value={values.account}
             />
+          {deposits?.map((d: EnrichedDepositEvent) => <Deposit
+                                                        key={d.data}
+                                                        deposit={d} />)}
             <StatusButton
               className={fieldWidth}
               buttonText="Submit"

frontend/src/components/Deposit.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react';
+import { EnrichedDepositEvent } from "../utils/events"
+import Typography from '@material-ui/core/Typography';
+import useStyles from '../styles/deposit';
+import { chainIDToName } from '../constants/networks';
+
+interface Props {
+  deposit: EnrichedDepositEvent
+}
+
+const Deposit: React.FC<Props> = ({ deposit }) => {
+  const classes: any = useStyles();
+  const { cellText } = classes;
+  const { decoded, depositRecord } = deposit;
+  return (
+    <Fragment>
+      <Typography className={cellText}>Deposit Nonce: {decoded?.depositNonce.toNumber()}</Typography>
+      {!!decoded && <Typography className={cellText}>Destination Chain: {chainIDToName[decoded?.destinationChainID]}</Typography>}
+      <Typography className={cellText}>Depositer: {depositRecord?._depositer.toString()}</Typography>
+      <Typography className={cellText}>Receiver: {depositRecord?._destinationRecipientAddress.toString()}</Typography>
+    </Fragment>
+  )
+}
+
+export default Deposit

frontend/src/constants/networks.ts

@@ -1,2 +1,6 @@
 export const ETHEREUM_CHAIN_ID: number = 1;
 export const AVA_CHAIN_ID: number = 2;
+export const chainIDToName: Record<string,string> = {
+  [ETHEREUM_CHAIN_ID]: 'Ethereum',
+  [AVA_CHAIN_ID]: 'Avalanche'
+}

frontend/src/styles/deposit.js

@@ -0,0 +1,182 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  addIcon: {
+    color: theme.palette.primary[500],
+    fontSize: '2.5em'
+  },
+  blue: {
+    color: '#4360DF'
+  },
+  green: {
+    color: theme.palette.primary[500]
+  },
+  px15: {
+    fontSize: '0.9375rem'
+  },
+  px16: {
+    fontSize: '1rem'
+  },
+  main: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(48, [col] 1fr)',
+    gridTemplateRows: '12rem 5rem auto auto',
+    [theme.breakpoints.up('md')]: {
+      gridTemplateRows: '4rem 4rem auto auto 6rem'
+    }
+  },
+  title: {
+    fontSize: '2rem',
+    textAlign: 'center',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '2.5rem'
+    }
+  },
+  subTitle: {
+    color: '#4360DF',
+    fontSize: '1rem',
+    textAlign: 'center',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1.5rem'
+    }
+  },
+  cardText: {
+    gridColumn: '1 / 49',
+    lineHeight: '2rem',
+    padding: '0.25rem 1rem',
+    color: '#000000'
+  },
+  cardTitle: {
+    fontWeight: 500,
+    paddingTop: '1rem'
+  },
+  cardSubTitle: {
+    lineHeight: '1.5rem'
+  },
+  cardLightText: {
+    color: '#545353'
+  },
+  cardAmount: {
+    gridColumn: '1 / 36'
+  },
+  cardMore: {
+    gridColumn: '36 / 49',
+  },
+  cellText: {
+    display: 'flex',
+    justifyContent: 'center',
+    fontSize: '1rem',
+    flexFlow: 'column',
+    padding: '1rem 1rem 1rem 0',
+    color: '#000000'
+  },
+  centerText: {
+    textAlign: 'center'
+  },
+  cardLink: {
+    textDecoration: 'none'
+  },
+  leftAlign: {
+    textAlign: 'left'
+  },
+  cellDescription: {
+    fontSize: '1rem',
+    textDecoration: 'none'
+  },
+  cellColor: {
+    background: '#F5F7F8'
+  },
+  divider: {
+    gridColumn: '2 / 48'
+  },
+  fullWidth: {
+    gridColumn: '1 / 49'
+  },
+  fab: {
+    gridColumn: '3 / 5',
+    background: '#1AA56E1A',
+    boxShadow: 'none',
+    marginRight: '1em'
+  },
+  fabText: {
+    color: theme.palette.primary[500],
+    fontWeight: 500,
+    fontSize: '1.2rem'
+  },
+  fabLink: {
+    display: 'flex',
+    alignItems: 'center',
+    textDecoration: 'none',
+    marginTop: '2rem',
+    gridColumn: '3 / 18',
+    color: '#000000'
+  },
+  fabSmall: {
+    gridColumn: '3 / 48'
+  },
+  paddingNone: {
+    padding: 0
+  },
+  tableTitle: {
+    color: '#939BA1',
+    fontSize: '1.2rem',
+    gridColumn: '2 / 49'
+  },
+  tableTitleSmall: {
+    color: '#000000',
+    fontSize: '1.2rem',
+    gridColumn: '1 / 49',
+    textAlign: 'center'
+  },
+  tableHeader: {
+    color: 'rgba(147, 155, 161, 0.8)',
+    fontSize: '0.9rem',
+    gridRow: '6 / 7'
+  },
+  headerName: {
+    gridColumn: '3 / 12'
+  },
+  nameSpacer: {
+    gridColumn: '2 / 3'
+  },
+  cellName: {
+    gridColumn: '2 / 12'
+  },
+  headerDescription: {
+    gridColumn: '12 / 30'
+  },
+  headerDetails: {
+    gridColumn: '30 / 35'
+  },
+  headerContact: {
+    gridColumn: '35 / 40'
+  },
+  dateCreated: {
+    gridColumn: '40 / 44'
+  },
+  previousButton: {
+    gridColumn: '1 / 20',
+    [theme.breakpoints.up('md')]: {
+      gridColumn: '3 / 9'
+    }
+  },
+  nextButton: {
+    gridColumn: '35 / 48',
+    [theme.breakpoints.up('md')]: {
+      gridColumn: '42 / 48'
+    }
+  },
+  readMore: {
+    gridColumn: '44 / 48',
+    fontSize: '0.94rem',
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline',
+      color: theme.palette.primary[500]
+    }
+  },
+  usdValue: {
+    color: '#939BA1'
+  }
+}));
+export default useStyles;

frontend/src/utils/events.ts

@@ -1,11 +1,22 @@
 import { Bridge as IBridge } from "../types/Bridge";
 import { ERC20Handler } from "../types/ERC20Handler";
 import { getERC20Handler } from "./contracts";
-import { Event } from "ethers";
+import { Event, BigNumber } from "ethers";
 
-export interface EnrichedEvent extends Event {
-  decoded?: Array<any>,
-  depositRecord?: object
+type DecodedDeposit = {
+  depositNonce: BigNumber,
+  destinationChainID: number,
+  resourceID: string
+}
+type DepositRecord = {
+  _amount: BigNumber,
+  _depositer: string,
+  _destinationRecipientAddress: string,
+  _tokenAddress: string
+}
+export interface EnrichedDepositEvent extends Event {
+  decoded?: DecodedDeposit,
+  depositRecord?: DepositRecord
 }
 
 export const getDepositEvents = async (ethereumBridge: IBridge|undefined, setState: Function) => {
@@ -16,7 +27,7 @@ export const getDepositEvents = async (ethereumBridge: IBridge|undefined, setSta
     const { data, topics, decode } = d
     if (!decode) return
     const decoded = decode(data, topics)
-    const newD: EnrichedEvent = d
+    const newD: EnrichedDepositEvent = d
     newD.decoded = decoded
     const handlerAddress = await ethereumBridge._resourceIDToHandlerAddress(decoded.resourceID)
     const erc20Handler: ERC20Handler = getERC20Handler(handlerAddress, ethereumBridge.provider);