hashgraph / MyHbarWallet

🟩 MyHbarWallet is a free, client-side interface helping you interact with Hedera™ Hashgraph.
https://myhbarwallet.com/
Apache License 2.0
71 stars 44 forks source link

Added memo length restrictions #426

Closed masonmeier closed 3 years ago

masonmeier commented 3 years ago

Problem:

Memo text in "OptionalMemoField" was not limited to 50 characters while the back end required a limit of 50 characters or less for successful post request.

Solution:

Create input limitations on input field to prevent users from exceeding the maximum character count

Implementation:

  1. Created prop "maxMemoLength" in OptionalMemoField.vue (line 27)
  2. Set state for maxMemoLength to numeric value 50
  3. Received prop from step 1 in TextInput.vue
  4. used Vue tool :maxLength to set the max length to maxMemoLength (null if non present)

Additional Changes:

  1. Added a v-if div called "remaining-characters" that only displays if maxMemoLength is present.
    • This count takes the maxMemoLength and subtracts the characters present in inputs "value" to determine the volume of characters remaining.
    • styled count to be right aligned, 5px from edge.

Testing

  1. Verified that we cannot input additional characters on memo transfer component
  2. Other locations where TextInput.vue is called do not display the remaining-characters div.