chore: Update dependencies (decentraland#407)

* Initial commit

* chore: update dependencies

* chore: Update DCL UI version

* Use BN from dep

webapp/package.json

@@ -2,26 +2,26 @@
   "name": "marketplace-ui",
   "version": "0.4.0",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
     "@dcl/schemas": "^1.5.1",
     "apollo-boost": "^0.4.7",
+    "bn.js": "^5.2.0",
     "classnames": "^2.3.1",
-    "connected-react-router": "^6.6.1",
-    "date-fns": "^2.8.1",
+    "connected-react-router": "^6.9.1",
+    "date-fns": "^2.23.0",
     "decentraland-dapps": "^12.17.1",
     "decentraland-transactions": "^1.22.2",
-    "decentraland-ui": "^3.5.2",
-    "dotenv": "^8.2.0",
-    "graphql": "^14.5.8",
+    "decentraland-ui": "^3.9.0",
+    "dotenv": "^10.0.0",
+    "graphql": "^14.7.0",
     "history": "^4.10.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "react-lazy-images": "^1.1.0",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "^5.1.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
-    "redux": "^4.0.4",
+    "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
@@ -32,18 +32,16 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "^7.1.2",
     "@types/history": "^4.7.3",
     "@types/jest": "^24.9.1",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
+    "@types/react": "^17.0.17",
     "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-lazy-load-image-component": "^1.5.0",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "^7.1.18",
+    "@types/react-router-dom": "^5.1.8",
     "@types/redux": "^3.6.0",
-    "@types/redux-logger": "^3.0.7",
+    "@types/redux-logger": "^3.0.9",
     "@typescript-eslint/eslint-plugin": "^4.13.0",
     "@typescript-eslint/parser": "^4.13.0",
     "dcl-tslint-config-standard": "^2.0.0",
@@ -52,7 +50,7 @@
     "tslint": "^5.20.1",
     "tslint-plugin-prettier": "^2.0.1",
     "tslint-react": "^4.1.0",
-    "typescript": "^4.2.2"
+    "typescript": "^4.3.5"
   },
   "scripts": {
     "start": "react-scripts start",

webapp/src/components/AssetCard/ENSTags/ENSTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Props } from './ENSTags.types'
 import './ENSTags.css'

webapp/src/components/AssetCard/EstateTags/EstateTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProximityTags } from '../ProximityTags'
 import { Props } from './EstateTags.types'
 import './EstateTags.css'

webapp/src/components/AssetCard/ParcelTags/ParcelTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 import { Coordinate } from '../../Coordinate'
 import { ProximityTags } from '../ProximityTags'

webapp/src/components/AssetCard/ProximityTags/ProximityTags.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useProximity } from '../../../modules/proximity/hooks'
 import { getDistanceText } from '../../../modules/proximity/utils'
 import { Props } from './ProximityTags.types'

webapp/src/components/AssetCard/WearableTags/WearableTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { BodyShape, Rarity } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { isUnisex, isGender } from '../../../modules/nft/wearable/utils'

webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { Button, Container, Header, Mana, Stats } from 'decentraland-ui'
+import { Button, Container, Header, Stats } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Rarity } from '@dcl/schemas'
 
@@ -12,6 +12,7 @@ import { Row } from '../../Layout/Row'
 import { Column } from '../../Layout/Column'
 import { AssetImage } from '../../AssetImage'
 import { PageHeader } from '../../PageHeader'
+import { Mana } from '../../Mana'
 import { Title } from '../Title'
 import { Owner } from '../Owner'
 import { Network } from '../Network'
@@ -56,9 +57,16 @@ const ItemDetail = (props: Props) => {
                   </Mana>
                 </Stats>
                 <Stats title={t('asset_page.available')}>
-                  {item.available > 0
-                    ? <Header>{item.available.toLocaleString()}<span className={styles.supply}>/{Rarity.getMaxSupply(item.rarity).toLocaleString()}</span></Header>
-                    : t('asset_page.sold_out')}
+                  {item.available > 0 ? (
+                    <Header>
+                      {item.available.toLocaleString()}
+                      <span className={styles.supply}>
+                        /{Rarity.getMaxSupply(item.rarity).toLocaleString()}
+                      </span>
+                    </Header>
+                  ) : (
+                    t('asset_page.sold_out')
+                  )}
                 </Stats>
               </>
             ) : null}

webapp/src/components/IntroPopup/IntroPopup.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import { PureComponent } from 'react'
 import { Button, Column, Header, Popup } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Props, State } from './IntroPopup.types'

webapp/src/components/Routes/Routes.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Switch, Route, Redirect } from 'react-router-dom'
 import Intercom from 'decentraland-dapps/dist/components/Intercom'
 

webapp/src/components/Vendor/NFTFilters/ArrayFilter/ArrayFilter.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Header } from 'decentraland-ui'
 
 import { Props } from './ArrayFilter.types'

webapp/src/components/Vendor/NFTFilters/SelectFilter/SelectFilter.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Header, Dropdown } from 'decentraland-ui'
 
 import { Props } from './SelectFilter.types'

webapp/src/components/Vendor/NFTFilters/TextFilter/TextFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Header } from 'decentraland-ui'
 
 import { useInput } from '../../../../lib/input'

webapp/src/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
@@ -10,7 +8,7 @@ import TranslationProvider from 'decentraland-dapps/dist/providers/TranslationPr
 
 import './setup'
 import './modules/analytics/track'
-import "./modules/analytics/rollbar"
+import './modules/analytics/rollbar'
 
 import * as locales from './modules/translation/locales'
 import { initStore, history } from './modules/store'

webapp/src/modules/toast/toasts.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ToastType } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 

webapp/src/modules/vendor/MarketplacePrice.ts

@@ -1,6 +1,4 @@
 import BN from 'bn.js'
-import { toBN } from 'web3x-es/utils'
-
 export class MarketplacePrice {
   public oneMillion: BN
   public feePerMillion: BN
@@ -25,34 +23,32 @@ export class MarketplacePrice {
       )
     }
 
-    this.feePerMillion = toBN(feePerMillion)
-    this.oneMillion = toBN('1000000')
+    this.feePerMillion = new BN(feePerMillion)
+    this.oneMillion = new BN('1000000')
 
     this.maxPriceIncreasePercentage = maxPriceIncreasePercentage
   }
 
   addFee(manaWeiAmount: string | number) {
-    const bnAmount = toBN(manaWeiAmount.toString())
+    const bnAmount = new BN(manaWeiAmount.toString())
 
     return bnAmount
       .add(bnAmount.mul(this.feePerMillion).div(this.oneMillion))
       .toString()
   }
 
   addMaxSlippage(manaWeiAmount: string | number) {
-    return toBN(manaWeiAmount)
-      .mul(toBN(110))
-      .divRound(toBN(100)) // 10 percent increase
+    return new BN(manaWeiAmount).mul(new BN(110)).divRound(new BN(100)) // 10 percent increase
   }
 
   getPercentageIncrease(computedPrice: string, price: string) {
     if (Number(price) <= 0) {
       return 0
     }
 
-    const percentage = toBN(computedPrice)
-      .mul(toBN(100))
-      .divRound(toBN(price))
+    const percentage = new BN(computedPrice)
+      .mul(new BN(100))
+      .divRound(new BN(price))
       .toNumber()
 
     return percentage <= 100 ? 0 : percentage - 100

webapp/src/modules/vendor/known_origin/NFTService.ts

@@ -1,6 +1,6 @@
 import BN from 'bn.js'
 import { Address } from 'web3x-es/address'
-import { toBN, toWei } from 'web3x-es/utils'
+import { toWei } from 'web3x-es/utils'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { Network } from '@dcl/schemas'
 import { ERC721 } from '../../../contracts/ERC721'
@@ -160,7 +160,7 @@ export class NFTService
 
   toOrder(edition: EditionFragment, oneEthInMANA: string): Order {
     const totalWei = this.marketplacePrice.addFee(edition.priceInWei)
-    const weiPrice = toBN(totalWei).mul(toBN(oneEthInMANA))
+    const weiPrice = new BN(totalWei).mul(new BN(oneEthInMANA))
     const price = weiPrice.div(this.oneEthInWei)
 
     const contractNames = getContractNames()

webapp/src/modules/vendor/makers_place/NFTService.ts

@@ -1,7 +1,7 @@
-import { Network } from '@dcl/schemas'
 import BN from 'bn.js'
+import { Network } from '@dcl/schemas'
 import { Address } from 'web3x-es/address'
-import { toBN, toWei } from 'web3x-es/utils'
+import { toWei } from 'web3x-es/utils'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { ERC721 } from '../../../contracts/ERC721'
 import { ContractFactory } from '../../contract/ContractFactory'
@@ -151,7 +151,7 @@ export class NFTService
 
   toOrder(asset: MakersPlaceAsset, oneEthInMANA: string): Order {
     const totalWei = this.marketplacePrice.addFee(asset.price_in_wei!)
-    const weiPrice = toBN(totalWei).mul(toBN(oneEthInMANA))
+    const weiPrice = new BN(totalWei).mul(new BN(oneEthInMANA))
     const price = weiPrice.div(this.oneEthInWei)
 
     return {

webapp/src/modules/vendor/super_rare/NFTService.ts

@@ -1,6 +1,6 @@
 import BN from 'bn.js'
 import { Address } from 'web3x-es/address'
-import { toBN, toWei } from 'web3x-es/utils'
+import { toWei } from 'web3x-es/utils'
 import { Network } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { ERC721 } from '../../../contracts/ERC721'
@@ -173,7 +173,7 @@ export class NFTService implements NFTServiceInterface<VendorName.SUPER_RARE> {
     const { asset, taker } = order
 
     const totalWei = this.marketplacePrice.addFee(order.amountWithFee)
-    const weiPrice = toBN(totalWei).mul(toBN(oneEthInMANA))
+    const weiPrice = new BN(totalWei).mul(new BN(oneEthInMANA))
     const price = weiPrice.div(this.oneEthInWei)
 
     return {

webapp/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,8 +20,12 @@
     "isolatedModules": true,
     "noFallthroughCasesInSwitch": true,
     "noEmit": true,
-    "jsx": "react",
-    "types": ["jest"]
+    "jsx": "react-jsx",
+    "types": [
+      "jest"
+    ]
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }