mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 14:22:33 +01:00
Code Issues Projects Releases Wiki Activity

chore: move quick actions

Browse source
This commit is contained in:
AP 2019-12-16 21:39:10 +01:00
parent fccff09008
commit f13273a096
10 changed files with 185 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

203
src/components/account/AccountInfo.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
Card,
CardWithTitle,
@ -21,10 +21,15 @@ import {
Anchor,
Pocket,
DownArrow,
XSvg,
} from '../generic/Icons';
import { getValue } from '../../helpers/Helpers';
import { toast } from 'react-toastify';
import { getErrorContent } from '../../utils/error';
import { PayCard } from './pay/pay';
import { CreateInvoiceCard } from './createInvoice/CreateInvoice';
import { SendOnChainCard } from './sendOnChain/SendOnChain';
import { ReceiveOnChainCard } from './receiveOnChain/ReceiveOnChain';
const Tile = styled.div`
display: flex;
@ -38,7 +43,10 @@ const ButtonRow = styled.div`
display: flex;
`;
const sectionColor = '#FFD300';
export const AccountInfo = () => {
const [state, setState] = useState<string>('none');
const { host, read, cert } = useAccount();
const auth = getAuthString(host, read, cert);
@ -68,6 +76,131 @@ export const AccountInfo = () => {
const totalB = getFormat(chainBalance + confirmedBalance);
const totalPB = getFormat(pendingChainBalance + pendingBalance);
const renderContent = () => {
switch (state) {
case 'send_ln':
return <PayCard color={sectionColor} />;
case 'receive_ln':
return <CreateInvoiceCard color={sectionColor} />;
case 'send_chain':
return <SendOnChainCard color={sectionColor} />;
case 'receive_chain':
return <ReceiveOnChainCard color={sectionColor} />;
default:
return null;
}
};
const getTitle = () => {
switch (state) {
case 'send_ln':
return 'Send Sats over Lightning';
case 'receive_ln':
return 'Receive Sats over Lightning';
case 'send_chain':
return 'Send To On Chain Address';
case 'receive_chain':
return 'Create Address to Receive';
default:
return 'Your accounts';
}
};
const showLn =
state === 'send_ln' || state === 'receive_ln' || state === 'none';
const showChain =
state === 'send_chain' || state === 'receive_chain' || state === 'none';
const renderLnAccount = () => (
<SingleLine>
<Zap color={pendingBalance === 0 ? sectionColor : '#652EC7'} />
<Tile startTile={true}>
<DarkSubTitle>Account</DarkSubTitle>
<div>Lightning</div>
</Tile>
<Tile>
<DarkSubTitle>Current Balance</DarkSubTitle>
<div>{formatCCB}</div>
</Tile>
<Tile>
<DarkSubTitle>Pending Balance</DarkSubTitle>
<div>{formatPCB}</div>
</Tile>
<ButtonRow>
{showLn && showChain && (
<>
<ColorButton
color={sectionColor}
onClick={() => setState('send_ln')}
>
<Send />
</ColorButton>
<ColorButton
color={sectionColor}
onClick={() => setState('receive_ln')}
>
<DownArrow />
</ColorButton>
</>
)}
{showLn && !showChain && (
<ColorButton
color={sectionColor}
onClick={() => setState('none')}
>
<XSvg />
</ColorButton>
)}
</ButtonRow>
</SingleLine>
);
const renderChainAccount = () => (
<SingleLine>
<Anchor
color={pendingChainBalance === 0 ? sectionColor : '#652EC7'}
/>
<Tile startTile={true}>
<DarkSubTitle>Account</DarkSubTitle>
<div>Bitcoin</div>
</Tile>
<Tile>
<DarkSubTitle>Current Balance</DarkSubTitle>
<div>{formatCB}</div>
</Tile>
<Tile>
<DarkSubTitle>Pending Balance</DarkSubTitle>
<div>{formatPB}</div>
</Tile>
<ButtonRow>
{showLn && showChain && (
<>
<ColorButton
color={sectionColor}
onClick={() => setState('send_chain')}
>
<Send />
</ColorButton>
<ColorButton
color={sectionColor}
onClick={() => setState('receive_chain')}
>
<DownArrow />
</ColorButton>
</>
)}
{!showLn && showChain && (
<ColorButton
color={sectionColor}
onClick={() => setState('none')}
>
<XSvg />
</ColorButton>
)}
</ButtonRow>
</SingleLine>
);
return (
<>
<CardWithTitle>
@ -98,69 +231,13 @@ export const AccountInfo = () => {
</Card>
</CardWithTitle>
<CardWithTitle>
<SubTitle>Your accounts</SubTitle>
<SubTitle>{getTitle()}</SubTitle>
<Card>
<SingleLine>
<Zap
color={pendingBalance === 0 ? '#FFD300' : '#652EC7'}
/>
<Tile startTile={true}>
<DarkSubTitle>Account</DarkSubTitle>
<div>Lightning</div>
</Tile>
<Tile>
<DarkSubTitle>Current Balance</DarkSubTitle>
<div>{formatCCB}</div>
</Tile>
<Tile>
<DarkSubTitle>Pending Balance</DarkSubTitle>
<div>{formatPCB}</div>
</Tile>
<ButtonRow>
<ColorButton color={'#FFD300'}>
<Send />
</ColorButton>
<ColorButton color={'#FFD300'}>
<DownArrow />
</ColorButton>
<ColorButton color={'#FFD300'}>
<MoreVertical />
</ColorButton>
</ButtonRow>
</SingleLine>
<Separation />
<SingleLine>
<Anchor
color={
pendingChainBalance === 0
? '#FFD300'
: '#652EC7'
}
/>
<Tile startTile={true}>
<DarkSubTitle>Account</DarkSubTitle>
<div>Bitcoin</div>
</Tile>
<Tile>
<DarkSubTitle>Current Balance</DarkSubTitle>
<div>{formatCB}</div>
</Tile>
<Tile>
<DarkSubTitle>Pending Balance</DarkSubTitle>
<div>{formatPB}</div>
</Tile>
<ButtonRow>
<ColorButton color={'#FFD300'}>
<Send />
</ColorButton>
<ColorButton color={'#FFD300'}>
<DownArrow />
</ColorButton>
<ColorButton color={'#FFD300'}>
<MoreVertical />
</ColorButton>
</ButtonRow>
</SingleLine>
{showLn && renderLnAccount()}
{showLn && <Separation />}
{showChain && renderChainAccount()}
{!showLn && showChain && <Separation />}
{renderContent()}
</Card>
</CardWithTitle>
</>

42
src/components/quickActions/createInvoice/CreateInvoice.tsx → src/components/account/createInvoice/CreateInvoice.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Card, Input, ColorButton, NoWrapTitle } from '../../generic/Styled';
import { Input, ColorButton, NoWrapTitle } from '../../generic/Styled';
import { useMutation } from '@apollo/react-hooks';
import { CREATE_INVOICE } from '../../../graphql/mutation';
import { Edit } from '../../generic/Icons';
@ -28,26 +28,24 @@ export const CreateInvoiceCard = ({ color }: { color: string }) => {
console.log(data, loading);
return (
<Card>
<SingleLine>
<NoWrapTitle>Amount to receive:</NoWrapTitle>
<Input
color={color}
type={'number'}
onChange={e => setAmount(parseInt(e.target.value))}
/>
<ColorButton
color={color}
disabled={amount === 0}
enabled={amount > 0}
onClick={() => {
createInvoice({ variables: { amount, auth } });
}}
>
<Edit />
Create Invoice
</ColorButton>
</SingleLine>
</Card>
<SingleLine>
<NoWrapTitle>Amount to receive:</NoWrapTitle>
<Input
color={color}
type={'number'}
onChange={e => setAmount(parseInt(e.target.value))}
/>
<ColorButton
color={color}
disabled={amount === 0}
enabled={amount > 0}
onClick={() => {
createInvoice({ variables: { amount, auth } });
}}
>
<Edit />
Create Invoice
</ColorButton>
</SingleLine>
);
};

36
src/components/quickActions/pay/pay.tsx → src/components/account/pay/pay.tsx
View file

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import {
Card,
Sub4Title,
Input,
SingleLine,
@ -26,25 +25,20 @@ export const PayCard = ({ color }: { color: string }) => {
});
return (
<Card bottom={'20px'}>
<SingleLine>
<Sub4Title>Request:</Sub4Title>
<Input
color={color}
onChange={e => setRequest(e.target.value)}
/>
<ColorButton
color={color}
disabled={request === ''}
enabled={request !== ''}
onClick={() => {
makePayment({ variables: { request, auth } });
}}
>
<Send />
Send Sats
</ColorButton>
</SingleLine>
</Card>
<SingleLine>
<Sub4Title>Request:</Sub4Title>
<Input color={color} onChange={e => setRequest(e.target.value)} />
<ColorButton
color={color}
disabled={request === ''}
enabled={request !== ''}
onClick={() => {
makePayment({ variables: { request, auth } });
}}
>
<Send />
Send Sats
</ColorButton>
</SingleLine>
);
};

5
src/components/quickActions/receiveOnChain/ReceiveOnChain.tsx → src/components/account/receiveOnChain/ReceiveOnChain.tsx
View file

@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import {
Card,
ColorButton,
NoWrapTitle,
DarkSubTitle,
@ -50,7 +49,7 @@ export const ReceiveOnChainCard = ({ color }: { color: string }) => {
}, [data]);
return (
<Card>
<>
<SingleLine>
<ButtonRow>
<TitleWithSpacing>Type of Address:</TitleWithSpacing>
@ -99,6 +98,6 @@ export const ReceiveOnChainCard = ({ color }: { color: string }) => {
</SingleLine>
</>
)}
</Card>
</>
);
};

4
src/components/quickActions/sendOnChain/SendOnChain.tsx → src/components/account/sendOnChain/SendOnChain.tsx
View file

@ -133,7 +133,7 @@ export const SendOnChainCard = ({ color }: { color: string }) => {
}
return (
<Card>
<>
<SingleLine>
<NoWrapTitle>Send to Address:</NoWrapTitle>
<Input
@ -236,6 +236,6 @@ export const SendOnChainCard = ({ color }: { color: string }) => {
<Send />
Send To Address
</RightButton>
</Card>
</>
);
};

3
src/components/generic/Styled.ts
View file

@ -104,10 +104,9 @@ export const Input = styled.input`
height: 30px;
width: 80%;
margin: 10px;
border: 0;
border: 1px solid #c8ccd4;
background: none;
border-radius: 0;
border-radius: 5px;
color: ${textColor};
transition: all 0.5s ease;

38
src/components/quickActions/QuickActions.tsx
View file

@ -7,13 +7,9 @@ import {
ColorButton,
} from '../generic/Styled';
import styled from 'styled-components';
import { Zap, XSvg, Layers, Anchor } from '../generic/Icons';
import { XSvg, Layers } from '../generic/Icons';
import { unSelectedNavButton } from '../../styles/Themes';
import { CreateInvoiceCard } from './createInvoice/CreateInvoice';
import { PayCard } from './pay/pay';
import { DecodeCard } from './decode/Decode';
import { SendOnChainCard } from './sendOnChain/SendOnChain';
import { ReceiveOnChainCard } from './receiveOnChain/ReceiveOnChain';
const sectionColor = '#69c0ff';
@ -49,16 +45,8 @@ export const QuickActions = () => {
const getTitle = () => {
switch (openCard) {
case 'send_ln':
return 'Send Sats over Lightning';
case 'receive_ln':
return 'Receive Sats over Lightning';
case 'decode':
return 'Decode a Lightning Request';
case 'send_chain':
return 'Send To On Chain Address';
case 'receive_chain':
return 'Create Address to Receive';
default:
return 'Quick Actions';
}
@ -66,39 +54,15 @@ export const QuickActions = () => {
const renderContent = () => {
switch (openCard) {
case 'send_ln':
return <PayCard color={sectionColor} />;
case 'receive_ln':
return <CreateInvoiceCard color={sectionColor} />;
case 'decode':
return <DecodeCard color={sectionColor} />;
case 'send_chain':
return <SendOnChainCard color={sectionColor} />;
case 'receive_chain':
return <ReceiveOnChainCard color={sectionColor} />;
default:
return (
<QuickRow>
<QuickCard onClick={() => setOpenCard('send_ln')}>
<Zap size={'24px'} color={sectionColor} />
<QuickTitle>Send</QuickTitle>
</QuickCard>
<QuickCard onClick={() => setOpenCard('receive_ln')}>
<Zap size={'24px'} color={sectionColor} />
<QuickTitle>Receive</QuickTitle>
</QuickCard>
<QuickCard onClick={() => setOpenCard('decode')}>
<Layers size={'24px'} color={sectionColor} />
<QuickTitle>Decode</QuickTitle>
</QuickCard>
<QuickCard onClick={() => setOpenCard('send_chain')}>
<Anchor size={'24px'} color={sectionColor} />
<QuickTitle>Send</QuickTitle>
</QuickCard>
<QuickCard onClick={() => setOpenCard('receive_chain')}>
<Anchor size={'24px'} color={sectionColor} />
<QuickTitle>Receive</QuickTitle>
</QuickCard>
</QuickRow>
);
}

9
src/components/resume/InvoiceCard.tsx
View file

@ -45,7 +45,7 @@ export const InvoiceCard = ({
description,
expires_at,
is_confirmed,
received,
// received,
tokens,
chain_address,
description_hash,
@ -61,8 +61,6 @@ export const InvoiceCard = ({
} = invoice;
const formatAmount = getFormat(tokens);
const dif = received - tokens;
const formatDif = getFormat(`${dif}`);
const handleClick = () => {
if (indexOpen === index) {
@ -120,10 +118,7 @@ export const InvoiceCard = ({
)} ago)`}</DarkSubTitle>
</AddMargin>
</SingleLine>
<SingleLine>
{formatAmount}
{formatDif}
</SingleLine>
<SingleLine>{formatAmount}</SingleLine>
</SingleLine>
</MainInfo>
{index === indexOpen && renderDetails()}

1
src/sections/header/Header.tsx
View file

@ -9,6 +9,7 @@ const HeaderStyle = styled.div`
padding: 10px 0;
background-color: #fb8b23;
grid-area: header;
margin-bottom: 10px;
`;
const HeaderTitle = styled.div`

1
src/views/entry/Entry.tsx
View file

@ -30,6 +30,7 @@ const EntryView = ({ session }: HomeProps) => {
return (
<Login>
<h1>Welcome to ThunderHub</h1>
<h2>This is the entry page</h2>
{session ? (
<SessionLogin />
) : login ? (