refactor: use useMedia instead of window.matchMedia

osmosis-labs · Jan 10, 2025 · ee2efe1 · ee2efe1
1 parent 4be0212
commit ee2efe1
Showing 1 changed file with 3 additions and 5 deletions.
diff --git a/packages/web/integrations/moonpay/index.tsx b/packages/web/integrations/moonpay/index.tsx
@@ -1,7 +1,8 @@
 import { apiClient } from "@osmosis-labs/utils";
 import { observer } from "mobx-react-lite";
 import dynamic from "next/dynamic";
-import { FunctionComponent, useMemo } from "react";
+import { FunctionComponent } from "react";
+import { useMedia } from "react-use";
 
 import { MoonpaySignUrlResponse } from "~/integrations/moonpay/types";
 import { ModalBaseProps } from "~/modals";
@@ -31,10 +32,7 @@ export const Moonpay: FunctionComponent<
 > = observer(({ assetKey, isOpen }) => {
   const { chainStore, accountStore } = useStore();
 
-  const prefersDark = useMemo(
-    () => window.matchMedia("(prefers-color-scheme: dark)").matches,
-    []
-  );
+  const prefersDark = useMedia("(prefers-color-scheme: dark)");
 
   const account = accountStore.getWallet(chainStore.osmosis.chainId);