Scan: Revamp undelegate, redelegate, withdraw reward, vote modal

CHANGELOG_UNRELEASED.md

@@ -27,6 +27,7 @@
 
 ### Scan
 
+- (impv) [\#2766](https://github.com/bandprotocol/bandchain/pull/2766) Revamp undelegate, redelegate, withdraw reward and vote modal
 - (chore) [\#2767](https://github.com/bandprotocol/bandchain/pull/2767) Revamp send token modal
 - (chore) [\#2749](https://github.com/bandprotocol/bandchain/pull/2749) Revamp delegate modal
 - (impv) [\#2727](https://github.com/bandprotocol/bandchain/pull/2727) Revamp connect modal

scan/cypress/integration/send_action.spec.js

@@ -26,7 +26,7 @@ describe("Send", () => {
       .type("band1jrhuqrymzt4mnvgw8cvy3s9zhx3jj0dq30qpte")
       .get('[id="sendAmountInput"]')
       .type("2");
-    cy.get('[id="nextButton"]').contains("Next").click();
+    cy.get('[id="nextButtonContainer"] > button').contains("Next").click();
     cy.get('[id="broadcastButton"]').wait(1000).click();
     cy.get('[id="successMsgContainer"] > span').should(
       "contain",
@@ -46,10 +46,10 @@ describe("Delegation", () => {
     cy.get('[id="validatorDelegationinfoDlegate"] button:nth-of-type(1)')
       .wait(1000)
       .click();
-    cy.get('[id="nextButton"]').wait(1000).should("be.disabled");
+    cy.get('[id="nextButtonContainer"] > button').wait(1000).should("be.disabled");
     cy.get('[id="delegateAmountInput').type("1");
     cy.get('[id="memoInput"]').type("cypress");
-    cy.get('[id="nextButton"]').click().wait(1000);
+    cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
     cy.get('[id="broadcastButton"]').click().wait(1000);
     cy.get('[id="successMsgContainer"] > span').should(
       "contain",
@@ -65,7 +65,7 @@ describe("Delegation", () => {
     cy.get('[id="memoInput"]').type("cypress");
     cy.get('[id="undelegateAmountInput').type("0.5");
     cy.get('[id="memoInput"]').type("cypress");
-    cy.get('[id="nextButton"]').click().wait(1000);
+    cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
     cy.get('[id="broadcastButton"]').click().wait(1000);
     cy.get('[id="successMsgContainer"] > span').should(
       "contain",
@@ -86,7 +86,7 @@ describe("Delegation", () => {
     ).click();
     cy.get('[id="redelegateAmountInput').type("0.5");
     cy.get('[id="memoInput"]').type("cypress");
-    cy.get('[id="nextButton"]').click().wait(1000);
+    cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
     cy.get('[id="broadcastButton"]').click().wait(1000);
     cy.get('[id="successMsgContainer"] > span').should(
       "contain",
@@ -98,7 +98,7 @@ describe("Delegation", () => {
   it("Should be able to withdraw reward with Carol", () => {
     cy.get('[id="withdrawRewardContainer"] > button').click().wait(1000);
     cy.get('[id="memoInput"]').type("cypress");
-    cy.get('[id="nextButton"]').click().wait(1000);
+    cy.get('[id="nextButtonContainer"] > button').click().wait(1000);
     cy.get('[id="broadcastButton"]').click().wait(1000);
     cy.get('[id="successMsgContainer"] > span').should(
       "contain",

scan/src/AppStyle.re

@@ -216,6 +216,12 @@ body {
   background: #FCFCFC;
 }
 
+button, input {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;

scan/src/bindings/ReactSelect.re

@@ -4,9 +4,12 @@ type react_select_option_t = {
 };
 
 [@bs.deriving jsConverter]
-type style_t('a, 'b) = {
+type style_t('a, 'b, 'c, 'd, 'e) = {
   control: 'a => 'a,
   option: 'b => 'b,
+  container: 'c => 'c,
+  singleValue: 'd => 'd,
+  indicatorSeparator: 'e => 'e,
 };
 
 [@bs.obj]
@@ -15,7 +18,7 @@ external makeProps:
     ~value: react_select_option_t,
     ~onChange: 'a => unit,
     ~options: array('a),
-    ~styles: style_t('b, 'c),
+    ~styles: style_t('b, 'c, 'd, 'e, 'f),
     unit
   ) =>
   _ =
@@ -28,6 +31,6 @@ external make:
     "value": react_select_option_t,
     "onChange": 'a => unit,
     "options": array('a),
-    "styles": style_t('b, 'c),
+    "styles": style_t('b, 'c, 'd, 'e, 'f),
   }) =
   "default";

scan/src/components/EnhanceTxInput.re

@@ -87,8 +87,7 @@ let make =
   };
 
   <div className=Styles.container>
-    <Text value=msg size=Text.Md weight=Text.Medium nowrap=true block=true />
-    <VSpacing size=Spacing.sm />
+    <Heading value=msg size=Heading.H5 marginBottom=8 align=Heading.Left weight=Heading.Medium />
     <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
       <input
         id
@@ -127,8 +126,7 @@ module Loading = {
   [@react.component]
   let make = (~msg, ~width) => {
     <div className=Styles.container>
-      <Text value=msg size=Text.Md weight=Text.Medium nowrap=true block=true />
-      <VSpacing size=Spacing.sm />
+      <Heading value=msg size=Heading.H5 marginBottom=8 align=Heading.Left />
       <LoadingCensorBar width height=37 />
     </div>;
   };
@@ -138,8 +136,7 @@ module Loading2 = {
   [@react.component]
   let make = (~msg, ~useMax=false, ~code=false, ~placeholder) => {
     <div className=Styles.container>
-      <Text value=msg size=Text.Md weight=Text.Medium nowrap=true block=true />
-      <VSpacing size=Spacing.sm />
+      <Heading value=msg size=Heading.H5 marginBottom=8 align=Heading.Left />
       <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
         <input
           className={Css.merge([Styles.input, code ? Styles.code : ""])}

scan/src/components/modal/ValidatorStakingInfo.re

@@ -17,6 +17,7 @@ module Styles = {
       borderBottom(`px(1), `solid, Colors.gray9),
       paddingBottom(`px(12)),
       marginBottom(`px(16)),
+      minHeight(`px(41)),
     ]);
   let rewardContainer =
     style([backgroundColor(Colors.profileBG), padding2(~v=`px(16), ~h=`px(24))]);

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

@@ -46,8 +46,13 @@ let make = (~address, ~validator, ~setMsgsOpt) => {
 
   <>
     <div className=Styles.container>
-      <Text value="Delegate To" size=Text.Md weight=Text.Medium nowrap=true block=true />
-      <VSpacing size=Spacing.sm />
+      <Heading
+        value="Delegate to"
+        size=Heading.H5
+        marginBottom=8
+        align=Heading.Left
+        weight=Heading.Medium
+      />
       {switch (allSub) {
        | Data((_, {moniker})) =>
          <div>
@@ -65,8 +70,13 @@ let make = (~address, ~validator, ~setMsgsOpt) => {
        }}
     </div>
     <div className=Styles.container>
-      <Text value="Account Balance" size=Text.Md weight=Text.Medium nowrap=true block=true />
-      <VSpacing size=Spacing.sm />
+      <Heading
+        value="Account Balance"
+        size=Heading.H5
+        marginBottom=8
+        align=Heading.Left
+        weight=Heading.Medium
+      />
       {switch (allSub) {
        | Data(({balance}, _)) =>
          <div>
@@ -91,20 +101,14 @@ let make = (~address, ~validator, ~setMsgsOpt) => {
          setInputData=setAmount
          parse={Parse.getBandAmount(maxValInUband)}
          maxValue={maxValInUband /. 1e6 |> Js.Float.toString}
-         msg="Delegate Amount"
+         msg="Amount"
          placeholder="0.000000"
          inputType="number"
          code=true
          autoFocus=true
          id="delegateAmountInput"
        />;
-     | _ =>
-       <EnhanceTxInput.Loading2
-         msg="Delegate Amount"
-         code=true
-         useMax=true
-         placeholder="0.000000"
-       />
+     | _ => <EnhanceTxInput.Loading2 msg="Amount" code=true useMax=true placeholder="0.000000" />
      }}
   </>;
 };