fix: handle tokens without metadata (#209)

* fix(token): handle tokens without metadata

* fix: correct check for ABI method existence

* better naming schema for tokens without metadata

* fix: color dropdown width

src/components/amountInput.tsx

@@ -88,7 +88,7 @@ export default class AmountInput extends React.Component<
       <Select
         value={color}
         style={{
-          width: this.token.isNft ? '120px !important' : '80px !import',
+          width: '80px',
         }}
         onChange={this.handleColorChange}
       >

src/stores/utils.ts

@@ -7,7 +7,7 @@
 
 import { EventLog } from 'web3/types';
 import Contract from 'web3/eth/contract';
-import { isNFT } from '../utils';
+import { isNFT, isNST } from '../utils';
 
 import { web3RootStore } from './web3/root';
 import { AccountStore } from './account';
@@ -21,6 +21,18 @@ function hexToAscii(hex) {
   return result;
 }
 
+const defaultSymbol = (color, addr) => {
+  if (isNST(color)) {
+    return `NST${addr.substring(2, 5)}`;
+  }
+
+  if (isNFT(color)) {
+    return `NFT${addr.substring(2, 5)}`;
+  }
+
+  return `T${addr.substring(2, 5)}`;
+};
+
 const bytesTokenABI = [
   {
     constant: true,
@@ -56,17 +68,27 @@ const tokenValue = (token: Contract, method: string) => {
           .call()
           .then(hexToAscii);
       }
-    );
+    )
+    .catch(e => {
+      console.warn(
+        `Error executing method '${method}'. Probably ABI mismatches the bytecode`
+      );
+      return Promise.reject();
+    });
 };
 
 export const tokenInfo = (
   token: Contract,
   color: number
 ): Promise<[string, string, string]> => {
   return Promise.all([
-    tokenValue(token, 'symbol'),
+    tokenValue(token, 'symbol').catch(_ =>
+      defaultSymbol(color, token.options.address)
+    ),
     isNFT(color) ? Promise.resolve(0) : token.methods.decimals().call(),
-    tokenValue(token, 'name'),
+    tokenValue(token, 'name').catch(_ =>
+      defaultSymbol(color, token.options.address)
+    ),
   ]);
 };
 

src/utils/index.ts

@@ -2,6 +2,7 @@ export { range } from './range';
 export { toArray } from './toArray';
 export { txSuccess } from './txSuccess';
 export { nftDisplayValue, NFT_COLOR_BASE, isNFT } from './nft';
+export { nstDisplayValue, NST_COLOR_BASE, isNST } from './nst';
 
 export { KNOWN_NETWORKS } from './knownNetworks';
 

src/utils/nst.ts

@@ -0,0 +1,8 @@
+import { BigIntType } from 'jsbi-utils';
+
+export const NST_COLOR_BASE = 49153; // 2^15 + 1 + 2^14
+
+export const isNST = (color: number): boolean => color >= NST_COLOR_BASE;
+
+export const nstDisplayValue = (value: BigIntType): string =>
+  value.toString(10);