Skip to content

Commit 7d796f5

Browse files
committed
Dashboard: Fix theme for BuyWidget in chain page (#7583)
<!-- ## 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 -->
1 parent a5bb361 commit 7d796f5

File tree

1 file changed

+4
-0
lines changed
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client

1 file changed

+4
-0
lines changed

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
"use client";
2+
import { useTheme } from "next-themes";
23
import { defineChain, type ThirdwebClient } from "thirdweb";
34
import type { ChainMetadata } from "thirdweb/chains";
45
import { BuyWidget } from "thirdweb/react";
6+
import { getSDKTheme } from "@/utils/sdk-component-theme";
57

68
export function BuyFundsSection(props: {
79
chain: ChainMetadata;
810
client: ThirdwebClient;
911
}) {
12+
const { theme } = useTheme();
1013
return (
1114
<section className="flex flex-col gap-4 items-center justify-center">
1215
<BuyWidget
1316
amount="0"
1417
// eslint-disable-next-line no-restricted-syntax
1518
chain={defineChain(props.chain.chainId)}
1619
client={props.client}
20+
theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
1721
/>
1822
</section>
1923
);

0 commit comments

Comments
 (0)