validate hexadecimal contract

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyano-wallet",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "private": true,
   "scripts": {
     "lint": "tslint -p .",

public/manifest.json

@@ -4,7 +4,7 @@
   "name": "Cyano wallet",
   "author": "Matus Zamborsky <[email protected]>",
   "description": "Cyano wallet - an Ontology wallet",
-  "version": "0.7.6",
+  "version": "0.7.7",
 
   "browser_action": {
     "default_title": "Open the wallet"

src/api/utils.ts

@@ -0,0 +1,9 @@
+export function isHexadecimal(str: string) {
+  const regexp = /^[0-9a-fA-F]+$/;
+
+  if (regexp.test(str)) {
+    return str.length % 2 === 0;
+  } else {
+    return false;
+  }
+}

src/background/api/tokenApi.ts

@@ -10,8 +10,12 @@ import { getStore } from '../redux';
 
 import Address = Crypto.Address;
 import Oep4TxBuilder = Oep4.Oep4TxBuilder;
+import { isHexadecimal } from 'src/api/utils';
 
 export async function getOEP4Token(contract: string): Promise<OEP4Token> {
+  if (!isHexadecimal(contract)) {
+    throw new Error('Contract is not hexadecimal string');
+  }
   contract = utils.reverseHex(contract);
 
   const builder = new Oep4TxBuilder(new Address(contract));

src/popup/pages/tokenSettingsAdd/tokenSettingsAdd.tsx

@@ -34,7 +34,7 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
     {
       addToken: Actions.settings.addToken,
       finishLoading: Actions.loader.finishLoading,
-      startLoading: Actions.loader.startLoading
+      startLoading: Actions.loader.startLoading,
     },
     dispatch,
   );
@@ -48,17 +48,28 @@ const enhancer = (Component: React.ComponentType<Props>) => (props: RouteCompone
         },
         handleConfirm: async (values: object) => {
           const contract: string = get(values, 'contract');
-          
+
           await actions.startLoading();
 
-          const manager = getBackgroundManager();
-          const token = await manager.getOEP4Token(contract);
-
-          // todo: proper spec
-          await actions.addToken(contract, token.name, token.symbol, token.decimals, 'OEP-4');
-          await actions.finishLoading();
+          try {
+            const manager = getBackgroundManager();
+            const token = await manager.getOEP4Token(contract);
+
+            // todo: proper spec
+            await actions.addToken(contract, token.name, token.symbol, token.decimals, 'OEP-4');
+
+            await actions.finishLoading();
+
+            props.history.push('/settings/token');
+
+            return {};
+          } catch (e) {
+            await actions.finishLoading();
 
-          props.history.push('/settings/token');
+            return {
+              contract: 'Invalid contract',
+            };
+          }
         },
         loading: reduxProps.loading,
       },

src/popup/pages/tokenSettingsAdd/tokenSettingsAddView.tsx

@@ -19,11 +19,11 @@ import * as React from 'react';
 import { Field, Form } from 'react-final-form';
 import { Button, Form as SemanticForm } from 'semantic-ui-react';
 import { AccountLogoHeader, Filler, Spacer, StatusBar, View } from '../../components';
-import { required } from '../../utils/validate';
+import { tokenValid } from '../../utils/validate';
 
 export interface Props {
   loading: boolean;
-  handleConfirm: (values: object) => Promise<void>;
+  handleConfirm: (values: object) => Promise<object>;
   handleCancel: () => void;
 }
 
@@ -46,7 +46,7 @@ export const TokenSettingsAddView: React.SFC<Props> = (props) => (
                   <label>Script hash</label>
                   <Field
                     name="contract"
-                    validate={required}
+                    validate={tokenValid}
                     render={(t) => (
                       <SemanticForm.Input
                         onChange={t.input.onChange}
@@ -62,8 +62,10 @@ export const TokenSettingsAddView: React.SFC<Props> = (props) => (
             <Filler />
             <Spacer />
             <View className="buttons">
-              <Button icon="check" content="Confirm" disabled={props.loading} loading={props.loading}  />
-              <Button disabled={props.loading} onClick={props.handleCancel}>Cancel</Button>
+              <Button icon="check" content="Confirm" disabled={props.loading} loading={props.loading} />
+              <Button disabled={props.loading} onClick={props.handleCancel}>
+                Cancel
+              </Button>
             </View>
           </SemanticForm>
         )}

src/popup/utils/validate.ts

@@ -15,63 +15,68 @@
  * You should have received a copy of the GNU Lesser General Public License
  * along with The Ontology Wallet&ID.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { get } from 'lodash';
+import { get } from 'lodash';
 import { utils } from 'ontology-ts-sdk';
+import { isHexadecimal } from 'src/api/utils';
 export function validMnemonics(value: string) {
   try {
     utils.parseMnemonic(value);
     return false;
   } catch (e) {
     return true;
   }
-};
+}
 
 export function samePassword(values: object) {
   const password = get(values, 'password', '');
   const passwordAgain = get(values, 'passwordAgain', '');
 
   if (password !== passwordAgain) {
     return {
-      passwordAgain: "Password does not match"
-    }
+      passwordAgain: 'Password does not match',
+    };
   }
 
   return {};
 }
 
-export function required(value: string){ 
-  return (value === undefined || value.trim().length === 0);
+export function tokenValid(value: string) {
+  return required(value) || !isHexadecimal(value) || value.length !== 40;
 }
 
-export function range(from: number, to: number){ 
-  return function rangeCheck(value: string){ 
+export function required(value: string) {
+  return value === undefined || value.trim().length === 0;
+}
+
+export function range(from: number, to: number) {
+  return function rangeCheck(value: string) {
     if (value === undefined) {
       return true;
-    } 
+    }
 
     const val = Number(value);
-    return (val <= from || val > to);
-  }
+    return val <= from || val > to;
+  };
 }
 
-export function gt(than: number){ 
-  return function gtCheck(value: string){ 
+export function gt(than: number) {
+  return function gtCheck(value: string) {
     if (value === undefined) {
       return true;
-    } 
+    }
 
     const val = Number(value);
-    return (val <= than);
-  }
+    return val <= than;
+  };
 }
 
-export function gte(than: number){ 
-  return function gtCheck(value: string){ 
+export function gte(than: number) {
+  return function gtCheck(value: string) {
     if (value === undefined) {
       return true;
-    } 
+    }
 
     const val = Number(value);
-    return (val < than);
-  }
+    return val < than;
+  };
 }