refactor: earn flow + remove xstate/store

package.json

@@ -23,11 +23,5 @@
     "husky": "catalog:",
     "rev-dep": "catalog:",
     "turbo": "catalog:"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "purify-ts": "patches/purify-ts.patch",
-      "@stakekit/rainbowkit@2.2.11": "patches/@stakekit__rainbowkit@2.2.11.patch"
-    }
   }
 }

packages/widget/package.json

@@ -75,6 +75,7 @@
     "@cosmos-kit/keplr": "catalog:",
     "@cosmos-kit/leap": "catalog:",
     "@cosmos-kit/walletconnect": "catalog:",
+    "@effect/atom-react": "catalog:",
     "@effect/openapi-generator": "catalog:",
     "@effect/platform-node": "catalog:",
     "@faker-js/faker": "catalog:",
@@ -117,7 +118,6 @@
     "@vitejs/plugin-react": "catalog:",
     "@vitest/browser-playwright": "catalog:",
     "@xstate/react": "catalog:",
-    "@xstate/store": "catalog:",
     "autoprefixer": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "bignumber.js": "catalog:",

packages/widget/src/Dashboard.tsx

@@ -6,7 +6,6 @@ import { PendingCompletePage } from "./pages/complete/pages/pending-complete.pag
 import { StakeCompletePage } from "./pages/complete/pages/stake-complete.page";
 import { UnstakeCompletePage } from "./pages/complete/pages/unstake-complete.page";
 import { EarnPageContextProvider } from "./pages/details/earn-page/state/earn-page-context";
-import { EarnPageStateUsageBoundaryProvider } from "./pages/details/earn-page/state/earn-page-state-context";
 import { StakeReviewPage } from "./pages/review";
 import { PendingReviewPage } from "./pages/review/pages/pending-review.page";
 import { UnstakeReviewPage } from "./pages/review/pages/unstake-review.page";
@@ -40,77 +39,73 @@ export const Dashboard = () => {
 
   return (
     <DashboardProvider>
-      <EarnPageStateUsageBoundaryProvider>
-        <EarnPageContextProvider
-          registerFooterButton={registerEarnFooterButton}
-        >
-          <Routes>
-            <Route element={<DashboardWrapper />}>
-              {/* Earn Tab */}
-              <Route element={<OverviewPage />}>
-                <Route index element={<EarnPageContent />} />
+      <EarnPageContextProvider registerFooterButton={registerEarnFooterButton}>
+        <Routes>
+          <Route element={<DashboardWrapper />}>
+            {/* Earn Tab */}
+            <Route element={<OverviewPage />}>
+              <Route index element={<EarnPageContent />} />
 
-                <Route element={<ConnectedCheck />}>
-                  <Route path="review" element={<StakeReviewPage />} />
-                  <Route path="steps" element={<StakeStepsPage />} />
-                  <Route path="complete" element={<StakeCompletePage />} />
-                </Route>
+              <Route element={<ConnectedCheck />}>
+                <Route path="review" element={<StakeReviewPage />} />
+                <Route path="steps" element={<StakeStepsPage />} />
+                <Route path="complete" element={<StakeCompletePage />} />
               </Route>
+            </Route>
 
-              {/* Manage Tab */}
-              <Route path="manage" element={<ManagePage />} />
+            {/* Manage Tab */}
+            <Route path="manage" element={<ManagePage />} />
 
-              {/* Position Details */}
-              <Route
-                path="positions/:integrationId/:balanceId"
-                element={<PositionDetailsPage />}
-              >
-                <Route index element={<PositionDetailsStakeActions />} />
+            {/* Position Details */}
+            <Route
+              path="positions/:integrationId/:balanceId"
+              element={<PositionDetailsPage />}
+            >
+              <Route index element={<PositionDetailsStakeActions />} />
 
-                {/* Staking */}
-                <Route path="stake">
-                  <Route index element={<PositionDetailsStakeActions />} />
-                  <Route path="review" element={<StakeReviewPage />} />
-                  <Route path="steps" element={<StakeStepsPage />} />
-                  <Route path="complete" element={<StakeCompletePage />} />
-                </Route>
+              {/* Staking */}
+              <Route path="stake">
+                <Route index element={<PositionDetailsStakeActions />} />
+                <Route path="review" element={<StakeReviewPage />} />
+                <Route path="steps" element={<StakeStepsPage />} />
+                <Route path="complete" element={<StakeCompletePage />} />
+              </Route>
 
-                <Route
-                  path="select-validator/:pendingActionType"
-                  element={<PositionDetailsPage />}
-                />
+              <Route
+                path="select-validator/:pendingActionType"
+                element={<PositionDetailsPage />}
+              />
 
-                {/* Unstaking */}
-                <Route path="unstake">
-                  <Route index element={<PositionDetailsActions />} />
-                  <Route path="review" element={<UnstakeReviewPage />} />
-                  <Route path="steps" element={<UnstakeStepsPage />} />
-                  <Route path="complete" element={<UnstakeCompletePage />} />
-                </Route>
+              {/* Unstaking */}
+              <Route path="unstake">
+                <Route index element={<PositionDetailsActions />} />
+                <Route path="review" element={<UnstakeReviewPage />} />
+                <Route path="steps" element={<UnstakeStepsPage />} />
+                <Route path="complete" element={<UnstakeCompletePage />} />
+              </Route>
 
-                {/* Pending Actions */}
-                <Route path="pending-action">
-                  <Route path="review" element={<PendingReviewPage />} />
-                  <Route path="steps" element={<PendingStepsPage />} />
-                  <Route path="complete" element={<PendingCompletePage />} />
-                </Route>
+              {/* Pending Actions */}
+              <Route path="pending-action">
+                <Route path="review" element={<PendingReviewPage />} />
+                <Route path="steps" element={<PendingStepsPage />} />
+                <Route path="complete" element={<PendingCompletePage />} />
               </Route>
+            </Route>
 
-              {/* Rewards Tab */}
-              {/* <Route path="rewards" element={<RewardsTabPage />} /> */}
+            {/* Rewards Tab */}
+            {/* <Route path="rewards" element={<RewardsTabPage />} /> */}
 
-              {/* Activity Tab */}
-              <Route path="activity" element={<ActivityTabPage />}>
-                <Route index element={<ActivityDetailsPage />} />
-                <Route
-                  path=":pendingActionType/steps"
-                  element={<ActivityStepsPage />}
-                />
-              </Route>
+            {/* Activity Tab */}
+            <Route path="activity" element={<ActivityTabPage />}>
+              <Route index element={<ActivityDetailsPage />} />
+              <Route
+                path=":pendingActionType/steps"
+                element={<ActivityStepsPage />}
+              />
             </Route>
-          </Routes>
-        </EarnPageContextProvider>
-      </EarnPageStateUsageBoundaryProvider>
+          </Route>
+        </Routes>
+      </EarnPageContextProvider>
 
       <GlobalModals />
     </DashboardProvider>

packages/widget/src/components/molecules/select-validator/index.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from "react";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import type { Validator, ValidatorKey } from "../../../domain/types/validators";
 import type { Yield } from "../../../domain/types/yields";
-import type { ValidatorDto } from "../../../generated/api/yield";
 import { Box } from "../../atoms/box";
 import type { SelectModalProps } from "../../atoms/select-modal";
 import { SelectModal } from "../../atoms/select-modal";
@@ -16,13 +16,13 @@ type SelectValidatorProps = PropsWithChildren<
     SelectModalProps,
     "isLoading" | "onClose" | "onOpen" | "state" | "trigger"
   > & {
-    selectedValidators: Set<ValidatorDto["address"]>;
-    onItemClick: (item: ValidatorDto) => void;
+    selectedValidators: Set<ValidatorKey>;
+    onItemClick: (item: Validator) => void;
     onViewMoreClick?: () => void;
     onLoadMore?: () => void;
     hasMore?: boolean;
     isLoadingMore?: boolean;
-    validators: ValidatorDto[];
+    validators: Validator[];
     selectedStake: Yield;
     multiSelect: boolean;
   } & (
@@ -71,7 +71,7 @@ export const SelectValidator = ({
   const showExpandedValidators = multiSelect || hasRequestedMoreValidators;
 
   const data = useMemo<{
-    tableData: ValidatorDto[];
+    tableData: Validator[];
     groupedItems: GroupedItem[];
     groupCounts: number[];
   }>(() => {
@@ -106,11 +106,11 @@ export const SelectValidator = ({
       },
       {
         preferred: {
-          items: [] as ValidatorDto[],
+          items: [] as Validator[],
           label: t("details.validators_preferred"),
         },
         other: {
-          items: [] as ValidatorDto[],
+          items: [] as Validator[],
           label: t("details.validators_other"),
         },
       }

packages/widget/src/components/molecules/select-validator/select-validator-list.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps } from "react";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
+import type { Validator, ValidatorKey } from "../../../domain/types/validators";
 import type { Yield } from "../../../domain/types/yields";
-import type { ValidatorDto } from "../../../generated/api/yield";
 import { vars } from "../../../styles/theme/contract.css";
 import {
   getRewardRateFormatted,
@@ -31,7 +31,7 @@ import {
   validatorVirtuosoContainer,
 } from "./styles.css";
 
-export type GroupedItem = { items: ValidatorDto[]; label: string };
+export type GroupedItem = { items: Validator[]; label: string };
 
 export const SelectValidatorList = ({
   multiSelect,
@@ -44,11 +44,11 @@ export const SelectValidatorList = ({
   tableData,
 }: {
   multiSelect: boolean;
-  selectedValidators: Set<ValidatorDto["address"]>;
-  onItemClick: (item: ValidatorDto) => void;
+  selectedValidators: Set<ValidatorKey>;
+  onItemClick: (item: Validator) => void;
   onViewMoreClick: () => void;
   selectedStake: Yield;
-  tableData: ValidatorDto[];
+  tableData: Validator[];
   groupedItems: GroupedItem[];
   groupCounts: number[];
 }) => {
@@ -100,7 +100,7 @@ export const SelectValidatorList = ({
 
         const status = item.status;
 
-        const itemSelected = selectedValidators.has(item.address);
+        const itemSelected = selectedValidators.has(item.key);
 
         const _onItemClick: ComponentProps<
           typeof SelectModalItem
@@ -115,7 +115,7 @@ export const SelectValidatorList = ({
           <SelectModalItemContainer>
             <SelectModalItem
               onItemClick={_onItemClick}
-              testId={item.address}
+              testId={item.key}
               selected={!multiSelect && itemSelected}
             >
               <Box flex={1} display="flex" flexDirection="column" gap="3">
@@ -135,7 +135,7 @@ export const SelectValidatorList = ({
                       justifyContent="center"
                       alignItems="center"
                     >
-                      {selectedValidators.has(item.address) ? (
+                      {itemSelected ? (
                         <CheckSteps hw={16} color={vars.color.white} />
                       ) : null}
                     </Box>

packages/widget/src/domain/types/action.ts

@@ -17,8 +17,6 @@ export type TransactionStatus = TransactionDto["status"];
 
 export type YieldCreateActionDto = YieldCreateActionDtoGenerated;
 export type YieldCreateManageActionDto = YieldCreateManageActionDtoGenerated;
-export type YieldActionDto = ActionDto;
-export type YieldTransactionDto = TransactionDto;
 type TransactionGasEstimate = {
   amount: string;
   gasLimit?: string;