(improvement) Movements currency display

src/components/Movements/Movements.columns.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import { Cell } from '@blueprintjs/table'
 
-import { formatAmount, fixedFloat, insertIf } from 'ui/utils'
-import Explorer from 'ui/Explorer'
 import config from 'config'
+import Explorer from 'ui/Explorer'
 import { getColumnWidth } from 'utils/columns'
+import { prepareCurrency } from 'state/symbols/utils'
+import { formatAmount, fixedFloat, insertIf } from 'ui/utils'
 
 const getColumns = ({
   t,
   timeOffset,
+  tetherNames,
   getFullTime,
   filteredData,
   columnsWidth,
@@ -72,10 +74,11 @@ const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('currency', columnsWidth),
     renderer: (rowIndex) => {
-      const { currency } = filteredData[rowIndex]
+      const { currency, currencyName } = filteredData[rowIndex]
+      const preparedCurrency = prepareCurrency(currency, currencyName, tetherNames)
       return (
-        <Cell tooltip={currency}>
-          {currency}
+        <Cell tooltip={preparedCurrency}>
+          {preparedCurrency}
         </Cell>
       )
     },

src/components/Movements/Movements.container.js

@@ -13,6 +13,7 @@ import {
   clearTargetSymbols,
 } from 'state/movements/actions'
 import { jumpPage } from 'state/pagination/actions'
+import { getTetherNames } from 'state/symbols/selectors'
 import { getFilteredEntries } from 'state/pagination/selectors'
 import { getFullTime, getTimeOffset } from 'state/base/selectors'
 import {
@@ -32,6 +33,7 @@ const mapStateToProps = state => ({
   getFullTime: getFullTime(state),
   timeOffset: getTimeOffset(state),
   pageLoading: getPageLoading(state),
+  tetherNames: getTetherNames(state),
   dataReceived: getDataReceived(state),
   existingCoins: getExistingCoins(state),
   targetSymbols: getTargetSymbols(state),

src/components/Movements/Movements.js

@@ -34,6 +34,26 @@ class Movements extends PureComponent {
       status: PropTypes.bool,
       transactionId: PropTypes.bool,
     }),
+    tetherNames: PropTypes.shape({
+      TESTUSDT: PropTypes.string,
+      TESTUSDTF0: PropTypes.string,
+      UST: PropTypes.string,
+      USDTKSM: PropTypes.string,
+      USTF0: PropTypes.string,
+      USDTAVAX: PropTypes.string,
+      USDTALG: PropTypes.string,
+      USDTBCH: PropTypes.string,
+      USS: PropTypes.string,
+      USE: PropTypes.string,
+      USDTKAVA: PropTypes.string,
+      USDTNEAR: PropTypes.string,
+      USDTDOT: PropTypes.string,
+      USDTPLY: PropTypes.string,
+      USDTSOL: PropTypes.string,
+      USDTXTZ: PropTypes.string,
+      USX: PropTypes.string,
+      USDTZK: PropTypes.string,
+    }),
     columnsWidth: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string.isRequired,
       width: PropTypes.number.isRequired,
@@ -62,6 +82,7 @@ class Movements extends PureComponent {
   static defaultProps = {
     columns: {},
     entries: [],
+    tetherNames: {},
     columnsWidth: [],
     existingCoins: [],
     targetSymbols: [],
@@ -102,6 +123,7 @@ class Movements extends PureComponent {
       timeOffset,
       getFullTime,
       pageLoading,
+      tetherNames,
       columnsWidth,
       dataReceived,
       existingCoins,
@@ -111,6 +133,7 @@ class Movements extends PureComponent {
     const tableColumns = getColumns({
       t,
       timeOffset,
+      tetherNames,
       getFullTime,
       columnsWidth,
       filteredData: entries,

src/state/symbols/reducer.js

@@ -21,6 +21,7 @@ const initialState = {
   isFetched: false,
   pairs: [], // pair
   fundingCoins: [],
+  tetherNames: {},
 }
 
 export function symbolsReducer(state = initialState, action) {
@@ -40,18 +41,23 @@ export function symbolsReducer(state = initialState, action) {
       const dict = {}
       const explorersDict = {}
       const symbolMapping = {}
+      const tetherNames = {}
 
       currencies.forEach((currency) => {
         const {
           id, explorer, name, isInPair, isFunding,
         } = currency
 
+        let { symbol } = currency
+
+        if (symbol === 'USDt' || _includes(symbol, 'USDT')) {
+          tetherNames[id] = name
+        }
+
         if (id !== 'LNX' && !isInPair) {
           return
         }
 
-        let { symbol } = currency
-
         if (symbol && id !== symbol) {
           if (id.includes('TEST')) {
             symbol = `${symbol} (Test)`
@@ -113,6 +119,7 @@ export function symbolsReducer(state = initialState, action) {
         isFetched: true,
         pairs: preparedPairs,
         fundingCoins,
+        tetherNames,
       }
     }
     case authTypes.LOGOUT:

src/state/symbols/selectors.js

@@ -8,6 +8,7 @@ export const getInactivePairs = state => getSymbols(state).inactivePairs
 export const getPairs = state => getSymbols(state).pairs
 export const getSymbolsFetchStatus = state => getSymbols(state).isFetched
 export const getFundingCoins = state => getSymbols(state)?.fundingCoins ?? []
+export const getTetherNames = state => getSymbols(state)?.tetherNames ?? {}
 
 export default {
   getCoins,
@@ -18,4 +19,5 @@ export default {
   getPairs,
   getSymbolsFetchStatus,
   getFundingCoins,
+  getTetherNames,
 }

src/state/symbols/utils/index.js

@@ -1,3 +1,4 @@
+import _replace from 'lodash/replace'
 import _includes from 'lodash/includes'
 import _castArray from 'lodash/castArray'
 
@@ -81,6 +82,14 @@ export const formatRawSymbols = (symbols, isFunding) => {
 
 export const isTestSymbol = (symbol) => _includes(symbol, ' (Test)')
 
+export const prepareCurrency = (curr, currName, tetherNames) => {
+  let preparedCurrency
+  if (curr === 'USDt') {
+    preparedCurrency = tetherNames?.[_replace(currName, 'TETHER', '')] ?? curr
+  } else preparedCurrency = curr
+  return preparedCurrency
+}
+
 export default {
   formatPair,
   formatRawSymbols,
@@ -90,4 +99,5 @@ export default {
   isTradingPair,
   removePrefix,
   isTestSymbol,
+  prepareCurrency,
 }