Scan: Implement reinvest

CHANGELOG_UNRELEASED.md

@@ -21,6 +21,7 @@
 ### Scan
 
 - (bugs) [\#2927](https://github.com/bandprotocol/bandchain/pull/2927) Fix default tab on Route's search
+- (feat) [\#2854](https://github.com/bandprotocol/bandchain/pull/2854) Implement reinvest
 
 ### Bridges
 

scan/cypress/integration/send_action.spec.js

@@ -96,7 +96,7 @@ describe("Delegation", () => {
   });
 
   it("Should be able to withdraw reward with Carol", () => {
-    cy.get('[id="withdrawRewardContainer"] > button').click().wait(1000);
+    cy.get('[id="withdrawRewardContainer"] > button:nth-of-type(1)').click().wait(1000);
     cy.get('[id="memoInput"]').type("cypress");
     cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
     cy.get('[id="broadcastButtonContainer"] > button').click().wait(1000);
@@ -106,4 +106,16 @@ describe("Delegation", () => {
     );
     cy.get('[id="closeModal"]').click();
   });
+
+  it("Should be able to reinvest with Carol", () => {
+    cy.get('[id="withdrawRewardContainer"] > button:nth-of-type(2)').click().wait(1000);
+    cy.get('[id="memoInput"]').type("cypress");
+    cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
+    cy.get('[id="broadcastButtonContainer"] > button').click().wait(1000);
+    cy.get('[id="successMsgContainer"] > span').should(
+      "contain",
+      "Broadcast transaction success"
+    );
+    cy.get('[id="closeModal"]').click();
+  })
 });

scan/src/components/modal/ValidatorStakingInfo.re

@@ -29,12 +29,11 @@ module ButtonSection = {
     let (_, dispatchModal) = React.useContext(ModalContext.context);
     let validatorInfoSub = ValidatorSub.get(validatorAddress);
 
-    let delegate = () =>
-      dispatchModal(OpenModal(SubmitTx(SubmitMsg.Delegate(validatorAddress))));
+    let delegate = () => validatorAddress->SubmitMsg.Delegate->SubmitTx->OpenModal->dispatchModal;
     let undelegate = () =>
-      dispatchModal(OpenModal(SubmitTx(SubmitMsg.Undelegate(validatorAddress))));
+      validatorAddress->SubmitMsg.Undelegate->SubmitTx->OpenModal->dispatchModal;
     let redelegate = () =>
-      dispatchModal(OpenModal(SubmitTx(SubmitMsg.Redelegate(validatorAddress))));
+      validatorAddress->SubmitMsg.Redelegate->SubmitTx->OpenModal->dispatchModal;
 
     switch (validatorInfoSub) {
     | Data(validatorInfo) =>
@@ -140,9 +139,12 @@ module StakingInfo = {
 
     let allSub = Sub.all3(infoSub, balanceAtStakeSub, unbondingSub);
 
-    let withdrawReward = () =>
-      dispatchModal(OpenModal(SubmitTx(SubmitMsg.WithdrawReward(validatorAddress))));
+    let withdrawReward = () => {
+      validatorAddress->SubmitMsg.WithdrawReward->SubmitTx->OpenModal->dispatchModal;
+    };
 
+    let reinvest = reward =>
+      (validatorAddress, reward)->SubmitMsg.Reinvest->SubmitTx->OpenModal->dispatchModal;
     <>
       <Row.Grid marginBottom=24>
         <Col.Grid>
@@ -187,9 +189,7 @@ module StakingInfo = {
       </Row.Grid>
       <Row.Grid style=Styles.rewardContainer alignItems=Row.Center>
         <Col.Grid>
-          <div
-            className={CssHelper.flexBox(~justify=`spaceBetween, ())}
-            id="withdrawRewardContainer">
+          <div className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
             <div>
               <Heading value="Reward" size=Heading.H5 />
               <VSpacing size={`px(8)} />
@@ -199,18 +199,26 @@ module StakingInfo = {
                | _ => <DisplayBalance.Loading />
                }}
             </div>
-            <Button
-              px=20
-              py=5
-              onClick={_ => withdrawReward()}
-              disabled={
-                switch (allSub) {
-                | Data((_, balanceAtStake, _)) => balanceAtStake.reward.amount <= 0.
-                | _ => true
-                }
-              }>
-              <Text value="Withdraw Reward" weight=Text.Medium nowrap=true block=true />
-            </Button>
+            <div className={CssHelper.flexBox()} id="withdrawRewardContainer">
+              {let (disable, reward) =
+                 switch (allSub) {
+                 | Data((_, balanceAtStake, _)) => (
+                     balanceAtStake.reward.amount <= 0.,
+                     balanceAtStake.reward.amount,
+                   )
+                 | _ => (true, 0.)
+                 };
+
+               <>
+                 <Button px=20 py=5 onClick={_ => withdrawReward()} disabled=disable>
+                   <Text value="Withdraw Reward" weight=Text.Medium nowrap=true block=true />
+                 </Button>
+                 <HSpacing size=Spacing.sm />
+                 <Button px=20 py=5 onClick={_ => reinvest(reward)} disabled=disable>
+                   <Text value="Reinvest" weight=Text.Medium nowrap=true block=true />
+                 </Button>
+               </>}
+            </div>
           </div>
         </Col.Grid>
       </Row.Grid>

scan/src/components/modal/submitTx/ReinvestMsg.re

@@ -0,0 +1,73 @@
+module Styles = {
+  open Css;
+
+  let container = style([paddingBottom(`px(24))]);
+};
+
+[@react.component]
+let make = (~validator, ~amount, ~setMsgsOpt) => {
+  let validatorInfoSub = ValidatorSub.get(validator);
+
+  React.useEffect0(_ => {
+    let msgsOpt = {
+      let%Opt amountValue = Some(amount);
+      Some([|
+        TxCreator.WithdrawReward(validator),
+        TxCreator.Delegate(
+          validator,
+          {amount: amountValue->Js.Math.floor_float->Js.Float.toString, denom: "uband"},
+        ),
+      |]);
+    };
+    setMsgsOpt(_ => msgsOpt);
+    None;
+  });
+
+  <>
+    <div className=Styles.container>
+      <Heading
+        value="Reinvest to"
+        size=Heading.H5
+        marginBottom=8
+        align=Heading.Left
+        weight=Heading.Medium
+      />
+      {switch (validatorInfoSub) {
+       | Data({moniker}) =>
+         <div>
+           <Text value=moniker size=Text.Lg ellipsis=true align=Text.Right />
+           <Text
+             value={"(" ++ validator->Address.toOperatorBech32 ++ ")"}
+             size=Text.Md
+             color=Colors.gray6
+             code=true
+             block=true
+           />
+         </div>
+       | _ => <LoadingCensorBar width=300 height=34 />
+       }}
+    </div>
+    <div className=Styles.container>
+      <Heading
+        value="Current Reward"
+        size=Heading.H5
+        marginBottom=8
+        align=Heading.Left
+        weight=Heading.Medium
+      />
+      <div>
+        <Text
+          value={
+            amount
+            |> Coin.newUBANDFromAmount
+            |> Coin.getBandAmountFromCoin
+            |> Format.fPretty(~digits=6)
+          }
+          code=true
+          size=Text.Lg
+        />
+        <Text value=" BAND" size=Text.Lg code=true />
+      </div>
+    </div>
+  </>;
+};

scan/src/components/modal/submitTx/SubmitTxModal.re

@@ -94,6 +94,7 @@ module SubmitTxStep = {
        | Redelegate(validator) => <RedelegateMsg address={account.address} validator setMsgsOpt />
        | WithdrawReward(validator) =>
          <WithdrawRewardMsg validator setMsgsOpt address={account.address} />
+       | Reinvest(validator, amount) => <ReinvestMsg validator setMsgsOpt amount />
        | Vote(proposalID, proposalName) => <VoteMsg proposalID proposalName setMsgsOpt />
        }}
       <EnhanceTxInput

scan/src/utils/SubmitMsg.re

@@ -4,6 +4,7 @@ type t =
   | Undelegate(Address.t)
   | Redelegate(Address.t)
   | WithdrawReward(Address.t)
+  | Reinvest(Address.t, float)
   | Vote(ID.Proposal.t, string);
 
 let toString =
@@ -13,6 +14,7 @@ let toString =
   | Undelegate(_) => "Undelegate"
   | Redelegate(_) => "Redelegate"
   | WithdrawReward(_) => "Withdraw Reward"
+  | Reinvest(_) => "Reinvest"
   | Vote(_) => "Vote";
 
 let gasLimit =
@@ -21,5 +23,6 @@ let gasLimit =
   | Delegate(_)
   | Undelegate(_)
   | Vote(_)
-  | WithdrawReward(_) => 200000
+  | WithdrawReward(_)
+  | Reinvest(_) => 200000
   | Redelegate(_) => 300000;