Skip to content

Commit

Permalink
Refactor LNURL pay flow
Browse files Browse the repository at this point in the history 
This refactors the LNURL pay flow to show the payment request and a
proper success message
  • Loading branch information
@bumi
bumi committed Aug 17, 2020
1 parent 816b476 commit f7db773
Show file tree
Hide file tree
Showing 4 changed files with 450 additions and 106 deletions.
140 changes: 140 additions & 0 deletions src/app/components/PaymentRequest/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react';
import { Alert } from 'antd';
import './style.less';

import Identicon from 'components/Identicon';
import Unit from 'components/Unit';
import { unixMoment, SHORT_FORMAT } from 'utils/time';
import moment from 'moment';
import Loader from 'components/Loader';
import { PaymentRequestData } from 'modules/payment/types';

import { PaymentRequestState } from 'modules/payment/types';

interface Props {
routedRequest: PaymentRequestData | null;
requestData: PaymentRequestState;
}

interface State {
showMoreInfo: boolean;
}

const INITIAL_STATE = {
showMoreInfo: false,
};

export default class PaymentRequest extends React.Component<Props, State> {
state: State = INITIAL_STATE;

render() {
const { showMoreInfo } = this.state;
const { requestData, routedRequest } = this.props;

const expiry =
requestData.data &&
unixMoment(requestData.data.request.timestamp).add(
requestData.data.request.expiry,
'seconds',
);

return (
<div className="PaymentRequest">
{routedRequest ? (
<div className="PaymentRequest-payment">
<div className="PaymentRequest-payment-node">
<Identicon
pubkey={routedRequest.node.pub_key}
className="PaymentRequest-payment-node-avatar"
/>
<div className="PaymentRequest-payment-node-info">
<div className="PaymentRequest-payment-node-info-alias">
{routedRequest.node.alias}
</div>
<code className="PaymentRequest-payment-node-info-pubkey">
{routedRequest.node.pub_key}
</code>
</div>
</div>
{routedRequest.route ? (
<div className="PaymentRequest-payment-details">
<table>
<tbody>
{routedRequest.request.num_satoshis && (
<tr>
<td>Amount</td>
<td>
<Unit value={routedRequest.request.num_satoshis} />
</td>
</tr>
)}
<tr>
<td>Fee</td>
<td>
{requestData.isLoading ? (
<Loader inline size="1rem" />
) : (
<Unit value={routedRequest.route.total_fees} />
)}
</td>
</tr>
<tr>
<td>Total</td>
<td>
{requestData.isLoading ? (
<Loader inline size="1rem" />
) : (
<Unit value={routedRequest.route.total_amt} />
)}
</td>
</tr>
{showMoreInfo && (
<>
<tr>
<td>Hops</td>
<td>{routedRequest.route.hops.length} node(s)</td>
</tr>
<tr>
<td>Time lock</td>
<td>
{moment()
.add(routedRequest.route.total_time_lock, 'seconds')
.fromNow(true)}
</td>
</tr>
<tr>
<td>Expires</td>
<td>{expiry && expiry.format(SHORT_FORMAT)}</td>
</tr>
</>
)}
</tbody>
</table>
{!showMoreInfo && (
<a
className="PaymentRequest-payment-details-more"
onClick={() => this.setState({ showMoreInfo: true })}
>
More info
</a>
)}
</div>
) : (
<Alert
style={{ marginBottom: '1rem' }}
type="error"
message="No route available"
description={`
There is no route between you and {requestNode.alias}.
You can try opening a channel with them and trying again.
`}
/>
)}
</div>
) : (
''
)}
</div>
);
}
}
133 changes: 133 additions & 0 deletions src/app/components/PaymentRequest/style.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
@import '~style/variables.less';

.PaymentRequest {
&-pr {
margin-bottom: 1rem;

&-input {
font-family: @code-family;
font-size: 0.65rem;
resize: none;
}

&-qr {
position: absolute;
bottom: 0;
right: 10px;
}
}

&-payment {
margin-bottom: 0.5rem;

&-node {
display: flex;
padding: 0.6rem;
margin-bottom: 0.5rem;

&-avatar {
flex-shrink: 0;
width: 2.8rem;
height: 2.8rem;
margin-right: 0.75rem;
}

&-info {
flex: 1;
min-width: 0;

&-alias {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 0.1rem;
}

&-pubkey {
display: block;
font-size: 0.8rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}

&-value {
padding: 0 1rem;
margin-bottom: 0.5rem;

// Ant overrides
.ant-input-group.ant-input-group-compact {
display: flex;
}

.ant-select-selection-selected-value {
font-size: 0.85rem;
}
}

&-details {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

table {
max-width: 280px;
width: 100%;
margin-bottom: 0.5rem;

tr {
border-bottom: 1px solid rgba(#000, 0.05);

&:last-child {
border: none;
}

td {
padding: 0.2rem;

&:first-child {
text-align: left;
min-width: 80px;
padding-right: 0.5rem;
}

&:last-child {
text-align: right;
font-weight: 500;
}
}
}
}

&-more {
padding: 0.5rem 0;
}
}
}

&-placeholder {
display: flex;
justify-content: center;
align-items: center;
height: 8rem;
margin-bottom: 1rem;
color: rgba(#000, 0.2);
border: 2px dashed rgba(#000, 0.08);
border-radius: 4px;
}

&-buttons {
display: flex;

.ant-btn {
&:first-child {
margin-right: 0.5rem;
}
&:last-child {
flex: 1;
}
}
}
}
84 changes: 23 additions & 61 deletions src/app/prompts/lnurl.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,29 @@
color: @text-color-secondary;
}

&-metadata {
margin: 0;
padding: 0;

&-item {
margin: 0;
padding: 0;
}
}

&-buttons {
display: flex;

.ant-btn {
&:first-child {
margin-right: 0.5rem;
}
&:last-child {
flex: 1;
}
}
}

&-header {
display: flex;
align-items: center;
Expand Down Expand Up @@ -60,66 +83,5 @@
}
}
}

&-memo {
&-text {
font-size: 1rem;
color: rgba(#000, 0.5);

a {
margin-left: 0.5rem;
}
}
}

&-advanced {
&-private {
display: flex;
align-items: center;
transform: translateY(-1rem);
}

.ant-form-item {
flex: 1;
margin-right: 1rem;

&:last-child {
margin-right: 0;
}
}

.ant-form-item-label {
padding-bottom: 0;

label {
display: flex;
align-items: center;
font-size: 0.7rem;
letter-spacing: 0.08rem;

.Help {
margin-left: 0.25rem;
}
}
}

.ant-form-explain {
font-size: 0.7rem;
}
}

&-advancedToggle {
display: block;
text-align: center;
font-size: 0.8rem;
opacity: 0.7;
margin: 0 auto;

&:hover,
&:focus,
&:active {
opacity: 1;
}
}
}
}
Loading

0 comments on commit f7db773

Please sign in to comment.