pool+batches: add lease duration toggle to the batch section

Author: jamaljsr

app/src/__tests__/components/pool/BatchSection.spec.tsx

@@ -19,6 +19,7 @@ describe('BatchSection', () => {
     await store.orderStore.fetchOrders();
     await store.batchStore.fetchBatches();
     await store.batchStore.fetchNextBatchTimestamp();
+    await store.batchStore.fetchNodeTier();
   });
 
   const render = () => {
@@ -33,4 +34,12 @@ describe('BatchSection', () => {
     fireEvent.click(getByText('bar-chart.svg'));
     expect(await findByText('volume')).toBeInTheDocument();
   });
+
+  it('should toggle between markets', async () => {
+    const { getByText, findByText } = render();
+    expect(store.batchStore.selectedLeaseDuration).toBe(2016);
+    expect(await findByText('4032')).toBeInTheDocument();
+    fireEvent.click(getByText('4032'));
+    expect(store.batchStore.selectedLeaseDuration).toBe(4032);
+  });
 });

app/src/components/common/BadgeList.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import { Badge } from 'components/base';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.div<{ flex?: boolean }>`
+    display: inline-block;
+  `,
+  Badge: styled(Badge)<{ selected?: boolean }>`
+    font-family: ${props => props.theme.fonts.open.regular};
+    font-size: ${props => props.theme.sizes.xs};
+    color: ${props =>
+      props.selected ? props.theme.colors.offWhite : props.theme.colors.gray};
+    border: 1px solid
+      ${props => (props.selected ? props.theme.colors.offWhite : props.theme.colors.gray)};
+
+    padding: 5px 10px;
+    letter-spacing: normal;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+      background-color: ${props => props.theme.colors.overlay};
+      color: ${props => props.theme.colors.offWhite};
+      border-color: ${props => props.theme.colors.offWhite};
+    }
+  `,
+};
+
+export interface BadgeListOption {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  options: BadgeListOption[];
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+const BadgeList: React.FC<Props> = ({ options, value, onChange }) => {
+  const handleClick = useCallback((v: string) => () => onChange(v), [onChange]);
+
+  const { Wrapper, Badge } = Styled;
+  return (
+    <Wrapper>
+      {options.map(o => (
+        <Badge key={o.value} selected={o.value === value} onClick={handleClick(o.value)}>
+          {o.label}
+        </Badge>
+      ))}
+    </Wrapper>
+  );
+};
+
+export default BadgeList;

app/src/components/pool/BatchSection.tsx

@@ -4,6 +4,7 @@ import { useStore } from 'store';
 import { Section } from 'components/base';
 import { styled } from 'components/theme';
 import BatchChart from './batches/BatchChart';
+import BatchControls from './batches/BatchControls';
 import BatchList from './batches/BatchList';
 import BatchStats from './batches/BatchStats';
 
@@ -23,6 +24,7 @@ const BatchSection: React.FC = () => {
   return (
     <Section>
       <BatchStats />
+      <BatchControls />
       {batchesView.viewMode === 'chart' ? <BatchChart /> : <BatchList />}
     </Section>
   );

app/src/components/pool/batches/BatchControls.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { usePrefixedTranslation } from 'hooks';
+import { useStore } from 'store';
+import { BarChart, HeaderFour, List } from 'components/base';
+import BadgeList from 'components/common/BadgeList';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.div`
+    display: flex;
+    justify-content: space-between;
+  `,
+  Title: styled(HeaderFour)`
+    display: inline-block;
+  `,
+  ViewMode: styled.div`
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+};
+
+const BatchControls: React.FC = () => {
+  const { l } = usePrefixedTranslation('cmps.pool.batches.BatchControls');
+  const { batchesView } = useStore();
+
+  const handleViewChart = useCallback(() => batchesView.setViewMode('chart'), []);
+  const handleViewList = useCallback(() => batchesView.setViewMode('list'), []);
+
+  const { Wrapper, Title, ViewMode } = Styled;
+  return (
+    <Wrapper>
+      <div>
+        <Title>{l('markets')}</Title>
+        <BadgeList
+          options={batchesView.marketOptions}
+          value={batchesView.selectedMarket}
+          onChange={batchesView.changeMarket}
+        />
+      </div>
+      <ViewMode>
+        <BarChart size="large" onClick={handleViewChart} />
+        <List size="large" onClick={handleViewList} />
+      </ViewMode>
+    </Wrapper>
+  );
+};
+
+export default observer(BatchControls);

app/src/components/pool/batches/BatchStats.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { BarChart, List } from 'components/base';
 import LoaderLines from 'components/common/LoaderLines';
 import Stat from 'components/common/Stat';
 import Unit from 'components/common/Unit';
@@ -42,17 +41,6 @@ const Styled = {
   `,
   Stat: StyledStat.withComponent(Stat),
   BatchCountdown: StyledStat.withComponent(BatchCountdown),
-  ViewMode: styled.div`
-    position: absolute;
-    bottom: -40px;
-    right: 0;
-    z-index: 1;
-    opacity: 0.6;
-
-    &:hover {
-      opacity: 1;
-    }
-  `,
   LoaderLines: styled(LoaderLines)`
     .line {
       margin: 10px 1px;
@@ -65,12 +53,9 @@ const BatchStats: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.pool.batches.BatchStats');
   const { batchesView } = useStore();
 
-  const handleViewChart = useCallback(() => batchesView.setViewMode('chart'), []);
-  const handleViewList = useCallback(() => batchesView.setViewMode('list'), []);
-
   const tipProps = { tipPlacement: 'bottom', tipCapitalize: false };
 
-  const { Wrapper, Stat, BatchCountdown, ViewMode, LoaderLines } = Styled;
+  const { Wrapper, Stat, BatchCountdown, LoaderLines } = Styled;
   return (
     <Wrapper>
       <div>
@@ -111,10 +96,6 @@ const BatchStats: React.FC = () => {
           value={<Unit sats={batchesView.paidSats} suffix={false} />}
         />
       </div>
-      <ViewMode>
-        <BarChart size="large" onClick={handleViewChart} />
-        <List size="large" onClick={handleViewList} />
-      </ViewMode>
     </Wrapper>
   );
 };

app/src/i18n/locales/en-US.json

@@ -169,6 +169,7 @@
   "cmps.pool.batches.BatchStats.tier": "Node Tier",
   "cmps.pool.batches.BatchStats.earned": "Earned",
   "cmps.pool.batches.BatchStats.paid": "Paid",
+  "cmps.pool.batches.BatchControls.markets": "Markets",
   "cmps.pool.orders.OrdersList.emptyMsg": "You do not have any {{filter}} orders.",
   "cmps.pool.orders.OrdersList.emptyAllMsg": "Submit an order using the form on the left.",
   "cmps.pool.orders.OrdersList.type": "Type",

app/src/store/views/batchesView.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from 'mobx';
+import { keys, makeAutoObservable } from 'mobx';
 import { NodeTier } from 'types/generated/auctioneer_pb';
 import { toPercent } from 'util/bigmath';
 import { Store } from 'store';
@@ -75,11 +75,29 @@ export default class BatchesView {
     return this._store.orderStore.paidSats;
   }
 
+  /** the currently selected market */
+  get selectedMarket() {
+    return `${this._store.batchStore.selectedLeaseDuration}`;
+  }
+
+  /** the list of markets to display as badges */
+  get marketOptions() {
+    return keys(this._store.batchStore.leaseDurations).map(duration => ({
+      label: `${duration}`,
+      value: `${duration}`,
+    }));
+  }
+
   //
   // Actions
   //
 
   setViewMode(mode: BatchesView['viewMode']) {
     this.viewMode = mode;
   }
+
+  changeMarket(value: string) {
+    const duration = parseInt(value);
+    this._store.batchStore.setActiveMarket(duration);
+  }
 }