chore(release): v.1.4.0

.env

@@ -5,3 +5,6 @@ REACT_APP_LOG_LEVEL=error
 REACT_APP_NETWORK=ganache
 REACT_APP_REQUIRED_NETWORK_ID=8545
 REACT_APP_REQUIRED_NETWORK_NAME="Localhost 8545"
+REACT_APP_TRACKING_URL=https://plausible.io/js/plausible.js
+REACT_APP_TRACKING_DATADOMAIN=marketplace.rifos.org
+REACT_APP_ALLOW_INSECURE_CONNECTIONS=0

.eslintrc

@@ -33,7 +33,9 @@
     "no-only-tests"
   ],
   "rules": {
+    "no-restricted-syntax": "off",
     "react/prop-types": "off",
+    "react/require-default-props": "off",
     "no-unused-vars": [
       "error",
       {
@@ -179,10 +181,14 @@
   "overrides": [
     {
       "files": [
-        "*.spec.ts"
+        "*.spec.ts",
+        "*.spec.tsx",
+        "*.test.ts",
+        "*.test.tsx"
       ],
       "rules": {
         "@typescript-eslint/ban-ts-ignore": "off",
+        "no-underscore-dangle": "off",
         "max-nested-callbacks": [
           "error",
           10

.github/workflows/develop.yml

@@ -0,0 +1,51 @@
+name: RIF Marketplace UI deploy
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  deploy-develop:
+    name: RIF Marketplace UI - Develop
+    runs-on: ubuntu-latest
+    environment: develop
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Node 14
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14'
+
+    - name: Install dependencies
+      run: |
+        npm ci
+
+    - name: Build site
+      env:
+        REACT_APP_CACHE_ADDR: ${{ secrets.DEVELOP_REACT_APP_CACHE_ADDR }}
+        REACT_APP_UPLOAD_ADDR: ${{ secrets.DEVELOP_REACT_APP_UPLOAD_ADDR }}
+        REACT_APP_LOG_LEVEL: error
+        REACT_APP_NETWORK: rskdevnet
+        REACT_APP_REQUIRED_NETWORK_ID: 33
+        REACT_APP_REQUIRED_NETWORK_NAME: RSK Regtest
+      run: |
+        npm run build:prod
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.DEVELOP_AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.DEVELOP_AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.DEVELOP_AWS_REGION }}
+
+    - name: Deploy site to S3
+      run: |
+        aws s3 sync --delete --only-show-errors build/ ${{ secrets.DEVELOP_S3_BUCKET }}
+
+    - name: Invalidate CloudFront cache
+      run: |
+        aws cloudfront create-invalidation --distribution-id ${{ secrets.DEVELOP_CLOUDFRONT_DISTRIBUTION }} --paths "/*"

.github/workflows/staging.yml

@@ -29,7 +29,6 @@ jobs:
           ${{ runner.os }}-node-
 
     - name: Install dependencies
-      if: steps.cache.outputs.cache-hit != 'true'
       run: |
         npm ci
 

.github/workflows/testnet.yml

@@ -31,7 +31,6 @@ jobs:
           ${{ runner.os }}-node-
 
     - name: Install dependencies
-      if: steps.cache.outputs.cache-hit != 'true'
       run: |
         npm ci
 

.gitignore

@@ -23,3 +23,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .vscode/
+tsconfig.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rif-marketplace-ui",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "RIF Marketplace provides a digital catalogue with a wide range of decentralised services.",
   "keywords": [
     "RIF",
@@ -42,14 +42,16 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@rsksmart/erc677": "^1.0.2",
     "@rsksmart/erc721": "^1.0.0",
+    "@rsksmart/rif-marketplace-notifier": "0.0.1-dev.2",
     "@rsksmart/rif-marketplace-storage": "^0.1.0",
-    "@rsksmart/rif-ui": "^0.6.0",
+    "@rsksmart/rif-ui": "^0.6.1",
     "@rsksmart/rsk-utils": "^1.1.0",
     "big.js": "^6.0.2",
     "cids": "^1.0.2",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^6.15.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
     "socket.io-client": "^2.3.0",
@@ -72,6 +74,7 @@
     "@types/react-router-dom": "^5.1.6",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-standard": "^16.0.2",
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",

src/App.tsx

@@ -5,6 +5,10 @@ import React, { FC } from 'react'
 import { AppContextProvider } from 'context/App'
 import Market from 'components/Market'
 import ErrorBoundary from 'components/error-boundary/ErrorBoundary'
+import Big from 'big.js'
+
+// TODO: discuss about wrapping the library and export it with this change
+Big.NE = -30
 
 const App: FC = () => (
   <ErrorBoundary>

src/api/blockscout/index.ts

@@ -0,0 +1,30 @@
+import { ContractABIEvent, ContractABIItem } from 'api/blockscout/interface'
+import { UIError } from 'models/UIMessage'
+
+const BLOCKSCOUT_API_ADDRESS = 'https://blockscout.com/rsk/mainnet/api?module=contract&action=getabi&address='
+
+const getABIEvents = async (contract: string): Promise<ContractABIEvent[]> => {
+  const response = await fetch(`${BLOCKSCOUT_API_ADDRESS}${contract}`)
+
+  if (response.status !== 200) {
+    throw new UIError({
+      error: new Error(await response.json()),
+      text: 'could not get abi',
+      id: 'service-fetch',
+    })
+  }
+  const { message, result } = await response.json()
+
+  if (message !== 'OK') {
+    throw new UIError({
+      error: new Error(message),
+      text: `Invalid contract address: ${contract}`,
+      id: 'service-fetch',
+    })
+  }
+  const abiItems: ContractABIItem[] = JSON.parse(result)
+  return abiItems.filter((abiItem: ContractABIItem) => abiItem.type === 'event')
+    .map((item) => item as ContractABIEvent)
+}
+
+export default getABIEvents

src/api/blockscout/interface.ts

@@ -0,0 +1,18 @@
+export type ContractABIEventParam = {
+    name: string
+    type: string
+    indexed?: boolean
+}
+
+export type ContractABIItem = {
+    name: string
+    type: string
+    inputs?: Array<ContractABIEventParam>
+    constant?: boolean
+    outputs?: any
+    payable?: boolean
+    stateMutability?: string
+    anonymous?: boolean
+}
+
+export type ContractABIEvent = Pick<ContractABIItem, 'name' | 'inputs' | 'anonymous'>

src/api/models/apiService.ts

@@ -3,6 +3,7 @@ import { AuthenticationResult } from '@feathersjs/authentication'
 import { MarketFilterType } from 'models/Market'
 import createClient from 'api/client'
 import { ErrorReporterError } from 'context/App/errorReporter'
+import Logger from 'utils/Logger'
 import { ServiceAddress } from './serviceAddresses'
 
 export type APIErrorId = 'service-connection' | 'service-event-attach' | 'service-fetch' | 'service-post'
@@ -21,10 +22,9 @@ export type ServiceMetadata = Omit<Paginated<never>, 'data'>
 
 export const isServiceMetadata = (
   metadata: ServiceMetadata | unknown,
-): metadata is ServiceMetadata => metadata && (
-  metadata as ServiceMetadata).total !== undefined
+): metadata is ServiceMetadata => Boolean((metadata as ServiceMetadata)?.total)
 
-type ConnectOptions = {
+export type ConnectOptions = {
   client: ReturnType<typeof createClient>
 }
 export interface APIService {
@@ -43,8 +43,7 @@ export interface APIService {
 
 export const isResultPaginated = <T>(
   result: Paginated<T> | [],
-): result is Paginated<T> => (result as Paginated<T>)
-    .data !== undefined
+): result is Paginated<T> => Boolean((result as Paginated<T>)?.data)
 
 export abstract class AbstractAPIService implements Omit<APIService, 'fetch'> {
   private _client: Application
@@ -55,7 +54,8 @@ export abstract class AbstractAPIService implements Omit<APIService, 'fetch'> {
 
   service!: Service<any>
 
-  errorReporter!: ErrorReporter
+  errorReporter: ErrorReporter = ({ error, id }) => Logger.getInstance()
+    .error('Error reporter not implemented', id, error)
 
   _meta?: ServiceMetadata
 

src/api/models/restAPIService.ts

@@ -0,0 +1,26 @@
+import { AbstractAPIService } from './apiService'
+
+export default abstract class AbstractRestAPIService extends AbstractAPIService {
+    abstract _create: <T, S, R>(data: T, params?: S) => Promise<R>
+
+    create = async <T, S, R> (data: T, params?: S): Promise<R> => {
+      if (!this.service) {
+        this.errorReporter({
+          id: 'service-connection',
+          text: 'Error while creating resource.',
+          error: new Error(`The ${this.path} service is not connected`),
+        })
+      }
+      let response = {}
+      try {
+        response = await this._create(data, params)
+      } catch (error) {
+        this.errorReporter({
+          id: 'service-fetch',
+          text: 'Error while creating resource.',
+          error,
+        })
+      }
+      return response as R
+    }
+}

src/api/models/serviceAddresses.ts

@@ -4,10 +4,12 @@ import { XRServiceAddress } from 'api/rif-marketplace-cache/rates/xr'
 import { StorageServiceAddress as StorageAddress } from 'api/rif-marketplace-cache/storage/interfaces'
 import { NotificationsAddress } from 'api/rif-marketplace-cache/notifications/interfaces'
 import { ServiceAddress as StorageUploadAddress } from 'api/rif-storage-upload-service/upload/interfaces'
+import { NotifierServiceAddress } from 'api/rif-marketplace-cache/notifier'
 
 export type ServiceAddress = XRServiceAddress
 | ConfirmationAddress
 | RnsAddress
 | StorageAddress
 | NotificationsAddress
 | StorageUploadAddress
+| NotifierServiceAddress

src/api/models/storage/OfferFiltersTransport.ts

@@ -9,7 +9,7 @@ import { UNIT_PREFIX_POW2 } from 'utils/utils'
 export default class OfferFiltersTransport {
   averagePrice?: MinMaxFilter
 
-  totalCapacity?: MinMaxFilter
+  availableCapacity?: MinMaxFilter
 
   periods?: PeriodInSeconds[]
 
@@ -40,11 +40,11 @@ export default class OfferFiltersTransport {
       : undefined
     this.averagePrice = price
       ? {
-        min: price.min - 1,
-        max: price.max + 1,
+        min: Math.floor(price.min),
+        max: Math.ceil(price.max),
       }
       : undefined
-    this.totalCapacity = sizeGB
+    this.availableCapacity = sizeGB
       ? {
         min: sizeGB.min * UNIT_PREFIX_POW2.KILO,
         max: sizeGB.max * UNIT_PREFIX_POW2.KILO,

src/api/models/storage/__tests__/OfferFiltersTransport.test.ts

@@ -16,12 +16,12 @@ const EXPECTED_OBJECT: OfferFiltersTransport = {
   periods: Array.from(FAKE_FILTERS.periods as Set<SubscriptionPeriod>)
     .map((p) => PeriodInSeconds[p]),
   averagePrice: {
-    min: (FAKE_FILTERS.price?.min as number) - 1,
-    max: (FAKE_FILTERS.price?.max as number) + 1,
+    min: Math.floor(FAKE_FILTERS.price.min),
+    max: Math.ceil(FAKE_FILTERS.price.max),
   },
-  totalCapacity: {
-    min: (FAKE_FILTERS.size?.min as number) * UNIT_PREFIX_POW2.KILO,
-    max: (FAKE_FILTERS.size?.max as number) * UNIT_PREFIX_POW2.KILO,
+  availableCapacity: {
+    min: FAKE_FILTERS.size.min * UNIT_PREFIX_POW2.KILO,
+    max: FAKE_FILTERS.size.max * UNIT_PREFIX_POW2.KILO,
   },
   provider: FAKE_FILTERS.provider
     ? { $like: FAKE_FILTERS.provider } : undefined,

src/api/models/storage/transports.ts

@@ -40,15 +40,3 @@ export type AgreementTransport = {
     tokenAddress: string
     expiresIn: string
 }
-
-export type StakeBalanceTransport = {
-  account: string
-  symbol: string
-  token: string
-  total: string
-}
-
-export interface StakeTransport {
-  totalStakedFiat: string
-  stakes: StakeBalanceTransport[]
-}

src/api/rif-marketplace-cache/common/stakes.ts

@@ -0,0 +1,42 @@
+import { SupportedTokenSymbol } from 'models/Token'
+import { parseToBigDecimal } from 'utils/parsers'
+
+export type StakeBalanceTransport = {
+  account: string
+  symbol: string
+  token: string
+  total: string
+}
+
+export interface StakeTransport {
+  totalStakedFiat: string
+  stakes: StakeBalanceTransport[]
+}
+
+export type StakeFilters = {
+  account: string
+}
+
+export type StakedBalances = Record<SupportedTokenSymbol, string>
+
+export type Staked = {
+  stakedBalances: StakedBalances
+  totalStakedUSD: string
+}
+
+export const mapStakesListFromTransport = (
+  stakes,
+): StakedBalances => stakes.reduce((acc, { symbol, total }) => {
+  acc[symbol] = parseToBigDecimal(total).toString()
+  return acc
+}, {})
+
+export const mapFromTransport = (stakeTransport: StakeTransport): Staked => {
+  const { totalStakedFiat: totalStakedUSD, stakes } = stakeTransport
+  const stakedBalances = mapStakesListFromTransport(stakes)
+
+  return {
+    stakedBalances,
+    totalStakedUSD,
+  }
+}