Fix Miscellaneous Types (#635)

* Add repo wide prettier command to prepush

* Make config file explict, remove formatAll to prepush

* Fix react router typings

* Add more typings

* Fix event typings,  fix transition children

common/Root.tsx

@@ -27,7 +27,7 @@ export default class Root extends Component<Props, State> {
     error: null
   };
 
-  public componentDidCatch(error) {
+  public componentDidCatch(error: Error) {
     this.setState({ error });
   }
 

common/actions/rates/actionPayloads.ts

@@ -1,31 +1,39 @@
 import { handleJSONResponse } from 'api/utils';
 
-export const rateSymbols = ['USD', 'EUR', 'GBP', 'BTC', 'CHF', 'REP', 'ETH'];
+export const rateSymbols: Symbols = ['USD', 'EUR', 'GBP', 'BTC', 'CHF', 'REP', 'ETH'];
+
+export type Symbols = (keyof ISymbol)[];
 // TODO - internationalize
 const ERROR_MESSAGE = 'Could not fetch rate data.';
 const CCApi = 'https://min-api.cryptocompare.com';
 
 const CCRates = (symbols: string[]) => {
-  const tsyms = rateSymbols.concat(symbols).join(',');
+  const tsyms = rateSymbols.concat(symbols as any).join(',');
   return `${CCApi}/data/price?fsym=ETH&tsyms=${tsyms}`;
 };
 
 export interface CCResponse {
-  [symbol: string]: {
-    USD: number;
-    EUR: number;
-    GBP: number;
-    BTC: number;
-    CHF: number;
-    REP: number;
-    ETH: number;
-  };
+  [symbol: string]: ISymbol;
+}
+
+interface ISymbol {
+  USD: number;
+  EUR: number;
+  GBP: number;
+  BTC: number;
+  CHF: number;
+  REP: number;
+  ETH: number;
+}
+
+interface IRates extends ISymbol {
+  Response?: 'Error';
 }
 
 export const fetchRates = (symbols: string[] = []): Promise<CCResponse> =>
   fetch(CCRates(symbols))
     .then(response => handleJSONResponse(response, ERROR_MESSAGE))
-    .then(rates => {
+    .then((rates: IRates) => {
       // API errors come as 200s, so check the json for error
       if (rates.Response && rates.Response === 'Error') {
         throw new Error('Failed to fetch rates');
@@ -35,12 +43,15 @@ export const fetchRates = (symbols: string[] = []): Promise<CCResponse> =>
       // do it all in one request
       // to their respective rates via ETH.
       return symbols.reduce(
-        (eqRates, sym) => {
+        (eqRates, sym: keyof ISymbol) => {
           if (rates[sym]) {
-            eqRates[sym] = rateSymbols.reduce((symRates, rateSym) => {
-              symRates[rateSym] = 1 / rates[sym] * rates[rateSym];
-              return symRates;
-            }, {});
+            eqRates[sym] = rateSymbols.reduce(
+              (symRates, rateSym) => {
+                symRates[rateSym] = 1 / rates[sym] * rates[rateSym];
+                return symRates;
+              },
+              {} as ISymbol
+            );
           }
           return eqRates;
         },
@@ -54,6 +65,6 @@ export const fetchRates = (symbols: string[] = []): Promise<CCResponse> =>
             REP: rates.REP,
             ETH: 1
           }
-        }
+        } as CCResponse
       );
     });

common/api/utils.ts

@@ -4,7 +4,7 @@ export const filter = (i: any, arr: any[]) => {
   return -1 !== indexOf(arr, i) ? true : false;
 };
 
-export function checkHttpStatus(response) {
+export function checkHttpStatus(response: Response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
   } else {
@@ -12,11 +12,11 @@ export function checkHttpStatus(response) {
   }
 }
 
-export function parseJSON(response) {
+export function parseJSON(response: Response) {
   return response.json();
 }
 
-export async function handleJSONResponse(response, errorMessage) {
+export async function handleJSONResponse(response: Response, errorMessage: string) {
   if (response.ok) {
     return await response.json();
   }

common/components/AmountFieldFactory/AmountFieldFactory.tsx

@@ -11,7 +11,7 @@ export interface CallbackProps {
   currentValue:
     | AppState['transaction']['fields']['value']
     | AppState['transaction']['meta']['tokenValue'];
-  onChange(ev: React.FormEvent<HTMLInputElement>);
+  onChange(ev: React.FormEvent<HTMLInputElement>): void;
 }
 
 interface DispatchProps {

common/components/AmountFieldFactory/AmountInputFactory.tsx

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { CallbackProps } from 'components/AmountFieldFactory';
 
 interface OwnProps {
-  onChange(ev: React.FormEvent<HTMLInputElement>);
+  onChange(ev: React.FormEvent<HTMLInputElement>): void;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 

common/components/BalanceSidebar/EquivalentValues.tsx

@@ -32,7 +32,7 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
   private decimalLookup: { [key: string]: number } = {};
   private requestedCurrencies: string[] | null = null;
 
-  public constructor(props) {
+  public constructor(props: Props) {
     super(props);
     this.makeBalanceLookup(props);
 
@@ -41,7 +41,7 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
     }
   }
 
-  public componentWillReceiveProps(nextProps) {
+  public componentWillReceiveProps(nextProps: Props) {
     const { balance, tokenBalances } = this.props;
     if (nextProps.balance !== balance || nextProps.tokenBalances !== tokenBalances) {
       this.makeBalanceLookup(nextProps);

common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.tsx

@@ -12,15 +12,19 @@ interface Props {
   toggleForm(): void;
 }
 
+interface IGenerateSymbolLookup {
+  [tokenSymbol: string]: boolean;
+}
+
 interface State {
-  tokenSymbolLookup: { [symbol: string]: boolean };
+  tokenSymbolLookup: IGenerateSymbolLookup;
   address: string;
   symbol: string;
   decimal: string;
 }
 
 export default class AddCustomTokenForm extends React.Component<Props, State> {
-  public state = {
+  public state: State = {
     tokenSymbolLookup: {},
     address: '',
     symbol: '',
@@ -130,14 +134,14 @@ export default class AddCustomTokenForm extends React.Component<Props, State> {
     return !Object.keys(this.getErrors()).length && address && symbol && decimal;
   }
 
-  public onFieldChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+  public onFieldChange = (e: React.FormEvent<HTMLInputElement>) => {
     // TODO: typescript bug: https://github.com/Microsoft/TypeScript/issues/13948
-    const name: any = (e.target as HTMLInputElement).name;
-    const value = (e.target as HTMLInputElement).value;
+    const name: any = e.currentTarget.name;
+    const value = e.currentTarget.value;
     this.setState({ [name]: value });
   };
 
-  public onSave = (ev: React.SyntheticEvent<HTMLFormElement>) => {
+  public onSave = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
     if (!this.isValid()) {
       return;
@@ -148,9 +152,12 @@ export default class AddCustomTokenForm extends React.Component<Props, State> {
   };
 
   private generateSymbolLookup(tokens: Token[]) {
-    return tokens.reduce((prev, tk) => {
-      prev[tk.symbol] = true;
-      return prev;
-    }, {});
+    return tokens.reduce(
+      (prev, tk) => {
+        prev[tk.symbol] = true;
+        return prev;
+      },
+      {} as IGenerateSymbolLookup
+    );
   }
 }

common/components/BalanceSidebar/TokenBalances/TokenRow.tsx

@@ -65,7 +65,7 @@ export default class TokenRow extends React.Component<Props, State> {
     );
   }
 
-  public toggleShowLongBalance = (e: React.SyntheticEvent<HTMLTableDataCellElement>) => {
+  public toggleShowLongBalance = (e: React.FormEvent<HTMLTableDataCellElement>) => {
     e.preventDefault();
     this.setState(state => {
       return {

common/components/DataFieldFactory/DataFieldFactory.tsx

@@ -9,10 +9,10 @@ export interface CallBackProps {
   data: AppState['transaction']['fields']['data'];
   dataExists: boolean;
   readOnly: boolean;
-  onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>);
+  onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>): void;
 }
 interface DispatchProps {
-  isEtherTransaction;
+  isEtherTransaction: boolean;
   inputData: TInputData;
 }
 interface OwnProps {

common/components/DataFieldFactory/DataInputFactory.tsx

@@ -7,7 +7,7 @@ import { CallBackProps } from 'components/DataFieldFactory';
 
 interface OwnProps {
   withProps(props: CallBackProps): React.ReactElement<any> | null;
-  onChange(ev: React.FormEvent<HTMLInputElement>);
+  onChange(ev: React.FormEvent<HTMLInputElement>): void;
 }
 interface StateProps {
   data: AppState['transaction']['fields']['data'];

common/components/Footer/index.tsx

@@ -15,7 +15,7 @@ import PreFooter from './PreFooter';
 import Modal, { IButton } from 'components/ui/Modal';
 import { NewTabLink } from 'components/ui';
 
-const AffiliateTag = ({ link, text }) => {
+const AffiliateTag = ({ link, text }: Link) => {
   return (
     <li className="Footer-affiliate-tag" key={link}>
       <NewTabLink href={link}>{text}</NewTabLink>
@@ -23,7 +23,7 @@ const AffiliateTag = ({ link, text }) => {
   );
 };
 
-const SocialMediaLink = ({ link, text }) => {
+const SocialMediaLink = ({ link, text }: Link) => {
   return (
     <NewTabLink className="Footer-social-media-link" key={link} href={link}>
       <i className={`sm-icon sm-logo-${text} sm-24px`} />
@@ -108,7 +108,7 @@ interface State {
 }
 
 export default class Footer extends React.Component<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = { isOpen: false };
   }

common/components/GasFieldFactory/GasFieldFactory.tsx

@@ -18,7 +18,7 @@ interface DispatchProps {
 }
 interface OwnProps {
   gasLimit: string | null;
-  withProps(props: CallBackProps);
+  withProps(props: CallBackProps): React.ReactElement<any> | null;
 }
 
 type Props = DispatchProps & OwnProps;
@@ -46,7 +46,7 @@ class GasLimitFieldClass extends Component<Props, {}> {
 const GasLimitField = connect(null, { inputGasLimit })(GasLimitFieldClass);
 
 interface DefaultGasFieldProps {
-  withProps(props: CallBackProps);
+  withProps(props: CallBackProps): React.ReactElement<any> | null;
 }
 const DefaultGasField: React.SFC<DefaultGasFieldProps> = ({ withProps }) => (
   <GasQuery

common/components/Header/components/CustomNodeModal.tsx

@@ -233,7 +233,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
           'form-control': true,
           'is-invalid': this.state[input.name] && invalids[input.name]
         })}
-        value={this.state[name]}
+        value={this.state.name}
         onChange={this.handleChange}
         {...input}
       />
@@ -252,7 +252,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
       customNetworkUnit,
       customNetworkChainId
     } = this.state;
-    const required = ['name', 'url', 'port', 'network'];
+    const required: (keyof State)[] = ['name', 'url', 'port', 'network'];
     const invalids: { [key: string]: boolean } = {};
 
     // Required fields
@@ -344,7 +344,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
 
   private handleCheckbox = (ev: React.FormEvent<HTMLInputElement>) => {
     const { name } = ev.currentTarget;
-    this.setState({ [name as any]: !this.state[name] });
+    this.setState({ [name as any]: !this.state[name as keyof State] });
   };
 
   private saveAndAdd = () => {

common/components/WalletDecrypt/DeterministicWalletsModal.tsx

@@ -200,8 +200,8 @@ class DeterministicWalletsModal extends React.Component<Props, State> {
     }
   }
 
-  private handleChangePath = (ev: React.SyntheticEvent<HTMLSelectElement>) => {
-    const { value } = ev.target as HTMLSelectElement;
+  private handleChangePath = (ev: React.FormEvent<HTMLSelectElement>) => {
+    const { value } = ev.currentTarget;
 
     if (value === 'custom') {
       this.setState({ isCustomPath: true });
@@ -213,11 +213,11 @@ class DeterministicWalletsModal extends React.Component<Props, State> {
     }
   };
 
-  private handleChangeCustomPath = (ev: React.SyntheticEvent<HTMLInputElement>) => {
-    this.setState({ customPath: (ev.target as HTMLInputElement).value });
+  private handleChangeCustomPath = (ev: React.FormEvent<HTMLInputElement>) => {
+    this.setState({ customPath: ev.currentTarget.value });
   };
 
-  private handleSubmitCustomPath = (ev: React.SyntheticEvent<HTMLFormElement>) => {
+  private handleSubmitCustomPath = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
     if (!isValidPath(this.state.customPath)) {
       return;
@@ -225,8 +225,8 @@ class DeterministicWalletsModal extends React.Component<Props, State> {
     this.props.onPathChange(this.state.customPath);
   };
 
-  private handleChangeToken = (ev: React.SyntheticEvent<HTMLSelectElement>) => {
-    this.props.setDesiredToken((ev.target as HTMLSelectElement).value || undefined);
+  private handleChangeToken = (ev: React.FormEvent<HTMLSelectElement>) => {
+    this.props.setDesiredToken(ev.currentTarget.value || undefined);
   };
 
   private handleConfirmAddress = () => {

common/components/WalletDecrypt/Mnemonic.tsx

@@ -82,8 +82,8 @@ export default class MnemonicDecrypt extends Component<Props, State> {
     );
   }
 
-  public onPasswordChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    this.setState({ pass: (e.target as HTMLInputElement).value });
+  public onPasswordChange = (e: React.FormEvent<HTMLInputElement>) => {
+    this.setState({ pass: e.currentTarget.value });
   };
 
   public onMnemonicChange = (e: React.FormEvent<HTMLTextAreaElement>) => {

common/components/WalletDecrypt/PrivateKey.tsx

@@ -83,17 +83,17 @@ export default class PrivateKeyDecrypt extends Component {
     );
   }
 
-  public onPkeyChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
-    const pkey = (e.target as HTMLInputElement).value;
+  public onPkeyChange = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    const pkey = e.currentTarget.value;
     const pass = this.props.value.password;
     const { fixedPkey, valid } = validatePkeyAndPass(pkey, pass);
 
     this.props.onChange({ ...this.props.value, key: fixedPkey, valid });
   };
 
-  public onPasswordChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+  public onPasswordChange = (e: React.FormEvent<HTMLInputElement>) => {
     const pkey = this.props.value.key;
-    const pass = (e.target as HTMLInputElement).value;
+    const pass = e.currentTarget.value;
     const { valid } = validatePkeyAndPass(pkey, pass);
 
     this.props.onChange({

common/components/WalletDecrypt/ViewOnly.tsx

@@ -49,7 +49,7 @@ export default class ViewOnlyDecrypt extends Component<Props, State> {
     this.setState({ address: ev.currentTarget.value });
   };
 
-  private openWallet = (ev: React.SyntheticEvent<HTMLFormElement>) => {
+  private openWallet = (ev: React.FormEvent<HTMLFormElement>) => {
     const { address } = this.state;
     ev.preventDefault();
     if (isValidETHAddress(address)) {

common/components/WalletDecrypt/index.tsx

@@ -160,15 +160,15 @@ export class WalletDecrypt extends Component<Props, State> {
     });
   }
 
-  public handleDecryptionChoiceChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const wallet = this.WALLETS[(event.target as HTMLInputElement).value];
+  public handleDecryptionChoiceChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const wallet = this.WALLETS[event.currentTarget.value];
 
     if (!wallet) {
       return;
     }
 
     this.setState({
-      selectedWalletKey: (event.target as HTMLInputElement).value,
+      selectedWalletKey: event.currentTarget.value,
       value: wallet.initialParams
     });
   };

common/components/renderCbs/TokenQuery.tsx

@@ -6,7 +6,7 @@ import { getTokens, MergedToken } from 'selectors/wallet';
 
 interface Props {
   tokens: MergedToken[];
-  withQuery({ token }: { token: MergedToken | null | undefined });
+  withQuery({ token }: { token: MergedToken | null | undefined }): React.ReactElement<any>;
 }
 
 class TokenQueryClass extends Component<Props, {}> {

common/components/renderCbs/UnitConverter.tsx

@@ -15,7 +15,7 @@ interface IFakeEvent {
 export interface Props {
   decimal: number;
   children({ onUserInput, convertedUnit }: IChildren): React.ReactElement<any>;
-  onChange(baseUnit: IFakeEvent);
+  onChange(baseUnit: IFakeEvent): void;
 }
 
 interface State {

common/components/ui/Code.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Code.scss';
 
-const Code = ({ children }) => (
+const Code = ({ children }: React.Props<{}>) => (
   <pre>
     <code>{children}</code>
   </pre>

common/components/ui/ColorDropdown.tsx

@@ -112,7 +112,7 @@ export default class ColorDropdown<T> extends Component<Props<T>, {}> {
     }
   };
 
-  private onRemove(onRemove: () => void, ev?: React.SyntheticEvent<HTMLButtonElement>) {
+  private onRemove(onRemove: () => void, ev?: React.FormEvent<HTMLButtonElement>) {
     if (ev) {
       ev.preventDefault();
       ev.stopPropagation();

common/components/ui/SimpleSelect.tsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 interface Props {
   value?: string;
   options: string[];
-  onChange(event: React.SyntheticEvent<HTMLSpanElement>): void;
+  onChange(event: React.FormEvent<HTMLSpanElement>): void;
 }
 
 export default class SimpleSelect extends Component<Props, {}> {

common/config/bity.ts

@@ -1,7 +1,6 @@
 import { BTCTxExplorer, ETHTxExplorer } from './data';
 
-export type WhitelistedCoins = 'ETH' | 'BTC' | 'REP';
-
+export type WhitelistedCoins = 'BTC' | 'REP' | 'ETH';
 const serverURL = 'https://bity.myetherapi.com';
 const bityURL = 'https://bity.com/api';
 const BTCMin = 0.01;
@@ -16,13 +15,13 @@ const buffers = {
 };
 
 // rate must be BTC[KIND]
-export function generateKindMin(BTCKINDRate: number, kind: WhitelistedCoins): number {
+export function generateKindMin(BTCKINDRate: number, kind: keyof typeof buffers): number {
   const kindMinVal = BTCKINDRate * BTCMin;
   return kindMinVal + kindMinVal * buffers[kind];
 }
 
 // rate must be BTC[KIND]
-export function generateKindMax(BTCKINDRate: number, kind: WhitelistedCoins): number {
+export function generateKindMax(BTCKINDRate: number, kind: keyof typeof buffers): number {
   const kindMax = BTCKINDRate * BTCMax;
   return kindMax - kindMax * buffers[kind];
 }

common/containers/TabSection/Notifications.tsx

@@ -4,15 +4,16 @@ import { connect } from 'react-redux';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import NotificationRow from './NotificationRow';
 import './Notifications.scss';
+import { AppState } from 'reducers';
 
 interface Props {
   notifications: Notification[];
   closeNotification: TCloseNotification;
 }
 
-const Transition = props => (
+const Transition: React.SFC<{}> = ({ children }) => (
   <CSSTransition
-    {...props}
+    children={children}
     classNames="NotificationAnimation"
     timeout={{ enter: 500, exit: 500 }}
   />
@@ -34,7 +35,7 @@ export class Notifications extends React.Component<Props, {}> {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: AppState) => ({
   notifications: state.notifications
 });
 

common/containers/Tabs/Contracts/index.tsx

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 interface State {
-  activeTab: string;
+  activeTab: 'interact' | 'deploy';
 }
 
 interface Props {
@@ -22,7 +22,7 @@ class Contracts extends Component<Props, State> {
     activeTab: 'interact'
   };
 
-  public changeTab = activeTab => () => {
+  public changeTab = (activeTab: State['activeTab']) => () => {
     this.props.reset();
     this.props.resetWallet();
     this.setState({ activeTab });

common/containers/Tabs/ENS/index.tsx

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import ENS from './components/ENS';
 
-const mapStateToProps = _ => ({});
+const mapStateToProps = () => ({});
 
 export default connect(mapStateToProps)(ENS);

common/containers/Tabs/GenerateWallet/components/DownloadWallet.tsx

@@ -130,6 +130,6 @@ export default class DownloadWallet extends Component<Props, State> {
     this.setState({ keystore });
   }
 
-  private handleDownloadKeystore = e =>
+  private handleDownloadKeystore = (e: React.FormEvent<HTMLAnchorElement>) =>
     this.state.keystore ? this.markDownloaded() : e.preventDefault();
 }

common/containers/Tabs/RestoreKeystore/components/KeystoreDetails.tsx

@@ -26,7 +26,7 @@ const initialState: State = {
   wallet: null
 };
 
-const minLength = min => value => value && value.length >= min;
+const minLength = (min: number) => (value: string) => !!value && value.length >= min;
 const minLength9 = minLength(9);
 
 class KeystoreDetails extends Component<{}, State> {

common/containers/Tabs/SendTransaction/components/WalletInfo.tsx

@@ -29,7 +29,7 @@ export default class WalletInfo extends React.Component<Props, State> {
     this.setWalletAsyncState(this.props.wallet);
   }
 
-  public componentWillReceiveProps(nextProps) {
+  public componentWillReceiveProps(nextProps: Props) {
     if (this.props.wallet !== nextProps.wallet) {
       this.setWalletAsyncState(nextProps.wallet);
     }

common/containers/Tabs/SignAndVerifyMessage/index.tsx

@@ -6,7 +6,7 @@ import TabSection from 'containers/TabSection';
 import './index.scss';
 
 interface State {
-  activeTab: string;
+  activeTab: 'sign' | 'verify';
 }
 
 export default class SignAndVerifyMessage extends Component<{}, State> {
@@ -14,7 +14,7 @@ export default class SignAndVerifyMessage extends Component<{}, State> {
     activeTab: 'sign'
   };
 
-  public changeTab = activeTab => () => this.setState({ activeTab });
+  public changeTab = (activeTab: State['activeTab']) => () => this.setState({ activeTab });
 
   public render() {
     const { activeTab } = this.state;

common/containers/Tabs/Swap/components/CurrencySwap.tsx

@@ -156,10 +156,10 @@ export default class CurrencySwap extends Component<Props, State> {
     }
   };
 
-  public onChangeAmount = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const type = (event.target as HTMLInputElement).id;
+  public onChangeAmount = (event: React.FormEvent<HTMLInputElement>) => {
+    const type = event.currentTarget.id;
     const { origin, destination } = this.state;
-    const amount = parseFloat((event.target as HTMLInputElement).value);
+    const amount = parseFloat(event.currentTarget.value);
     type === 'origin-swap-input'
       ? this.updateOriginAmount(origin, destination, amount)
       : this.updateDestinationAmount(origin, destination, amount);

common/containers/Tabs/Swap/components/CurrentRates.tsx

@@ -36,7 +36,7 @@ export default class CurrentRates extends Component<Props, State> {
 
   public buildPairRate = (origin: string, destination: string) => {
     const pair = origin + destination;
-    const statePair = this.state[pair + 'Amount'];
+    const statePair = this.state[(pair + 'Amount') as keyof State];
     const propsPair = this.props[pair] ? this.props[pair].rate : null;
     return (
       <div className="SwapRates-panel-rate">

common/containers/Tabs/Swap/components/ReceivingAddress.tsx

@@ -16,7 +16,7 @@ import './ReceivingAddress.scss';
 
 export interface StateProps {
   origin: SwapInput;
-  destinationId: string;
+  destinationId: keyof typeof donationAddressMap;
   isPostingOrder: boolean;
   destinationAddress: string;
 }
@@ -29,8 +29,8 @@ export interface ActionProps {
 }
 
 export default class ReceivingAddress extends Component<StateProps & ActionProps, {}> {
-  public onChangeDestinationAddress = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const value = (event.target as HTMLInputElement).value;
+  public onChangeDestinationAddress = (event: React.FormEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.value;
     this.props.destinationAddressSwap(value);
   };
 

common/containers/Tabs/Swap/components/SwapProgress.tsx

@@ -32,7 +32,7 @@ export default class SwapProgress extends Component<Props, State> {
 
     if (orderStatus === 'FILL') {
       if (!hasShownViewTx) {
-        let linkElement;
+        let linkElement: React.ReactElement<HTMLAnchorElement>;
         let link;
         const notificationMessage = translateRaw('SUCCESS_3') + outputTx;
         // everything but BTC is a token

common/libs/nodes/etherscan/client.ts

@@ -5,7 +5,7 @@ import { EtherscanRequest } from './types';
 export default class EtherscanClient extends RPCClient {
   public encodeRequest(request: EtherscanRequest): string {
     const encoded = new URLSearchParams();
-    Object.keys(request).forEach(key => {
+    Object.keys(request).forEach((key: keyof EtherscanRequest) => {
       if (request[key]) {
         encoded.set(key, request[key]);
       }

common/libs/validators.ts

@@ -56,7 +56,7 @@ export function isValidENSAddress(address: string): boolean {
       test: true,
       reverse: true
     };
-    if (validTLDs[tld]) {
+    if (validTLDs[tld as keyof typeof validTLDs]) {
       return true;
     }
   } catch (e) {
@@ -173,7 +173,10 @@ function formatErrors(response: JsonRpcResponse, apiType: string) {
   return `Invalid ${apiType} Error`;
 }
 
-const isValidEthCall = (response: JsonRpcResponse, schemaType) => (apiName, cb?) => {
+const isValidEthCall = (response: JsonRpcResponse, schemaType: typeof schema.RpcNode) => (
+  apiName,
+  cb?
+) => {
   if (!isValidResult(response, schemaType)) {
     if (cb) {
       return cb(response);

common/libs/wallet/non-deterministic/helpers.ts

@@ -20,7 +20,7 @@ enum KeystoreTypes {
 interface ISignWrapper {
   signRawTransaction(rawTx: Tx): Buffer;
   signMessage(msg: string): string;
-  unlock();
+  unlock(): Promise<void>;
 }
 
 export type WrappedWallet = IFullWallet & ISignWrapper;

common/reducers/notifications.ts

@@ -13,7 +13,7 @@ function showNotification(state: State, action: ShowNotificationAction): State {
   return state.concat(action.payload);
 }
 
-function closeNotification(state, action: CloseNotificationAction): State {
+function closeNotification(state: State, action: CloseNotificationAction): State {
   state = [...state];
   state.splice(state.indexOf(action.payload), 1);
   return state;

common/reducers/transaction/sign/sign.ts

@@ -20,7 +20,7 @@ const signLocalTransactionRequested = (state: State): State => ({
 });
 
 const signLocalTransactionSucceeded = (
-  _,
+  _: State,
   { payload }: SignLocalTransactionSucceededAction
 ): State => ({
   indexingHash: payload.indexingHash,
@@ -31,7 +31,7 @@ const signLocalTransactionSucceeded = (
 });
 
 const signWeb3TranscationRequested = (
-  _,
+  _: State,
   { payload }: SignWeb3TransactionSucceededAction
 ): State => ({
   indexingHash: payload.indexingHash,

common/sagas/config.ts

@@ -10,7 +10,7 @@ import {
   select,
   race
 } from 'redux-saga/effects';
-import { NODES } from 'config/data';
+import { NODES, NodeConfig } from 'config/data';
 import {
   makeCustomNodeId,
   getCustomNodeConfigFromId,
@@ -216,13 +216,13 @@ export function* unsetWeb3Node(): SagaIterator {
     return;
   }
 
-  const nodeConfig = yield select(getNodeConfig);
+  const nodeConfig: NodeConfig = yield select(getNodeConfig);
   const newNode = equivalentNodeOrDefault(nodeConfig);
 
   yield put(changeNodeIntent(newNode));
 }
 
-export const equivalentNodeOrDefault = nodeConfig => {
+export const equivalentNodeOrDefault = (nodeConfig: NodeConfig) => {
   const node = Object.keys(NODES)
     .filter(key => key !== 'web3')
     .reduce((found, key) => {

common/typescript/bn.d.ts

@@ -273,7 +273,7 @@ declare module 'bn.js' {
      */
 
     iadd(b: BN): BN;
-    addition;
+
     /**
      * @description addition
      */

package.json

@@ -134,8 +134,7 @@
     "postinstall": "webpack --config=./webpack_config/webpack.dll.js",
     "start": "npm run dev",
     "precommit": "lint-staged",
-    "formatAll":
-      "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override",
+    "formatAll": "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override",
     "prepush": "npm run tslint && npm run tscheck"
   },
   "lint-staged": {

spec/sagas/config.spec.ts

@@ -13,7 +13,7 @@ import {
   unsetWeb3NodeOnWalletEvent,
   equivalentNodeOrDefault
 } from 'sagas/config';
-import { NODES } from 'config/data';
+import { NODES, NodeConfig } from 'config/data';
 import {
   getNode,
   getNodeConfig,
@@ -301,7 +301,7 @@ describe('handleNodeChangeIntent*', () => {
 
 describe('unsetWeb3Node*', () => {
   const node = 'web3';
-  const mockNodeConfig = { network: 'ETH' };
+  const mockNodeConfig = { network: 'ETH' } as any;
   const newNode = equivalentNodeOrDefault(mockNodeConfig);
   const gen = unsetWeb3Node();
 
@@ -332,7 +332,7 @@ describe('unsetWeb3Node*', () => {
 describe('unsetWeb3NodeOnWalletEvent*', () => {
   const fakeAction = {};
   const mockNode = 'web3';
-  const mockNodeConfig = { network: 'ETH' };
+  const mockNodeConfig: Partial<NodeConfig> = { network: 'ETH' };
   const gen = unsetWeb3NodeOnWalletEvent(fakeAction);
 
   it('should select getNode', () => {
@@ -345,7 +345,7 @@ describe('unsetWeb3NodeOnWalletEvent*', () => {
 
   it('should put changeNodeIntent', () => {
     expect(gen.next(mockNodeConfig).value).toEqual(
-      put(changeNodeIntent(equivalentNodeOrDefault(mockNodeConfig)))
+      put(changeNodeIntent(equivalentNodeOrDefault(mockNodeConfig as any)))
     );
   });
 

tsconfig.json

@@ -8,15 +8,22 @@
     "target": "es5",
     "allowJs": true,
     "baseUrl": "./common/",
-    "lib": ["es2017", "dom"],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "noEmitOnError": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
-  "include": ["./common/", "spec", "./node_modules/types-rlp/index.d.ts"],
+  "include": [
+    "./common/",
+    "spec",
+    "./node_modules/types-rlp/index.d.ts"
+  ],
   "awesomeTypescriptLoaderOptions": {
     "transpileOnly": true
   }
-}
+}