Connect wallet dialog redux

ts/components/dialogs/connect_wallet_dialog.tsx

@@ -128,12 +128,12 @@ const WalletCategoryStyling = styled.div`
     }
 `;
 
-interface IWalletCategoryProps {
+interface WalletCategoryProps {
     title: string;
-    providers: IProviderInfo[];
+    providers: ProviderInfo[];
 }
 
-const WalletCategory = ({ title, providers }: IWalletCategoryProps) => {
+const WalletCategory = ({ title, providers }: WalletCategoryProps) => {
     return (
         <WalletCategoryStyling>
             <Heading asElement="h5" color={colors.textDarkSecondary} size={20} marginBottom="15px">
@@ -212,12 +212,12 @@ const DashboardUrlWrapper = styled.div`
     user-select: all;
 `;
 
-interface IOtherWalletScreenProps {
+interface OtherWalletScreenProps {
     onDismiss: () => void;
     onGoBack: () => void;
 }
 
-const OtherWalletScreen = ({ onDismiss, onGoBack }: IOtherWalletScreenProps) => (
+const OtherWalletScreen = ({ onDismiss, onGoBack }: OtherWalletScreenProps) => (
     <>
         <HeadingRow>
             <ButtonBack isTransparent={true} isNoBorder={true} padding="0px" onClick={onGoBack}>
@@ -241,29 +241,30 @@ const OtherWalletScreen = ({ onDismiss, onGoBack }: IOtherWalletScreenProps) =>
     </>
 );
 
-interface IConnectWalletDialogProps {
-    onDismiss: () => void;
+interface ConnectWalletDialogProps {
     isOpen: boolean;
+    onDismiss: () => void;
 }
 
-interface IProviderInfo {
+interface ProviderInfo {
     name: string;
     id: string;
     description?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
 }
 
-interface IWalletProviderCategory {
+interface WalletProviderCategory {
     title: string;
-    providers: IProviderInfo[];
+    providers: ProviderInfo[];
 }
 
-export const ConnectWalletDialog = ({ onDismiss, isOpen }: IConnectWalletDialogProps) => {
+export const ConnectWalletDialog = ({ isOpen, onDismiss }: ConnectWalletDialogProps) => {
     const [shouldShowOtherWallets, setShouldShowOtherWallets] = React.useState(false);
     const isMobile = utils.isMobileOperatingSystem();
+    const onGoBack = () => setShouldShowOtherWallets(false);
 
-    let walletProviders: IWalletProviderCategory[];
+    let walletProviders: WalletProviderCategory[];
     if (isMobile) {
         walletProviders = [
             {
@@ -315,7 +316,7 @@ export const ConnectWalletDialog = ({ onDismiss, isOpen }: IConnectWalletDialogP
         <StyledDialogOverlay isOpen={isOpen}>
             <StyledDialogContent>
                 {isMobile && shouldShowOtherWallets ? (
-                    <OtherWalletScreen onDismiss={onDismiss} onGoBack={() => setShouldShowOtherWallets(false)} />
+                    <OtherWalletScreen onDismiss={onDismiss} onGoBack={onGoBack} />
                 ) : (
                     <>
                         <HeadingRow>

ts/components/docs/header/header.tsx

@@ -13,7 +13,7 @@ import { Logo } from 'ts/components/logo';
 import { FlexWrap } from 'ts/components/newLayout';
 
 import { colors } from 'ts/style/colors';
-import { IThemeValuesInterface } from 'ts/style/theme';
+import { ThemeValuesInterface } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
 import { WebsitePaths } from 'ts/types';
@@ -149,7 +149,7 @@ const LinkWrap = styled.li`
     }
 `;
 
-const linkStyles = css<{ theme: IThemeValuesInterface }>`
+const linkStyles = css<{ theme: ThemeValuesInterface }>`
     color: ${({ theme }) => theme.textColor};
     opacity: 0.5;
     transition: opacity 0.35s;

ts/components/dropdowns/dropdown_resources.tsx

@@ -3,14 +3,14 @@ import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 import { Column, FlexWrap } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
-import { IThemeValuesInterface } from 'ts/style/theme';
+import { ThemeValuesInterface } from 'ts/style/theme';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 import { Link } from '../documentation/shared/link';
 
 interface Props {
-    theme: IThemeValuesInterface;
+    theme: ThemeValuesInterface;
 }
 
 interface LinkConfig {

ts/components/header.tsx

@@ -12,7 +12,7 @@ import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobile_nav';
 import { FlexWrap } from 'ts/components/newLayout';
 
-import { IThemeValuesInterface } from 'ts/style/theme';
+import { ThemeValuesInterface } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
 import { WebsitePaths } from 'ts/types';
@@ -21,7 +21,7 @@ interface HeaderProps {
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
-    theme: IThemeValuesInterface;
+    theme: ThemeValuesInterface;
 }
 
 interface NavItemProps {

ts/components/staking/header/header.tsx

@@ -12,29 +12,30 @@ import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { FlexWrap } from 'ts/components/newLayout';
 
-import { IThemeValuesInterface } from 'ts/style/theme';
+import { ThemeValuesInterface } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
 import { WebsitePaths } from 'ts/types';
 
-interface IHeaderProps {
+interface HeaderProps {
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
+    onOpenConnectWalletDialog: () => void;
 }
 
-interface INavLinkProps {
-    link: INavItems;
+interface NavLinkProps {
+    link: NavItems;
     key: string;
 }
 
-interface INavItems {
+interface NavItems {
     url?: string;
     id?: string;
     text?: string;
 }
 
-const navItems: INavItems[] = [
+const navItems: NavItems[] = [
     {
         id: 'staking',
         text: 'Staking',
@@ -52,27 +53,26 @@ const navItems: INavItems[] = [
     },
 ];
 
-export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }) => {
+export const Header: React.FC<HeaderProps> = ({ isNavToggled, toggleMobileNav, onOpenConnectWalletDialog }) => {
     const onUnpin = () => {
         if (isNavToggled) {
             toggleMobileNav();
         }
     };
 
-    // TODO(kimpers): hook up wallet connection to sub menu
-    const openConnectWalletDialog = () => {
+    const unpinAndOpenWalletDialog = () => {
         onUnpin();
-        // tslint:disable-next-line:no-console
-        console.log('TODO: open connect wallet dialog');
+        onOpenConnectWalletDialog();
     };
 
     const logoutWallet = () => {
         onUnpin();
+        // TODO(kimpers): connect logout wallet button
         // tslint:disable-next-line:no-console
         console.log('TODO: logout wallet');
     };
 
-    const subMenu = <SubMenu openConnectWalletDialogCB={openConnectWalletDialog} logoutWalletCB={logoutWallet} />;
+    const subMenu = <SubMenu openConnectWalletDialogCB={unpinAndOpenWalletDialog} logoutWalletCB={logoutWallet} />;
     const isWalletConnected = false;
 
     return (
@@ -124,7 +124,7 @@ export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }
     );
 };
 
-const NavItem: React.FC<INavLinkProps> = ({ link }) => {
+const NavItem: React.FC<NavLinkProps> = ({ link }) => {
     const linkElement = link.url ? (
         <StyledNavLink to={link.url}>{link.text}</StyledNavLink>
     ) : (
@@ -133,16 +133,20 @@ const NavItem: React.FC<INavLinkProps> = ({ link }) => {
     return <LinkWrap>{linkElement}</LinkWrap>;
 };
 
-const StyledHeader = styled.header<IHeaderProps>`
+interface StyledHeaderProps {
+    isNavToggled?: boolean;
+}
+
+const StyledHeader = styled.header<StyledHeaderProps>`
     padding: 30px;
     background-color: white;
 `;
 
-interface IWalletConnectedIndicatorProps {
+interface WalletConnectedIndicatorProps {
     isConnected: boolean;
     isNavToggled: boolean;
 }
-const WalletConnectedIndicator = styled.div<IWalletConnectedIndicatorProps>`
+const WalletConnectedIndicator = styled.div<WalletConnectedIndicatorProps>`
     width: 12px;
     height: 12px;
     border-radius: 50%;
@@ -188,7 +192,7 @@ const LinkWrap = styled.li`
     }
 `;
 
-const linkStyles = css<{ theme: IThemeValuesInterface }>`
+const linkStyles = css<{ theme: ThemeValuesInterface }>`
     color: ${({ theme }) => theme.textColor};
     opacity: 0.5;
     transition: opacity 0.35s;
@@ -215,7 +219,6 @@ const HeaderWrap = styled(FlexWrap)`
     justify-content: space-between;
     align-items: center;
 
-
     @media (max-width: 800px) {
         padding-top: 0;
         display: flex;

ts/components/staking/layout/staking_page_layout.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
 import { SiteWrap } from 'ts/components/siteWrap';
-import { Header as StakingHeader } from 'ts/components/staking/header/header';
+import { Header as StakingHeader } from 'ts/containers/staking/header/header';
 
 import { DocumentTitle } from 'ts/components/document_title';
 
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
+import { ConnectWalletDialog } from 'ts/containers/connect_wallet_dialog';
+
 interface IStakingPageLayoutProps {
     children: React.ReactNode;
     title: string;
@@ -29,6 +31,7 @@ export const StakingPageLayout: React.FC<IStakingPageLayoutProps> = props => {
             />
 
             {props.children}
+            <ConnectWalletDialog />
         </SiteWrap>
     );
 };

ts/containers/connect_wallet_dialog.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { State } from 'ts/redux/reducer';
+
+import { ConnectWalletDialog as ConnectWalletDialogComponent } from 'ts/components/dialogs/connect_wallet_dialog';
+import { Dispatcher } from 'ts/redux/dispatcher';
+
+interface ConnectWalletDialogProps {}
+
+// TODO(kimpers): add blockchain integration
+interface ConnectedState {
+    isOpen: boolean;
+}
+
+interface ConnectedDispatch {
+    onDismiss: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: ConnectWalletDialogProps): ConnectedState => ({
+    isOpen: state.isConnectWalletDialogOpen,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => {
+    const dispatcher = new Dispatcher(dispatch);
+
+    return {
+        onDismiss: (): void => {
+            dispatcher.updateIsConnectWalletDialogOpen(false);
+        },
+    };
+};
+
+export const ConnectWalletDialog: React.ComponentClass<ConnectWalletDialogProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(ConnectWalletDialogComponent);

ts/containers/staking/header/header.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { State } from 'ts/redux/reducer';
+
+import { Header as HeaderComponent } from 'ts/components/staking/header/header';
+import { Dispatcher } from 'ts/redux/dispatcher';
+
+interface HeaderProps {
+    location?: Location;
+    isNavToggled?: boolean;
+    toggleMobileNav?: () => void;
+}
+
+interface ConnectedDispatch {
+    onOpenConnectWalletDialog: () => void;
+}
+
+interface ConnectedState {}
+
+// TODO(kimpers): Get connected wallet from state after connecting with blockchain
+const mapStateToProps = (_: State, _ownProps: HeaderProps): ConnectedState => ({});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => {
+    const dispatcher = new Dispatcher(dispatch);
+
+    return {
+        onOpenConnectWalletDialog: (): void => {
+            dispatcher.updateIsConnectWalletDialogOpen(true);
+        },
+    };
+};
+
+export const Header: React.ComponentClass<HeaderProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(HeaderComponent);