feat: add staking widget on dashboard

src/components/dashboard/index.tsx

@@ -18,6 +18,7 @@ import css from './styles.module.css'
 import SwapWidget from '@/features/swap/components/SwapWidget'
 import useIsSwapFeatureEnabled from '@/features/swap/hooks/useIsSwapFeatureEnabled'
 import { useSafeTokenEnabled } from '@/hooks/useSafeTokenEnabled'
+import StakingDashboardWidget from '@/features/stake/components/StakeDashboardWidget'
 
 const RecoveryHeader = dynamic(() => import('@/features/recovery/components/RecoveryHeader'))
 
@@ -68,6 +69,10 @@ const Dashboard = (): ReactElement => {
               <PendingTxsList />
             </Grid>
 
+            <Grid item xs={12}>
+              <StakingDashboardWidget />
+            </Grid>
+
             {showSafeApps && (
               <Grid item xs={12} lg={showRecoveryWidget ? 12 : 6}>
                 <FeaturedApps stackedLayout={!showRecoveryWidget} />

src/features/stake/components/StakeDashboardWidget/index.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react'
+import AppFrame from '@/components/safe-apps/AppFrame'
+import { getEmptySafeApp } from '@/components/safe-apps/utils'
+import { useGetStakeWidgetUrl } from '@/features/stake/hooks/useGetStakeWidgetUrl'
+import { widgetAppData } from '@/features/stake/constants'
+
+const StakingDashboardWidget = () => {
+  const url = useGetStakeWidgetUrl('', 'overview') + '&interactive=false&navigation=none&widget_width=full'
+
+  const appData = useMemo(
+    () => ({
+      ...getEmptySafeApp(),
+      ...widgetAppData,
+      url,
+    }),
+    [url],
+  )
+
+  return (
+    <AppFrame
+      appUrl={appData.url}
+      allowedFeaturesList="clipboard-read; clipboard-write"
+      safeAppFromManifest={appData}
+      isNativeEmbed
+    />
+  )
+}
+
+export default StakingDashboardWidget

src/features/stake/components/StakePage/index.tsx

@@ -13,7 +13,7 @@ const StakePage = () => {
   return (
     <>
       {isConsentAccepted === undefined ? null : isConsentAccepted ? (
-        <StakingWidget asset={String(asset)} />
+        <StakingWidget asset={String(asset ? asset : '')} />
       ) : (
         <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
           <Disclaimer

src/features/stake/constants.ts

@@ -1,7 +1,7 @@
 export const STAKE_TITLE = 'Stake'
 
-export const WIDGET_PRODUCTION_URL = 'https://safe.widget.kiln.fi/earn'
-export const WIDGET_TESTNET_URL = 'https://safe.widget.testnet.kiln.fi/earn'
+export const WIDGET_PRODUCTION_URL = 'https://safe.widget.kiln.fi'
+export const WIDGET_TESTNET_URL = 'https://safe.widget.testnet.kiln.fi'
 
 export const widgetAppData = {
   url: WIDGET_PRODUCTION_URL,

src/features/stake/hooks/useGetStakeWidgetUrl.ts

@@ -4,7 +4,7 @@ import useChains from '@/hooks/useChains'
 import { useMemo } from 'react'
 import { WIDGET_PRODUCTION_URL, WIDGET_TESTNET_URL } from '@/features/stake/constants'
 
-export const useGetStakeWidgetUrl = (asset?: string) => {
+export const useGetStakeWidgetUrl = (asset?: string, tab = 'earn') => {
   let url = WIDGET_PRODUCTION_URL
   const isDarkMode = useDarkMode()
   const currentChainId = useChainId()
@@ -13,6 +13,9 @@ export const useGetStakeWidgetUrl = (asset?: string) => {
   if (testChains.some((chain) => chain.chainId === currentChainId)) {
     url = WIDGET_TESTNET_URL
   }
+
+  url = `${url}/${tab}`
+
   const params = new URLSearchParams()
   params.append('theme', isDarkMode ? 'dark' : 'light')