Skip to content

Commit

Permalink
fix(TS): add react-redux and redux @types
Browse files Browse the repository at this point in the history
  • Loading branch information
Philip London committed Jan 27, 2020
1 parent 9687bee commit 1854dac
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 81 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@
"@types/ramda": "0.26.39",
"@types/react": "16.9.17",
"@types/react-intl": "3.0.0",
"@types/react-redux": "4.4.40",
"@types/redux": "3.6.0",
"@types/redux-form": "7.4.2",
"@types/styled-components": "4.0.3",
"@typescript-eslint/eslint-plugin": "2.13.0",
"@typescript-eslint/parser": "2.13.0",
Expand Down
73 changes: 35 additions & 38 deletions ...ages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { all, path, propEq, toLower } from 'ramda'
import { all, path, propEq } from 'ramda'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { FormattedMessage } from 'react-intl'
import React from 'react'
Expand Down Expand Up @@ -108,15 +109,15 @@ const { TIERS_STATES } = model.profile

type LinkDispatchPropsType = {
goToSwap: () => void,
verifyIdentity: typeof actions.components.identityVerification
identityVerificationActions: typeof actions.components.identityVerification
}

type OwnProps = {
column: boolean,
emailVerified: boolean,
mobileVerified: boolean,
userData: UserDataType,
userTiers: UserTiersType,
emailVerified: boolean
mobileVerified: boolean
userData: UserDataType
userTiers: UserTiersType
tier: 1 | 2
}

Expand All @@ -130,9 +131,9 @@ export const TierCard = ({
tier,
userData,
userTiers,
verifyIdentity,
identityVerificationActions
}: Props) => {
const tierData = userTiers.find((userTier) => userTier.index === tier)
const tierData = userTiers.find(userTier => userTier.index === tier)
if (!tierData) return null
const limitType: 'daily' | 'annual' = TIERS[tier].limit.toLowerCase()
const tierFiatLimit =
Expand All @@ -151,35 +152,35 @@ export const TierCard = ({
return (
<Wrapper className={className}>
{tier === 2 && (
<Announcement uppercase weight={500} size='18px' color='white'>
<Announcement uppercase weight={500} size="18px" color="white">
<FormattedMessage
id='components.identityverification.tiercard.getfreecrypto'
defaultMessage='Get Free Crypto'
id="components.identityverification.tiercard.getfreecrypto"
defaultMessage="Get Free Crypto"
/>
</Announcement>
)}
<Container>
<Header color='marketing-primary' uppercase>
<Header color="marketing-primary" uppercase>
{headers[path([tier, 'level'], TIERS)]}
</Header>
<Content>
<Row>
<Column>
<Text size='32px' weight={600} color='marketing-secondary'>
<Text size="32px" weight={600} color="marketing-secondary">
{tierFiatLimit}
</Text>
<Text
size='14px'
size="14px"
weight={500}
color='textBlack'
color="textBlack"
style={{ marginTop: '8px' }}
>
{tierLimit}
</Text>
<Text
size='14px'
size="14px"
weight={500}
color='gray-3'
color="gray-3"
style={{ marginTop: '7px' }}
>
{tierStatus}
Expand All @@ -197,9 +198,9 @@ export const TierCard = ({
}) && (
<Icon
style={{ marginLeft: '5px' }}
color='success'
size='12px'
name='check'
color="success"
size="12px"
name="check"
/>
)}
</TextGroup>
Expand All @@ -210,16 +211,16 @@ export const TierCard = ({
{tierData.state === TIERS_STATES.NONE && (
<ActionButton
jumbo
className='actionButton'
className="actionButton"
fullwidth
nature='primary'
onClick={verifyIdentity}
nature="primary"
onClick={() => identityVerificationActions.verifyIdentity(tier)}
data-e2e={`continueKycTier${tier}Btn`}
>
{tierStarted ? (
<FormattedMessage
id='components.identityverification.tiercard.continue'
defaultMessage='Continue'
id="components.identityverification.tiercard.continue"
defaultMessage="Continue"
/>
) : (
ctas[path([tier, 'level'], TIERS)]
Expand All @@ -228,16 +229,16 @@ export const TierCard = ({
)}
{tierData.state === TIERS_STATES.VERIFIED && (
<ActionButton
className='actionButton'
className="actionButton"
jumbo
fullwidth
nature='primary'
nature="primary"
onClick={goToSwap}
data-e2e='swapNowBtn'
data-e2e="swapNowBtn"
>
<FormattedMessage
id='components.identityverification.tiercard.swap_now'
defaultMessage='Swap Now'
id="components.identityverification.tiercard.swap_now"
defaultMessage="Swap Now"
/>
</ActionButton>
)}
Expand All @@ -246,17 +247,13 @@ export const TierCard = ({
)
}

TierCard.defaultProps = {
outsideOfProfile: false
}

const mapDispatchToProps = (dispatch, { tier }) => ({
verifyIdentity: () =>
dispatch(actions.components.identityVerification.verifyIdentity(tier)),
const mapDispatchToProps = dispatch => ({
identityVerificationActions: () =>
bindActionCreators(actions.components.identityVerification, dispatch),
goToSwap: () => dispatch(actions.router.push('/swap'))
})

export default connect(
export default connect<any, any, any>(
getData,
mapDispatchToProps
)(TierCard)
82 changes: 47 additions & 35 deletions packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,27 @@ const GlobalStyle = createGlobalStyle`
}
`

class App extends React.PureComponent<{ store: any, history: any, persistor: any, isAuthenticated: boolean, supportedCoins: any }> {
render () {
class App extends React.PureComponent<{
store: any
history: any
persistor: any
isAuthenticated: boolean
supportedCoins: any
}> {
render() {
const {
store,
history,
persistor,
isAuthenticated,
supportedCoins
}: { store: any, history: any, persistor: any, isAuthenticated: boolean, supportedCoins: any } = this.props
}: {
store: any
history: any
persistor: any
isAuthenticated: boolean
supportedCoins: any
} = this.props
return (
<Provider store={store}>
<TranslationsProvider>
Expand All @@ -72,74 +84,74 @@ class App extends React.PureComponent<{ store: any, history: any, persistor: any
<MediaContextProvider>
<ConnectedRouter history={history}>
<Switch>
<PublicLayout path='/login' component={Login} />
<PublicLayout path='/logout' component={Logout} />
<PublicLayout path='/help' component={Help} />
<PublicLayout path='/recover' component={Recover} />
<PublicLayout path='/reminder' component={Reminder} />
<PublicLayout path='/reset-2fa' component={Reset2FA} />
<PublicLayout path="/login" component={Login} />
<PublicLayout path="/logout" component={Logout} />
<PublicLayout path="/help" component={Help} />
<PublicLayout path="/recover" component={Recover} />
<PublicLayout path="/reminder" component={Reminder} />
<PublicLayout path="/reset-2fa" component={Reset2FA} />
<PublicLayout
path='/mobile-login'
path="/mobile-login"
component={MobileLogin}
/>
<PublicLayout
path='/reset-two-factor'
path="/reset-two-factor"
component={Reset2FAToken}
/>
<PublicLayout
path='/verify-email'
path="/verify-email"
component={VerifyEmailToken}
/>
<PublicLayout path='/signup' component={Register} />
<PublicLayout path="/signup" component={Register} />
<PublicLayout
path='/authorize-approve'
path="/authorize-approve"
component={AuthorizeLogin}
/>
<PublicLayout
path='/upload-document/success'
path="/upload-document/success"
component={UploadDocumentsSuccess}
exact
/>
<PublicLayout
path='/upload-document/:token'
path="/upload-document/:token"
component={UploadDocuments}
/>
<PublicLayout path='/wallet' component={Login} />
<WalletLayout path='/home' component={Home} />
<WalletLayout path='/buy-sell' component={BuySell} />
<PublicLayout path="/wallet" component={Login} />
<WalletLayout path="/home" component={Home} />
<WalletLayout path="/buy-sell" component={BuySell} />
<WalletLayout
path='/swap/history'
path="/swap/history"
component={ExchangeHistory}
/>
<WalletLayout
path='/swap/profile'
path="/swap/profile"
component={ExchangeProfile}
/>
<WalletLayout path='/airdrops' component={Airdrops} />
<WalletLayout path='/swap' component={Exchange} exact />
<WalletLayout path='/exchange' component={TheExchange} />
<WalletLayout path='/airdrops' component={Airdrops} />
<WalletLayout path="/airdrops" component={Airdrops} />
<WalletLayout path="/swap" component={Exchange} exact />
<WalletLayout path="/exchange" component={TheExchange} />
<WalletLayout path="/airdrops" component={Airdrops} />
<WalletLayout
path='/security-center'
path="/security-center"
component={SecurityCenter}
/>
<WalletLayout
path='/settings/preferences'
path="/settings/preferences"
component={Preferences}
/>
<WalletLayout
path='/settings/profile'
path="/settings/profile"
component={Profile}
/>
<WalletLayout
path='/settings/addresses'
path="/settings/addresses"
component={Addresses}
/>
<WalletLayout
path='/settings/general'
path="/settings/general"
component={General}
/>
<WalletLayout path='/lockbox' component={Lockbox} />
<WalletLayout path="/lockbox" component={Lockbox} />
{values(
map(
coin =>
Expand All @@ -155,10 +167,10 @@ class App extends React.PureComponent<{ store: any, history: any, persistor: any
)
)}
{isAuthenticated ? (
<Redirect from='/' to='/home' />
<Redirect from="/" to="/home" />
) : (
<Redirect from='/' to='/login' />
)}
<Redirect from="/" to="/login" />
)}
</Switch>
</ConnectedRouter>
<AnalyticsTracker />
Expand All @@ -181,4 +193,4 @@ const mapStateToProps = state => ({
.getOrFail()
})

export default connect(mapStateToProps)(App)
export default connect<any, any, any>(mapStateToProps)(App)

0 comments on commit 1854dac

Please sign in to comment.