feat(TypeScript): configuration work

blockchain · Dec 30, 2019 · c4ee352 · c4ee352
1 parent 96bbe66
commit c4ee352
Show file tree

Hide file tree

Showing 13 changed files with 307 additions and 79 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,10 @@
 {
-  "extends": ["standard", "prettier", "prettier/react", "prettier/standard"],
+  "extends": [
+    "standard",
+    "prettier",
+    "prettier/react",
+    "prettier/standard"
+  ],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 8,
@@ -8,7 +13,25 @@
       "jsx": true
     }
   },
-  "plugins": ["babel", "react", "jest", "json", "sort-imports-es6-autofix"],
+  "plugins": [
+    "babel",
+    "react",
+    "jest",
+    "json",
+    "sort-imports-es6-autofix",
+    "@typescript-eslint"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "rules": {
+        "no-unused-vars": 0
+      }
+    }
+  ],
   "env": {
     "browser": true,
     "jest": true,
@@ -24,13 +47,22 @@
   },
   "rules": {
     "camelcase": 0,
-    "generator-star-spacing": ["error", { "before": true, "after": true }],
+    "generator-star-spacing": [
+      "error",
+      {
+        "before": true,
+        "after": true
+      }
+    ],
     "jest/no-disabled-tests": 1,
     "jest/no-focused-tests": 2,
     "jest/no-identical-title": 2,
     "jest/prefer-to-have-length": 0,
     "jest/valid-expect": 2,
-    "jsx-quotes": [2, "prefer-single"],
+    "jsx-quotes": [
+      2,
+      "prefer-single"
+    ],
     "new-cap": 0,
     "no-alert": 2,
     "no-case-declarations": 0,
@@ -69,8 +101,10 @@
     "space-before-function-paren": 2,
     "sort-imports-es6-autofix/sort-imports-es6": [
       "error",
-      { "ignoreCase": true }
+      {
+        "ignoreCase": true
+      }
     ],
     "strict": 0
   }
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,7 @@ packages/blockchain-info-components/node_modules
 packages/blockchain-info-components/storybook-static
 packages/blockchain-wallet-v4/lib
 packages/blockchain-wallet-v4/node_modules
+packages/blockchain-wallet-v4-frontend/.awcache
 packages/blockchain-wallet-v4-frontend/build
 packages/blockchain-wallet-v4-frontend/dist
 packages/blockchain-wallet-v4-frontend/node_modules

diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1 @@
+declare module 'blockchain-info-components'
diff --git a/package.json b/package.json
@@ -45,6 +45,12 @@
       "stylelint",
       "git add"
     ],
+    "*.ts": [
+      "prettier --write",
+      "eslint --fix",
+      "stylelint",
+      "git add"
+    ],
     "*.json": [
       "prettier --write",
       "git add"
@@ -117,6 +123,8 @@
     "@storybook/cli": "4.1.9",
     "@storybook/react": "4.1.9",
     "@storybook/storybook-deployer": "2.8.1",
+    "@typescript-eslint/eslint-plugin": "2.13.0",
+    "@typescript-eslint/parser": "2.13.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
@@ -182,6 +190,8 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.7.0",
     "thread-loader": "2.1.3",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.7.4",
     "uglifyjs-webpack-plugin": "2.2.0",
     "unused-files-webpack-plugin": "3.4.0",
     "webpack": "4.41.0",

diff --git a/packages/blockchain-wallet-v4-frontend/babel.config.js b/packages/blockchain-wallet-v4-frontend/babel.config.js
@@ -4,7 +4,7 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
     'babel-plugin-styled-components',
-    ['module-resolver', { root: ['./src'], alias: { data: './src/data' } }],
+    ['module-resolver', { root: ['./src'] }],
     ['react-intl', { messagesDir: './build/extractedMessages' }]
   ],
   ignore: [],
@@ -18,7 +18,7 @@ module.exports = {
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-proposal-object-rest-spread',
         'babel-plugin-styled-components',
-        ['module-resolver', { root: ['./src'], alias: { data: './src/data' } }],
+        ['module-resolver', { root: ['./src'] }],
         ['react-intl', { messagesDir: './build/extractedMessages' }]
       ]
     },
@@ -31,7 +31,7 @@ module.exports = {
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-proposal-object-rest-spread',
         'babel-plugin-styled-components',
-        ['module-resolver', { root: ['./src'], alias: { data: './src/data' } }],
+        ['module-resolver', { root: ['./src'] }],
         'react-hot-loader/babel'
       ]
     }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/index.js
@@ -1,7 +1,7 @@
 import { Box } from '../AirdropInfo'
 import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
 import { Icon, Link, Text } from 'blockchain-info-components'
-import { StxShare, StxStatus } from './model'
+import { StxShare, StxStatus } from './model.tsx'
 import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'

diff --git a/...d/src/scenes/Airdrops/StxAirdrop/model.js → .../src/scenes/Airdrops/StxAirdrop/model.tsx b/...d/src/scenes/Airdrops/StxAirdrop/model.js → .../src/scenes/Airdrops/StxAirdrop/model.tsx
@@ -9,6 +9,7 @@ import { FormattedMessage } from 'react-intl'
 import { model } from 'data'
 import React from 'react'
 import styled from 'styled-components'
+import { CampaignType, KycStatesType } from '../types'
 
 const { KYC_STATES } = model.profile
 
@@ -27,10 +28,10 @@ const BlueCartridge = styled(CustomCartridge)`
 // userCampaignState: "NONE", "REGISTERED", "TASK_FINISHED", "REWARD_SEND", "REWARD_RECEIVED", "FAILED"
 // userCampaignTransactionResponseList: []
 export const StxStatus = ({
-  userCampaignsInfoResponseList = [],
+  userCampaignsInfoResponseList,
   kycState,
   identityVerificationActions
-}) => {
+}: { userCampaignsInfoResponseList: Array<CampaignType>, kycState: KycStatesType, identityVerificationActions: any }) => {
   const blockstackCampaign = userCampaignsInfoResponseList.find(
     campaign => campaign.campaignName === 'BLOCKSTACK'
   )
@@ -57,58 +58,61 @@ export const StxStatus = ({
         </GreyCartridge>
       )
     case KYC_STATES.VERIFIED:
-      switch (blockstackCampaign.userCampaignState) {
-        case 'FAILED':
-          return (
-            <ErrorCartridge>
-              <FormattedMessage
-                id='scenes.airdrop.stx.failed'
-                defaultMessage='Failed'
-              />
-            </ErrorCartridge>
-          )
-        case 'REWARD_RECEIVED':
-          return (
-            <SuccessCartridge>
-              <FormattedMessage
-                id='scenes.airdrop.stx.received'
-                defaultMessage='Received'
-              />
-            </SuccessCartridge>
-          )
-        case 'TASK_FINISHED':
-        case 'REWARD_SEND':
-        case 'REGISTERED':
-          return blockstackCampaign.attributes['x-campaign-reject-reason'] ? (
-            <ErrorCartridge>
-              <FormattedMessage
-                id='scenes.airdrop.stx.ineligible'
-                defaultMessage='Ineligible'
-              />
-            </ErrorCartridge>
-          ) : (
-            <SuccessCartridge>
-              <FormattedMessage
-                id='scenes.airdrop.stx.claimed'
-                defaultMessage='Claimed'
-              />
-            </SuccessCartridge>
-          )
-        case 'NONE':
-          return (
-            <BlueCartridge
-              onClick={() =>
-                identityVerificationActions.claimCampaignClicked('BLOCKSTACK')
-              }
-            >
-              <FormattedMessage
-                id='scenes.airdrop.stx.claim'
-                defaultMessage='Claim'
-              />
-            </BlueCartridge>
-          )
+      if (blockstackCampaign) {
+        switch (blockstackCampaign.userCampaignState) {
+          case 'FAILED':
+            return (
+              <ErrorCartridge>
+                <FormattedMessage
+                  id='scenes.airdrop.stx.failed'
+                  defaultMessage='Failed'
+                />
+              </ErrorCartridge>
+            )
+          case 'REWARD_RECEIVED':
+            return (
+              <SuccessCartridge>
+                <FormattedMessage
+                  id='scenes.airdrop.stx.received'
+                  defaultMessage='Received'
+                />
+              </SuccessCartridge>
+            )
+          case 'TASK_FINISHED':
+          case 'REWARD_SEND':
+          case 'REGISTERED':
+            return blockstackCampaign.attributes['x-campaign-reject-reason'] ? (
+              <ErrorCartridge>
+                <FormattedMessage
+                  id='scenes.airdrop.stx.ineligible'
+                  defaultMessage='Ineligible'
+                />
+              </ErrorCartridge>
+            ) : (
+                <SuccessCartridge>
+                  <FormattedMessage
+                    id='scenes.airdrop.stx.claimed'
+                    defaultMessage='Claimed'
+                  />
+                </SuccessCartridge>
+              )
+          case 'NONE':
+            return (
+              <BlueCartridge
+                onClick={() =>
+                  identityVerificationActions.claimCampaignClicked('BLOCKSTACK')
+                }
+              >
+                <FormattedMessage
+                  id='scenes.airdrop.stx.claim'
+                  defaultMessage='Claim'
+                />
+              </BlueCartridge>
+            )
+        }
+      } else {
+        return null
       }
-      return null
     case KYC_STATES.NONE:
       return (
         <BlueCartridge
@@ -125,7 +129,7 @@ export const StxStatus = ({
   }
 }
 
-export const StxShare = ({ tags, kycState }) => {
+export const StxShare = ({ tags, kycState }: { tags: any, kycState: KycStatesType }) => {
   switch (kycState) {
     case KYC_STATES.REJECTED:
     case KYC_STATES.EXPIRED:
@@ -153,27 +157,27 @@ export const StxShare = ({ tags, kycState }) => {
           target='_blank'
           rel='noopener noreferrer'
         >
-          <Button nature='light' fullwidth>
+          <Button nature='light' fullwidth >
             <FormattedMessage
               id='scenes.airdrop.stx.share'
               defaultMessage='Share'
             />
           </Button>
         </Link>
       ) : (
-        <Link
-          href='https://blockstack.org/try-blockstack'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Button nature='light' fullwidth>
-            <FormattedMessage
-              id='scenes.airdrop.stx.learnmore'
-              defaultMessage='Learn More'
-            />
-          </Button>
-        </Link>
-      )
+          <Link
+            href='https://blockstack.org/try-blockstack'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Button nature='light' fullwidth >
+              <FormattedMessage
+                id='scenes.airdrop.stx.learnmore'
+                defaultMessage='Learn More'
+              />
+            </Button>
+          </Link>
+        )
     default:
       return null
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/types.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/types.ts
@@ -0,0 +1,26 @@
+export type Campaigns = 'BLOCKSTACK'
+
+export type UserCampaignState =
+  | 'FAILED'
+  | 'REWARD_RECEIVED'
+  | 'TASK_FINISHED'
+  | 'REWARD_SEND'
+  | 'REGISTERED'
+  | 'NONE'
+
+export interface CampaignType {
+  attributes: {
+    'x-campaign-reject-reason': string
+  }
+  campaignName: Campaigns
+  userCampaignState: UserCampaignState
+}
+
+// Move this somewhere more generic
+export type KycStatesType =
+  | 'NONE'
+  | 'PENDING'
+  | 'UNDER_REVIEW'
+  | 'REJECTED'
+  | 'VERIFIED'
+  | 'EXPIRED'
diff --git a/packages/blockchain-wallet-v4-frontend/src/store/index.js b/packages/blockchain-wallet-v4-frontend/src/store/index.js
@@ -4,7 +4,7 @@ import {
   createWalletApi,
   HorizonStreamingService,
   Socket
-} from 'blockchain-wallet-v4/src/network'
+} from 'blockchain-wallet-v4/src/network/index.ts'
 import { applyMiddleware, compose, createStore } from 'redux'
 import {
   autoDisconnection,

diff --git a/packages/blockchain-wallet-v4-frontend/webpack.config.dev.js b/packages/blockchain-wallet-v4-frontend/webpack.config.dev.js
@@ -68,6 +68,12 @@ module.exports = {
     publicPath: '/',
     crossOriginLoading: 'anonymous'
   },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias: {
+      data: path.resolve(__dirname, 'src/data/')
+    }
+  },
   module: {
     rules: [
       {
@@ -78,6 +84,7 @@ module.exports = {
           'babel-loader'
         ]
       },
+      { test: /\.tsx?$/, loader: 'ts-loader' },
       {
         test: /\.(eot|ttf|otf|woff|woff2)$/,
         use: {

diff --git a/...blockchain-wallet-v4/src/network/index.js → ...blockchain-wallet-v4/src/network/index.ts b/...blockchain-wallet-v4/src/network/index.js → ...blockchain-wallet-v4/src/network/index.ts