Detect WASM (via util) (#3612)

* Detect WASM (via util)

* Linting

* Cleanups.

packages/page-contracts/src/Codes/Upload.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { SubmittableResult } from '@polkadot/api';
 import { Button, InputAddress, InputFile, Modal, TxButton } from '@polkadot/react-components';
 import { useAccountId, useApi, useNonEmptyString, useToggle } from '@polkadot/react-hooks';
-import { compactAddLength, isNull } from '@polkadot/util';
+import { compactAddLength, isNull, isWasm } from '@polkadot/util';
 
 import { ABI, InputName } from '../shared';
 import store from '../store';
@@ -31,7 +31,7 @@ function Upload (): React.ReactElement {
 
   const _onAddWasm = useCallback(
     (wasm: Uint8Array, name: string): void => {
-      setWasm([compactAddLength(wasm), wasm.subarray(0, 4).toString() === '0,97,115,109']);
+      setWasm([compactAddLength(wasm), isWasm(wasm)]);
       setName(name);
     },
     [setName]

packages/react-components/src/InputWasm.tsx

@@ -3,7 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback } from 'react';
-import { compactAddLength } from '@polkadot/util';
+import { compactAddLength, isWasm } from '@polkadot/util';
+
 import InputFile, { InputFileProps } from './InputFile';
 
 interface Props extends Omit<InputFileProps, 'accept'> {
@@ -14,9 +15,7 @@ interface Props extends Omit<InputFileProps, 'accept'> {
 function InputWasm ({ isValidRef, onChange, ...props }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (wasm: Uint8Array, name: string): void => {
-      const isWasmValid = wasm.subarray(0, 4).toString() === '0,97,115,109'; // '\0asm'
-
-      isValidRef.current = isWasmValid;
+      isValidRef.current = isWasm(wasm);
       onChange(compactAddLength(wasm), name);
     },
     [isValidRef, onChange]

packages/react-components/src/LinkExternal.tsx

@@ -88,10 +88,6 @@ export default React.memo(styled(LinkExternal)`
 
     .links {
       white-space: nowrap;
-
-      span+span {
-        margin-left: 0.25rem;
-      }
     }
   }
 

packages/react-params/src/Param/Code.tsx

@@ -5,6 +5,7 @@
 import { Props } from '../types';
 
 import React, { useCallback, useState } from 'react';
+import { isWasm } from '@polkadot/util';
 
 import Bytes from './Bytes';
 import BytesFile from './File';
@@ -12,15 +13,11 @@ import BytesFile from './File';
 function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
 
-  // TODO: Validate that we have actual proper WASM code
   const _onChange = useCallback(
     (value: Uint8Array): void => {
-      const isValid = value.length !== 0;
+      const isValid = isWasm(value);
 
-      onChange && onChange({
-        isValid,
-        value
-      });
+      onChange && onChange({ isValid, value });
       setIsValid(isValid);
     },
     [onChange]