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

Refine dapp styling and spacing #53

Merged
merged 5 commits into from
Jul 24, 2020
Merged

Refine dapp styling and spacing #53

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33932ee
Updated styling
chrismaree Jul 23, 2020
d2dca1f
nits
chrismaree Jul 24, 2020
8d16b86
Updated favicon
chrismaree Jul 24, 2020
d9eed82
Fixed nits
chrismaree Jul 24, 2020
ba4ae9f
Merge branch 'develop' into chrismaree/refine-styling-and-spacing
chrismaree Jul 24, 2020
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
40 changes: 21 additions & 19 deletions features/all-positions/AllPositions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,11 @@ const AllPositions = () => {

if (tokenSymbol === null || emp === null) {
return (
<Container>
<Box py={2}>
<Typography>
<i>Please first select an EMP from the dropdown above.</i>
</Typography>
</Box>
</Container>
<Box>
<Typography>
<i>Please first connect and select an EMP from the dropdown above.</i>
</Typography>
</Box>
);
}

Expand All @@ -69,31 +67,35 @@ const AllPositions = () => {
};

return (
<Container>
<Box>
<Box>
<Typography>
<i>
Estimated price of{" "}
{latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
{priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
</i>
Estimated price of{" "}
{latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
{priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
<Link href={sourceUrl} target="_blank" rel="noopener noreferrer">
Coinbase Pro.
</Link>
</Typography>
</Box>
<Box py={4}>
<Box pt={4}>
{activeSponsors && (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Sponsor</TableCell>
<TableCell align="right">Collateral ({collSymbol})</TableCell>
<TableCell>
<strong>Sponsor</strong>
</TableCell>
<TableCell align="right">
<strong>Collateral ({collSymbol})</strong>
</TableCell>
<TableCell align="right">
<strong>Synthetics ({tokenSymbol})</strong>
</TableCell>
<TableCell align="right">
Synthetics ({tokenSymbol})
<strong>Collateral Ratio</strong>
</TableCell>
<TableCell align="right">Collateral Ratio</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -131,7 +133,7 @@ const AllPositions = () => {
</TableContainer>
)}
</Box>
</Container>
</Box>
);
};

Expand Down
2 changes: 1 addition & 1 deletion features/contract-state/Totals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const Totals = () => {
<Small> {tokenSymbol}</Small>
</Tooltip>
</Typography>
<Tooltip title="This is the total number of tokens minted minus the total number of tokens redeemed.">
<Tooltip title="Total number of tokens minted minus the total number of tokens redeemed.">
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved
<Label>
of <White>synthetic tokens</White> outstanding
</Label>
Expand Down
4 changes: 1 addition & 3 deletions features/core/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@ const Header = () => {
return (
<Box display="flex" justifyContent="space-between" alignItems="center">
<Box>
<Typography variant="h4">
<i>EMP Tools</i>
</Typography>
<Typography variant="h4">⚒️⚡️EMP Tools</Typography>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+9999

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrice32 @kendricktan @adrianmcli @daywiss Please suggest other emoji's here or forever hold your peace! (until the next PR).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so you guys can see it more easily it looks like this now:
image

</Box>
<Box display="flex" alignItems="center">
{address && (
Expand Down
135 changes: 70 additions & 65 deletions features/manage-position/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ethers } from "ethers";
import styled from "styled-components";
import { Box, Button, TextField, Typography } from "@material-ui/core";
import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";

import EmpContract from "../../containers/EmpContract";
import { useState } from "react";
Expand All @@ -12,9 +12,7 @@ import Position from "../../containers/Position";
import PriceFeed from "../../containers/PriceFeed";
import Etherscan from "../../containers/Etherscan";

const Container = styled(Box)`
max-width: 720px;
`;
const Container = styled(Box)``;
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved

const Important = styled(Typography)`
color: red;
Expand Down Expand Up @@ -172,11 +170,10 @@ const Create = () => {
</Typography>
</Box>
<Box pb={2}>
<Box py={2}>
<Important>
IMPORTANT! Please read this carefully or you may lose money.
</Important>
</Box>
<Important>
IMPORTANT! Please read this carefully or you may lose money.
</Important>

<Box pt={2}>
<Typography>
When minting, your resulting collateralization ratio (collateral /
Expand All @@ -194,68 +191,76 @@ const Create = () => {
them if you want to short the underlying.
</Typography>
</Box>
<Box py={2}>
<Box pb={2}>
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved
<Typography>
When you're ready, fill in the desired amount of collateral and
tokens below and click the "Create" button.
When you're ready, fill in the amount of collateral and tokens below
and click Create.
</Typography>
</Box>
</Box>

<Box py={2}>
<TextField
type="number"
label={`Collateral (${collSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={collateral}
error={balanceTooLow}
helperText={balanceTooLow ? "Balance too low" : null}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateral(e.target.value)
}
/>
</Box>
<Box py={2}>
<TextField
type="number"
label={`Tokens (${tokenSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={tokens}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setTokens(e.target.value)
}
/>
</Box>
<Box py={2}>
{needAllowance() && (
<Button
variant="contained"
onClick={setMaxAllowance}
style={{ marginRight: `12px` }}
>
Approve
</Button>
)}
{tokens &&
collateral &&
gcr &&
!needAllowance() &&
computedCR > gcr &&
!balanceTooLow ? (
<Button
variant="contained"
onClick={handleCreateClick}
>{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
) : (
<Button variant="contained" disabled>
Create
</Button>
)}
</Box>
<Grid container spacing={3}>
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved
<Grid item xs={4}>
<TextField
fullWidth
type="number"
variant="outlined"
label={`Collateral (${collSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={collateral}
error={balanceTooLow}
helperText={balanceTooLow ? "Balance too low" : null}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateral(e.target.value)
}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="number"
variant="outlined"
label={`Tokens (${tokenSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={tokens}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setTokens(e.target.value)
}
/>
</Grid>
<Grid item xs={4}>
<Box py={1}>
{needAllowance() && (
<Button
variant="contained"
onClick={setMaxAllowance}
style={{ marginRight: `12px` }}
>
Approve
</Button>
)}
{tokens &&
collateral &&
gcr &&
!needAllowance() &&
computedCR > gcr &&
!balanceTooLow ? (
<Button
variant="contained"
onClick={handleCreateClick}
>{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
) : (
<Button variant="contained" disabled>
Create
</Button>
)}
</Box>
</Grid>
</Grid>

<Box py={2}>
<Box py={4}>
{tokens && collateral && gcr ? (
<Typography>
Resulting CR:{" "}
Expand Down
79 changes: 44 additions & 35 deletions features/manage-position/Deposit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from "react";
import styled from "styled-components";
import { Box, Button, TextField, Typography } from "@material-ui/core";
import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";
import { ethers } from "ethers";

import EmpContract from "../../containers/EmpContract";
Expand All @@ -10,9 +10,7 @@ import PriceFeed from "../../containers/PriceFeed";
import Etherscan from "../../containers/Etherscan";
import { hashMessage } from "ethers/lib/utils";

const Container = styled(Box)`
max-width: 720px;
`;
const Container = styled(Box)``;
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved

const Link = styled.a`
color: white;
Expand Down Expand Up @@ -99,42 +97,53 @@ const Deposit = () => {
// User has a position and no pending withdrawal requests so can deposit more collateral.
return (
<Container>
<Box pt={4} pb={2}>
<Box pt={2} pb={4}>
<Typography>
By depositing additional collateral into your position you will
increase your collateralization ratio.
Adding additional collateral into your position you will increase the
chrismaree marked this conversation as resolved.
Show resolved Hide resolved
collateralization ratio.
</Typography>
</Box>

<Box py={2}>
<TextField
type="number"
inputProps={{ min: "0" }}
label={`Collateral (${collSymbol})`}
placeholder="1234"
error={balanceTooLow}
helperText={balanceTooLow ? `${collSymbol} balance too low` : null}
value={collateralToDeposit}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateralToDeposit(e.target.value)
}
/>
</Box>

<Box py={2}>
{collateralToDeposit && collateralToDeposit != "0" && !balanceTooLow ? (
<Button
variant="contained"
onClick={handleDepositClick}
>{`Deposit ${collateralToDeposit} ${collSymbol} into your position`}</Button>
) : (
<Button variant="contained" disabled>
Deposit
</Button>
)}
</Box>
<Grid container spacing={3}>
<Grid item xs={4}>
<Box py={0}>
<TextField
fullWidth
type="number"
variant="outlined"
inputProps={{ min: "0" }}
label={`Collateral (${collSymbol})`}
placeholder="1234"
error={balanceTooLow}
helperText={
balanceTooLow ? `${collSymbol} balance too low` : null
}
value={collateralToDeposit}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateralToDeposit(e.target.value)
}
/>
</Box>
</Grid>
<Grid item xs={4}>
<Box py={1}>
{collateralToDeposit &&
collateralToDeposit != "0" &&
!balanceTooLow ? (
<Button
variant="contained"
onClick={handleDepositClick}
>{`Deposit ${collateralToDeposit} ${collSymbol} into your position`}</Button>
) : (
<Button variant="contained" disabled>
Deposit
</Button>
)}
</Box>
</Grid>
</Grid>

<Box py={2}>
<Box py={4}>
<Typography>
Current CR: {pricedStartingCR?.toFixed(4) || "N/A"}
</Typography>
Expand Down
3 changes: 2 additions & 1 deletion features/manage-position/ManagePosition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Manager = () => {
return (
<Box>
<Typography>
<i>Please connect first.</i>
<i>Please first connect and select an EMP from the dropdown above.</i>
</Typography>
</Box>
);
Expand All @@ -42,6 +42,7 @@ const Manager = () => {
{method === "deposit" && <Deposit />}
{method === "withdraw" && <Withdraw />}
{method === "redeem" && <Redeem />}
{method === "transfer" && <FalseDoor />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should just remove this option. Here and in ManagePosition/MethodSelector

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do actually want it though, no? I've created an issue to track this: #63

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes eventually but for now why not just remove it?

</Box>
);
};
Expand Down
Loading