Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(authz): add exec UI and integrate with keplr #11

Merged
merged 2 commits into from
May 29, 2022
Merged

feat(authz): add exec UI and integrate with keplr #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b8d908
feat: integrate authz send
aleem1314 May 29, 2022
fb4c69b
feat: add dark mode
aleem1314 May 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<title>Vitwit staking</title>
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ActiveValidators.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Button from '@mui/material/Button';
import { StyledTableCell, StyledTableRow } from './../pages/table';
import { StyledTableCell, StyledTableRow } from './CustomTable';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
Expand Down
47 changes: 24 additions & 23 deletions src/components/BalanceInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,48 @@
import { Grid, Paper, Typography, Button, CssBaseline } from '@mui/material';
import React from 'react';
import Grid from '@mui/material/Grid';
import CssBaseline from '@mui/material/CssBaseline';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import PropTypes from 'prop-types';
import { useNavigate } from "react-router-dom";

export default function BalanceInfo(props) {
let navigate = useNavigate();
function navigateTo(path) {
navigate(path);
navigate(path);
}

return (
<>
<Paper elevation={0} spacing={2} style={{ padding: 24 }}>
<div style={{textAlign: 'right'}}>
<Button
variant='contained'
size ='small'
disableElevation
onClick={() => navigateTo("/send")}
disabled={props.balance <= 0.0001}
>
Send
</Button>
<div style={{ textAlign: 'right' }}>
<Button
variant='contained'
size='small'
disableElevation
onClick={() => navigateTo("/send")}
disabled={props.balance <= 0.0001}
>
Send
</Button>
</div>
<br/>
<br />
<CssBaseline />
<Grid container>
<Grid item xs={12} md={3}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography
variant='h6'
fontWeight={500}
gutterBottom
style={{ textAlign: 'left' }}
color='text.secondary'
>
Total Balance
</Typography>
<Typography
variant='h6'
fontWeight={600}
variant='h5'
fontWeight={500}
style={{ textAlign: 'left' }}
color='text.primary'
>
Expand All @@ -51,7 +54,6 @@ export default function BalanceInfo(props) {
style={{
display: 'flex',
flexDirection: 'row',
padding: 12,
justifyContent: 'space-between'
}
}
Expand Down Expand Up @@ -96,24 +98,23 @@ function Balance(props) {
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography
variant='body2'
fontWeight={500}
variant='h6'
color='text.secondary'
gutterBottom
style={{ textAlign: 'left' }}
>
{props.title}
</Typography>
<Typography
variant='subtitle1'
fontWeight={600}
variant='h6'
fontWeight={500}
color='text.primary'
gutterBottom
style={{ textAlign: 'left' }}
>
{props.balance}
</Typography>

</div>
);
}
Expand Down
25 changes: 22 additions & 3 deletions src/components/CustomAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button'
import { IconButton } from '@mui/material';
import BrightnessLowOutlined from '@mui/icons-material/BrightnessLowOutlined';
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
import PropTypes from 'prop-types';

export function CustomAppBar(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
Expand All @@ -25,8 +29,15 @@ export function CustomAppBar(props) {
sx={{ flexGrow: 1 }}
align='left'
>
Staking UI
Staking
</Typography>
<IconButton
aria-label='mode'
onClick={() => props.onModeChange()}
>
{props.darkMode ? <BrightnessLowOutlined /> : <DarkModeOutlined />}

</IconButton>
<Button
id="demo-positioned-button"
color='inherit'
Expand Down Expand Up @@ -59,7 +70,8 @@ export function CustomAppBar(props) {
key={index}
onClick={() => {
setAnchorEl(null);
props.onNetworkChange(network)}
props.onNetworkChange(network)
}
}
>
{network.displayName}
Expand All @@ -71,4 +83,11 @@ export function CustomAppBar(props) {
</AppBar>
);

}
}

CustomAppBar.propTypes = {
darkMode: PropTypes.bool.isRequired,
onModeChange: PropTypes.func.isRequired,
selectedNetwork: PropTypes.object.isRequired,
onNetworkChange: PropTypes.func.isRequired,
};
0 src/pages/table.js → src/components/CustomTable.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/components/Delegations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import Button from '@mui/material/Button';
import { StyledTableCell, StyledTableRow } from './../pages/table';
import { StyledTableCell, StyledTableRow } from './CustomTable';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
Expand Down
2 changes: 1 addition & 1 deletion src/components/InActiveValidators.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { StyledTableCell, StyledTableRow } from './../pages/table';
import { StyledTableCell, StyledTableRow } from './CustomTable';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
Expand Down
148 changes: 148 additions & 0 deletions src/components/authz/AuthzSend.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import Typography from '@mui/material/Typography';
import DialogContent from '@mui/material/DialogContent';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import InputAdornment from '@mui/material/InputAdornment';
import CircularProgress from '@mui/material/CircularProgress';
import { totalBalance } from '../../utils/denom';

export function AuthzSendDialog(props) {
const { onClose, grant, currency, open, execTx, onExecSend } = props;
const available = grant?.authorization.spend_limit ? totalBalance(grant.authorization.spend_limit, currency?.coinDecimals) : -1;
const { handleSubmit, control, setValue, formState: { errors } } = useForm({
defaultValues: {
amount: 0,
recipient: '',
}
});

const onSubmit = data => {
onExecSend({
from: grant?.granter,
recipient: data.recipient,
amount: Number(data.amount) * (10 ** currency.coinDecimals),
})
};

return (
<Dialog
onClose={onClose}
open={open}
maxWidth='sm'
fullWidth={true}
>
<DialogTitle
style={{ textAlign: 'center' }}
fontWeight={600}
variant='h5'
color='text.primary'
>
Send
</DialogTitle>
<DialogContent>
<Box

noValidate
autoComplete="off"
sx={{
'& .MuiTextField-root': { m: 1 },
}}
>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<TextField
required
label="Sender"
fullWidth
value={grant?.granter}
disabled
/>
</div>
<div>
<Controller
name="recipient"
control={control}
rules={{ required: 'Recipient is required' }}
render={({ field }) =>
<TextField
{...field}
required
label="Recipient"
fullWidth
/>}
/>
</div>
<Typography
variant='body2'
color='text.primary'
style={{ textAlign: 'end' }}
className='hover-link'
onClick={() => available !== -1 ? setValue("amount", available) : null}
>
Availabel:&nbsp;{ available !== -1 ? `${available}${currency?.coinDenom}` : <span dangerouslySetInnerHTML={{ "__html": "&infin;" }} /> }
</Typography>
<Controller
name="amount"
control={control}
rules={{ required: 'Amount is required',
validate: (value) => {
if (available === -1) {
return Number(value) > 0
} else {
return Number(value) > 0 && Number(value) <= Number(available)
}
}}}
render={({ field }) =>
<TextField
{...field}
required
label="Amount"
fullWidth
error={!!errors.amount}
helperText={errors.amount?.type === 'validate' ? 'Invalid or Insufficient balance' : errors.amount?.message}

InputProps={{
endAdornment:
<InputAdornment
position="start"
>
{currency?.coinDenom}
</InputAdornment>,
}}
/>}
/>
<div
style={{ textAlign: 'center' }}
>
<br />
<Button
type='submit'
variant='outlined'
disableElevation
disabled={execTx === 'pending'}
size='medium'
>
{execTx === 'pending' ? <CircularProgress size={25} /> : 'Send'}
</Button>
</div>
</form>
</Box>
</DialogContent>
</Dialog>
);
}

AuthzSendDialog.propTypes = {
onClose: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired,
grant: PropTypes.object.isRequired,
currency: PropTypes.object.isRequired,
execTx: PropTypes.string.isRequired,
onExecSend: PropTypes.func.isRequired,
};
Empty file added src/components/authz/AuthzVote.jsx
View file
Open in desktop
Empty file.
Loading