From ad00d4a85eeb804e76fc8122c049e1a7c7d9a424 Mon Sep 17 00:00:00 2001
From: todd kao <todd.kakao@gmail.com>
Date: Wed, 17 Jul 2024 12:54:47 -0400
Subject: [PATCH] Finish removing usages of
 useSwapWidgetUIStore.getState().colors.primary

---
 packages/widget/src/hooks/use-swap-widget.ts  |  2 +-
 .../widget/src/ui/PreviewRoute/ChainStep.tsx  | 26 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/widget/src/hooks/use-swap-widget.ts b/packages/widget/src/hooks/use-swap-widget.ts
index b8f09f91d..382b31593 100644
--- a/packages/widget/src/hooks/use-swap-widget.ts
+++ b/packages/widget/src/hooks/use-swap-widget.ts
@@ -28,7 +28,7 @@ import { Chain, useChains } from './use-chains';
 import { useBalancesByChain } from './use-balances-by-chain';
 import { useRoute } from './use-route';
 import { getChainFeeAssets, getChainGasPrice } from '../utils/chain';
-import { useSkipClient, useSkipConfig } from './use-skip-client';
+import { useSkipClient } from './use-skip-client';
 import { getAmountWei, parseAmountWei } from '../utils/number';
 import { gracefullyConnect } from '../utils/wallet';
 import { useSwapWidgetUIStore } from '../store/swap-widget';
diff --git a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
index e01fa42bc..69922c112 100644
--- a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
+++ b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
@@ -27,11 +27,10 @@ import {
 } from '../../utils/ledger-warning';
 import { cn } from '../../utils/ui';
 import { ExpandArrow } from '../Icon/ExpandArrow';
-import { useSwapWidgetUIStore } from '../../store/swap-widget';
 import { useAssets } from '../../provider/assets';
 import { StyledPrimaryDiv } from '../StyledComponents/Theme';
 import { lightOrDark, nameToRgba } from '../../utils/color';
-import { useTheme } from 'styled-components';
+import { useTheme, styled } from 'styled-components';
 import { StyledPrimaryButton } from '../StyledComponents/Buttons';
 
 export const ChainStep = ({
@@ -407,19 +406,16 @@ export const ChainStep = ({
               </SimpleTooltip>
             )}
             {stepState?.explorerLink && (
-              <AdaptiveLink
+              <StyledAdaptiveLink
                 className={cn(
                   'flex flex-row items-center text-sm font-semibold underline'
                 )}
-                style={{
-                  color: useSwapWidgetUIStore.getState().colors.primary,
-                }}
                 href={stepState.explorerLink.link}
                 data-testid={`explorer-link`}
               >
                 {stepState.explorerLink.shorthand}
                 <FaExternalLinkAlt className="ml-1 h-3 w-3" />
-              </AdaptiveLink>
+              </StyledAdaptiveLink>
             )}
           </div>
           <div
@@ -489,16 +485,12 @@ export const ChainStep = ({
               !mutationStatus.isPending &&
               !isSuccess && (
                 <button onClick={() => setIsAddressDialogOpen(index)}>
-                  <PencilSquareIcon
+                  <StyledPencilSquareIcon
                     className={cn(
                       'h-4 w-4',
                       isNotFocused && 'text-neutral-400'
                     )}
-                    style={{
-                      color: !isNotFocused
-                        ? useSwapWidgetUIStore.getState().colors.primary
-                        : undefined,
-                    }}
+                    isFocused={!isNotFocused}
                   />
                 </button>
               )}
@@ -585,3 +577,11 @@ const AssetSwap = (props: {
     </div>
   );
 };
+
+const StyledAdaptiveLink = styled(AdaptiveLink)`
+  color: ${(props) => props.theme.primary.brandColor};
+`;
+
+const StyledPencilSquareIcon = styled(PencilSquareIcon)<{ isFocused: boolean }>`
+  ${(props) => props.isFocused && props.theme.primary.brandColor};
+`;