+ {hasLocal && (
+
);
};
@@ -107,10 +83,10 @@ export const SingleBar = ({ value, height }: SingleBarType) => {
}
return (
-
+ {formatLocal}
+
+ )}
+ {hasRemote && (
+
+ {formatRemote}
+
+ )}
{values.map((value, index) => (
))}
);
};
diff --git a/src/client/src/components/burgerMenu/BurgerMenu.tsx b/src/client/src/components/burgerMenu/BurgerMenu.tsx
index 801a5665..edc77d3d 100644
--- a/src/client/src/components/burgerMenu/BurgerMenu.tsx
+++ b/src/client/src/components/burgerMenu/BurgerMenu.tsx
@@ -1,25 +1,8 @@
-import styled, { css } from 'styled-components';
-import { burgerColor } from '../../styles/Themes';
import { NodeInfo } from '../../layouts/navigation/nodeInfo/NodeInfo';
import { SideSettings } from '../../layouts/navigation/sideSettings/SideSettings';
import { Navigation } from '../../layouts/navigation/Navigation';
-import { LogoutWrapper } from '../logoutButton';
-import { ColorButton } from '../buttons/colorButton/ColorButton';
-
-type StyledProps = {
- open: boolean;
-};
-
-const StyledBurger = styled.div
-
- ) : (
- children
- )}
-
+ setFeeRate(Number(value))}
- />
- setCLTV(Number(value))}
- />
- setMax(Number(value))}
- />
- setMin(Number(value))}
- />
+
+
+ BaseFee
+
+ {baseFeeDirty ? `${baseFee} sats` : ''}
+
+
{
setBaseFeeDirty(true);
setBaseFee(Number(e.target.value));
}}
- value={baseFee || undefined}
+ value={baseFee || ''}
/>
-
-
+
+
+ Fee Rate
+
+
+ 0 ? feeRate : ''}
+ onChange={e => setFeeRate(Number(e.target.value))}
+ />
+
+
+
+ CLTV Delta
+
+ {cltv ? cltv.toString() : ''}
+
+
+ 0 ? cltv : ''}
+ onChange={e => setCLTV(Number(e.target.value))}
+ />
+
+
+
+ Max HTLC
+
+
+ 0 ? max : ''}
+ onChange={e => setMax(Number(e.target.value))}
+ />
+
+
+ Min HTLC
+
+
+ 0 ? min : ''}
+ onChange={e => setMin(Number(e.target.value))}
+ />
+
+
+
+
);
export const SimpleWrapper: FC
{centerContent ? (
- {children}
+
+ {children}
) : (
children
)}
-
-
-
+
+
+);
+
export const LoadingCard = ({
title = '',
color,
@@ -28,30 +33,16 @@ export const LoadingCard = ({
loadingHeight,
inverseColor,
}: LoadingCardProps) => {
- const loadingColor = color ? color : themeColors.blue3;
+ const loadingColor = color || '#5163ba';
if (noCard) {
- return (
-
+
+
+
+ Base Fee
+
+ {`${newBaseFee} sats`}
+
+
setBaseFee(Number(e.target.value))}
- value={newBaseFee || undefined}
+ value={newBaseFee || ''}
/>
-
-
+ setCLTV(Number(value))}
- inputMaxWidth={'160px'}
- />
- setMax(Number(value))}
- inputMaxWidth={'160px'}
- />
- setMin(Number(value))}
- inputMaxWidth={'160px'}
- />
-
+
+
);
};
diff --git a/src/client/src/components/modal/closeChannel/CloseChannel.tsx b/src/client/src/components/modal/closeChannel/CloseChannel.tsx
index 9df2802f..1e774440 100644
--- a/src/client/src/components/modal/closeChannel/CloseChannel.tsx
+++ b/src/client/src/components/modal/closeChannel/CloseChannel.tsx
@@ -1,13 +1,11 @@
import { useState } from 'react';
-import { AlertTriangle } from 'lucide-react';
-import styled from 'styled-components';
+import { AlertTriangle, ChevronRight, Loader2 } from 'lucide-react';
import toast from 'react-hot-toast';
import { useCloseChannelMutation } from '@/graphql/mutations/__generated__/closeChannel.generated';
import { useBitcoinFees } from '@/hooks/UseBitcoinFees';
import { useConfigState } from '@/context/ConfigContext';
import { renderLine } from '@/components/generic/helpers';
-import { InputWithDeco } from '@/components/input/InputWithDeco';
-import { chartColors } from '@/styles/Themes';
+import { Input } from '@/components/ui/input';
import {
Separation,
SingleLine,
@@ -16,23 +14,8 @@ import {
DarkSubTitle,
} from '../../generic/Styled';
import { getErrorContent } from '../../../utils/error';
-import { ColorButton } from '../../buttons/colorButton/ColorButton';
-import {
- MultiButton,
- SingleButton,
-} from '../../buttons/multiButton/MultiButton';
-
-const Warning = styled.div`
- font-size: 14px;
- color: ${chartColors.orange};
-`;
-
-const WarningCard = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-`;
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
type CloseChannelProps = {
channelId: string;
@@ -73,13 +56,17 @@ export const CloseChannel = ({
text: string,
selected: boolean
) => (
-
+
+
);
const renderWarning = () => (
-
+
Are you sure you want to close the channel?
This is a force close
)}
{
let details:
| { target: number }
@@ -124,17 +110,22 @@ export const CloseChannel = ({
});
}}
>
- {`Close Channel [ ${channelName}/${channelId} ]`}
-
-
Force Close Channel:
-
+
Fee:
- {!dontShow && {`Minimum: ${minimum} sats/vByte`} }
+ {!dontShow && (
+
+ {`Minimum: ${minimum} sats/vByte`}
+
+ )}
-
+
Fee Amount:
-
+ setAmount(Number(e))}
- />
+ setIsConfirmed(true)}
>
- Close Channel
-
+ Close Channel
+
Are you sure you want to remove this peer?
- {
removePeer({ variables: { publicKey } });
}}
- color={'red'}
disabled={loading}
- loading={loading}
- withMargin={'4px'}
+ style={{ margin: '4px' }}
+ >
+ {loading ? (
+
-
Cancel
-
-
+
+
);
};
diff --git a/src/client/src/components/notification/Beta.tsx b/src/client/src/components/notification/Beta.tsx
deleted file mode 100644
index 76fdeec3..00000000
--- a/src/client/src/components/notification/Beta.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { chartColors, mediaWidths } from '@/styles/Themes';
-
-export const BetaNotification = styled.div`
- width: 100%;
- text-align: center;
- background-color: ${chartColors.orange};
- border-radius: 4px;
- color: black;
- margin-bottom: 16px;
- padding: 4px 0;
-
- @media (${mediaWidths.mobile}) {
- margin-top: 8px;
- margin-bottom: 8px;
- }
-`;
diff --git a/src/client/src/components/sankey/index.tsx b/src/client/src/components/sankey/index.tsx
index a625d254..a6f9f977 100644
--- a/src/client/src/components/sankey/index.tsx
+++ b/src/client/src/components/sankey/index.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
import {
GraphicComponent,
GridComponent,
@@ -11,7 +11,7 @@ import * as echarts from 'echarts/core';
import { SankeyChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import ReactEChartsCore from 'echarts-for-react/lib/core';
-import { ThemeContext } from 'styled-components';
+import { useThemeMode } from '../../hooks/useThemeMode';
echarts.use([
SankeyChart,
@@ -46,10 +46,10 @@ export interface SankeyData {
}
export const Sankey = ({ data, width, height }: SankeyProps) => {
- const themeContext = useContext(ThemeContext);
+ const themeMode = useThemeMode();
const option = useMemo(() => {
- const fontColor = themeContext?.mode === 'light' ? 'black' : 'white';
+ const fontColor = themeMode === 'light' ? 'black' : 'white';
return {
resize: true,
tooltip: {
@@ -86,7 +86,7 @@ export const Sankey = ({ data, width, height }: SankeyProps) => {
},
],
};
- }, [data, themeContext, height]);
+ }, [data, themeMode, height]);
return (
`
- width: 100%;
- ${({ padding }) =>
- padding &&
- css`
- padding: ${padding};
- `}
- ${({ textColor }) =>
- textColor &&
- css`
- color: ${textColor};
- `}
- background-color: ${({ sectionColor }) =>
- sectionColor ? sectionColor : backgroundColor};
-
- @media (${mediaWidths.mobile}) {
- padding: 16px 0;
- }
-`;
-
-const FixedWidth = styled.div`
- max-width: 1000px;
- margin: 0 auto 0;
-
- @media (max-width: 1035px) {
- padding: 0 16px;
- }
-`;
-
-type SectionProps = {
- fixedWidth?: boolean;
- color?: string | ThemeSet;
- textColor?: string | ThemeSet;
- padding?: string;
- children?: ReactNode;
-};
-
-export const Section: FC = ({
- fixedWidth = false,
- children,
- color,
- textColor,
- padding,
-}) => {
- const Fixed = fixedWidth ? FixedWidth : Fragment;
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/client/src/components/select/SelectWithDeco.tsx b/src/client/src/components/select/SelectWithDeco.tsx
deleted file mode 100644
index 8fe7d411..00000000
--- a/src/client/src/components/select/SelectWithDeco.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import styled from 'styled-components';
-import { mediaWidths, themeColors } from '@/styles/Themes';
-import { Loader2 } from 'lucide-react';
-import { SingleLine } from '../generic/Styled';
-import { Select, SelectWithValue, ValueProp } from '.';
-import { FC, ReactNode } from 'react';
-
-const NoWrapText = styled.div`
- white-space: nowrap;
- font-size: 14px;
-`;
-
-const InputTitle = styled(NoWrapText)``;
-
-const InputTitleRow = styled.div`
- display: flex;
-
- @media (${mediaWidths.mobile}) {
- flex-wrap: wrap;
- margin: 8px 0;
- }
-`;
-
-const InputLine = styled(SingleLine)`
- width: 100%;
- margin: 8px 0;
-
- @media (${mediaWidths.mobile}) {
- flex-direction: column;
- }
-`;
-
-type InputWithDecoProps = {
- title: string;
- options: ValueProp[];
- noInput?: boolean;
- loading?: boolean;
- maxWidth?: string;
- callback: (value: ValueProp[]) => void;
- children?: ReactNode;
-};
-
-export const SelectWithDeco: FC = ({
- children,
- title,
- noInput,
- options,
- loading,
- maxWidth,
- callback,
-}) => {
- const renderContent = () => {
- switch (true) {
- case loading:
- return (
-
-
- {title}
-
- {renderContent()}
- {children}
-
- );
-};
-
-type InputWithDecoAndValueProps = {
- title: string;
- value: ValueProp | undefined;
- options: ValueProp[];
- noInput?: boolean;
- loading?: boolean;
- callback: (value: ValueProp[]) => void;
- children?: React.ReactNode;
-};
-
-export const SelectWithDecoAndValue: React.FC = ({
- children,
- title,
- noInput,
- options,
- loading,
- callback,
- value,
-}) => {
- const renderContent = () => {
- switch (true) {
- case loading:
- return (
-
-
- {title}
-
- {renderContent()}
- {children}
-
- );
-};
diff --git a/src/client/src/components/select/index.tsx b/src/client/src/components/select/index.tsx
index 25114f3c..410e2298 100644
--- a/src/client/src/components/select/index.tsx
+++ b/src/client/src/components/select/index.tsx
@@ -36,7 +36,6 @@ type SelectWithValueProps = {
options: ValueProp[];
value: ValueProp | undefined;
maxWidth?: string;
- minWidth?: string;
isClearable?: boolean;
callback: (value: ValueProp[]) => void;
};
@@ -44,13 +43,12 @@ type SelectWithValueProps = {
export const SelectWithValue = ({
options,
maxWidth,
- minWidth,
callback,
value,
isClearable = true,
}: SelectWithValueProps) => {
return (
-
+ Fee Rate
+
+ {`${feeRatePercent}%`}
+
+
setFeeRate(Number(e.target.value))}
- value={newFeeRate || undefined}
+ value={newFeeRate || ''}
/>
-
-
+
+
+ CLTV Delta
+
+ {newCLTV?.toString() || ''}
+
+
+ 0 ? newCLTV : ''}
+ onChange={e => setCLTV(Number(e.target.value))}
+ />
+
+
+
+ Max HTLC
+
+
+ 0 ? newMax : ''}
+ onChange={e => setMax(Number(e.target.value))}
+ />
+
+
+
+ Min HTLC
+
+
+ 0 ? newMin : ''}
+ onChange={e => setMin(Number(e.target.value))}
+ />
+
{renderButton(
() => {
setAmount(undefined);
@@ -157,14 +148,18 @@ export const CloseChannel = ({
isForce
)}
{renderButton(() => setIsForce(false), 'No', !isForce)}
-
+
{!isForce && (
<>
{fetchFees &&
!dontShow &&
renderButton(
@@ -191,7 +186,7 @@ export const CloseChannel = ({
'Target',
isType === 'target'
)}
-
+
)}
{isType === 'none' && !isForce && (
@@ -199,7 +194,7 @@ export const CloseChannel = ({
{renderButton(
() => setAmount(fast),
`Fastest (${fast} sats)`,
@@ -216,29 +211,35 @@ export const CloseChannel = ({
`Hour (${hour} sats)`,
amount === hour
)}
-
+
)}
{isType !== 'none' && !isForce && (
-
+
)}
-
+
+ {isType === 'target' ? 'Target Blocks:' : 'Fee (Sats/Byte)'}
+
+
+ 0 ? amount : ''}
+ onChange={e => setAmount(Number(e.target.value))}
+ />
+
+
{
@@ -84,9 +82,8 @@ export const SmallSelectWithValue = ({
isClearable = true,
}: SelectWithValueProps) => {
return (
-
+
{
const selectedValue = e.target.value;
diff --git a/src/client/src/components/select/specific/ChannelSelect.tsx b/src/client/src/components/select/specific/ChannelSelect.tsx
index f27b6079..63c736dc 100644
--- a/src/client/src/components/select/specific/ChannelSelect.tsx
+++ b/src/client/src/components/select/specific/ChannelSelect.tsx
@@ -1,8 +1,8 @@
import { shorten } from '@/components/generic/helpers';
import { useGetChannelsWithPeersQuery } from '@/graphql/queries/__generated__/getChannels.generated';
-import { SelectWithDeco } from '../SelectWithDeco';
+import { Loader2 } from 'lucide-react';
+import { Select, ValueProp } from '..';
import { Channel } from '../../../graphql/types';
-import { ValueProp } from '..';
type ChannelSelectProps = {
title: string;
@@ -30,7 +30,7 @@ export const ChannelSelect = ({
channel?.partner_node_info?.node?.alias
? ` - ${channel.partner_node_info.node.alias}`
: ''
- } -
+ } -
${shorten(channel.partner_public_key)}`;
return {
@@ -55,12 +55,19 @@ export const ChannelSelect = ({
};
return (
- = ({
table,
toggleConfiguration,
}: ColumnConfigurationsProps) => {
- // The columns that are hideable in configurations need to be grouped by their parents id in order for display purposes, see enableHiding to toggle viewability of each column
const groupedHideableColumns = useMemo(() => {
const allLeafColumns = table
.getAllLeafColumns()
@@ -57,7 +21,7 @@ export const ColumnConfigurations: FC = ({
}, [table]);
return (
-
+ [];
@@ -30,60 +29,6 @@ interface TableProps {
toggleConfiguration?: (hide: boolean, id: string) => void;
}
-type StyledTableProps = {
- withBorder?: boolean;
- alignCenter?: boolean;
- fontSize?: string;
-};
-
-const S = {
- row: styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-bottom: 24px;
- `,
- wrapper: styled.div`
- overflow-x: auto;
- table {
- width: 100%;
- border-spacing: 0;
- tr {
- :last-child {
- td {
- border-bottom: 0;
- }
- }
- }
- .cursor {
- cursor: pointer;
- }
-
- th,
- td {
- font-size: ${({ fontSize }) => fontSize || '14px'};
- text-align: left;
- margin: 0;
- padding: 8px;
- ${({ withBorder }: StyledTableProps) =>
- withBorder &&
- css`
- border-bottom: 1px solid ${separationColor};
- `}
- ${({ alignCenter }: StyledTableProps) =>
- alignCenter &&
- css`
- text-align: center;
- padding: 8px;
- `}
- :last-child {
- border-right: 0;
- }
- }
- }
- `,
-};
-
export default function Table({
columns,
data,
@@ -137,7 +82,7 @@ export default function Table({
return (
<>
-
+
@@ -224,7 +182,7 @@ export default function Table({
})}
-
+
);
}
diff --git a/src/client/src/components/typography/Styled.tsx b/src/client/src/components/typography/Styled.tsx
index e505b8e9..3fab6304 100644
--- a/src/client/src/components/typography/Styled.tsx
+++ b/src/client/src/components/typography/Styled.tsx
@@ -1,82 +1,155 @@
-import styled from 'styled-components';
-// import { Card, CardProps } from 'components/generic/Styled';
-import { fontColors, mediaWidths, textColor } from '../../styles/Themes';
-import { Card, CardProps } from '../generic/CardGeneric';
+import { forwardRef, HTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
-export const Center = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-`;
+export const Center = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const Title = styled.h1<{ textColor?: string }>`
- width: 100%;
- text-align: center;
- color: ${({ textColor }) => (textColor ? textColor : fontColors.grey3)};
- font-size: 40px;
+interface TitleProps extends HTMLAttributes {
+ textColor?: string;
+}
- @media (${mediaWidths.mobile}) {
- font-size: 24px;
- }
-`;
+export const Title = forwardRef(
+ ({ textColor, className, style, ...props }, ref) => (
+
+ )
+);
-export const SectionTitle = styled.h2<{ textColor?: string }>`
- color: ${({ textColor }) => (textColor ? textColor : fontColors.blue)};
- font-size: 24px;
-`;
+export const SectionTitle = forwardRef(
+ ({ textColor, className, style, ...props }, ref) => (
+
+ )
+);
-export const Subtitle = styled.h2<{ textColor?: string }>`
- color: ${({ textColor }) => (textColor ? textColor : fontColors.blue)};
- font-size: 16px;
- max-width: 600px;
-`;
+export const Subtitle = forwardRef(
+ ({ textColor, className, style, ...props }, ref) => (
+
+ )
+);
-export const Question = styled.h3`
- color: ${fontColors.grey8};
-`;
+export const Question = forwardRef<
+ HTMLHeadingElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const Text = styled.p`
- color: ${fontColors.grey6};
- text-align: justify;
-`;
+export const Text = forwardRef<
+ HTMLParagraphElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const SmallText = styled(Text)`
- color: ${textColor};
- text-align: start;
-`;
+export const SmallText = forwardRef<
+ HTMLParagraphElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const BulletPoint = styled(Text)`
- margin-left: 32px;
-`;
+export const BulletPoint = forwardRef<
+ HTMLParagraphElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const DetailCard = styled(Card)`
- margin-bottom: 0;
- margin: 8px 16px;
- z-index: 1;
- flex: 1 0 30%;
+export const DetailCard = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
- @media (${mediaWidths.mobile}) {
- flex: 1 0 100%;
- }
-`;
+export const DetailLine = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const DetailLine = styled.div`
- margin: 0 -16px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- @media (${mediaWidths.mobile}) {
- margin: 0;
- }
-`;
+export const IconTitle = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
-export const IconTitle = styled.div`
- display: flex;
- color: ${textColor};
-`;
-
-export const IconMargin = styled.span`
- margin-right: 4px;
-`;
+export const IconMargin = forwardRef<
+ HTMLSpanElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
diff --git a/src/client/src/components/ui/accordion.tsx b/src/client/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..cfd8ae9e
--- /dev/null
+++ b/src/client/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDownIcon } from 'lucide-react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Accordion({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+
+ svg]:rotate-180',
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+ );
+}
+
+function AccordionContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/client/src/components/ui/alert.tsx b/src/client/src/components/ui/alert.tsx
new file mode 100644
index 00000000..d562e24f
--- /dev/null
+++ b/src/client/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+ 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+ {
+ variants: {
+ variant: {
+ default: 'bg-card text-card-foreground',
+ destructive:
+ 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+);
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<'div'> & VariantProps) {
+ return (
+
+ );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/client/src/components/ui/badge.tsx b/src/client/src/components/ui/badge.tsx
new file mode 100644
index 00000000..26866cd2
--- /dev/null
+++ b/src/client/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+ 'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+ secondary:
+ 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+ destructive:
+ 'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+ outline:
+ 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+ ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 [a&]:hover:underline',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+);
+
+function Badge({
+ className,
+ variant = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'span'> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : 'span';
+
+ return (
+ & {
asChild?: boolean;
}) {
diff --git a/src/client/src/components/ui/card.tsx b/src/client/src/components/ui/card.tsx
new file mode 100644
index 00000000..916769f5
--- /dev/null
+++ b/src/client/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+};
diff --git a/src/client/src/components/ui/checkbox.tsx b/src/client/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..2d49b3fa
--- /dev/null
+++ b/src/client/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ );
+}
+
+export { Checkbox };
diff --git a/src/client/src/components/ui/dropdown-menu.tsx b/src/client/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..9b965568
--- /dev/null
+++ b/src/client/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean;
+ variant?: 'default' | 'destructive';
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
);
};
diff --git a/src/client/src/components/select/specific/PeerSelect.tsx b/src/client/src/components/select/specific/PeerSelect.tsx
index 832a2ffa..f8aeebbd 100644
--- a/src/client/src/components/select/specific/PeerSelect.tsx
+++ b/src/client/src/components/select/specific/PeerSelect.tsx
@@ -1,8 +1,8 @@
import { useGetPeersQuery } from '@/graphql/queries/__generated__/getPeers.generated';
import { shorten } from '@/components/generic/helpers';
import { Peer } from '@/graphql/types';
-import { SelectWithDeco } from '../SelectWithDeco';
-import { ValueProp } from '..';
+import { Loader2 } from 'lucide-react';
+import { Select, ValueProp } from '..';
type PeerSelectProps = {
title: string;
@@ -52,11 +52,15 @@ export const PeerSelect = ({ title, callback }: PeerSelectProps) => {
};
return (
-
+ {title}
+
+ {loading ? (
+
+
);
};
diff --git a/src/client/src/components/spacer/Spacer.tsx b/src/client/src/components/spacer/Spacer.tsx
deleted file mode 100644
index 406ced08..00000000
--- a/src/client/src/components/spacer/Spacer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { mediaWidths } from '@/styles/Themes';
-
-const StyledSpacer = styled.div`
- height: 32px;
-
- @media (${mediaWidths.mobile}) {
- height: 0;
- }
-`;
-
-export const Spacer = () =>
+ {title}
+
+ {loading ? (
+
{Object.keys(groupedHideableColumns).map(
(group: string, index: number) => {
return (
@@ -65,31 +29,27 @@ export const ColumnConfigurations: FC = ({
{group === 'undefined' ? 'General' : group}
-
+
);
};
diff --git a/src/client/src/components/table/DebouncedInput.tsx b/src/client/src/components/table/DebouncedInput.tsx
index d3c268e8..bb946d49 100644
--- a/src/client/src/components/table/DebouncedInput.tsx
+++ b/src/client/src/components/table/DebouncedInput.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
-import { Input } from '../input';
+import { Input } from '@/components/ui/input';
// A debounced input react component
export function DebouncedInput({
@@ -31,7 +31,7 @@ export function DebouncedInput({
return (
setValue(e.target.value)}
placeholder={`Search ${count} ${placeholder || ''}`}
diff --git a/src/client/src/components/table/index.tsx b/src/client/src/components/table/index.tsx
index 674031aa..b260a82c 100644
--- a/src/client/src/components/table/index.tsx
+++ b/src/client/src/components/table/index.tsx
@@ -1,5 +1,4 @@
import { useState } from 'react';
-import styled, { css } from 'styled-components';
import {
useReactTable,
getCoreRowModel,
@@ -11,10 +10,10 @@ import {
VisibilityState,
} from '@tanstack/react-table';
import { Settings, X } from 'lucide-react';
-import { separationColor } from '../../styles/Themes';
-import { ColorButton } from '../buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { ColumnConfigurations } from './ColumnConfigurations';
import { DebouncedInput } from './DebouncedInput';
+import { cn } from '@/lib/utils';
interface TableProps {
columns: ColumnDef
{groupedHideableColumns[group].map((column: any) => {
return (
-
-
-
+
);
})}
-
+
);
}
)}
-
+
{withGlobalSort ? (
- setIsOpen(p => !p)}>
+
+
) : null}
-
+
{isOpen && toggleConfiguration ? (
{children}
+ textarea]:h-auto',
+
+ // Variants based on alignment.
+ 'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+ 'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+ 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+ 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+ // Focus state.
+ 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
+
+ // Error state.
+ 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+const inputGroupAddonVariants = cva(
+ "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ align: {
+ 'inline-start':
+ 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+ 'inline-end':
+ 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+ 'block-start':
+ 'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+ 'block-end':
+ 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+ },
+ },
+ defaultVariants: {
+ align: 'inline-start',
+ },
+ }
+);
+
+function InputGroupAddon({
+ className,
+ align = 'inline-start',
+ ...props
+}: React.ComponentProps<'div'> & VariantProps) {
+ return (
+
{
+ if ((e.target as HTMLElement).closest('button')) {
+ return;
+ }
+ e.currentTarget.parentElement?.querySelector('input')?.focus();
+ }}
+ {...props}
+ />
+ );
+}
+
+const inputGroupButtonVariants = cva(
+ 'flex items-center gap-2 text-sm shadow-none',
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+ sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+ 'icon-xs':
+ 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+ 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+ },
+ },
+ defaultVariants: {
+ size: 'xs',
+ },
+ }
+);
+
+function InputGroupButton({
+ className,
+ type = 'button',
+ variant = 'ghost',
+ size = 'xs',
+ ...props
+}: Omit, 'size'> &
+ VariantProps) {
+ return (
+
+ );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+ return (
+
+ );
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<'input'>) {
+ return (
+
+ );
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<'textarea'>) {
+ return (
+
+ );
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+};
diff --git a/src/client/src/components/ui/input.tsx b/src/client/src/components/ui/input.tsx
new file mode 100644
index 00000000..bf32cb53
--- /dev/null
+++ b/src/client/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/src/client/src/components/ui/popover.tsx b/src/client/src/components/ui/popover.tsx
new file mode 100644
index 00000000..6f8a3319
--- /dev/null
+++ b/src/client/src/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Popover({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return (
+
+
+ );
+}
+
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+
+
+ );
+}
+
+export { Progress };
diff --git a/src/client/src/components/ui/select.tsx b/src/client/src/components/ui/select.tsx
new file mode 100644
index 00000000..d416ff4b
--- /dev/null
+++ b/src/client/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Select as SelectPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return & {
+ size?: 'sm' | 'default';
+}) {
+ return (
+
+ {children}
+
+
+
+ );
+}
+
+function SelectContent({
+ className,
+ children,
+ position = 'item-aligned',
+ align = 'center',
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+};
diff --git a/src/client/src/components/ui/separator.tsx b/src/client/src/components/ui/separator.tsx
new file mode 100644
index 00000000..da8f950a
--- /dev/null
+++ b/src/client/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Separator({
+ className,
+ orientation = 'horizontal',
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ side?: 'top' | 'right' | 'bottom' | 'left';
+ showCloseButton?: boolean;
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ )}
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ [role=checkbox]]:translate-y-[2px]',
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+ return (
+ [role=checkbox]]:translate-y-[2px]',
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<'caption'>) {
+ return (
+ ) {
+ return (
+ &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/client/src/components/version/Version.tsx b/src/client/src/components/version/Version.tsx
index 8a23f490..df047e42 100644
--- a/src/client/src/components/version/Version.tsx
+++ b/src/client/src/components/version/Version.tsx
@@ -1,21 +1,7 @@
import { useGetLatestVersionQuery } from '@/graphql/queries/__generated__/getLatestVersion.generated';
import { config } from '../../config/thunderhubConfig';
-import styled from 'styled-components';
import { Link } from '../link/Link';
-const VersionBox = styled.div`
- width: 100%;
- text-align: center;
- font-size: 14px;
- opacity: 0.3;
- cursor: pointer;
-
- &:hover {
- opacity: 1;
- color: white;
- }
-`;
-
export const Version = () => {
const { npmVersion, noVersionCheck } = config;
@@ -49,7 +35,9 @@ export const Version = () => {
href={'https://docs.thunderhub.io/installation#updating'}
newTab={true}
>
- {`Version ${githubVersion} is available. You are on version ${npmVersion}`}
+ = ({ hideMobile, children }) => {
- return hideMobile ? (
- {children}
- ) : (
- {children}
- );
-};
diff --git a/src/client/src/context/ChatContext.tsx b/src/client/src/context/ChatContext.tsx
deleted file mode 100644
index 934f42f2..00000000
--- a/src/client/src/context/ChatContext.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { FC, ReactNode, createContext, useContext, useReducer } from 'react';
-import { Message } from '@/graphql/types';
-
-export interface SentChatProps extends Message {
- isSent?: boolean;
- feePaid?: number;
-}
-
-type State = {
- initialized: boolean;
- chats: Message[];
- sentChats: SentChatProps[];
- lastChat: string;
- sender: string;
-};
-
-type ActionType =
- | {
- type: 'initialized';
- chats?: Message[];
- lastChat?: string;
- sender?: string;
- sentChats?: SentChatProps[];
- }
- | {
- type: 'additional';
- chats: Message[];
- lastChat: string;
- }
- | {
- type: 'changeActive';
- sender: string;
- userId: string;
- }
- | {
- type: 'newChat';
- sender: string;
- userId: string;
- newChat: SentChatProps;
- }
- | {
- type: 'disconnected';
- };
-
-type Dispatch = (action: ActionType) => void;
-
-const StateContext = createContext(undefined);
-const DispatchContext = createContext(undefined);
-
-const initialState: State = {
- initialized: false,
- chats: [],
- lastChat: '',
- sender: '',
- sentChats: [],
-};
-
-const stateReducer = (state: State, action: ActionType): State => {
- switch (action.type) {
- case 'initialized':
- return {
- ...state,
- initialized: true,
- ...action,
- };
- case 'additional':
- return {
- ...state,
- initialized: true,
- chats: [...state.chats, ...action.chats],
- lastChat: action.lastChat,
- };
- case 'changeActive':
- return {
- ...state,
- sender: action.sender,
- };
- case 'newChat':
- localStorage.setItem(
- `${action.userId}-sentChats`,
- JSON.stringify([...state.sentChats, action.newChat])
- );
- return {
- ...state,
- sentChats: [...state.sentChats, action.newChat],
- ...(action.sender && { sender: action.sender }),
- };
- case 'disconnected':
- return initialState;
- default:
- return state;
- }
-};
-
-const ChatProvider: FC<{ children?: ReactNode }> = ({ children }) => {
- const [state, dispatch] = useReducer(stateReducer, initialState);
-
- return (
-
- {children}
-
- );
-};
-
-const useChatState = () => {
- const context = useContext(StateContext);
- if (context === undefined) {
- throw new Error('useChatState must be used within a ChatProvider');
- }
- return context;
-};
-
-const useChatDispatch = () => {
- const context = useContext(DispatchContext);
- if (context === undefined) {
- throw new Error('useChatDispatch must be used within a ChatProvider');
- }
- return context;
-};
-
-export { ChatProvider, useChatState, useChatDispatch };
diff --git a/src/client/src/context/ContextProvider.tsx b/src/client/src/context/ContextProvider.tsx
index 9bb0b430..df4f3c1d 100644
--- a/src/client/src/context/ContextProvider.tsx
+++ b/src/client/src/context/ContextProvider.tsx
@@ -1,15 +1,12 @@
import { FC, ReactNode } from 'react';
import { PriceProvider } from './PriceContext';
-import { ChatProvider } from './ChatContext';
import { DashProvider } from './DashContext';
import { NotificationProvider } from './NotificationContext';
export const ContextProvider: FC<{ children?: ReactNode }> = ({ children }) => (
-
- {children}
-
+ {children}
);
diff --git a/src/client/src/graphql/mutations/__generated__/sendMessage.generated.tsx b/src/client/src/graphql/mutations/__generated__/sendMessage.generated.tsx
deleted file mode 100644
index b27fc7cf..00000000
--- a/src/client/src/graphql/mutations/__generated__/sendMessage.generated.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as Types from '../../types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type SendMessageMutationVariables = Types.Exact<{
- publicKey: Types.Scalars['String']['input'];
- message: Types.Scalars['String']['input'];
- messageType?: Types.InputMaybe;
- tokens?: Types.InputMaybe;
- maxFee?: Types.InputMaybe;
-}>;
-
-export type SendMessageMutation = {
- __typename?: 'Mutation';
- sendMessage: number;
-};
-
-export const SendMessageDocument = gql`
- mutation SendMessage(
- $publicKey: String!
- $message: String!
- $messageType: String
- $tokens: Float
- $maxFee: Float
- ) {
- sendMessage(
- publicKey: $publicKey
- message: $message
- messageType: $messageType
- tokens: $tokens
- maxFee: $maxFee
- )
- }
-`;
-export type SendMessageMutationFn = Apollo.MutationFunction<
- SendMessageMutation,
- SendMessageMutationVariables
->;
-
-/**
- * __useSendMessageMutation__
- *
- * To run a mutation, you first call `useSendMessageMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useSendMessageMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [sendMessageMutation, { data, loading, error }] = useSendMessageMutation({
- * variables: {
- * publicKey: // value for 'publicKey'
- * message: // value for 'message'
- * messageType: // value for 'messageType'
- * tokens: // value for 'tokens'
- * maxFee: // value for 'maxFee'
- * },
- * });
- */
-export function useSendMessageMutation(
- baseOptions?: Apollo.MutationHookOptions<
- SendMessageMutation,
- SendMessageMutationVariables
- >
-) {
- const options = { ...defaultOptions, ...baseOptions };
- return Apollo.useMutation(
- SendMessageDocument,
- options
- );
-}
-export type SendMessageMutationHookResult = ReturnType<
- typeof useSendMessageMutation
->;
-export type SendMessageMutationResult =
- Apollo.MutationResult;
-export type SendMessageMutationOptions = Apollo.BaseMutationOptions<
- SendMessageMutation,
- SendMessageMutationVariables
->;
diff --git a/src/client/src/graphql/mutations/sendMessage.ts b/src/client/src/graphql/mutations/sendMessage.ts
deleted file mode 100644
index 94f0fb7b..00000000
--- a/src/client/src/graphql/mutations/sendMessage.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const SEND_MESSAGE = gql`
- mutation SendMessage(
- $publicKey: String!
- $message: String!
- $messageType: String
- $tokens: Float
- $maxFee: Float
- ) {
- sendMessage(
- publicKey: $publicKey
- message: $message
- messageType: $messageType
- tokens: $tokens
- maxFee: $maxFee
- )
- }
-`;
diff --git a/src/client/src/graphql/queries/__generated__/getMessages.generated.tsx b/src/client/src/graphql/queries/__generated__/getMessages.generated.tsx
deleted file mode 100644
index 5c853d26..00000000
--- a/src/client/src/graphql/queries/__generated__/getMessages.generated.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import * as Types from '../../types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type GetMessagesQueryVariables = Types.Exact<{
- initialize?: Types.InputMaybe;
-}>;
-
-export type GetMessagesQuery = {
- __typename?: 'Query';
- getMessages: {
- __typename?: 'GetMessages';
- token?: string | null;
- messages: Array<{
- __typename?: 'Message';
- date: string;
- contentType?: string | null;
- alias?: string | null;
- message?: string | null;
- id: string;
- sender?: string | null;
- verified: boolean;
- tokens?: number | null;
- }>;
- };
-};
-
-export const GetMessagesDocument = gql`
- query GetMessages($initialize: Boolean) {
- getMessages(initialize: $initialize) {
- token
- messages {
- date
- contentType
- alias
- message
- id
- sender
- verified
- tokens
- }
- }
- }
-`;
-
-/**
- * __useGetMessagesQuery__
- *
- * To run a query within a React component, call `useGetMessagesQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetMessagesQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useGetMessagesQuery({
- * variables: {
- * initialize: // value for 'initialize'
- * },
- * });
- */
-export function useGetMessagesQuery(
- baseOptions?: Apollo.QueryHookOptions<
- GetMessagesQuery,
- GetMessagesQueryVariables
- >
-) {
- const options = { ...defaultOptions, ...baseOptions };
- return Apollo.useQuery(
- GetMessagesDocument,
- options
- );
-}
-export function useGetMessagesLazyQuery(
- baseOptions?: Apollo.LazyQueryHookOptions<
- GetMessagesQuery,
- GetMessagesQueryVariables
- >
-) {
- const options = { ...defaultOptions, ...baseOptions };
- return Apollo.useLazyQuery(
- GetMessagesDocument,
- options
- );
-}
-// @ts-ignore
-export function useGetMessagesSuspenseQuery(
- baseOptions?: Apollo.SuspenseQueryHookOptions<
- GetMessagesQuery,
- GetMessagesQueryVariables
- >
-): Apollo.UseSuspenseQueryResult;
-export function useGetMessagesSuspenseQuery(
- baseOptions?:
- | Apollo.SkipToken
- | Apollo.SuspenseQueryHookOptions<
- GetMessagesQuery,
- GetMessagesQueryVariables
- >
-): Apollo.UseSuspenseQueryResult<
- GetMessagesQuery | undefined,
- GetMessagesQueryVariables
->;
-export function useGetMessagesSuspenseQuery(
- baseOptions?:
- | Apollo.SkipToken
- | Apollo.SuspenseQueryHookOptions<
- GetMessagesQuery,
- GetMessagesQueryVariables
- >
-) {
- const options =
- baseOptions === Apollo.skipToken
- ? baseOptions
- : { ...defaultOptions, ...baseOptions };
- return Apollo.useSuspenseQuery(
- GetMessagesDocument,
- options
- );
-}
-export type GetMessagesQueryHookResult = ReturnType;
-export type GetMessagesLazyQueryHookResult = ReturnType<
- typeof useGetMessagesLazyQuery
->;
-export type GetMessagesSuspenseQueryHookResult = ReturnType<
- typeof useGetMessagesSuspenseQuery
->;
-export type GetMessagesQueryResult = Apollo.QueryResult<
- GetMessagesQuery,
- GetMessagesQueryVariables
->;
diff --git a/src/client/src/graphql/queries/getMessages.ts b/src/client/src/graphql/queries/getMessages.ts
deleted file mode 100644
index d59d6b14..00000000
--- a/src/client/src/graphql/queries/getMessages.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_MESSAGES = gql`
- query GetMessages($initialize: Boolean) {
- getMessages(initialize: $initialize) {
- token
- messages {
- date
- contentType
- alias
- message
- id
- sender
- verified
- tokens
- }
- }
- }
-`;
diff --git a/src/client/src/hooks/useThemeMode.ts b/src/client/src/hooks/useThemeMode.ts
new file mode 100644
index 00000000..f56342cf
--- /dev/null
+++ b/src/client/src/hooks/useThemeMode.ts
@@ -0,0 +1,6 @@
+import { useConfigState } from '../context/ConfigContext';
+
+export const useThemeMode = () => {
+ const { theme } = useConfigState();
+ return theme as 'dark' | 'light';
+};
diff --git a/src/client/src/layouts/Layout.styled.ts b/src/client/src/layouts/Layout.styled.ts
deleted file mode 100644
index 0bd8a5d9..00000000
--- a/src/client/src/layouts/Layout.styled.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-export const PageWrapper = styled.div`
- position: relative;
- min-height: 100vh;
-`;
-
-export const HeaderBodyWrapper = styled.div`
- padding-bottom: 120px;
-`;
diff --git a/src/client/src/layouts/footer/Footer.styled.tsx b/src/client/src/layouts/footer/Footer.styled.tsx
deleted file mode 100644
index 23512be5..00000000
--- a/src/client/src/layouts/footer/Footer.styled.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-import { headerTextColor, fontColors, mediaWidths } from '../../styles/Themes';
-
-export const FooterWrapper = styled.div`
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 120px;
-`;
-
-export const FooterStyle = styled.div`
- padding: 16px 0;
- min-height: 120px;
- color: ${headerTextColor};
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- @media (${mediaWidths.mobile}) {
- padding-bottom: 32px;
- }
-`;
-
-export const SideFooter = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
-
- @media (${mediaWidths.mobile}) {
- justify-content: center;
- align-items: center;
- }
-`;
-
-export const RightFooter = styled(SideFooter)`
- justify-content: flex-start;
- align-items: flex-end;
-
- @media (${mediaWidths.mobile}) {
- margin: 16px 0;
- }
-`;
-
-export const Title = styled.div`
- font-weight: 800;
- color: ${headerTextColor};
-`;
-
-export const SideText = styled.div`
- font-size: 14px;
- color: ${fontColors.grey7};
-
- @media (${mediaWidths.mobile}) {
- padding-right: 0;
- }
-`;
-
-export const Line = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-export const Version = styled.div`
- font-size: 12px;
- margin-left: 8px;
-`;
-
-export const FooterRow = styled.div`
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- @media (${mediaWidths.mobile}) {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
-`;
-
-export const FooterCenterText = styled(SideText)`
- width: 100%;
- text-align: center;
- margin-top: 16px;
-`;
diff --git a/src/client/src/layouts/footer/Footer.tsx b/src/client/src/layouts/footer/Footer.tsx
index 70d64c9f..2149d856 100644
--- a/src/client/src/layouts/footer/Footer.tsx
+++ b/src/client/src/layouts/footer/Footer.tsx
@@ -1,62 +1,56 @@
import { config } from '../../config/thunderhubConfig';
-import { Section } from '../../components/section/Section';
import { Link } from '../../components/link/Link';
import { Emoji } from '../../components/emoji/Emoji';
-import { headerColor, fontColors } from '../../styles/Themes';
-import {
- FooterWrapper,
- FooterStyle,
- SideFooter,
- Line,
- Title,
- Version,
- SideText,
- RightFooter,
- FooterRow,
- FooterCenterText,
-} from './Footer.styled';
+import { fontColors } from '../../styles/Themes';
+
import { useLocation } from 'react-router-dom';
export const Footer = () => {
const { pathname } = useLocation();
return (
-
-
-
-
-
-
- ThunderHub
- {config.npmVersion}
-
- Open-source Lightning Node Manager.
-
-
-
- Github
-
-
- Twitter
-
-
-
-
- Made in Munich with
-
-
-
+ `
- padding: 4px;
- border-radius: 4px;
- background: ${({ selected }) => selected && homeCompatibleColor};
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- text-decoration: none;
- margin: 0 4px;
- color: ${({ selected }) =>
- selected ? headerTextColor : unSelectedNavButton};
-
- &:hover {
- color: ${headerTextColor};
- background: ${homeCompatibleColor};
- }
-`;
diff --git a/src/client/src/layouts/header/Header.tsx b/src/client/src/layouts/header/Header.tsx
index 4a95749d..db43e700 100644
--- a/src/client/src/layouts/header/Header.tsx
+++ b/src/client/src/layouts/header/Header.tsx
@@ -1,40 +1,20 @@
import { FC, useEffect, useState } from 'react';
-import {
- Cpu,
- Menu,
- X,
- MessageCircle,
- Settings,
- Heart,
- LucideProps,
-} from 'lucide-react';
+import { Cpu, Menu, X, Settings, Heart, LucideProps } from 'lucide-react';
import { useLocation } from 'react-router-dom';
import { LogoutButton } from '../../components/logoutButton';
-import { headerColor, headerTextColor } from '../../styles/Themes';
import {
useDonate,
DonateModal,
} from '../../views/home/quickActions/donate/DonateContent';
-import { SingleLine } from '../../components/generic/Styled';
import { BurgerMenu } from '../../components/burgerMenu/BurgerMenu';
-import { Section } from '../../components/section/Section';
import { Link } from '../../components/link/Link';
-import { ViewSwitch } from '../../components/viewSwitch/ViewSwitch';
-import {
- IconWrapper,
- HeaderStyle,
- HeaderLine,
- HeaderTitle,
- IconPadding,
- HeaderButtons,
- HeaderNavButton,
-} from './Header.styled';
+import { cn } from '../../lib/utils';
+import { Button } from '@/components/ui/button';
export type Icon = FC;
const SSO = '/sso';
const MAIN = '/login';
-const CHAT = '/chat';
const SETTINGS = '/settings';
export const Header = () => {
@@ -57,58 +37,72 @@ export const Header = () => {
const renderNavButton = (link: string, NavIcon: Icon) => (
-
+
+
);
const renderLoggedIn = () => (
<>
-
- setOpen(prev => !prev)}>
- {open ?
-
-
-
-
-
- {renderNavButton(CHAT, MessageCircle)}
- {renderNavButton(SETTINGS, Settings)}
-
-
+
-
-
-
-
-
+
+
;
-const NavigationStyle = styled.div<{ isOpen: boolean }>`
- grid-area: nav;
- width: ${({ isOpen }) => (isOpen ? '200px' : '60px')};
-
- @media (${mediaWidths.mobile}) {
- display: none;
- }
-`;
-
-const StickyCard = styled.div`
- position: -webkit-sticky;
- position: sticky;
- top: 16px;
-`;
-
-const LinkView = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 8px 0;
-`;
-
-const ButtonSection = styled.div<{ isOpen: boolean }>`
- width: 100%;
- ${({ isOpen }) =>
- !isOpen &&
- css`
- margin: 8px 0;
- `}
-`;
-
-const NavSeparation = styled.div`
- margin-left: 8px;
- font-size: 14px;
-`;
-
-interface NavProps {
- selected: boolean;
- isOpen?: boolean;
-}
-
-const NavButton = styled.div`
- padding: 4px;
- border-radius: 4px;
- background: ${({ selected }) => selected && navBackgroundColor};
- display: flex;
- align-items: center;
- ${({ isOpen }) => !isOpen && 'justify-content: center'};
- width: 100%;
- text-decoration: none;
- margin: 4px 0;
- color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)};
-
- &:hover {
- color: ${navTextColor};
- background: ${navBackgroundColor};
- }
-`;
-
-const BurgerRow = styled.div`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- overflow: scroll;
- background: ${burgerRowColor};
- margin: 0 -16px;
- padding: 16px;
-`;
-
-const BurgerNav = styled.a`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 16px 16px 8px;
- border-radius: 4px;
- text-decoration: none;
- background: ${({ selected }) => selected && subCardColor};
- ${({ isOpen }) => !isOpen && 'justify-content: center'};
- color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)};
-`;
-
const HOME = '/';
const DASHBOARD = '/dashboard';
const PEERS = '/peers';
@@ -123,7 +32,6 @@ const FORWARDS = '/forwards';
const CHAIN_TRANS = '/chain';
const TOOLS = '/tools';
const STATS = '/stats';
-const CHAT = '/chat';
const SETTINGS = '/settings';
const SWAP = '/swap';
const AMBOSS = '/amboss';
@@ -146,27 +54,41 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
open = true
) => (
-
+
{title} }
-
+ {open &&
);
const renderBurgerNav = (title: string, link: string, NavIcon: Icon) => (
- setOpen && setOpen(false)}
>
+
);
const renderLinks = () => (
-
+
+
-
-
+
+
+
{
{closedChannelCount}
{peersCount}
-
-
{renderLine('Channel Balance', formatCCB)}
{renderLine('Pending Channel Balance', formatPCB)}
@@ -211,35 +146,61 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
return (
<>
-
- <Alias bottomColor={color} data-tip={`Version: ${version}`}>
+ <div className="text-lg font-bold flex justify-center items-center">
+ <div
+ className="max-w-[200px] text-ellipsis whitespace-nowrap overflow-hidden"
+ style={{ borderBottom: `2px solid ${color}` }}
+ data-tip={`Version: ${version}`}
+ >
{alias}
- </Alias>
-
-
+
+
+
+
+
+
+
+
-
+
+
);
}
return (
<>
{renderContent()}
-
-
+
);
};
diff --git a/src/client/src/pages/ChannelDetailPage.tsx b/src/client/src/pages/ChannelDetailPage.tsx
index 83577133..b3d66e33 100644
--- a/src/client/src/pages/ChannelDetailPage.tsx
+++ b/src/client/src/pages/ChannelDetailPage.tsx
@@ -1,6 +1,5 @@
import { useParams } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';
-import styled from 'styled-components';
import { Card } from '../components/generic/CardGeneric';
import {
CardWithTitle,
@@ -14,14 +13,6 @@ import { CloseChannel } from '../components/modal/closeChannel/CloseChannel';
import { useGetChannelInfoQuery } from '../graphql/queries/__generated__/getChannel.generated';
import { ChannelDetails } from '../views/channels/channels/ChannelDetails';
-const S = {
- row: styled.div`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- `,
-};
-
const Channel = () => {
const { slug } = useParams<{ slug: string }>();
@@ -35,11 +26,11 @@ const Channel = () => {
if (loading) {
return (
-
+
);
@@ -48,11 +39,11 @@ const Channel = () => {
if (!data?.getChannel || error) {
return (
-
+
Error getting channel information. Try refreshing the page.
@@ -64,11 +55,11 @@ const Channel = () => {
return (
-
+
) => (
+
+);
const ChannelView = () => {
const [isOpen, isOpenSet] = useState(false);
@@ -100,9 +86,9 @@ const ChannelView = () => {
return (
-
+
{getTitle()}
-
+
setView(1)}>
{`Open (${amounts.active})`}
@@ -117,8 +103,8 @@ const ChannelView = () => {
isOpenSet(p => !p)} />
)}
-
-
+
+
{view === 1 && isOpen &&
diff --git a/src/client/src/pages/ChatPage.tsx b/src/client/src/pages/ChatPage.tsx
deleted file mode 100644
index 1176ae9c..00000000
--- a/src/client/src/pages/ChatPage.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useReducer } from 'react';
-import styled from 'styled-components';
-import { Users } from 'lucide-react';
-import { GridWrapper } from '../components/gridWrapper/GridWrapper';
-import { ChatInit } from '../components/chat/ChatInit';
-import { ChatFetcher } from '../components/chat/ChatFetcher';
-import { useChatState } from '../context/ChatContext';
-import { separateBySender, getSenders } from '../utils/chat';
-import {
- CardWithTitle,
- SubTitle,
- SingleLine,
-} from '../components/generic/Styled';
-import { Contacts } from '../views/chat/Contacts';
-import { ChatBox } from '../views/chat/ChatBox';
-import { ChatStart } from '../views/chat/ChatStart';
-import { LoadingCard } from '../components/loading/LoadingCard';
-import { ChatCard } from '../views/chat/Chat.styled';
-import { ViewSwitch } from '../components/viewSwitch/ViewSwitch';
-import { ColorButton } from '../components/buttons/colorButton/ColorButton';
-
-const ChatLayout = styled.div<{ withHeight: boolean }>`
- display: flex;
- ${({ withHeight = true }) => withHeight && 'height: 600px'}
-`;
-
-type State = {
- user: string;
- showContacts: boolean;
-};
-
-type Action =
- | {
- type: 'setUserAndHide' | 'setUser';
- user: string;
- }
- | { type: 'toggleShow' };
-
-const initialState: State = { user: '', showContacts: false };
-
-const reducer = (state: State, action: Action): State => {
- switch (action.type) {
- case 'setUser':
- return { ...state, user: action.user };
- case 'setUserAndHide':
- return { user: action.user, showContacts: false };
- case 'toggleShow':
- return { ...state, showContacts: !state.showContacts };
- default:
- return state;
- }
-};
-
-const ChatView = () => {
- const { chats, sender, sentChats, initialized } = useChatState();
- const bySender = separateBySender([...chats, ...sentChats]);
- const senders = getSenders(bySender) || [];
-
- const [state, dispatch] = useReducer(reducer, initialState);
- const { user, showContacts } = state;
-
- const setUser = (user: string) => dispatch({ type: 'setUserAndHide', user });
- const setName = (user: string) => dispatch({ type: 'setUser', user });
-
- if (!initialized) {
- return
- setUser('')} />
- ) : (
-
- );
- };
-
- return (
-
- {!showContacts && user !== 'New Chat' && (
- <>
-
-
- Chat
-
-
-
-
- dispatch({ type: 'toggleShow' })}>
-
- {user}
-
-
-
- )}
-
- {chats.length <= 0 && sentChats.length <= 0 ? (
- setUser('')} />
- ) : (
- renderChats()
- )}
-
-
- );
-};
-
-const ChatPage = () => (
-
-
-);
-
-export default ChatPage;
diff --git a/src/client/src/pages/ForwardsPage.tsx b/src/client/src/pages/ForwardsPage.tsx
index 8dedf2bb..900c940d 100644
--- a/src/client/src/pages/ForwardsPage.tsx
+++ b/src/client/src/pages/ForwardsPage.tsx
@@ -5,7 +5,6 @@ import { useMemo, useState } from 'react';
import { ForwardTable } from '../views/forwards/ForwardTable';
import { options, typeOptions } from '../views/home/reports/forwardReport';
import { ForwardsGraph } from '../views/home/reports/forwardReport/ForwardsGraph';
-import styled from 'styled-components';
import { SelectWithValue } from '../components/select';
import { ForwardResume } from '../views/home/reports/forwardReport/ForwardResume';
import {
@@ -21,20 +20,6 @@ import { useGetForwardsListQuery } from '../graphql/queries/__generated__/getFor
import toast from 'react-hot-toast';
import { getErrorContent } from '../utils/error';
-const S = {
- header: styled.div`
- margin: 0 0 8px;
- width: 100%;
- display: flex;
- `,
- options: styled.div`
- display: flex;
- flex-grow: 1;
- gap: 8px;
- justify-content: flex-end;
- `,
-};
-
const viewOptions = [
{ label: 'Graph', value: 'graph' },
{ label: 'List', value: 'list' },
@@ -70,9 +55,10 @@ const ForwardsView = () => {
<>
-
+
Forwards
-
+
+
setView((e[0] || viewOptions[0]) as any)}
options={viewOptions}
@@ -95,7 +81,10 @@ const ForwardsView = () => {
isClearable={false}
maxWidth={'110px'}
/>
- ) : (
+ ) : null}
+
+
{view.value === 'list' && (
diff --git a/src/client/src/pages/LoginPage.tsx b/src/client/src/pages/LoginPage.tsx
index 9c24fefd..7b55b827 100644
--- a/src/client/src/pages/LoginPage.tsx
+++ b/src/client/src/pages/LoginPage.tsx
@@ -1,15 +1,16 @@
-import { Spacer } from '../components/spacer/Spacer';
-import { ThunderStorm } from '../views/homepage/HomePage.styled';
import { appendBasePath } from '../utils/basePath';
import { TopSection } from '../views/homepage/Top';
import { Accounts } from '../views/homepage/Accounts';
const LoginPage = () => (
<>
- })
- Peers
-
-
-
-
+ <>
+
+ Peers
+
+
+
+
+ setRemovePeer(null)}>
+ {removePeer && (
+ setRemovePeer(null)}
+ publicKey={removePeer.publicKey}
+ peerAlias={removePeer.alias}
+ />
+ )}
+
+
);
};
diff --git a/src/client/src/pages/SettingsPage.tsx b/src/client/src/pages/SettingsPage.tsx
index 8e14274e..1a1b0314 100644
--- a/src/client/src/pages/SettingsPage.tsx
+++ b/src/client/src/pages/SettingsPage.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
import { GridWrapper } from '../components/gridWrapper/GridWrapper';
import { DashboardSettings } from '../views/settings/Dashboard';
import { SingleLine } from '../components/generic/Styled';
@@ -10,15 +9,22 @@ import { Security } from '../views/settings/Security';
import { NetworkInfo } from '../views/home/networkInfo/NetworkInfo';
import { NotificationSettings } from '../views/settings/Notifications';
import { AmbossSettings } from '../views/settings/Amboss';
+import { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
-export const ButtonRow = styled.div`
- width: auto;
- display: flex;
-`;
+export const ButtonRow = ({
+ className,
+ ...props
+}: HTMLAttributes) => (
+
+);
-export const SettingsLine = styled(SingleLine)`
- margin: 8px 0;
-`;
+export const SettingsLine = ({
+ className,
+ ...props
+}: HTMLAttributes) => (
+
-
+
Transactions
{beforeDate}
@@ -236,14 +227,15 @@ const TransactionsView = () => {
value={show}
isClearable={false}
/>
- {
setOpen(p => !p);
}}
>
-
+
+
{open && (
{show.value === 'invoices' ? renderInvoices() : renderPayments()}
{isDisabled ? null : (
- handleClick()}
>
- Fetch More
-
+ {loadingOrRefetching ? (
+
diff --git a/src/client/src/styles/GlobalStyle.ts b/src/client/src/styles/GlobalStyle.ts
deleted file mode 100644
index 70ceced9..00000000
--- a/src/client/src/styles/GlobalStyle.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import { backgroundColor, textColor } from './Themes';
-
-const fontFamily = "'Noto Sans', sans-serif";
-
-export const GlobalStyles = createGlobalStyle`
- @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
- html, body {
- margin: 0;
- padding: 0;
- }
- * {
- font-variant-numeric: tabular-nums;
- font-family: ${fontFamily};
- }
- *, *::after, *::before {
- box-sizing: border-box;
- }
- body {
- background: ${backgroundColor};
- color: ${textColor};
- font-variant-numeric: tabular-nums;
- font-family: ${fontFamily};
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-`;
diff --git a/src/client/src/styles/Themes.ts b/src/client/src/styles/Themes.ts
index 49ae3735..0b931c90 100644
--- a/src/client/src/styles/Themes.ts
+++ b/src/client/src/styles/Themes.ts
@@ -1,5 +1,3 @@
-import theme from 'styled-theming';
-
export const themeColors = {
white: '#fff',
grey: '#f5f6f9',
@@ -41,249 +39,11 @@ export const fontColors = {
black: '#212735',
};
-export const mediaDimensions = {
- mobile: 700,
-};
-export const mediaWidths = {
- mobile: `max-width: ${mediaDimensions.mobile}px`,
-};
-
-// ---------------------------------------
-// APP COLORS
-// ---------------------------------------
-export const backgroundColor = theme('mode', {
- light: themeColors.grey,
- dark: themeColors.blue5,
-});
-
-export const textColor = theme('mode', {
- light: fontColors.black,
- dark: fontColors.white,
-});
-
export const textColorMap: { [key: string]: string } = {
light: fontColors.black,
dark: fontColors.white,
};
-export const inverseTextColor = theme('mode', {
- light: fontColors.white,
- dark: fontColors.black,
-});
-
-export const burgerColor = theme('mode', {
- light: themeColors.white,
- dark: themeColors.blue6,
-});
-
-export const burgerRowColor = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue4,
-});
-
-export const linkHighlight = theme('mode', {
- light: fontColors.blue3,
- dark: fontColors.blue3,
-});
-
-export const separationColor = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.black,
-});
-
-export const unSelectedNavButton = theme('mode', {
- light: 'grey',
- dark: 'grey',
-});
-
-export const buttonBorderColor = theme('mode', {
- light: '#d9d9d9',
- dark: '#2e3245',
-});
-
-// ---------------------------------------
-// HOMEPAGE COLORS
-// ---------------------------------------
-export const headerColor = theme('mode', {
- light: themeColors.blue7,
- dark: themeColors.blue7,
-});
-
-export const headerTextColor = theme('mode', {
- light: fontColors.white,
- dark: fontColors.white,
-});
-
-export const homeCompatibleColor = theme('mode', {
- light: themeColors.blue5,
- dark: themeColors.blue5,
-});
-
-// ---------------------------------------
-// CARD COLORS
-// ---------------------------------------
-export const cardColor = theme('mode', {
- light: themeColors.white,
- dark: themeColors.blue6,
-});
-
-export const subCardColor = theme('mode', {
- light: themeColors.white,
- dark: themeColors.blue7,
-});
-
-export const cardBorderColor = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue4,
-});
-
-// ---------------------------------------
-// CHAT COLORS
-// ---------------------------------------
-export const chatSubCardColor = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue7,
-});
-
-export const chatBubbleColor = theme('mode', {
- light: themeColors.blue2,
- dark: themeColors.blue2,
-});
-
-export const chatSentBubbleColor = theme('mode', {
- light: themeColors.blue3,
- dark: themeColors.blue3,
-});
-
-// ---------------------------------------
-// BUTTON COLORS
-// ---------------------------------------
-export const colorButtonBackground = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue7,
-});
-
-export const colorButtonBorder = theme('mode', {
- light: themeColors.blue3,
- dark: themeColors.blue3,
-});
-
-export const colorButtonBorderTwo = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue7,
-});
-
-export const disabledButtonBackground = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue7,
-});
-
-export const disabledButtonBorder = theme('mode', {
- light: themeColors.grey,
- dark: themeColors.blue6,
-});
-
-export const disabledTextColor = theme('mode', {
- light: fontColors.grey7,
- dark: fontColors.grey8,
-});
-
-export const hoverTextColor = theme('mode', {
- light: fontColors.white,
- dark: fontColors.white,
-});
-
-// ---------------------------------------
-// MULTI BUTTON COLORS
-// ---------------------------------------
-export const multiButtonColor = theme('mode', {
- light: themeColors.grey2,
- dark: themeColors.blue7,
-});
-
-export const multiSelectColor = theme('mode', {
- light: fontColors.black,
- dark: fontColors.white,
-});
-
-// ---------------------------------------
-// NAVIGATION COLORS
-// ---------------------------------------
-export const navBackgroundColor = theme('mode', {
- light: themeColors.white,
- dark: themeColors.blue7,
-});
-
-export const navTextColor = theme('mode', {
- light: fontColors.black,
- dark: fontColors.white,
-});
-
-// ---------------------------------------
-// INPUT COLORS
-// ---------------------------------------
-export const inputBackgroundColor = theme('mode', {
- light: themeColors.grey,
- dark: themeColors.blue5,
-});
-
-export const inputBorderColor = theme('mode', {
- light: themeColors.grey3,
- dark: themeColors.grey8,
-});
-
-// ---------------------------------------
-// SLIDER COLORS
-// ---------------------------------------
-export const sliderBackgroundColor = theme('mode', {
- light: themeColors.grey3,
- dark: themeColors.grey8,
-});
-
-export const sliderThumbColor = theme('mode', {
- light: themeColors.grey8,
- dark: 'white',
-});
-
-// ---------------------------------------
-// ICON COLORS
-// ---------------------------------------
-export const iconButtonHover = theme('mode', {
- light: themeColors.blue3,
- dark: themeColors.grey,
-});
-
-export const smallLinkColor = theme('mode', {
- light: '#9254de',
- dark: '#adc6ff',
-});
-
-// ---------------------------------------
-// PROGRESS BAR COLORS
-// ---------------------------------------
-export const progressBackground = theme('mode', {
- light: themeColors.grey3,
- dark: themeColors.black,
-});
-
-// ---------------------------------------
-// SELECT COLORS
-// ---------------------------------------
-export const selectColors = {
- smallBackground: theme('mode', {
- light: 'rgba(255, 255, 255, 0.7)',
- dark: 'rgba(0, 0, 0, 0.2)',
- }),
-};
-
-// ---------------------------------------
-// CHART COLORS
-// ---------------------------------------
-export const chartLinkColor = theme('mode', {
- light: '#595959',
- dark: '#8c8c8c',
-});
-
export const chartAxisColor: { [key: string]: string } = {
light: '#1b1c22',
dark: 'white',
@@ -299,13 +59,11 @@ export const chartBarColor: { [key: string]: string } = {
dark: chartColors.purple,
};
-// ---------------------------------------
-// Flow Report Bar Colors
-// ---------------------------------------
export const flowBarColor: { [key: string]: string } = {
light: chartColors.orange2,
dark: chartColors.orange2,
};
+
export const flowBarColor2: { [key: string]: string } = {
light: chartColors.darkyellow,
dark: chartColors.darkyellow,
diff --git a/src/client/src/styles/globals.css b/src/client/src/styles/globals.css
index dcb9aa85..3d00a15f 100644
--- a/src/client/src/styles/globals.css
+++ b/src/client/src/styles/globals.css
@@ -119,8 +119,13 @@
@layer base {
* {
@apply border-border outline-ring/50;
+ font-variant-numeric: tabular-nums;
}
body {
@apply bg-background text-foreground;
+ font-family: 'Noto Sans', sans-serif;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
}
\ No newline at end of file
diff --git a/src/client/src/utils/chat.ts b/src/client/src/utils/chat.ts
deleted file mode 100644
index 6eb341bb..00000000
--- a/src/client/src/utils/chat.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { sortBy, groupBy } from 'lodash';
-import { Message } from '../graphql/types';
-
-export const separateBySender = (chats: Message[]) => {
- return groupBy(chats, 'sender');
-};
-
-export const getSenders = (
- bySender: ReturnType
-): Message[] => {
- const senders: Message[] = [];
- for (const key in bySender) {
- if (Object.prototype.hasOwnProperty.call(bySender, key)) {
- const messages = bySender[key];
- const sorted: Message[] = sortBy(messages, 'date').reverse();
-
- if (sorted.length > 0) {
- const chat = sorted[0];
- if (chat?.sender) {
- senders.push(chat);
- }
- }
- }
- }
- return senders;
-};
-
-export const getSubMessage = (
- contentType: string | null,
- message: string | null,
- tokens: number | null,
- isSent: boolean
-): string => {
- if (!contentType) return '';
- if (!message && !tokens) return '';
- switch (contentType) {
- case 'payment':
- if (isSent) {
- return `Sent ${tokens} sats`;
- }
- return `Received ${tokens} sats`;
- case 'paymentrequest':
- if (isSent) {
- return `You requested ${tokens} sats`;
- }
- return `Requested ${tokens} sats from you`;
- default:
- if (message) return message;
- return '';
- }
-};
diff --git a/src/client/src/utils/error.tsx b/src/client/src/utils/error.tsx
index 5edb9bc9..840902c7 100644
--- a/src/client/src/utils/error.tsx
+++ b/src/client/src/utils/error.tsx
@@ -1,5 +1,4 @@
import { ReactNode } from 'react';
-import styled from 'styled-components';
import { ApolloError } from '@apollo/client';
const getMessage = (error: string) => {
@@ -26,17 +25,6 @@ const getMessage = (error: string) => {
}
};
-const ErrorLine = styled.div`
- padding: 4px 0;
-
- -ms-word-break: break-all;
- word-break: break-all;
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
-`;
-
export const getErrorContent = (error: ApolloError): JSX.Element => {
const errors = error.graphQLErrors.map(x => x.message);
@@ -47,7 +35,11 @@ export const getErrorContent = (error: ApolloError): JSX.Element => {
return (
- sats
-
+ sats
);
}
@@ -108,7 +99,7 @@ export const getValue = ({
) : (
<>
{fiatFormatted}
- {symbol}
+ {symbol}
);
};
diff --git a/src/client/src/views/amboss/Backups.tsx b/src/client/src/views/amboss/Backups.tsx
index 0abd9af6..9c74b045 100644
--- a/src/client/src/views/amboss/Backups.tsx
+++ b/src/client/src/views/amboss/Backups.tsx
@@ -1,4 +1,5 @@
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
import {
Card,
CardWithTitle,
@@ -26,15 +27,14 @@ const PushBackup = () => {
return (
Push Backup to Amboss
- backup()}
- loading={loading}
>
- Push
-
+ {loading ?
);
};
@@ -106,17 +106,20 @@ export const Backups = () => {
? 'By disabling automatic backups to Amboss, ThunderHub will no longer push encrypted backups.'
: 'By enabling automatic backups to Amboss, ThunderHub will automatically push an encrypted version of your static channel backups (SCB) whenever there is a change that needs backing up.'}
-
toggle({ variables: { field: ConfigFields.Backups } })
}
>
- {isEnabled ? 'Disable' : 'Enable'}
-
+ {loading || toggleLoading ? (
+
diff --git a/src/client/src/views/amboss/Balances.tsx b/src/client/src/views/amboss/Balances.tsx
index e7bcfa9e..a2f84e10 100644
--- a/src/client/src/views/amboss/Balances.tsx
+++ b/src/client/src/views/amboss/Balances.tsx
@@ -1,5 +1,6 @@
import toast from 'react-hot-toast';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
import {
Card,
CardWithTitle,
@@ -29,23 +30,28 @@ export const Balances = () => {
private_channels_push_enabled = false,
} = data?.getConfigState || {};
+ const isLoading = loading || toggleLoading;
+
return (
Balances
Push Onchain
-
toggle({ variables: { field: ConfigFields.OnchainPush } })
}
>
- {onchain_push_enabled ? 'Disable' : 'Enable'}
-
+ {isLoading ? (
+
Push your onchain balance to Amboss to get historical reports.
@@ -53,17 +59,20 @@ export const Balances = () => {
Push Public Channels
-
toggle({ variables: { field: ConfigFields.ChannelsPush } })
}
>
- {channels_push_enabled ? 'Disable' : 'Enable'}
-
+ {isLoading ? (
+
Push your public channel balances to get historical reports.
@@ -71,17 +80,20 @@ export const Balances = () => {
Push Private Channels
-
toggle({ variables: { field: ConfigFields.PrivateChannelsPush } })
}
>
- {private_channels_push_enabled ? 'Disable' : 'Enable'}
-
+ {isLoading ? (
+
Push your private channel balances to get historical reports.
diff --git a/src/client/src/views/amboss/Billboard.tsx b/src/client/src/views/amboss/Billboard.tsx
index 3c278301..938f164b 100644
--- a/src/client/src/views/amboss/Billboard.tsx
+++ b/src/client/src/views/amboss/Billboard.tsx
@@ -1,10 +1,4 @@
-import { ChatInput } from '../chat/ChatInput';
-import {
- Card,
- CardWithTitle,
- SubTitle,
- Separation,
-} from '../../components/generic/Styled';
+import { Card, CardWithTitle, SubTitle } from '../../components/generic/Styled';
import { Text } from '../../components/typography/Styled';
import { Link } from '../../components/link/Link';
@@ -24,13 +18,6 @@ export const Billboard = () => {
a message and it will appear on their home page! Messages are sorted
by amount of sats sent and how recent it was.
-
);
diff --git a/src/client/src/views/amboss/Healthchecks.tsx b/src/client/src/views/amboss/Healthchecks.tsx
index 98fa04f4..a4a58f7d 100644
--- a/src/client/src/views/amboss/Healthchecks.tsx
+++ b/src/client/src/views/amboss/Healthchecks.tsx
@@ -1,5 +1,6 @@
import toast from 'react-hot-toast';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
import {
Card,
CardWithTitle,
@@ -23,6 +24,7 @@ export const Healthchecks = () => {
});
const isEnabled = data?.getConfigState.healthcheck_ping_state || false;
+ const isLoading = loading || toggleLoading;
return (
@@ -34,17 +36,20 @@ export const Healthchecks = () => {
? 'By disabling automatic healthcheck pings to Amboss, ThunderHub will no longer ping Amboss.'
: 'By enabling automatic healthcheck pings to Amboss, ThunderHub will consistently ping Amboss to show the liveliness of your node.'}
-
toggle({ variables: { field: ConfigFields.Healthchecks } })
}
>
- {isEnabled ? 'Disable' : 'Enable'}
-
+ {isLoading ? (
+
diff --git a/src/client/src/views/amboss/LoginButton.tsx b/src/client/src/views/amboss/LoginButton.tsx
index 612049c8..b98be448 100644
--- a/src/client/src/views/amboss/LoginButton.tsx
+++ b/src/client/src/views/amboss/LoginButton.tsx
@@ -3,7 +3,7 @@ import toast from 'react-hot-toast';
import { useAmbossUser } from '../../hooks/UseAmbossUser';
import { useLoginAmbossMutation } from '../../graphql/mutations/__generated__/loginAmboss.generated';
import { useGetAmbossLoginTokenLazyQuery } from '../../graphql/queries/__generated__/getAmbossLoginToken.generated';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
export const AmbossLoginButton = () => {
const { user } = useAmbossUser();
@@ -32,8 +32,7 @@ export const AmbossLoginButton = () => {
if (!user) {
return (
- {
if (loading) return;
login();
@@ -41,13 +40,12 @@ export const AmbossLoginButton = () => {
disabled={loading}
>
{loading ? 'Loading...' : 'Login'}
-
+
);
}
return (
- {
if (tokenLoading) return;
getToken();
@@ -55,6 +53,6 @@ export const AmbossLoginButton = () => {
disabled={tokenLoading}
>
{tokenLoading ? 'Loading...' : 'Go To'}
-
+
);
};
diff --git a/src/client/src/views/channels/channels/ChannelManage.tsx b/src/client/src/views/channels/channels/ChannelManage.tsx
index 85ca2130..3410c049 100644
--- a/src/client/src/views/channels/channels/ChannelManage.tsx
+++ b/src/client/src/views/channels/channels/ChannelManage.tsx
@@ -6,8 +6,8 @@ import {
SingleLine,
} from '../../../components/generic/Styled';
import { DetailsChange } from '../../../components/details/detailsChange';
-import { X } from 'lucide-react';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
+import { X, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
import { OpenChannel } from '../../home/liquidity/OpenChannel';
export const ChannelManage = () => {
@@ -16,29 +16,37 @@ export const ChannelManage = () => {
const renderOpenButton = () => (
Open Channel
-
setOpenWindow(prev => (prev === 'none' ? 'open' : 'none'))
}
>
- {openWindow === 'open' ?
+ {openWindow === 'open' ? (
+
);
const renderDetailsButton = () => (
Change Channel Details
-
setOpenWindow(prev => (prev === 'none' ? 'details' : 'none'))
}
>
- {openWindow === 'details' ?
+ {openWindow === 'details' ? (
+
);
diff --git a/src/client/src/views/channels/channels/ChannelTable.tsx b/src/client/src/views/channels/channels/ChannelTable.tsx
index 4b19ca84..8a08a541 100644
--- a/src/client/src/views/channels/channels/ChannelTable.tsx
+++ b/src/client/src/views/channels/channels/ChannelTable.tsx
@@ -9,7 +9,6 @@ import {
X,
} from 'lucide-react';
import toast from 'react-hot-toast';
-import styled from 'styled-components';
import { BalanceBars } from '../../../components/balance';
import {
getChannelLink,
@@ -31,27 +30,6 @@ import { ChannelDetails } from './ChannelDetails';
import { defaultHiddenColumns } from './helpers';
import { VisibilityState } from '@tanstack/react-table';
-const S = {
- link: styled.span`
- display: flex;
- align-items: center;
- justify-content: center;
- `,
- button: styled.button`
- background: none;
- color: inherit;
- border: none;
- padding: 0;
- font: inherit;
- cursor: pointer;
- outline: inherit;
-
- :hover {
- color: ${chartColors.orange};
- }
- `,
-};
-
const getBar = (top: number, bottom: number) => {
const percent = (top / bottom) * 100;
return Math.min(percent, 100);
@@ -159,7 +137,8 @@ export const ChannelTable = () => {
const actions = {
editAction: (
-
setChannel({
channel: c.id,
@@ -169,10 +148,11 @@ export const ChannelTable = () => {
}
>
+
),
closeAction: (
-
setChannel({
channel: c.id,
@@ -182,7 +162,7 @@ export const ChannelTable = () => {
}
>
+
),
};
@@ -270,10 +250,10 @@ export const ChannelTable = () => {
),
viewAction: (
-
+
View
+
),
};
diff --git a/src/client/src/views/chat/Chat.styled.ts b/src/client/src/views/chat/Chat.styled.ts
deleted file mode 100644
index aafed858..00000000
--- a/src/client/src/views/chat/Chat.styled.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-import styled, { css } from 'styled-components';
-import { ThemeSet } from 'styled-theming';
-import { DarkSubTitle, SubCard, Card } from '../../components/generic/Styled';
-import {
- cardBorderColor,
- subCardColor,
- mediaWidths,
- textColor,
- chatSubCardColor,
- colorButtonBorder,
- chatBubbleColor,
- chatSentBubbleColor,
- chartColors,
- backgroundColor,
- unSelectedNavButton,
-} from '../../styles/Themes';
-
-export const ChatColumn = styled.div`
- display: flex;
- flex-direction: column-reverse;
- justify-content: flex-start;
- align-items: flex-start;
- overflow-y: auto;
- overflow-x: hidden;
- border: 1px solid ${cardBorderColor};
- margin: 0 0 16px;
- padding-bottom: 8px;
- height: 100%;
- min-height: 0;
- background-color: ${subCardColor};
-
- @media (${mediaWidths.mobile}) {
- border: none;
- background-color: ${backgroundColor};
- }
-`;
-
-export const ChatColumnWithInput = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- position: relative;
-`;
-
-export const ChatStyledLine = styled.div<{ rightAlign: boolean }>`
- padding: 0 8px;
- font-size: 14px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 100%;
- align-items: flex-start;
- ${({ rightAlign }) =>
- rightAlign &&
- css`
- align-items: flex-end;
- `};
-
- @media (${mediaWidths.mobile}) {
- padding: 0;
- }
-`;
-
-export const ChatDaySeparator = styled.div<{ isLast?: boolean }>`
- width: 100%;
- font-size: 14px;
- text-align: center;
- padding: ${({ isLast }) => (isLast ? '32px 0 8px' : '8px 0')};
-
- @media (${mediaWidths.mobile}) {
- margin: 8px 0;
- }
-`;
-
-export const ChatStyledDark = styled(DarkSubTitle)`
- font-size: 12px;
- margin: 0;
- white-space: nowrap;
-`;
-
-interface ChatStyledMessageProps {
- bubbleColor: string | ThemeSet;
-}
-
-export const ChatStyledMessage = styled.div`
- margin: 0;
- position: relative;
- background-color: ${({ bubbleColor }) => bubbleColor || chatBubbleColor};
- color: white;
- max-width: 60%;
- padding: 12px 16px;
- border-radius: 8px;
-
- @media (${mediaWidths.mobile}) {
- max-width: 80%;
- margin: 0;
- }
-`;
-
-export const ChatContactColumn = styled.div<{ hide?: boolean }>`
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- width: 30%;
- margin-right: 16px;
-
- @media (${mediaWidths.mobile}) {
- width: 100%;
- background-color: ${backgroundColor};
- ${({ hide }) => hide && 'display: none;'}
- }
-`;
-
-export const ChatStyledStart = styled.div`
- display: flex;
- flex-direction: column;
- width: 100%;
-
- @media (${mediaWidths.mobile}) {
- background-color: ${backgroundColor};
- }
-`;
-
-export const ChatTitle = styled.div`
- width: 100%;
- font-weight: bolder;
- text-align: center;
- color: ${textColor};
- font-size: 24px;
-
- @media (${mediaWidths.mobile}) {
- font-size: 16px;
- }
-`;
-
-export const ChatSubCard = styled(SubCard)<{ open?: boolean }>`
- background: ${chatSubCardColor};
- cursor: pointer;
- width: 100%;
-
- &:hover {
- box-shadow: unset;
- ${({ open }) =>
- !open &&
- css`
- background-color: ${colorButtonBorder};
- color: white;
- `}
- }
-
- @media (${mediaWidths.mobile}) {
- margin: 16px 0 -4px;
- }
-`;
-
-export const ChatStyledSubTitle = styled.h4`
- font-weight: 500;
-`;
-
-export const ChatBoxAlias = styled.div`
- position: absolute;
- display: flex;
- justify-content: center;
- width: 100%;
- font-size: 18px;
- margin-top: 8px;
-
- @media (${mediaWidths.mobile}) {
- display: none;
- }
-`;
-
-export const ChatBoxTopAlias = styled.div`
- background: ${subCardColor};
- padding: 4px 16px;
- border-radius: 8px;
-`;
-
-export const ChatFeePaid = styled.div`
- margin-right: 8px;
- font-size: 12px;
- color: ${chartColors.orange2};
-`;
-
-export const ChatFeeDateColumn = styled.div`
- display: flex;
- justify-content: center;
- margin: 0 0 8px;
-`;
-
-export const ChatCard = styled(Card)`
- @media (${mediaWidths.mobile}) {
- border: none;
- }
-`;
-
-export const ChatBubbleMessage = styled.div`
- display: flex;
- align-items: center;
-
- -ms-word-break: break-all;
- word-break: break-all;
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
-`;
-
-export const StatusChatDot = styled.div`
- position: absolute;
- top: -3px;
- right: 3px;
-`;
-
-export const ChatSendButton = styled.div`
- margin: 0 0 0 16px;
- padding: 8px 16px;
- border-radius: 8px;
- background: ${chatSentBubbleColor};
- white-space: nowrap;
- cursor: pointer;
-
- :hover {
- color: ${chatSentBubbleColor};
- background: white;
- }
-`;
-
-export const ChatContactDate = styled.div`
- font-size: 12px;
- color: ${unSelectedNavButton};
-`;
-
-export const ChatSubText = styled(ChatContactDate)`
- overflow: hidden;
- max-height: 34px;
-`;
diff --git a/src/client/src/views/chat/ChatBox.tsx b/src/client/src/views/chat/ChatBox.tsx
deleted file mode 100644
index 9a81bed2..00000000
--- a/src/client/src/views/chat/ChatBox.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Fragment } from 'react';
-import { sortBy } from 'lodash';
-import { Message } from '../../graphql/types';
-import { SentChatProps } from '../../context/ChatContext';
-import {
- getMessageDate,
- getIsDifferentDay,
- getDayChange,
-} from '../../components/generic/helpers';
-import { useConfigState } from '../../context/ConfigContext';
-import { ChatInput } from './ChatInput';
-import {
- ChatStyledLine,
- ChatStyledDark,
- ChatColumnWithInput,
- ChatColumn,
- ChatDaySeparator,
- ChatBoxAlias,
- ChatFeePaid,
- ChatFeeDateColumn,
- ChatBoxTopAlias,
-} from './Chat.styled';
-import { ChatBubble } from './ChatBubble';
-
-export const MessageCard = ({
- message,
- key,
-}: {
- message: SentChatProps;
- key?: string;
-}) => {
- const { hideFee, hideNonVerified } = useConfigState();
- if (!message.message && message.contentType === 'text') {
- return null;
- }
- const { date, isSent, feePaid, verified } = message;
-
- if (hideNonVerified && !verified && !isSent) return null;
-
- return (
-
-
- {!hideFee && isSent && feePaid && feePaid > 0 ? (
- {`${feePaid} sats`}
- ) : null}
-
- {getMessageDate(date)}
-
-
-
- );
-};
-
-interface ChatBoxProps {
- messages: Message[];
- alias: string;
-}
-
-export const ChatBox = ({ messages, alias }: ChatBoxProps) => {
- if (!messages) {
- return null;
- }
-
- const sorted = sortBy(messages, 'date').reverse();
-
- return (
-
-
- {sorted.map((message, index: number) => {
- const nextDate =
- index < sorted.length - 1 ? sorted[index + 1].date : message.date;
- const isDifferent = getIsDifferentDay(message.date, nextDate);
- return (
-
-
- {getDayChange(message.date)}
-
- )}
- {index === sorted.length - 1 && (
-
- {getDayChange(message.date)}
-
- )}
-
- );
- })}
-
-
- {alias}
-
-
- );
-};
diff --git a/src/client/src/views/chat/ChatBubble.tsx b/src/client/src/views/chat/ChatBubble.tsx
deleted file mode 100644
index c84a855d..00000000
--- a/src/client/src/views/chat/ChatBubble.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { useEffect } from 'react';
-import { ThemeSet } from 'styled-theming';
-import toast from 'react-hot-toast';
-import { Circle } from 'lucide-react';
-import { Loader2 } from 'lucide-react';
-import { useSendMessageMutation } from '../../graphql/mutations/__generated__/sendMessage.generated';
-import { useMutationResultWithReset } from '../../hooks/UseMutationWithReset';
-import { useAccount } from '../../hooks/UseAccount';
-import {
- chatBubbleColor,
- chatSentBubbleColor,
- chartColors,
-} from '../../styles/Themes';
-import { getErrorContent } from '../../utils/error';
-import {
- useChatState,
- useChatDispatch,
- SentChatProps,
-} from '../../context/ChatContext';
-import { useConfigState } from '../../context/ConfigContext';
-import { usePriceState } from '../../context/PriceContext';
-import { getPrice } from '../../components/price/Price';
-import {
- ChatStyledMessage,
- ChatBubbleMessage,
- StatusChatDot,
- ChatSendButton,
-} from './Chat.styled';
-
-interface SendButtonProps {
- amount: number;
-}
-
-const SendButton = ({ amount }: SendButtonProps) => {
- const { maxFee } = useConfigState();
- const { sender } = useChatState();
- const dispatch = useChatDispatch();
-
- const account = useAccount();
-
- const [sendMessage, { loading, data: _data }] = useSendMessageMutation({
- onError: error => toast.error(getErrorContent(error)),
- });
- const [data, resetMutationResult] = useMutationResultWithReset(_data);
-
- useEffect(() => {
- if (!loading && data && data?.sendMessage) {
- dispatch({
- type: 'newChat',
- newChat: {
- id: '',
- verified: true,
- date: new Date().toISOString(),
- message: 'payment',
- sender,
- isSent: true,
- feePaid: data.sendMessage - 1,
- contentType: 'payment',
- tokens: amount,
- },
- userId: account?.id || '',
- sender,
- });
- resetMutationResult();
- }
- }, [loading, data, amount, dispatch, sender, account, resetMutationResult]);
-
- return (
-
- sendMessage({
- variables: {
- message: 'payment',
- messageType: 'payment',
- publicKey: sender,
- tokens: amount,
- maxFee,
- },
- })
- }
- >
- {loading ? (
-
- );
-};
-
-interface ChatBubbleProps {
- message: SentChatProps;
-}
-
-export const ChatBubble = ({ message }: ChatBubbleProps) => {
- const { currency, displayValues } = useConfigState();
- const priceContext = usePriceState();
- const format = getPrice(currency, displayValues, priceContext);
-
- const {
- contentType,
- message: chatMessage = '',
- isSent,
- verified,
- tokens = 0,
- } = message;
-
- let color: ThemeSet | string = chatBubbleColor;
- let textMessage: JSX.Element | string = chatMessage || '';
- let dotColor = '';
- let showButton = false;
- let amount = 0;
-
- if (isSent) {
- color = chatSentBubbleColor;
- if (contentType === 'payment') {
- dotColor = chartColors.red;
- if (chatMessage === 'payment') {
- textMessage = (
- <>
- {'You sent '}
- {format({ amount: tokens })}
-
- );
- } else {
- textMessage = (
- <>
- {chatMessage}
- {'('}
- {format({ amount: tokens })}
- {')'}
-
- );
- }
- } else if (contentType === 'paymentrequest') {
- if (chatMessage === 'paymentrequest') {
- textMessage = (
- <>
- {'You requested '}
- {format({ amount: tokens })}
-
- );
- } else {
- textMessage = (
- <>
- {chatMessage}
- {'('}
- {format({ amount: tokens })}
- {')'}
-
- );
- }
- }
- } else {
- if (contentType === 'payment') {
- dotColor = chartColors.green;
- if (chatMessage === 'payment' || !chatMessage) {
- textMessage = (
- <>
- {'You received '}
- {format({ amount: tokens })}
-
- );
- } else {
- textMessage = (
- <>
- {chatMessage}
- {'('}
- {format({ amount: tokens })}
- {')'}
-
- );
- }
- } else if (contentType === 'paymentrequest') {
- showButton = true;
- const messageSplit = chatMessage?.split(',') || [''];
- amount = verified
- ? Number(messageSplit[0])
- : Math.abs(Number(messageSplit[0]) / 1000); // This is only for Juggernaut compatibility.
- const finalMessage = [...messageSplit];
- finalMessage.shift();
- if (messageSplit[1] === 'paymentrequest' || !messageSplit[1]) {
- textMessage = (
- <>
- {format({ amount: tokens })}
- {' requested from you'}
-
- );
- } else {
- textMessage = (
- <>
- {finalMessage.join(' ')}
- {'('}
- {format({ amount: tokens })}
- {')'}
-
- );
- }
- }
- }
-
- if (contentType === 'paymentrequest') {
- dotColor = 'white';
- }
-
- if (!verified && !isSent) {
- color = 'black';
- }
-
- return (
-
-
- {textMessage}
- {showButton &&
- {dotColor !== '' && (
-
-
- )}
-
- );
-};
diff --git a/src/client/src/views/chat/ChatInput.tsx b/src/client/src/views/chat/ChatInput.tsx
deleted file mode 100644
index e7063496..00000000
--- a/src/client/src/views/chat/ChatInput.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState, useEffect } from 'react';
-import toast from 'react-hot-toast';
-import { useSendMessageMutation } from '../../graphql/mutations/__generated__/sendMessage.generated';
-import { useMutationResultWithReset } from '../../hooks/UseMutationWithReset';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { useAccount } from '../../hooks/UseAccount';
-import { Input } from '../../components/input';
-import { SingleLine } from '../../components/generic/Styled';
-import { useChatState, useChatDispatch } from '../../context/ChatContext';
-import { getErrorContent } from '../../utils/error';
-import { useConfigState } from '../../context/ConfigContext';
-import { handleMessage } from './helpers/chatHelpers';
-
-export const ChatInput = ({
- alias,
- sender: customSender,
- withMargin,
- callback,
-}: {
- alias: string;
- sender?: string;
- withMargin?: string;
- callback?: () => void;
-}) => {
- const [message, setMessage] = useState('');
-
- const { maxFee } = useConfigState();
- const { sender } = useChatState();
- const dispatch = useChatDispatch();
-
- const account = useAccount();
-
- const [sendMessage, { loading, data: _data }] = useSendMessageMutation({
- onError: error => toast.error(getErrorContent(error)),
- });
- const [data, resetMutationResult] = useMutationResultWithReset(_data);
-
- const [formattedMessage, contentType, tokens, canSend] =
- handleMessage(message);
-
- useEffect(() => {
- if (!loading && account && data?.sendMessage) {
- setMessage('');
- dispatch({
- type: 'newChat',
- newChat: {
- id: '',
- verified: true,
- date: new Date().toISOString(),
- message: formattedMessage,
- sender: customSender || sender,
- isSent: true,
- feePaid: data.sendMessage - 1,
- contentType,
- tokens,
- },
- userId: account.id,
- sender: customSender || sender,
- });
- resetMutationResult();
- if (callback) callback();
- }
- }, [
- loading,
- data,
- formattedMessage,
- customSender,
- sender,
- contentType,
- tokens,
- account,
- dispatch,
- resetMutationResult,
- callback,
- alias,
- ]);
-
- const handleClick = () => {
- if (loading || message === '' || !canSend) return;
- sendMessage({
- variables: {
- message: formattedMessage,
- messageType: contentType,
- publicKey: customSender || sender,
- ...(tokens > 0 && { tokens }),
- maxFee,
- },
- });
- };
-
- return (
-
- setMessage(e.target.value)}
- onEnter={() => handleClick()}
- />
- handleClick()}
- >
- Send
-
-
- );
-};
diff --git a/src/client/src/views/chat/ChatStart.tsx b/src/client/src/views/chat/ChatStart.tsx
deleted file mode 100644
index d42eee13..00000000
--- a/src/client/src/views/chat/ChatStart.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { useState } from 'react';
-import { X, ChevronRight } from 'lucide-react';
-import { useGetPeersQuery } from '../../graphql/queries/__generated__/getPeers.generated';
-import { Peer } from '../../graphql/types';
-import { Input } from '../../components/input';
-import {
- SubCard,
- ResponsiveSingle,
- SubTitle,
- SingleLine,
- Separation,
-} from '../../components/generic/Styled';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { ChatInput } from './ChatInput';
-import {
- ChatStyledStart,
- ChatTitle,
- ChatSubCard,
- ChatStyledSubTitle,
-} from './Chat.styled';
-
-interface PeerProps {
- peer: Peer;
- index: number;
- indexOpen: number;
- setIndexOpen: (index: number) => void;
- callback?: () => void;
-}
-
-const PeerChatCard = ({
- peer,
- index,
- setIndexOpen,
- indexOpen,
- callback,
-}: PeerProps) => {
- const { partner_node_info, public_key } = peer;
-
- const alias = partner_node_info?.node?.alias || 'Unknown';
-
- const handleClick = () => {
- if (indexOpen === index) {
- setIndexOpen(0);
- } else {
- setIndexOpen(index);
- }
- };
-
- const renderDetails = () => {
- return (
- <>
-
-
-
- {alias || public_key.slice(0, 6)}
-
-
- {index === indexOpen ? (
-
-
- {index === indexOpen && renderDetails()}
-
- );
-};
-
-export const ChatStart = ({
- noTitle,
- callback,
-}: {
- noTitle?: boolean;
- callback: () => void;
-}) => {
- const [indexOpen, setIndexOpen] = useState(0);
- const [willSend, setWillSend] = useState(false);
- const [publicKey, setPublicKey] = useState('');
-
- const { loading, data } = useGetPeersQuery();
-
- const renderPeers = () => {
- if (!loading && data?.getPeers) {
- return (
- <>
- Chat with a current peer
- {data.getPeers.map((peer, index) => (
-
-
- {`Message to: ${publicKey.slice(0, 6)}...`}
- setWillSend(p => !p)}>
-
-
-
- );
-
- return (
-
- {!noTitle && Start your first chat }
- Chat with a new peer
- {!willSend && (
-
- setPublicKey(e.target.value)}
- />
- setWillSend(p => !p)}
- arrow={willSend ? false : true}
- disabled={publicKey === ''}
- >
- {willSend ?
-
- )}
- {willSend && renderStartChat(publicKey)}
- {renderPeers()}
-
- );
-};
diff --git a/src/client/src/views/chat/Contacts.tsx b/src/client/src/views/chat/Contacts.tsx
deleted file mode 100644
index e6d78776..00000000
--- a/src/client/src/views/chat/Contacts.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Fragment, useState, useEffect } from 'react';
-import { useGetNodeLazyQuery } from '../../graphql/queries/__generated__/getNode.generated';
-import { useAccount } from '../../hooks/UseAccount';
-import {
- useChatDispatch,
- useChatState,
- SentChatProps,
-} from '../../context/ChatContext';
-import { SingleLine } from '../../components/generic/Styled';
-import { getMessageDate } from '../../components/generic/helpers';
-import { getSubMessage } from '../../utils/chat';
-import {
- ChatContactColumn,
- ChatSubCard,
- ChatContactDate,
- ChatSubText,
-} from './Chat.styled';
-
-export const ContactCard = ({
- contact,
- user,
- setUser,
- setName,
-}: {
- contact: SentChatProps;
- user: string;
- setUser: (name: string) => void;
- setName: (name: string) => void;
-}) => {
- const {
- alias = '',
- sender: contactSender = '',
- message = '',
- contentType = '',
- tokens = 0,
- isSent = false,
- date = '',
- } = contact;
- const { sender } = useChatState();
- const dispatch = useChatDispatch();
- const [nodeName, setNodeName] = useState(alias || '');
-
- const account = useAccount();
-
- const [getInfo, { data, loading }] = useGetNodeLazyQuery({
- variables: { publicKey: contactSender || '' },
- });
-
- useEffect(() => {
- if (!alias) {
- getInfo();
- }
-
- if (alias && contactSender && contactSender.indexOf(sender) >= 0 && !user) {
- setName(alias);
- }
- }, [alias, getInfo, contactSender, setName, sender, user]);
-
- useEffect(() => {
- if (loading || !data?.getNode) return;
-
- const alias = data.getNode?.node?.alias;
- const name =
- alias && alias !== '' ? alias : (contactSender || '-').substring(0, 6);
- setNodeName(name);
-
- if (!user && contactSender && contactSender.indexOf(sender) >= 0) {
- setName(name);
- }
- }, [data, loading, contactSender, sender, setName, user]);
-
- return (
- {
- if (contactSender) {
- dispatch({
- type: 'changeActive',
- sender: contactSender,
- userId: account?.id || '',
- });
- }
- setUser(nodeName);
- }}
- >
-
- {nodeName}
- {getMessageDate(date, 'dd/MM/yy')}
-
-
- {getSubMessage(contentType, message, tokens, isSent)}
-
-
- );
-};
-
-interface ContactsProps {
- user: string;
- hide?: boolean;
- contacts: SentChatProps[];
- setUser: (name: string) => void;
- setName: (name: string) => void;
-}
-
-export const Contacts = ({
- contacts,
- user,
- setUser,
- setName,
- hide,
-}: ContactsProps) => {
- return (
-
- {contacts.map((contact, index) => {
- if (contact) {
- return (
-
-
- );
- }
- })}
- setUser('New Chat')}>
-
-
- );
-};
diff --git a/src/client/src/views/chat/helpers/chatHelpers.test.ts b/src/client/src/views/chat/helpers/chatHelpers.test.ts
deleted file mode 100644
index 741d07fd..00000000
--- a/src/client/src/views/chat/helpers/chatHelpers.test.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { handleMessage } from './chatHelpers';
-
-describe('handleMessage function', () => {
- describe('should handle payment', () => {
- test('/pay', () => {
- const testMessage = '/pay';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeFalsy();
- expect(message).toBe('');
- expect(type).toBe('');
- expect(amount).toBe(0);
- });
-
- test('/pay 532', () => {
- const testMessage = '/pay 532';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('payment');
- expect(type).toBe('payment');
- expect(amount).toBe(532);
- });
-
- test('/pay500', () => {
- const testMessage = '/pay500';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('payment');
- expect(type).toBe('payment');
- expect(amount).toBe(500);
- });
-
- test('/pay 123 A small donation for you!', () => {
- const testMessage = '/pay 123 A small donation for you!';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('A small donation for you!');
- expect(type).toBe('payment');
- expect(amount).toBe(123);
- });
-
- test('/pay 12$3 hi!', () => {
- const testMessage = '/pay 12$3 hi!';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeFalsy();
- expect(message).toBe('');
- expect(type).toBe('');
- expect(amount).toBe(0);
- });
- });
-
- describe('should handle payment requests', () => {
- test('/request', () => {
- const testMessage = '/request';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeFalsy();
- expect(message).toBe('');
- expect(type).toBe('');
- expect(amount).toBe(0);
- });
-
- test('/request 1450', () => {
- const testMessage = '/request 1450';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('paymentrequest');
- expect(type).toBe('paymentrequest');
- expect(amount).toBe(1450);
- });
-
- test('/request834', () => {
- const testMessage = '/request834';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('paymentrequest');
- expect(type).toBe('paymentrequest');
- expect(amount).toBe(834);
- });
-
- test('/request 4567 For the Beers!🍻', () => {
- const testMessage = '/request 4567 For the Beers!🍻';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('For the Beers!🍻');
- expect(type).toBe('paymentrequest');
- expect(amount).toBe(4567);
- });
-
- test('/request 45.67 For the Beers!🍻', () => {
- const testMessage = '/pay 12$3 hi!';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeFalsy();
- expect(message).toBe('');
- expect(type).toBe('');
- expect(amount).toBe(0);
- });
- });
- describe('should handle normal messages', () => {
- test('Hey! Hows it going Mr. ThunderHub?', () => {
- const testMessage = 'Hey! Hows it going Mr. ThunderHub?';
- const [message, type, amount, canSend] = handleMessage(testMessage);
-
- expect(canSend).toBeTruthy();
- expect(message).toBe('Hey! Hows it going Mr. ThunderHub?');
- expect(type).toBe('');
- expect(amount).toBe(0);
- });
- });
-});
diff --git a/src/client/src/views/chat/helpers/chatHelpers.ts b/src/client/src/views/chat/helpers/chatHelpers.ts
deleted file mode 100644
index d7b17b88..00000000
--- a/src/client/src/views/chat/helpers/chatHelpers.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-const formatMessage = (message: string, type: string): [string, number] => {
- const newMessage = message.replace(type, '').trim();
- const split = newMessage.split(' ').filter(t => t);
-
- let amount = 0;
-
- if (split.length > 0) {
- amount = Number(split[0]);
- } else {
- return ['', 0];
- }
-
- if (isNaN(amount)) {
- return ['', 0];
- }
-
- return [newMessage.replace(`${amount}`, '').trim(), amount];
-};
-
-export const handleMessage = (
- message: string
-): [string, string, number, boolean] => {
- if (message.indexOf('/pay') === 0) {
- const [finalMessage, amount] = formatMessage(message, '/pay');
-
- if (finalMessage === '' && amount === 0) {
- return ['', '', 0, false];
- }
-
- return [finalMessage || 'payment', 'payment', amount, true];
- }
- if (message.indexOf('/request') === 0) {
- const [finalMessage, amount] = formatMessage(message, '/request');
-
- if (finalMessage === '' && amount === 0) {
- return ['', '', 0, false];
- }
- return [finalMessage || 'paymentrequest', 'paymentrequest', amount, true];
- }
- return [message, '', 0, true];
-};
diff --git a/src/client/src/views/dashboard/index.tsx b/src/client/src/views/dashboard/index.tsx
index cb4d4706..d9ad1c8c 100644
--- a/src/client/src/views/dashboard/index.tsx
+++ b/src/client/src/views/dashboard/index.tsx
@@ -1,50 +1,18 @@
import { Layouts, Responsive as ResponsiveGridLayout } from 'react-grid-layout';
-import styled, { css } from 'styled-components';
import { defaultGrid } from '../../utils/gridConstants';
import { useLocalStorage } from '../../hooks/UseLocalStorage';
import { LoadingCard } from '../../components/loading/LoadingCard';
import { useRef } from 'react';
import useElementSize from '../../hooks/UseElementSize';
import { Card, SubTitle } from '../../components/generic/Styled';
-import { textColor } from '../../styles/Themes';
import { Link } from '../../components/link/Link';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
import { useDashDispatch, useDashState } from '../../context/DashContext';
import Modal from '../../components/modal/ReactModal';
import { getWidgets } from './widgets/helpers';
import { DashboardModal } from './modal';
-const S = {
- styles: styled.div`
- .react-resizable-handle::after {
- border-bottom: 2px solid ${textColor};
- border-right: 2px solid ${textColor};
- }
- `,
- card: styled(Card)<{ widgetColor?: string }>`
- display: flex;
- justify-content: center;
- align-items: center;
-
- border-radius: 4px;
- padding: 8px;
- ${({ widgetColor }) => css`
- border-top: 2px solid #${widgetColor};
- `}
- `,
- gridWrapper: styled.div`
- width: 100%;
- `,
- fill: styled.div`
- height: 80vh;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- `,
-};
-
export type StoredWidget = {
id: number;
};
@@ -75,12 +43,14 @@ const Dashboard = () => {
if (!widgets.length) {
return (
-
+
No Widgets Enabled!
- Settings
+
-
+
);
}
@@ -90,7 +60,7 @@ const Dashboard = () => {
}
return (
<>
-
+
{
onLayoutChange={handleChange}
>
{widgets.map(w => (
-
+
+
))}
-
+
dispatch({ type: 'openModal', modalType: '' })}
@@ -119,7 +94,11 @@ const Dashboard = () => {
);
};
- return {renderContent()} ;
+ return (
+ {
const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees();
@@ -33,8 +25,8 @@ export const MempoolWidget = () => {
];
return (
-
+
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/balances.tsx b/src/client/src/views/dashboard/widgets/lightning/balances.tsx
index 4006e74e..795a844f 100644
--- a/src/client/src/views/dashboard/widgets/lightning/balances.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/balances.tsx
@@ -1,31 +1,7 @@
import { Price } from '../../../../components/price/Price';
import { useNodeBalances } from '../../../../hooks/UseNodeBalances';
-import { unSelectedNavButton } from '../../../../styles/Themes';
-import styled from 'styled-components';
import Big from 'big.js';
-const S = {
- wrapper: styled.div`
- overflow: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
- `,
- total: styled.h2`
- margin: 0;
- `,
- smallTotal: styled.h3`
- margin: 0;
- `,
- pending: styled.div`
- color: ${unSelectedNavButton};
- font-size: 14px;
- `,
-};
-
export const TotalBalance = () => {
const { onchain, lightning } = useNodeBalances();
@@ -33,17 +9,17 @@ export const TotalBalance = () => {
const pending = new Big(onchain.pending).add(lightning.pending).toString();
return (
-
- Total Balance
-
+
- Channel Balance
-
+
- Chain Balance
-
+
+
- Forwards
-
+
- Forwards
+
+
+
);
}
if (!data?.getForwards.list.length) {
return (
-
+
No forwards for this period.
-
+
);
}
const forwards = getByTime(data.getForwards.list, days.value);
return (
-
+
+
({
Forward: f[type.value] || 0,
@@ -117,7 +90,7 @@ export const ForwardsGraph = () => {
title="Forwards Report"
colorRange={[chartColors.purple]}
/>
-
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/info.tsx b/src/client/src/views/dashboard/widgets/lightning/info.tsx
index 3e55346b..3c0991b9 100644
--- a/src/client/src/views/dashboard/widgets/lightning/info.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/info.tsx
@@ -1,29 +1,13 @@
import { useGetLiquidReportQuery } from '../../../../graphql/queries/__generated__/getChannelReport.generated';
import { useNodeInfo } from '../../../../hooks/UseNodeInfo';
-import styled from 'styled-components';
-
-const S = {
- wrapper: styled.div`
- overflow: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
- `,
- title: styled.h2`
- margin: 0;
- `,
-};
export const AliasWidget = () => {
const { alias } = useNodeInfo();
return (
-
- {alias}
-
+
- -
-
+
- {`${balance}%`}
-
+
- Invoices
+
+
+
);
}
if (!invoicesByDate.length) {
return (
-
+
No invoices for this period.
-
+
);
}
return (
-
+
+
{
return {
@@ -118,7 +91,7 @@ export const InvoicesGraph = () => {
title="Invoices"
colorRange={[chartColors.orange2]}
/>
-
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/liquidityGraph.tsx b/src/client/src/views/dashboard/widgets/lightning/liquidityGraph.tsx
index ce1ce036..84827331 100644
--- a/src/client/src/views/dashboard/widgets/lightning/liquidityGraph.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/liquidityGraph.tsx
@@ -2,50 +2,29 @@ import { HorizontalBarChart } from '../../../../components/chart/HorizontalBarCh
import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { useGetLiquidReportQuery } from '../../../../graphql/queries/__generated__/getChannelReport.generated';
import { chartColors } from '../../../../styles/Themes';
-import styled from 'styled-components';
-
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 60px 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 100%;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
-};
export const LiquidityGraph = () => {
const { data, loading } = useGetLiquidReportQuery({ errorPolicy: 'ignore' });
if (loading) {
return (
-
- Liquidity
-
+
- Liquidity
- Unable to get liquidity data.
-
+
+
dispatch({ type: 'openModal', modalType: 'payInvoice' })}
>
Pay Invoice
-
+
);
};
@@ -18,14 +19,15 @@ export const CreateInvoice = () => {
const dispatch = useDashDispatch();
return (
-
dispatch({ type: 'openModal', modalType: 'createInvoice' })
}
>
Create Invoice
-
+
);
};
@@ -33,12 +35,13 @@ export const SendOnChain = () => {
const dispatch = useDashDispatch();
return (
- dispatch({ type: 'openModal', modalType: 'sendChain' })}
>
Send Bitcoin
-
+
);
};
@@ -46,12 +49,13 @@ export const ReceiveOnChain = () => {
const dispatch = useDashDispatch();
return (
- dispatch({ type: 'openModal', modalType: 'receiveChain' })}
>
Receive Bitcoin
-
+
);
};
@@ -59,11 +63,12 @@ export const OpenChannel = () => {
const dispatch = useDashDispatch();
return (
- dispatch({ type: 'openModal', modalType: 'openChannel' })}
>
Open Channel
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/paymentGraph.tsx b/src/client/src/views/dashboard/widgets/lightning/paymentGraph.tsx
index 14d99199..2203f0f9 100644
--- a/src/client/src/views/dashboard/widgets/lightning/paymentGraph.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/paymentGraph.tsx
@@ -2,43 +2,11 @@ import { useMemo, useState } from 'react';
import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { SmallSelectWithValue } from '../../../../components/select';
import { chartColors } from '../../../../styles/Themes';
-import styled from 'styled-components';
import { getByTime } from '../helpers';
import { useGetPaymentsQuery } from '../../../../graphql/queries/__generated__/getPayments.generated';
import { differenceInDays } from 'date-fns';
import { BarChart } from '../../../../components/chart/BarChart';
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 100%;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
-
const typeOptions = [
{ label: 'Count', value: 'count' },
{ label: 'Amount', value: 'tokens' },
@@ -70,8 +38,8 @@ export const PaymentsGraph = () => {
}, [data]);
const Header = () => (
-
- Payments
+
+
+
);
}
if (!paymentsByDate.length) {
return (
-
+
No payments for this period.
-
+
);
}
return (
-
+
+
{
return {
@@ -117,7 +90,7 @@ export const PaymentsGraph = () => {
title="Payments"
dataKey="Payments"
/>
-
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/link/index.tsx b/src/client/src/views/dashboard/widgets/link/index.tsx
index 08c99985..68cadf6d 100644
--- a/src/client/src/views/dashboard/widgets/link/index.tsx
+++ b/src/client/src/views/dashboard/widgets/link/index.tsx
@@ -1,50 +1,50 @@
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { Link } from '../../../../components/link/Link';
-import styled from 'styled-components';
-
-const S = {
- wrapper: styled.div`
- width: 100%;
- overflow: hidden;
- `,
-};
export const DashSettingsLink = () => {
return (
-
+
+
+
+
-
+
-
+
-
+
+
);
};
@@ -49,25 +41,28 @@ export const CurrencySetting = () => {
dispatch({ type: 'change', currency });
return (
-
-
+
-
+
-
+
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/util/Convert.tsx b/src/client/src/views/dashboard/widgets/util/Convert.tsx
index bb12c6c9..cc4841d8 100644
--- a/src/client/src/views/dashboard/widgets/util/Convert.tsx
+++ b/src/client/src/views/dashboard/widgets/util/Convert.tsx
@@ -1,46 +1,7 @@
import { useState } from 'react';
-import { Input } from '../../../../components/input';
+import { Input } from '@/components/ui/input';
import { SelectWithValue } from '../../../../components/select';
import { usePriceState } from '../../../../context/PriceContext';
-import styled from 'styled-components';
-
-const S = {
- row: styled.div`
- margin: 8px 0;
- display: grid;
- grid-gap: 8px;
- grid-template-columns: 2fr 4fr 100px;
- align-items: center;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 0 4px;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
export const ConvertWidget = () => {
const { prices, dontShow } = usePriceState();
@@ -60,9 +21,9 @@ export const ConvertWidget = () => {
if (dontShow) {
return (
-
+
-
+
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/util/Sign.tsx b/src/client/src/views/dashboard/widgets/util/Sign.tsx
index a3eb9e20..217943a7 100644
--- a/src/client/src/views/dashboard/widgets/util/Sign.tsx
+++ b/src/client/src/views/dashboard/widgets/util/Sign.tsx
@@ -1,27 +1,20 @@
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { useDashDispatch } from '../../../../context/DashContext';
-import styled from 'styled-components';
-
-const S = {
- wrapper: styled.div`
- height: 100%;
- width: 100%;
- `,
-};
export const SignWidget = () => {
const dispatch = useDashDispatch();
return (
-
-
+
-
+
+
);
};
diff --git a/src/client/src/views/forwards/forwardSankey.tsx b/src/client/src/views/forwards/forwardSankey.tsx
index 60de4b5d..d5297b41 100644
--- a/src/client/src/views/forwards/forwardSankey.tsx
+++ b/src/client/src/views/forwards/forwardSankey.tsx
@@ -1,23 +1,11 @@
import { FC, useMemo } from 'react';
import toast from 'react-hot-toast';
import { getErrorContent } from '../../utils/error';
-import styled from 'styled-components';
-import { mediaWidths } from '../../styles/Themes';
import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated';
import { Sankey, SankeyData } from '../../components/sankey';
import { orderBy, reduce, uniq } from 'lodash';
import { AggregatedRouteForwards } from '../../graphql/types';
-const Wrapper = styled.div<{ $height: number }>`
- height: ${props => props.$height}px;
- max-height: ${props => props.$height}px;
- width: 100%;
-
- @media (${mediaWidths.mobile}) {
- height: ${props => props.$height}px;
- }
-`;
-
const getValue = (item: AggregatedRouteForwards, type: string) => {
switch (type) {
case 'count':
@@ -79,8 +67,11 @@ export const ForwardSankey: FC<{
const graphHeight = 800 + 16 * sankeyData.links.length;
return (
-
+
('none');
@@ -32,7 +17,7 @@ export const AccountButtons = () => {
case 'send_ln':
return setState('none')} />;
case 'receive_ln':
- return setState('none')} />;
case 'receive_chain':
@@ -44,9 +29,9 @@ export const AccountButtons = () => {
return (
<>
-
-
+
-
+
-
+
-
+
-
+
+
{state !== 'none' && {renderContent()} }
);
diff --git a/src/client/src/views/home/account/AccountInfo.tsx b/src/client/src/views/home/account/AccountInfo.tsx
index a4edcd8d..b5df3404 100644
--- a/src/client/src/views/home/account/AccountInfo.tsx
+++ b/src/client/src/views/home/account/AccountInfo.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
import { Zap, Anchor, Pocket } from 'lucide-react';
import { useNodeBalances } from '../../../hooks/UseNodeBalances';
import Big from 'big.js';
@@ -13,33 +12,20 @@ import {
SingleLine,
} from '../../../components/generic/Styled';
import { Price } from '../../../components/price/Price';
-import { mediaWidths } from '../../../styles/Themes';
-const S = {
- grid: styled.div`
- display: grid;
- grid-gap: 16px;
- grid-template-columns: 1fr 1fr;
-
- @media (${mediaWidths.mobile}) {
- display: block;
- }
- `,
-};
-
-const Tile = styled.div<{ startTile?: boolean }>`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: ${({ startTile }) => (startTile ? 'flex-start' : 'flex-end')};
-
- @media (${mediaWidths.mobile}) {
- width: 100%;
- flex-direction: row;
- align-items: flex-end;
- margin: 0 0 8px;
- }
-`;
+const Tile = ({
+ children,
+ startTile,
+}: {
+ children: React.ReactNode;
+ startTile?: boolean;
+}) => (
+
-
+
@@ -136,7 +122,7 @@ export const AccountInfo = () => {
{renderLine('Force Closures',
-
+
);
};
diff --git a/src/client/src/views/home/account/createInvoice/CreateInvoice.tsx b/src/client/src/views/home/account/createInvoice/CreateInvoice.tsx
index 984484ac..746db6e6 100644
--- a/src/client/src/views/home/account/createInvoice/CreateInvoice.tsx
+++ b/src/client/src/views/home/account/createInvoice/CreateInvoice.tsx
@@ -1,66 +1,20 @@
import { useState, useEffect } from 'react';
-import { Copy, CheckCircle } from 'lucide-react';
-import styled from 'styled-components';
+import { Copy, CheckCircle, ChevronRight, Loader2 } from 'lucide-react';
import toast from 'react-hot-toast';
import { QRCodeSVG } from 'qrcode.react';
import { useCreateInvoiceMutation } from '../../../../graphql/mutations/__generated__/createInvoice.generated';
-import { Title } from '../../../../layouts/footer/Footer.styled';
import { Link } from '../../../../components/link/Link';
-import { InputWithDeco } from '../../../../components/input/InputWithDeco';
+import { Input } from '@/components/ui/input';
+import { Price } from '../../../../components/price/Price';
import { formatSeconds } from '../../../../utils/helpers';
-import {
- MultiButton,
- SingleButton,
-} from '../../../../components/buttons/multiButton/MultiButton';
+import { cn } from '@/lib/utils';
import { getErrorContent } from '../../../../utils/error';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
-import { mediaWidths, chartColors } from '../../../../styles/Themes';
+import { Button } from '@/components/ui/button';
+import { chartColors } from '../../../../styles/Themes';
import { InvoiceStatus } from './InvoiceStatus';
import { Timer } from './Timer';
-const Responsive = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- @media (${mediaWidths.mobile}) {
- flex-direction: column;
- }
-`;
-
-const Center = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-const WrapRequest = styled.div`
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
- margin: 24px;
- font-size: 14px;
-`;
-
-const QRWrapper = styled.div`
- width: 280px;
- height: 280px;
- margin: 16px;
- background: white;
- padding: 16px;
-`;
-
-const Column = styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-`;
-
-export const CreateInvoiceCard = ({ color }: { color: string }) => {
+export const CreateInvoiceCard = () => {
const [amount, setAmount] = useState(0);
const [seconds, setSeconds] = useState(0);
const [description, setDescription] = useState('');
@@ -84,36 +38,37 @@ export const CreateInvoiceCard = ({ color }: { color: string }) => {
if (invoiceStatus === 'paid') {
return (
-
+
Paid
-
+
);
}
if (invoiceStatus === 'not_paid' || invoiceStatus === 'timeout') {
return (
-
-
+ <div className="flex justify-center items-center">
+ <div className="font-extrabold text-white">
Check the status of this invoice in the
<Link to={'/transactions'}> Transactions </Link>
view
-
-
+
+
);
}
const renderQr = () => (
<>
+
setInvoiceStatus(status)} />
-
+
- {request}
-
+
);
@@ -137,59 +92,88 @@ export const CreateInvoiceCard = ({ color }: { color: string }) => {
const renderContent = () => (
<>
- setAmount(Number(value))}
- color={color}
- onEnter={() => handleEnter()}
- />
- setDescription(value)}
- color={color}
- onEnter={() => handleEnter()}
- />
- setSeconds(Number(value))}
- customAmount={formatSeconds(seconds) || ''}
- color={color}
- onEnter={() => handleEnter()}
- />
-
-
-
+
+ = ({ initialMinute, initialSeconds }) => {
});
return minutes === 0 && seconds === 0 ? null : (
-
+
{`Will disappear in ${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}
-
+
);
};
diff --git a/src/client/src/views/home/account/pay/KeysendModal.tsx b/src/client/src/views/home/account/pay/KeysendModal.tsx
index e4b98765..6499cf89 100644
--- a/src/client/src/views/home/account/pay/KeysendModal.tsx
+++ b/src/client/src/views/home/account/pay/KeysendModal.tsx
@@ -1,11 +1,12 @@
import { FC, useState } from 'react';
-import styled from 'styled-components';
import { useGetNodeQuery } from '../../../../graphql/queries/__generated__/getNode.generated';
import { useKeysendMutation } from '../../../../graphql/mutations/__generated__/keysend.generated';
import toast from 'react-hot-toast';
import { getErrorContent } from '../../../../utils/error';
-import { InputWithDeco } from '../../../../components/input/InputWithDeco';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Input } from '@/components/ui/input';
+import { Price } from '../../../../components/price/Price';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
import {
SingleLine,
SubTitle,
@@ -14,13 +15,25 @@ import {
} from '../../../../components/generic/Styled';
import { LoadingCard } from '../../../../components/loading/LoadingCard';
-export const WithMargin = styled.div`
- margin-right: 4px;
-`;
+export const WithMargin = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+ ) => (
+ = ({ publicKey, handleReset }) => {
setTokens(Number(amount))}
- onEnter={() => handleEnter()}
- />
+
Remember keysend is an experimental feature. Use at your own risk.
- handleEnter()}
- loading={keysendLoading}
disabled={loading || keysendLoading}
- withMargin={'16px 0 0'}
- fullWidth={true}
+ style={{ margin: '16px 0 0' }}
+ className="w-full"
>
- Send
-
+ {keysendLoading ? (
+ = ({ predefinedRequest, payCallback }) => {
<>
{!predefinedRequest && (
<>
- setRequest(value)}
- onEnter={() => handleEnter()}
- inputMaxWidth={'300px'}
- />
+ setFee(Math.max(1, Number(value)))}
- onEnter={() => handleEnter()}
- />
- setPaths(Math.max(1, Number(value)))}
- onEnter={() => handleEnter()}
- />
+ = ({ predefinedRequest, payCallback }) => {
/>
handleEnter()}
>
- Pay
-
+ {loading ?
- Public Key
+
setRequest(e.target.value)}
- onEnter={() => handleClick()}
+ onKeyDown={e => e.key === 'Enter' && handleClick()}
/>
- handleClick()}
- arrow={true}
>
- Decode
-
+ Decode
);
default:
@@ -74,19 +68,27 @@ export const PayCard = ({ setOpen }: { setOpen: () => void }) => {
return (
<>
-
-
- setIsKeysend(true)}>
+ {
return (
<>
{data && data.createAddress ? (
-
-
+
- Donate
-
+ {loading ? void;
};
@@ -43,13 +20,17 @@ export const PreviousAddresses: FC = ({ handleClick }) => {
<>
Previously Used Addresses:
-
+
- setAddress(v)}
- />
-
+
+ {loading ? (
+
= ({ request }) => {
});
if (!callback || !k1 || !uri) {
- return Missing information from LN Service ;
+ return (
+ = ({ request }) => {
<>
Channel
{`Request from ${callbackUrl.host}`}
+ {
channelLnUrl({ variables: { uri, k1, callback } });
}}
>
- {`Initiate Channel Request`}
-
+ {loading ? (
+ = ({ request, defaultAmount, title }) => {
});
if (!callback) {
- return Missing information from LN Service ;
+ return (
+ = ({ request, defaultAmount, title }) => {
<>
Success
{(description || url) && {description} }
+ {description && (
+
+ = ({ request, defaultAmount, title }) => {
<>
Success
{message && {message} }
+ {message && = ({ request, defaultAmount, title }) => {
<>
Success
{(description || ciphertext || iv) && {description} }
+ {description && (
+ = ({ request, defaultAmount, title }) => {
{`Pay to ${callbackUrl.host}`}
+ = ({ request, defaultAmount, title }) => {
{!isSame && renderLine('Min Pay Amount (sats)', min)}
{
- setComment(value.substring(0, commentAllowed));
- }}
- />
+ setAmount(Number(value))}
- />
+ {
if (min && amount < min) {
toast.error('Amount is below the minimum');
@@ -137,8 +148,12 @@ export const LnPay: FC = ({ request, defaultAmount, title }) => {
}
}}
>
- {`Pay (${amount} sats)`}
-
+ {loading ? (
+ = ({ request }) => {
}, [statusLoading, statusData]);
if (!callback) {
- return Missing information from LN Service ;
+ return (
+ = ({ request }) => {
const renderContent = () => {
if (error) {
return (
-
+
Failed to check status of the withdrawal. Please check the status in
the
Transactions
view
-
+
);
}
if (invoiceStatus === 'paid') {
return (
-
+
Paid
-
+
);
}
if (invoiceStatus === 'not_paid' || invoiceStatus === 'timeout') {
return (
-
+
Check the status of this invoice in the
<Link to={'/transactions'}> Transactions </Link>
view
-
+
);
}
if (statusLoading) {
@@ -121,27 +114,39 @@ export const LnWithdraw: FC = ({ request }) => {
{!isSame && renderLine('Max Withdraw Amount', max)}
{!isSame && renderLine('Min Withdraw Amount', min)}
setDescription(value)}
- />
- {!isSame && (
- setAmount(Number(value))}
+ {
if (min && amount < min) {
toast.error('Amount is below the minimum');
@@ -154,8 +159,12 @@ export const LnWithdraw: FC = ({ request }) => {
}
}}
>
- {`Withdraw (${amount} sats)`}
-
+ {loading || statusLoading ? (
+ = ({ request }) => {
<>
Withdraw
{`Withdraw from ${callbackUrl.host}`}
+
- setLnUrl(value)}
- onEnter={() => handleDecode()}
- />
-
+
+ {loading ? (
+
setModalOpen(false)}>
= ({ url, type }) => {
<>
Login
{`Login to ${fullUrl.host}`} ;
-
+
+
);
};
diff --git a/src/client/src/views/home/reports/flow/TransactionGraph.tsx b/src/client/src/views/home/reports/flow/TransactionGraph.tsx
index fc06abcf..76d2e60b 100644
--- a/src/client/src/views/home/reports/flow/TransactionGraph.tsx
+++ b/src/client/src/views/home/reports/flow/TransactionGraph.tsx
@@ -2,43 +2,11 @@ import { FC, useMemo } from 'react';
import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { chartColors } from '../../../../styles/Themes';
import { getByTime } from '../../../../views/dashboard/widgets/helpers';
-import styled from 'styled-components';
import { useGetInvoicesQuery } from '../../../../graphql/queries/__generated__/getInvoices.generated';
import { differenceInDays } from 'date-fns';
import { useGetPaymentsQuery } from '../../../../graphql/queries/__generated__/getPayments.generated';
import { BarChart } from '../../../../components/chart/BarChart';
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 60px 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 300px;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
-
type TransactionsGraphProps = {
showPay: boolean;
type: string;
@@ -111,11 +79,11 @@ export const TransactionsGraph: FC = ({
if (loading || paymentsLoading) {
return (
-
-
+ = ({
(showPay && !paymentsData?.getPayments.payments.length)
) {
return (
-
-
+ = ({
const finalColor = showPay ? [chartColors.darkyellow] : [chartColors.orange2];
return (
-
-
+
-
+
Transactions
- setShow((e[0] || options[1]) as any)}
- options={options}
- value={show}
- isClearable={false}
- />
- setType((e[0] || typeOptions[1]) as any)}
- options={typeOptions}
- value={type}
- isClearable={false}
- />
-
+
+
);
};
diff --git a/src/client/src/views/home/reports/forwardReport/ChannelAlias.tsx b/src/client/src/views/home/reports/forwardReport/ChannelAlias.tsx
index 085e1497..8e5b428a 100644
--- a/src/client/src/views/home/reports/forwardReport/ChannelAlias.tsx
+++ b/src/client/src/views/home/reports/forwardReport/ChannelAlias.tsx
@@ -5,15 +5,8 @@ import { useGetClosedChannelsQuery } from '../../../../graphql/queries/__generat
import { themeColors } from '../../../../styles/Themes';
import { Tooltip as ReactTooltip } from 'react-tooltip';
import { Info } from 'lucide-react';
-import styled from 'styled-components';
import { getAliasFromClosedChannels } from './helpers';
-const S = {
- icon: styled.span`
- margin-left: 4px;
- `,
-};
-
export const ChannelAlias: FC<{ id: string }> = ({ id }) => {
const { data: closedChannelData } = useGetClosedChannelsQuery({
skip: !id,
@@ -54,9 +47,9 @@ export const ChannelAlias: FC<{ id: string }> = ({ id }) => {
return (
<>
{closedAlias}
-
+
+
This channel has been closed.
diff --git a/src/client/src/views/home/reports/forwardReport/ForwardChannelReport.tsx b/src/client/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
index 7d5acfce..ce55fab6 100644
--- a/src/client/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
+++ b/src/client/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
@@ -1,11 +1,8 @@
import { useState } from 'react';
import toast from 'react-hot-toast';
import { GitCommit, ArrowDown, ArrowUp } from 'lucide-react';
-import {
- MultiButton,
- SingleButton,
-} from '../../../../components/buttons/multiButton/MultiButton';
-import styled from 'styled-components';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
import { getErrorContent } from '../../../../utils/error';
import { SingleLine, SubTitle } from '../../../../components/generic/Styled';
@@ -17,10 +14,6 @@ type Props = {
days: number;
};
-const Spacing = styled.div`
- margin-bottom: 16px;
-`;
-
export const ForwardChannelsReport = ({ days }: Props) => {
const [type, setType] = useState<'route' | 'incoming' | 'outgoing'>('route');
@@ -54,34 +47,34 @@ export const ForwardChannelsReport = ({ days }: Props) => {
};
const renderTop = (title: string) => (
-
+
{title}
-
-
+
-
+
-
+
-
+
+
-
+
);
const renderTitle = () => {
diff --git a/src/client/src/views/home/reports/forwardReport/ForwardResume.tsx b/src/client/src/views/home/reports/forwardReport/ForwardResume.tsx
index ffd7623f..83aaf807 100644
--- a/src/client/src/views/home/reports/forwardReport/ForwardResume.tsx
+++ b/src/client/src/views/home/reports/forwardReport/ForwardResume.tsx
@@ -1,32 +1,11 @@
import { FC, useMemo } from 'react';
-import styled from 'styled-components';
import { differenceInDays } from 'date-fns';
import { Price } from '../../../../components/price/Price';
-import { mediaWidths } from '../../../../styles/Themes';
import { DarkSubTitle } from '../../../../components/generic/Styled';
import { useGetForwardsListQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
type ArrayType = { fee: number; fee_mtokens: string; tokens: number };
-const S = {
- grid: styled.div`
- display: grid;
- grid-gap: 16px;
- grid-template-columns: 1fr 1fr 1fr 1fr;
-
- @media (${mediaWidths.mobile}) {
- display: block;
- }
- `,
- item: styled.div`
- text-align: center;
-
- @media (${mediaWidths.mobile}) {
- margin: 8px 0;
- }
- `,
-};
-
type TypeOptionProps = {
label: string;
value: string;
@@ -131,23 +110,23 @@ export const ForwardResume: FC = ({ type }) => {
};
return (
-
-
+ = ({ days, type }) => {
if (loading) {
return (
-
-
+
- No forwards for this period.
-
+
-
+ ) => (
+
-
-
- Forward Report
+
+ Forward Report
+
+
setDays((e[0] || options[1]) as any)}
options={options}
@@ -68,8 +59,9 @@ export const ForwardBox = () => {
value={type}
isClearable={false}
/>
-
+
+
diff --git a/src/client/src/views/home/reports/liquidReport/LiquidityGraph.tsx b/src/client/src/views/home/reports/liquidReport/LiquidityGraph.tsx
index afe18276..f3441d5c 100644
--- a/src/client/src/views/home/reports/liquidReport/LiquidityGraph.tsx
+++ b/src/client/src/views/home/reports/liquidReport/LiquidityGraph.tsx
@@ -7,32 +7,8 @@ import {
import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { useGetLiquidReportQuery } from '../../../../graphql/queries/__generated__/getChannelReport.generated';
import { chartColors } from '../../../../styles/Themes';
-import styled from 'styled-components';
-import { WarningText } from '../../../../views/stats/styles';
import { HorizontalBarChart } from '../../../../components/chart/HorizontalBarChart';
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 60px 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 240px;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
-};
-
export const LiquidityGraph = () => {
const { data, loading } = useGetLiquidReportQuery({ errorPolicy: 'ignore' });
@@ -41,11 +17,11 @@ export const LiquidityGraph = () => {
Liquidity Report
-
-
+
);
@@ -56,9 +32,11 @@ export const LiquidityGraph = () => {
Liquidity Report
-
- Unable to get liquidity data.
-
+
);
@@ -94,36 +72,39 @@ export const LiquidityGraph = () => {
Liquidity Report
-
+
Pending HTLCs
{(totalPendingHtlc || 0) >= 300 && (
-
+
You have a high amount of pending HTLCs. Be careful, a channel can
hold a maximum of 483.
-
+
)}
{!totalPendingHtlc ? (
None of your channels have pending HTLCs
) : (
-
+
diff --git a/src/client/src/views/homepage/Accounts.tsx b/src/client/src/views/homepage/Accounts.tsx
index 56314659..0aacb2f1 100644
--- a/src/client/src/views/homepage/Accounts.tsx
+++ b/src/client/src/views/homepage/Accounts.tsx
@@ -1,7 +1,13 @@
import { useState, useEffect } from 'react';
-import styled from 'styled-components';
import toast from 'react-hot-toast';
-import { Lock, Unlock, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+ Lock,
+ Unlock,
+ ChevronDown,
+ ChevronUp,
+ ChevronRight,
+ Loader2,
+} from 'lucide-react';
import { chartColors } from '../../styles/Themes';
import { useNavigate } from 'react-router-dom';
import { Link } from '../../components/link/Link';
@@ -12,7 +18,6 @@ import {
import { LoadingCard } from '../../components/loading/LoadingCard';
import { useLogoutMutation } from '../../graphql/mutations/__generated__/logout.generated';
import { useGetNodeInfoLazyQuery } from '../../graphql/queries/__generated__/getNodeInfo.generated';
-import { Section } from '../../components/section/Section';
import {
Card,
SingleLine,
@@ -20,29 +25,19 @@ import {
Sub4Title,
Separation,
} from '../../components/generic/Styled';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { ConnectTitle, LockPadding } from './HomePage.styled';
+import { Button } from '@/components/ui/button';
+import { cn } from '../../lib/utils';
import { Login } from './Login';
type ServerAccount = GetServerAccountsQuery['getServerAccounts'][0];
-const AccountLine = styled.div`
- margin: 8px 0;
-`;
-
-const DetailsLine = styled.div`
- display: flex;
- align-items: center;
- width: 100%;
- justify-content: space-between;
- cursor: pointer;
-`;
-
const RenderIntro = () => {
const [detailsOpen, setDetailsOpen] = useState(false);
return (
-
- Hi! Welcome to ThunderHub
+
+
-
+
+
{`Login to ${account.name}`}
@@ -65,34 +64,40 @@ export const Login = ({ account }: LoginProps) => {
);
};
diff --git a/src/client/src/views/homepage/Top.tsx b/src/client/src/views/homepage/Top.tsx
index 5c5a0412..d05b4e7b 100644
--- a/src/client/src/views/homepage/Top.tsx
+++ b/src/client/src/views/homepage/Top.tsx
@@ -1,16 +1,14 @@
-import { inverseTextColor } from '../../styles/Themes';
-import { Section } from '../../components/section/Section';
-import { Headline, HomeTitle, HomeText, FullWidth } from './HomePage.styled';
-
export const TopSection = () => (
-
-
- Control the Lightning
-
-
+
+
+
);
const renderAdding = () => (
@@ -55,7 +56,7 @@ export const AddPeer = () => {
Type:
-
+
setUrl(value)}
- placeholder={'public_key@socket'}
- />
+ setKey(value)}
- placeholder={'Public Key'}
- />
- setSocket(value)}
- placeholder={'Socket'}
- />
+
Is Temporary:
-
+
-
addPeer({
variables: { url, publicKey: key, socket, isTemporary: temp },
})
}
- disabled={url === '' && (socket === '' || key === '')}
- withMargin={'16px 0 0'}
- loading={loading}
- arrow={true}
- fullWidth={true}
+ disabled={(url === '' && (socket === '' || key === '')) || loading}
+ style={{ margin: '16px 0 0' }}
+ className="w-full"
>
- Add
-
+ {loading ? (
+
Add Peer
- setIsAdding(prev => !prev)}
>
{isAdding ?
+
{isAdding && renderAdding()}
diff --git a/src/client/src/views/settings/Amboss.tsx b/src/client/src/views/settings/Amboss.tsx
index bea5ef3f..947d35d4 100644
--- a/src/client/src/views/settings/Amboss.tsx
+++ b/src/client/src/views/settings/Amboss.tsx
@@ -1,14 +1,12 @@
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
import {
Card,
CardWithTitle,
SingleLine,
SubTitle,
} from '../../components/generic/Styled';
-import styled from 'styled-components';
import { getErrorContent } from '../../utils/error';
import toast from 'react-hot-toast';
import { useGetConfigStateQuery } from '../../graphql/queries/__generated__/getConfigState.generated';
@@ -17,13 +15,6 @@ import { ConfigFields } from '../../graphql/types';
import { VFC } from 'react';
import { LoadingCard } from '../../components/loading/LoadingCard';
-const NoWrapText = styled.div`
- white-space: nowrap;
- font-size: 14px;
-`;
-
-const InputTitle = styled(NoWrapText)``;
-
const ConfigFieldToggle: VFC<{
title: string;
enabled: boolean;
@@ -36,23 +27,33 @@ const ConfigFieldToggle: VFC<{
return (
- {title}
-
- toggle({ variables: { field } })}
- >
- Yes
-
- toggle({ variables: { field } })}
- >
- No
-
-
+
);
};
diff --git a/src/client/src/views/settings/Chat.tsx b/src/client/src/views/settings/Chat.tsx
index 2ce3d0f6..f9db10dd 100644
--- a/src/client/src/views/settings/Chat.tsx
+++ b/src/client/src/views/settings/Chat.tsx
@@ -6,10 +6,8 @@ import {
} from '../../components/generic/Styled';
import { SettingsLine } from '../../pages/SettingsPage';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import { useConfigState, useConfigDispatch } from '../../context/ConfigContext';
export const ChatSettings = () => {
@@ -27,8 +25,9 @@ export const ChatSettings = () => {
current: boolean,
value: boolean | number
) => (
- {
switch (type) {
case 'fee':
@@ -51,7 +50,7 @@ export const ChatSettings = () => {
}}
>
{title}
-
+
);
return (
@@ -60,31 +59,31 @@ export const ChatSettings = () => {
Fee:
-
+
Non-Verified Messages:
-
+
{'Max Fee (sats):'}
-
+
{'Polling Speed:'}
-
+
diff --git a/src/client/src/views/settings/Danger.tsx b/src/client/src/views/settings/Danger.tsx
index f223897b..8e858de9 100644
--- a/src/client/src/views/settings/Danger.tsx
+++ b/src/client/src/views/settings/Danger.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
import { AlertCircle } from 'lucide-react';
import { useLogoutMutation } from '../../graphql/mutations/__generated__/logout.generated';
import { config } from '../../config/thunderhubConfig';
@@ -11,47 +10,65 @@ import {
Sub4Title,
} from '../../components/generic/Styled';
import { fontColors } from '../../styles/Themes';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { useChatDispatch } from '../../context/ChatContext';
+import { Button } from '@/components/ui/button';
-export const ButtonRow = styled.div`
- width: auto;
- display: flex;
-`;
+export const ButtonRow = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+ ) => (
+
+ {children}
+
+);
-export const SettingsLine = styled(SingleLine)`
- margin: 10px 0;
-`;
+export const CheckboxText = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+ ) => (
+ ) => (
+
Danger Zone
-
+
- Delete chats and settings:
+ Delete settings:
-
+
+
@@ -90,7 +106,7 @@ export const DangerView = () => {
saved in this browser.
-
+
);
};
diff --git a/src/client/src/views/settings/DashPanel.tsx b/src/client/src/views/settings/DashPanel.tsx
index 9d12a959..c1826f4b 100644
--- a/src/client/src/views/settings/DashPanel.tsx
+++ b/src/client/src/views/settings/DashPanel.tsx
@@ -1,21 +1,15 @@
import { groupBy } from 'lodash';
import { Fragment } from 'react';
import { Layouts } from 'react-grid-layout';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
import { Card, SubTitle } from '../../components/generic/Styled';
import { Link } from '../../components/link/Link';
import { useLocalStorage } from '../../hooks/UseLocalStorage';
-import styled from 'styled-components';
import { StoredWidget } from '../dashboard';
import { widgetList } from '../dashboard/widgets/widgetList';
import { WidgetRow } from './WidgetRow';
-const S = {
- subTitle: styled(SubTitle)`
- margin: 32px 0 8px;
- `,
-};
-
export type NormalizedWidgets = {
id: number;
name: string;
@@ -65,7 +59,9 @@ const DashPanel = () => {
return (
- {subKey ? `${key} - ${subKey}` : key}
+
+ {subKey ? `${key} - ${subKey}` : key}
+
{subWidgets.map(w => (
{
});
})}
-
- To Dashboard
-
+
- {
setLayouts({});
setAvailableWidgets([]);
}}
>
Reset Widgets
-
+
);
};
diff --git a/src/client/src/views/settings/Dashboard.tsx b/src/client/src/views/settings/Dashboard.tsx
index 2571bc35..cf4724c1 100644
--- a/src/client/src/views/settings/Dashboard.tsx
+++ b/src/client/src/views/settings/Dashboard.tsx
@@ -1,6 +1,7 @@
import { useNavigate } from 'react-router-dom';
import { SettingsLine } from '../../pages/SettingsPage';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
import {
Card,
CardWithTitle,
@@ -17,12 +18,12 @@ export const DashboardSettings = () => {
Widgets
- navigate('/settings/dashboard')}
>
- Change
-
+ Change
diff --git a/src/client/src/views/settings/Interface.tsx b/src/client/src/views/settings/Interface.tsx
index fdcd63af..2cd43a99 100644
--- a/src/client/src/views/settings/Interface.tsx
+++ b/src/client/src/views/settings/Interface.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
import Modal from '../../components/modal/ReactModal';
import { themeColors } from '../../styles/Themes';
import {
@@ -14,10 +15,7 @@ import {
} from '../../components/generic/Styled';
import { SettingsLine } from '../../pages/SettingsPage';
import { useConfigState, useConfigDispatch } from '../../context/ConfigContext';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { cn } from '@/lib/utils';
import { usePriceState, usePriceDispatch } from '../../context/PriceContext';
export const InterfaceSettings = () => {
@@ -33,8 +31,9 @@ export const InterfaceSettings = () => {
type: string,
current: string
) => (
- {
localStorage.setItem(type, value);
if (type === 'theme') dispatch({ type: 'themeChange', theme: value });
@@ -44,7 +43,7 @@ export const InterfaceSettings = () => {
}}
>
{title}
-
+
);
const handleFiatClick = (fiatCurrency: string) => {
@@ -60,10 +59,7 @@ export const InterfaceSettings = () => {
if (!element || !element.last || !element.symbol) return;
const isCurrent = fiat === key;
cards.push(
-
+
{key}
{`${element.symbol} ${Number(
@@ -71,13 +67,13 @@ export const InterfaceSettings = () => {
).toLocaleString('en-US', {
maximumFractionDigits: 0,
})}`}
- handleFiatClick(key)}
disabled={isCurrent}
- arrow={true}
>
- Select
-
+ Select
);
@@ -94,26 +90,32 @@ export const InterfaceSettings = () => {
Theme
-
+
Currency
-
+
{currency === 'sat' && (
Sat Word Unit
-
+
)}
{currency === 'fiat' && !dontShow && (
@@ -124,9 +126,9 @@ export const InterfaceSettings = () => {
withMargin={'0 0 0 8px'}
>{`(${fiat})`}
- changeFiatSet(true)} arrow={true}>
- Change
-
+
)}
diff --git a/src/client/src/views/settings/Notifications.tsx b/src/client/src/views/settings/Notifications.tsx
index 2f21b52e..4e109584 100644
--- a/src/client/src/views/settings/Notifications.tsx
+++ b/src/client/src/views/settings/Notifications.tsx
@@ -1,27 +1,17 @@
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import {
Card,
CardWithTitle,
SingleLine,
SubTitle,
} from '../../components/generic/Styled';
-import styled from 'styled-components';
import { VFC } from 'react';
import {
useNotificationDispatch,
useNotificationState,
} from '../../context/NotificationContext';
-const NoWrapText = styled.div`
- white-space: nowrap;
- font-size: 14px;
-`;
-
-const InputTitle = styled(NoWrapText)``;
-
const Toggle: VFC<{
title: string;
property: string;
@@ -30,21 +20,23 @@ const Toggle: VFC<{
}> = ({ title, property, value, cbk }) => {
return (
- {title}
-
- {title}
+ {
localStorage.setItem(type, JSON.stringify(value));
dispatch({ type: 'change', [type]: value });
}}
>
{title}
-
+
);
return (
@@ -39,24 +38,30 @@ export const PrivacySettings = () => {
Fetch Bitcoin Fees:
-
+
Fetch Fiat Prices:
-
+
Values:
-
+
diff --git a/src/client/src/views/settings/Security.tsx b/src/client/src/views/settings/Security.tsx
index 255e6e39..85b20dff 100644
--- a/src/client/src/views/settings/Security.tsx
+++ b/src/client/src/views/settings/Security.tsx
@@ -1,7 +1,8 @@
import { FC, useState } from 'react';
-import styled from 'styled-components';
import { SettingsLine } from '../../pages/SettingsPage';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ChevronRight, Loader2 } from 'lucide-react';
import {
Card,
CardWithTitle,
@@ -14,28 +15,10 @@ import { useAccount } from '../../hooks/UseAccount';
import { QRCodeSVG } from 'qrcode.react';
import { LoadingCard } from '../../components/loading/LoadingCard';
import { useRemoveTwofaSecretMutation } from '../../graphql/mutations/__generated__/removeTwofaSecret.generated';
-import { InputWithDeco } from '../../components/input/InputWithDeco';
import toast from 'react-hot-toast';
import { useUpdateTwofaSecretMutation } from '../../graphql/mutations/__generated__/updateTwofaSecret.generated';
import { config } from '../../config/thunderhubConfig';
-const S = {
- QRWrapper: styled.div`
- width: 280px;
- height: 280px;
- margin: 16px;
- background: white;
- padding: 16px;
- `,
- center: styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- `,
-};
-
const Enable: FC<{ callback: () => void }> = ({ callback }) => {
const [token, setToken] = useState('');
const { data, loading, error } = useGetTwofaSecretQuery();
@@ -59,11 +42,19 @@ const Enable: FC<{ callback: () => void }> = ({ callback }) => {
}
if (error?.message) {
- return {error.message} ;
+ return (
+ Unable to get secret to enable 2FA. ;
+ return (
+
-
+ setToken(v)}
- onEnter={handleClick}
- />
-
+
+ {updateLoading ? (
+ setToken(v)}
- onEnter={handleClick}
- />
-
+
+ {loading ? (
+
Disable 2FA
- setEnabled(p => !p)}>
- {enable ? 'Cancel' : 'Disable'}
-
+
{enable ? setEnabled(false)} /> : null}
@@ -171,9 +186,13 @@ export const Security = () => {
<>
Enable 2FA
- setEnabled(p => !p)}>
- {enable ? 'Cancel' : 'Enable'}
-
+
{enable ? setEnabled(false)} /> : null}
diff --git a/src/client/src/views/settings/WidgetRow.tsx b/src/client/src/views/settings/WidgetRow.tsx
index 6c41f436..36e10492 100644
--- a/src/client/src/views/settings/WidgetRow.tsx
+++ b/src/client/src/views/settings/WidgetRow.tsx
@@ -1,21 +1,9 @@
import { FC } from 'react';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import { DarkSubTitle } from '../../components/generic/Styled';
-import styled from 'styled-components';
import { NormalizedWidgets } from './DashPanel';
-const S = {
- line: styled.div`
- margin-bottom: 8px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- `,
-};
-
type WidgetRowParams = {
widget: NormalizedWidgets;
handleAdd: (id: number) => void;
@@ -27,21 +15,23 @@ export const WidgetRow: FC = ({
handleAdd,
handleDelete,
}) => (
-
+
{widget.name}
-
-
+
-
+
-
-
+
+
+
);
diff --git a/src/client/src/views/stats/FeeStats.tsx b/src/client/src/views/stats/FeeStats.tsx
index 6f0b6b87..3876014f 100644
--- a/src/client/src/views/stats/FeeStats.tsx
+++ b/src/client/src/views/stats/FeeStats.tsx
@@ -10,7 +10,7 @@ import { ChannelFeeHealth } from '../../graphql/types';
import { sortBy } from 'lodash';
import { renderLine } from '../../components/generic/helpers';
import { useStatsDispatch } from './context';
-import { ScoreLine, Clickable, WarningText } from './styles';
+import { chartColors } from '../../styles/Themes';
import { StatWrapper } from './Wrapper';
import { getIcon, getFeeMessage, getProgressColor } from './helpers';
@@ -34,11 +34,11 @@ const FeeStatCard = ({
const { score } = stats || {};
return (
-
+
Score
{score}
{getIcon(score)}
-
+
);
};
@@ -52,12 +52,18 @@ const FeeStatCard = ({
return (
<>
+
{message}
-
-
+
+
{baseMessage}
-
+
{renderLine('Fee Rate (ppm):', rate)}
{renderLine('Base Fee (sats):', base)}
@@ -67,12 +73,17 @@ const FeeStatCard = ({
return (
- openSet(open ? 0 : index)}>
+
diff --git a/src/client/src/views/stats/FlowStats.tsx b/src/client/src/views/stats/FlowStats.tsx
index 2bfdd185..83b9c499 100644
--- a/src/client/src/views/stats/FlowStats.tsx
+++ b/src/client/src/views/stats/FlowStats.tsx
@@ -11,7 +11,7 @@ import { sortBy } from 'lodash';
import { renderLine } from '../../components/generic/helpers';
import { ChannelHealth } from '../../graphql/types';
import { useStatsDispatch } from './context';
-import { ScoreLine, Clickable, WarningText } from './styles';
+import { chartColors } from '../../styles/Themes';
import { StatWrapper } from './Wrapper';
import { getIcon, getVolumeMessage, getProgressColor } from './helpers';
@@ -32,9 +32,12 @@ const VolumeStatCard = ({
const renderContent = () => (
<>
+
{message}
-
+
{renderLine('Flow (sats/block):', channel.volumeNormalized)}
{renderLine(
'Average Flow (sats/block):',
@@ -45,16 +48,19 @@ const VolumeStatCard = ({
return (
- openSet(open ? 0 : index)}>
+
diff --git a/src/client/src/views/stats/StatResume.tsx b/src/client/src/views/stats/StatResume.tsx
index 989b574c..619c6211 100644
--- a/src/client/src/views/stats/StatResume.tsx
+++ b/src/client/src/views/stats/StatResume.tsx
@@ -1,37 +1,8 @@
import { FC, ReactNode } from 'react';
-import styled from 'styled-components';
import { DarkSubTitle } from '../../components/generic/Styled';
-import { mediaWidths } from '../../styles/Themes';
import { useStatsState } from './context';
-import { StatsTitle } from './styles';
import { getProgressColor } from './helpers';
-const ProgressRow = styled.div`
- display: flex;
- justify-content: space-around;
- margin: 32px 0;
-
- @media (${mediaWidths.mobile}) {
- margin: 16px 0;
- }
-`;
-
-const ProgressCard = styled.div`
- width: 20%;
-
- @media (${mediaWidths.mobile}) {
- width: 30%;
- }
-`;
-
-const ScoreTitle = styled.div`
- font-size: 32px;
-
- @media (${mediaWidths.mobile}) {
- font-size: 18px;
- }
-`;
-
const SIZE = 200;
const STROKE = 10;
const RADIUS = (SIZE - STROKE) / 2;
@@ -89,36 +60,36 @@ export const StatResume = () => {
return (
<>
- Node Statistics
-
-
+
+
Needs to be monitored for a longer period to give significant
statistics.
-
+
)}
-
+
{message}
-
+
{renderLine('Monitored time:', formatSeconds(channel.monitoredTime))}
{renderLine('Monitored up time:', formatSeconds(channel.monitoredUptime))}
{renderLine(
@@ -48,16 +54,19 @@ const TimeStatCard = ({ channel, open, openSet, index }: TimeStatCardProps) => {
return (
- openSet(open ? 0 : index)}>
+
diff --git a/src/client/src/views/stats/Wrapper.tsx b/src/client/src/views/stats/Wrapper.tsx
index f7d07b1a..1debe58c 100644
--- a/src/client/src/views/stats/Wrapper.tsx
+++ b/src/client/src/views/stats/Wrapper.tsx
@@ -1,7 +1,6 @@
import { FC, ReactNode, useState } from 'react';
import { Card, SubTitle } from '../../components/generic/Styled';
import { ChevronDown, ChevronUp } from 'lucide-react';
-import { StatHeaderLine } from './styles';
type StatWrapperProps = {
title: string;
@@ -13,10 +12,14 @@ export const StatWrapper: FC = ({ children, title }) => {
return (
- openSet(p => !p)}>
+
);
diff --git a/src/client/src/views/stats/styles.tsx b/src/client/src/views/stats/styles.tsx
deleted file mode 100644
index ab7520af..00000000
--- a/src/client/src/views/stats/styles.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled from 'styled-components';
-import { DarkSubTitle } from '../../components/generic/Styled';
-import { chartColors, mediaWidths } from '../../styles/Themes';
-
-export const ScoreLine = styled.div`
- display: flex;
- justify-content: space-between;
- width: 160px;
-
- @media (${mediaWidths.mobile}) {
- margin-top: 8px;
- width: 100%;
- }
-`;
-
-type StatHeaderProps = {
- isOpen?: boolean;
-};
-
-export const StatHeaderLine = styled.div`
- cursor: pointer;
- display: flex;
- padding: 8px 0 16px;
- margin-bottom: ${({ isOpen }) => (isOpen ? 0 : '-8px')};
- justify-content: space-between;
- align-items: center;
-`;
-
-export const StatsTitle = styled.div`
- font-size: 24px;
- width: 100%;
- text-align: center;
-`;
-
-type WarningProps = {
- warningColor?: string;
-};
-
-export const WarningText = styled(DarkSubTitle)`
- width: 100%;
- text-align: center;
- color: ${({ warningColor }) =>
- warningColor ? warningColor : chartColors.orange};
-`;
-
-export const Clickable = styled.div`
- cursor: pointer;
-`;
diff --git a/src/client/src/views/swap/StartSwap.tsx b/src/client/src/views/swap/StartSwap.tsx
index 737508f4..8734a357 100644
--- a/src/client/src/views/swap/StartSwap.tsx
+++ b/src/client/src/views/swap/StartSwap.tsx
@@ -1,8 +1,4 @@
-import { InputWithDeco } from '../../components/input/InputWithDeco';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { cn } from '@/lib/utils';
import {
Card,
DarkSubTitle,
@@ -11,13 +7,12 @@ import {
} from '../../components/generic/Styled';
import { useEffect, useState } from 'react';
import { Slider } from '../../components/slider';
-import { Edit2, X } from 'lucide-react';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import styled from 'styled-components';
-import { mediaWidths } from '../../styles/Themes';
-import { Input } from '../../components/input';
+import { Edit2, X, ChevronRight, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
import { useCreateBoltzReverseSwapMutation } from '../../graphql/mutations/__generated__/createBoltzReverseSwap.generated';
import toast from 'react-hot-toast';
+import { Price } from '../../components/price/Price';
import { getErrorContent } from '../../utils/error';
import { useMutationResultWithReset } from '../../hooks/UseMutationWithReset';
import { useSwapsDispatch } from './SwapContext';
@@ -27,16 +22,6 @@ type StartSwapProps = {
min: number;
};
-const StyledRow = styled.div`
- display: flex;
- width: 100%;
- justify-content: flex-end;
-
- @media (${mediaWidths.mobile}) {
- justify-content: center;
- }
-`;
-
export const StartSwap = ({ max, min }: StartSwapProps) => {
const [amount, setAmount] = useState(min);
const [isCustom, setIsCustom] = useState(false);
@@ -67,11 +52,18 @@ export const StartSwap = ({ max, min }: StartSwapProps) => {
Start Swap
Lightning BTC to BTC
-
-
+ setAddress(value)}
- />
+
getQuote({ variables: { amount, ...(address && { address }) } })
}
- arrow={true}
- withMargin={'16px 0 0'}
- fullWidth={true}
+ style={{ margin: '16px 0 0' }}
+ className="w-full"
>
- Get Quote
-
+ {loading ? (
+
+
+
);
return (
@@ -101,17 +90,26 @@ export const SwapClaim = () => {
{claimType === MEMPOOL && (
<>
+
-
+
+
+
{
'If you set a low fee the swap will take more time if the mempool is congested.'
}
-
-
+
+
{' You can see fee estimates by selecting the "Auto" option above.'}
-
-
+
+ {loading ?
+
Transaction
{renderLine('You send', Pay Swap Invoice
+
+
{`Id: ${swap.id}`}
-
- Ready to Pay {time}
- dispatch({ type: 'open', open: index })}
- arrow={true}
- withMargin={'0 0 0 4px'}
+
);
};
const ErrorComponent = () => (
-
+
{`Id: ${swap.id}`}
- Unable to get status
-
+
);
if (!swap?.id) return null;
@@ -113,28 +82,53 @@ const SwapRow = ({ swap, index }: { swap: EnrichedSwap; index: number }) => {
case INVOICE_EXPIRED:
case EXPIRED:
return (
-
+
{`Id: ${swap.id}`}
- Expired
-
+
);
case REFUNDED:
return (
-
+
{`Id: ${swap.id}`}
- Refunded
-
+
);
case CREATED:
return
+
{`Id: ${swap.id}`}
-
+
-
+ Claim Instantly
+
{`Id: ${swap.id}`}
-
+
-
+ Claim
+
{`Id: ${swap.id}`}
-
+
-
+ Claim
+
{`Id: ${swap.id}`}
-
+
);
}
};
@@ -284,17 +302,22 @@ export const SwapStatus = () => {
Swap History
- refetch()}
- withMargin="0 4px 0 0"
+ style={{ margin: '0 4px 0 0' }}
>
+
diff --git a/src/client/src/views/tools/Tools.styled.tsx b/src/client/src/views/tools/Tools.styled.tsx
deleted file mode 100644
index ba296f2a..00000000
--- a/src/client/src/views/tools/Tools.styled.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-import { ResponsiveLine } from '../../components/generic/Styled';
-
-export const NoWrap = styled.div`
- margin-right: 16px;
- white-space: nowrap;
-`;
-
-export const WrapRequest = styled.div`
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
- margin: 24px;
- font-size: 14px;
-`;
-
-export const Column = styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-`;
-
-export const ToolsResponsiveLine = styled(ResponsiveLine)`
- margin-bottom: 8px;
-`;
diff --git a/src/client/src/views/tools/backups/DownloadBackups.tsx b/src/client/src/views/tools/backups/DownloadBackups.tsx
index 7522bd45..3eba8c53 100644
--- a/src/client/src/views/tools/backups/DownloadBackups.tsx
+++ b/src/client/src/views/tools/backups/DownloadBackups.tsx
@@ -6,7 +6,8 @@ import { useNodeInfo } from '../../../hooks/UseNodeInfo';
import { DarkSubTitle, SingleLine } from '../../../components/generic/Styled';
import { saveToPc } from '../../../utils/helpers';
import { getErrorContent } from '../../../utils/error';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
export const DownloadBackups = () => {
const [getBackups, { data, loading }] = useGetBackupsLazyQuery({
@@ -27,14 +28,18 @@ export const DownloadBackups = () => {
return (
Backup All Channels
- getBackups()}
- loading={loading}
>
- Download
-
+ {loading ? (
+
);
};
diff --git a/src/client/src/views/tools/backups/RecoverFunds.tsx b/src/client/src/views/tools/backups/RecoverFunds.tsx
index 646b07a6..7869f1a0 100644
--- a/src/client/src/views/tools/backups/RecoverFunds.tsx
+++ b/src/client/src/views/tools/backups/RecoverFunds.tsx
@@ -1,12 +1,11 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
-import { X } from 'lucide-react';
+import { X, ChevronRight, Loader2 } from 'lucide-react';
import { useRecoverFundsLazyQuery } from '../../../graphql/queries/__generated__/recoverFunds.generated';
import { getErrorContent } from '../../../utils/error';
import { SingleLine, DarkSubTitle } from '../../../components/generic/Styled';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
-import { Input } from '../../../components/input';
-import { NoWrap } from '../Tools.styled';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
export const RecoverFunds = () => {
const [backupString, setBackupString] = useState('');
@@ -25,20 +24,24 @@ export const RecoverFunds = () => {
const renderInput = () => (
<>
-
+
Backup String:
-
+
setBackupString(e.target.value)} />
- recoverFunds({ variables: { backup: backupString } })}
- disabled={backupString === ''}
- loading={loading}
+ disabled={backupString === '' || loading}
>
- Recover
-
+ {loading ? (
+
Recover Funds from Channels
- setIsPasting(prev => !prev)}
>
- {isPasting ?
+ {isPasting ? (
+
{isPasting && renderInput()}
diff --git a/src/client/src/views/tools/backups/VerifyBackup.tsx b/src/client/src/views/tools/backups/VerifyBackup.tsx
index b6ecc41b..e4b6ae53 100644
--- a/src/client/src/views/tools/backups/VerifyBackup.tsx
+++ b/src/client/src/views/tools/backups/VerifyBackup.tsx
@@ -1,15 +1,14 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
-import { X } from 'lucide-react';
+import { X, ChevronRight, Loader2 } from 'lucide-react';
import { getErrorContent } from '../../../utils/error';
import {
SingleLine,
DarkSubTitle,
SubCard,
} from '../../../components/generic/Styled';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
-import { Input } from '../../../components/input';
-import { NoWrap } from '../Tools.styled';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
import { useVerifyBackupLazyQuery } from '../../../graphql/queries/__generated__/verifyBackup.generated';
export const VerifyBackup = () => {
@@ -32,28 +31,28 @@ export const VerifyBackup = () => {
const renderInput = () => (
-
+
Backup Hex String:
-
+
setBackupString(e.target.value)}
/>
-
verifyBackup({
variables: { backup: backupString },
})
}
>
- Verify
-
+ {loading ?
);
@@ -61,14 +60,18 @@ export const VerifyBackup = () => {
<>
Verify Single Channel Backup
- setIsPasting(prev => !prev)}
>
- {isPasting ?
+ {isPasting ? (
+
{isPasting && renderInput()}
diff --git a/src/client/src/views/tools/backups/VerifyBackups.tsx b/src/client/src/views/tools/backups/VerifyBackups.tsx
index 7f61981a..99b2065b 100644
--- a/src/client/src/views/tools/backups/VerifyBackups.tsx
+++ b/src/client/src/views/tools/backups/VerifyBackups.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
-import { X } from 'lucide-react';
+import { X, ChevronRight, Loader2 } from 'lucide-react';
import { useVerifyBackupsLazyQuery } from '../../../graphql/queries/__generated__/verifyBackups.generated';
import { getErrorContent } from '../../../utils/error';
import {
@@ -8,9 +8,8 @@ import {
DarkSubTitle,
SubCard,
} from '../../../components/generic/Styled';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
-import { Input } from '../../../components/input';
-import { NoWrap } from '../Tools.styled';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
export const VerifyBackups = () => {
const [backupString, setBackupString] = useState('');
@@ -32,28 +31,28 @@ export const VerifyBackups = () => {
const renderInput = () => (
-
+
Backup String:
-
+
setBackupString(e.target.value)}
/>
-
verifyBackup({
variables: { backup: backupString },
})
}
>
- Verify
-
+ {loading ?
);
@@ -61,14 +60,18 @@ export const VerifyBackups = () => {
<>
Verify Channels Backup
- setIsPasting(prev => !prev)}
>
- {isPasting ?
+ {isPasting ? (
+
{isPasting && renderInput()}
diff --git a/src/client/src/views/tools/bakery/Bakery.tsx b/src/client/src/views/tools/bakery/Bakery.tsx
index f768036b..dbfb92e2 100644
--- a/src/client/src/views/tools/bakery/Bakery.tsx
+++ b/src/client/src/views/tools/bakery/Bakery.tsx
@@ -9,11 +9,9 @@ import {
Separation,
Sub4Title,
} from '../../../components/generic/Styled';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
-import {
- SingleButton,
- MultiButton,
-} from '../../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
import { useCreateMacaroonMutation } from '../../../graphql/mutations/__generated__/createMacaroon.generated';
import toast from 'react-hot-toast';
import { getErrorContent } from '../../../utils/error';
@@ -86,7 +84,8 @@ export const Bakery = () => {
Base64 Encoded
{shorten(base)}
-
navigator.clipboard
.writeText(base)
@@ -95,13 +94,14 @@ export const Bakery = () => {
>
+
Hex Encoded
{shorten(hex)}
-
navigator.clipboard
.writeText(hex)
@@ -110,7 +110,7 @@ export const Bakery = () => {
>
+
);
@@ -123,20 +123,22 @@ export const Bakery = () => {
) : (
{title}
)}
-
-
+
-
+
-
+
+
);
@@ -163,15 +165,19 @@ export const Bakery = () => {
{renderLine('Stop Daemon', 'is_ok_to_stop_daemon')}
{renderLine('Verify bytes signature', 'is_ok_to_verify_bytes_signatures')}
{renderLine('Verify messages', 'is_ok_to_verify_messages')}
- bake({ variables: { permissions } })}
disabled={loading || !hasATrue}
- loading={loading}
>
- Bake new macaroon
-
+ {loading ? (
+
Macaroon
- isOpenSet(o => !o)} arrow={!isOpen}>
- {isOpen ? 'Cancel' : 'Bake'}
-
+
{isOpen && renderPermissions()}
diff --git a/src/client/src/views/tools/messages/Messages.tsx b/src/client/src/views/tools/messages/Messages.tsx
index 9867304a..fcdda5c6 100644
--- a/src/client/src/views/tools/messages/Messages.tsx
+++ b/src/client/src/views/tools/messages/Messages.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
import {
CardWithTitle,
SubTitle,
@@ -7,10 +6,15 @@ import {
import { SignMessageCard } from './SignMessage';
import { VerifyMessage } from './VerifyMessage';
-export const NoWrap = styled.div`
- margin-right: 16px;
- white-space: nowrap;
-`;
+export const NoWrap = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+ Message:
setMessage(e.target.value)}
/>
- signMessage({ variables: { message } })}
- fullWidth={true}
- withMargin={'8px 0 4px'}
- disabled={message === ''}
- loading={loading}
+ className="w-full"
+ style={{ margin: '8px 0 4px' }}
+ disabled={message === '' || loading}
>
- Sign
-
+ {loading ?
- {signed}
-
+
-
+
+
);
@@ -84,13 +84,17 @@ export const SignMessageCard = () => {
<>
Sign Message
- setIsPasting(prev => !prev)}
>
- {isPasting ?
+ {isPasting ? (
+
{isPasting && Message:
setMessage(e.target.value)}
/>
@@ -46,27 +45,28 @@ export const VerifyMessage = () => {
Signature:
setSignature(e.target.value)}
/>
- signMessage({ variables: { message, signature } })}
>
- Verify
-
+ {loading ?
- {getNodeLink(signedBy)}
-
+
-
+
+
);
return (
<>
Verify Message
- setIsPasting(prev => !prev)}
>
- {isPasting ?
+ {isPasting ? (
+
{isPasting && renderInput()}
{signedBy !== '' && isPasting && renderMessage()}
diff --git a/src/client/src/views/transactions/InvoiceCard.tsx b/src/client/src/views/transactions/InvoiceCard.tsx
index 4276a3f7..0a5bcd10 100644
--- a/src/client/src/views/transactions/InvoiceCard.tsx
+++ b/src/client/src/views/transactions/InvoiceCard.tsx
@@ -1,8 +1,7 @@
import { FC, Fragment } from 'react';
import { InvoiceType } from '../../graphql/types';
import { MessageCircle } from 'lucide-react';
-import styled from 'styled-components';
-import { mediaWidths, themeColors } from '../../styles/Themes';
+import { themeColors } from '../../styles/Themes';
import { useGetChannelQuery } from '../../graphql/queries/__generated__/getChannel.generated';
import { LoadingCard } from '../../components/loading/LoadingCard';
import { Price } from '../../components/price/Price';
@@ -24,21 +23,6 @@ import {
DarkSubTitle,
} from '../../components/generic/Styled';
-const S = {
- icon: styled.span`
- margin-left: 4px;
- `,
- grid: styled.div`
- width: 100%;
- display: grid;
- grid-template-columns: 3fr 2fr 1fr;
-
- @media (${mediaWidths.mobile}) {
- grid-template-columns: 1fr;
- }
- `,
-};
-
interface InvoiceCardProps {
invoice: InvoiceType;
index: number;
@@ -154,18 +138,18 @@ export const InvoiceCard = ({
handleClick()}>
{getStatusDot(is_confirmed, 'active')}
-
+
{description ? description : 'Invoice'}
{hasMessages && (
-
+
+
)}
{`(${getDateDif(date)} ago)`}
{index === indexOpen && renderDetails()}
diff --git a/src/client/src/views/transactions/PaymentsCards.tsx b/src/client/src/views/transactions/PaymentsCards.tsx
index 5d19f3aa..4535151f 100644
--- a/src/client/src/views/transactions/PaymentsCards.tsx
+++ b/src/client/src/views/transactions/PaymentsCards.tsx
@@ -1,7 +1,5 @@
import { Fragment } from 'react';
-import styled from 'styled-components';
import { PaymentType } from '../../graphql/types';
-import { mediaWidths } from '../../styles/Themes';
import {
Separation,
SubCard,
@@ -28,22 +26,6 @@ interface PaymentsCardProps {
indexOpen: number;
}
-const RedValue = styled.div`
- color: red;
-`;
-
-const S = {
- grid: styled.div`
- width: 100%;
- display: grid;
- grid-template-columns: 3fr 2fr 1fr;
-
- @media (${mediaWidths.mobile}) {
- grid-template-columns: 1fr;
- }
- `,
-};
-
export const PaymentsCard = ({
payment,
index,
@@ -111,11 +93,11 @@ export const PaymentsCard = ({
handleClick()}>
{getStatusDot(is_confirmed, 'active')}
-
+
{`Payment to: ${alias}`}
{`(${getDateDif(date)} ago)`}
- {formatAmount}
-
+
{index === indexOpen && renderDetails()}
diff --git a/src/client/src/views/transactions/Settings.tsx b/src/client/src/views/transactions/Settings.tsx
index 7d904669..748a91f5 100644
--- a/src/client/src/views/transactions/Settings.tsx
+++ b/src/client/src/views/transactions/Settings.tsx
@@ -1,17 +1,7 @@
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import { SingleLine } from '../../components/generic/Styled';
import { useLocalStorage } from '../../hooks/UseLocalStorage';
-import styled from 'styled-components';
-
-const NoWrapText = styled.div`
- white-space: nowrap;
- font-size: 14px;
-`;
-
-const InputTitle = styled(NoWrapText)``;
export const defaultSettings = {
rebalance: false,
@@ -29,38 +19,45 @@ export const TransactionSettings = () => {
return (
<>
- Confirmed
-
- Confirmed
+
- Circular Payment
-
- Circular Payment
+
);
diff --git a/src/client/vite.config.ts b/src/client/vite.config.ts
index 28a1cab3..31871345 100644
--- a/src/client/vite.config.ts
+++ b/src/client/vite.config.ts
@@ -4,14 +4,7 @@ import tailwindcss from '@tailwindcss/vite';
import path from 'path';
export default defineConfig({
- plugins: [
- tailwindcss(),
- react({
- babel: {
- plugins: ['babel-plugin-styled-components'],
- },
- }),
- ],
+ plugins: [tailwindcss(), react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
diff --git a/src/server/modules/api/api.module.ts b/src/server/modules/api/api.module.ts
index 362c7bed..23e3da99 100644
--- a/src/server/modules/api/api.module.ts
+++ b/src/server/modules/api/api.module.ts
@@ -19,7 +19,6 @@ import { ForwardsModule } from './forwards/forwards.module';
import { HealthModule } from './health/health.module';
import { TransactionsModule } from './transactions/transactions.module';
import { InvoicesModule } from './invoices/invoices.module';
-import { ChatModule } from './chat/chat.module';
import { BoltzModule } from './boltz/boltz.module';
import { UserConfigModule } from './userConfig/userConfig.module';
@@ -46,7 +45,6 @@ import { UserConfigModule } from './userConfig/userConfig.module';
HealthModule,
TransactionsModule,
InvoicesModule,
- ChatModule,
BoltzModule,
],
})
diff --git a/src/server/modules/api/chat/chat.module.ts b/src/server/modules/api/chat/chat.module.ts
deleted file mode 100644
index 3c3ef829..00000000
--- a/src/server/modules/api/chat/chat.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Module } from '@nestjs/common';
-import { NodeModule } from '../../node/node.module';
-import { ChatResolver } from './chat.resolver';
-
-@Module({
- imports: [NodeModule],
- providers: [ChatResolver],
-})
-export class ChatModule {}
diff --git a/src/server/modules/api/chat/chat.resolver.ts b/src/server/modules/api/chat/chat.resolver.ts
deleted file mode 100644
index 3fcbbda4..00000000
--- a/src/server/modules/api/chat/chat.resolver.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Inject } from '@nestjs/common';
-import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { toWithError } from 'src/server/utils/async';
-import {
- createCustomRecords,
- decodeMessage,
-} from 'src/server/utils/customRecords';
-import { Logger } from 'winston';
-import { NodeService } from '../../node/node.service';
-import { CurrentUser } from '../../security/security.decorators';
-import { UserId } from '../../security/security.types';
-import { randomBytes, createHash } from 'crypto';
-import { GetMessages } from './chat.types';
-
-@Resolver()
-export class ChatResolver {
- constructor(
- private nodeService: NodeService,
- @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger
- ) {}
-
- @Query(() => GetMessages)
- async getMessages(
- @CurrentUser() user: UserId,
- @Args('initialize', { nullable: true }) initialize: boolean
- ) {
- const invoiceList = await this.nodeService.getInvoices(user.id, {
- limit: initialize ? 100 : 5,
- });
-
- const getFiltered = () =>
- Promise.all(
- invoiceList.invoices.map(async invoice => {
- if (!invoice.is_confirmed) {
- return;
- }
-
- const messages = invoice.payments[0].messages;
-
- let customRecords: { [key: string]: string } = {};
- messages.map(message => {
- const { type, value } = message;
-
- const obj = decodeMessage({ type, value });
- customRecords = { ...customRecords, ...obj };
- });
-
- if (Object.keys(customRecords).length <= 0) {
- return;
- }
-
- let isVerified = false;
-
- if (customRecords.signature) {
- const messageToVerify = JSON.stringify({
- sender: customRecords.sender,
- message: customRecords.message,
- });
-
- const [verified, error] = await toWithError(
- this.nodeService.verifyMessage(
- user.id,
- messageToVerify,
- customRecords.signature
- )
- );
- if (error) {
- this.logger.debug(`Error verifying message: ${messageToVerify}`);
- }
-
- if (
- !error &&
- (verified as { signed_by: string })?.signed_by ===
- customRecords.sender
- ) {
- isVerified = true;
- }
- }
-
- return {
- date: invoice.confirmed_at,
- id: invoice.id,
- tokens: invoice.tokens,
- verified: isVerified,
- ...customRecords,
- };
- })
- );
-
- const filtered = await getFiltered();
- const final = filtered.filter(Boolean) || [];
-
- return { token: invoiceList.next, messages: final };
- }
-
- @Mutation(() => Number)
- async sendMessage(
- @CurrentUser() user: UserId,
- @Args('publicKey') publicKey: string,
- @Args('message') message: string,
- @Args('messageType', { nullable: true }) messageType: string,
- @Args('tokens', { nullable: true }) tokens: number,
- @Args('maxFee', { nullable: true }) maxFee: number
- ) {
- let satsToSend = tokens || 1;
- let messageToSend = message;
- if (messageType === 'paymentrequest') {
- satsToSend = 1;
- messageToSend = `${tokens},${message}`;
- }
-
- const nodeInfo = await this.nodeService.getWalletInfo(user.id);
-
- const userAlias = nodeInfo.alias;
- const userKey = nodeInfo.public_key;
-
- const preimage = randomBytes(32);
- const secret = preimage.toString('hex');
- const id = createHash('sha256').update(preimage).digest().toString('hex');
-
- const messageToSign = JSON.stringify({
- sender: userKey,
- message: messageToSend,
- });
-
- const { signature } = await this.nodeService.signMessage(
- user.id,
- messageToSign
- );
-
- const customRecords = createCustomRecords({
- message: messageToSend,
- sender: userKey,
- alias: userAlias,
- contentType: messageType || 'text',
- requestType: messageType || 'text',
- signature,
- secret,
- });
-
- const { safe_fee } = await this.nodeService.payViaPaymentDetails(user.id, {
- id,
- tokens: satsToSend,
- destination: publicKey,
- ...(maxFee ? { max_fee: maxFee } : {}),
- messages: customRecords,
- });
-
- // +1 is needed so that a fee of 0 doesnt evaluate to false
- return safe_fee + 1;
- }
-}
diff --git a/src/server/modules/api/chat/chat.types.ts b/src/server/modules/api/chat/chat.types.ts
deleted file mode 100644
index 65af7f35..00000000
--- a/src/server/modules/api/chat/chat.types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Field, ObjectType } from '@nestjs/graphql';
-
-@ObjectType()
-class Message {
- @Field()
- date: string;
- @Field()
- id: string;
- @Field()
- verified: boolean;
- @Field({ nullable: true })
- contentType: string;
- @Field({ nullable: true })
- sender: string;
- @Field({ nullable: true })
- alias: string;
- @Field({ nullable: true })
- message: string;
- @Field({ nullable: true })
- tokens: number;
-}
-
-@ObjectType()
-export class GetMessages {
- @Field({ nullable: true })
- token: string;
- @Field(() => [Message])
- messages: Message[];
-}
+
+
+ );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+ return (
+
+ );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+ return (
+
+ );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+ return (
+ tr]:last:border-b-0',
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+ return (
+
+ {`Version ${githubVersion} is available. You are on version ${npmVersion}`}
+
);
};
diff --git a/src/client/src/components/viewSwitch/ViewSwitch.tsx b/src/client/src/components/viewSwitch/ViewSwitch.tsx
deleted file mode 100644
index 19dca3e7..00000000
--- a/src/client/src/components/viewSwitch/ViewSwitch.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC, ReactNode } from 'react';
-import styled from 'styled-components';
-import { mediaWidths } from '../../styles/Themes';
-
-const HideMobile = styled.div`
- @media (${mediaWidths.mobile}) {
- display: none;
- }
-`;
-
-const HideDesktop = styled.div`
- display: none;
- @media (${mediaWidths.mobile}) {
- display: unset;
- }
-`;
-
-interface ViewSwitchProps {
- hideMobile?: boolean;
- children?: ReactNode;
-}
-
-export const ViewSwitch: FC
+
);
};
diff --git a/src/client/src/layouts/header/Header.styled.ts b/src/client/src/layouts/header/Header.styled.ts
deleted file mode 100644
index e5af5e11..00000000
--- a/src/client/src/layouts/header/Header.styled.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
- headerTextColor,
- themeColors,
- mediaWidths,
- unSelectedNavButton,
- homeCompatibleColor,
-} from '../../styles/Themes';
-import { SingleLine } from '../../components/generic/Styled';
-
-export const HeaderStyle = styled.div`
- padding: 16px 0;
-
- @media (${mediaWidths.mobile}) {
- padding: 16px 16px 0;
- }
-`;
-
-export const IconPadding = styled.div`
- padding-right: 6px;
- margin-bottom: -4px;
-`;
-
-export const HeaderTitle = styled.div<{ withPadding: boolean }>`
- color: ${headerTextColor};
- font-weight: 800;
- display: flex;
- align-items: center;
- justify-content: center;
-
- ${({ withPadding }) =>
- withPadding &&
- css`
- @media (${mediaWidths.mobile}) {
- margin-bottom: 16px;
- }
- `}
-`;
-
-export const IconWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 24px;
- height: 24px;
-`;
-
-export const LinkWrapper = styled.div<{ last?: boolean }>`
- color: ${headerTextColor};
- margin: ${({ last }) => (last ? '0 16px 0 4px' : '0 4px')};
-
- :hover {
- color: ${themeColors.blue2};
- }
-`;
-
-export const HeaderLine = styled(SingleLine)<{ loggedIn: boolean }>`
- @media (${mediaWidths.mobile}) {
- ${({ loggedIn }) =>
- !loggedIn &&
- css`
- width: 100%;
- flex-direction: column;
- `}
- }
-`;
-
-export const HeaderButtons = styled.div`
- display: flex;
- align-items: center;
-`;
-
-interface NavProps {
- selected?: boolean;
-}
-
-export const HeaderNavButton = styled.div
+
+
+
+
+
+
+
+
+
+
+
+ ThunderHub
+ {config.npmVersion}
+
+ Open-source Lightning Node Manager.
+
+
+
+ Github
+
+
+ Twitter
+
+
+
+ Made in Munich with
+ setOpen(prev => !prev)}
+ >
+ {open ?
+
+
+ {renderNavButton(SETTINGS, Settings)}
+
);
return (
<>
-
+
+
{open && (
-
+
+ {!isRoot && renderLoggedIn()}
-
-
-
+
+
+
-
+ {!isRoot && renderLoggedIn()}
+
+ {title}
}
+
{renderNavButton('Home', HOME, Home, sidebar)}
{renderNavButton('Dashboard', DASHBOARD, Grid, sidebar)}
{renderNavButton('Peers', PEERS, Users, sidebar)}
@@ -178,11 +100,11 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
{renderNavButton('Tools', TOOLS, Shield, sidebar)}
{renderNavButton('Swap', SWAP, Shuffle, sidebar)}
{renderNavButton('Stats', STATS, BarChart2, sidebar)}
-
+
);
const renderBurger = () => (
-
{renderBurgerNav('Home', HOME, Home)}
{renderBurgerNav('Dashboard', DASHBOARD, Grid)}
{renderBurgerNav('Peers', PEERS, Users)}
@@ -194,9 +116,8 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
{renderBurgerNav('Tools', TOOLS, Shield)}
{renderBurgerNav('Swap', SWAP, Shuffle)}
{renderBurgerNav('Stats', STATS, BarChart2)}
- {renderBurgerNav('Chat', CHAT, MessageCircle)}
{renderBurgerNav('Settings', SETTINGS, Settings)}
-
+
);
if (isBurger) {
@@ -204,14 +125,17 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
}
return (
-
+
);
};
diff --git a/src/client/src/layouts/navigation/nodeInfo/NodeInfo.tsx b/src/client/src/layouts/navigation/nodeInfo/NodeInfo.tsx
index 0e590d6e..aacd012f 100644
--- a/src/client/src/layouts/navigation/nodeInfo/NodeInfo.tsx
+++ b/src/client/src/layouts/navigation/nodeInfo/NodeInfo.tsx
@@ -1,12 +1,10 @@
import { Zap, Anchor, Circle } from 'lucide-react';
import { Tooltip as ReactTooltip } from 'react-tooltip';
-import styled from 'styled-components';
import { getPrice, Price } from '../../../components/price/Price';
import { addEllipsis, renderLine } from '../../../components/generic/helpers';
import { useNodeInfo } from '../../../hooks/UseNodeInfo';
import { useNodeBalances } from '../../../hooks/UseNodeBalances';
import Big from 'big.js';
-import { unSelectedNavButton } from '../../../styles/Themes';
import {
Separation,
SingleLine,
@@ -16,69 +14,6 @@ import {
import { useConfigState } from '../../../context/ConfigContext';
import { usePriceState } from '../../../context/PriceContext';
-const Closed = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 100%;
-`;
-
-const Margin = styled.div`
- margin: 8px 0 2px;
-`;
-
-const Title = styled.div`
- font-size: 18px;
- font-weight: 700;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-const Info = styled.div<{ bottomColor: string }>`
- font-size: 14px;
- color: #bfbfbf;
- border-bottom: 2px solid ${({ bottomColor }) => bottomColor};
-`;
-
-const Balance = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 2px 0;
- padding: 0 5px;
- cursor: default;
-`;
-
-const Alias = styled.div<{ bottomColor: string }>`
- max-width: 200px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- border-bottom: 2px solid ${({ bottomColor }) => bottomColor};
-`;
-
-const ProgressBar = styled.div<{ percentage: number; color: string }>`
- width: 100%;
- height: 6px;
- background-color: #3a3a3a;
- border-radius: 3px;
- margin-top: 6px;
- overflow: hidden;
- border: 1px solid #555;
-
- &::after {
- content: '';
- display: block;
- width: ${({ percentage }) => Math.min(Math.max(percentage, 0), 100)}%;
- height: 100%;
- background-color: ${({ color }) => color};
- border-radius: 2px;
- transition: width 0.3s ease;
- }
-`;
-
interface NodeInfoProps {
isOpen?: boolean;
isBurger?: boolean;
@@ -165,7 +100,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
if (!isOpen) {
return (
<>
-
+
+
{!isRoot &&
+ {`${activeChannelCount} / ${pendingChannelCount} / ${closedChannelCount} / ${peersCount}`}
-
+ >{`${activeChannelCount} / ${pendingChannelCount} / ${closedChannelCount} / ${peersCount}`}
+
-
+
-
-
{syncText}
-
+
{!!syncPercentage && (
-
+
+
)}
diff --git a/src/client/src/layouts/navigation/sideSettings/SideSettings.tsx b/src/client/src/layouts/navigation/sideSettings/SideSettings.tsx
index ece519cb..e446d4e3 100644
--- a/src/client/src/layouts/navigation/sideSettings/SideSettings.tsx
+++ b/src/client/src/layouts/navigation/sideSettings/SideSettings.tsx
@@ -6,60 +6,17 @@ import {
ChevronRight,
LucideProps,
} from 'lucide-react';
-import styled from 'styled-components';
+import { cn } from '../../../lib/utils';
import { SatoshiSymbol } from '../../../components/satoshi/Satoshi';
import { Separation, SingleLine } from '../../../components/generic/Styled';
import {
useConfigState,
useConfigDispatch,
} from '../../../context/ConfigContext';
-import {
- progressBackground,
- iconButtonHover,
- inverseTextColor,
- unSelectedNavButton,
-} from '../../../styles/Themes';
import { usePriceState } from '../../../context/PriceContext';
type Icon = FC;
-const SelectedIcon = styled.div<{ selected: boolean }>`
- display: flex;
- justify-content: center;
- align-items: center;
- outline: none;
- width: 30px;
- height: 30px;
- border-radius: 100%;
- margin: 0 5px;
- cursor: pointer;
-
- @media (min-width: 579px) {
- &:hover {
- background-color: ${iconButtonHover};
- color: ${inverseTextColor};
- }
- }
- background-color: ${({ selected }) => (selected ? progressBackground : '')};
-`;
-
-const Symbol = styled.div`
- margin-top: 2px;
- font-weight: 700;
-`;
-
-const IconRow = styled.div<{ center?: boolean }>`
- margin: 5px 0;
- display: flex;
- justify-content: center;
- align-items: center;
- ${({ center }) => center && 'width: 100%'}
-`;
-
-const BurgerPadding = styled(SingleLine)`
- margin: 16px 0;
-`;
-
const currencyArray = ['sat', 'btc', 'fiat'];
const currencyNoFiatArray = ['sat', 'btc'];
@@ -113,18 +70,24 @@ export const SideSettings = ({ isBurger }: SideSettingsProps) => {
if (text === 'S') {
return {text} ;
+ return {
localStorage.setItem(type, value);
if (type === 'currency') {
@@ -138,7 +101,7 @@ export const SideSettings = ({ isBurger }: SideSettingsProps) => {
}}
>
{renderText()}
-
+
);
};
@@ -146,11 +109,11 @@ export const SideSettings = ({ isBurger }: SideSettingsProps) => {
if (!sidebar) {
return (
<>
- {text}
;
}
if (type === 'theme' && SideIcon) {
return
{renderIcon('currency', currency, correctMap[currency], true)}
-
-
+
+
{renderIcon(
'theme',
getNextValue(themeArray, theme),
@@ -158,56 +121,65 @@ export const SideSettings = ({ isBurger }: SideSettingsProps) => {
true,
getNextValue(themeArray, theme) === 'light' ? Sun : Moon
)}
-
+
);
}
return (
<>
-
{renderIcon('currency', 'sat', 'S')}
{renderIcon('currency', 'btc', '₿')}
{!dontShow && renderIcon('currency', 'fiat', 'F')}
-
-
+
+
{renderIcon('theme', 'light', '', false, Sun)}
{renderIcon('theme', 'dark', '', false, Moon)}
-
+
);
};
if (isBurger) {
return (
-
{renderIcon('currency', 'sat', 'S')}
{renderIcon('currency', 'btc', '₿')}
{!dontShow && renderIcon('currency', 'fiat', 'F')}
-
-
+
+
{renderIcon('theme', 'light', '', false, Sun)}
{renderIcon('theme', 'dark', '', false, Moon)}
-
-
+
+ {
localStorage.setItem('sidebar', (!sidebar).toString());
dispatch({ type: 'change', sidebar: !sidebar });
}}
>
{sidebar ?
+
Channels
{slug}
-
+
Channels
{slug}
-
+
Channels
{slug}
-
+
+ {view.value != 'byChannel' ? null : (
setChannel((e[0] || emptyChannel) as any)}
options={
@@ -105,12 +94,10 @@ const ForwardsView = () => {
}
value={channel}
isClearable={false}
- maxWidth={'340px'}
- minWidth={'250px'}
/>
)}
-
-
+
+
{errors.map((errorMsg, i) => {
- return {getMessage(errorMsg)} ;
+ return (
+
);
diff --git a/src/client/src/utils/helpers.tsx b/src/client/src/utils/helpers.tsx
index ece5b28b..d18d87c3 100644
--- a/src/client/src/utils/helpers.tsx
+++ b/src/client/src/utils/helpers.tsx
@@ -1,13 +1,6 @@
import { SatoshiSymbol } from '../components/satoshi/Satoshi';
-import { unSelectedNavButton } from '../styles/Themes';
-import styled from 'styled-components';
import { Bitcoin } from 'lucide-react';
-const DarkUnit = styled.span`
- font-size: 12px;
- color: ${unSelectedNavButton};
-`;
-
const fmt1 = (n: number) =>
n.toLocaleString('en-US', { maximumFractionDigits: 1 });
@@ -83,9 +76,7 @@ export const getValue = ({
return (
<>
{breakAmount}
-
+ {getMessage(errorMsg)}
+
+ );
})}
New Chat
-
+ {renderContent()}
+
+ );
};
export default Dashboard;
diff --git a/src/client/src/views/dashboard/modal/index.tsx b/src/client/src/views/dashboard/modal/index.tsx
index 7695effc..a582799e 100644
--- a/src/client/src/views/dashboard/modal/index.tsx
+++ b/src/client/src/views/dashboard/modal/index.tsx
@@ -20,7 +20,7 @@ export const DashboardModal = () => {
/>
);
case 'createInvoice':
- return
+
{Number(pending) > 0 ? (
-
+
);
};
@@ -51,17 +27,17 @@ export const ChannelBalance = () => {
const { lightning } = useNodeBalances();
return (
- Total Balance
+
{Number(pending) > 0 ? (
-
+
{Number(lightning.pending) > 0 ? (
-
+
);
};
@@ -69,16 +45,16 @@ export const ChainBalance = () => {
const { onchain } = useNodeBalances();
return (
- Channel Balance
+
{Number(lightning.pending) > 0 ? (
-
+
{Number(onchain.pending) > 0 ? (
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/channels.tsx b/src/client/src/views/dashboard/widgets/lightning/channels.tsx
index 221504bc..b7bed347 100644
--- a/src/client/src/views/dashboard/widgets/lightning/channels.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/channels.tsx
@@ -1,18 +1,9 @@
-import styled from 'styled-components';
import { ChannelTable } from '../../../channels/channels/ChannelTable';
-const S = {
- wrapper: styled.div`
- height: 100%;
- width: 100%;
- overflow: auto;
- `,
-};
-
export const ChannelListWidget = () => {
return (
- Chain Balance
+
{Number(onchain.pending) > 0 ? (
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/forwardsGraph.tsx b/src/client/src/views/dashboard/widgets/lightning/forwardsGraph.tsx
index e2890f15..5bdfa489 100644
--- a/src/client/src/views/dashboard/widgets/lightning/forwardsGraph.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/forwardsGraph.tsx
@@ -3,41 +3,9 @@ import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { SmallSelectWithValue } from '../../../../components/select';
import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
import { chartColors } from '../../../../styles/Themes';
-import styled from 'styled-components';
import { getByTime } from '../helpers';
import { BarChart } from '../../../../components/chart/BarChart';
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 60px 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 100%;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
-
const options = [
{ label: '1D', value: 1 },
{ label: '7D', value: 7 },
@@ -63,8 +31,8 @@ export const ForwardsGraph = () => {
});
const Header = () => (
- Forwards
+
+ setDays((e[0] || options[1]) as any)}
options={options}
@@ -79,35 +47,40 @@ export const ForwardsGraph = () => {
isClearable={false}
maxWidth={'90px'}
/>
-
+
);
if (loading) {
return (
- Forwards
+ No forwards for this period.
+
+
+
);
};
@@ -32,9 +16,9 @@ export const BalanceWidget = () => {
if (!data?.getChannelReport) {
return (
- {alias}
+
+
);
}
@@ -43,8 +27,8 @@ export const BalanceWidget = () => {
const balance = Math.round(((local || 0) / (remote || 1)) * 100);
return (
- -
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/invoiceGraph.tsx b/src/client/src/views/dashboard/widgets/lightning/invoiceGraph.tsx
index 92659505..0940e7a9 100644
--- a/src/client/src/views/dashboard/widgets/lightning/invoiceGraph.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/invoiceGraph.tsx
@@ -2,43 +2,11 @@ import { useMemo, useState } from 'react';
import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { SmallSelectWithValue } from '../../../../components/select';
import { chartColors } from '../../../../styles/Themes';
-import styled from 'styled-components';
import { getByTime } from '../helpers';
import { useGetInvoicesQuery } from '../../../../graphql/queries/__generated__/getInvoices.generated';
import { differenceInDays } from 'date-fns';
import { BarChart } from '../../../../components/chart/BarChart';
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 100%;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
-
const typeOptions = [
{ label: 'Count', value: 'count' },
{ label: 'Amount', value: 'tokens' },
@@ -72,41 +40,46 @@ export const InvoicesGraph = () => {
}, [data]);
const Header = () => (
- {`${balance}%`}
+
+ setType((e[0] || typeOptions[1]) as any)}
options={typeOptions}
value={type}
isClearable={false}
/>
-
+
);
if (loading) {
return (
- Invoices
+ No invoices for this period.
+
+
+
);
}
if (!data?.getChannelReport) {
return (
- Liquidity
+
+
);
}
@@ -60,12 +39,12 @@ export const LiquidityGraph = () => {
];
return (
- Liquidity
+
+ Unable to get liquidity data.
+
+
+ setType((e[0] || typeOptions[1]) as any)}
options={typeOptions}
@@ -79,33 +47,38 @@ export const PaymentsGraph = () => {
isClearable={false}
maxWidth={'90px'}
/>
-
+
);
if (loading) {
return (
- Payments
+ No payments for this period.
+
+
- Dash Settings
+
-
+
);
};
export const ForwardsViewLink = () => {
return (
-
- Forwards
+
-
+
);
};
export const TransactionsViewLink = () => {
return (
-
- Transactions
+
-
+
);
};
export const ChannelViewLink = () => {
return (
-
- Channels
+
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/settings/index.tsx b/src/client/src/views/dashboard/widgets/settings/index.tsx
index a6b9d142..35c2d4d8 100644
--- a/src/client/src/views/dashboard/widgets/settings/index.tsx
+++ b/src/client/src/views/dashboard/widgets/settings/index.tsx
@@ -1,20 +1,10 @@
import { Sun, Moon } from 'lucide-react';
-import { SingleButton } from '../../../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import {
useConfigDispatch,
useConfigState,
} from '../../../../context/ConfigContext';
-import styled from 'styled-components';
-
-const S = {
- wrapper: styled.div`
- overflow: auto;
- width: 100%;
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- `,
-};
export const ThemeSetting = () => {
const { theme } = useConfigState();
@@ -24,20 +14,22 @@ export const ThemeSetting = () => {
dispatch({ type: 'themeChange', theme });
return (
-
Fetching fiat prices is disabled. Enable it in the settings.
-
+
);
}
@@ -104,11 +65,10 @@ export const ConvertWidget = () => {
};
return (
-
+
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/util/DonateWidget.tsx b/src/client/src/views/dashboard/widgets/util/DonateWidget.tsx
index 290c16fc..85868cc5 100644
--- a/src/client/src/views/dashboard/widgets/util/DonateWidget.tsx
+++ b/src/client/src/views/dashboard/widgets/util/DonateWidget.tsx
@@ -1,38 +1,22 @@
import { Heart } from 'lucide-react';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { useDashDispatch } from '../../../../context/DashContext';
-import styled from 'styled-components';
-
-const S = {
- wrapper: styled.div`
- height: 100%;
- width: 100%;
- `,
- title: styled.div`
- font-size: 14px;
- margin-left: 4px;
- `,
- row: styled.div`
- display: flex;
- justify-content: space-around;
- align-items: center;
- `,
-};
export const DonateWidget = () => {
const dispatch = useDashDispatch();
return (
- {getValue(firstAmount, first.value)}
{
/>
{getValue(secondAmount, second.value)}
{
isClearable={false}
maxWidth={'100px'}
/>
-
-
+
+ {children}
+
+);
const sectionColor = '#FFD300';
@@ -105,7 +91,7 @@ export const AccountInfo = () => {
Paid
+
+
+ {request}
+
+
+ Amount to receive
+
+
+ 0 ? amount : ''}
+ onChange={e => setAmount(Number(e.target.value))}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+
+ Description
+
+ setDescription(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+
+ Expires in
+
+ {formatSeconds(seconds) || ''}
+
+
+ 0 ? seconds : ''}
+ onChange={e => setSeconds(Number(e.target.value))}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+
);
diff --git a/src/client/src/views/home/account/createInvoice/Timer.tsx b/src/client/src/views/home/account/createInvoice/Timer.tsx
index 3e8633f6..2683a40d 100644
--- a/src/client/src/views/home/account/createInvoice/Timer.tsx
+++ b/src/client/src/views/home/account/createInvoice/Timer.tsx
@@ -1,11 +1,5 @@
import { FC, useState, useEffect } from 'react';
import { DarkSubTitle } from '../../../../components/generic/Styled';
-import styled from 'styled-components';
-
-const Wrapper = styled(DarkSubTitle)`
- width: 100%;
- text-align: center;
-`;
type TimerProps = {
initialMinute: number;
@@ -36,8 +30,8 @@ export const Timer: FC
+ Include Private Channels
+
+
+
+
+ {children}
+
+);
-export const Centered = styled.div`
- text-align: center;
-`;
+export const Centered = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
interface KeysendProps {
publicKey: string;
@@ -71,26 +84,38 @@ export const KeysendModal: FC{alias}
+
+ Sats
+
+
+ 0 ? tokens : ''}
+ onChange={e => setTokens(Number(e.target.value))}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+ Request
+
+ setRequest(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+
+ Max Fee
+
+
+ 0 ? fee : ''}
+ onChange={e => setFee(Math.max(1, Number(e.target.value)))}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+
+
+ Max Paths
+
+ 0 ? paths : ''}
+ onChange={e => setPaths(Math.max(1, Number(e.target.value)))}
+ onKeyDown={e => e.key === 'Enter' && handleEnter()}
+ />
+ Public Key
+
{renderContent()}
+ Is Keysend
+
+
+
+
+
+
- {data.createAddress}
-
+
) : (
<>
-
- Address Type:
+ Address Type:
+
+
setType((e[0] || options[1]) as any)}
options={options}
value={type}
isClearable={false}
/>
-
- createAddress({ variables: { type: type.value } })}
- disabled={received}
- withMargin={'0 0 0 16px'}
- mobileMargin={'16px 0 0'}
- arrow={true}
- loading={loading}
- mobileFullWidth={true}
- >
- Create Address
-
+
+
+
)}
diff --git a/src/client/src/views/home/account/sendOnChain/SendOnChain.tsx b/src/client/src/views/home/account/sendOnChain/SendOnChain.tsx
index d711880e..c97fb01c 100644
--- a/src/client/src/views/home/account/sendOnChain/SendOnChain.tsx
+++ b/src/client/src/views/home/account/sendOnChain/SendOnChain.tsx
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import { usePayAddressMutation } from '../../../../graphql/mutations/__generated__/sendToAddress.generated';
-import { InputWithDeco } from '../../../../components/input/InputWithDeco';
+import { Input } from '@/components/ui/input';
import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees';
import {
Separation,
@@ -9,15 +9,12 @@ import {
SubTitle,
} from '../../../../components/generic/Styled';
import { getErrorContent } from '../../../../utils/error';
-import { Input } from '../../../../components/input';
-import {
- MultiButton,
- SingleButton,
-} from '../../../../components/buttons/multiButton/MultiButton';
+import { cn } from '@/lib/utils';
import { Price, getPrice } from '../../../../components/price/Price';
import { useConfigState } from '../../../../context/ConfigContext';
import Modal from '../../../../components/modal/ReactModal';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { ChevronRight, Loader2 } from 'lucide-react';
import { renderLine } from '../../../../components/generic/helpers';
import { usePriceState } from '../../../../context/PriceContext';
@@ -78,39 +75,63 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
text: string,
selected: boolean
) => (
-
+
+
);
return (
<>
- setAddress(value)}
- />
+
-
+ setTokens(Number(value))}
- />
+
-
+ {
setModalOpen(true);
}}
>
- Send
-
+ {loading ? setModalOpen(false)}>
Send to Address
@@ -208,20 +228,25 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
'Fee:',
type === 'target' ? `${amount} Blocks` : `${amount} Sats/Byte`
)}
-
payAddress({
variables: { address, ...typeAmount(), ...tokenAmount },
})
}
- disabled={!canSend}
- withMargin={'16px 0 0'}
- fullWidth={true}
- arrow={true}
- loading={loading}
+ disabled={!canSend || loading}
+ style={{ margin: '16px 0 0' }}
+ className="w-full"
>
- Send To Address
-
+ {loading ? (
+
);
diff --git a/src/client/src/views/home/connect/Connect.tsx b/src/client/src/views/home/connect/Connect.tsx
index ae6f40d1..9f882a01 100644
--- a/src/client/src/views/home/connect/Connect.tsx
+++ b/src/client/src/views/home/connect/Connect.tsx
@@ -1,8 +1,7 @@
import { useState } from 'react';
import toast from 'react-hot-toast';
import { Radio, Copy, X } from 'lucide-react';
-import styled from 'styled-components';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { renderLine } from '../../../components/generic/helpers';
import { useGetNodeInfoQuery } from '../../../graphql/queries/__generated__/getNodeInfo.generated';
import { getErrorContent } from '../../../utils/error';
@@ -12,52 +11,10 @@ import {
CardTitle,
SubTitle,
Card,
- SingleLine,
DarkSubTitle,
Separation,
} from '../../../components/generic/Styled';
-import { mediaWidths, themeColors } from '../../../styles/Themes';
-
-const Key = styled.div`
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 400px;
-
- overflow-wrap: break-word;
- word-wrap: break-word;
-
- -ms-word-break: break-all;
- word-break: break-all;
-`;
-
-const Responsive = styled(SingleLine)`
- @media (${mediaWidths.mobile}) {
- flex-direction: column;
- }
-`;
-
-const Tile = styled.div<{ startTile?: boolean }>`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: ${({ startTile }) => (startTile ? 'flex-start' : 'flex-end')};
-
- @media (${mediaWidths.mobile}) {
- margin: 16px 0;
- }
-`;
-
-const TextPadding = styled.span`
- margin-left: 5px;
-`;
-
-const ButtonRow = styled.div`
- display: flex;
-
- @media (${mediaWidths.mobile}) {
- width: 100%;
- }
-`;
+import { themeColors } from '../../../styles/Themes';
export const ConnectCard = () => {
const [open, openSet] = useState(false);
@@ -91,17 +48,20 @@ export const ConnectCard = () => {
Connect
-
-
+
-
+ {`${formattedAmount} will buy you ~${formattedLiquidity} sats of inbound liquidity*.`}
+ {
purchase({ variables: { amount_cents: (amount * 100).toString() } });
}}
>
- {`Buy ${formattedAmount} of Inbound Liquidity`}
-
+ {isLoading ? (
+
+
+
);
};
diff --git a/src/client/src/views/home/liquidity/Liquidity.tsx b/src/client/src/views/home/liquidity/Liquidity.tsx
index e1bad6f7..64a76498 100644
--- a/src/client/src/views/home/liquidity/Liquidity.tsx
+++ b/src/client/src/views/home/liquidity/Liquidity.tsx
@@ -1,61 +1,14 @@
-import styled from 'styled-components';
import {
CardTitle,
CardWithTitle,
SmallButton,
SubTitle,
} from '../../../components/generic/Styled';
-import {
- cardBorderColor,
- cardColor,
- mediaWidths,
- unSelectedNavButton,
-} from '../../../styles/Themes';
import { ArrowDownRight, ArrowUpRight, X } from 'lucide-react';
import { useState } from 'react';
import { OpenChannel } from './OpenChannel';
import { BuyChannel, GoToMagma } from './BuyChannel';
-export const QuickCard = styled.div`
- background: ${cardColor};
- box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
- border-radius: 4px;
- border: 1px solid ${cardBorderColor};
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px;
- cursor: pointer;
- color: #69c0ff;
- gap: 8px;
-
- @media (${mediaWidths.mobile}) {
- padding: 4px;
- height: 80px;
- width: 80px;
- }
-
- &:hover {
- border: 1px solid #69c0ff;
- }
-`;
-
-export const QuickTitle = styled.div`
- font-size: 14px;
- color: ${unSelectedNavButton};
- text-align: center;
-`;
-
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 16px;
- margin-bottom: 16px;
- margin-top: 16px;
- `,
-};
-
export const Liquidity = () => {
const [openCard, setOpenCard] = useState('none');
@@ -67,16 +20,26 @@ export const Liquidity = () => {
return
- setOpenCard('open')}>
+
+
+
);
const renderAdvanced = () => {
if (!showAdvanced) return null;
return (
-
-
+ setPushTokens(Number(value))}
- />
+
+
);
@@ -169,17 +164,20 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
return (
-
-
+
+
- ⚠️ Performance may vary. For the best experience, connect to the
- Amboss Rails cluster.
-
+
-
+ setPublicKey(value)}
- />
+ {
-
+ setSize(Number(value))}
- />
+ {
- if (value == null) {
- setFeeRate(null);
- } else {
- setFeeRate(Number(value));
- }
- }}
- />
+ {
- if (value == null) {
- setBaseFee(null);
- } else {
- setBaseFee(Number(value));
- }
- }}
- />
+
-
+
- Minimum
+ {`${minimum} sat/vByte`}
)}
-
+
- Advanced
- setShowAdvanced(s => !s)}>
+
+
{renderAdvanced()}
-
openChannel({
@@ -368,9 +416,14 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
})
}
>
- Open Channel
-
+ {loading ? (
+
);
};
diff --git a/src/client/src/views/home/networkInfo/NetworkInfo.tsx b/src/client/src/views/home/networkInfo/NetworkInfo.tsx
index e00687f2..c1eed995 100644
--- a/src/client/src/views/home/networkInfo/NetworkInfo.tsx
+++ b/src/client/src/views/home/networkInfo/NetworkInfo.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
import { Globe, Cpu } from 'lucide-react';
import { useGetNetworkInfoQuery } from '../../../graphql/queries/__generated__/getNetworkInfo.generated';
import {
@@ -8,55 +7,39 @@ import {
SingleLine,
Separation,
} from '../../../components/generic/Styled';
-import { unSelectedNavButton, mediaWidths } from '../../../styles/Themes';
import { LoadingCard } from '../../../components/loading/LoadingCard';
import { Price } from '../../../components/price/Price';
+import { cn } from '@/lib/utils';
-const Tile = styled.div<{ start?: boolean }>`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin: 0 16px;
- align-items: ${({ start }) => (start ? 'flex-start' : 'flex-end')};
+const Tile = ({
+ children,
+ className,
+ start,
+}: {
+ children: React.ReactNode;
+ className?: string;
+ start?: boolean;
+}) => (
+
Network Info
-
+
- <Padding>
+ <span className="-mb-0.5 mr-0.5">
<Globe size={18} color={'#2f6fb7'} />
- </Padding>
+ </span>
Global
@@ -113,13 +96,13 @@ export const NetworkInfo = () => {
Zombie Nodes
{notRecentlyUpdatedPolicyCount}
-
+
+
- <Padding>
+ <span className="-mb-0.5 mr-0.5">
<Cpu size={18} color={'#2f6fb7'} />
- </Padding>
+ </span>
Channel Size
@@ -138,7 +121,7 @@ export const NetworkInfo = () => {
Min
{minSize}
-
+
);
diff --git a/src/client/src/views/home/quickActions/QuickActions.tsx b/src/client/src/views/home/quickActions/QuickActions.tsx
index 26f8adab..85f9f017 100644
--- a/src/client/src/views/home/quickActions/QuickActions.tsx
+++ b/src/client/src/views/home/quickActions/QuickActions.tsx
@@ -1,5 +1,4 @@
import { useState } from 'react';
-import styled from 'styled-components';
import { X, Layers, Command, Zap } from 'lucide-react';
import {
CardWithTitle,
@@ -8,12 +7,6 @@ import {
SmallButton,
Card,
} from '../../../components/generic/Styled';
-import {
- unSelectedNavButton,
- cardColor,
- cardBorderColor,
- mediaWidths,
-} from '../../../styles/Themes';
import { DecodeCard } from './decode/Decode';
import { SupportCard } from './donate/DonateCard';
import { SupportBar } from './donate/DonateContent';
@@ -21,45 +14,33 @@ import { LnUrlCard } from './lnurl';
import { AmbossCard } from './amboss/AmbossCard';
import { LightningAddressCard } from './lightningAddress/LightningAddress';
-export const QuickCard = styled.div`
- background: ${cardColor};
- box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
- border-radius: 4px;
- border: 1px solid ${cardBorderColor};
- height: 100px;
- width: 100px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 10px;
- cursor: pointer;
- color: #69c0ff;
+export const QuickCard = ({
+ children,
+ className,
+ onClick,
+ ...props
+}: React.HTMLAttributes) => (
+ ) => (
+
+
setOpenCard('support')} />
setOpenCard('lightning_address')}>
@@ -108,7 +89,7 @@ export const QuickActions = () => {
LNURL
-
+
);
}
};
diff --git a/src/client/src/views/home/quickActions/amboss/AmbossCard.tsx b/src/client/src/views/home/quickActions/amboss/AmbossCard.tsx
index 48d2fa1e..7565054d 100644
--- a/src/client/src/views/home/quickActions/amboss/AmbossCard.tsx
+++ b/src/client/src/views/home/quickActions/amboss/AmbossCard.tsx
@@ -3,56 +3,8 @@ import toast from 'react-hot-toast';
import { useLoginAmbossMutation } from '../../../../graphql/mutations/__generated__/loginAmboss.generated';
import { useGetAmbossLoginTokenLazyQuery } from '../../../../graphql/queries/__generated__/getAmbossLoginToken.generated';
import { useAmbossUser } from '../../../../hooks/UseAmbossUser';
-import {
- cardBorderColor,
- cardColor,
- mediaWidths,
- unSelectedNavButton,
-} from '../../../../styles/Themes';
-import styled from 'styled-components';
import { appendBasePath } from '../../../../utils/basePath';
-const QuickTitle = styled.div`
- font-size: 12px;
- color: ${unSelectedNavButton};
- margin-top: 10px;
-`;
-
-const QuickCard = styled.button`
- background: ${cardColor};
- box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
- border-radius: 4px;
- border: 1px solid ${cardBorderColor};
- height: 100px;
- width: 100px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 10px;
- cursor: pointer;
- color: #69c0ff;
-
- @media (${mediaWidths.mobile}) {
- padding: 4px;
- height: 80px;
- width: 80px;
- }
-
- &:hover {
- background-color: #ff0080;
- color: white;
-
- img {
- filter: brightness(0) invert(1);
- }
-
- & ${QuickTitle} {
- color: white;
- }
- }
-`;
-
export const AmbossCard = () => {
const { user } = useAmbossUser();
@@ -80,7 +32,8 @@ export const AmbossCard = () => {
if (!user) {
return (
- {
if (loading) return;
login();
@@ -88,18 +41,22 @@ export const AmbossCard = () => {
disabled={loading}
>
})
- {loading ? 'Loading...' : 'Login'}
-
+ {
if (tokenLoading) return;
getToken();
@@ -107,12 +64,15 @@ export const AmbossCard = () => {
disabled={tokenLoading}
>
- {tokenLoading ? 'Loading...' : 'Go To'}
-
+ Request:
setRequest(e.target.value)}
/>
- {
setShow(true);
}}
>
- Decode
-
+ Decode
+
+
+ {data.createAddress}
+
+
+
+ Send to Address
+
+ setAddress(e.target.value)}
+ />
+
+
{!sendAll && (
-
+ Send All
+
+
{renderButton(() => setSendAll(true), 'Yes', sendAll)}
{renderButton(() => setSendAll(false), 'No', !sendAll)}
-
-
+
+
+
)}
+ Amount
+
+
+ 0 ? tokens : ''}
+ onChange={e => setTokens(Number(e.target.value))}
+ />
+
+
+
+ Fee
+
+
{fetchFees &&
!dontShow &&
renderButton(
@@ -137,35 +158,34 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
'Target Confirmations',
type === 'target'
)}
-
-
-
- {'(~'}
- {feeFormat(amount * 223)}
- {')'}
-
- )
- }
- >
+
+
+
+
{!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)}
+ Fee Amount
+
+ {type === 'target' ? (
+ `(~${amount} blocks)`
+ ) : (
+
+ {'(~'}
+ {feeFormat(amount * 223)}
+ {')'}
+
+ )}
+
+
{type !== 'none' ? (
0 ? amount : undefined}
- maxWidth={'500px'}
+ className="ml-0 md:ml-2"
+ style={{ maxWidth: '500px' }}
+ value={amount && amount > 0 ? amount : ''}
placeholder={type === 'target' ? 'Blocks' : 'Sats/Byte'}
type={'number'}
- withMargin={'0 0 0 8px'}
onChange={e => setAmount(Number(e.target.value))}
/>
) : (
-
{renderButton(
() => setAmount(fast),
`Fastest (${fast} sats)`,
@@ -182,22 +202,22 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
`Hour (${hour} sats)`,
amount === hour
)}
-
+
)}
-
+
+
Public Key
- {public_key}
-
-
+
+
+
{open && (
<>
+
+
+ {public_key}
+
{onionAddress ? (
-
navigator.clipboard
.writeText(onionAddress)
@@ -109,13 +69,12 @@ export const ConnectCard = () => {
}
>
Onion
-
+ Onion
+
) : null}
{normalAddress ? (
-
navigator.clipboard
.writeText(normalAddress)
@@ -123,17 +82,13 @@ export const ConnectCard = () => {
}
>
+
) : null}
- openSet(s => !s)}
- >
+
-
-
+
+
+
Secure liquidity from the{' '}
{
Magma sellers
{' '}
to ensure you can accept payments reliably.
-
- {
- const minAmount = Math.max(Number(value), 5);
- setAmount(minAmount);
- }}
- />
+
+
+
-
+ Purchase Amount
+
+ {formattedAmount}
+
+
+ 0 ? amount : ''}
+ onChange={e => {
+ const minAmount = Math.max(Number(e.target.value), 5);
+ setAmount(minAmount);
+ }}
+ />
+
+ {`${formattedAmount} will buy you ~${formattedLiquidity} sats of inbound liquidity*.`}
+
- * Liquidity may be sourced from different providers that charge different fees, hence the estimated amounts in sats. -
+
);
}
};
diff --git a/src/client/src/views/home/liquidity/OpenChannel.tsx b/src/client/src/views/home/liquidity/OpenChannel.tsx
index bd33bf5b..a06f823d 100644
--- a/src/client/src/views/home/liquidity/OpenChannel.tsx
+++ b/src/client/src/views/home/liquidity/OpenChannel.tsx
@@ -1,13 +1,13 @@
import { useState, useEffect } from 'react';
-import { ChevronRight, Settings, X } from 'lucide-react';
+import { ChevronRight, Settings, X, Loader2 } from 'lucide-react';
import toast from 'react-hot-toast';
import { useOpenChannelMutation } from '../../../graphql/mutations/__generated__/openChannel.generated';
-import { InputWithDeco } from '../../../components/input/InputWithDeco';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
+import { Input } from '@/components/ui/input';
+import { Price } from '../../../components/price/Price';
+import { Button } from '@/components/ui/button';
import { useBitcoinFees } from '../../../hooks/UseBitcoinFees';
import { useConfigState } from '../../../context/ConfigContext';
import { PeerSelect } from '../../../components/select/specific/PeerSelect';
-import styled from 'styled-components';
import {
Card,
DarkSubTitle,
@@ -16,39 +16,12 @@ import {
SubCard,
} from '../../../components/generic/Styled';
import { getErrorContent } from '../../../utils/error';
-import { Input } from '../../../components/input';
-import {
- SingleButton,
- MultiButton,
-} from '../../../components/buttons/multiButton/MultiButton';
+import { cn } from '@/lib/utils';
type OpenChannelProps = {
closeCbk: () => void;
};
-const LineTitle = styled.div`
- white-space: nowrap;
- font-size: 14px;
-`;
-
-const RecommendedBanner = styled.div`
- text-align: center;
- font-size: 14px;
- background: oklch(0.982 0.018 155.826);
- color: oklch(0.627 0.194 149.214);
- padding: 8px;
- border-radius: 8px;
-`;
-
-const NotRecommendedBanner = styled.div`
- text-align: center;
- font-size: 14px;
- background: oklch(0.987 0.022 95.277);
- color: oklch(0.666 0.179 58.318);
- padding: 8px;
- border-radius: 8px;
-`;
-
export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
const [useRecommended, setUseRecommended] = useState(true);
@@ -102,19 +75,26 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
onClick: () => void,
text: string,
selected: boolean,
- buttonColor?: string
+ variant?: 'default' | 'destructive'
) => (
- setOpenCard('open')}
+ >
Open a Channel
-
- setOpenCard('buy')}>
+
+
+ Open a Channel
+
+ setOpenCard('buy')}
+ >
Buy Inbound Liquidity
-
-
+
+
+ Buy Inbound Liquidity
+
+
+
+
+ Type
+
+
{renderButton(
() => setPrivateChannel(true),
'Private',
@@ -125,10 +105,13 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
'Public',
!privateChannel
)}
-
-
-
-
+
+
+
{pushType === 'custom' && (
-
+ Push Tokens to Partner
+
+
{renderButton(
() => setPushType('none'),
'None',
@@ -138,30 +121,42 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
() => setPushType('half'),
'Half',
pushType === 'half',
- 'red'
+ 'destructive'
)}
{renderButton(
() => setPushType('custom'),
'Custom',
pushType === 'custom',
- 'red'
+ 'destructive'
)}
-
-
+
+
+
)}
{pushType !== 'none' && (
-
+ Amount
+
+
+ 0
+ ? Math.min(pushTokens, size * 0.9)
+ : ''
+ }
+ onChange={e => setPushTokens(Number(e.target.value))}
+ />
+
You will lose these pushed tokens.
-
+
)}
+
+ Recommended Peer
+
+
{renderButton(() => setUseRecommended(true), 'Yes', useRecommended)}
{renderButton(() => setUseRecommended(false), 'No', !useRecommended)}
-
-
+
+
Connect to the{' '}
{
Amboss Rails cluster
{' '}
- optimized for fast, reliable, high-throughput payments.
-
+
) : (
<>
-
+ Performance may vary. For the best experience, connect to the Amboss
+ Rails cluster.
+
-
+
{isNewPeer ? (
-
+ Is New Peer
+
+
{renderButton(() => setIsNewPeer(true), 'Yes', isNewPeer)}
{renderButton(() => setIsNewPeer(false), 'No', !isNewPeer)}
-
-
+
+
+
) : (
+ New Node
+
+ setPublicKey(e.target.value)}
+ />
+
+
{!isMaxFunding ? (
-
+ Max Size
+
+
{renderButton(
() => {
setIsMaxFunding(true);
@@ -233,58 +243,89 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
isMaxFunding
)}
{renderButton(() => setIsMaxFunding(false), 'No', !isMaxFunding)}
-
-
+
+
+
) : null}
+ Channel Size
+
+
+ 0 ? size : ''}
+ onChange={e => setSize(Number(e.target.value))}
+ />
+
+
-
+ Fee Rate
+ {feeRate != null && (
+
+
+ 0 ? feeRate : ''}
+ onChange={e => {
+ if (e.target.value === '') {
+ setFeeRate(null);
+ } else {
+ setFeeRate(Number(e.target.value));
+ }
+ }}
+ />
+
+
+ Base Fee
+ {baseFee != null && (
+
+
+ 0 ? baseFee : ''}
+ onChange={e => {
+ if (e.target.value === '') {
+ setBaseFee(null);
+ } else {
+ setBaseFee(Number(e.target.value));
+ }
+ }}
+ />
+
+
+ Fee
+
+
{renderButton(
() => {
setType('none');
@@ -301,26 +342,33 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
'Fee (sats/vByte)',
type === 'fee'
)}
-
-
+
+ Minimum
+
+
+ Fee Amount
+
+
{type !== 'none' && (
setFee(Number(e.target.value))}
/>
)}
{type === 'none' && (
-
{renderButton(
() => setFee(fast),
`Fastest (${fast})`,
@@ -333,21 +381,21 @@ export const OpenChannel = ({ closeCbk }: OpenChannelProps) => {
fee === halfHour
)}
{renderButton(() => setFee(hour), `Hour (${hour})`, fee === hour)}
-
+
)}
-
+ Advanced
+
+ {children}
+
+);
- @media (${mediaWidths.mobile}) {
- margin: 0 0 8px;
- flex-direction: row;
- width: 100%;
- }
-`;
+const TileTitle = ({ children }: { children: React.ReactNode }) => (
+ {children}
+);
-const TileTitle = styled.div`
- font-size: 14px;
- color: ${unSelectedNavButton};
- margin-bottom: 10px;
-
- @media (${mediaWidths.mobile}) {
- margin-bottom: 0;
- }
-`;
-
-const Title = styled.div`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: 120px;
-
- @media (${mediaWidths.mobile}) {
- justify-content: center;
- padding-bottom: 16px;
- width: 100%;
- }
-`;
-
-const ResponsiveLine = styled(SingleLine)`
- flex-wrap: wrap;
-`;
-
-const Padding = styled.span`
- margin-bottom: -2px;
- margin-right: 2px;
-`;
+const Title = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+);
export const NetworkInfo = () => {
const { loading, data, error } = useGetNetworkInfoQuery();
@@ -90,11 +73,11 @@ export const NetworkInfo = () => {
+ {children}
+
+);
- @media (${mediaWidths.mobile}) {
- padding: 4px;
- height: 80px;
- width: 80px;
- }
-
- &:hover {
- border: 1px solid #69c0ff;
- }
-`;
-
-export const QuickTitle = styled.div`
- font-size: 12px;
- color: ${unSelectedNavButton};
- margin-top: 10px;
- text-align: center;
-`;
-
-const QuickRow = styled.div`
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin: 16px 0px 32px;
-`;
+export const QuickTitle = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
export const QuickActions = () => {
const [openCard, setOpenCard] = useState('none');
@@ -93,7 +74,7 @@ export const QuickActions = () => {
return
-
+ {loading ? 'Loading...' : 'Login'}
+
+
);
}
return (
-
-
+ {tokenLoading ? 'Loading...' : 'Go To'}
+
+
);
};
diff --git a/src/client/src/views/home/quickActions/decode/Decode.tsx b/src/client/src/views/home/quickActions/decode/Decode.tsx
index af40f0af..897d68bf 100644
--- a/src/client/src/views/home/quickActions/decode/Decode.tsx
+++ b/src/client/src/views/home/quickActions/decode/Decode.tsx
@@ -4,9 +4,11 @@ import {
Sub4Title,
ResponsiveLine,
} from '../../../../components/generic/Styled';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
-import { Input } from '../../../../components/input';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
+import { Input } from '@/components/ui/input';
import { Decoded } from './Decoded';
+import { cn } from '@/lib/utils';
export const DecodeCard = () => {
const [request, setRequest] = useState('');
@@ -19,23 +21,21 @@ export const DecodeCard = () => {
{
+ (e.currentTarget as HTMLElement).style.backgroundColor =
+ chartColors.green;
+ (e.currentTarget as HTMLElement).style.color = 'white';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLElement).style.backgroundColor = '';
+ (e.currentTarget as HTMLElement).style.color = '#69c0ff';
+ }}
+ >
Donate
-
+
);
};
diff --git a/src/client/src/views/home/quickActions/donate/DonateContent.tsx b/src/client/src/views/home/quickActions/donate/DonateContent.tsx
index 614c3742..1af3c992 100644
--- a/src/client/src/views/home/quickActions/donate/DonateContent.tsx
+++ b/src/client/src/views/home/quickActions/donate/DonateContent.tsx
@@ -5,7 +5,8 @@ import {
Separation,
Sub4Title,
} from '../../../../components/generic/Styled';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
import Modal from '../../../../components/modal/ReactModal';
import { Emoji } from '../../../../components/emoji/Emoji';
import { useGetLightningAddressInfoLazyQuery } from '../../../../graphql/queries/__generated__/getLightningAddressInfo.generated';
@@ -73,15 +74,15 @@ export const SupportBar = () => {
+ Donate
+
+
{savedAddresses.map((a, index) => (
- handleClick(a)} key={`${index}${a}`}>
+
+
))}
-
+
);
};
diff --git a/src/client/src/views/home/quickActions/lightningAddress/LightningAddress.tsx b/src/client/src/views/home/quickActions/lightningAddress/LightningAddress.tsx
index addfa00e..029ddd71 100644
--- a/src/client/src/views/home/quickActions/lightningAddress/LightningAddress.tsx
+++ b/src/client/src/views/home/quickActions/lightningAddress/LightningAddress.tsx
@@ -1,8 +1,9 @@
import { useState } from 'react';
import toast from 'react-hot-toast';
-import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ChevronRight, Loader2 } from 'lucide-react';
import { Card } from '../../../../components/generic/Styled';
-import { InputWithDeco } from '../../../../components/input/InputWithDeco';
import Modal from '../../../../components/modal/ReactModal';
import { useGetLightningAddressInfoLazyQuery } from '../../../../graphql/queries/__generated__/getLightningAddressInfo.generated';
import { useLocalStorage } from '../../../../hooks/UseLocalStorage';
@@ -40,21 +41,32 @@ export const LightningAddressCard = () => {
return (
<>
+ Lightning Address
+
+ setAddress(e.target.value)}
+ />
+
+
+ Missing information from LN Service
+
+ );
}
const callbackUrl = new URL(callback);
@@ -41,21 +40,25 @@ export const LnChannel: FC{`Request from ${callbackUrl.host}`}
+ Missing information from LN Service
+
+ );
}
const callbackUrl = new URL(callback);
@@ -56,11 +51,13 @@ export const LnPay: FC{description}
+ )}
{url && (
-
{url}
-
+
)}
);
@@ -70,7 +67,7 @@ export const LnPay: FC{message}
}
);
}
@@ -79,7 +76,9 @@ export const LnPay: FC{description}
+ )}
{renderLine('Ciphertext', ciphertext)}
{renderLine('IV', iv)}
@@ -94,7 +93,7 @@ export const LnPay: FC{`Pay to ${callbackUrl.host}`}
+
)}
{!isSame && (
-
+ {`Comment (Max ${commentAllowed} characters)`}
+
+
+ setComment(e.target.value.substring(0, commentAllowed))
+ }
+ />
+
+
)}
-
+ Amount
+
+
+ 0 ? amount : ''}
+ onChange={e => setAmount(Number(e.target.value))}
+ />
+
+ Missing information from LN Service
+
+ );
}
const callbackUrl = new URL(callback);
@@ -77,34 +70,34 @@ export const LnWithdraw: FC
+
+ {!isSame && (
+
+ Description
+
+ setDescription(e.target.value)}
/>
+
+
)}
-
+ Amount
+
+
+ 0 ? amount : ''}
+ onChange={e => setAmount(Number(e.target.value))}
+ />
+ {`Withdraw from ${callbackUrl.host}`}
+ LNURL
+
+ setLnUrl(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleDecode()}
+ />
+
+ {`Login to ${fullUrl.host}`}
;
+
+
);
}
@@ -124,11 +92,11 @@ export const TransactionsGraph: FC
+
);
}
@@ -136,8 +104,11 @@ export const TransactionsGraph: FC
No {showPay ? 'payments' : 'invoices'} for this period.
-
-
+
+
+
{
return {
@@ -149,7 +120,7 @@ export const TransactionsGraph: FC = ({
title={labels.title || ''}
dataKey={showPay ? 'Payments' : 'Invoices'}
/>
-
-
+
+
);
};
diff --git a/src/client/src/views/home/reports/flow/index.tsx b/src/client/src/views/home/reports/flow/index.tsx
index 1d7db361..cf189dd8 100644
--- a/src/client/src/views/home/reports/flow/index.tsx
+++ b/src/client/src/views/home/reports/flow/index.tsx
@@ -1,7 +1,5 @@
import { useState } from 'react';
-import styled from 'styled-components';
import { SmallSelectWithValue } from '../../../../components/select';
-import { mediaWidths } from '../../../../styles/Themes';
import {
CardWithTitle,
SubTitle,
@@ -10,26 +8,6 @@ import {
} from '../../../../components/generic/Styled';
import { TransactionsGraph } from './TransactionGraph';
-const S = {
- row: styled.div`
- width: 100%;
- display: grid;
- column-gap: 16px;
- grid-template-columns: 1fr 110px 110px;
- margin-bottom: 8px;
- `,
- grid: styled.div`
- width: 100%;
- display: grid;
- grid-gap: 8px;
- grid-template-columns: 1fr 1fr;
-
- @media (${mediaWidths.mobile}) {
- grid-template-columns: 1fr;
- }
- `,
-};
-
export interface PeriodProps {
period: number;
amount: number;
@@ -53,21 +31,24 @@ export const FlowBox = () => {
const Header = () => {
return (
+ setShow((e[0] || options[1]) as any)}
+ options={options}
+ value={show}
+ isClearable={false}
+ />
+ setType((e[0] || typeOptions[1]) as any)}
+ options={typeOptions}
+ value={type}
+ isClearable={false}
+ />
+
+
+
Day
{renderValue(values.day)}
-
-
+
+
Week
{renderValue(values.week)}
-
-
+
+
Month
{renderValue(values.month)}
-
-
+
+
Year
{renderValue(values.year)}
-
-
+
+
);
};
diff --git a/src/client/src/views/home/reports/forwardReport/ForwardsGraph.tsx b/src/client/src/views/home/reports/forwardReport/ForwardsGraph.tsx
index dae7d503..84058173 100644
--- a/src/client/src/views/home/reports/forwardReport/ForwardsGraph.tsx
+++ b/src/client/src/views/home/reports/forwardReport/ForwardsGraph.tsx
@@ -4,38 +4,6 @@ import { LoadingCard } from '../../../../components/loading/LoadingCard';
import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
import { chartColors } from '../../../../styles/Themes';
import { getByTime } from '../../../../views/dashboard/widgets/helpers';
-import styled from 'styled-components';
-
-const S = {
- row: styled.div`
- display: grid;
- grid-template-columns: 1fr 60px 90px;
- `,
- wrapper: styled.div`
- width: 100%;
- height: 320px;
- `,
- contentWrapper: styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `,
- content: styled.div`
- width: 100%;
- padding: 0 16px;
- height: calc(100% - 40px);
- overflow: auto;
- `,
- title: styled.h4`
- font-weight: 900;
- margin: 8px 0;
- `,
- nowrap: styled.div`
- white-space: nowrap;
- `,
-};
type DayOptionProps = {
label: string;
@@ -60,27 +28,29 @@ export const ForwardsGraph: FC
+
);
}
if (!data?.getForwards.list.length) {
return (
-
+
);
}
const forwards = getByTime(data.getForwards.list, days.value);
return (
-
+ No forwards for this period.
+
+
+
({
@@ -90,7 +60,7 @@ export const ForwardsGraph: FC = ({ days, type }) => {
colorRange={[chartColors.purple]}
dataKey="Forward"
/>
-
-
+
+
);
};
diff --git a/src/client/src/views/home/reports/forwardReport/index.tsx b/src/client/src/views/home/reports/forwardReport/index.tsx
index 7a6edc7c..6682fc4b 100644
--- a/src/client/src/views/home/reports/forwardReport/index.tsx
+++ b/src/client/src/views/home/reports/forwardReport/index.tsx
@@ -1,37 +1,27 @@
import { useState } from 'react';
import { SmallSelectWithValue } from '../../../../components/select';
-import styled from 'styled-components';
import {
CardWithTitle,
SubTitle,
Card,
CardTitle,
} from '../../../../components/generic/Styled';
-import { mediaWidths } from '../../../../styles/Themes';
import { ForwardChannelsReport } from './ForwardChannelReport';
import { ForwardResume } from './ForwardResume';
import { ForwardsGraph } from './ForwardsGraph';
-export const CardContent = styled.div`
- height: 100%;
- display: flex;
- flex-flow: column;
- padding: 0 16px;
-
- @media (${mediaWidths.mobile}) {
- padding: 0 8px;
- }
-`;
-
-const S = {
- row: styled.div`
- width: 100%;
- display: grid;
- column-gap: 16px;
- grid-template-columns: 1fr 70px 90px;
- margin-bottom: 8px;
- `,
-};
+export const CardContent = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
export const options = [
{ label: '1D', value: 1 },
@@ -53,9 +43,10 @@ export const ForwardBox = () => {
return (
+
+
+ Unable to get liquidity data.
+
+
+
{'To start you must create an account on your server. '}
{
- setDetailsOpen(p => !p)}>
+
-
+
);
};
@@ -101,9 +99,9 @@ export const Accounts = () => {
if (loadingData) {
return (
-
+ Hi! Welcome to ThunderHub
+
setDetailsOpen(p => !p)}
+ >
{'Did you already create accounts?'}
{detailsOpen ?
{detailsOpen && (
<>
{type === 'sso' ? 'SSO Account' : name}
-
+
{loggedIn ?
+
);
};
@@ -155,31 +153,38 @@ export const Accounts = () => {
return (
<>
{newAccount &&
+
{accountData?.getServerAccounts?.map((account, index) => {
if (!account) return null;
+ const isThisLoading = newAccount?.id === account.id && loading;
return (
-
+
{getTitle(account)}
-
- {getButtonTitle(account)}
-
+ {isThisLoading ? (
+
-
+
);
})}
-
+
);
};
diff --git a/src/client/src/views/homepage/HomePage.styled.ts b/src/client/src/views/homepage/HomePage.styled.ts
deleted file mode 100644
index 331740e6..00000000
--- a/src/client/src/views/homepage/HomePage.styled.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import styled from 'styled-components';
-import { fontColors, mediaWidths, headerColor } from '../../styles/Themes';
-
-export const Headline = styled.div`
- padding: 16px 0;
- width: 100%;
-
- @media (${mediaWidths.mobile}) {
- padding: 0;
- }
-`;
-
-export const HomeTitle = styled.h1<{ textColor?: string }>`
- width: 100%;
- text-align: center;
- color: ${({ textColor }) => (textColor ? textColor : fontColors.white)};
- font-size: 56px;
- margin: 0;
- font-weight: 900;
-
- @media (${mediaWidths.mobile}) {
- font-size: 24px;
- }
-`;
-
-export const HomeText = styled.p`
- color: ${fontColors.white};
- text-align: center;
- font-size: 20px;
-
- @media (${mediaWidths.mobile}) {
- font-size: 14px;
- margin: 0 32px;
- }
-`;
-
-export const FullWidth = styled.div`
- display: flex;
- justify-content: center;
- width: 100%;
- margin-top: 8px;
-`;
-
-export const ConnectTitle = styled.div<{ changeColor?: boolean | null }>`
- width: 100%;
- font-size: 18px;
- ${({ changeColor }) => changeColor && `color: ${fontColors.white};`}
- padding-bottom: 8px;
-`;
-
-export const LockPadding = styled.span`
- margin-left: 4px;
-`;
-
-export const ThunderStorm = styled.img`
- height: 320px;
- width: 100%;
- top: 0px;
- object-fit: cover;
- position: absolute;
- z-index: -1;
- background-color: ${headerColor};
-
- @media (${mediaWidths.mobile}) {
- font-size: 15px;
- }
-`;
diff --git a/src/client/src/views/homepage/Login.tsx b/src/client/src/views/homepage/Login.tsx
index 7c6c8f7a..667b5793 100644
--- a/src/client/src/views/homepage/Login.tsx
+++ b/src/client/src/views/homepage/Login.tsx
@@ -1,13 +1,12 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import { getErrorContent } from '../../utils/error';
-import { Lock } from 'lucide-react';
+import { Lock, Loader2 } from 'lucide-react';
import { getVersion } from '../../utils/version';
import { useGetSessionTokenMutation } from '../../graphql/mutations/__generated__/getSessionToken.generated';
import { SingleLine, Sub4Title, Card } from '../../components/generic/Styled';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { Input } from '../../components/input';
-import { Section } from '../../components/section/Section';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
import { chartColors } from '../../styles/Themes';
import { config } from '../../config/thunderhubConfig';
import { GetServerAccountsQuery } from '../../graphql/queries/__generated__/getServerAccounts.generated';
@@ -51,7 +50,7 @@ export const Login = ({ account }: LoginProps) => {
};
return (
-
{!newAccount ? 'Accounts' : 'Other Accounts'}
-
+
{`Login to ${account.name}`}
@@ -65,34 +64,40 @@ export const Login = ({ account }: LoginProps) => {
Password
setPass(e.target.value)}
- onEnter={() => handleEnter()}
+ onKeyDown={e => {
+ if (e.key === 'Enter') handleEnter();
+ }}
/>
{config.disable2FA ? null : (
{'2FA (if enabled)'}
setToken(e.target.value)}
- onEnter={() => handleEnter()}
+ onKeyDown={e => {
+ if (e.key === 'Enter') handleEnter();
+ }}
/>
)}
- handleEnter()}
- withMargin={'16px 0 0'}
- fullWidth={true}
- loading={loading}
+ style={{ margin: '16px 0 0' }}
+ className="w-full"
>
- Connect
-
+ {loading ? (
+
+
);
diff --git a/src/client/src/views/peers/AddPeer.tsx b/src/client/src/views/peers/AddPeer.tsx
index fbbe71c9..8b85ec97 100644
--- a/src/client/src/views/peers/AddPeer.tsx
+++ b/src/client/src/views/peers/AddPeer.tsx
@@ -1,8 +1,8 @@
import { useState } from 'react';
-import { X } from 'lucide-react';
+import { X, ChevronRight, Loader2 } from 'lucide-react';
import toast from 'react-hot-toast';
import { useAddPeerMutation } from '../../graphql/mutations/__generated__/addPeer.generated';
-import { InputWithDeco } from '../../components/input/InputWithDeco';
+import { Input } from '@/components/ui/input';
import {
CardWithTitle,
SubTitle,
@@ -12,11 +12,8 @@ import {
NoWrapTitle,
Separation,
} from '../../components/generic/Styled';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
import { getErrorContent } from '../../utils/error';
export const AddPeer = () => {
@@ -45,9 +42,13 @@ export const AddPeer = () => {
text: string,
selected: boolean
) => (
-
+
+ + Control the Lightning +
+
+
+ Monitor and manage your node from any browser and any device. - - - - +
+
{renderButton(
() => {
setKey('');
@@ -73,54 +74,77 @@ export const AddPeer = () => {
'Separate',
separate
)}
-
+
+
)}
{separate && (
<>
-
+ Url
+
+ setUrl(e.target.value)}
+ placeholder={'public_key@socket'}
+ />
+
+
+
+ Public Key
+
+ setKey(e.target.value)}
+ placeholder={'Public Key'}
+ />
+
+
)}
+ Socket
+
+ setSocket(e.target.value)}
+ placeholder={'Socket'}
+ />
+
{renderButton(() => setTemp(true), 'Yes', temp)}
{renderButton(() => setTemp(false), 'No', !temp)}
-
+
{title}
+
+ {loading ? (
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
{renderButton('Hide', 'fee', hideFee, true)}
{renderButton('Show', 'fee', !hideFee, false)}
-
+
{renderButton('Hide', 'nonverified', hideNonVerified, true)}
{renderButton('Show', 'nonverified', !hideNonVerified, false)}
-
+
{renderButton('10', 'maxFee', maxFee === 10, 10)}
{renderButton('20', 'maxFee', maxFee === 20, 20)}
{renderButton('30', 'maxFee', maxFee === 30, 30)}
{renderButton('50', 'maxFee', maxFee === 50, 50)}
{renderButton('100', 'maxFee', maxFee === 100, 100)}
-
+
{renderButton('1s', 'pollingSpeed', cps === 1000, 1000)}
{renderButton('5s', 'pollingSpeed', cps === 5000, 5000)}
{renderButton('10s', 'pollingSpeed', cps === 10000, 10000)}
@@ -92,7 +91,7 @@ export const ChatSettings = () => {
{renderButton('10m', 'pollingSpeed', cps === 600000, 600000)}
{renderButton('30m', 'pollingSpeed', cps === 1800000, 1800000)}
{renderButton('None', 'pollingSpeed', cps === 0, 0)}
-
+
+ {children}
+
+);
-const OutlineCard = styled(Card)`
- &:hover {
- border: 1px solid red;
- }
-`;
+export const SettingsLine = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
-export const CheckboxText = styled.div`
- font-size: 13px;
- color: ${fontColors.grey7};
- text-align: justify;
-`;
+export const StyledContainer = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
-export const StyledContainer = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 16px;
-`;
-
-export const FixedWidth = styled.div`
- height: 18px;
- width: 18px;
- margin: 0px;
- margin-right: 8px;
-`;
+export const FixedWidth = ({
+ children,
+ className,
+ ...props
+}: React.HTMLAttributes
+ {children}
+
+);
export const DangerView = () => {
- const chatDispatch = useChatDispatch();
-
const [logout] = useLogoutMutation({
onCompleted: () => {
safeRedirect(
@@ -62,7 +79,6 @@ export const DangerView = () => {
});
const handleDeleteAll = () => {
- chatDispatch({ type: 'disconnected' });
localStorage.clear();
sessionStorage.clear();
@@ -72,13 +88,13 @@ export const DangerView = () => {
return (
{renderButton('Light', 'light', 'theme', theme)}
{renderButton('Dark', 'dark', 'theme', theme)}
-
+
{renderButton('Satoshis', 'sat', 'currency', currency)}
{renderButton('Bitcoin', 'btc', 'currency', currency)}
{!dontShow && renderButton('Fiat', 'fiat', 'currency', currency)}
-
+
{renderButton('Yes', 'yes', 'symbol', useSatWord ? 'yes' : '')}
{renderButton('No', '', 'symbol', useSatWord ? 'yes' : '')}
-
+
+
+
);
};
diff --git a/src/client/src/views/settings/Privacy.tsx b/src/client/src/views/settings/Privacy.tsx
index 2243f822..8c4a7789 100644
--- a/src/client/src/views/settings/Privacy.tsx
+++ b/src/client/src/views/settings/Privacy.tsx
@@ -7,10 +7,8 @@ import {
import { SettingsLine } from '../../pages/SettingsPage';
import { useConfigState, useConfigDispatch } from '../../context/ConfigContext';
-import {
- MultiButton,
- SingleButton,
-} from '../../components/buttons/multiButton/MultiButton';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
export const PrivacySettings = () => {
const { fetchFees, fetchPrices, displayValues } = useConfigState();
@@ -22,15 +20,16 @@ export const PrivacySettings = () => {
type: string,
current: boolean
) => (
-
{renderButton('On', true, 'fetchFees', fetchFees)}
{renderButton('Off', false, 'fetchFees', fetchFees)}
-
+
{renderButton('On', true, 'fetchPrices', fetchPrices)}
{renderButton('Off', false, 'fetchPrices', fetchPrices)}
-
+
{renderButton('Show', true, 'displayValues', displayValues)}
{renderButton('Hide', false, 'displayValues', displayValues)}
-
+
+ {error.message}
+
+ );
}
if (!data?.getTwofaSecret.url) {
- return
+ Unable to get secret to enable 2FA.
+
+ );
}
const handleClick = () => {
@@ -73,30 +64,40 @@ const Enable: FC<{ callback: () => void }> = ({ callback }) => {
return (
<>
+
+ 2FA
+
+ setToken(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleClick()}
+ />
+
+
+ 2FA
+
+ setToken(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleClick()}
+ />
+
+ openSet(open ? 0 : index)}
+ >
{channel?.partner?.node?.alias}
- {renderContent()}
+
-
+
{open && renderDetails()}
+ {renderContent()}
+
openSet(open ? 0 : index)}
+ >
{channel?.partner?.node?.alias}
-
+
{'Score'}
{channel.score}
{getIcon(channel.score)}
-
+
-
+
{open && renderContent()}
Node Statistics
+
+
Flow
- {volumeScore}
+
-
-
+
+
Time
- {timeScore}
+
-
-
+
+
Fee
- {feeScore}
+
-
-
+
+
);
};
diff --git a/src/client/src/views/stats/TimeStats.tsx b/src/client/src/views/stats/TimeStats.tsx
index 1b47d86b..311525ed 100644
--- a/src/client/src/views/stats/TimeStats.tsx
+++ b/src/client/src/views/stats/TimeStats.tsx
@@ -12,7 +12,7 @@ import { sortBy } from 'lodash';
import { renderLine } from '../../components/generic/helpers';
import { formatSeconds } from '../../utils/helpers';
import { useStatsDispatch } from './context';
-import { ScoreLine, WarningText, Clickable } from './styles';
+import { chartColors } from '../../styles/Themes';
import { StatWrapper } from './Wrapper';
import { getIcon, getTimeMessage, getProgressColor } from './helpers';
@@ -29,14 +29,20 @@ const TimeStatCard = ({ channel, open, openSet, index }: TimeStatCardProps) => {
<>
{volumeScore}
{timeScore}
{feeScore}
openSet(open ? 0 : index)}
+ >
{channel?.partner?.node?.alias}
-
+
Score
{channel.score}
{getIcon(channel.score, !channel.significant)}
-
+
-
+
{open && renderContent()}
openSet(p => !p)}
+ >
{title}
{open ?
{open && children}
+
+
+ Amount
+
+
+
{isEdit ? (
{
/>
)}
- setIsEdit(p => !p)}
- selected={isEdit}
>
{!isEdit ?
-
-
-
-
-
+
+
+
{isCustom && (
-
+ Address
+
+
+
+
+
+
+
)}
-
+ Send to
+
+ setAddress(e.target.value)}
+ />
+
This will be an instant swap. This means that the locking
transaction from Boltz has still not been confirmed in the
blockchain.
-
+
)}
+
)}
-
+ Fee
+
+
{renderButton(
() => {
setType('none');
@@ -128,20 +126,27 @@ export const SwapClaim = () => {
'Fee (Sats/Byte)',
type === 'fee'
)}
-
-
+
+
+
+
{!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)}
-
+ Fee Amount
+
+
{type !== 'none' && (
setFee(Number(e.target.value))}
/>
)}
{type === 'none' && (
-
{renderButton(
() => setFee(fast),
`Fastest (${fast} sats)`,
@@ -158,23 +163,29 @@ export const SwapClaim = () => {
`Hour (${hour} sats)`,
fee === hour
)}
-
+
)}
-
+
It is ok to close this modal after 5 seconds of having paid even if it
still shows as loading.
-
+
);
};
diff --git a/src/client/src/views/swap/SwapStatus.tsx b/src/client/src/views/swap/SwapStatus.tsx
index 44b389ca..67f3b99f 100644
--- a/src/client/src/views/swap/SwapStatus.tsx
+++ b/src/client/src/views/swap/SwapStatus.tsx
@@ -1,7 +1,7 @@
import { Fragment, useEffect, useState } from 'react';
-import { RefreshCw, Trash } from 'lucide-react';
+import { RefreshCw, Trash, ChevronRight } from 'lucide-react';
import { Tooltip as ReactTooltip } from 'react-tooltip';
-import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import { Button } from '@/components/ui/button';
import { getAddressLink } from '../../components/generic/helpers';
import {
Card,
@@ -13,59 +13,12 @@ import {
import Modal from '../../components/modal/ReactModal';
import { useGetBoltzSwapStatusQuery } from '../../graphql/queries/__generated__/getBoltzSwapStatus.generated';
import { chartColors, themeColors } from '../../styles/Themes';
-import styled from 'styled-components';
import { SwapClaim } from './SwapClaim';
import { useSwapsDispatch, useSwapsState } from './SwapContext';
import { useSwapExpire } from './SwapExpire';
import { SwapQuote } from './SwapQuote';
import { EnrichedSwap } from './types';
-const S = {
- row: styled.div`
- display: flex;
- width: 100%;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
- font-size: 14px;
- `,
- single: styled.div`
- display: flex;
- align-items: center;
- `,
- expired: styled.div`
- border: 1px solid ${chartColors.orange};
- background-color: rgba(255, 193, 10, 0.1);
- padding: 4px 8px;
- border-radius: 8px;
- `,
- warning: styled.div`
- border: 1px solid ${chartColors.darkyellow};
- background-color: rgba(255, 193, 10, 0.1);
- padding: 4px 8px;
- border-radius: 8px;
- `,
- ready: styled.div`
- border: 1px solid ${chartColors.green};
- background-color: rgba(10, 255, 59, 0.05);
- padding: 4px 8px;
- border-radius: 8px;
- `,
- claiming: styled.div`
- border: 1px solid ${chartColors.green};
- background-color: rgba(10, 255, 59, 0.05);
- color: ${chartColors.green};
- padding: 4px 8px;
- border-radius: 8px;
- `,
- finished: styled.div`
- border: 1px solid ${themeColors.grey8};
- background-color: rgba(10, 255, 59, 0.05);
- padding: 4px 8px;
- border-radius: 8px;
- `,
-};
-
const CREATED = 'swap.created';
export const MEMPOOL = 'transaction.mempool';
const CONFIRMED = 'transaction.confirmed';
@@ -80,27 +33,43 @@ const SwapRow = ({ swap, index }: { swap: EnrichedSwap; index: number }) => {
const ReadyComponent = () => {
const time = useSwapExpire(swap.decodedInvoice?.expires_at);
return (
-
+
+
- Pay
-
-
-
+ Ready to Pay {time}
+
+
+
+ Unable to get status
+
+
+ Expired
+
+
+ Refunded
+
+
{getAddressLink(swap.receivingAddress)}
- Waiting for confirmation
-
+ Waiting for confirmation
+
+
{getAddressLink(swap.receivingAddress)}
- Ready to Claim
-
+ Ready to Claim
+
+
{getAddressLink(swap.receivingAddress)}
- Completed
-
+ Completed
+
+
{getAddressLink(swap.receivingAddress)}
- {swap.boltz.status}
-
-
+
+
+ {swap.boltz.status}
+
+
-
+
+
+ {children}
+
+);
export const MessagesView = () => {
return (
diff --git a/src/client/src/views/tools/messages/SignMessage.tsx b/src/client/src/views/tools/messages/SignMessage.tsx
index c0770ed1..7219141a 100644
--- a/src/client/src/views/tools/messages/SignMessage.tsx
+++ b/src/client/src/views/tools/messages/SignMessage.tsx
@@ -1,16 +1,15 @@
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
-import { X, Copy } from 'lucide-react';
+import { X, Copy, ChevronRight, Loader2 } from 'lucide-react';
import { useSignMessageLazyQuery } from '../../../graphql/queries/__generated__/signMessage.generated';
-import { Input } from '../../../components/input';
-import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
import {
SingleLine,
DarkSubTitle,
Separation,
} from '../../../components/generic/Styled';
import { getErrorContent } from '../../../utils/error';
-import { Column, WrapRequest } from '../Tools.styled';
import { NoWrap } from './Messages';
export const SignMessage = () => {
@@ -34,28 +33,29 @@ export const SignMessage = () => {
{signed}
+ {getNodeLink(signedBy)}
+ {formatAmount}
+
+
+
+
+