bridge_ui: safari and table style fixes

Change-Id: Ic578bfd944a035470afbb996b28cf84c9b29db80
2021-10-08 20:50:56 -04:00 · 2021-10-08 20:50:56 -04:00 · 918a44cbd3
parent 6fd6cb9f02
commit 918a44cbd3
6 changed files with 117 additions and 69 deletions
--- a/bridge_ui/src/App.js
+++ b/bridge_ui/src/App.js
@ -73,9 +73,7 @@ const useStyles = makeStyles((theme) => ({
    minHeight: "100vh",
  },
  content: {
-    [theme.breakpoints.up("sm")]: {
-      margin: theme.spacing(2, 0),
-    },
+    margin: theme.spacing(2, 0),
    [theme.breakpoints.up("md")]: {
      margin: theme.spacing(4, 0),
    },
--- a/bridge_ui/src/components/Home/index.tsx
+++ b/bridge_ui/src/components/Home/index.tsx
@ -5,6 +5,7 @@ import {
  makeStyles,
  Typography,
 } from "@material-ui/core";
+import clsx from "clsx";
 import { Link as RouterLink } from "react-router-dom";
 import { COLORS } from "../../muiTheme";

@ -57,8 +58,8 @@ function Home() {
    <div>
      <Container maxWidth="md">
        <div className={classes.centeredContainer}>
-          <Typography variant="h1" className={classes.header}>
-            <span className={classes.linearGradient}>The Portal is Open</span>
+          <Typography variant="h1" className={clsx(classes.header, classes.linearGradient)}>
+            The Portal is Open
          </Typography>
        </div>
      </Container>
--- a/bridge_ui/src/components/NFTOriginVerifier.tsx
+++ b/bridge_ui/src/components/NFTOriginVerifier.tsx
@ -23,6 +23,7 @@ import {
 import { Launch } from "@material-ui/icons";
 import { Alert } from "@material-ui/lab";
 import { Connection } from "@solana/web3.js";
+import clsx from "clsx";
 import { useCallback, useEffect, useState } from "react";
 import { useBetaContext } from "../contexts/BetaContext";
 import { useEthereumProvider } from "../contexts/EthereumProviderContext";
@ -70,7 +71,7 @@ const useStyles = makeStyles((theme) => ({
    // filter: `drop-shadow( 0px 0px 8px ${COLORS.nearBlack}) drop-shadow( 0px 0px 14px ${COLORS.nearBlack}) drop-shadow( 0px 0px 24px ${COLORS.nearBlack})`,
  },
  mainCard: {
-    padding: theme.spacing(1),
+    padding: theme.spacing(2),
    backgroundColor: COLORS.nearBlackWithMinorTransparency,
  },
  originHeader: {
@ -234,8 +235,11 @@ export default function NFTOriginVerifier() {
    <div>
      <Container maxWidth="md">
        <div className={classes.centeredContainer}>
-          <Typography variant="h1" className={classes.header}>
-            <span className={classes.linearGradient}>NFT Origin Verifier</span>
+          <Typography
+            variant="h1"
+            className={clsx(classes.header, classes.linearGradient)}
+          >
+            NFT Origin Verifier
          </Typography>
        </div>
      </Container>
@ -284,7 +288,9 @@ export default function NFTOriginVerifier() {
            />
          ) : null}
          {displayError ? (
-            <Typography color="error">{displayError}</Typography>
+            <Typography align="center" color="error">
+              {displayError}
+            </Typography>
          ) : null}
          {isLoading ? (
            <div className={classes.loaderWrapper}>
--- a/bridge_ui/src/components/Stats/index.tsx
+++ b/bridge_ui/src/components/Stats/index.tsx
@ -12,6 +12,8 @@ import { CHAINS } from "../../utils/consts";
 import SmartAddress from "../SmartAddress";
 import MuiReactTable from "./tableComponents/MuiReactTable";
 import numeral from "numeral";
+import clsx from "clsx";
+import { ChainId } from "@certusone/wormhole-sdk";

 const useStyles = makeStyles((theme) => ({
  logoPositioner: {
@ -39,19 +41,27 @@ const useStyles = makeStyles((theme) => ({
    display: "flex",
    alignItems: "flex-end",
    marginBottom: theme.spacing(1),
-  },
-  inline: {
-    display: "inline",
-    marginRight: theme.spacing(1),
-    whiteSpace: "nowrap",
+    textAlign: "left",
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      alignItems: "unset",
+    },
  },
  grower: {
    flexGrow: 1,
  },
  explainerContainer: {},
-  rightAlign: {
-    textAlign: "right",
-    display: "inline-block",
+  totalContainer: {
+    display: "flex",
+    alignItems: "flex-end",
+    paddingBottom: 1, // line up with left text bottom
+    [theme.breakpoints.down("sm")]: {
+      marginTop: theme.spacing(1),
+    },
+  },
+  totalValue: {
+    marginLeft: theme.spacing(0.5),
+    marginBottom: "-.125em", // line up number with label
  },
 }));

@ -84,31 +94,33 @@ const StatsRoot: React.FC<any> = () => {
          logo: value.logo,
          assetAddress: value.assetAddress,
        }),
-        Cell: (value: any) => {
-          return (
-            <div className={classes.tokenContainer}>
-              <div className={classes.logoPositioner}>
-                {value.row?.original?.logo ? (
-                  <img
-                    src={value.row?.original?.logo}
-                    alt=""
-                    className={classes.logo}
-                  />
-                ) : null}
-              </div>
-              <SmartAddress
-                chainId={value.row?.original?.chainId}
-                address={value.row?.original?.assetAddress}
-                symbol={value.row?.original?.symbol}
-                tokenName={value.row?.original?.name}
-              />
+        Cell: (value: any) => (
+          <div className={classes.tokenContainer}>
+            <div className={classes.logoPositioner}>
+              {value.row?.original?.logo ? (
+                <img
+                  src={value.row?.original?.logo}
+                  alt=""
+                  className={classes.logo}
+                />
+              ) : null}
            </div>
-          );
-        },
+            <SmartAddress
+              chainId={
+                CHAINS.find((x) => x.name === value.originChain)?.id as ChainId
+              }
+              address={value.row?.original?.assetAddress}
+              symbol={value.row?.original?.symbol}
+              tokenName={value.row?.original?.name}
+            />
+          </div>
+        ),
      },
+      { Header: "Chain", accessor: "originChain" },
      {
        Header: "Amount",
        accessor: "amount",
+        align: "right",
        Cell: (value: any) =>
          value.row?.original?.amount !== undefined
            ? numeral(value.row?.original?.amount).format("0,0.00")
@ -117,6 +129,7 @@ const StatsRoot: React.FC<any> = () => {
      {
        Header: "Total Value (USD)",
        accessor: "totalValue",
+        align: "right",
        Cell: (value: any) =>
          value.row?.original?.totalValue !== undefined
            ? numeral(value.row?.original?.totalValue).format("0.0 a")
@ -125,13 +138,12 @@ const StatsRoot: React.FC<any> = () => {
      {
        Header: "Unit Price (USD)",
        accessor: "quotePrice",
+        align: "right",
        Cell: (value: any) =>
          value.row?.original?.quotePrice !== undefined
            ? numeral(value.row?.original?.quotePrice).format("0,0.00")
            : "",
      },
-
-      { Header: "Chain", accessor: "originChain" },
    ];
  }, [
    classes.logo,
@ -167,15 +179,26 @@ const StatsRoot: React.FC<any> = () => {
                </Typography>
              </div>
              <div className={classes.grower} />
-              <div className={classes.explainerContainer}>
+              <div
+                className={clsx(
+                  classes.explainerContainer,
+                  classes.totalContainer
+                )}
+              >
                <Typography
                  variant="body2"
                  color="textSecondary"
-                  className={classes.inline}
+                  component="div"
+                  noWrap
                >
                  {"Total (USD)"}
                </Typography>
-                <Typography variant="h3" className={classes.inline}>
+                <Typography
+                  variant="h3"
+                  component="div"
+                  noWrap
+                  className={classes.totalValue}
+                >
                  {tvlString}
                </Typography>
              </div>
--- a/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx
+++ b/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx
@ -1,3 +1,4 @@
+import { TableFooter } from "@material-ui/core";
 import MaUTable from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@ -35,11 +36,11 @@ const EnhancedTable = ({ columns, data, skipPageReset }) => {
    usePagination
  );

-  const handleChangePage = (event, newPage) => {
+  const handlePageChange = (event, newPage) => {
    gotoPage(newPage);
  };

-  const handleChangeRowsPerPage = (event) => {
+  const handleRowsPerPageChange = (event) => {
    setPageSize(Number(event.target.value));
  };

@ -56,15 +57,23 @@ const EnhancedTable = ({ columns, data, skipPageReset }) => {
                    {...(column.id === "selection"
                      ? column.getHeaderProps()
                      : column.getHeaderProps(column.getSortByToggleProps()))}
+                    align={
+                      // TODO: better way to get column?
+                      columns.find((c) => c.Header === column.Header)?.align ||
+                      "left"
+                    }
                  >
-                    {column.render("Header")}
                    {column.id !== "selection" ? (
                      <TableSortLabel
                        active={column.isSorted}
                        // react-table has a unsorted state which is not treated here
                        direction={column.isSortedDesc ? "desc" : "asc"}
-                      />
-                    ) : null}
+                      >
+                        {column.render("Header")}
+                      </TableSortLabel>
+                    ) : (
+                      column.render("Header")
+                    )}
                  </TableCell>
                ))}
              </TableRow>
@ -77,7 +86,10 @@ const EnhancedTable = ({ columns, data, skipPageReset }) => {
                <TableRow {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
-                      <TableCell {...cell.getCellProps()}>
+                      <TableCell
+                        {...cell.getCellProps()}
+                        align={cell.column.align || "left"}
+                      >
                        {cell.render("Cell")}
                      </TableCell>
                    );
@ -86,23 +98,31 @@ const EnhancedTable = ({ columns, data, skipPageReset }) => {
              );
            })}
          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={[
+                  5,
+                  10,
+                  25,
+                  { label: "All", value: data.length },
+                ]}
+                colSpan={columns.length}
+                count={data.length}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handlePageChange}
+                onRowsPerPageChange={handleRowsPerPageChange}
+                ActionsComponent={TablePaginationActions}
+              />
+            </TableRow>
+          </TableFooter>
        </MaUTable>
      </TableContainer>
-      <TablePagination
-        style={{ display: "flex", justifyContent: "flex-end" }}
-        rowsPerPageOptions={[5, 10, 25, { label: "All", value: data.length }]}
-        colSpan={3}
-        count={data.length}
-        rowsPerPage={pageSize}
-        page={pageIndex}
-        SelectProps={{
-          inputProps: { "aria-label": "rows per page" },
-          native: true,
-        }}
-        onChangePage={handleChangePage}
-        onChangeRowsPerPage={handleChangeRowsPerPage}
-        ActionsComponent={TablePaginationActions}
-      />
    </>
  );
 };
--- a/bridge_ui/src/components/Stats/tableComponents/TablePaginationActions.jsx
+++ b/bridge_ui/src/components/Stats/tableComponents/TablePaginationActions.jsx
@ -18,22 +18,22 @@ const useStyles = makeStyles((theme) => ({
 const TablePaginationActions = (props) => {
  const classes = useStyles();
  const theme = useTheme();
-  const { count, page, rowsPerPage, onChangePage } = props;
+  const { count, page, rowsPerPage, onPageChange } = props;

  const handleFirstPageButtonClick = (event) => {
-    onChangePage(event, 0);
+    onPageChange(event, 0);
  };

  const handleBackButtonClick = (event) => {
-    onChangePage(event, page - 1);
+    onPageChange(event, page - 1);
  };

  const handleNextButtonClick = (event) => {
-    onChangePage(event, page + 1);
+    onPageChange(event, page + 1);
  };

  const handleLastPageButtonClick = (event) => {
-    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
@ -80,7 +80,7 @@ const TablePaginationActions = (props) => {

 TablePaginationActions.propTypes = {
  count: PropTypes.number.isRequired,
-  onChangePage: PropTypes.func.isRequired,
+  onPageChange: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
 };