feat: add theme support for staking widget

src/pages/stake.tsx

@@ -5,28 +5,37 @@ import {
   SafeAppAccessPolicyTypes,
   SafeAppFeatures,
 } from '@safe-global/safe-gateway-typescript-sdk/dist/types/safe-apps'
-import { useMemo } from 'react'
+import { useEffect, useState } from 'react'
 import AppFrame from '@/components/safe-apps/AppFrame'
 import Disclaimer from '@/components/common/Disclaimer'
 import LegalDisclaimerContent from '@/features/stake/components/LegalDisclaimer'
 import useStakeConsent from '@/features/stake/useStakeConsent'
+import { useDarkMode } from '@/hooks/useDarkMode'
+
+const WIDGET_URL = 'https://widget.devnet.kiln.fi/safe-widget/earn'
+const getWidgetUrl = (isDarkMode: boolean) => `${WIDGET_URL}?theme=${isDarkMode ? 'dark' : 'light'}`
 
 const Swap: NextPage = () => {
-  const appData: SafeAppData = useMemo(
-    () => ({
-      id: 321412441,
-      url: 'https://widget.devnet.kiln.fi/safe-widget/earn',
-      name: 'Stake',
-      iconUrl: './images/common/earn.svg',
-      description: 'Safe Apps',
-      chainIds: ['17000', '11155111', '1', '42161', '137', '56', '8453', '10'],
-      accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
-      tags: ['safe-apps'],
-      features: [SafeAppFeatures.BATCHED_TRANSACTIONS],
-      socialProfiles: [],
-    }),
-    [],
-  )
+  const isDarkMode = useDarkMode()
+  const [appData, setAppData] = useState<SafeAppData>({
+    id: 321412441,
+    url: getWidgetUrl(isDarkMode),
+    name: 'Stake',
+    iconUrl: './images/common/earn.svg',
+    description: 'Safe Apps',
+    chainIds: ['17000', '11155111', '1', '42161', '137', '56', '8453', '10'],
+    accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+    tags: ['safe-apps'],
+    features: [SafeAppFeatures.BATCHED_TRANSACTIONS],
+    socialProfiles: [],
+  })
+
+  useEffect(() => {
+    setAppData((prev) => ({
+      ...prev,
+      url: getWidgetUrl(isDarkMode),
+    }))
+  }, [isDarkMode, setAppData])
 
   const { isConsentAccepted, onAccept } = useStakeConsent()