Skip to content

Commit 1a016e3

Browse files
JasonvdbJasonvdb
authored
Merge pull request #34 from synonymdev/ui-revire-3
UI review
2 parents 69f86d3 + 52ccc0b commit 1a016e3

File tree

18 files changed

+144
-57
lines changed

18 files changed

+144
-57
lines changed

‎.eslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"tab",
2727
{ "SwitchCase": 1, "ignoredNodes": ["ConditionalExpression"] }
2828
],
29-
"no-alert": "off",
29+
"no-alert": "warn",
3030
"@typescript-eslint/ban-types": ["warn", { "types": { "null": null } }],
3131
"@typescript-eslint/no-explicit-any": "off",
3232
"@typescript-eslint/no-non-null-assertion": "warn",

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"dependencies": {
66
"@reduxjs/toolkit": "^1.6.1",
7-
"@synonymdev/blocktank-client": "^0.0.43",
7+
"@synonymdev/blocktank-client": "^0.0.44",
88
"@testing-library/jest-dom": "^5.11.4",
99
"@testing-library/react": "^11.1.0",
1010
"@testing-library/user-event": "^12.1.10",

‎public/icons/coins-3d.png

4.24 KB
Loading

‎src/components/checkbox/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default ({
1010
setIsChecked,
1111
error
1212
}: {
13-
children: React.ReactElement | React.ReactElement[];
13+
children: React.ReactElement | React.ReactElement[] | string;
1414
isChecked: boolean;
1515
setIsChecked: (checked: boolean) => void;
1616
error?: string;

‎src/components/icon-ring/index.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@
1616

1717
.icon-ring-error {
1818
@extend .icon-ring;
19-
background: linear-gradient(90deg, rgba(228, 103, 53, 0.2) 0%, rgba(201, 50, 80, 0.2) 70.83%, rgba(202, 72, 140, 0.2) 100%);
19+
mix-blend-mode: normal;
2020
box-shadow: 0px 1px 10px rgba(223, 100, 53, 0.6), 0px 4px 116px rgba(199, 70, 136, 0.4);
21+
background: linear-gradient(90deg, rgba(228, 103, 53, 0.2) 0%, rgba(201, 50, 80, 0.2) 70.83%, rgba(202, 72, 140, 0.2) 100%);
22+
border: rgba(201, 50, 80, 0.98) 2px solid;
2123
}
2224

2325
.icon-ring-pending {

‎src/components/icon-ring/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import './index.scss';
44

55
export type TIconRingType = 'success' | 'error' | 'neutral' | 'pending';
6-
export type TIcon = 'hourglass-3d' | 'lightning-3d' | 'thumb-down-3d' | 'checkmark'; // Add 3D icon to /public/icons when adding an icon type
6+
export type TIcon = 'hourglass-3d' | 'lightning-3d' | 'thumb-down-3d' | 'checkmark' | 'coins-3d'; // Add 3D icon to /public/icons when adding an icon type
77

88
export default ({
99
icon,

‎src/components/input-group/index.scss

+4
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
flex: 3;
4949
}
5050

51+
::placeholder {
52+
color: rgba(142, 142, 147, 1);
53+
}
54+
5155
.custom-input-append-container {
5256
text-align: right;
5357
display: flex;

‎src/components/input-group/index.tsx

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ChangeEventHandler, ReactElement } from 'react';
1+
import React, { ChangeEventHandler, ReactElement, useState } from 'react';
22
import NumberFormat from 'react-number-format';
33
import { ReactComponent as SatsIcon } from '../../icons/lightning-active.svg';
44
import { ReactComponent as WeeksIcon } from '../../icons/weeks.svg';
@@ -61,6 +61,17 @@ export default ({
6161
tooltip?: TooltipProps;
6262
}): JSX.Element => {
6363
const fiat = useDisplayValues(Number(value));
64+
const [displayedPlaceholder, setDisplayedPlaceholder] = useState(placeholder);
65+
66+
const customOnFocus: ChangeEventHandler = (e) => {
67+
onFocus?.(e);
68+
setDisplayedPlaceholder('');
69+
};
70+
71+
const customOnBlur: ChangeEventHandler = (e) => {
72+
onBlur?.(e);
73+
setDisplayedPlaceholder(placeholder);
74+
};
6475

6576
return (
6677
<div className='custom-input-group-container'>
@@ -83,22 +94,22 @@ export default ({
8394
className={'custom-input'}
8495
thousandSeparator={' '}
8596
id={id}
86-
placeholder={placeholder}
97+
placeholder={displayedPlaceholder}
8798
value={value}
8899
onValueChange={(values, sourceInfo) => onChange(values.value)}
89-
onFocus={onFocus}
90-
onBlur={onBlur}
100+
onFocus={customOnFocus}
101+
onBlur={customOnBlur}
91102
/>
92103
) : (
93104
<input
94105
className={'custom-input'}
95106
id={id}
96107
type={type}
97-
placeholder={placeholder}
108+
placeholder={displayedPlaceholder}
98109
value={value}
99110
onChange={(e) => onChange(e.target.value)}
100-
onFocus={onFocus}
101-
onBlur={onBlur}
111+
onFocus={customOnFocus}
112+
onBlur={customOnBlur}
102113
/>
103114
)}
104115

‎src/components/tooltip/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export default ({ tip }: { tip?: TooltipProps }): JSX.Element => {
3434
style={{
3535
...props.style,
3636
backgroundColor: 'rgba(16, 16, 16, 0.92)',
37-
borderRadius: 10
37+
borderRadius: 10,
38+
letterSpacing: 0
3839
}}
3940
>
4041
<h4>{tip.title}</h4>

‎src/pages/public/claim/index.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,8 @@
5555

5656
.claim-channel-manual-action-buttons-container {
5757
display: flex;
58-
flex-direction: column;
59-
justify-content: left;
60-
align-items: flex-start;
58+
justify-content: space-between;
59+
margin-top: 20px;
6160
}
6261

6362
.claim-channel-middle {

‎src/pages/public/claim/index.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Divider from '../../../components/divider';
1111
import './index.scss';
1212
import Heading from '../../../components/heading';
1313
import Tooltip from '../../../components/tooltip';
14+
import Checkbox from '../../../components/checkbox';
1415
import { clipCenter } from '../../../utils/helpers';
1516
import ActionButton from '../../../components/action-button';
1617
import { ReactComponent as LightningIconActive } from '../../../icons/lightning-active.svg';
@@ -25,6 +26,7 @@ const qrSize = 200;
2526

2627
function ClaimPage(): JSX.Element {
2728
const [showManual, setShowManual] = useState(false);
29+
const [isPrivate, setIsPrivate] = useState(false);
2830
const [nodeUri, setNodeUri] = useState('');
2931
const [isSubmitting, setIsSubmitting] = useState(false);
3032
const dispatch = useAppDispatch();
@@ -51,7 +53,8 @@ function ClaimPage(): JSX.Element {
5153
try {
5254
await bt.finalizeChannel({
5355
order_id: _id,
54-
node_uri: nodeUri
56+
node_uri: nodeUri,
57+
private: isPrivate
5558
});
5659

5760
await dispatch(refreshOrder(_id));
@@ -110,6 +113,9 @@ function ClaimPage(): JSX.Element {
110113
body: 'Paste your node ID, IP, and port information here to initiate the channel connection manually.'
111114
}}
112115
/>
116+
<Checkbox isChecked={isPrivate} setIsChecked={setIsPrivate}>
117+
Private channel
118+
</Checkbox>
113119
<div className={'claim-channel-manual-action-buttons-container'}>
114120
<ActionButton onClick={claimChannel} Icon={LightningIcon}>
115121
{isSubmitting ? 'Opening channel...' : 'Open channel'}
@@ -147,7 +153,7 @@ function ClaimPage(): JSX.Element {
147153
</div>
148154
<span className={'claim-channel-middle-value'}>
149155
<LightningIconActive className={'claim-channel-middle-value-icon'} />
150-
{local_balance}
156+
{inboundDisplay.bitcoinFormatted}
151157
</span>
152158
</div>
153159
<div className={'claim-channel-middle-col'}>
@@ -163,7 +169,7 @@ function ClaimPage(): JSX.Element {
163169
</div>
164170
<span className={'claim-channel-middle-value'}>
165171
<LightningIconActive className={'claim-channel-middle-value-icon'} />
166-
{remote_balance}
172+
{myBalanceDisplay.bitcoinFormatted}
167173
</span>
168174
</div>
169175
</div>

‎src/pages/public/configure/index.tsx

+28-19
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@ import InputGroup from '../../../components/input-group';
1111
import Heading from '../../../components/heading';
1212
import { TooltipProps } from '../../../components/tooltip';
1313
import ErrorPage from '../error';
14+
import Error from '../../../components/inline-error';
15+
import { numberWithSpaces } from '../../../utils/helpers';
1416

1517
export type IFormErrors = {
1618
[key: string]: string;
1719
};
1820

1921
const inboundTip: TooltipProps = {
20-
title: 'Inbound capacity',
21-
body: 'This is the amount of sats you will be able to receive in payments. The amount must be at least double the amount of your ‘spending balance’. The maximum amount of inbound capacity is 50,000,000 sats.'
22+
title: 'My receiving capacity',
23+
body: 'This is the amount of sats you will be able to receive in payments. The amount must be at least double that of your \\‘spending balance\\’. Maximum receiving capacity is 50 000 000 sats.'
2224
};
2325

2426
const spendingTip: TooltipProps = {
@@ -38,10 +40,11 @@ function ConfigurePage(): JSX.Element {
3840
const [isLoading, setIsLoading] = useState(true);
3941
const [isSubmitting, setIsSubmitting] = useState(false);
4042
const [product, setProduct] = useState<IService | undefined>(undefined);
41-
const [channelExpiry, setChannelExpiry] = useState<string>('1');
42-
const [localBalance, setLocalBalance] = useState<string>('0');
43+
const [channelExpiry, setChannelExpiry] = useState<string>('');
44+
const [localBalance, setLocalBalance] = useState<string>('');
4345
const [remoteBalance, setRemoteBalance] = useState<string>('0');
4446
const [formErrors, setFormErrors] = useState<IFormErrors>({});
47+
const [generalError, setGeneralError] = useState('');
4548

4649
useEffect(() => {
4750
if (services.length > 0) {
@@ -57,16 +60,12 @@ function ConfigurePage(): JSX.Element {
5760
if (localBalance === '0') {
5861
// setLocalBalance(`${service.min_channel_size}`);
5962
}
60-
61-
if (channelExpiry === '1') {
62-
setChannelExpiry(`${service.max_chan_expiry}`);
63-
}
6463
}
6564
}, [services]);
6665

6766
useEffect(() => {
6867
dispatch(refreshInfo())
69-
.catch((e) => alert(e))
68+
.catch((e) => setGeneralError(e.toString()))
7069
.finally(() => setIsLoading(false));
7170
}, []);
7271

@@ -83,11 +82,13 @@ function ConfigurePage(): JSX.Element {
8382

8483
setIsSubmitting(true);
8584

85+
const { max_chan_expiry } = product;
86+
8687
const req: IBuyChannelRequest = {
8788
product_id: product.product_id,
88-
channel_expiry: Number(channelExpiry),
89+
channel_expiry: channelExpiry ? Number(channelExpiry) : max_chan_expiry,
8990
local_balance: Number(remoteBalance), // Switched around for context
90-
remote_balance: Number(localBalance)
91+
remote_balance: localBalance ? Number(localBalance) : 0
9192
};
9293

9394
try {
@@ -101,7 +102,7 @@ function ConfigurePage(): JSX.Element {
101102
if (error.toString().indexOf('GEO_BLOCKED') > -1) {
102103
dispatch(navigate({ page: 'geoblocked' }));
103104
} else {
104-
alert(error);
105+
setGeneralError(error.toString());
105106
}
106107
}
107108
};
@@ -117,7 +118,7 @@ function ConfigurePage(): JSX.Element {
117118

118119
// TODO check channel balance
119120

120-
if (Number(channelExpiry) < 1) {
121+
if (channelExpiry !== '' && Number(channelExpiry) < 1) {
121122
errors.channelExpiry = `Minimum channel expiry is ${product.min_chan_expiry} week${
122123
product.min_chan_expiry !== 1 ? 's' : ''
123124
}`;
@@ -126,13 +127,17 @@ function ConfigurePage(): JSX.Element {
126127
}
127128

128129
if (Number(remoteBalance) > product.max_channel_size) {
129-
errors.remoteBalance = `Max channel size must be smaller than ${product.max_channel_size}`;
130+
errors.remoteBalance = `Max receiving capacity is ${numberWithSpaces(product.max_channel_size)} sats`;
130131
} else if (Number(remoteBalance) < product.min_channel_size) {
131-
errors.remoteBalance = `Min channel size must be greater than ${product.min_channel_size}`;
132+
errors.remoteBalance = `Minimum receiving capacity is ${numberWithSpaces(product.min_channel_size)} sats`;
132133
}
133134

134135
if (Number(localBalance) !== 0 && Number(localBalance) < product.min_channel_size) {
135-
errors.localBalance = `Local balance needs to be greater than ${product.min_channel_size}`;
136+
errors.localBalance = `Minimum spending balance is ${numberWithSpaces(product.min_channel_size)} sats`;
137+
}
138+
139+
if (Number(localBalance) !== 0 && Number(localBalance) > product.max_channel_size) {
140+
errors.localBalance = `Max spending balance is ${numberWithSpaces(product.max_channel_size)} sats`;
136141
}
137142

138143
setFormErrors(errors);
@@ -171,7 +176,7 @@ function ConfigurePage(): JSX.Element {
171176
return <div />;
172177
}
173178

174-
const { available } = product;
179+
const { available, max_chan_expiry } = product;
175180

176181
if (!available) {
177182
return <ErrorPage type={'unavailable'} />;
@@ -191,14 +196,14 @@ function ConfigurePage(): JSX.Element {
191196
>
192197
<Form className={'form-content'}>
193198
<div className={'form-fields'}>
194-
<Heading>Configure</Heading>
199+
<Heading>My channel</Heading>
195200

196201
<InputGroup
197202
type='number'
198203
value={remoteBalance}
199204
onChange={(str) => onSetInput(str, setRemoteBalance)}
200205
id={'remote-balance'}
201-
label={'My inbound capacity'}
206+
label={'My receiving capacity'}
202207
append={'sats'}
203208
showFiatFromSatsValue
204209
error={formErrors.remoteBalance}
@@ -209,6 +214,7 @@ function ConfigurePage(): JSX.Element {
209214
<InputGroup
210215
type='number'
211216
value={localBalance}
217+
placeholder={'0'}
212218
onChange={(str) => onSetInput(str, setLocalBalance)}
213219
id={'local-balance'}
214220
label={'My spending balance'}
@@ -222,6 +228,7 @@ function ConfigurePage(): JSX.Element {
222228
<InputGroup
223229
type='number'
224230
value={channelExpiry}
231+
placeholder={`${max_chan_expiry}`}
225232
onChange={(str) => onSetInput(str, setChannelExpiry)}
226233
id={'channel-expiry'}
227234
label={'Keep my channel open for at least'}
@@ -230,6 +237,8 @@ function ConfigurePage(): JSX.Element {
230237
onBlur={onBlur}
231238
tooltip={durationTip}
232239
/>
240+
241+
<Error>{generalError}</Error>
233242
</div>
234243

235244
<div className={'button-container'}>

‎src/pages/public/confirm/index.scss

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
color: #8E8E93;
1313
font-size: 15px;
1414
line-height: 22px;
15+
16+
.confirmation-message-highlight {
17+
color: white;
18+
font-weight: 600;
19+
}
1520
}
1621
}
1722

‎src/pages/public/confirm/index.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function ConfirmationPage(): JSX.Element {
5454
pageIndicator={{ total: 4, active: 1 }}
5555
showLightningIcon
5656
>
57-
<Heading>My Channel</Heading>
57+
<Heading>Review channel</Heading>
5858

5959
<div className={'confirmation-top-half'}>
6060
<div className={'confirmation-value-groups'}>
@@ -65,8 +65,12 @@ function ConfirmationPage(): JSX.Element {
6565
<ChannelBalanceBar local={remote_balance} remote={local_balance} />
6666

6767
<p className={'confirmation-message'}>
68-
This channel may close automatically after {channel_expiry} week
69-
{channel_expiry > 1 ? 's' : ''}.
68+
This channel may close automatically after{' '}
69+
<span className={'confirmation-message-highlight'}>
70+
{channel_expiry} week
71+
{channel_expiry > 1 ? 's' : ''}
72+
</span>
73+
.
7074
</p>
7175

7276
<Divider />

‎src/pages/public/order/index.scss

+9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
.order-state-container {
22
flex: 1;
33

4+
.order-state-support-button-container {
5+
display: flex;
6+
justify-content: center;
7+
8+
.order-state-support-button-spacer {
9+
width: 10px;
10+
}
11+
}
12+
413
.order-state-message {
514
font-size: 15px;
615
color: #8E8E93;

0 commit comments

Comments
 (0)