Add themeAtom to fix theme in modals (#264)

packages/widget-v2/src/components/Modal.tsx

@@ -9,6 +9,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useAtom } from "jotai";
 import { errorAtom, ErrorType } from "@/state/errorPage";
 import { numberOfModalsOpenAtom } from "@/state/modal";
+import { themeAtom } from "@/state/skipClient";
 
 export type ModalProps = {
   children: React.ReactNode;
@@ -73,6 +74,7 @@ export const useModal = <T extends ModalProps>(
   modal?: FC<T>,
   initialArgs?: Partial<T>
 ) => {
+  const [theme] = useAtom(themeAtom);
   const [numberOfModalsOpen, setNumberOfModalsOpen] = useAtom(
     numberOfModalsOpenAtom
   );
@@ -86,6 +88,7 @@ export const useModal = <T extends ModalProps>(
         modalInstance.show({
           stackedModal: numberOfModalsOpen > 0,
           ...showArgs,
+          theme,
         } as Partial<T>);
         setNumberOfModalsOpen((prev) => prev + 1);
       },
@@ -98,7 +101,7 @@ export const useModal = <T extends ModalProps>(
         modalInstance.hide();
       },
     }),
-    [modalInstance, setNumberOfModalsOpen, numberOfModalsOpen]
+    [modalInstance, theme, numberOfModalsOpen, setNumberOfModalsOpen]
   );
 };
 

packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx

@@ -12,6 +12,7 @@ import { formatUSD } from "@/utils/intl";
 import { SLIPPAGE_OPTIONS } from "@/constants/widget";
 import { getClientOperations, OperationType } from "@/utils/clientType";
 import { convertTokenAmountToHumanReadableAmount } from "@/utils/crypto";
+import { getBrandButtonTextColor } from "@/utils/colors";
 import { QuestionMarkIcon } from "@/icons/QuestionMarkIcon";
 
 export const SwapDetailModal = createModal((modalProps: ModalProps) => {
@@ -216,7 +217,10 @@ const StyledSlippageOptionLabel = styled(SmallText) <{ selected?: boolean }>`
   border-radius: 7px;
   padding: 4px 7px;
   white-space: nowrap;
-  color: ${(props) => props.theme.primary.text.normal};
+  color: ${({ selected, theme }) =>
+    selected
+      ? getBrandButtonTextColor(theme.brandColor)
+      : theme.primary.text.normal};
   &:hover {
     box-shadow: inset 0px 0px 0px 1px ${(props) => props.theme.brandColor};
     opacity: 1;

packages/widget-v2/src/state/skipClient.ts

@@ -25,12 +25,15 @@ import { config } from "@/constants/wagmi";
 import { WalletClient } from "viem";
 import { solanaWallets } from "@/constants/solana";
 import { Adapter } from "@solana/wallet-adapter-base";
+import { defaultTheme, Theme } from "@/widget/theme";
 
 export const skipClientConfigAtom = atom<SkipClientOptions>({
   apiURL,
   endpointOptions,
 });
 
+export const themeAtom = atom<Theme>(defaultTheme);
+
 export const skipClient = atom((get) => {
   const options = get(skipClientConfigAtom);
   const wallets = get(walletsAtom);

packages/widget-v2/src/stories/Widget.stories.tsx

@@ -3,7 +3,7 @@ import { ShowSwapWidget, SwapWidget, SwapWidgetProps } from "@/widget/Widget";
 import { defaultTheme, lightTheme, Theme } from "@/widget/theme";
 import NiceModal from "@ebay/nice-modal-react";
 import { styled } from "styled-components";
-import { ReactElement, useEffect } from "react";
+import { ReactElement, useEffect, useMemo } from "react";
 import { destinationAssetAtom, sourceAssetAmountAtom, sourceAssetAtom } from "@/state/swapPage";
 import { useAtom, useSetAtom } from "jotai";
 import { skipAssetsAtom } from "@/state/skipClient";
@@ -29,13 +29,15 @@ export const Widget = (props: Props) => {
     setSourceAssetAmount("1");
   }, [destinationAsset, setDestinationAsset, setSourceAsset, setSourceAssetAmount, sourceAsset]);
 
-  return <SwapWidget {...props} key={props.theme.primary.background.normal} />;
+  return useMemo(() => {
+    return <SwapWidget {...props} />;
+  }, [props]);
 };
 
 export const Modal = (props: Props) => {
   return (
     <NiceModal.Provider>
-      <ShowSwapWidget {...props} key={props.theme.primary.background.normal} />
+      <ShowSwapWidget {...props} />
     </NiceModal.Provider>
   );
 };

packages/widget-v2/src/widget/Widget.tsx

@@ -3,12 +3,12 @@ import NiceModal from "@ebay/nice-modal-react";
 import { styled } from "styled-components";
 import { createModal, useModal } from "@/components/Modal";
 import { cloneElement, ReactElement, useEffect } from "react";
-import { PartialTheme } from "./theme";
+import { defaultTheme, PartialTheme } from "./theme";
 import { Router } from "./Router";
 import { useResetAtom } from "jotai/utils";
 import { numberOfModalsOpenAtom } from "@/state/modal";
 import { useSetAtom } from "jotai";
-import { skipClientConfigAtom } from "@/state/skipClient";
+import { skipClientConfigAtom, themeAtom } from "@/state/skipClient";
 import { SkipClientOptions } from "@skip-go/client";
 
 export type SwapWidgetProps = {
@@ -17,9 +17,11 @@ export type SwapWidgetProps = {
 
 export const SwapWidget = ({ theme, ...skipClientConfig }: SwapWidgetProps) => {
   const setSkipClientConfig = useSetAtom(skipClientConfigAtom);
+  const setTheme = useSetAtom(themeAtom);
   useEffect(() => {
     setSkipClientConfig(skipClientConfig);
-  }, [setSkipClientConfig, skipClientConfig]);
+    setTheme({ ...defaultTheme, ...theme });
+  }, [setSkipClientConfig, setTheme, skipClientConfig, theme]);
 
   return (
     <NiceModal.Provider>
@@ -34,9 +36,11 @@ export const SwapWidget = ({ theme, ...skipClientConfig }: SwapWidgetProps) => {
 
 const SwapWidgetWithoutNiceModalProvider = ({ theme, ...skipClientConfig }: SwapWidgetProps) => {
   const setSkipClientConfig = useSetAtom(skipClientConfigAtom);
+  const setTheme = useSetAtom(themeAtom);
   useEffect(() => {
     setSkipClientConfig(skipClientConfig);
-  }, [setSkipClientConfig, skipClientConfig]);
+    setTheme({ ...defaultTheme, ...theme });
+  }, [setSkipClientConfig, setTheme, skipClientConfig, theme]);
 
   return (
     <ShadowDomAndProviders theme={theme}>