TS wallets (#17733)

* Initial import

* more fixups

* fixup connects

* fix errors

* unnecessary commas

* more tidy up

* fix props exports

* fix props exports

* fix props exports

* fix propProvider

* rebase master

* Review from Marco

* one more

* rebase master

shared/chat/payments/confirm/index.tsx

@@ -125,13 +125,15 @@ const PaymentsConfirm = (props: Props) => {
       onClose={props.onCancel}
       onSendClick={props.onAccept}
       onBack={props.onCancel}
-      participantsComp={() =>
-        props.payments.map(p => (
-          <Kb.Box2 key={p.username} direction="horizontal" fullWidth={true} style={styles.paymentContainer}>
-            <PaymentRow {...p} />
-          </Kb.Box2>
-        ))
-      }
+      participantsComp={() => (
+        <>
+          {props.payments.map(p => (
+            <Kb.Box2 key={p.username} direction="horizontal" fullWidth={true} style={styles.paymentContainer}>
+              <PaymentRow {...p} />
+            </Kb.Box2>
+          ))}
+        </>
+      )}
       sendFailed={false}
       waitingKey=""
       sendingIntentionXLM={true}

shared/wallets/airdrop/banner/container.js → shared/wallets/airdrop/banner/container.tsx

@@ -1,12 +1,11 @@
-// @flow
 import Qualify from '.'
 import * as WalletsGen from '../../../actions/wallets-gen'
 import * as RouteTreeGen from '../../../actions/route-tree-gen'
 import * as Constants from '../../../constants/wallets'
 import {connect} from '../../../util/container'
 import flags from '../../../util/feature-flags'
 
-type OwnProps = {||}
+type OwnProps = {}
 
 const mapStateToProps = state => ({
   headerBody: state.wallets.airdropDetails.header.body,
@@ -26,7 +25,7 @@ const mergeProps = (s, d, o) => ({
   ...d,
 })
 
-export default connect<OwnProps, _, _, _, _>(
+export default connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps

shared/wallets/airdrop/banner/index.stories.js → shared/wallets/airdrop/banner/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import * as Sb from '../../../stories/storybook'
 import Banner from '.'

shared/wallets/airdrop/banner/index.js → shared/wallets/airdrop/banner/index.tsx

@@ -1,14 +1,13 @@
-// @flow
 import * as React from 'react'
 import * as Kb from '../../../common-adapters'
 import * as Styles from '../../../styles'
 
-type Props = {|
-  headerBody: string,
-  onCheckQualify: () => void,
-  onCancel: () => void,
-  show: boolean,
-|}
+type Props = {
+  headerBody: string
+  onCheckQualify: () => void
+  onCancel: () => void
+  show: boolean
+}
 
 const Banner = (p: Props) => {
   if (!p.show) return null

shared/wallets/airdrop/container.js → shared/wallets/airdrop/container.tsx

@@ -1,4 +1,3 @@
-// @flow
 import Airdrop from '.'
 import * as WalletsGen from '../../actions/wallets-gen'
 import * as RouteTreeGen from '../../actions/route-tree-gen'
@@ -42,7 +41,7 @@ const mergeProps = (stateProps, dispatchProps) => ({
   title: 'Airdrop',
 })
 
-export default Container.connect<OwnProps, _, _, _, _>(
+export default Container.connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps

shared/wallets/airdrop/index.stories.js → shared/wallets/airdrop/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import * as Sb from '../../stories/storybook'
 import Airdrop from '.'

shared/wallets/airdrop/index.js → shared/wallets/airdrop/index.tsx

@@ -1,31 +1,38 @@
-// @flow
 import * as React from 'react'
 import * as Kb from '../../common-adapters'
 import * as Constants from '../../constants/wallets'
 import * as Styles from '../../styles'
 import {iconMeta} from '../../common-adapters/icon.constants'
 import openURL from '../../util/open-url'
 
-type Props = {|
-  loading: boolean,
-  onBack: () => void,
-  onLoad: () => void,
-  onCheckQualify: () => void,
-  onReject: () => void,
-  signedUp: boolean,
-  headerBody: string,
-  headerTitle: string,
-  sections: $ReadOnlyArray<{|
-    lines: $ReadOnlyArray<{|bullet: boolean, text: string|}>,
-    section: string,
-    icon: ?string,
-  |}>,
-  title: string,
-|}
+type Props = {
+  loading: boolean
+  onBack: () => void
+  onLoad: () => void
+  onCheckQualify: () => void
+  onReject: () => void
+  signedUp: boolean
+  headerBody: string
+  headerTitle: string
+  sections: ReadonlyArray<{
+    lines: ReadonlyArray<{
+      bullet: boolean
+      text: string
+    }>
+    section: string
+    icon: string | null
+  }>
+  title: string
+}
 
-class Loading extends React.Component<{}, {waited: boolean}> {
+class Loading extends React.Component<
+  {},
+  {
+    waited: boolean
+  }
+> {
   state = {waited: false}
-  _id: TimeoutID
+  _id: NodeJS.Timeout
 
   componentDidMount() {
     this._id = setTimeout(() => this.setState({waited: true}), 1000)
@@ -138,7 +145,7 @@ class Airdrop extends React.Component<Props> {
                     </Kb.Box2>
                   ))}
                 </Kb.Box2>
-                {validIcon(b.icon) && <Kb.Icon type={(b.icon: any)} />}
+                {validIcon(b.icon) && <Kb.Icon type={b.icon as any} />}
               </Kb.Box2>
             ))}
           </Kb.Box2>

shared/wallets/airdrop/qualify/container.js → shared/wallets/airdrop/qualify/container.tsx

@@ -1,8 +1,7 @@
-// @flow
 import Qualify from '.'
 import * as WalletsGen from '../../../actions/wallets-gen'
 import * as RouteTreeGen from '../../../actions/route-tree-gen'
-import {connect, type RouteProps} from '../../../util/container'
+import {connect, RouteProps} from '../../../util/container'
 
 type OwnProps = RouteProps<{}, {}>
 
@@ -24,7 +23,7 @@ const mergeProps = (stateProps, dispatchProps) => ({
   state: stateProps.state,
   ...dispatchProps,
 })
-export default connect<OwnProps, _, _, _, _>(
+export default connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps

shared/wallets/airdrop/qualify/index.stories.js → shared/wallets/airdrop/qualify/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import * as Sb from '../../../stories/storybook'
 import * as Kb from '../../../common-adapters'
@@ -67,7 +66,7 @@ class Transitions extends React.Component<any, any> {
   render() {
     return (
       <>
-        <Qualify {...this.props} rows={this.state.rows} state={this.state.state} />
+        <Qualify {...props} {...this.props} rows={this.state.rows} state={this.state.state} />
         <Kb.Button
           label={`state: ${this.state.machineState}`}
           onClick={this._next}

shared/wallets/airdrop/qualify/index.js → shared/wallets/airdrop/qualify/index.tsx

@@ -1,22 +1,21 @@
-// @flow
 import * as React from 'react'
 import * as Kb from '../../../common-adapters'
 import * as Types from '../../../constants/types/wallets'
 import * as Constants from '../../../constants/wallets'
 import * as Styles from '../../../styles'
 import shallowEqual from 'shallowequal'
 
-type Props = {|
-  state: Types.AirdropState,
-  onCancel: () => void,
-  onLoad: () => void,
-  onSubmit: () => void,
-  rows: $ReadOnlyArray<{|
-    title: string,
-    subTitle: string,
-    valid: boolean,
-  |}>,
-|}
+type Props = {
+  state: Types.AirdropState
+  onCancel: () => void
+  onLoad: () => void
+  onSubmit: () => void
+  rows: ReadonlyArray<{
+    title: string
+    subTitle: string
+    valid: boolean
+  }>
+}
 
 const Accepted = p =>
   Styles.isMobile && p.state !== 'accepted' ? null : (
@@ -99,14 +98,15 @@ const Row = p => (
   </Kb.Box2>
 )
 
-type State = {|
-  rowIdxLoaded: number,
-|}
+type State = {
+  rowIdxLoaded: number
+}
+
 class Qualified extends React.PureComponent<Props, State> {
   state = {
     rowIdxLoaded: -1,
   }
-  _loadingTimerID: ?TimeoutID
+  _loadingTimerID: NodeJS.Timeout | null
 
   _kickNextLoad = () => {
     if (__STORYSHOT__) {

shared/wallets/asset/container.js → shared/wallets/asset/container.tsx

@@ -1,13 +1,12 @@
-// @flow
 import * as Types from '../../constants/types/wallets'
 import * as Constants from '../../constants/wallets'
 import {connect} from '../../util/container'
 import Asset from '.'
 import openURL from '../../util/open-url'
 
 type OwnProps = {
-  accountID: Types.AccountID,
-  index: number,
+  accountID: Types.AccountID
+  index: number
 }
 
 const mapStateToProps = (state, ownProps: OwnProps) => ({
@@ -30,7 +29,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   }
 }
 
-export default connect<OwnProps, _, _, _, _>(
+export default connect(
   mapStateToProps,
   () => ({}),
   mergeProps

shared/wallets/asset/index.stories.js → shared/wallets/asset/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import * as Constants from '../../constants/wallets'
 import {Box, Divider} from '../../common-adapters'

shared/wallets/asset/index.js → shared/wallets/asset/index.tsx

@@ -1,25 +1,24 @@
-// @flow
 import * as React from 'react'
 import * as Types from '../../constants/types/wallets'
 import * as Kb from '../../common-adapters'
 import * as Styles from '../../styles'
 
 export type Props = {
-  availableToSend: string, // non-empty only if native currency
-  balance: string,
-  code: string, // The same as `name` except for XLM
-  equivAvailableToSend: string, // non-empty only if native currency e.g. '$123.45 USD'
-  equivBalance: string, // non-empty only if native currency
-  expanded?: boolean, // for testing
-  issuerName: string, // verified issuer domain name, 'Stellar network' or 'Unknown'
-  issuerAccountID: string, // issuing public key
-  name: string, // Asset code or 'Lumens'
-  reserves: Array<Types.Reserve>, // non-empty only if native currency
-  openStellarURL: () => void,
+  availableToSend: string // non-empty only if native currency
+  balance: string
+  code: string // The same as `name` except for XLM
+  equivAvailableToSend: string // non-empty only if native currency e.g. '$123.45 USD'
+  equivBalance: string // non-empty only if native currency
+  expanded?: boolean // for testing
+  issuerName: string // verified issuer domain name, 'Stellar network' or 'Unknown'
+  issuerAccountID: string // issuing public key
+  name: string // Asset code or 'Lumens'
+  reserves: Array<Types.Reserve> // non-empty only if native currency
+  openStellarURL: () => void
 }
 
 type State = {
-  expanded: boolean,
+  expanded: boolean
 }
 
 export default class Asset extends React.Component<Props, State> {
@@ -81,11 +80,11 @@ export default class Asset extends React.Component<Props, State> {
 }
 
 type BalanceSummaryProps = {
-  availableToSend: string,
-  equivAvailableToSend: string,
-  reserves: Array<Types.Reserve>,
-  total: string,
-  openStellarURL: () => void,
+  availableToSend: string
+  equivAvailableToSend: string
+  reserves: Array<Types.Reserve>
+  total: string
+  openStellarURL: () => void
 }
 
 const BalanceSummary = (props: BalanceSummaryProps) => (
@@ -142,7 +141,7 @@ const BalanceSummary = (props: BalanceSummaryProps) => (
 )
 
 type IssuerAccountIDProps = {
-  issuerAccountID: string,
+  issuerAccountID: string
 }
 
 const IssuerAccountID = (props: IssuerAccountIDProps) => (

shared/wallets/banner/index.stories.js → shared/wallets/banner/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import {storiesOf} from '../../stories/storybook'
 import {Box} from '../../common-adapters'

shared/wallets/banner/index.js → shared/wallets/banner/index.tsx

@@ -1,15 +1,15 @@
-// @flow
 import * as React from 'react'
 import {Box2, Text} from '../../common-adapters'
-import type {Background} from '../../common-adapters/text'
+// @ts-ignore not typed yet
+import {Background} from '../../common-adapters/text'
 import * as Styles from '../../styles'
 
 type Props = {
-  background: Background,
-  onAction?: ?() => void,
-  reviewProofs?: boolean,
-  sendFailed?: boolean,
-  text: string,
+  background: Background
+  onAction?: (() => void) | null
+  reviewProofs?: boolean
+  sendFailed?: boolean
+  text: string
 }
 
 const Banner = (props: Props) => (

shared/wallets/common/account-entry/index.stories.js → shared/wallets/common/account-entry/index.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import * as Sb from '../../../stories/storybook'
 import AccountEntry from '.'