From 3e76e0adff8afd0e775a5b00d3e8bdd3246249cd Mon Sep 17 00:00:00 2001
From: Jesse Eilers <eitjuh@gmail.com>
Date: Mon, 6 Jun 2022 14:49:41 +0200
Subject: [PATCH] feat/reinvest-feature

---
 package-lock.json                             |  14 +--
 package.json                                  |   2 +-
 src/actionhandler/index.ts                    |   8 ++
 src/components/asset/StakeTableContents.vue   |  33 ++++++
 .../stake/ReinvestForm/ReinvestForm.vue       |  91 +++++++++++++++
 src/components/stake/ReinvestForm/index.ts    |   3 +
 .../wizard/previews/PreviewReinvest.vue       | 108 ++++++++++++++++++
 .../ViewStateReceipt.vue                      |  17 +++
 .../ViewStateReview.vue                       |   3 +
 src/locales/en.json                           |  10 +-
 src/types/actions.ts                          |  15 +++
 src/views/Staking.vue                         |  22 +++-
 12 files changed, 315 insertions(+), 11 deletions(-)
 create mode 100644 src/components/stake/ReinvestForm/ReinvestForm.vue
 create mode 100644 src/components/stake/ReinvestForm/index.ts
 create mode 100644 src/components/wizard/previews/PreviewReinvest.vue

diff --git a/package-lock.json b/package-lock.json
index caad5d641..4ad4397c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,7 +73,7 @@
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
         "@babel/plugin-proposal-optional-chaining": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",
-        "@emeris/types": "^0.3.0",
+        "@emeris/types": "^0.3.1-pr-182-cf34178cb63185e263a2e390db69e9fb3ee86b89.0",
         "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
         "@keplr-wallet/types": "0.8.8",
         "@pinia/testing": "^0.0.10",
@@ -1576,9 +1576,9 @@
       }
     },
     "node_modules/@emeris/types": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emeris/types/-/types-0.3.0.tgz",
-      "integrity": "sha512-LiBp0O2lIUt36kwzVazxpe8LAM+f41HGpKJ9ITipoMjLZjoLLsaWNStVyAgcTMdMMKuFJsXuAC+B6xyDCHKdtg==",
+      "version": "0.3.1-pr-182-cf34178cb63185e263a2e390db69e9fb3ee86b89.0",
+      "resolved": "https://registry.npmjs.org/@emeris/types/-/types-0.3.1-pr-182-cf34178cb63185e263a2e390db69e9fb3ee86b89.0.tgz",
+      "integrity": "sha512-iFyfSl7w79Dj3Qd1BVLGoqHpBcA4ZtevlqIIb0oSvVstP70vlk5XNcIJmnit2VwaCcRWuWriFlN5onokRw6tRg==",
       "dev": true,
       "dependencies": {
         "@sinclair/typebox": "^0.22.1"
@@ -12408,9 +12408,9 @@
       }
     },
     "@emeris/types": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emeris/types/-/types-0.3.0.tgz",
-      "integrity": "sha512-LiBp0O2lIUt36kwzVazxpe8LAM+f41HGpKJ9ITipoMjLZjoLLsaWNStVyAgcTMdMMKuFJsXuAC+B6xyDCHKdtg==",
+      "version": "0.3.1-pr-182-cf34178cb63185e263a2e390db69e9fb3ee86b89.0",
+      "resolved": "https://registry.npmjs.org/@emeris/types/-/types-0.3.1-pr-182-cf34178cb63185e263a2e390db69e9fb3ee86b89.0.tgz",
+      "integrity": "sha512-iFyfSl7w79Dj3Qd1BVLGoqHpBcA4ZtevlqIIb0oSvVstP70vlk5XNcIJmnit2VwaCcRWuWriFlN5onokRw6tRg==",
       "dev": true,
       "requires": {
         "@sinclair/typebox": "^0.22.1"
diff --git a/package.json b/package.json
index caef7682b..f82556b79 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@emeris/types": "^0.3.0",
+    "@emeris/types": "^0.3.1",
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@keplr-wallet/types": "0.8.8",
     "@pinia/testing": "^0.0.10",
diff --git a/src/actionhandler/index.ts b/src/actionhandler/index.ts
index d10fbccc3..3c812c10a 100644
--- a/src/actionhandler/index.ts
+++ b/src/actionhandler/index.ts
@@ -259,6 +259,14 @@ export async function actionHandler(action: Actions.UserAction): Promise<Array<A
           transactions: [{ type: 'claim', status: 'pending', data: action.params }],
         });
         break;
+      case 'reinvest':
+        steps.push({
+          name: 'reinvest',
+          description: 'reinvest',
+          memo: '',
+          transactions: [{ type: 'reinvest', status: 'pending', data: action.params }],
+        });
+        break;
       case 'unstake':
         steps.push({
           name: 'unstake',
diff --git a/src/components/asset/StakeTableContents.vue b/src/components/asset/StakeTableContents.vue
index 633b50d72..f43c6ba8c 100644
--- a/src/components/asset/StakeTableContents.vue
+++ b/src/components/asset/StakeTableContents.vue
@@ -42,6 +42,36 @@
               </div>
             </td>
           </tr>
+          <!-- claim and reinvest rewards -->
+          <tr
+            v-if="totalRewardsAmount && totalRewardsAmount > 1"
+            class="group cursor-pointer shadow-card hover:shadow-dropdown transition-shadow rounded-xl"
+            @click="goStakeActionPage(StakingActions.REINVEST)"
+          >
+            <td class="py-6 flex items-center rounded-l-xl bg-surface">
+              <div class="inline-flex items-center ml-6 mr-4">
+                <img src="@/assets/svg/icons/reward.svg" />
+              </div>
+              <span class="text-left overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+                {{ $t('components.stakeTable.claimAndReinvest') }}
+              </span>
+            </td>
+            <td class="text-right text-muted bg-surface">{{ totalRewardsDisplayAmount }} <Ticker :name="denom" /></td>
+            <td class="text-right font-medium bg-surface">
+              <div class="flex justify-end">
+                +<Price :amount="{ denom: denom, amount: totalRewardsAmount + '' }" :show-dash="false" />
+              </div>
+            </td>
+            <td class="text-right rounded-r-xl bg-surface">
+              <div class="flex justify-end">
+                <Icon
+                  name="CaretRightIcon"
+                  :icon-size="1"
+                  class="ml-1.5 mr-1 px-1 self-stretch text-muted group-hover:text-text transition-colors"
+                />
+              </div>
+            </td>
+          </tr>
 
           <!-- staked validators -->
           <tr v-for="validator of stakingBalances" :key="validator.validator_address" data-cy="validator-row">
@@ -255,6 +285,9 @@ const goStakeActionPage = (action: string, valAddress = '') => {
     case StakingActions.SWITCH:
       router.push(`/staking/${props.denom}/${action}${validatorAddress ? `/${validatorAddress}` : ''}`);
       return;
+    case StakingActions.REINVEST:
+      router.push(`/staking/${props.denom}/${StakingActions.REINVEST}`);
+      return;
     default:
       router.push(`/staking/${props.denom}/${StakingActions.CLAIM}`);
       return;
diff --git a/src/components/stake/ReinvestForm/ReinvestForm.vue b/src/components/stake/ReinvestForm/ReinvestForm.vue
new file mode 100644
index 000000000..7fe38f2c2
--- /dev/null
+++ b/src/components/stake/ReinvestForm/ReinvestForm.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="w-full mx-auto">
+    <template v-if="['review', 'stake'].includes(step)">
+      <TransactionProcessCreator
+        v-if="steps.length"
+        :steps="steps"
+        action="reinvest"
+        @pending="closeModal"
+        @close="closeModal"
+        @previous="emit('previous')"
+      />
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import { EmerisAPI } from '@emeris/types';
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+import { actionHandler } from '@/actionhandler';
+import useChains from '@/composables/useChains';
+import useStaking from '@/composables/useStaking';
+import TransactionProcessCreator from '@/features/transactions/components/TransactionProcessCreator.vue';
+import { GlobalGetterTypes, RootStoreTyped } from '@/store';
+import { ReinvestAction } from '@/types/actions';
+import { event } from '@/utils/analytics';
+
+type Step = 'validator' | 'amount' | 'review' | 'stake';
+
+interface Props {
+  step?: Step;
+  validators: EmerisAPI.Validator[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: undefined,
+  validators: () => {
+    return [];
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:step', value: any): void;
+  (e: 'previous'): void;
+}>();
+
+const steps = ref([]);
+const store = useStore() as RootStoreTyped;
+const router = useRouter();
+
+const { getChainNameByBaseDenom } = useChains();
+const { getStakingRewardsByBaseDenom, getValidatorMoniker } = useStaking();
+
+const propsRef = toRefs(props);
+const chain = computed(() => {
+  return store.getters[GlobalGetterTypes.API.getChain]({
+    chain_name: propsRef.validators.value[0].chain_name,
+  });
+});
+const baseDenom = chain.value?.denoms.find((x) => x.stakable).name;
+
+const step = computed({
+  get: () => props.step,
+  set: (value) => emit('update:step', value),
+});
+
+const closeModal = () => {
+  router.push('/');
+};
+onMounted(async () => {
+  const rewardsData = (await getStakingRewardsByBaseDenom(baseDenom)) as any;
+  const chainName = await getChainNameByBaseDenom(baseDenom);
+  const rewardsDataWithMoniker = rewardsData.rewards.map((reward) => {
+    reward.moniker = getValidatorMoniker(reward.validator_address, propsRef.validators.value);
+    return reward;
+  });
+  const action = {
+    name: 'reinvest',
+    params: { total: rewardsData.total, rewards: rewardsDataWithMoniker, chainName },
+  } as ReinvestAction;
+  event('review_tx', { event_label: 'Reviewing reinvest tx', event_category: 'transactions' });
+  steps.value = await actionHandler(action);
+});
+
+if (!props.step) {
+  step.value = 'review';
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/src/components/stake/ReinvestForm/index.ts b/src/components/stake/ReinvestForm/index.ts
new file mode 100644
index 000000000..da9ee24f3
--- /dev/null
+++ b/src/components/stake/ReinvestForm/index.ts
@@ -0,0 +1,3 @@
+import ReinvestForm from './ReinvestForm.vue';
+
+export default ReinvestForm;
diff --git a/src/components/wizard/previews/PreviewReinvest.vue b/src/components/wizard/previews/PreviewReinvest.vue
new file mode 100644
index 000000000..eaffca016
--- /dev/null
+++ b/src/components/wizard/previews/PreviewReinvest.vue
@@ -0,0 +1,108 @@
+<template>
+  <List>
+    <!-- Total rewards -->
+    <ListItem :label="$t(`components.previews.claim.totalRewards`)">
+      <div class="flex justify-end items-center">
+        <div class="text-right">
+          <AmountDisplay
+            class="font-medium"
+            :class="context === 'widget' ? 'text-0' : 'text-1'"
+            :amount="{ amount: rewardsAmount, denom: baseDenom }"
+          />
+          <div class="block text-muted -text-1" :class="{ 'mt-0.5': context !== 'widget' }">
+            <Price :amount="{ denom: baseDenom, amount: rewardsAmount }" />
+          </div>
+        </div>
+        <CircleSymbol :denom="baseDenom" size="md" class="ml-3" />
+      </div>
+    </ListItem>
+
+    <!-- Validator list -->
+    <ListItem :label="$t(`components.previews.claim.validators`)">
+      <div
+        v-for="vali of validators"
+        :key="vali.validator_address"
+        class="flex justify-end items-center mb-4 last:mb-0"
+      >
+        <div class="text-right">
+          <div class="block text-muted -text-1" :class="{ 'mt-0.5': context !== 'widget' }">
+            <div class="text-text text-0">
+              {{ vali.moniker }}
+            </div>
+            <template v-if="validators.length > 1">
+              <AmountDisplay
+                class="font-medium"
+                :amount="{ amount: parseInt(vali.reward).toString(), denom: baseDenom }"
+              />
+              {{ $t(`components.previews.claim.rewards`) }}
+            </template>
+          </div>
+        </div>
+        <ValidatorBadge :validator="getValidator(vali.validator_address)" class="ml-3" />
+      </div>
+    </ListItem>
+
+    <!-- Transaction fees -->
+    <ListItem :label="$t(`components.previews.claim.transactionFee`)">
+      <div class="flex justify-end items-center">
+        <div class="text-right">
+          <template v-for="(fee, chain) in fees" :key="'fee_' + chain">
+            <template v-for="(feeAmount, denom) in fee" :key="'fee' + chain + denom">
+              <AmountDisplay :amount="{ amount: feeAmount.toString(), denom }" />
+            </template>
+          </template>
+        </div>
+      </div>
+    </ListItem>
+  </List>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useRoute } from 'vue-router';
+
+import AmountDisplay from '@/components/common/AmountDisplay.vue';
+import CircleSymbol from '@/components/common/CircleSymbol.vue';
+import Price from '@/components/common/Price.vue';
+import ValidatorBadge from '@/components/common/ValidatorBadge.vue';
+import { List, ListItem } from '@/components/ui/List';
+import useStaking from '@/composables/useStaking';
+import * as Actions from '@/types/actions';
+import { getSumOfRewards } from '@/utils/basic';
+
+interface Props {
+  step?: Actions.Step;
+  response?: Actions.Step;
+  fees: Actions.FeeTotals;
+  context?: 'default' | 'widget';
+  isReceipt: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: undefined,
+  response: undefined,
+  context: 'default',
+  isReceipt: false,
+});
+
+const route = useRoute();
+const { getValidatorsByBaseDenom } = useStaking();
+
+const baseDenom = route.params.denom as string;
+const validatorList = ref([]);
+const propsRef = toRefs(props);
+const rewardsAmount = computed(() => {
+  return getSumOfRewards(propsRef.step.value.transactions[0].data.total, baseDenom);
+});
+const validators = computed(() => {
+  return propsRef.step.value.transactions[0].data.rewards;
+});
+onMounted(async () => {
+  validatorList.value = await getValidatorsByBaseDenom(baseDenom);
+});
+const getValidator = (val_address) => {
+  return validatorList.value.find((x) => x.operator_address == val_address);
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/features/transactions/components/TransactionProcessViewer/ViewStateReceipt.vue b/src/features/transactions/components/TransactionProcessViewer/ViewStateReceipt.vue
index 37f59c08c..062ba5d02 100644
--- a/src/features/transactions/components/TransactionProcessViewer/ViewStateReceipt.vue
+++ b/src/features/transactions/components/TransactionProcessViewer/ViewStateReceipt.vue
@@ -87,6 +87,16 @@
             />
           </p>
         </template>
+        <template v-if="transaction.type === 'reinvest'">
+          <p class="font-medium text-1">
+            <AmountDisplay
+              :amount="{
+                amount: getStakedAmount(),
+                denom: getStakableBaseDenomFromChainName(transaction.data?.chainName),
+              }"
+            />
+          </p>
+        </template>
         <template v-if="transaction.type === 'swap'">
           <template v-if="isSwapComponent">
             <i18n-t
@@ -271,6 +281,7 @@ import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue';
 import Icon from '@/components/ui/Icon.vue';
 import PreviewAddLiquidity from '@/components/wizard/previews/PreviewAddLiquidity.vue';
 import PreviewClaim from '@/components/wizard/previews/PreviewClaim.vue';
+import PreviewReinvest from '@/components/wizard/previews/PreviewReinvest.vue';
 import PreviewStake from '@/components/wizard/previews/PreviewStake.vue';
 import PreviewSwap from '@/components/wizard/previews/PreviewSwap.vue';
 import PreviewSwitch from '@/components/wizard/previews/PreviewSwitch.vue';
@@ -309,6 +320,7 @@ const titleMap = {
   withdrawLiquidity: t('components.txHandlingModal.withdrawLiqActionComplete'),
   createPool: t('components.txHandlingModal.createPoolActionComplete'),
   claim: t('components.txHandlingModal.claimActionComplete'),
+  reinvest: t('components.txHandlingModal.reinvestActionComplete'),
   switch: t('components.txHandlingModal.switchActionComplete'),
   stake: t('components.txHandlingModal.stakeActionComplete'),
   multistake: t('components.txHandlingModal.stakeActionComplete'),
@@ -324,6 +336,7 @@ const previewComponentMap = {
   multistake: PreviewStake,
   unstake: PreviewUnstake,
   claim: PreviewClaim,
+  reinvest: PreviewReinvest,
   switch: PreviewSwitch,
   addLiquidity: PreviewAddLiquidity,
   withdrawLiquidity: PreviewWithdrawLiquidity,
@@ -375,6 +388,10 @@ const getStakedAmount = () => {
     const baseDenom = getStakableBaseDenomFromChainName(transaction.value.data.chainName);
     return getSumOfRewards(transaction.value.data.total, baseDenom).toString();
   }
+  if (transaction.value.type == 'reinvest') {
+    const baseDenom = getStakableBaseDenomFromChainName(transaction.value.data.chainName);
+    return getSumOfRewards(transaction.value.data.total, baseDenom).toString();
+  }
 };
 
 const getDepositTotal = () => {
diff --git a/src/features/transactions/components/TransactionProcessViewer/ViewStateReview.vue b/src/features/transactions/components/TransactionProcessViewer/ViewStateReview.vue
index 6e1527f9a..4531298ba 100644
--- a/src/features/transactions/components/TransactionProcessViewer/ViewStateReview.vue
+++ b/src/features/transactions/components/TransactionProcessViewer/ViewStateReview.vue
@@ -57,6 +57,7 @@ import Alert from '@/components/ui/Alert.vue';
 import Button from '@/components/ui/Button.vue';
 import PreviewAddLiquidity from '@/components/wizard/previews/PreviewAddLiquidity.vue';
 import PreviewClaim from '@/components/wizard/previews/PreviewClaim.vue';
+import PreviewReinvest from '@/components/wizard/previews/PreviewReinvest.vue';
 import PreviewStake from '@/components/wizard/previews/PreviewStake.vue';
 import PreviewSwap from '@/components/wizard/previews/PreviewSwap.vue';
 import PreviewSwitch from '@/components/wizard/previews/PreviewSwitch.vue';
@@ -90,6 +91,7 @@ const previewComponentMap = {
   withdrawliquidity: PreviewWithdrawLiquidity,
   createpool: PreviewAddLiquidity,
   claim: PreviewClaim,
+  reinvest: PreviewReinvest,
   switch: PreviewSwitch,
 };
 
@@ -104,6 +106,7 @@ const titleMap = {
   withdrawliquidity: t('context.transactions.review.withdrawliquidity'),
   createpool: t('context.transactions.review.createpool'),
   claim: t('context.transactions.review.claim'),
+  reinvest: t('context.transactions.review.reinvest'),
   switch: t('context.transactions.review.switch'),
 };
 
diff --git a/src/locales/en.json b/src/locales/en.json
index e8aa8fcf9..b36ef399d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -165,7 +165,8 @@
           "restake": "Restake",
           "unstake": "Unstake",
           "transfer": "Transfer",
-          "claim": "Claim"
+          "claim": "Claim",
+          "reinvest": "Reinvest"
         }
       },
       "stakeTable": {
@@ -181,6 +182,7 @@
         "selectValidator": "Select a validator",
         "searchValidator": "Search validators",
         "claimRewards": "Claim rewards",
+        "claimAndReinvest": "Claim and reinvest",
         "stake": "Stake",
         "unstake": "Unstake",
         "switchValidator": "Switch validator",
@@ -415,6 +417,12 @@
           "transactionFee": "Transaction fee",
           "rewards": "rewards"
         },
+        "reinvest": {
+          "totalRewards": "Total rewards",
+          "validators": "Validators",
+          "transactionFee": "Transaction fee",
+          "rewards": "rewards"
+        },
         "stake": {
           "stakeLbl": "Stake",
           "validatorsLbl": "Validators",
diff --git a/src/types/actions.ts b/src/types/actions.ts
index 9e0572430..64fb1db14 100644
--- a/src/types/actions.ts
+++ b/src/types/actions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { AminoMsg } from '@cosmjs/amino';
 import { Registry } from '@cosmjs/proto-signing';
 import { EmerisBase, EmerisTransactions } from '@emeris/types';
@@ -41,6 +42,13 @@ export type ClaimRewardsParams = {
   total: string;
   chainName: string;
 };
+
+export type ReinvestParams = {
+  rewards: { validator_address: string; reward: string }[];
+  total: string;
+  chainName: string;
+};
+
 export type StakeParams = {
   validatorAddress: string;
   amount: EmerisBase.ChainAmount;
@@ -67,6 +75,7 @@ export type TransferAction = BaseAction & { name: 'transfer'; params: TransferPa
 export type MemoTransferAction = BaseAction & { name: 'memo-transfer'; params: TransferParams };
 export type CreatePoolAction = BaseAction & { name: 'createpool'; params: CreatePoolParams };
 export type ClaimRewardsAction = BaseAction & { name: 'claim'; params: ClaimRewardsParams };
+export type ReinvestAction = BaseAction & { name: 'reinvest'; params: ReinvestParams };
 export type MultiStakeAction = BaseAction & { name: 'multistake'; params: MultiStakeParams };
 export type StakeAction = BaseAction & { name: 'stake'; params: StakeParams };
 export type UnstakeAction = BaseAction & { name: 'unstake'; params: UnstakeParams };
@@ -81,6 +90,7 @@ export type UserAction =
   | CreatePoolAction
   | MoveAction
   | ClaimRewardsAction
+  | ReinvestAction
   | StakeAction
   | MultiStakeAction
   | UnstakeAction
@@ -172,6 +182,7 @@ export type AddLiqStepTx = BaseStepTx & EmerisTransactions.AbstractAddLiquidityT
 export type WithdrawLiqStepTx = BaseStepTx & EmerisTransactions.AbstractWithdrawLiquidityTransaction;
 export type CreatePoolStepTx = BaseStepTx & EmerisTransactions.AbstractCreatePoolTransaction;
 export type ClaimStepTx = BaseStepTx & EmerisTransactions.AbstractClaimRewardsTransaction;
+export type ReinvestStepTx = BaseStepTx & EmerisTransactions.AbstractReinvestTransaction;
 export type StakeStepTx = BaseStepTx & EmerisTransactions.AbstractStakeTransaction;
 export type UnstakeStepTx = BaseStepTx & EmerisTransactions.AbstractUnstakeTransaction;
 export type RestakeStepTx = BaseStepTx & EmerisTransactions.AbstractRestakeTransaction;
@@ -184,6 +195,7 @@ export type StepTransaction =
   | WithdrawLiqStepTx
   | CreatePoolStepTx
   | ClaimStepTx
+  | ReinvestStepTx
   | StakeStepTx
   | UnstakeStepTx
   | RestakeStepTx;
@@ -197,6 +209,7 @@ export type Step = {
     | 'createpool'
     | 'move'
     | 'claim'
+    | 'reinvest'
     | 'stake'
     | 'unstake'
     | 'switch';
@@ -288,6 +301,7 @@ export enum StakingActions {
   UNSTAKE = 'unstake',
   SWITCH = 'switch',
   CLAIM = 'claim',
+  REINVEST = 'reinvest',
 }
 export enum StakingActionSteps {
   VALIDATOR = 'Validator',
@@ -298,6 +312,7 @@ export enum StakingActionSteps {
   UNSTAKE = 'Unstake',
   TRANSFER = 'Transfer',
   CLAIM = 'Claim',
+  REINVEST = 'Reinvest',
 }
 export type ActionStepResult = {
   steps: StepTransaction[];
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index fc163f201..22396c263 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -41,6 +41,16 @@
             />
           </div>
         </template>
+        <template v-if="actionType == 'reinvest'">
+          <div class="w-full" :class="{ 'mt-0 mb-auto': step == 'validator' }">
+            <ReinvestForm
+              v-if="validatorList.length > 0"
+              v-model:step="step"
+              :validators="validatorList"
+              @previous="goBack"
+            />
+          </div>
+        </template>
         <template v-if="actionType == 'switch'">
           <div class="w-full" :class="{ 'mt-0 mb-auto': step == 'validator' }">
             <SwitchForm
@@ -86,6 +96,7 @@ import { useMeta } from 'vue-meta';
 import { useRoute, useRouter } from 'vue-router';
 
 import ClaimForm from '@/components/stake/ClaimForm/ClaimForm.vue';
+import ReinvestForm from '@/components/stake/ReinvestForm/ReinvestForm.vue';
 import StakeForm from '@/components/stake/StakeForm';
 import SwitchForm from '@/components/stake/SwitchForm/SwitchForm.vue';
 import UnstakeForm from '@/components/stake/UnstakeForm';
@@ -99,7 +110,7 @@ import { useTransactionsStore } from '@/features/transactions/transactionsStore'
 import { pageview } from '@/utils/analytics';
 import { keyHashfromAddress } from '@/utils/basic';
 
-type ActionType = 'stake' | 'unstake' | 'claim' | 'switch';
+type ActionType = 'stake' | 'unstake' | 'claim' | 'switch' | 'reinvest';
 
 const { t } = useI18n({ useScope: 'global' });
 const router = useRouter();
@@ -111,7 +122,12 @@ const actionType = route.params.action as ActionType;
 const validator = route.params.validator as string;
 const baseDenom = route.params.denom as string;
 const rawValidatorList = ref([]);
-const step = actionType == 'claim' ? ref('review') : actionType == 'unstake' ? ref('amount') : ref('validator');
+const step =
+  actionType == 'claim' || actionType == 'reinvest'
+    ? ref('review')
+    : actionType == 'unstake'
+    ? ref('amount')
+    : ref('validator');
 const inModal = ref(undefined);
 const { getChainNameByBaseDenom } = useChains();
 
@@ -166,6 +182,7 @@ const isBackDisabled = computed(() => {
   return (
     (step.value === 'validator' && !inModal.value) ||
     (actionType === 'claim' && step.value === 'review') ||
+    (actionType === 'reinvest' && step.value === 'review') ||
     (actionType === 'unstake' && step.value === 'amount')
   );
 });
@@ -174,6 +191,7 @@ const allSteps = {
   unstake: ['amount', 'review', 'unstake'],
   switch: ['validator', 'amount', 'review', 'restake'],
   claim: ['review', 'claim'],
+  reinvest: ['review', 'reinvest'],
 };
 
 const currentStepIndex = computed(() => allSteps[actionType]?.indexOf(step.value));