Merge pull request #2974 from luniehq/mario/2965-set-max-button

Mario/2965 set max button pending changes

changes/mario_2965-set-max-button

@@ -0,0 +1 @@
+[Fixed] [#2965](https://github.com/cosmos/lunie/issues/2965) Change Set Max button style to secondary, fixed bug in warning message. @mariopino

src/ActionModal/components/ActionModal.vue

@@ -773,18 +773,6 @@ export default {
  display: inline-block;
 }
 
-.form-message.notice {
- border-radius: 0.25rem;
- border: 1px solid var(--bc-dim);
- background-color: #1c223e;
- font-weight: 300;
- margin: 2rem 0;
- padding: 1rem 1rem;
- font-size: 14px;
- font-style: normal;
- width: 100%;
-}
-
 .slide-fade-enter-active {
  transition: all 0.1s ease;
 }

src/ActionModal/components/DelegationModal.vue

@@ -49,7 +49,7 @@
  field-id="amount"
  field-label="Amount"
  >
- <!-- <span class="input-suffix">{{ denom | viewDenom }}</span> -->
+ <span class="input-suffix-denom">{{ viewDenom(denom) }}</span>
  <TmFieldGroup>
  <TmField
  id="amount"
@@ -61,7 +61,8 @@
  @keyup.enter.native="enterPressed"
  />
  <TmBtn
- type="addon-max"
+ type="button"
+ class="secondary addon-max"
  value="Set Max"
  @click.native="setMaxAmount()"
  />
@@ -99,10 +100,12 @@
  name="Amount"
  type="between"
  />
- <p v-if="isMaxAmount() && !isRedelegation()" class="form-message notice">
- You are about to use all your tokens for this transaction. Consider
- leaving a little bit left over to cover the network fees.
- </p>
+ <TmFormMsg
+ v-else-if="isMaxAmount() && !isRedelegation()"
+ msg="You are about to use all your tokens for this transaction. Consider leaving a little bit left over to cover the network fees."
+ type="custom"
+ class="tm-form-msg--desc"
+ />
  </TmFormGroup>
  </ActionModal>
 </template>
@@ -229,7 +232,7 @@ export default {
  this.amount = atoms(this.balance)
  },
  isMaxAmount() {
- return this.amount === atoms(this.balance)
+ return parseFloat(this.amount) === parseFloat(atoms(this.balance))
  },
  enterPressed() {
  this.$refs.actionModal.validateChangeStep()

src/ActionModal/components/SendModal.vue

@@ -59,6 +59,7 @@
  field-id="amount"
  field-label="Amount"
  >
+ <span class="input-suffix-denom">{{ viewDenom(denom) }}</span>
  <TmFieldGroup>
  <TmField
  id="amount"
@@ -70,7 +71,8 @@
  @keyup.enter.native="enterPressed"
  />
  <TmBtn
- type="addon-max"
+ type="button"
+ class="secondary addon-max"
  value="Set Max"
  @click.native="setMaxAmount()"
  />
@@ -98,10 +100,12 @@
  name="Amount"
  type="between"
  />
- <p v-if="isMaxAmount()" class="form-message notice max-notice">
- You are about to use all your tokens for this transaction. Consider
- leaving a little bit left over to cover the network fees.
- </p>
+ <TmFormMsg
+ v-else-if="isMaxAmount()"
+ msg="You are about to use all your tokens for this transaction. Consider leaving a little bit left over to cover the network fees."
+ type="custom"
+ class="tm-form-msg--desc max-message"
+ />
  </TmFormGroup>
  <TmBtn
  v-if="editMemo === false"
@@ -220,7 +224,11 @@ export default {
  this.amount = atoms(this.balance)
  },
  isMaxAmount() {
- return this.amount === atoms(this.balance)
+ if (this.balance === 0) {
+ return false
+ } else {
+ return parseFloat(this.amount) === parseFloat(atoms(this.balance))
+ }
  },
  bech32Validate(param) {
  try {
@@ -262,10 +270,7 @@ export default {
 </script>
 <style scoped>
 #edit-memo-btn {
- margin-top: 1.5rem;
+ margin-top: 2.4rem;
 }
 
-.form-message.notice {
- margin: 1rem 0 0 0;
-}
 </style>

src/ActionModal/components/UndelegationModal.vue

@@ -35,7 +35,7 @@
  field-id="amount"
  field-label="Amount"
  >
- <span class="input-suffix">{{ num.viewDenom(denom) }}</span>
+ <span class="input-suffix-denom">{{ num.viewDenom(denom) }}</span>
  <TmFieldGroup>
  <TmField
  id="amount"
@@ -47,7 +47,8 @@
  @keyup.enter.native="enterPressed"
  />
  <TmBtn
- type="addon-max"
+ type="button"
+ class="secondary addon-max"
  value="Set Max"
  @click.native="setMaxAmount()"
  />

src/components/common/TmBtn.vue

@@ -1,9 +1,5 @@
 <template>
- <button v-if="type === `addon-max`" class="addon-max" :disabled="disabled">
- {{ value }}
- </button>
  <button
- v-else
  class="button"
  :class="{
  secondary: type === `secondary`,
@@ -110,10 +106,12 @@ export default {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
- padding: 5px 16px;
+ padding: 4px 16px;
  min-width: 100px;
  color: var(--bright);
  margin: 0;
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  cursor: pointer;

src/styles/app.css

@@ -89,6 +89,19 @@ input.tm-field {
  border-radius: 2px;
 }
 
+.input-suffix-denom {
+ display: inline-block;
+ position: absolute;
+ padding: 7px 8px;
+ font-size: var(--sm);
+ text-transform: uppercase;
+ right: 124px;
+ letter-spacing: 1px;
+ text-align: right;
+ font-weight: 500;
+ border-radius: 2px;
+}
+
 .field-checkbox-label {
  display: block;
  padding-left: 1.5rem;

tests/unit/specs/components/ActionModal/components/DelegationModal.spec.js

@@ -25,7 +25,7 @@ describe(`DelegationModal`, () => {
  const state = {
  session: {
  signedIn: true,
- address: `cosmosvaladdr15ky9du8a2wlstz6fpx3p4mqpjyrm5ctqzh8yqw`
+ address: `cosmosvaladdr15ky9du8a2wlstz6fpx3p4mqpjyrm5ctqzh8yqw`,
  }
  }
 
@@ -192,4 +192,27 @@ describe(`DelegationModal`, () => {
  })
  })
  })
+
+ describe(`if amount field max button clicked`, () => {
+ it(`amount has to be 1000 atom`, async () => {
+ wrapper.setData({
+ amount: 1,
+ selectedIndex: 0,
+ validator: mockValues.state.candidates[1]
+ })
+ wrapper.vm.setMaxAmount()
+ expect(wrapper.vm.amount).toBe(1000)
+ })
+ it(`should show warning message`, async () => {
+ wrapper.setData({
+ amount: 1000,
+ selectedIndex: 0,
+ validator: mockValues.state.candidates[1]
+ })
+ //await wrapper.vm.$nextTick()
+ expect(wrapper.html()).toContain(
+ "You are about to use all your tokens for this transaction. Consider leaving a little bit left over to cover the network fees."
+ )
+ })
+ })
 })

tests/unit/specs/components/ActionModal/components/SendModal.spec.js

@@ -17,6 +17,10 @@ describe(`SendModal`, () => {
  {
  denom: `fermion`,
  amount: 2300
+ },
+ {
+ denom: `EMPTY_BALANCE`,
+ amount: 0
  }
  ]
  const getters = {
@@ -27,7 +31,7 @@ describe(`SendModal`, () => {
  const state = {
  wallet: {
  loading: false,
- denoms: [`fermion`, `gregcoin`, `mycoin`, `STAKE`],
+ denoms: [`fermion`, `gregcoin`, `mycoin`, `STAKE`, `EMPTY_BALANCE`],
  balances
  }
  }
@@ -189,11 +193,30 @@ describe(`SendModal`, () => {
  address: `cosmos12345`
  })
  wrapper.vm.setMaxAmount()
- expect(wrapper.vm.amount).toBe(10000)
  await wrapper.vm.$nextTick()
- expect(wrapper.find(".max-notice").text()).toContain(
- "You are about to use all your tokens for this transaction."
+ expect(wrapper.html()).toContain(
+ "You are about to use all your tokens for this transaction. Consider leaving a little bit left over to cover the network fees."
+ )
+ })
+ it(`should not show warning message if balance = 0`, async () => {
+ wrapper.setData({
+ denom: `EMPTY_BALANCE`,
+ address: `cosmos12345`
+ })
+ wrapper.vm.setMaxAmount()
+ await wrapper.vm.$nextTick()
+ expect(wrapper.html()).not.toContain(
+ "You are about to use all your tokens for this transaction. Consider leaving a little bit left over to cover the network fees."
  )
  })
+ it(`isMaxAmount() should return false if balance = 0`, async () => {
+ wrapper.setData({
+ denom: `EMPTY_BALANCE`,
+ address: `cosmos12345`
+ })
+ wrapper.vm.setMaxAmount()
+ await wrapper.vm.$nextTick()
+ expect(wrapper.vm.isMaxAmount()).toBe(false)
+ })
  })
 })

tests/unit/specs/components/ActionModal/components/__snapshots__/DelegationModal.spec.js.snap

@@ -58,6 +58,12 @@ exports[`DelegationModal should display the delegation modal form 1`] = `
  fieldid="amount"
  fieldlabel="Amount"
  >
+ <span
+ class="input-suffix-denom"
+ >
+ STAKE
+ </span>
+ 
  <tmfieldgroup-stub>
  <tmfield-stub
  class="tm-field-addon"
@@ -67,7 +73,8 @@ exports[`DelegationModal should display the delegation modal form 1`] = `
  />
  
  <tmbtn-stub
- type="addon-max"
+ class="secondary addon-max"
+ type="button"
  value="Set Max"
  />
  </tmfieldgroup-stub>
@@ -83,8 +90,6 @@ exports[`DelegationModal should display the delegation modal form 1`] = `
  </span>
  
  <!---->
- 
- <!---->
  </tmformgroup-stub>
 </actionmodal-stub>
 `;