add deposit information

This commit is contained in:
Barry Gitarts 2021-03-03 14:29:00 -05:00
parent 7db95a922f
commit 432ae0667e
5 changed files with 233 additions and 8 deletions

View File

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

View File

@ -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

View File

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

View File

@ -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;

View File

@ -1,11 +1,22 @@
import { Bridge as IBridge } from "../types/Bridge"; import { Bridge as IBridge } from "../types/Bridge";
import { ERC20Handler } from "../types/ERC20Handler"; import { ERC20Handler } from "../types/ERC20Handler";
import { getERC20Handler } from "./contracts"; import { getERC20Handler } from "./contracts";
import { Event } from "ethers"; import { Event, BigNumber } from "ethers";
export interface EnrichedEvent extends Event { type DecodedDeposit = {
decoded?: Array<any>, depositNonce: BigNumber,
depositRecord?: object 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) => { 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 const { data, topics, decode } = d
if (!decode) return if (!decode) return
const decoded = decode(data, topics) const decoded = decode(data, topics)
const newD: EnrichedEvent = d const newD: EnrichedDepositEvent = d
newD.decoded = decoded newD.decoded = decoded
const handlerAddress = await ethereumBridge._resourceIDToHandlerAddress(decoded.resourceID) const handlerAddress = await ethereumBridge._resourceIDToHandlerAddress(decoded.resourceID)
const erc20Handler: ERC20Handler = getERC20Handler(handlerAddress, ethereumBridge.provider); const erc20Handler: ERC20Handler = getERC20Handler(handlerAddress, ethereumBridge.provider);