Merge pull request #1503 from gre/xrp-limit-tagid

Fix checking the tagId validity

src/components/AdvancedOptions/RippleKind.js

@@ -1,5 +1,6 @@
 // @flow
-import React from 'react'
+import React, { Component } from 'react'
+import { BigNumber } from 'bignumber.js'
 import { translate } from 'react-i18next'
 
 import Box from 'components/base/Box'
@@ -13,24 +14,37 @@ type Props = {
   t: *,
 }
 
-export default translate()(({ tag, onChangeTag, t }: Props) => (
-  <Spoiler title={t('app:send.steps.amount.advancedOptions')}>
-    <Box horizontal align="center" flow={5}>
-      <Box style={{ width: 200 }}>
-        <Label>
-          <span>{t('app:send.steps.amount.rippleTag')}</span>
-        </Label>
-      </Box>
-      <Box grow>
-        <Input
-          value={String(tag || '')}
-          onChange={str => {
-            const tag = parseInt(str, 10)
-            if (!isNaN(tag) && isFinite(tag)) onChangeTag(tag)
-            else onChangeTag(undefined)
-          }}
-        />
-      </Box>
-    </Box>
-  </Spoiler>
-))
+const uint32maxPlus1 = BigNumber(2).pow(32)
+
+class RippleKind extends Component<Props> {
+  onChange = str => {
+    const { onChangeTag } = this.props
+    const tag = BigNumber(str.replace(/[^0-9]/g, ''))
+    if (!tag.isNaN() && tag.isFinite()) {
+      if (tag.isInteger() && tag.isPositive() && tag.lt(uint32maxPlus1)) {
+        onChangeTag(tag.toNumber())
+      }
+    } else {
+      onChangeTag(undefined)
+    }
+  }
+  render() {
+    const { tag, t } = this.props
+    return (
+      <Spoiler title={t('app:send.steps.amount.advancedOptions')}>
+        <Box horizontal align="center" flow={5}>
+          <Box style={{ width: 200 }}>
+            <Label>
+              <span>{t('app:send.steps.amount.rippleTag')}</span>
+            </Label>
+          </Box>
+          <Box grow>
+            <Input value={String(tag || '')} onChange={this.onChange} />
+          </Box>
+        </Box>
+      </Spoiler>
+    )
+  }
+}
+
+export default translate()(RippleKind)