Cleanup

src/front/global.d.ts

@@ -2,23 +2,24 @@ import 'react'
 
 declare module 'react' {
   interface Attributes {
-    styleName?: string;
-    type?: string;
-    title?: any;
+    styleName?: string
+    type?: string
+    title?: any
+    alt?: string
   }
 }
 
 declare global {
   interface IEtheriumProvider {
-    [key: string]: any;
-    isLiquality?: boolean;
-    isTrust?: boolean;
-    isMetaMask?: boolean;
+    [key: string]: any
+    isLiquality?: boolean
+    isTrust?: boolean
+    isMetaMask?: boolean
   }
 
   interface Window {
-    [key: string]: any;
-    ethereum?: IEtheriumProvider;
+    [key: string]: any
+    ethereum?: IEtheriumProvider
   }
 
   interface Navigator {

src/front/shared/components/Avatar/Avatar.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
 import config from 'helpers/externalConfig'
 
 import { toSvg } from 'jdenticon'
@@ -21,8 +20,17 @@ const hasGravatar = (ethAddress) => {
   return false
 }
 
-const Avatar = ({ value, className, size, ownerEthAddress }) => {
+type ComponentProps = {
+  value: string
+  size?: number
+  className?: string
+  ownerEthAddress?: string
+}
+
+const Avatar = (props: ComponentProps) => {
+  const { value, className, size = 35, ownerEthAddress } = props
   let avatarUrl = `data:image/svg+xml,${encodeURIComponent(toSvg(value, size))}`
+
   if (ownerEthAddress) {
     const gravatar = hasGravatar(ownerEthAddress)
     if (gravatar) {
@@ -42,15 +50,4 @@ const Avatar = ({ value, className, size, ownerEthAddress }) => {
   )
 }
 
-Avatar.defaultProps = {
-  size: 35,
-}
-
-Avatar.propTypes = {
-  value: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  className: PropTypes.string,
-  ownerEthAddress: PropTypes.string,
-}
-
 export default CSSModules(Avatar, styles)

src/front/shared/components/Coins/Coins.tsx

@@ -1,27 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import CSSModules from 'react-css-modules'
 import styles from './Coins.scss'
 
 import Coin from 'components/Coin/Coin'
 
-
-const Coins = ({ className, names, size }) => (
-  <div styleName="coins" className={className}>
-    <Coin name={names[0]} size={size} />
-    <Coin name={names[1]} size={size} />
-  </div>
-)
-
-Coins.defaultProps = {
-  size: 40,
+type ComponentProps = {
+  names: string[]
+  size?: number
+  className?: string
 }
 
-Coins.propTypes = {
-  names: PropTypes.array.isRequired,
-  size: PropTypes.number,
-  className: PropTypes.string,
+const Coins = (props: ComponentProps) => {
+  const { className, names, size = 40 } = props
+
+  return (
+    <div styleName="coins" className={className}>
+      <Coin name={names[0]} size={size} />
+      <Coin name={names[1]} size={size} />
+    </div>
+  )
 }
 
 export default CSSModules(Coins, styles)

src/front/shared/components/Confirm/Confirm.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import cssModules from 'react-css-modules'
 import styles from './Confirm.scss'
 
@@ -9,33 +7,36 @@ import Button from 'components/controls/Button/Button'
 import Center from 'components/layout/Center/Center'
 import { FormattedMessage } from 'react-intl'
 
-const Confirm = ({ rootClassName, isConfirm, isReject, title, animation }) => (
-  <Center>
-    <div styleName={animation ? 'confirm animation' : 'confirm'} className={rootClassName}>
-      <SubTitle>{title}</SubTitle>
-      <div styleName="row">
-        <Button brand onClick={isConfirm}>
-          <h3>
-            <FormattedMessage id="Confirm20" defaultMessage="Yes" />
-          </h3>
-        </Button>
-        <Button brand onClick={isReject}>
-          <h3>
-            <FormattedMessage id="ConConfirm25firm20" defaultMessage="No" />
-          </h3>
-        </Button>
-      </div>
-    </div>
-  </Center>
-)
+type ComponentProps = {
+  rootClassName: string
+  isConfirm: () => void
+  isReject: () => void
+  title: () => JSX.Element
+  animation: boolean
+}
 
-Confirm.propTypes = {
-  Center: PropTypes.node,
-  rootClassName: PropTypes.string,
-  isConfirm: PropTypes.func.isRequired,
-  isReject: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  animation: PropTypes.bool,
+const Confirm = (props: ComponentProps) => {
+  const { rootClassName, isConfirm, isReject, title, animation } = props
+
+  return (
+    <Center>
+      <div styleName={animation ? 'confirm animation' : 'confirm'} className={rootClassName}>
+        <SubTitle>{title}</SubTitle>
+        <div styleName="row">
+          <Button brand onClick={isConfirm}>
+            <h3>
+              <FormattedMessage id="Confirm20" defaultMessage="Yes" />
+            </h3>
+          </Button>
+          <Button brand onClick={isReject}>
+            <h3>
+              <FormattedMessage id="ConConfirm25firm20" defaultMessage="No" />
+            </h3>
+          </Button>
+        </div>
+      </div>
+    </Center>
+  )
 }
 
 export default cssModules(Confirm, styles, { allowMultiple: true })

src/front/shared/components/FaqExpandableItem/FaqExpandableItem.tsx

@@ -1,22 +1,23 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import CSSModules from 'react-css-modules'
 import styles from './FaqExpandableItem.scss'
-
 import Href from 'components/Href/Href'
 
-const FaqExpandableItem = ({ link, question }) => (
-  <div styleName="container">
-    <Href tab={link} styleName="header" rel="noreferrer noopener">
-      {question}
-    </Href>
-  </div>
-)
+type ComponentProps = {
+  question: string
+  link: string
+}
+
+const FaqExpandableItem = (props: ComponentProps) => {
+  const { link, question } = props
 
-FaqExpandableItem.propTypes = {
-  question: PropTypes.string.isRequired,
-  link: PropTypes.string.isRequired,
+  return (
+    <div styleName="container">
+      <Href tab={link} styleName="header" rel="noreferrer noopener">
+        {question}
+      </Href>
+    </div>
+  )
 }
 
 export default CSSModules(FaqExpandableItem, styles)

src/front/shared/components/InvoiceInfoBlock/InvoiceInfoBlock.tsx

@@ -1,18 +1,31 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import cssModules from 'react-css-modules'
 import styles from './InvoiceInfoBlock.scss'
 import { FormattedMessage } from 'react-intl'
 
+type ComponentProps = {
+  invoiceData: {
+    invoiceNumber: number
+    amount: number
+    id: number
+    destAddress: string
+    fromAddress: string
+    label: string
+    type: string
+  }
+}
 
-const InvoiceInfoBlock = (props) => {
+const InvoiceInfoBlock = (props: ComponentProps) => {
   const { invoiceData } = props
 
-  let bip0020link = `bitcoin:${(invoiceData.destination) ? invoiceData.destination : invoiceData.fromAddress}`
+  let bip0020link = `bitcoin:${(invoiceData.destAddress) ? invoiceData.destAddress : invoiceData.fromAddress}`
+
   bip0020link = `${bip0020link}?amount=${invoiceData.amount}`
   bip0020link = `${bip0020link}&label=Invoice-${invoiceData.id}-${invoiceData.invoiceNumber}`
-  if (invoiceData.label) bip0020link = `${bip0020link}&message=${encodeURI(invoiceData.label)}`
+
+  if (invoiceData.label) {
+    bip0020link = `${bip0020link}&message=${encodeURI(invoiceData.label)}`
+  }
 
   return (
     <div styleName="invoiceInfoBlock">
@@ -32,8 +45,4 @@ const InvoiceInfoBlock = (props) => {
   )
 }
 
-InvoiceInfoBlock.propTypes = {
-  invoiceData: PropTypes.object,
-}
-
 export default cssModules(InvoiceInfoBlock, styles, { allowMultiple: true })

src/front/shared/components/QR/QR.tsx

@@ -1,17 +1,20 @@
 import React, { Component } from 'react'
 import CSSModules from 'react-css-modules'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
-import InlineLoader from 'components/loaders/InlineLoader/InlineLoader'
 import animateFetching from 'components/loaders/ContentLoader/ElementLoading.scss'
 
 import styles from './QR.scss'
 
-/**
- * @todo Amount support?
- */
+type ComponentProps = {
+  address: string
+}
+
+type ComponentState = {
+  renderQr: boolean
+}
+
 @CSSModules({ ...styles, ...animateFetching }, { allowMultiple: true })
-export default class QR extends Component<any, any> {
+export default class QR extends Component<ComponentProps, ComponentState> {
 
   constructor(props) {
     super(props)
@@ -21,10 +24,6 @@ export default class QR extends Component<any, any> {
     }
   }
 
-  static propTypes = {
-    address: PropTypes.string.isRequired,
-  }
-
   componentDidMount() {
     setTimeout(() => {
       this.setState({ renderQr: true })

src/front/shared/components/Timer/Timer.ts

@@ -1,25 +1,21 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 
-import PropTypes from 'prop-types'
-
-
-export default class TimerButton extends Component<any, any> {
-
-  static propTypes = {
-    timeLeft: PropTypes.number, // seconds
-    handleClick: PropTypes.func,
-  }
+type ComponentProps = {
+  timeLeft?: number // seconds
+  handleClick: () => void
+}
 
-  static defaultProps = {
-    timeLeft: 10,
-  }
+type ComponentState = {
+  timeLeft: number
+}
 
+export default class TimerButton extends Component<ComponentProps, ComponentState> {
   timer = null
 
   constructor(props) {
     super(props)
 
-    const { timeLeft } = props
+    const { timeLeft = 10 } = props
 
     this.state = {
       timeLeft,

src/front/shared/components/controls/Flip/Flip.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import CSSModules from 'react-css-modules'
 import styles from './Flip.scss'
 
-
-const Flip = ({ onClick, className }) => (
-  //@ts-ignore 
-  <button alt="flip currency" onClick={onClick} className={className} styleName="trade-panel__change" />
-)
-
-Flip.propTypes = {
-  onClick: PropTypes.func,
-  className: PropTypes.string,
+type ComponentProps = {
+  onClick: () => void
+  className?: string
 }
 
-Flip.defaulProps = {
-  className: '',
-}
+const Flip = (props: ComponentProps) => {
+  const { onClick, className = '' } = props
 
+  return (
+    <button
+      alt="flip currency"
+      onClick={onClick}
+      className={className}
+      styleName="trade-panel__change"
+    />
+  )
+}
 
 export default CSSModules(Flip, styles)