import { Card , Colors , H5 } from "@blueprintjs/core" ; import { AddressIcon , LedgerIcon } from "assets/images" ; import { COLORS } from "constants/colors" ; import { SIGNIN_TYPE } from "modules/ledger/actions" ; import Modules , { ReduxStoreState } from "modules/root" ; import { i18nSelector } from "modules/settings/selectors" ; import React from "react" ; import { connect } from "react-redux" ; import styled , { CSSProperties } from "styled-components" ; import Analytics from "tools/analytics-utils" ; import { capitalizeString , onPath } from "tools/client-utils" ; import { composeWithProps } from "tools/context-utils" ; import { IThemeProps } from "ui/containers/ThemeContainer" ; import { View } from "./SharedComponents" ; import Toast from "./Toast" ; /** ===========================================================================
 * React Component
 * ============================================================================
 */ class LoginStart extends React . Component < IProps , { } > { render ( ) { const enableThemedStyles = ! this . onLandingPage ( ) ; const { t } = this . props . i18n ; const { signinNetworkName } = this . props . ledgerDialog ; return ( < View > < H5 style = { { textAlign : "center" , color : enableThemedStyles ? undefined : COLORS . DARK_TITLE , } } > { t ( "Please select a login option to begin" ) } < /H5> < WrappedRow > < Card interactive data - cy = "ledger-signin" className = "ledger-login-card" onClick = { this . handleChooseSelectNetwork } style = { getCardButtonStyles ( this . props . settings . isDesktop ) } > < LedgerIcon /> < LoginText className = "login-text" > { signinNetworkName ? `Sign in to ${ capitalizeString ( signinNetworkName ) } Network` : this . props . ledger . connected ? "Switch Network" : t ( "Sign in with Ledger" ) } < /LoginText> < /Card> < Card interactive data - cy = "address-signin" className = "address-login-card" onClick = { this . handleSignInWithAddress } style = { getCardButtonStyles ( this . props . settings . isDesktop ) } > < AddressIcon /> < LoginText className = "login-text" > { this . props . ledger . address ? t ( "Change address" ) : t ( "Sign in with address" ) } < /LoginText> < /Card> < /WrappedRow> < InfoTextBottom > Connect your Ledger Device or search any address to sign in to Anthem . < /InfoTextBottom> < /View>); } handleChooseSelectNetwork = ( ) => { if ( this . props . settings . isDesktop ) { const { signinNetworkName } = this . props . ledgerDialog ; if ( signinNetworkName ) { this . props . openLedgerDialog ( { signinType : "LEDGER" , ledgerAccessType : "SIGNIN" , } ) ; } else { this . props . openSelectNetworkDialog ( { signinType : "LEDGER" , ledgerAccessType : "SIGNIN" , ledgerActionType : undefined , } ) ; } } else { Toast . warn ( "Ledger integration is only available on desktop." ) ; } } ; handleSignInWithAddress = ( ) => { this . trackLogin ( "ADDRESS" ) ; this . props . openLedgerDialog ( { signinType : "ADDRESS" , ledgerAccessType : "SIGNIN" , } ) ; } ; trackLogin = ( type ) => { if ( this . onLandingPage ( ) ) { Analytics . loginStart ( type ) ; } else { Analytics . loginUpdate ( type ) ; } } ; onLandingPage = ( ) => { return onPath ( window . location . pathname , "/landing" ) ; } ; } /** ===========================================================================
 * Styles and Helpers
 * ============================================================================
 */ const getCardButtonStyles = ( isDesktop ) : React . CSSProperties => { const dimensions = isDesktop ? { width : 190 , height : 190 , } : { width : 145 , height : 145 , } ; return { ... dimensions , margin : 12 , borderRadius : 0 , display : "flex" , alignItems : "center" , flexDirection : "column" , justifyContent : "center" , borderColor : COLORS . CARD_BORDER , } ; } ; const LoginText = styled . h4 `
  margin-top: 24px;
  font-size: 14px;
  text-align: center;
  color: ${ ( props ) => props . theme . isDarkTheme ? COLORS . LIGHT_WHITE : COLORS . DARK_TITLE };
` ; const InfoTextBottom = styled . p `
  font-weight: 100;
  font-size: 16px;
  text-align: center;
  margin: auto;
  max-width: 415px;
  margin-top: 12px;
  color: ${ ( props ) => props . theme . isDarkTheme ? Colors . LIGHT_GRAY3 : COLORS . DARK_TITLE };

  @media (max-width: 1080px) {
    max-width: 325px;
  }
` ; const WrappedRow = styled . div `
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
` ; /** ===========================================================================
 * Props
 * ============================================================================
 */ const mapStateToProps = ( state ) => ( { i18n : i18nSelector ( state ) , settings : Modules . selectors . settings ( state ) , ledger : Modules . selectors . ledger . ledgerSelector ( state ) , ledgerDialog : Modules . selectors . ledger . ledgerDialogSelector ( state ) , } ) ; const dispatchProps = { openLedgerDialog : Modules . actions . ledger . openLedgerDialog , openSelectNetworkDialog : Modules . actions . ledger . openSelectNetworkDialog , } ; type ConnectProps = ReturnType < typeof mapStateToProps > & typeof dispatchProps ; const withProps = connect ( mapStateToProps , dispatchProps ) ; interface ComponentProps { } interface IProps extends ComponentProps , ConnectProps { } /** ===========================================================================
 * Export
 * ============================================================================
 */ export default composeWithProps < ComponentProps > ( withProps ) ( LoginStart ) ;