From 7d796f5aa5cc7774879b96f72aa1f10306f620cc Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 10 Jul 2025 19:57:29 +0000
Subject: [PATCH] Dashboard: Fix theme for BuyWidget in chain page (#7583)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `BuyFundsSection` component by integrating theme support for the `BuyWidget` using the `useTheme` hook from `next-themes`. It adjusts the widget's theme based on the current application theme.

### Detailed summary
- Added `useTheme` hook to access the current theme.
- Imported `getSDKTheme` utility for theme handling.
- Passed the correct theme to the `BuyWidget` based on whether the theme is "dark" or "light".

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * The Buy Funds section now adapts its appearance based on your selected theme (light or dark), providing a more consistent and personalized user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../(chainPage)/components/client/BuyFundsSection.tsx         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
index 5943195dcc0..97eae2dd01d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
@@ -1,12 +1,15 @@
 "use client";
+import { useTheme } from "next-themes";
 import { defineChain, type ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { BuyWidget } from "thirdweb/react";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
 
 export function BuyFundsSection(props: {
   chain: ChainMetadata;
   client: ThirdwebClient;
 }) {
+  const { theme } = useTheme();
   return (
     <section className="flex flex-col gap-4 items-center justify-center">
       <BuyWidget
@@ -14,6 +17,7 @@ export function BuyFundsSection(props: {
         // eslint-disable-next-line no-restricted-syntax
         chain={defineChain(props.chain.chainId)}
         client={props.client}
+        theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
       />
     </section>
   );