From aefbadd1b0a5586e1b7849fcbaf8de070403612b Mon Sep 17 00:00:00 2001
From: IF <139582705+infiniteflower@users.noreply.github.com>
Date: Thu, 16 May 2024 12:31:49 -0400
Subject: [PATCH] chore: move colors out into a fn

---
 .../SmartTransactionStatus.tsx                | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/components/Views/SmartTransactionStatus/SmartTransactionStatus.tsx b/app/components/Views/SmartTransactionStatus/SmartTransactionStatus.tsx
index 135549d82bc..c99d82cf9b9 100644
--- a/app/components/Views/SmartTransactionStatus/SmartTransactionStatus.tsx
+++ b/app/components/Views/SmartTransactionStatus/SmartTransactionStatus.tsx
@@ -25,6 +25,7 @@ import TransactionBackgroundBottom from '../../../images/transaction-background-
 import LoopingScrollAnimation from './LoopingScrollAnimation';
 import { hexToDecimal } from '../../../util/conversions';
 import useRemainingTime from './useRemainingTime';
+import { ThemeColors } from '@metamask/design-tokens/dist/types/js/themes/types';
 
 const getPortfolioStxLink = (chainId: Hex, uuid: string) => {
   const chainIdDec = hexToDecimal(chainId);
@@ -195,19 +196,8 @@ const getDisplayValuesAndHandlers = ({
   };
 };
 
-const SmartTransactionStatus = ({
-  requestState: { smartTransaction, isDapp, isInSwapFlow },
-  origin,
-  onConfirm,
-}: Props) => {
-  const { status, creationTime, uuid } = smartTransaction;
-  const providerConfig = useSelector(selectProviderConfig);
-
-  const navigation = useNavigation();
-  const { colors } = useTheme();
-
-  // Setup styles
-  const styles = StyleSheet.create({
+const createStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
     wrapper: {
       height: '82%',
       display: 'flex',
@@ -257,6 +247,18 @@ const SmartTransactionStatus = ({
     },
   });
 
+const SmartTransactionStatus = ({
+  requestState: { smartTransaction, isDapp, isInSwapFlow },
+  origin,
+  onConfirm,
+}: Props) => {
+  const { status, creationTime, uuid } = smartTransaction;
+  const providerConfig = useSelector(selectProviderConfig);
+
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
   const isStxPending = status === SmartTransactionStatuses.PENDING;
 
   const {