diff --git a/src/components/channels/channels/ChannelCard.tsx b/src/components/channels/channels/ChannelCard.tsx index c0863bb4..1fb812d1 100644 --- a/src/components/channels/channels/ChannelCard.tsx +++ b/src/components/channels/channels/ChannelCard.tsx @@ -18,8 +18,6 @@ import { import { useSettings } from '../../../context/SettingsContext'; import { getStatusDot, - getPrivate, - getSymbol, getTooltipType, getFormatDate, getDateDif, @@ -30,11 +28,25 @@ import Modal from '../../modal/ReactModal'; import { CloseChannel } from '../../closeChannel/CloseChannel'; import styled from 'styled-components'; import { AdminSwitch } from '../../adminSwitch/AdminSwitch'; +import { DownArrow, UpArrow, EyeOff } from '../../generic/Icons'; const CloseButton = styled(ColorButton)` margin-left: auto; `; +const IconPadding = styled.div` + margin-left: 16px; + margin-right: 8px; +`; + +const getSymbol = (status: boolean) => { + return status ? : ; +}; + +const getPrivate = (status: boolean) => { + return status && ; +}; + interface ChannelCardProps { channelInfo: any; index: number; @@ -63,41 +75,41 @@ export const ChannelCard = ({ const { capacity, - commitTransactionFee, - commitTransactionWeight, + commit_transaction_fee, + commit_transaction_weight, id, - isActive, - isClosing, - isOpening, - isPartnerInitiated, - isPrivate, - isStaticRemoteKey, - localBalance, - localReserve, - partnerPublicKey, + is_active, + is_closing, + is_opening, + is_partner_initiated, + is_private, + is_static_remote_key, + local_balance, + local_reserve, + partner_public_key, received, - remoteBalance, - remoteReserve, + remote_balance, + remote_reserve, sent, - timeOffline, - timeOnline, - transactionId, - transactionVout, - unsettledBalance, - partnerNodeInfo, + time_offline, + time_online, + transaction_id, + transaction_vout, + unsettled_balance, + partner_node_info, } = channelInfo; const { alias, capacity: nodeCapacity, - channelCount, + channel_count, color: nodeColor, - lastUpdate, - } = partnerNodeInfo; + updated_at, + } = partner_node_info; const formatBalance = getFormat(capacity); - const formatLocal = getFormat(localBalance); - const formatRemote = getFormat(remoteBalance); + const formatLocal = getFormat(local_balance); + const formatRemote = getFormat(remote_balance); const formatreceived = getFormat(received); const formatSent = getFormat(sent); @@ -113,31 +125,34 @@ export const ChannelCard = ({ return ( <> - {renderLine('Node Public Key:', getNodeLink(partnerPublicKey))} + {renderLine( + 'Node Public Key:', + getNodeLink(partner_public_key), + )} {renderLine( 'Transaction Id:', - getTransactionLink(transactionId), + getTransactionLink(transaction_id), )} {renderLine('Channel Id:', id)} - {renderLine('Commit Fee:', getFormat(commitTransactionFee))} + {renderLine('Commit Fee:', getFormat(commit_transaction_fee))} {renderLine( 'Commit Weight:', - getFormat(commitTransactionWeight), + getFormat(commit_transaction_weight), )} - {renderLine('Is Static Remote Key:', isStaticRemoteKey)} - {renderLine('Local Reserve:', getFormat(localReserve))} - {renderLine('Remote Reserve:', getFormat(remoteReserve))} - {renderLine('Time Offline:', timeOffline)} - {renderLine('Time Online:', timeOnline)} - {renderLine('Transaction Vout:', transactionVout)} - {renderLine('Unsettled Balance:', unsettledBalance)} + {renderLine('Is Static Remote Key:', is_static_remote_key)} + {renderLine('Local Reserve:', getFormat(local_reserve))} + {renderLine('Remote Reserve:', getFormat(remote_reserve))} + {renderLine('Time Offline:', time_offline)} + {renderLine('Time Online:', time_online)} + {renderLine('Transaction Vout:', transaction_vout)} + {renderLine('Unsettled Balance:', unsettled_balance)} Partner Node Info {renderLine('Node Capacity:', getFormat(nodeCapacity))} - {renderLine('Channel Count:', channelCount)} + {renderLine('Channel Count:', channel_count)} {renderLine( 'Last Update:', - `${getDateDif(lastUpdate)} ago (${getFormatDate( - lastUpdate, + `${getDateDif(updated_at)} ago (${getFormatDate( + updated_at, )})`, )} @@ -157,16 +172,18 @@ export const ChannelCard = ({ handleClick()}> - {getStatusDot(isActive, 'active')} - {getStatusDot(isOpening, 'opening')} - {getStatusDot(isClosing, 'closing')} + {getStatusDot(is_active, 'active')} + {getStatusDot(is_opening, 'opening')} + {getStatusDot(is_closing, 'closing')} {alias ? alias : 'Unknown'} {formatBalance} - {getPrivate(isPrivate)} - {getSymbol(isPartnerInitiated)} + + {getPrivate(is_private)} + {getSymbol(is_partner_initiated)} +
diff --git a/src/components/channels/pendingChannels/PendingCard.tsx b/src/components/channels/pendingChannels/PendingCard.tsx index ae0bf8c3..0d8a28ae 100644 --- a/src/components/channels/pendingChannels/PendingCard.tsx +++ b/src/components/channels/pendingChannels/PendingCard.tsx @@ -42,34 +42,31 @@ export const PendingCard = ({ }); const { - closeTransactionId, - isActive, - isClosing, - isOpening, - localBalance, - // localReserve, - partnerPublicKey, + close_transaction_id, + is_active, + is_closing, + is_opening, + local_balance, + // local_reserve, + partner_public_key, received, - remoteBalance, - // remoteReserve, + remote_balance, + // remote_reserve, sent, - transactionFee, - transactionId, - // transactionVout, - partnerNodeInfo, + transaction_fee, + transaction_id, + // transaction_vout, + partner_node_info, } = channelInfo; const { alias, - // capacity: nodeCapacity, - // channelCount, color: nodeColor, - // lastUpdate - } = partnerNodeInfo; + } = partner_node_info; - const formatBalance = getFormat(localBalance + remoteBalance); - const formatLocal = getFormat(localBalance); - const formatRemote = getFormat(remoteBalance); + const formatBalance = getFormat(local_balance + remote_balance); + const formatLocal = getFormat(local_balance); + const formatRemote = getFormat(remote_balance); const formatreceived = getFormat(received); const formatSent = getFormat(sent); @@ -87,19 +84,19 @@ export const PendingCard = ({
Node Public Key:
- {getNodeLink(partnerPublicKey)} + {getNodeLink(partner_public_key)}
Transaction Id:
- {getTransactionLink(transactionId)} + {getTransactionLink(transaction_id)}
Transaction Fee:
- {getTransactionLink(transactionFee)} + {getTransactionLink(transaction_fee)}
Close Transaction Id:
- {getTransactionLink(closeTransactionId)} + {getTransactionLink(close_transaction_id)} {/* {localReserve} */} {/* {remoteReserve} */} @@ -113,9 +110,9 @@ export const PendingCard = ({ return ( handleClick()}> - {getStatusDot(isActive, 'active')} - {getStatusDot(isOpening, 'opening')} - {getStatusDot(isClosing, 'closing')} + {getStatusDot(is_active, 'active')} + {getStatusDot(is_opening, 'opening')} + {getStatusDot(is_closing, 'closing')} {alias ? alias : 'Unknown'} @@ -128,8 +125,8 @@ export const PendingCard = ({ > diff --git a/src/components/generic/Helpers.tsx b/src/components/generic/Helpers.tsx index 8269ab3f..e8453470 100644 --- a/src/components/generic/Helpers.tsx +++ b/src/components/generic/Helpers.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { SmallLink, DarkSubTitle } from './Styled'; import { StatusDot, DetailLine } from '../channels/Channels.style'; -import { DownArrow, UpArrow, EyeOff } from './Icons'; import { formatDistanceStrict, format } from 'date-fns'; export const getTransactionLink = (transaction: string) => { @@ -48,14 +47,6 @@ export const getStatusDot = (status: boolean, type: string) => { } }; -export const getSymbol = (status: boolean) => { - return status ? : ; -}; - -export const getPrivate = (status: boolean) => { - return status && ; -}; - export const renderLine = (title: string, content: any) => { if (!content) return null; return ( diff --git a/src/graphql/query.ts b/src/graphql/query.ts index 0c02b221..2cffd6eb 100644 --- a/src/graphql/query.ts +++ b/src/graphql/query.ts @@ -58,33 +58,33 @@ export const GET_CHANNELS = gql` query GetChannels($auth: String!) { getChannels(auth: $auth) { capacity - commitTransactionFee - commitTransactionWeight + commit_transaction_fee + commit_transaction_weight id - isActive - isClosing - isOpening - isPartnerInitiated - isPrivate - isStaticRemoteKey - localBalance - localReserve - partnerPublicKey + is_active + is_closing + is_opening + is_partner_initiated + is_private + is_static_remote_key + local_balance + local_reserve + partner_public_key received - remoteBalance - remoteReserve + remote_balance + remote_reserve sent - timeOffline - timeOnline - transactionId - transactionVout - unsettledBalance - partnerNodeInfo { + time_offline + time_online + transaction_id + transaction_vout + unsettled_balance + partner_node_info { alias capacity - channelCount + channel_count color - lastUpdate + updated_at } } } @@ -93,26 +93,26 @@ export const GET_CHANNELS = gql` export const GET_PENDING_CHANNELS = gql` query GetPendingChannels($auth: String!) { getPendingChannels(auth: $auth) { - closeTransactionId - isActive - isClosing - isOpening - localBalance - localReserve - partnerPublicKey + close_transaction_id + is_active + is_closing + is_opening + local_balance + local_reserve + partner_public_key received - remoteBalance - remoteReserve + remote_balance + remote_reserve sent - transactionFee - transactionId - transactionVout - partnerNodeInfo { + transaction_fee + transaction_id + transaction_vout + partner_node_info { alias capacity - channelCount + channel_count color - lastUpdate + updated_at } } } diff --git a/src/images/MoshingDoodle.svg b/src/images/MoshingDoodle.svg new file mode 100644 index 00000000..a2e9bafe --- /dev/null +++ b/src/images/MoshingDoodle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sections/footer/Footer.tsx b/src/sections/footer/Footer.tsx index c37dc2b6..3d1cbfe2 100644 --- a/src/sections/footer/Footer.tsx +++ b/src/sections/footer/Footer.tsx @@ -10,7 +10,6 @@ const FooterStyle = styled.div` background-color: ${cardColor}; grid-area: footer; height: 300px; - margin-top: 100px; `; const Wrapper = styled.div` diff --git a/src/sections/header/Header.tsx b/src/sections/header/Header.tsx index 4383c35c..73eb4f52 100644 --- a/src/sections/header/Header.tsx +++ b/src/sections/header/Header.tsx @@ -6,7 +6,7 @@ const HeaderStyle = styled.div` display: flex; justify-content: center; align-items: center; - padding: 10px 0; + padding: 16px 0; background-color: ${cardColor}; grid-area: header; margin-bottom: 10px; @@ -15,9 +15,11 @@ const HeaderStyle = styled.div` const Wrapper = styled.div` max-width: 1000px; margin: 0 auto 0 auto; - padding: 0 0.5rem; width: 100%; - height: 100%; + height: 32px; + display: flex; + align-items: center; + justify-content: space-between; `; const HeaderTitle = styled.div` @@ -30,6 +32,7 @@ export const Header = () => { ThunderHub + ); diff --git a/src/views/entry/Entry.tsx b/src/views/entry/Entry.tsx index c53bca86..5d6552e3 100644 --- a/src/views/entry/Entry.tsx +++ b/src/views/entry/Entry.tsx @@ -4,13 +4,26 @@ import { LoginView } from '../login/Login'; import { SessionLogin } from '../login/SessionLogin'; import { useHistory } from 'react-router'; import { HomePageView } from './HomePage'; +import { ReactComponent as HeadlineImage } from '../../images/MoshingDoodle.svg'; const Login = styled.div` + width: 100%; + max-width: 1000px; + margin: 0 auto 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 32px 0; +`; + +const LeftHeadline = styled.div` + width: 50%; display: flex; flex-direction: column; - justify-content: center; - align-items: center; - margin: 20px 0; +`; + +const StyledImage = styled(HeadlineImage)` + width: 500px; `; interface HomeProps { @@ -29,15 +42,23 @@ const EntryView = ({ session }: HomeProps) => { return ( -

Welcome to ThunderHub

-

This is the entry page

- {session ? ( + +

Control The Power of Lighting

+

+ Take full control of your lightning node. Think of something + else to place here. Think Think Think +

+
Available everywhere you can open a website.
+ + + + {/* {session ? ( ) : login ? ( ) : ( - )} + )} */} ); }; diff --git a/src/views/fees/Fees.tsx b/src/views/fees/Fees.tsx index 1c5db320..db887f3e 100644 --- a/src/views/fees/Fees.tsx +++ b/src/views/fees/Fees.tsx @@ -22,6 +22,7 @@ import { UPDATE_FEES } from '../../graphql/mutation'; import { XSvg, ChevronRight } from '../../components/generic/Icons'; import styled from 'styled-components'; import { SecureButton } from '../../components/secureButton/SecureButton'; +import { AdminSwitch } from '../../components/adminSwitch/AdminSwitch'; const SmallInput = styled(Input)` max-width: 150px; @@ -58,60 +59,64 @@ export const FeesView = () => { return ( <> - - Update Channel Fees - - - Channel Fees - setIsEdit(prev => !prev)} - > - {isEdit ? : 'Update'} - - - {isEdit && ( - <> - - - {`Base Fee (Sats):`} - - setBaseFee(parseInt(e.target.value)) - } - /> - - - {`Fee Rate (Sats/Million):`} - - setFeeRate(parseInt(e.target.value)) - } - /> - - - = 0 || feeRate >= 0} - disabled={baseFee === 0 && feeRate === 0} - > - Update Fees - - - - - )} - - + + + Update Channel Fees + + + Channel Fees + setIsEdit(prev => !prev)} + > + {isEdit ? : 'Update'} + + + {isEdit && ( + <> + + + {`Base Fee (Sats):`} + + setBaseFee(parseInt(e.target.value)) + } + /> + + + {`Fee Rate (Sats/Million):`} + + setFeeRate(parseInt(e.target.value)) + } + /> + + + = 0 || feeRate >= 0} + disabled={ + baseFee === 0 && feeRate === 0 + } + > + Update Fees + + + + + )} + + + Channel Fees