review requests

src/components/DepositsTable/DataRow.tsx

@@ -9,6 +9,7 @@ import {
   fallbackSuggestedRelayerFeePct,
   suggestedFeesDeviationBufferMultiplier,
   fixedPointAdjustment,
+  pendingStateTimeUntilSlow,
 } from "utils";
 
 import { HeaderCells, ColumnKey } from "./HeadRow";
@@ -33,8 +34,6 @@ type Props = {
 
 const config = getConfig();
 
-const MAX_PENDING_STATE_TIME_UNTIL_SLOW = 30 * 60; // 30 mins
-
 function isColumnDisabled(disabledColumns: ColumnKey[], column: ColumnKey) {
   return disabledColumns.includes(column);
 }
@@ -61,7 +60,7 @@ export function DataRow({
     deposit.status === "pending" &&
     Math.abs(
       DateTime.fromSeconds(deposit.depositTime).diffNow("seconds").as("seconds")
-    ) > MAX_PENDING_STATE_TIME_UNTIL_SLOW;
+    ) > pendingStateTimeUntilSlow;
 
   // Hide unsupported or unknown token deposits
   if (!token) {

src/components/DepositsTable/DepositsTable.tsx

@@ -4,7 +4,7 @@ import { HeadRow, headerCells, ColumnKey } from "./HeadRow";
 import { DataRow } from "./DataRow";
 import { Deposit } from "hooks/useDeposits";
 
-export type Props = {
+export type DepositsTableProps = {
   disabledColumns?: ColumnKey[];
   onClickSpeedUp?: (deposit: Deposit) => void;
   deposits: Deposit[];
@@ -14,7 +14,7 @@ export function DepositsTable({
   disabledColumns = [],
   deposits,
   onClickSpeedUp,
-}: Props) {
+}: DepositsTableProps) {
   return (
     <Wrapper>
       <StyledTable>

src/components/DepositsTable/PaginatedDepositsTable.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 
 import Pagination, { paginate } from "components/Pagination";
-import { DepositsTable, Props as DepositsTableProps } from "./DepositsTable";
+import { DepositsTable, DepositsTableProps } from "./DepositsTable";
 
 type Props = DepositsTableProps & {
   currentPage: number;

src/components/Pagination/Pagination.styles.tsx

@@ -40,7 +40,6 @@ export const PageSizeSelectButton = styled(UnstyledButton)`
   }
 
   @media ${QUERIESV2.sm.andDown} {
-    margin-bottom: 1rem;
     padding: 10px 20px;
   }
 `;

src/utils/constants.ts

@@ -688,3 +688,6 @@ export const walletBlacklist = (process.env.REACT_APP_WALLET_BLACKLIST || "")
 
 // Pre-computed gas expenditure for deposits used for estimations
 export const gasExpenditureDeposit = BigNumber.from(90_000);
+
+// Used to determine whether to show the "slow" warning in the deposits table
+export const pendingStateTimeUntilSlow = 30 * 60; // 30 mins