From a2bf90a4b2a5d55d42ae8681887340c1d18087d0 Mon Sep 17 00:00:00 2001 From: AP Date: Wed, 20 May 2020 21:06:26 +0200 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=94=A7=20home=20input=20styling?= =?UTF-8?q?=20and=20bug=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mutations/onchain/sendToAddress.ts | 6 +- src/components/input/InputWithDeco.tsx | 86 +++++++++++ .../home/account/sendOnChain/SendOnChain.tsx | 135 +++++++----------- .../quickActions/openChannel/OpenChannel.tsx | 101 +++++-------- 4 files changed, 175 insertions(+), 153 deletions(-) create mode 100644 src/components/input/InputWithDeco.tsx diff --git a/api/schemas/mutations/onchain/sendToAddress.ts b/api/schemas/mutations/onchain/sendToAddress.ts index 5561ade6..84910065 100644 --- a/api/schemas/mutations/onchain/sendToAddress.ts +++ b/api/schemas/mutations/onchain/sendToAddress.ts @@ -52,7 +52,7 @@ export const sendToAddress = { const send: SendProps = await sendToChainAddress({ lnd, address: params.address, - tokens: params.tokens, + ...(params.tokens && { tokens: params.tokens }), ...props, ...sendAll, }); @@ -62,10 +62,10 @@ export const sendToAddress = { id: send.id, isConfirmed: send.is_confirmed, isOutgoing: send.is_outgoing, - tokens: send.tokens, + ...(send.tokens && { tokens: send.tokens }), }; } catch (error) { - logger.error('Error creating address: %o', error); + logger.error('Error sending to chain address: %o', error); throw new Error(getErrorMsg(error)); } }, diff --git a/src/components/input/InputWithDeco.tsx b/src/components/input/InputWithDeco.tsx new file mode 100644 index 00000000..27957bfc --- /dev/null +++ b/src/components/input/InputWithDeco.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { unSelectedNavButton, mediaWidths } from 'src/styles/Themes'; +import { SingleLine } from '../generic/Styled'; +import { Price } from '../price/Price'; +import { Input } from './Input'; + +const NoWrapText = styled.div` + white-space: nowrap; + font-size: 14px; +`; + +const InputTitle = styled(NoWrapText)``; + +const AmountText = styled(NoWrapText)` + color: ${unSelectedNavButton}; + margin: 0 8px 0 16px; +`; + +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; + noInput?: boolean; + amount?: number; + customAmount?: string; + color?: string; + placeholder?: string; + inputType?: string; + inputCallback?: (value: string) => void; +}; + +export const InputWithDeco: React.FC = ({ + title, + amount, + customAmount, + children, + placeholder, + color, + noInput, + inputType = 'text', + inputCallback, +}) => { + console.log({ customAmount }); + const showAmount = !!amount || customAmount; + return ( + + + {title} + {showAmount && ( + + {customAmount ? customAmount : } + + )} + + {!noInput && ( + inputCallback && inputCallback(e.target.value)} + /> + )} + {children} + + ); +}; diff --git a/src/views/home/account/sendOnChain/SendOnChain.tsx b/src/views/home/account/sendOnChain/SendOnChain.tsx index 19f7649e..4d948aaf 100644 --- a/src/views/home/account/sendOnChain/SendOnChain.tsx +++ b/src/views/home/account/sendOnChain/SendOnChain.tsx @@ -1,13 +1,10 @@ import React, { useState, useEffect } from 'react'; -import styled from 'styled-components'; import { toast } from 'react-toastify'; import { usePayAddressMutation } from 'src/graphql/mutations/__generated__/sendToAddress.generated'; +import { InputWithDeco } from 'src/components/input/InputWithDeco'; import { - NoWrapTitle, - DarkSubTitle, Separation, SingleLine, - ResponsiveLine, SubTitle, } from '../../../../components/generic/Styled'; import { getErrorContent } from '../../../../utils/error'; @@ -19,29 +16,12 @@ import { SingleButton, } from '../../../../components/buttons/multiButton/MultiButton'; import { Price, getPrice } from '../../../../components/price/Price'; -import { mediaWidths } from '../../../../styles/Themes'; import { useConfigState } from '../../../../context/ConfigContext'; import Modal from '../../../../components/modal/ReactModal'; import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton'; import { renderLine } from '../../../../components/generic/helpers'; import { usePriceState } from '../../../../context/PriceContext'; -const ResponsiveWrap = styled(SingleLine)` - @media (${mediaWidths.mobile}) { - flex-wrap: wrap; - } -`; - -const NoWrap = styled.div` - margin-left: 8px; - white-space: nowrap; -`; - -const Margin = styled.div` - margin-left: 8px; - margin-right: 24px; -`; - export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { const { fast, halfHour, hour, dontShow } = useBitcoinState(); const { currency, displayValues } = useConfigState(); @@ -80,12 +60,17 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { return `${amount} blocks`; }; - const typeAmount = - type === 'fee' - ? { fee: amount } - : type === 'target' - ? { target: amount } - : {}; + const typeAmount = () => { + switch (type) { + case 'none': + case 'fee': + return { fee: amount }; + case 'target': + return { target: amount }; + default: + return {}; + } + }; const tokenAmount = sendAll ? { sendAll } : { tokens }; @@ -101,47 +86,30 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { return ( <> - - Send to Address: - setAddress(e.target.value)} - /> - + setAddress(value)} + /> - - Send All: + {renderButton(() => setSendAll(true), 'Yes', sendAll)} {renderButton(() => setSendAll(false), 'No', !sendAll)} - + {!sendAll && ( - - - Amount: - - - - - - - - - setTokens(Number(e.target.value))} - /> - + setTokens(Number(value))} + /> )} - - Fee: - + + {!dontShow && renderButton( () => { @@ -168,28 +136,25 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { type === 'target' )} - - - - Fee Amount: - - {`(~${ - type === 'target' ? `${amount} blocks` : feeFormat(amount * 223) - })`} - - - {type !== 'none' && ( - <> - setAmount(Number(e.target.value))} - /> - - )} - {type === 'none' && ( - + + + {type !== 'none' ? ( + 0 && amount} + maxWidth={'500px'} + 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)`, @@ -208,7 +173,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { )} )} - + void }) => { Send to Address - {renderLine('Amount:', )} + {renderLine('Amount:', sendAll ? 'All' : )} {renderLine('Address:', address)} {renderLine( 'Fee:', @@ -233,7 +198,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { )} { return ( - - Node Public Key: - setPublicKey(e.target.value)} - /> - - - - Channel Size: - - - - - - - setSize(Number(e.target.value))} - /> - + setPublicKey(value)} + /> + setSize(Number(value))} + /> - - Private Channel: - - {renderButton(() => setPrivateChannel(true), 'Yes', privateChannel)} - {renderButton(() => setPrivateChannel(false), 'No', !privateChannel)} + + + {renderButton( + () => setPrivateChannel(true), + 'Private', + privateChannel + )} + {renderButton( + () => setPrivateChannel(false), + 'Public', + !privateChannel + )} - + {!dontShow && ( - - Fee: - + + {renderButton( () => { setType('none'); @@ -125,18 +102,12 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => { type === 'fee' )} - + )} - - - Fee Amount: - - - - + {type !== 'none' && ( { /> )} {type === 'none' && ( - + {renderButton( () => setFee(fast), `Fastest (${fast} sats)`, @@ -163,7 +134,7 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => { )} )} - +