Merge pull request #1466 from 0xProject/feature/website/remove-ts-warnings

[website] Fix TS errors

9 files changed, 24 insertions, 12 deletions

diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index bdcc5c29d..8d66a4afa 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -1,20 +1,24 @@
+import { History, Location } from 'history';
 import * as React from 'react';
-import { withRouter } from 'react-router-dom';
+import { match, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Button } from 'ts/@next/components/button';
 import { Icon } from 'ts/@next/components/icon';
 
-interface Props {
+interface BaseComponentProps {
     icon?: string;
     iconComponent?: React.ReactNode;
     title: string;
     linkLabel: string;
     linkUrl?: string;
     linkAction?: () => void;
+    history: History;
+    location: Location;
+    match: match<any>;
 }
 
-class BaseComponent extends React.PureComponent<Props> {
+class BaseComponent extends React.PureComponent<BaseComponentProps> {
     public onClick = (): void => {
         const { linkAction, linkUrl } = this.props;
 
@@ -44,7 +48,7 @@ class BaseComponent extends React.PureComponent<Props> {
     }
 }
 
-export const BlockIconLink = withRouter(BaseComponent);
+export const BlockIconLink = withRouter<BaseComponentProps>(BaseComponent);
 
 const Wrap = styled.div`
     width: calc(50% - 15px);
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 675f69308..348f1b7b4 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -37,7 +37,7 @@ export const Button = (props: ButtonInterface) => {
         linkElem = ReactRouterLink;
     }
 
-    const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+    const Component = linkElem ? ButtonBase.withComponent<any>(linkElem) : ButtonBase;
     const targetProp = href && target ? { target } : {};
 
     return (
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 24bfa28ba..e886923df 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -29,7 +29,7 @@ interface NavItemProps {
     id?: string;
     text?: string;
     dropdownWidth?: number;
-    dropdownComponent?: React.ReactNode;
+    dropdownComponent?: React.FunctionComponent<any>;
     shouldOpenInNewTab?: boolean;
 }
 
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index a7711451b..080a0abcc 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -14,6 +14,7 @@ interface LinkInterface {
         textColor: string;
     };
     shouldOpenInNewTab?: boolean;
+    target?: string;
 }
 
 export const Link = (props: LinkInterface) => {
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 122036b9a..13cf46fca 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -96,13 +96,16 @@ const Overlay = styled.div`
     cursor: pointer;
 `;
 
+interface SectionProps {
+    isDark?: boolean;
+}
 const Section =
     styled.div <
-    { isDark: boolean } >
+    SectionProps >
     `
     width: 100%;
     padding: 15px 30px;
-    background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
+    background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
 `;
 
 const Grid =
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index d4d53402a..e3062b895 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -13,6 +13,7 @@ interface InputProps {
     type?: string;
     errors?: ErrorProps;
     isErrors?: boolean;
+    required?: boolean;
 }
 
 interface ErrorProps {
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index ce6b04993..8572ccc5f 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -15,6 +15,7 @@ interface InputProps {
     type: string;
     label: string;
     textColor: string;
+    required?: boolean;
 }
 
 interface ArrowProps {
@@ -78,7 +79,7 @@ class Form extends React.Component<FormProps> {
         );
     }
 
-    private async _onSubmitAsync(e: Event): Promise<void> {
+    private async _onSubmitAsync(e: React.FormEvent<HTMLFormElement>): Promise<void> {
         e.preventDefault();
 
         const email = this.emailInput.current.value;
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx
index eb3e7210d..a259e3438 100644
--- a/packages/website/ts/@next/pages/community.tsx
+++ b/packages/website/ts/@next/pages/community.tsx
@@ -253,9 +253,11 @@ const EventContent = styled.div`
     padding: 30px 30px;
 `;
 
-// Community Links
+interface StyledCommunityLinkProps {
+    bgColor: string;
+}
 const StyledCommunityLink = styled.a`
-    background-color: ${(props: CommunityLinkProps) => props.bgColor};
+    background-color: ${(props: StyledCommunityLinkProps) => props.bgColor};
     color: ${colors.white};
     width: 175px;
     height: 175px;
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index d4497ac92..3f00e33e2 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -128,7 +128,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
         window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
     };
-    private readonly _handleSRASelection = (event: Event) => {
+    private readonly _handleSRASelection = (event: React.ChangeEvent<HTMLSelectElement>) => {
         const sraEndpoint = event.target.value;
         const newConfig: ZeroExInstantBaseConfig = {
             ...this.props.value,