From 64e705a09f0a22fba9ac1e5c5d11c86a39510935 Mon Sep 17 00:00:00 2001
From: Veado <veado@protonmail.com>
Date: Fri, 9 Dec 2022 18:44:51 +0100
Subject: [PATCH 1/5] `setPoolsPeriod`/`poolsPeriod$`

---
 src/renderer/const.ts                        |  3 ++
 src/renderer/services/midgard/pools.ts       | 34 +++++++++++++++-----
 src/renderer/services/midgard/types.ts       |  5 ++-
 src/renderer/views/pools/ActivePools.tsx     | 26 ++++++++++++---
 src/renderer/views/savers/SaversOverview.tsx | 28 +++++++++++++---
 5 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/renderer/const.ts b/src/renderer/const.ts
index 7f9830734..7c39a7328 100644
--- a/src/renderer/const.ts
+++ b/src/renderer/const.ts
@@ -24,6 +24,7 @@ import {
 } from '@xchainjs/xchain-util'
 
 import { Network } from '../shared/api/types'
+import { GetPoolsPeriodEnum } from './types/generated/midgard'
 import { PricePoolCurrencyWeights, PricePoolAssets } from './views/pools/Pools.types'
 
 //
@@ -206,3 +207,5 @@ export const SUPPORTED_LEDGER_APPS: Chain[] = [
   ETHChain,
   CosmosChain
 ]
+
+export const DEFAULT_GET_POOLS_PERIOD = GetPoolsPeriodEnum._30d
diff --git a/src/renderer/services/midgard/pools.ts b/src/renderer/services/midgard/pools.ts
index 033135113..bbe49472b 100644
--- a/src/renderer/services/midgard/pools.ts
+++ b/src/renderer/services/midgard/pools.ts
@@ -9,7 +9,7 @@ import * as O from 'fp-ts/Option'
 import * as Rx from 'rxjs'
 import * as RxOp from 'rxjs/operators'
 
-import { ONE_BN, PRICE_POOLS_WHITELIST } from '../../const'
+import { DEFAULT_GET_POOLS_PERIOD, ONE_BN, PRICE_POOLS_WHITELIST } from '../../const'
 import { validAssetForETH, isPricePoolAsset, midgardAssetFromString } from '../../helpers/assetHelper'
 import { isEnabledChain, isEthChain } from '../../helpers/chainHelper'
 import { eqAsset, eqOAsset, eqOPoolAddresses, eqHaltedChain } from '../../helpers/fp/eq'
@@ -21,6 +21,7 @@ import {
   DefaultApi,
   GetEarningsHistoryRequest,
   GetLiquidityHistoryRequest,
+  GetPoolsPeriodEnum,
   GetPoolsRequest,
   GetPoolsStatusEnum,
   GetPoolStatsPeriodEnum,
@@ -101,7 +102,11 @@ const createPoolsService = ({
   loadInboundAddresses$: () => InboundAddressesLD
   inboundAddressesShared$: InboundAddressesLD
 }): PoolsService => {
-  const midgardDefaultApi$ = FP.pipe(midgardUrl$, liveData.map(getMidgardDefaultApi), RxOp.shareReplay(1))
+  const midgardDefaultApi$: LiveData<Error, DefaultApi> = FP.pipe(
+    midgardUrl$,
+    liveData.map(getMidgardDefaultApi),
+    RxOp.shareReplay(1)
+  )
 
   const {
     get$: poolsFilters$,
@@ -120,11 +125,16 @@ const createPoolsService = ({
   // Factory to get `Pools` from Midgard
   const apiGetPools$ = (request: GetPoolsRequest, reload$: TriggerStream$): PoolDetailsLD =>
     FP.pipe(
-      Rx.combineLatest([midgardDefaultApi$, reload$]),
-      RxOp.map(([api]) => api),
-      liveData.chain((api) =>
+      Rx.combineLatest([midgardDefaultApi$, poolsPeriod$, reload$]),
+      RxOp.map(([apiRD, period, _]) =>
+        FP.pipe(
+          apiRD,
+          RD.map((api) => ({ api, period }))
+        )
+      ),
+      liveData.chain(({ api, period }) =>
         FP.pipe(
-          api.getPools(request),
+          api.getPools({ ...request, period }),
           RxOp.map(RD.success),
           // Filter `PoolDetails`by using enabled chains only (defined via ENV)
           liveData.map(
@@ -149,6 +159,10 @@ const createPoolsService = ({
   // `TriggerStream` to reload data of pools
   const { stream$: reloadPools$, trigger: reloadPools } = triggerStream()
 
+  const { get$: _getPoolsPeriod$, set: setPoolsPeriod } = observableState<GetPoolsPeriodEnum>(DEFAULT_GET_POOLS_PERIOD)
+
+  const poolsPeriod$ = FP.pipe(_getPoolsPeriod$, RxOp.distinctUntilChanged(), RxOp.shareReplay(1))
+
   /**
    * Data of enabled `Pools` from Midgard
    */
@@ -303,7 +317,8 @@ const createPoolsService = ({
   /**
    * `PoolDetails` of all pools
    */
-  const allPoolDetails$: PoolDetailsLD = reloadPools$.pipe(
+  const allPoolDetails$: PoolDetailsLD = FP.pipe(
+    reloadPools$,
     // start loading queue
     RxOp.switchMap(loadAllPoolDetails$),
     // cache it to avoid reloading data by every subscription
@@ -420,7 +435,8 @@ const createPoolsService = ({
   /**
    * State of data of pendings pools
    */
-  const pendingPoolsState$: PendingPoolsStateLD = reloadPendingPools$.pipe(
+  const pendingPoolsState$: PendingPoolsStateLD = FP.pipe(
+    reloadPendingPools$,
     // start loading queue
     RxOp.switchMap(loadPendingPoolsStateData$),
     // cache it to avoid reloading data by every subscription
@@ -830,6 +846,8 @@ const createPoolsService = ({
     )
 
   return {
+    setPoolsPeriod,
+    poolsPeriod$: poolsPeriod$,
     poolsState$,
     pendingPoolsState$,
     allPoolDetails$,
diff --git a/src/renderer/services/midgard/types.ts b/src/renderer/services/midgard/types.ts
index f7fc157ed..8b65c8dac 100644
--- a/src/renderer/services/midgard/types.ts
+++ b/src/renderer/services/midgard/types.ts
@@ -25,7 +25,8 @@ import {
   DepthHistory,
   DepthHistoryItem,
   SwapHistoryItem,
-  GetLiquidityHistoryRequest
+  GetLiquidityHistoryRequest,
+  GetPoolsPeriodEnum
 } from '../../types/generated/midgard'
 import { PricePools, PricePoolAsset, PricePool } from '../../views/pools/Pools.types'
 import { Memo, PoolFeeLD } from '../chain/types'
@@ -163,6 +164,8 @@ export type HealthLD = LiveData<Error, Health>
 export type PoolType = 'active' | 'pending'
 
 export type PoolsService = {
+  setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
+  poolsPeriod$: Rx.Observable<GetPoolsPeriodEnum>
   poolsState$: LiveData<Error, PoolsState>
   pendingPoolsState$: LiveData<Error, PendingPoolsState>
   allPoolDetails$: LiveData<Error, PoolDetails>
diff --git a/src/renderer/views/pools/ActivePools.tsx b/src/renderer/views/pools/ActivePools.tsx
index 0b392269f..389e2a593 100644
--- a/src/renderer/views/pools/ActivePools.tsx
+++ b/src/renderer/views/pools/ActivePools.tsx
@@ -35,6 +35,7 @@ import { useProtocolLimit } from '../../hooks/useProtocolLimit'
 import * as poolsRoutes from '../../routes/pools'
 import { DEFAULT_NETWORK } from '../../services/const'
 import { PoolsState, DEFAULT_POOL_FILTERS } from '../../services/midgard/types'
+import { GetPoolsPeriodEnum } from '../../types/generated/midgard'
 import { PoolsComponentProps, PoolTableRowData, PoolTableRowsData } from './Pools.types'
 import { filterTableData } from './Pools.utils'
 import * as Shared from './PoolsOverview.shared'
@@ -49,12 +50,14 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
 
   const {
     service: {
-      pools: { poolsState$, reloadPools, selectedPricePool$ }
+      pools: { poolsState$, reloadPools, selectedPricePool$, poolsPeriod$, setPoolsPeriod }
     }
   } = useMidgardContext()
   const { reload: reloadLimit, data: limitRD } = useProtocolLimit()
   const { data: incentivePendulumRD } = useIncentivePendulum()
 
+  const poolsPeriod = useObservableState(poolsPeriod$, GetPoolsPeriodEnum._30d)
+
   const { setFilter: setPoolFilter, filter: poolFilter } = usePoolFilter('active')
   const { add: addPoolToWatchlist, remove: removePoolFromWatchlist, list: poolWatchList } = usePoolWatchlist()
 
@@ -176,10 +179,23 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
 
   const sortAPYColumn = useCallback((a: { apy: number }, b: { apy: number }) => ordNumber.compare(a.apy, b.apy), [])
   const apyColumn = useCallback(
-    <T extends { apy: number }>(): ColumnType<T> => ({
+    <T extends { apy: number }>(
+      poolsPeriod: GetPoolsPeriodEnum,
+      setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
+    ): ColumnType<T> => ({
       key: 'apy',
       align: 'right',
-      title: intl.formatMessage({ id: 'pools.apy' }),
+      title: (
+        <div>
+          <div className="font-main text-16">{intl.formatMessage({ id: 'pools.apy' })}</div>
+          <div>current {poolsPeriod}</div>
+          <div className="flex flex-col">
+            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._7d)}>7d</button>
+            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._30d)}>30d</button>
+          </div>
+        </div>
+      ),
+
       render: renderAPYColumn,
       sorter: sortAPYColumn,
       sortDirections: ['descend', 'ascend']
@@ -204,7 +220,7 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
             )
           ),
           O.some(volumeColumn<PoolTableRowData>()),
-          isLargeScreen ? O.some(apyColumn<PoolTableRowData>()) : O.none,
+          isLargeScreen ? O.some(apyColumn<PoolTableRowData>(poolsPeriod, setPoolsPeriod)) : O.none,
           O.some(btnPoolsColumn<PoolTableRowData>())
         ],
         A.filterMap(FP.identity)
@@ -217,6 +233,8 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
       volumeColumn,
       isLargeScreen,
       apyColumn,
+      poolsPeriod,
+      setPoolsPeriod,
       btnPoolsColumn
     ]
   )
diff --git a/src/renderer/views/savers/SaversOverview.tsx b/src/renderer/views/savers/SaversOverview.tsx
index acc62d16e..2a43bda81 100644
--- a/src/renderer/views/savers/SaversOverview.tsx
+++ b/src/renderer/views/savers/SaversOverview.tsx
@@ -23,6 +23,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { FlatButton } from '../../components/uielements/button'
 import { Table } from '../../components/uielements/table'
+import { DEFAULT_GET_POOLS_PERIOD } from '../../const'
 import { useMidgardContext } from '../../contexts/MidgardContext'
 import { isChainAsset } from '../../helpers/assetHelper'
 import { ordBigNumber } from '../../helpers/fp/ord'
@@ -35,6 +36,7 @@ import { useSynthConstants } from '../../hooks/useSynthConstants'
 import * as poolsRoutes from '../../routes/pools'
 import { PoolDetails, PoolsState } from '../../services/midgard/types'
 import type { MimirHalt } from '../../services/thorchain/types'
+import { GetPoolsPeriodEnum } from '../../types/generated/midgard'
 import * as Shared from '../pools/PoolsOverview.shared'
 import type { SaversTableRowData, SaversTableRowsData } from './Savers.types'
 
@@ -52,10 +54,12 @@ export const SaversOverview: React.FC<Props> = (props): JSX.Element => {
 
   const {
     service: {
-      pools: { poolsState$, reloadPools, selectedPricePool$ }
+      pools: { poolsState$, reloadPools, selectedPricePool$, poolsPeriod$, setPoolsPeriod }
     }
   } = useMidgardContext()
 
+  const poolsPeriod = useObservableState(poolsPeriod$, DEFAULT_GET_POOLS_PERIOD)
+
   const { maxSynthPerPoolDepth: maxSynthPerPoolDepthRD, reloadConstants } = useSynthConstants()
 
   const refreshHandler = useCallback(() => {
@@ -106,10 +110,22 @@ export const SaversOverview: React.FC<Props> = (props): JSX.Element => {
   )
 
   const aprColumn = useCallback(
-    <T extends { apr: BigNumber }>(): ColumnType<T> => ({
+    <T extends { apr: BigNumber }>(
+      poolsPeriod: GetPoolsPeriodEnum,
+      setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
+    ): ColumnType<T> => ({
       key: 'apr',
       align: 'center',
-      title: intl.formatMessage({ id: 'pools.apr' }),
+      title: (
+        <div>
+          <div className="font-main text-16">{intl.formatMessage({ id: 'pools.apr' })}</div>
+          <div>current {poolsPeriod}</div>
+          <div className="flex flex-col">
+            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._7d)}>7d</button>
+            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._30d)}>30d</button>
+          </div>
+        </div>
+      ),
       render: ({ apr }: { apr: BigNumber }) => <div className="font-main text-16">{formatBN(apr, 2)}%</div>,
       sorter: (a: { apr: BigNumber }, b: { apr: BigNumber }) => ordBigNumber.compare(a.apr, b.apr),
       sortDirections: ['descend', 'ascend']
@@ -183,7 +199,7 @@ export const SaversOverview: React.FC<Props> = (props): JSX.Element => {
       Shared.assetColumn(intl.formatMessage({ id: 'common.asset' })),
       depthColumn<SaversTableRowData>(selectedPricePool.asset),
       filledColumn<SaversTableRowData>(),
-      aprColumn<SaversTableRowData>(),
+      aprColumn<SaversTableRowData>(poolsPeriod, setPoolsPeriod),
       btnColumn()
     ],
     [
@@ -192,9 +208,11 @@ export const SaversOverview: React.FC<Props> = (props): JSX.Element => {
       btnColumn,
       depthColumn,
       filledColumn,
+      poolsPeriod,
       intl,
       removePoolFromWatchlist,
-      selectedPricePool.asset
+      selectedPricePool.asset,
+      setPoolsPeriod
     ]
   )
 

From 72bbbcfb9137f7b06347d9c1ed8e659ac45fd0d9 Mon Sep 17 00:00:00 2001
From: Veado <veado@protonmail.com>
Date: Fri, 9 Dec 2022 19:41:50 +0100
Subject: [PATCH 2/5] `PoolsPeriodSelector` component

---
 .../uielements/pools/PoolsPeriodSelector.tsx  | 134 ++++++++++++++++++
 src/renderer/views/pools/ActivePools.tsx      |  15 +-
 src/renderer/views/savers/SaversOverview.tsx  |  11 +-
 3 files changed, 144 insertions(+), 16 deletions(-)
 create mode 100644 src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx

diff --git a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
new file mode 100644
index 000000000..a6a3c2e18
--- /dev/null
+++ b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
@@ -0,0 +1,134 @@
+import React from 'react'
+
+import { Listbox } from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
+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 { GetPoolsPeriodEnum } from '../../../types/generated/midgard'
+
+type PeriodItem = { value: GetPoolsPeriodEnum; label: string }
+
+const DEFAULT_ITEM: PeriodItem = { value: GetPoolsPeriodEnum._30d, label: '30 days' }
+const LIST_ITEMS: PeriodItem[] = [
+  { value: GetPoolsPeriodEnum._7d, label: '7 days' },
+  DEFAULT_ITEM, // 30 days
+  { value: GetPoolsPeriodEnum._90d, label: '90 days' },
+  { value: GetPoolsPeriodEnum._180d, label: '180 days' },
+  { value: GetPoolsPeriodEnum._365d, label: '365 days' }
+]
+
+export type Props = {
+  selectedValue: GetPoolsPeriodEnum
+  onChange: (value: GetPoolsPeriodEnum) => void
+  className?: string
+  disabled?: boolean
+}
+
+export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
+  const { selectedValue, onChange, disabled = false, className = '' } = props
+
+  const selectedItem: PeriodItem = FP.pipe(
+    LIST_ITEMS,
+    // get selected wallet
+    A.findFirst(({ value }) => value === selectedValue),
+    // use first if no wallet is selected
+    O.getOrElse(() => DEFAULT_ITEM)
+  )
+
+  return (
+    <Listbox
+      value={selectedItem}
+      disabled={disabled}
+      onChange={({ value }) => {
+        onChange(value)
+      }}
+      as="div"
+      className={({ open }) => `
+                    ${open ? 'shadow-full dark:shadow-fulld' : ''}
+                    `}>
+      <div
+        className={`relative ${className}`}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          event.preventDefault()
+          event.stopPropagation()
+        }}>
+        <Listbox.Button
+          as="div"
+          className={() => `text-12
+              group
+              flex cursor-pointer
+              items-center
+                    bg-bg0
+                    py-5px
+                    pl-20px
+                   pr-10px font-main
+                   text-text0
+                    transition
+                    duration-300
+                    ease-in-out hover:shadow-full
+                    hover:dark:shadow-fulld
+                    ${disabled && 'opacity-70'}
+                    dark:bg-bg0d
+                    dark:text-text0d
+                    `}>
+          {({ open }) => (
+            <>
+              <span className="w-full">{selectedItem.label}</span>
+              <ChevronDownIcon
+                className={`
+                  ${open && 'rotate-180'}
+                  ease
+                  h-20px w-20px
+                          group-hover:rotate-180
+
+                  `}
+              />
+            </>
+          )}
+        </Listbox.Button>
+        <Listbox.Options
+          className="
+              absolute z-[2000]
+              mt-[0px]
+            max-h-60 w-full overflow-auto
+            border
+            border-gray0 bg-bg0 focus:outline-none
+            dark:border-gray0d  dark:bg-bg0d
+
+            ">
+          {FP.pipe(
+            LIST_ITEMS,
+            A.map((item) => {
+              const selected = item.value === selectedItem.value
+              return (
+                <Listbox.Option
+                  disabled={item.value === selectedItem.value}
+                  className={({ selected }) =>
+                    `flex w-full
+                      select-none
+                      justify-center whitespace-nowrap
+                      py-[10px] pl-20px pr-10px
+                      ${selected && 'text-gray2 dark:text-gray2d'}
+                      ${selected ? 'cursor-disabled' : 'cursor-pointer'}
+                      text-12 font-main
+                      text-text0
+                      dark:text-text0d
+                      ${!selected && 'hover:bg-gray0 hover:text-gray2'}
+                      ${!selected && 'hover:dark:bg-gray0d hover:dark:text-gray2d'}
+                      `
+                  }
+                  key={item.value}
+                  value={item}>
+                  {item.label}
+                  <CheckIcon className={`ml-5px h-20px w-20px text-turquoise ${selected ? 'visible' : 'invisible'}`} />
+                </Listbox.Option>
+              )
+            })
+          )}
+        </Listbox.Options>
+      </div>
+    </Listbox>
+  )
+}
diff --git a/src/renderer/views/pools/ActivePools.tsx b/src/renderer/views/pools/ActivePools.tsx
index 389e2a593..885278214 100644
--- a/src/renderer/views/pools/ActivePools.tsx
+++ b/src/renderer/views/pools/ActivePools.tsx
@@ -23,6 +23,7 @@ import { useNavigate } from 'react-router-dom'
 import { Network } from '../../../shared/api/types'
 import { ProtocolLimit, IncentivePendulum } from '../../components/pool'
 import { Action as ActionButtonAction, ActionButton } from '../../components/uielements/button/ActionButton'
+import { PoolsPeriodSelector } from '../../components/uielements/pools/PoolsPeriodSelector'
 import { Table } from '../../components/uielements/table'
 import { useAppContext } from '../../contexts/AppContext'
 import { useMidgardContext } from '../../contexts/MidgardContext'
@@ -170,7 +171,7 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
 
   const renderAPYColumn = useCallback(
     ({ apy }: { apy: number }) => (
-      <Styled.Label align="right" nowrap>
+      <Styled.Label align="center" nowrap>
         {formatBN(bn(apy), 2)}%
       </Styled.Label>
     ),
@@ -184,15 +185,11 @@ export const ActivePools: React.FC<PoolsComponentProps> = ({ haltedChains, mimir
       setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
     ): ColumnType<T> => ({
       key: 'apy',
-      align: 'right',
+      align: 'center',
       title: (
-        <div>
-          <div className="font-main text-16">{intl.formatMessage({ id: 'pools.apy' })}</div>
-          <div>current {poolsPeriod}</div>
-          <div className="flex flex-col">
-            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._7d)}>7d</button>
-            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._30d)}>30d</button>
-          </div>
+        <div className="flex flex-col items-center">
+          <div className="text-12 font-main">{intl.formatMessage({ id: 'pools.apy' })}</div>
+          <PoolsPeriodSelector selectedValue={poolsPeriod} onChange={setPoolsPeriod} />
         </div>
       ),
 
diff --git a/src/renderer/views/savers/SaversOverview.tsx b/src/renderer/views/savers/SaversOverview.tsx
index 2a43bda81..f72c724fb 100644
--- a/src/renderer/views/savers/SaversOverview.tsx
+++ b/src/renderer/views/savers/SaversOverview.tsx
@@ -22,6 +22,7 @@ import { useIntl } from 'react-intl'
 import { useNavigate } from 'react-router-dom'
 
 import { FlatButton } from '../../components/uielements/button'
+import { PoolsPeriodSelector } from '../../components/uielements/pools/PoolsPeriodSelector'
 import { Table } from '../../components/uielements/table'
 import { DEFAULT_GET_POOLS_PERIOD } from '../../const'
 import { useMidgardContext } from '../../contexts/MidgardContext'
@@ -117,13 +118,9 @@ export const SaversOverview: React.FC<Props> = (props): JSX.Element => {
       key: 'apr',
       align: 'center',
       title: (
-        <div>
-          <div className="font-main text-16">{intl.formatMessage({ id: 'pools.apr' })}</div>
-          <div>current {poolsPeriod}</div>
-          <div className="flex flex-col">
-            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._7d)}>7d</button>
-            <button onClick={() => setPoolsPeriod(GetPoolsPeriodEnum._30d)}>30d</button>
-          </div>
+        <div className="flex flex-col items-center">
+          <div className="text-12 font-main">{intl.formatMessage({ id: 'pools.apr' })}</div>
+          <PoolsPeriodSelector selectedValue={poolsPeriod} onChange={setPoolsPeriod} />
         </div>
       ),
       render: ({ apr }: { apr: BigNumber }) => <div className="font-main text-16">{formatBN(apr, 2)}%</div>,

From 1ba61c3daefbf1e21a7e1df0c47c1d97563e5e9d Mon Sep 17 00:00:00 2001
From: Veado <veado@protonmail.com>
Date: Sun, 11 Dec 2022 13:13:57 +0100
Subject: [PATCH 3/5] PoolDetails: Add APY period selector

- [x] `apiGetPoolDetail$` depends on selected `poolsPeriod$`
- [x] Add `PoolsPeriodSelector` in `PoolStatus` of `APY`
- [x] Update loading handling in components of PoolDetails
- [x] Helper `poolsPeriodToPoolPeriod` incl. tests
---
 src/renderer/components/pool/PoolCards.tsx    | 17 +++++++-
 src/renderer/components/pool/PoolDetails.tsx  | 14 ++++---
 src/renderer/components/pool/PoolTitle.tsx    |  1 -
 .../poolStatus/PoolStatus.styles.tsx          |  1 -
 .../uielements/poolStatus/PoolStatus.tsx      | 10 +++--
 .../uielements/pools/PoolsPeriodSelector.tsx  |  1 +
 src/renderer/services/midgard/pools.ts        | 17 +++++---
 src/renderer/services/midgard/utils.test.ts   | 42 +++++++++++++++++--
 src/renderer/services/midgard/utils.ts        | 25 ++++++++++-
 src/renderer/views/pool/PoolDetailsView.tsx   | 24 ++++++++---
 10 files changed, 124 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/pool/PoolCards.tsx b/src/renderer/components/pool/PoolCards.tsx
index d464e5d0d..c64932194 100644
--- a/src/renderer/components/pool/PoolCards.tsx
+++ b/src/renderer/components/pool/PoolCards.tsx
@@ -10,8 +10,10 @@ import { ZERO_ASSET_AMOUNT, ZERO_BN } from '../../const'
 import { sequenceTRD } from '../../helpers/fpHelpers'
 import { abbreviateNumber } from '../../helpers/numberHelper'
 import { PoolDetailRD, PoolStatsDetailRD } from '../../services/midgard/types'
+import { GetPoolsPeriodEnum } from '../../types/generated/midgard'
 import { ErrorView } from '../shared/error'
 import { Button } from '../uielements/button'
+import { PoolsPeriodSelector } from '../uielements/pools/PoolsPeriodSelector'
 import { PoolStatus } from '../uielements/poolStatus'
 import * as Styled from './PoolCards.styles'
 import * as H from './PoolDetails.helpers'
@@ -22,10 +24,20 @@ export type Props = {
   reloadData: FP.Lazy<void>
   priceSymbol: string
   priceRatio: BigNumber
+  poolsPeriod: GetPoolsPeriodEnum
+  setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
 }
 
 export const PoolCards: React.FC<Props> = (props) => {
-  const { poolStatsDetail: poolStatsDetailRD, priceSymbol, poolDetail: poolDetailRD, priceRatio, reloadData } = props
+  const {
+    poolStatsDetail: poolStatsDetailRD,
+    priceSymbol,
+    poolDetail: poolDetailRD,
+    priceRatio,
+    reloadData,
+    poolsPeriod,
+    setPoolsPeriod
+  } = props
   const intl = useIntl()
 
   const getFullValue = useCallback(
@@ -112,6 +124,7 @@ export const PoolCards: React.FC<Props> = (props) => {
           <PoolStatus
             isLoading={isLoading}
             label={intl.formatMessage({ id: 'deposit.poolDetails.apy' })}
+            extraLabel={<PoolsPeriodSelector selectedValue={poolsPeriod} onChange={setPoolsPeriod} />}
             displayValue={`${abbreviateNumber(apy.toNumber(), 2)} %`}
           />
         </Styled.Col>
@@ -126,7 +139,7 @@ export const PoolCards: React.FC<Props> = (props) => {
         </Styled.Col>
       </Styled.Container>
     ),
-    [getFullValue, intl, priceSymbol]
+    [getFullValue, intl, poolsPeriod, priceSymbol, setPoolsPeriod]
   )
 
   return FP.pipe(
diff --git a/src/renderer/components/pool/PoolDetails.tsx b/src/renderer/components/pool/PoolDetails.tsx
index 4fdcdd168..e02ec2f49 100644
--- a/src/renderer/components/pool/PoolDetails.tsx
+++ b/src/renderer/components/pool/PoolDetails.tsx
@@ -8,7 +8,7 @@ import * as FP from 'fp-ts/lib/function'
 
 import { Network } from '../../../shared/api/types'
 import { PoolDetailRD, PoolStatsDetailRD } from '../../services/midgard/types'
-import { GetPoolsStatusEnum } from '../../types/generated/midgard'
+import { GetPoolsPeriodEnum, GetPoolsStatusEnum } from '../../types/generated/midgard'
 import { PoolHistoryActions } from '../../views/pool/PoolHistoryView.types'
 import { PoolCards } from './PoolCards'
 import * as H from './PoolDetails.helpers'
@@ -26,7 +26,6 @@ export type Props = {
   reloadPoolDetail: FP.Lazy<void>
   priceRatio: BigNumber
   priceSymbol: string
-  isLoading?: boolean
   HistoryView: React.ComponentType<{
     poolAsset: Asset
     historyActions: PoolHistoryActions
@@ -37,6 +36,8 @@ export type Props = {
   disablePoolActions: boolean
   walletLocked: boolean
   network: Network
+  poolsPeriod: GetPoolsPeriodEnum
+  setPoolsPeriod: (v: GetPoolsPeriodEnum) => void
 }
 
 export const PoolDetails: React.FC<Props> = ({
@@ -51,14 +52,15 @@ export const PoolDetails: React.FC<Props> = ({
   reloadPoolDetail,
   poolStatsDetail: poolStatsDetailRD,
   reloadPoolStatsDetail,
-  isLoading,
   HistoryView,
   ChartView,
   disableTradingPoolAction,
   disableAllPoolActions,
   disablePoolActions,
   walletLocked,
-  network
+  network,
+  poolsPeriod,
+  setPoolsPeriod
 }) => {
   const renderTitle = useMemo(() => {
     const price = FP.pipe(
@@ -87,7 +89,6 @@ export const PoolDetails: React.FC<Props> = ({
         watch={watch}
         unwatch={unwatch}
         price={price}
-        isLoading={isLoading}
         isAvailablePool={isAvailablePool}
       />
     )
@@ -96,7 +97,6 @@ export const PoolDetails: React.FC<Props> = ({
     disableAllPoolActions,
     disablePoolActions,
     disableTradingPoolAction,
-    isLoading,
     network,
     poolDetailRD,
     priceRatio,
@@ -122,6 +122,8 @@ export const PoolDetails: React.FC<Props> = ({
           poolDetail={poolDetailRD}
           priceSymbol={priceSymbol}
           reloadData={reloadPoolCardsData}
+          poolsPeriod={poolsPeriod}
+          setPoolsPeriod={setPoolsPeriod}
         />
       </A.Col>
       <A.Col xs={24} md={16}>
diff --git a/src/renderer/components/pool/PoolTitle.tsx b/src/renderer/components/pool/PoolTitle.tsx
index a52aaf405..a5dc4d538 100644
--- a/src/renderer/components/pool/PoolTitle.tsx
+++ b/src/renderer/components/pool/PoolTitle.tsx
@@ -20,7 +20,6 @@ export type Props = {
   watch: FP.Lazy<void>
   unwatch: FP.Lazy<void>
   price: RD.RemoteData<Error, { amount: AssetAmount; symbol: string }>
-  isLoading?: boolean
   disableTradingPoolAction: boolean
   disableAllPoolActions: boolean
   disablePoolActions: boolean
diff --git a/src/renderer/components/uielements/poolStatus/PoolStatus.styles.tsx b/src/renderer/components/uielements/poolStatus/PoolStatus.styles.tsx
index a2db7eda8..8fd57d41b 100644
--- a/src/renderer/components/uielements/poolStatus/PoolStatus.styles.tsx
+++ b/src/renderer/components/uielements/poolStatus/PoolStatus.styles.tsx
@@ -46,7 +46,6 @@ export const Value = styled(Label).attrs({
   weight: 'bold',
   size: 'big'
 })`
-  margin-top: 8px;
   text-transform: uppercase;
   overflow: hidden;
   white-space: nowrap;
diff --git a/src/renderer/components/uielements/poolStatus/PoolStatus.tsx b/src/renderer/components/uielements/poolStatus/PoolStatus.tsx
index c4a85a855..b2270eb72 100644
--- a/src/renderer/components/uielements/poolStatus/PoolStatus.tsx
+++ b/src/renderer/components/uielements/poolStatus/PoolStatus.tsx
@@ -5,13 +5,14 @@ import * as Styled from './PoolStatus.styles'
 
 export type Props = {
   label: string
+  extraLabel?: React.ReactNode
   displayValue: string
   fullValue?: string
   isLoading?: boolean
 }
 
 export const PoolStatus: React.FC<Props> = (props): JSX.Element => {
-  const { label, displayValue, fullValue, isLoading } = props
+  const { label, extraLabel = <></>, displayValue, fullValue, isLoading } = props
   const [showTooltip, setShowTooltip] = useState(false)
   const amountRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -45,9 +46,10 @@ export const PoolStatus: React.FC<Props> = (props): JSX.Element => {
 
   return (
     <Styled.PoolStatusWrapper ref={containerRef} {...props}>
-      <Styled.Title textTransform="uppercase" color="light">
-        {label}
-      </Styled.Title>
+      <div className="flex items-center">
+        <Styled.Title textTransform="uppercase">{label}</Styled.Title>
+        {extraLabel}
+      </div>
       <Styled.Value loading={isLoading} ref={amountRef} className="amount">
         <TooltipContainer>{displayValue}</TooltipContainer>
       </Styled.Value>
diff --git a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
index a6a3c2e18..3b0a5b144 100644
--- a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
+++ b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
@@ -70,6 +70,7 @@ export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
                     ease-in-out hover:shadow-full
                     hover:dark:shadow-fulld
                     ${disabled && 'opacity-70'}
+                    whitespace-nowrap
                     dark:bg-bg0d
                     dark:text-text0d
                     `}>
diff --git a/src/renderer/services/midgard/pools.ts b/src/renderer/services/midgard/pools.ts
index bbe49472b..17b875260 100644
--- a/src/renderer/services/midgard/pools.ts
+++ b/src/renderer/services/midgard/pools.ts
@@ -73,7 +73,8 @@ import {
   pricePoolSelectorFromRD,
   inboundToPoolAddresses,
   getOutboundAssetFeeByChain,
-  toPoolsData
+  toPoolsData,
+  poolsPeriodToPoolPeriod
 } from './utils'
 
 const PRICE_POOL_KEY = 'asgdx-price-pool'
@@ -221,10 +222,16 @@ const createPoolsService = ({
    */
   const apiGetPoolDetail$ = (asset: Asset): PoolDetailLD =>
     FP.pipe(
-      midgardDefaultApi$,
-      liveData.chain((api) => {
+      Rx.combineLatest([midgardDefaultApi$, poolsPeriod$]),
+      RxOp.map(([apiRD, period]) =>
+        FP.pipe(
+          apiRD,
+          RD.map((api) => ({ api, period }))
+        )
+      ),
+      liveData.chain(({ api, period }) => {
         return FP.pipe(
-          api.getPool({ asset: assetToString(asset) }),
+          api.getPool({ asset: assetToString(asset), period: poolsPeriodToPoolPeriod(period) }),
           RxOp.map(RD.success),
           RxOp.startWith(RD.pending),
           RxOp.catchError((e: Error) => Rx.of(RD.failure(e)))
@@ -847,7 +854,7 @@ const createPoolsService = ({
 
   return {
     setPoolsPeriod,
-    poolsPeriod$: poolsPeriod$,
+    poolsPeriod$,
     poolsState$,
     pendingPoolsState$,
     allPoolDetails$,
diff --git a/src/renderer/services/midgard/utils.test.ts b/src/renderer/services/midgard/utils.test.ts
index 0a3c7c404..c452b35e1 100644
--- a/src/renderer/services/midgard/utils.test.ts
+++ b/src/renderer/services/midgard/utils.test.ts
@@ -34,9 +34,9 @@ import {
 } from '../../../shared/mock/amount'
 import { PRICE_POOLS_WHITELIST, AssetBUSDBAF, AssetUSDC, AssetUSDTDAC, AssetBUSD74E } from '../../const'
 import { BNB_DECIMAL } from '../../helpers/assetHelper'
-import { eqAsset, eqPoolShare, eqPoolShares, eqOAssetWithAmount } from '../../helpers/fp/eq'
+import { eqAsset, eqPoolShare, eqPoolShares, eqOAssetWithAmount, eqString } from '../../helpers/fp/eq'
 import { RUNE_POOL_ADDRESS, RUNE_PRICE_POOL } from '../../helpers/poolHelper'
-import { PoolDetail } from '../../types/generated/midgard'
+import { GetPoolPeriodEnum, GetPoolsPeriodEnum, PoolDetail } from '../../types/generated/midgard'
 import { PricePool, PricePools } from '../../views/pools/Pools.types'
 import { PoolAddress, PoolShare, PoolShares, PoolsStateRD } from './types'
 import {
@@ -55,7 +55,8 @@ import {
   getPoolAssetsDetail,
   inboundToPoolAddresses,
   getOutboundAssetFeeByChain,
-  getSymSharesByAddress
+  getSymSharesByAddress,
+  poolsPeriodToPoolPeriod
 } from './utils'
 
 describe('services/midgard/utils/', () => {
@@ -566,5 +567,40 @@ describe('services/midgard/utils/', () => {
         expect(result).toBeNone()
       })
     })
+
+    describe('poolsPeriodToPoolPeriod', () => {
+      it('All', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum.All)
+        expect(eqString.equals(result, GetPoolPeriodEnum.All)).toBeTruthy()
+      })
+      it('365d', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._365d)
+        expect(eqString.equals(result, GetPoolPeriodEnum._365d)).toBeTruthy()
+      })
+      it('180d', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._180d)
+        expect(eqString.equals(result, GetPoolPeriodEnum._180d)).toBeTruthy()
+      })
+      it('90d', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._90d)
+        expect(eqString.equals(result, GetPoolPeriodEnum._90d)).toBeTruthy()
+      })
+      it('_30d', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._30d)
+        expect(eqString.equals(result, GetPoolPeriodEnum._30d)).toBeTruthy()
+      })
+      it('7d', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._7d)
+        expect(eqString.equals(result, GetPoolPeriodEnum._7d)).toBeTruthy()
+      })
+      it('24h', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._24h)
+        expect(eqString.equals(result, GetPoolPeriodEnum._24h)).toBeTruthy()
+      })
+      it('1h', () => {
+        const result = poolsPeriodToPoolPeriod(GetPoolsPeriodEnum._1h)
+        expect(eqString.equals(result, GetPoolPeriodEnum._1h)).toBeTruthy()
+      })
+    })
   })
 })
diff --git a/src/renderer/services/midgard/utils.ts b/src/renderer/services/midgard/utils.ts
index 17cb8ca36..88526645a 100644
--- a/src/renderer/services/midgard/utils.ts
+++ b/src/renderer/services/midgard/utils.ts
@@ -48,7 +48,7 @@ import { eqAsset, eqChain, eqOAddress } from '../../helpers/fp/eq'
 import { ordPricePool } from '../../helpers/fp/ord'
 import { getDeepestPool, RUNE_POOL_ADDRESS, RUNE_PRICE_POOL } from '../../helpers/poolHelper'
 import { AssetWithAmount } from '../../types/asgardex'
-import { PoolDetail } from '../../types/generated/midgard'
+import { GetPoolPeriodEnum, GetPoolsPeriodEnum, PoolDetail } from '../../types/generated/midgard'
 import { PricePoolAssets, PricePools, PricePoolAsset, PricePool } from '../../views/pools/Pools.types'
 import { InboundAddress } from '../thorchain/types'
 import {
@@ -400,3 +400,26 @@ export const getPoolAssetDetail = ({
 export const getPoolAssetsDetail: (_: Array<Pick<PoolDetail, 'assetPrice' | 'asset'>>) => PoolAssetsDetail = (
   poolDetails
 ) => FP.pipe(poolDetails, A.filterMap(getPoolAssetDetail))
+
+export const poolsPeriodToPoolPeriod = (period: GetPoolsPeriodEnum): GetPoolPeriodEnum => {
+  switch (period) {
+    case GetPoolsPeriodEnum.All:
+      return GetPoolPeriodEnum.All
+    case GetPoolsPeriodEnum._365d:
+      return GetPoolPeriodEnum._365d
+    case GetPoolsPeriodEnum._180d:
+      return GetPoolPeriodEnum._180d
+    case GetPoolsPeriodEnum._100d:
+      return GetPoolPeriodEnum._100d
+    case GetPoolsPeriodEnum._90d:
+      return GetPoolPeriodEnum._90d
+    case GetPoolsPeriodEnum._30d:
+      return GetPoolPeriodEnum._30d
+    case GetPoolsPeriodEnum._7d:
+      return GetPoolPeriodEnum._7d
+    case GetPoolsPeriodEnum._24h:
+      return GetPoolPeriodEnum._24h
+    case GetPoolsPeriodEnum._1h:
+      return GetPoolPeriodEnum._1h
+  }
+}
diff --git a/src/renderer/views/pool/PoolDetailsView.tsx b/src/renderer/views/pool/PoolDetailsView.tsx
index d2fff5955..7b6e13e17 100644
--- a/src/renderer/views/pool/PoolDetailsView.tsx
+++ b/src/renderer/views/pool/PoolDetailsView.tsx
@@ -13,7 +13,7 @@ import * as RxOp from 'rxjs/operators'
 import { PoolDetails, Props as PoolDetailProps } from '../../components/pool/PoolDetails'
 import { ErrorView } from '../../components/shared/error'
 import { RefreshButton } from '../../components/uielements/button'
-import { ONE_BN } from '../../const'
+import { DEFAULT_GET_POOLS_PERIOD, ONE_BN } from '../../const'
 import { useAppContext } from '../../contexts/AppContext'
 import { useMidgardContext } from '../../contexts/MidgardContext'
 import { getAssetFromNullableString } from '../../helpers/assetHelper'
@@ -32,7 +32,14 @@ import { PoolHistoryView } from './PoolHistoryView'
 
 type TargetPoolDetailProps = Omit<
   PoolDetailProps,
-  'asset' | 'historyActions' | 'reloadPoolDetail' | 'reloadPoolStatsDetail' | 'watched' | 'watch' | 'unwatch'
+  | 'asset'
+  | 'historyActions'
+  | 'reloadPoolDetail'
+  | 'reloadPoolStatsDetail'
+  | 'watched'
+  | 'watch'
+  | 'unwatch'
+  | 'setPoolsPeriod'
 >
 
 const defaultDetailsProps: TargetPoolDetailProps = {
@@ -46,7 +53,8 @@ const defaultDetailsProps: TargetPoolDetailProps = {
   disableAllPoolActions: false,
   disableTradingPoolAction: false,
   disablePoolActions: false,
-  walletLocked: false
+  walletLocked: false,
+  poolsPeriod: DEFAULT_GET_POOLS_PERIOD
 }
 
 export const PoolDetailsView: React.FC = () => {
@@ -61,7 +69,9 @@ export const PoolDetailsView: React.FC = () => {
         poolStatsDetail$,
         reloadPoolStatsDetail,
         reloadSelectedPoolDetail,
-        haltedChains$
+        haltedChains$,
+        poolsPeriod$,
+        setPoolsPeriod
       },
       setSelectedPoolAsset
     }
@@ -77,6 +87,8 @@ export const PoolDetailsView: React.FC = () => {
 
   const { add: addToWatchList, remove: removeFromWatchList, list: watchedList } = usePoolWatchlist()
 
+  const poolsPeriod = useObservableState(poolsPeriod$, DEFAULT_GET_POOLS_PERIOD)
+
   const [haltedChains] = useObservableState(() => FP.pipe(haltedChains$, RxOp.map(RD.getOrElse((): Chain[] => []))), [])
   const { mimirHalt } = useMimirHalt()
 
@@ -157,7 +169,8 @@ export const PoolDetailsView: React.FC = () => {
               disableAllPoolActions: getDisableAllPoolActions(asset.chain),
               disableTradingPoolAction: getDisableTradingPoolAction(asset.chain),
               disablePoolActions: getDisablePoolActions(asset.chain),
-              walletLocked
+              walletLocked,
+              poolsPeriod
             }
 
             const watched = FP.pipe(watchedList, A.elem(eqAsset)(asset))
@@ -171,6 +184,7 @@ export const PoolDetailsView: React.FC = () => {
                 historyActions={historyActions}
                 reloadPoolDetail={reloadSelectedPoolDetail}
                 reloadPoolStatsDetail={reloadPoolStatsDetail}
+                setPoolsPeriod={setPoolsPeriod}
                 {...prevProps.current}
               />
             )

From 1dedd1a71bca67551e21549d656c933159c5838b Mon Sep 17 00:00:00 2001
From: Veado <veado@protonmail.com>
Date: Sun, 11 Dec 2022 13:46:05 +0100
Subject: [PATCH 4/5] Update i18n

---
 .../uielements/chart/PoolDetailsChart.tsx     | 41 ++++++++++++++-----
 .../uielements/pools/PoolsPeriodSelector.tsx  | 32 ++++++++++-----
 src/renderer/i18n/de/common.ts                |  4 +-
 src/renderer/i18n/de/deposit.ts               |  2 +-
 src/renderer/i18n/de/pools.ts                 |  4 +-
 src/renderer/i18n/en/common.ts                |  4 +-
 src/renderer/i18n/fr/common.ts                |  4 +-
 src/renderer/i18n/ru/common.ts                |  4 +-
 src/renderer/i18n/types.ts                    |  4 +-
 9 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/src/renderer/components/uielements/chart/PoolDetailsChart.tsx b/src/renderer/components/uielements/chart/PoolDetailsChart.tsx
index 4ce299c9c..78065a548 100644
--- a/src/renderer/components/uielements/chart/PoolDetailsChart.tsx
+++ b/src/renderer/components/uielements/chart/PoolDetailsChart.tsx
@@ -85,14 +85,6 @@ const Chart: React.FC<ChartProps> = (props): JSX.Element => {
   return renderChart
 }
 
-// Definition for time range buttons
-const TIME_RANGE_BUTTONS: Record<ChartTimeFrame, { labelId: string; tooltipId: string }> = {
-  week: { labelId: 'common.time.days7.short', tooltipId: 'common.time.days7' },
-  month: { labelId: 'common.time.month1.short', tooltipId: 'common.time.month1' },
-  threeMonths: { labelId: 'common.time.months3.short', tooltipId: 'common.time.months3' },
-  year: { labelId: 'common.time.year1.short', tooltipId: 'common.time.year1' },
-  all: { labelId: 'common.time.all.short', tooltipId: 'common.time.all' }
-}
 type Props = {
   chartDetails: ChartDetailsRD
   reloadData: FP.Lazy<void>
@@ -132,6 +124,33 @@ export const PoolDetailsChart: React.FC<Props> = (props: Props): JSX.Element =>
     [intl, reloadData]
   )
 
+  // Labels/toolTips of time range buttons
+  const timeRangeButtons: Record<ChartTimeFrame, { label: string; tooltip: string }> = useMemo(
+    () => ({
+      week: {
+        label: intl.formatMessage({ id: 'common.time.days.short' }, { days: '7' }),
+        tooltip: intl.formatMessage({ id: 'common.time.days' }, { days: '7' })
+      },
+      month: {
+        label: intl.formatMessage({ id: 'common.time.month1.short' }),
+        tooltip: intl.formatMessage({ id: 'common.time.month1' })
+      },
+      threeMonths: {
+        label: intl.formatMessage({ id: 'common.time.months3.short' }),
+        tooltip: intl.formatMessage({ id: 'common.time.months3' })
+      },
+      year: {
+        label: intl.formatMessage({ id: 'common.time.year1.short' }),
+        tooltip: intl.formatMessage({ id: 'common.time.year1' })
+      },
+      all: {
+        label: intl.formatMessage({ id: 'common.time.all.short' }),
+        tooltip: intl.formatMessage({ id: 'common.time.all' })
+      }
+    }),
+    [intl]
+  )
+
   return (
     <Styled.ChartContainer>
       <Styled.HeaderContainer>
@@ -147,13 +166,13 @@ export const PoolDetailsChart: React.FC<Props> = (props: Props): JSX.Element =>
           ))}
         </Styled.TypeContainer>
         <Styled.TimeContainer>
-          {Object.entries(TIME_RANGE_BUTTONS).map(([key, { labelId, tooltipId }]) => (
-            <Tooltip title={intl.formatMessage({ id: tooltipId })} key={key}>
+          {Object.entries(timeRangeButtons).map(([key, { label, tooltip }]) => (
+            <Tooltip title={tooltip} key={key}>
               <Styled.HeaderToggle
                 primary={selectedTimeFrame === key}
                 onClick={!isLoading ? () => setTimeFrame(key as ChartTimeFrame) : undefined}
                 disabled={isLoading}>
-                {intl.formatMessage({ id: labelId })}
+                {label}
               </Styled.HeaderToggle>
             </Tooltip>
           ))}
diff --git a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
index 3b0a5b144..46ec4c1b0 100644
--- a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
+++ b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
@@ -1,23 +1,17 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { Listbox } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 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 { useIntl } from 'react-intl'
 
 import { GetPoolsPeriodEnum } from '../../../types/generated/midgard'
 
 type PeriodItem = { value: GetPoolsPeriodEnum; label: string }
 
 const DEFAULT_ITEM: PeriodItem = { value: GetPoolsPeriodEnum._30d, label: '30 days' }
-const LIST_ITEMS: PeriodItem[] = [
-  { value: GetPoolsPeriodEnum._7d, label: '7 days' },
-  DEFAULT_ITEM, // 30 days
-  { value: GetPoolsPeriodEnum._90d, label: '90 days' },
-  { value: GetPoolsPeriodEnum._180d, label: '180 days' },
-  { value: GetPoolsPeriodEnum._365d, label: '365 days' }
-]
 
 export type Props = {
   selectedValue: GetPoolsPeriodEnum
@@ -29,8 +23,26 @@ export type Props = {
 export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
   const { selectedValue, onChange, disabled = false, className = '' } = props
 
+  const intl = useIntl()
+
+  const defaultItem: PeriodItem = useMemo(
+    () => ({ value: GetPoolsPeriodEnum._30d, label: intl.formatMessage({ id: 'common.time.days' }, { days: '30' }) }),
+    [intl]
+  )
+
+  const listItems: PeriodItem[] = useMemo(
+    () => [
+      { value: GetPoolsPeriodEnum._7d, label: intl.formatMessage({ id: 'common.time.days' }, { days: '7' }) },
+      defaultItem, // 30 days
+      { value: GetPoolsPeriodEnum._90d, label: intl.formatMessage({ id: 'common.time.days' }, { days: '90' }) },
+      { value: GetPoolsPeriodEnum._180d, label: intl.formatMessage({ id: 'common.time.days' }, { days: '180' }) },
+      { value: GetPoolsPeriodEnum._365d, label: intl.formatMessage({ id: 'common.time.days' }, { days: '365' }) }
+    ],
+    [defaultItem, intl]
+  )
+
   const selectedItem: PeriodItem = FP.pipe(
-    LIST_ITEMS,
+    listItems,
     // get selected wallet
     A.findFirst(({ value }) => value === selectedValue),
     // use first if no wallet is selected
@@ -100,7 +112,7 @@ export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
 
             ">
           {FP.pipe(
-            LIST_ITEMS,
+            listItems,
             A.map((item) => {
               const selected = item.value === selectedItem.value
               return (
diff --git a/src/renderer/i18n/de/common.ts b/src/renderer/i18n/de/common.ts
index 73bd3cb1a..f39268bab 100644
--- a/src/renderer/i18n/de/common.ts
+++ b/src/renderer/i18n/de/common.ts
@@ -103,8 +103,8 @@ const common: CommonMessages = {
   'common.details': 'Details',
   'common.filter': 'Filter',
   'common.all': 'Alle',
-  'common.time.days7': '7 Tage',
-  'common.time.days7.short': '7D',
+  'common.time.days': '{days} Tage',
+  'common.time.days.short': '{days}d',
   'common.time.month1': '1 Monat',
   'common.time.month1.short': '1M',
   'common.time.months3': '3 Monate',
diff --git a/src/renderer/i18n/de/deposit.ts b/src/renderer/i18n/de/deposit.ts
index 87174b89b..8324a8707 100644
--- a/src/renderer/i18n/de/deposit.ts
+++ b/src/renderer/i18n/de/deposit.ts
@@ -55,7 +55,7 @@ const deposit: DepositMessages = {
   'deposit.poolDetails.totalTx': 'Transaktionen (Gesamt)',
   'deposit.poolDetails.totalFees': 'Gebühren (total)',
   'deposit.poolDetails.members': 'Mitglieder',
-  'deposit.poolDetails.apy': 'Effektivertrag',
+  'deposit.poolDetails.apy': 'APY',
   'deposit.wallet.add': 'Wallet hinzufügen',
   'deposit.wallet.connect': 'Bitte verbinde Deine Wallet',
   'deposit.pool.noShares': 'Du hast keine Anteile in diesem Pool',
diff --git a/src/renderer/i18n/de/pools.ts b/src/renderer/i18n/de/pools.ts
index faab100fc..2c7d38e28 100644
--- a/src/renderer/i18n/de/pools.ts
+++ b/src/renderer/i18n/de/pools.ts
@@ -11,8 +11,8 @@ const pools: PoolsMessages = {
   'pools.avgfee': 'Gebühr Ø',
   'pools.blocksleft': 'Verbleibende Blocks',
   'pools.trades': 'Trades',
-  'pools.pending': 'Bevorstehende',
-  'pools.available': 'Verfügbare',
+  'pools.pending': 'Anstehende',
+  'pools.available': 'Aktive',
   'pools.pooled': 'angelegt',
   'pools.limit.info': 'Protokoll Limit erreicht! {pooled} hinterlegt in Pools, {bonded} bonded in Nodes',
   'pools.incentivependulum.info': 'Incentive Pendulum: {percentage}%',
diff --git a/src/renderer/i18n/en/common.ts b/src/renderer/i18n/en/common.ts
index 55d8433d5..201926919 100644
--- a/src/renderer/i18n/en/common.ts
+++ b/src/renderer/i18n/en/common.ts
@@ -103,8 +103,8 @@ const common: CommonMessages = {
   'common.details': 'Details',
   'common.filter': 'Filter',
   'common.all': 'All',
-  'common.time.days7': '7 days',
-  'common.time.days7.short': '7d',
+  'common.time.days': '{days} days',
+  'common.time.days.short': '{days}d',
   'common.time.month1': '1 month',
   'common.time.month1.short': '1m',
   'common.time.months3': '3 months',
diff --git a/src/renderer/i18n/fr/common.ts b/src/renderer/i18n/fr/common.ts
index 9193e4322..0c95bffd1 100644
--- a/src/renderer/i18n/fr/common.ts
+++ b/src/renderer/i18n/fr/common.ts
@@ -103,8 +103,8 @@ const common: CommonMessages = {
   'common.tx.type.upgrade': 'Mise à jour',
   'common.filter': 'Filtre',
   'common.all': 'Tout',
-  'common.time.days7': '7 days - FR',
-  'common.time.days7.short': '7d - FR',
+  'common.time.days': '{days} jours',
+  'common.time.days.short': '{days}j',
   'common.time.month1': '1 month - FR',
   'common.time.month1.short': '1m - FR',
   'common.time.months3': '3 months - FR',
diff --git a/src/renderer/i18n/ru/common.ts b/src/renderer/i18n/ru/common.ts
index 029e25d86..d416eaeb1 100644
--- a/src/renderer/i18n/ru/common.ts
+++ b/src/renderer/i18n/ru/common.ts
@@ -103,8 +103,8 @@ const common: CommonMessages = {
   'common.details': 'Подробности',
   'common.filter': 'Фильтр',
   'common.all': 'Все',
-  'common.time.days7': '7 дней',
-  'common.time.days7.short': '7д',
+  'common.time.days': '{days} дней',
+  'common.time.days.short': '{days}д',
   'common.time.month1': '1 месяц',
   'common.time.month1.short': '1м',
   'common.time.months3': '3 месяца',
diff --git a/src/renderer/i18n/types.ts b/src/renderer/i18n/types.ts
index 4a8240994..209aae2a7 100644
--- a/src/renderer/i18n/types.ts
+++ b/src/renderer/i18n/types.ts
@@ -103,8 +103,8 @@ export type CommonMessageKey =
   | 'common.tx.type.deposit'
   | 'common.tx.type.withdraw'
   | 'common.tx.type.upgrade'
-  | 'common.time.days7'
-  | 'common.time.days7.short'
+  | 'common.time.days'
+  | 'common.time.days.short'
   | 'common.time.month1'
   | 'common.time.month1.short'
   | 'common.time.months3'

From 198cee320f961988f7cec567fdbbc48c9d1aa808 Mon Sep 17 00:00:00 2001
From: Veado <veado@protonmail.com>
Date: Sun, 11 Dec 2022 13:48:40 +0100
Subject: [PATCH 5/5] Fix styles

---
 .../uielements/pools/PoolsPeriodSelector.tsx  | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
index 46ec4c1b0..b2a623928 100644
--- a/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
+++ b/src/renderer/components/uielements/pools/PoolsPeriodSelector.tsx
@@ -55,11 +55,7 @@ export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
       disabled={disabled}
       onChange={({ value }) => {
         onChange(value)
-      }}
-      as="div"
-      className={({ open }) => `
-                    ${open ? 'shadow-full dark:shadow-fulld' : ''}
-                    `}>
+      }}>
       <div
         className={`relative ${className}`}
         onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -72,20 +68,20 @@ export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
               group
               flex cursor-pointer
               items-center
-                    bg-bg0
-                    py-5px
-                    pl-20px
-                   pr-10px font-main
-                   text-text0
-                    transition
-                    duration-300
-                    ease-in-out hover:shadow-full
-                    hover:dark:shadow-fulld
-                    ${disabled && 'opacity-70'}
-                    whitespace-nowrap
-                    dark:bg-bg0d
-                    dark:text-text0d
-                    `}>
+              bg-bg0
+              py-5px
+              pl-20px
+              pr-10px font-main
+              text-text0
+              transition
+              duration-300
+              ease-in-out hover:shadow-full
+              hover:dark:shadow-fulld
+              ${disabled && 'opacity-70'}
+              whitespace-nowrap
+              dark:bg-bg0d
+              dark:text-text0d
+              `}>
           {({ open }) => (
             <>
               <span className="w-full">{selectedItem.label}</span>
@@ -103,8 +99,8 @@ export const PoolsPeriodSelector: React.FC<Props> = (props): JSX.Element => {
         </Listbox.Button>
         <Listbox.Options
           className="
-              absolute z-[2000]
-              mt-[0px]
+            absolute z-[2000]
+            mt-[0px]
             max-h-60 w-full overflow-auto
             border
             border-gray0 bg-bg0 focus:outline-none