feat: dashboard connect wallet info

.changeset/common-onions-cry.md

@@ -0,0 +1,5 @@
+---
+"@stakekit/widget": patch
+---
+
+feat: dashboard connect wallet info

packages/widget/src/pages-dashboard/overview/positions/positions.page.tsx

@@ -20,12 +20,28 @@ export const PositionsPage = () => {
 
   const { isConnected, isConnecting } = useSKWallet();
 
+  const { t } = useTranslation();
+
   const content = useMemo(() => {
     if (positionsData.isLoading && positionsData.isFetching && isConnected) {
       return <FallbackContent type="spinner" />;
     }
     if (!isConnected && !isConnecting) {
-      return <FallbackContent type="not_connected" />;
+      return (
+        <Box
+          display="flex"
+          flex={1}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text
+            variant={{ weight: "medium", size: "large" }}
+            textAlign="center"
+          >
+            {t("dashboard.details.positions_connect_wallet")}
+          </Text>
+        </Box>
+      );
     }
     if (positionsData.isError && !positionsData.data.length) {
       return <FallbackContent type="something_wrong" />;
@@ -39,10 +55,9 @@ export const PositionsPage = () => {
     positionsData.isError,
     positionsData.isFetching,
     positionsData.isLoading,
+    t,
   ]);
 
-  const { t } = useTranslation();
-
   return (
     <Box className={container} display="flex" flex={1} flexDirection="column">
       {content}

packages/widget/src/pages-dashboard/overview/positions/styles.css.ts

@@ -47,6 +47,7 @@ export const viaText = style({
 
 export const container = style({
   minHeight: "300px",
+  height: "100%",
 });
 
 export const headerContainer = style({

packages/widget/src/pages/details/activity-page/hooks/use-activity-page.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Box } from "../../../../components/atoms/box";
 import { ContentLoaderSquare } from "../../../../components/atoms/content-loader";
+import { Text } from "../../../../components/atoms/typography/text";
 import { useTrackPage } from "../../../../hooks/tracking/use-track-page";
 import { useSKWallet } from "../../../../providers/sk-wallet";
 import { FallbackContent } from "../../positions-page/components/fallback-content";
@@ -16,9 +18,25 @@ export const useActivityPage = () => {
 
   const allData = activityActions.allItems;
 
+  const { t } = useTranslation();
+
   const content = useMemo(() => {
     if (!isConnected && !isConnecting) {
-      return <FallbackContent type="not_connected" />;
+      return (
+        <Box
+          display="flex"
+          flex={1}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text
+            variant={{ weight: "medium", size: "large" }}
+            textAlign="center"
+          >
+            {t("dashboard.details.activity_connect_wallet")}
+          </Text>
+        </Box>
+      );
     }
 
     if (isConnected && !allData?.length && !activityActions.isPending) {
@@ -50,6 +68,7 @@ export const useActivityPage = () => {
     allData,
     activityActions.isPending,
     activityActions.isFetchingNextPage,
+    t,
   ]);
 
   return {

packages/widget/src/translation/English/translations.json

@@ -157,7 +157,9 @@
       "positions_yield": "Yield",
       "positions_reward_rate": "Reward Rate",
       "positions_amount": "Amount",
-      "positions_rewards": "Rewards"
+      "positions_rewards": "Rewards",
+      "positions_connect_wallet": "Connect wallet to see your positions",
+      "activity_connect_wallet": "Connect wallet to see your activity"
     },
     "position_details_info": {
       "balances": "Balances"