chore: 🔧 proportional max value

2025-02-22 14:22:33 +01:00 · 2020-09-20 20:24:32 +02:00 · 2020-09-20 20:24:32 +02:00 · a62794f346
commit a62794f346
parent 5661c5513f
7 changed files with 126 additions and 198 deletions
--- a/src/components/balance/index.tsx
+++ b/src/components/balance/index.tsx
@ -1,11 +1,21 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ProgressBar } from '../generic/CardGeneric';

-const BalanceLine = styled.div`
+type BalanceLineProps = {
+  withBorderColor?: boolean;
+};
+
+const BalanceLine = styled.div<BalanceLineProps>`
  width: 100%;
  display: flex;
  position: relative;
+
+  ${({ withBorderColor }) =>
+    withBorderColor &&
+    css`
+      border: 1px solid gold;
+    `}
 `;

 const SingleLine = styled(BalanceLine)`
@ -35,6 +45,7 @@ type BalanceProps = {
  formatLocal?: string;
  formatRemote?: string;
  height?: number;
+  withBorderColor?: boolean;
 };

 export const BalanceBars = ({
@ -43,6 +54,7 @@ export const BalanceBars = ({
  formatLocal,
  formatRemote,
  height = 20,
+  withBorderColor = false,
 }: BalanceProps) => {
  const localOpposite = 100 - local;
  const remoteOpposite = 100 - remote;
@ -59,7 +71,7 @@ export const BalanceBars = ({
    formatRemote !== '0.00';

  return (
-    <BalanceLine>
+    <BalanceLine withBorderColor={withBorderColor}>
      {hasLocal && <Value>{formatLocal}</Value>}
      {hasRemote && <RightValue>{formatRemote}</RightValue>}
      <ProgressBar barHeight={height} order={4} percent={localOpposite} />
--- a/src/components/generic/CardGeneric.tsx
+++ b/src/components/generic/CardGeneric.tsx
@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { ThemeSet } from 'styled-theming';
 import {
  progressBackground,
  mediaWidths,
@ -18,31 +19,47 @@ interface ProgressBar {
  barHeight?: number;
 }

-export const ProgressBar = styled.div<ProgressBar>`
-  height: ${({ barHeight }) => (barHeight ? `${barHeight}px` : '10px')};
-  background-color: ${({ order }) => {
+export const ProgressBar = styled.div.attrs(
+  ({ order, percent, barHeight }: ProgressBar) => {
+    let color: string | ThemeSet = chartColors.purple;
    switch (order) {
      case 1:
-        return chartColors.lightblue;
+        color = chartColors.lightblue;
+        break;
      case 2:
-        return chartColors.green;
+        color = chartColors.green;
+        break;
      case 3:
-        return chartColors.orange;
+        color = chartColors.orange;
+        break;
      case 4:
-        return progressBackground;
+        color = progressBackground;
+        break;
      case 5:
-        return chartColors.orange2;
+        color = chartColors.orange2;
+        break;
      case 6:
-        return chartColors.darkyellow;
+        color = chartColors.darkyellow;
+        break;
      case 7:
-        return chartColors.red;
+        color = chartColors.red;
+        break;
      case 8:
-        return 'transparent';
-      default:
-        return chartColors.purple;
+        color = 'transparent';
+        break;
    }
-  }};
-  width: ${({ percent }) => `${percent}%`};
+
+    return {
+      backgroundColor: color,
+      barHeight: barHeight ? `${barHeight}px` : '10px',
+      style: {
+        width: `${percent}%`,
+      },
+    };
+  }
+)`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  height: ${({ barHeight }) => barHeight};
 `;

 export const NodeTitle = styled.div`
--- a/src/context/ConfigContext.tsx
+++ b/src/context/ConfigContext.tsx
@ -23,6 +23,7 @@ export type channelSortTypes =
  | 'size';
 export type sortDirectionTypes = 'increase' | 'decrease';
 export type subBarType = 'fees' | 'none';
+export type maxSatValueType = 'auto' | 1000000 | 5000000 | 10000000 | 16000000;

 type State = {
  currency: string;
@ -40,6 +41,7 @@ type State = {
  channelSort: channelSortTypes;
  sortDirection: sortDirectionTypes;
  subBar: subBarType;
+  maxSatValue: maxSatValueType;
 };

 type ConfigInitProps = {
@ -64,6 +66,7 @@ type ActionType =
      channelSort?: channelSortTypes;
      sortDirection?: sortDirectionTypes;
      subBar?: subBarType;
+      maxSatValue?: maxSatValueType;
    }
  | { type: 'themeChange'; theme: string };

@ -96,6 +99,7 @@ const initialState: State = {
  channelSort: 'none',
  sortDirection: 'decrease',
  subBar: 'none',
+  maxSatValue: 'auto',
 };

 const stateReducer = (state: State, action: ActionType): State => {
--- a/src/views/channels/channels/Channel.style.ts
+++ b/src/views/channels/channels/Channel.style.ts
@ -96,7 +96,7 @@ export const ChannelBalanceButton = styled.button<BalanceButtonProps>`
  background-color: ${({ selected }) =>
    selected ? chartColors.orange : colorButtonBackground};

-  @media(${mediaWidths.mobile}) {
+  @media (${mediaWidths.mobile}) {
    margin: 8px 8px 16px;
    width: 100%;
  }
@ -115,3 +115,11 @@ export const ChannelGoToToast = styled.div`
  width: 100%;
  text-align: center;
 `;
+
+export const WumboTag = styled.div`
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid gold;
+  text-align: center;
+  padding: 2px 0;
+`;
--- a/src/views/channels/channels/ChannelCard.tsx
+++ b/src/views/channels/channels/ChannelCard.tsx
@ -56,7 +56,9 @@ import {
  ChannelStatsLine,
  ChannelBalanceRow,
  ChannelBalanceButton,
+  WumboTag,
 } from './Channel.style';
+import { WUMBO_MIN_SIZE } from './Channels';

 const getSymbol = (status: boolean) => {
  return status ? <ArrowDown size={14} /> : <ArrowUp size={14} />;
@ -219,9 +221,23 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
      <DarkSubTitle>Partner node not found</DarkSubTitle>
    );

+  const renderWumboInfo = () => {
+    if (local_balance + remote_balance >= WUMBO_MIN_SIZE) {
+      return (
+        <>
+          <Separation />
+          <WumboTag>This channel is Wumbo!</WumboTag>
+        </>
+      );
+    }
+
+    return null;
+  };
+
  const renderDetails = () => {
    return (
      <>
+        {renderWumboInfo()}
        <Separation />
        {renderLine('Status:', is_active ? 'Active' : 'Not Active')}
        {renderLine('Is Opening:', is_opening ? 'True' : 'False')}
@ -343,6 +359,7 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
              remote={getBar(remote_balance, biggest)}
              formatLocal={localBalance}
              formatRemote={remoteBalance}
+              withBorderColor={local_balance + remote_balance >= WUMBO_MIN_SIZE}
            />
          </ChannelStatsColumn>
        );
--- a/src/views/channels/channels/ChannelManage.tsx
+++ b/src/views/channels/channels/ChannelManage.tsx
@ -11,6 +11,7 @@ import {
  channelSortTypes,
  sortDirectionTypes,
  subBarType,
+  maxSatValueType,
 } from 'src/context/ConfigContext';
 import {
  Card,
@ -37,6 +38,7 @@ export const ChannelManage = () => {
    channelSort,
    sortDirection,
    subBar,
+    maxSatValue,
  } = useConfigState();
  const dispatch = useConfigDispatch();

@ -50,6 +52,8 @@ export const ChannelManage = () => {
    dispatch({ type: 'change', channelSort: type });
  const changeDirection = (type: sortDirectionTypes) =>
    dispatch({ type: 'change', sortDirection: type });
+  const changeMaxValue = (type: maxSatValueType) =>
+    dispatch({ type: 'change', maxSatValue: type });

  const renderOpenButton = () => (
    <SingleLine>
@ -162,6 +166,43 @@ export const ChannelManage = () => {
                </SingleButton>
              </MultiButton>
            </MarginLine>
+            {channelBarType === 'proportional' && (
+              <MarginLine>
+                <Sub4Title>Max Sat Value</Sub4Title>
+                <MultiButton>
+                  <SingleButton
+                    selected={maxSatValue === 16000000}
+                    onClick={() => changeMaxValue(16000000)}
+                  >
+                    Wumbo (16m)
+                  </SingleButton>
+                  <SingleButton
+                    selected={maxSatValue === 10000000}
+                    onClick={() => changeMaxValue(10000000)}
+                  >
+                    10m
+                  </SingleButton>
+                  <SingleButton
+                    selected={maxSatValue === 5000000}
+                    onClick={() => changeMaxValue(5000000)}
+                  >
+                    5m
+                  </SingleButton>
+                  <SingleButton
+                    selected={maxSatValue === 1000000}
+                    onClick={() => changeMaxValue(1000000)}
+                  >
+                    1m
+                  </SingleButton>
+                  <SingleButton
+                    selected={maxSatValue === 'auto'}
+                    onClick={() => changeMaxValue('auto')}
+                  >
+                    Auto
+                  </SingleButton>
+                </MultiButton>
+              </MarginLine>
+            )}
            {(channelBarType === 'proportional' ||
              channelBarType === 'balance') && (
              <MarginLine>
@ -260,181 +301,4 @@ export const ChannelManage = () => {
  };

  return <Card>{renderContent()}</Card>;
-
-  return (
-    <>
-      <Card>
-        <SingleLine>
-          <Sub4Title>Open Channel</Sub4Title>
-          <ColorButton
-            arrow={openWindow === 'open'}
-            onClick={() => setOpenWindow('none')}
-          >
-            {openWindow === 'open' ? <X size={16} /> : 'Open'}
-          </ColorButton>
-        </SingleLine>
-        {openWindow === 'open' ? (
-          <>
-            <Separation />
-            <OpenChannel setOpenCard={() => setOpenWindow('none')} />
-          </>
-        ) : (
-          <>
-            <DetailsChange />
-            <Separation />
-            <MarginLine>
-              <Sub4Title>Card Type</Sub4Title>
-              <MultiButton>
-                <SingleButton
-                  selected={channelBarStyle === 'normal'}
-                  onClick={() => changeStyle('normal')}
-                >
-                  Normal
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarStyle === 'compact'}
-                  onClick={() => changeStyle('compact')}
-                >
-                  Compact
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarStyle === 'ultracompact'}
-                  onClick={() => changeStyle('ultracompact')}
-                >
-                  Ultra-Compact
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarStyle === 'balancing'}
-                  onClick={() => changeStyle('balancing')}
-                >
-                  Balancing
-                </SingleButton>
-              </MultiButton>
-            </MarginLine>
-            <MarginLine>
-              <Sub4Title>Bar Types</Sub4Title>
-              <MultiButton>
-                <SingleButton
-                  selected={channelBarType === 'balance'}
-                  onClick={() => changeType('balance')}
-                >
-                  Balance
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarType === 'proportional'}
-                  onClick={() => changeType('proportional')}
-                >
-                  Proportional
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarType === 'size'}
-                  onClick={() => changeType('size')}
-                >
-                  Partner Size
-                </SingleButton>
-                <SingleButton
-                  selected={channelBarType === 'fees'}
-                  onClick={() => changeType('fees')}
-                >
-                  Fees
-                </SingleButton>
-              </MultiButton>
-            </MarginLine>
-            {(channelBarType === 'proportional' ||
-              channelBarType === 'balance') && (
-              <MarginLine>
-                <Sub4Title>Sub Bar</Sub4Title>
-                <MultiButton>
-                  <SingleButton
-                    selected={subBar === 'fees'}
-                    onClick={() => changeSub('fees')}
-                  >
-                    Fee Rate
-                  </SingleButton>
-                  <SingleButton
-                    selected={subBar === 'none'}
-                    onClick={() => changeSub('none')}
-                  >
-                    None
-                  </SingleButton>
-                </MultiButton>
-              </MarginLine>
-            )}
-            <MarginLine>
-              <Sub4Title>Sort</Sub4Title>
-              <MultiButton>
-                <SingleButton
-                  selected={channelSort === 'none'}
-                  onClick={() => changeSort('none')}
-                >
-                  None
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'age'}
-                  onClick={() => changeSort('age')}
-                >
-                  Age
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'local'}
-                  onClick={() => changeSort('local')}
-                >
-                  Local
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'balance'}
-                  onClick={() => changeSort('balance')}
-                >
-                  Balance
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'deviation'}
-                  onClick={() => changeSort('deviation')}
-                >
-                  Deviation
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'feeRate'}
-                  onClick={() => changeSort('feeRate')}
-                >
-                  Fee Rate
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'partnerName'}
-                  onClick={() => changeSort('partnerName')}
-                >
-                  Name
-                </SingleButton>
-                <SingleButton
-                  selected={channelSort === 'size'}
-                  onClick={() => changeSort('size')}
-                >
-                  Size
-                </SingleButton>
-              </MultiButton>
-            </MarginLine>
-            {channelSort !== 'none' && (
-              <MarginLine>
-                <Sub4Title>Direction</Sub4Title>
-                <MultiButton>
-                  <SingleButton
-                    selected={sortDirection === 'increase'}
-                    onClick={() => changeDirection('increase')}
-                  >
-                    Increasing
-                  </SingleButton>
-                  <SingleButton
-                    selected={sortDirection === 'decrease'}
-                    onClick={() => changeDirection('decrease')}
-                  >
-                    Decreasing
-                  </SingleButton>
-                </MultiButton>
-              </MarginLine>
-            )}
-          </>
-        )}
-      </Card>
-    </>
-  );
 };
--- a/src/views/channels/channels/Channels.tsx
+++ b/src/views/channels/channels/Channels.tsx
@ -14,11 +14,13 @@ import { LoadingCard } from '../../../components/loading/LoadingCard';
 import { ChannelCard } from './ChannelCard';
 import { ChannelGoToToast } from './Channel.style';

+export const WUMBO_MIN_SIZE = 16000000;
+
 export const Channels: React.FC = () => {
  const toastId = useRef<any>(null);
  const { push } = useRouter();

-  const { sortDirection, channelSort } = useConfigState();
+  const { sortDirection, channelSort, maxSatValue } = useConfigState();
  const [indexOpen, setIndexOpen] = useState(0);

  const { inChannel, outChannel } = useRebalanceState();
@ -79,7 +81,11 @@ export const Channels: React.FC = () => {
    const partner = Number(capacity) || 0;
    const channels = Number(channel_count) || 0;

-    const max = Math.max(local_balance || 0, remote_balance || 0);
+    let max = Math.max(local_balance || 0, remote_balance || 0);
+
+    if (maxSatValue !== 'auto') {
+      max = Math.min(max, maxSatValue);
+    }

    if (max > biggest) {
      biggest = max;