From 2bf94416012cd1e604ef7d4d8696545caa734dc6 Mon Sep 17 00:00:00 2001
From: Dong-Ha Kim <dongha.kim210@gmail.com>
Date: Wed, 1 Nov 2023 11:05:40 +0100
Subject: [PATCH] fixup

---
 src/utils/local-deposits.ts                            | 10 ++++------
 src/views/DepositStatus/DepositStatus.tsx              |  2 --
 .../components/DepositStatusLowerCard.tsx              |  6 +++---
 .../DepositStatus/components/DepositTimesCard.tsx      |  6 +++---
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/utils/local-deposits.ts b/src/utils/local-deposits.ts
index 294f71ba5..a2358b807 100644
--- a/src/utils/local-deposits.ts
+++ b/src/utils/local-deposits.ts
@@ -1,6 +1,6 @@
 import { Deposit } from "../hooks/useDeposits";
 
-const LOCAL_PENDING_DEPOSITS_KEY = "local-deposits";
+const LOCAL_DEPOSITS_KEY = "local-deposits";
 
 export function addLocalDeposit(newDeposit: Deposit) {
   const localPendingDeposits = getLocalDeposits();
@@ -8,15 +8,13 @@ export function addLocalDeposit(newDeposit: Deposit) {
     (deposit) => deposit.depositTxHash !== newDeposit.depositTxHash
   );
   window.localStorage.setItem(
-    LOCAL_PENDING_DEPOSITS_KEY,
+    LOCAL_DEPOSITS_KEY,
     JSON.stringify([newDeposit, ...filteredLocalPendingDeposits])
   );
 }
 
 export function getLocalDeposits() {
-  const localPendingDeposits = window.localStorage.getItem(
-    LOCAL_PENDING_DEPOSITS_KEY
-  );
+  const localPendingDeposits = window.localStorage.getItem(LOCAL_DEPOSITS_KEY);
   return (
     localPendingDeposits ? JSON.parse(localPendingDeposits) : []
   ) as Deposit[];
@@ -35,7 +33,7 @@ export function removeLocalDeposits(depositTxHashes: string[]) {
     (deposit) => !depositTxHashes.includes(deposit.depositTxHash)
   );
   window.localStorage.setItem(
-    LOCAL_PENDING_DEPOSITS_KEY,
+    LOCAL_DEPOSITS_KEY,
     JSON.stringify(filteredLocalPendingDeposits)
   );
 }
diff --git a/src/views/DepositStatus/DepositStatus.tsx b/src/views/DepositStatus/DepositStatus.tsx
index d4b3056f9..6d518a366 100644
--- a/src/views/DepositStatus/DepositStatus.tsx
+++ b/src/views/DepositStatus/DepositStatus.tsx
@@ -27,8 +27,6 @@ export default function DepositStatus() {
   const destinationChainId = queryParams.get("destinationChainId");
   const bridgeTokenSymbol = queryParams.get("bridgeTokenSymbol");
 
-  // TOOD: more validation here
-
   if (
     !depositTxHash ||
     !originChainId ||
diff --git a/src/views/DepositStatus/components/DepositStatusLowerCard.tsx b/src/views/DepositStatus/components/DepositStatusLowerCard.tsx
index c6b69b905..7b6e8889d 100644
--- a/src/views/DepositStatus/components/DepositStatusLowerCard.tsx
+++ b/src/views/DepositStatus/components/DepositStatusLowerCard.tsx
@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
 import { SecondaryButton } from "components/Button";
 import EstimatedTable from "views/Bridge/components/EstimatedTable";
 import { getReceiveTokenSymbol } from "views/Bridge/utils";
-import { getToken } from "utils";
+import { getToken, COLORS } from "utils";
 import { useIsContractAddress } from "hooks/useIsContractAddress";
 
 import { EarnByLpAndStakingCard } from "./EarnByLpAndStakingCard";
@@ -71,9 +71,9 @@ export function DepositStatusLowerCard({
 const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background: #3e4047;
+  background: ${COLORS["grey-600"]};
 `;
 
-const Button = styled(SecondaryButton)<{ disabled?: boolean }>`
+const Button = styled(SecondaryButton)`
   width: 100%;
 `;
diff --git a/src/views/DepositStatus/components/DepositTimesCard.tsx b/src/views/DepositStatus/components/DepositTimesCard.tsx
index 0d499692e..fb9174b6b 100644
--- a/src/views/DepositStatus/components/DepositTimesCard.tsx
+++ b/src/views/DepositStatus/components/DepositTimesCard.tsx
@@ -7,7 +7,7 @@ import { ReactComponent as LoadingIcon } from "assets/loading.svg";
 import { ReactComponent as ExternalLinkIcon } from "assets/icons/external-link-16.svg";
 
 import { Text, CardWrapper } from "components";
-import { getChainInfo } from "utils";
+import { getChainInfo, COLORS } from "utils";
 import { useAmplitude } from "hooks";
 import { ampli } from "ampli";
 
@@ -175,7 +175,7 @@ const Row = styled.div`
 const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background: #3e4047;
+  background: ${COLORS["grey-600"]};
 `;
 
 const DateWrapper = styled.div`
@@ -191,7 +191,7 @@ const TransactionsPageLinkWrapper = styled.a`
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid #4c4e57;
+  border: 1px solid ${COLORS["grey-500"]};
   border-radius: 0.5rem;
   padding: 1rem;
   text-decoration: none;