Savers overview (pt.1) (#2466)

Savers overview table

src/renderer/components/uielements/button/ActionButton.tsx

@@ -12,19 +12,20 @@ import { TextButton, FlatButton } from './index'
 export type Action = { label: string; callback: FP.Lazy<void>; disabled?: boolean }
 export type Props = Omit<ButtonProps, 'onClick'> & {
   actions: Action[]
+  btnClassName?: string
   isTextView?: boolean
 }
 
 export const ActionButton: React.FC<Props> = (props): JSX.Element => {
-  const { size, actions, isTextView = true, disabled = false, className = '' } = props
+  const { size, actions, isTextView = true, disabled = false, className = '', btnClassName = '' } = props
 
   const intl = useIntl()
 
   return (
     <Popover className={`relative ${className}`}>
       <Popover.Button as="div" className="group">
         {({ open }) => (
-          <FlatButton size={size} disabled={disabled}>
+          <FlatButton className={`${btnClassName}`} size={size} disabled={disabled}>
             <span className={`${isTextView ? 'mr-10px' : 'hidden'}`}>
               {intl.formatMessage({ id: 'common.action' })}
             </span>

src/renderer/helpers/poolHelper.ts

@@ -23,7 +23,7 @@ import { ordBaseAmount } from './fp/ord'
 import { sequenceTOption, sequenceTOptionFromArray } from './fpHelpers'
 import { emptyString } from './stringHelper'
 
-export const sortByDepth = (a: PoolTableRowData, b: PoolTableRowData) =>
+export const sortByDepth = (a: { depthPrice: BaseAmount }, b: { depthPrice: BaseAmount }) =>
   ordBaseAmount.compare(a.depthPrice, b.depthPrice)
 
 const ordByDepth = Ord.Contravariant.contramap(ordBaseAmount, ({ depthPrice }: PoolTableRowData) => depthPrice)
@@ -59,6 +59,16 @@ export const RUNE_POOL_ADDRESS: PoolAddress = {
   router: O.none
 }
 
+// get symbol of deepest pool
+export const getDeepestPoolSymbol = (poolDetails: PoolDetails): O.Option<string> =>
+  FP.pipe(
+    poolDetails,
+    getDeepestPool,
+    O.chain((poolDetail) => O.fromNullable(poolDetail.asset)),
+    O.chain((assetString) => O.fromNullable(assetFromString(assetString))),
+    O.map(({ symbol }) => symbol)
+  )
+
 export const getPoolTableRowsData = ({
   poolDetails,
   pricePoolData,
@@ -71,13 +81,7 @@ export const getPoolTableRowsData = ({
   network: Network
 }): PoolTableRowsData => {
   // get symbol of deepest pool
-  const oDeepestPoolSymbol: O.Option<string> = FP.pipe(
-    poolDetails,
-    getDeepestPool,
-    O.chain((poolDetail) => O.fromNullable(poolDetail.asset)),
-    O.chain((assetString) => O.fromNullable(assetFromString(assetString))),
-    O.map(({ symbol }) => symbol)
-  )
+  const oDeepestPoolSymbol: O.Option<string> = getDeepestPoolSymbol(poolDetails)
 
   // Transform `PoolDetails` -> PoolRowType
   return FP.pipe(

src/renderer/helpers/savers.ts

@@ -0,0 +1,121 @@
+import { getValueOfAsset1InAsset2, PoolData } from '@thorchain/asgardex-util'
+import { assetFromString, BaseAmount, baseAmount } from '@xchainjs/xchain-util'
+import * as A from 'fp-ts/lib/Array'
+import * as FP from 'fp-ts/lib/function'
+import * as O from 'fp-ts/lib/Option'
+import * as Ord from 'fp-ts/lib/Ord'
+
+import { PoolsWatchList } from '../../shared/api/io'
+import { Network } from '../../shared/api/types'
+import type { PoolDetails } from '../services/midgard/types'
+import { toPoolData } from '../services/midgard/utils'
+import { PoolDetail } from '../types/generated/midgard'
+import type { SaversTableRowData, SaversTableRowsData } from '../views/savers/Savers.types'
+import { eqAsset, eqString } from './fp/eq'
+import { ordBaseAmount } from './fp/ord'
+import { sequenceTOption, sequenceTOptionFromArray } from './fpHelpers'
+import { getDeepestPoolSymbol } from './poolHelper'
+
+/**
+ * Order savers by depth price
+ */
+export const ordSaversByDepth = Ord.Contravariant.contramap(
+  ordBaseAmount,
+  ({ depthPrice }: { depthPrice: BaseAmount }) => depthPrice
+)
+
+export const getSaversTableRowData = ({
+  poolDetail,
+  pricePoolData,
+  watchlist,
+  network
+}: {
+  // TODO(@veado) Update Midgard types
+  poolDetail: PoolDetail & { saversDepth?: string }
+  pricePoolData: PoolData
+  watchlist: PoolsWatchList
+  network: Network
+}): O.Option<SaversTableRowData> => {
+  return FP.pipe(
+    poolDetail.asset,
+    assetFromString,
+    O.fromNullable,
+    O.map((poolDetailAsset) => {
+      const poolData = toPoolData(poolDetail)
+      const depthAmount = baseAmount(poolDetail.saversDepth)
+      const depthPrice = getValueOfAsset1InAsset2(depthAmount, poolData, pricePoolData)
+
+      const watched: boolean = FP.pipe(
+        watchlist,
+        A.findFirst((poolInList) => eqAsset.equals(poolInList, poolDetailAsset)),
+        O.isSome
+      )
+
+      return {
+        asset: poolDetailAsset,
+        depth: depthAmount,
+        depthPrice,
+        filled: 0, // TODO(@veado) Get dat from extra data
+        count: 0, // TODO(@veado) Get dat from extra data
+        key: poolDetailAsset.ticker,
+        network,
+        apr: 0, // get APR
+        watched
+      }
+    })
+  )
+}
+
+export const getSaversTableRowsData = ({
+  poolDetails,
+  pricePoolData,
+  watchlist,
+  network
+}: {
+  poolDetails: PoolDetails
+  pricePoolData: PoolData
+  watchlist: PoolsWatchList
+  network: Network
+}): SaversTableRowsData => {
+  // get symbol of deepest pool
+  const oDeepestPoolSymbol: O.Option<string> = getDeepestPoolSymbol(poolDetails)
+
+  // Transform `PoolDetails` -> SaversTableRowData
+  return FP.pipe(
+    poolDetails,
+    A.mapWithIndex<PoolDetail, O.Option<SaversTableRowData>>((index, poolDetail) => {
+      // get symbol of PoolDetail
+      const oPoolDetailSymbol: O.Option<string> = FP.pipe(
+        O.fromNullable(assetFromString(poolDetail.asset ?? '')),
+        O.map(({ symbol }) => symbol)
+      )
+      // compare symbols to set deepest pool
+      const deepest = FP.pipe(
+        sequenceTOption(oDeepestPoolSymbol, oPoolDetailSymbol),
+        O.fold(
+          () => false,
+          ([deepestPoolSymbol, poolDetailSymbol]) => eqString.equals(deepestPoolSymbol, poolDetailSymbol)
+        )
+      )
+
+      return FP.pipe(
+        getSaversTableRowData({ poolDetail, pricePoolData, watchlist, network }),
+        O.map(
+          (poolTableRowData) =>
+            ({
+              ...poolTableRowData,
+              key: poolDetail?.asset || index.toString(),
+              deepest
+            } as SaversTableRowData)
+        )
+      )
+    }),
+    sequenceTOptionFromArray,
+    O.getOrElse(() => [] as SaversTableRowsData),
+    // Table does not accept `defaultSortOrder` for depth  for any reason,
+    // that's why we sort depth here
+    A.sortBy([ordSaversByDepth]),
+    // descending sort
+    A.reverse
+  )
+}

src/renderer/i18n/de/common.ts

@@ -67,6 +67,7 @@ const common: CommonMessages = {
   'common.add': 'Einzahlen',
   'common.swap': 'Swap',
   'common.savers': 'Savers',
+  'common.earn': 'Earn',
   'common.liquidity': 'Liquidität',
   'common.withdraw': 'Auszahlen',
   'common.approve': 'Erlauben',

src/renderer/i18n/de/pools.ts

@@ -3,6 +3,9 @@ import { PoolsMessages } from '../types'
 const pools: PoolsMessages = {
   'pools.depth': 'Tiefe',
   'pools.apy': 'APY',
+  'pools.apr': 'APR',
+  'pools.count': 'Anzahl',
+  'pools.filled': 'Gefüllt',
   'pools.24hvol': '24h Volumen',
   'pools.avgsize': 'Größe Ø',
   'pools.avgfee': 'Gebühr Ø',

src/renderer/i18n/en/common.ts

@@ -67,6 +67,7 @@ const common: CommonMessages = {
   'common.add': 'Add',
   'common.swap': 'Swap',
   'common.savers': 'Savers',
+  'common.earn': 'Earn',
   'common.withdraw': 'Withdraw',
   'common.liquidity': 'Liquidity',
   'common.approve': 'Approve',

src/renderer/i18n/en/pools.ts

@@ -4,6 +4,9 @@ const pools: PoolsMessages = {
   'pools.depth': 'Depth',
   'pools.24hvol': '24h volume',
   'pools.apy': 'APY',
+  'pools.apr': 'APR',
+  'pools.count': 'Count',
+  'pools.filled': 'Filled',
   'pools.avgsize': 'avg size',
   'pools.avgfee': 'avg fee',
   'pools.blocksleft': 'blocks left',

src/renderer/i18n/fr/common.ts

@@ -67,6 +67,7 @@ const common: CommonMessages = {
   'common.add': 'Ajouter',
   'common.swap': 'Échanger',
   'common.savers': 'Savers - FR',
+  'common.earn': 'Earn - FR',
   'common.liquidity': 'Liquidité',
   'common.withdraw': 'Retrait',
   'common.approve': 'Approuver',

src/renderer/i18n/fr/pools.ts

@@ -4,6 +4,9 @@ const pools: PoolsMessages = {
   'pools.depth': 'Profondeur',
   'pools.24hvol': 'Volume sur 24h',
   'pools.apy': 'APY',
+  'pools.apr': 'APR',
+  'pools.count': 'Count - FR',
+  'pools.filled': 'Filled - FR',
   'pools.avgsize': 'Taille moyenne',
   'pools.avgfee': 'Intérêts',
   'pools.blocksleft': 'Blocs restants',

src/renderer/i18n/ru/common.ts

@@ -67,6 +67,7 @@ const common: CommonMessages = {
   'common.add': 'Добавить',
   'common.swap': 'Обмен',
   'common.savers': 'Savers - RU',
+  'common.earn': 'Earn - RU',
   'common.liquidity': 'Ликвидность',
   'common.withdraw': 'Вывести',
   'common.approve': 'Подтвердить',

src/renderer/i18n/ru/pools.ts

@@ -4,6 +4,9 @@ const pools: PoolsMessages = {
   'pools.depth': 'Глубина',
   'pools.24hvol': 'объёмы за 24ч',
   'pools.apy': 'годовых',
+  'pools.apr': 'APR - RU',
+  'pools.count': 'Count - RU',
+  'pools.filled': 'Filled - RU',
   'pools.avgsize': 'ср. размер',
   'pools.avgfee': 'ср. комиссия',
   'pools.blocksleft': 'блоков осталось',

src/renderer/i18n/types.ts

@@ -66,6 +66,7 @@ export type CommonMessageKey =
   | 'common.add'
   | 'common.swap'
   | 'common.savers'
+  | 'common.earn'
   | 'common.liquidity'
   | 'common.withdraw'
   | 'common.approve'
@@ -148,6 +149,9 @@ export type RoutesMessages = { [key in RoutesMessageKey]: string }
 type PoolsMessageKey =
   | 'pools.depth'
   | 'pools.apy'
+  | 'pools.apr'
+  | 'pools.count'
+  | 'pools.filled'
   | 'pools.24hvol'
   | 'pools.avgsize'
   | 'pools.avgfee'