Merge branch 'staging' into mv/rtl

.github/workflows/nodejs.yml

@@ -26,7 +26,7 @@ jobs:
 
       - name: Cache node modules
         id: cache-nodemodules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:
@@ -59,7 +59,7 @@ jobs:
 
       - name: Cache node modules
         id: cache-nodemodules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:
@@ -99,7 +99,7 @@ jobs:
 
       - name: Cache node modules
         id: cache-nodemodules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:

.vscode/settings.json

@@ -68,6 +68,7 @@
         "moxios",
         "NFTSANDBOX",
         "pageview",
+        "paychannels",
         "paystrings",
         "testid",
         "topojson"

src/containers/Accounts/AccountHeader/test/actions.test.js

@@ -41,10 +41,12 @@ describe('AccountHeader Actions', () => {
         flags: [],
         balance: '123456000',
         gravatar: undefined,
+        nftMinter: undefined,
         previousTxn:
           '6B6F2CA1633A22247058E988372BA9EFFFC5BF10212230B67341CA32DC9D4A82',
         previousLedger: 68990183,
       },
+      deleted: false,
       balances: { XRP: 123.456 },
       signerList: undefined,
       tokens: [],
@@ -66,7 +68,7 @@ describe('AccountHeader Actions', () => {
       })
   })
 
-  fit('should dispatch correct actions on ripple account with tokens', () => {
+  it('should dispatch correct actions on account with tokens', () => {
     client.addResponses(actWithTokens)
     const expectedData = {
       account: 'rB5TihdPbKgMrkFqrqUC3yLdE8hhv4BdeY',
@@ -194,10 +196,12 @@ describe('AccountHeader Actions', () => {
         flags: [],
         balance: '123456000',
         gravatar: undefined,
+        nftMinter: undefined,
         previousTxn:
           '6B6F2CA1633A22247058E988372BA9EFFFC5BF10212230B67341CA32DC9D4A82',
         previousLedger: 68990183,
       },
+      deleted: false,
       balances: { XRP: 123.456 },
       signerList: undefined,
       tokens: [],
@@ -242,7 +246,7 @@ describe('AccountHeader Actions', () => {
       })
   })
 
-  it('should dispatch correct actions on ripple address not found', () => {
+  it('should dispatch correct actions on address not found', () => {
     const expectedActions = [
       { type: actionTypes.START_LOADING_ACCOUNT_STATE },
       { type: actionTypes.FINISHED_LOADING_ACCOUNT_STATE },
@@ -253,6 +257,7 @@ describe('AccountHeader Actions', () => {
       },
     ]
     client.addResponse('account_info', { result: actNotFound })
+    client.addResponse('account_tx', { result: actNotFound })
     const store = mockStore({ news: initialState })
     return store
       .dispatch(actions.loadAccountState(TEST_ADDRESS, client))
@@ -261,7 +266,7 @@ describe('AccountHeader Actions', () => {
       })
   })
 
-  it('should dispatch correct actions on invalid ripple address', () => {
+  it('should dispatch correct actions on invalid address', () => {
     const expectedActions = [
       {
         type: actionTypes.ACCOUNT_STATE_LOAD_FAIL,

src/containers/Header/MobileMenu.jsx

@@ -9,7 +9,7 @@ import {
   BREAKPOINTS,
 } from '../shared/utils'
 import defaultRoutes from './routes'
-import Search from './Search'
+import { Search } from './Search'
 import arrowIcon from '../shared/images/down_arrow_black_50.png'
 import closeIcon from '../shared/images/close.png'
 import unionIcon from '../shared/images/union.png'

src/containers/Header/Search.jsx → src/containers/Header/Search.tsx

@@ -1,13 +1,15 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { withTranslation } from 'react-i18next'
-import { Redirect } from 'react-router-dom'
+import React, { KeyboardEventHandler, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router-dom'
+import { XrplClient } from 'xrpl-client'
+
 import {
   isValidClassicAddress,
   isValidXAddress,
   classicAddressToXAddress,
 } from 'ripple-address-codec'
 import { isValidPayId as isValidPayString } from 'payid-lib'
+import SocketContext from '../shared/SocketContext'
 import {
   analytics,
   ANALYTIC_TYPES,
@@ -19,9 +21,8 @@ import {
 } from '../shared/utils'
 import './search.scss'
 import { getTransaction } from '../../rippled/lib/rippled'
-import SocketContext from '../shared/SocketContext'
 
-const determineHashType = async (id, rippledContext) => {
+const determineHashType = async (id: string, rippledContext: XrplClient) => {
   try {
     await getTransaction(rippledContext, id)
     return 'transactions'
@@ -30,7 +31,7 @@ const determineHashType = async (id, rippledContext) => {
   }
 }
 
-const getIdType = async (id, rippledContext) => {
+const getIdType = async (id: string, rippledContext: XrplClient) => {
   if (DECIMAL_REGEX.test(id)) {
     return 'ledgers'
   }
@@ -63,7 +64,7 @@ const getIdType = async (id, rippledContext) => {
 
 // normalize classicAddress:tag to X-address
 // TODO: Take network into account (!)
-const normalize = (id, type) => {
+const normalize = (id: string, type: string) => {
   if (type === 'transactions') {
     return id.toUpperCase()
   }
@@ -75,7 +76,7 @@ const normalize = (id, type) => {
         components[0],
         components[1] === undefined || components[1] === 'false'
           ? false
-          : components[1],
+          : Number(components[1]),
         false,
       ) // TODO: Take network into account (!)
       return xAddress
@@ -93,73 +94,47 @@ const normalize = (id, type) => {
   return id
 }
 
-class Search extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { redirect: '' }
-    this.onKeyDown = this.onKeyDown.bind(this)
-  }
+export interface SearchProps {
+  mobile: boolean
+  callback: Function
+}
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ redirect: '' })
-  }
+export const Search = ({
+  callback = () => {},
+  mobile = false,
+}: SearchProps) => {
+  const { t } = useTranslation()
+  const socket = useContext(SocketContext)
+  const history = useHistory()
 
-  async handleSearch(id) {
-    const { callback } = this.props
-    const type = await getIdType(id, this.context)
+  const handleSearch = async (id: string) => {
+    const type = await getIdType(id, socket)
 
     analytics(ANALYTIC_TYPES.event, {
       eventCategory: 'globalSearch',
       eventAction: type,
       eventLabel: id,
     })
 
-    this.setState(
-      {
-        redirect:
-          type === 'invalid'
-            ? `/search/${id}`
-            : `/${type}/${normalize(id, type)}`,
-      },
-      callback,
+    history.push(
+      type === 'invalid' ? `/search/${id}` : `/${type}/${normalize(id, type)}`,
     )
+    callback()
   }
 
-  onKeyDown(event) {
+  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (event.key === 'Enter') {
-      this.handleSearch(event.currentTarget.value.trim())
+      handleSearch(event.currentTarget?.value?.trim())
     }
   }
 
-  render() {
-    const { t, mobile } = this.props
-    const { redirect } = this.state
-    return redirect ? (
-      <Redirect push to={redirect} />
-    ) : (
-      <div className={mobile ? 'search' : 'search in-header'}>
-        <input
-          type="text"
-          placeholder={t('header.search.placeholder')}
-          onKeyDown={this.onKeyDown}
-        />
-      </div>
-    )
-  }
-}
-
-Search.contextType = SocketContext
-
-Search.propTypes = {
-  t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool,
-  callback: PropTypes.func,
+  return (
+    <div className={mobile ? 'search' : 'search in-header'}>
+      <input
+        type="text"
+        placeholder={t('header.search.placeholder')}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  )
 }
-
-Search.defaultProps = {
-  mobile: false,
-  callback: () => {},
-}
-
-export default withTranslation()(Search)

src/containers/Header/index.jsx

@@ -9,7 +9,7 @@ import { BREAKPOINTS, ANALYTIC_TYPES, analytics } from '../shared/utils'
 import Menu from './Menu'
 import MobileMenu from './MobileMenu'
 import Banner from './Banner'
-import Search from './Search'
+import { Search } from './Search'
 import { ReactComponent as Logo } from '../shared/images/XRPLedger.svg'
 import { ReactComponent as ArrowIcon } from '../shared/images/down_arrow.svg'
 import { ReactComponent as CheckIcon } from '../shared/images/checkmark.svg'

src/containers/Header/test/Search.test.js

@@ -2,26 +2,22 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { I18nextProvider } from 'react-i18next'
 import { BrowserRouter as Router } from 'react-router-dom'
-import configureMockStore from 'redux-mock-store'
-import thunk from 'redux-thunk'
-import { Provider } from 'react-redux'
-import { initialState } from '../../../rootReducer'
 import i18n from '../../../i18nTestConfig'
-import Search from '../Search'
+import { Search } from '../Search'
 import * as rippled from '../../../rippled/lib/rippled'
+import SocketContext from '../../shared/SocketContext'
+import MockWsClient from '../../test/mockWsClient'
 
-describe('Header component', () => {
-  const middlewares = [thunk]
-  const mockStore = configureMockStore(middlewares)
-  const createWrapper = (state = {}) => {
-    const store = mockStore({ ...initialState, ...state })
+describe('Search component', () => {
+  const createWrapper = () => {
+    const client = new MockWsClient()
     return mount(
       <I18nextProvider i18n={i18n}>
-        <Router>
-          <Provider store={store}>
+        <SocketContext.Provider value={client}>
+          <Router>
             <Search />
-          </Provider>
-        </Router>
+          </Router>
+        </SocketContext.Provider>
       </I18nextProvider>,
     )
   }

src/containers/Ledgers/Ledgers.jsx

@@ -220,7 +220,7 @@ class Ledgers extends Component {
     const partial = v.partial ? <div className="partial" /> : null
     return (
       <div
-        key={v.pubkey}
+        key={`${v.pubkey}_${v.cookie}`}
         role="button"
         tabIndex={i}
         className={className}