chore: 🔧 home input styling and bug fix

2025-02-21 14:04:03 +01:00 · 2020-05-20 21:06:26 +02:00 · 2020-05-20 21:06:26 +02:00 · a2bf90a4b2
commit a2bf90a4b2
parent 8384224c9b
4 changed files with 175 additions and 153 deletions
--- 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));
    }
  },
--- a/src/components/input/InputWithDeco.tsx
+++ 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<InputWithDecoProps> = ({
+  title,
+  amount,
+  customAmount,
+  children,
+  placeholder,
+  color,
+  noInput,
+  inputType = 'text',
+  inputCallback,
+}) => {
+  console.log({ customAmount });
+  const showAmount = !!amount || customAmount;
+  return (
+    <InputLine>
+      <InputTitleRow>
+        <InputTitle>{title}</InputTitle>
+        {showAmount && (
+          <AmountText>
+            {customAmount ? customAmount : <Price amount={amount} />}
+          </AmountText>
+        )}
+      </InputTitleRow>
+      {!noInput && (
+        <Input
+          maxWidth={'500px'}
+          placeholder={placeholder}
+          color={color}
+          withMargin={'0 0 0 8px'}
+          mobileMargin={'0'}
+          type={inputType}
+          onChange={e => inputCallback && inputCallback(e.target.value)}
+        />
+      )}
+      {children}
+    </InputLine>
+  );
+};
--- 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 (
    <>
-      <ResponsiveLine>
-        <NoWrapTitle>Send to Address:</NoWrapTitle>
-        <Input
-          placeholder={'Address'}
-          withMargin={'0 0 0 24px'}
-          mobileMargin={'0'}
-          onChange={e => setAddress(e.target.value)}
-        />
-      </ResponsiveLine>
+      <InputWithDeco
+        title={'Send to Address'}
+        placeholder={'Address'}
+        inputCallback={value => setAddress(value)}
+      />
      <Separation />
-      <SingleLine>
-        <NoWrapTitle>Send All:</NoWrapTitle>
+      <InputWithDeco title={'Send All'} noInput={true}>
        <MultiButton>
          {renderButton(() => setSendAll(true), 'Yes', sendAll)}
          {renderButton(() => setSendAll(false), 'No', !sendAll)}
        </MultiButton>
-      </SingleLine>
+      </InputWithDeco>
      {!sendAll && (
-        <SingleLine>
-          <ResponsiveWrap>
-            <NoWrapTitle>Amount:</NoWrapTitle>
-            <Margin>
-              <NoWrap>
-                <DarkSubTitle>
-                  <Price amount={tokens} />
-                </DarkSubTitle>
-              </NoWrap>
-            </Margin>
-          </ResponsiveWrap>
-          <Input
-            placeholder={'Sats'}
-            withMargin={'0 0 0 8px'}
-            type={'number'}
-            onChange={e => setTokens(Number(e.target.value))}
-          />
-        </SingleLine>
+        <InputWithDeco
+          title={'Amount'}
+          placeholder={'Sats'}
+          amount={tokens}
+          inputType={'number'}
+          inputCallback={value => setTokens(Number(value))}
+        />
      )}
      <Separation />
-      <SingleLine>
-        <NoWrapTitle>Fee:</NoWrapTitle>
-        <MultiButton margin={'8px 0 8px 16px'}>
+      <InputWithDeco title={'Fee'} noInput={true}>
+        <MultiButton>
          {!dontShow &&
            renderButton(
              () => {
@ -168,28 +136,25 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
            type === 'target'
          )}
        </MultiButton>
-      </SingleLine>
-      <SingleLine>
-        <ResponsiveWrap>
-          <NoWrapTitle>Fee Amount:</NoWrapTitle>
-          <NoWrap>
-            <DarkSubTitle>{`(~${
-              type === 'target' ? `${amount} blocks` : feeFormat(amount * 223)
-            })`}</DarkSubTitle>
-          </NoWrap>
-        </ResponsiveWrap>
-        {type !== 'none' && (
-          <>
-            <Input
-              placeholder={type === 'target' ? 'Blocks' : 'Sats/Byte'}
-              type={'number'}
-              withMargin={'0 0 0 8px'}
-              onChange={e => setAmount(Number(e.target.value))}
-            />
-          </>
-        )}
-        {type === 'none' && (
-          <MultiButton margin={'8px 0 8px 16px'}>
+      </InputWithDeco>
+      <InputWithDeco
+        title={'Fee Amount'}
+        noInput={true}
+        customAmount={`(~${
+          type === 'target' ? `${amount} blocks` : feeFormat(amount * 223)
+        })`}
+      >
+        {type !== 'none' ? (
+          <Input
+            value={amount > 0 && amount}
+            maxWidth={'500px'}
+            placeholder={type === 'target' ? 'Blocks' : 'Sats/Byte'}
+            type={'number'}
+            withMargin={'0 0 0 8px'}
+            onChange={e => setAmount(Number(e.target.value))}
+          />
+        ) : (
+          <MultiButton>
            {renderButton(
              () => setAmount(fast),
              `Fastest (${fast} sats)`,
@ -208,7 +173,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
            )}
          </MultiButton>
        )}
-      </SingleLine>
+      </InputWithDeco>
      <Separation />
      <ColorButton
        disabled={!canSend}
@ -225,7 +190,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
        <SingleLine>
          <SubTitle>Send to Address</SubTitle>
        </SingleLine>
-        {renderLine('Amount:', <Price amount={tokens} />)}
+        {renderLine('Amount:', sendAll ? 'All' : <Price amount={tokens} />)}
        {renderLine('Address:', address)}
        {renderLine(
          'Fee:',
@ -233,7 +198,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
        )}
        <SecureButton
          callback={payAddress}
-          variables={{ address, ...typeAmount, ...tokenAmount }}
+          variables={{ address, ...typeAmount(), ...tokenAmount }}
          disabled={!canSend}
          withMargin={'16px 0 0'}
          fullWidth={true}
--- a/src/views/home/quickActions/openChannel/OpenChannel.tsx
+++ b/src/views/home/quickActions/openChannel/OpenChannel.tsx
@ -1,16 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { ChevronRight } from 'react-feather';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 import { useOpenChannelMutation } from 'src/graphql/mutations/__generated__/openChannel.generated';
-import {
-  Card,
-  SingleLine,
-  Separation,
-  DarkSubTitle,
-  NoWrapTitle,
-  ResponsiveLine,
-} from '../../../../components/generic/Styled';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
+import { Card, Separation } from '../../../../components/generic/Styled';
 import { getErrorContent } from '../../../../utils/error';
 import { useBitcoinState } from '../../../../context/BitcoinContext';
 import { SecureButton } from '../../../../components/buttons/secureButton/SecureButton';
@ -19,14 +12,6 @@ import {
  SingleButton,
  MultiButton,
 } from '../../../../components/buttons/multiButton/MultiButton';
-import { Price } from '../../../../components/price/Price';
-import { mediaWidths } from '../../../../styles/Themes';
-
-const ResponsiveWrap = styled(SingleLine)`
-  @media (${mediaWidths.mobile}) {
-    flex-wrap: wrap;
-  }
-`;

 interface OpenChannelProps {
  color: string;
@ -70,47 +55,39 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => {

  return (
    <Card bottom={'20px'}>
-      <ResponsiveLine>
-        <NoWrapTitle>Node Public Key:</NoWrapTitle>
-        <Input
-          placeholder={'Public Key'}
-          color={color}
-          withMargin={'0 0 0 8px'}
-          mobileMargin={'0'}
-          onChange={e => setPublicKey(e.target.value)}
-        />
-      </ResponsiveLine>
-      <ResponsiveLine>
-        <ResponsiveWrap>
-          <NoWrapTitle>Channel Size:</NoWrapTitle>
-          <NoWrapTitle>
-            <DarkSubTitle>
-              <Price amount={size} />
-            </DarkSubTitle>
-          </NoWrapTitle>
-        </ResponsiveWrap>
-        <Input
-          placeholder={'Sats'}
-          color={color}
-          withMargin={'0 0 0 8px'}
-          mobileMargin={'0'}
-          type={'number'}
-          onChange={e => setSize(Number(e.target.value))}
-        />
-      </ResponsiveLine>
+      <InputWithDeco
+        color={color}
+        title={'Node Public Key'}
+        placeholder={'Public Key'}
+        inputCallback={value => setPublicKey(value)}
+      />
+      <InputWithDeco
+        color={color}
+        title={'Channel Size'}
+        placeholder={'Sats'}
+        amount={size}
+        inputType={'number'}
+        inputCallback={value => setSize(Number(value))}
+      />
      <Separation />
-      <SingleLine>
-        <NoWrapTitle>Private Channel:</NoWrapTitle>
-        <MultiButton margin={'8px 0 8px 16px'}>
-          {renderButton(() => setPrivateChannel(true), 'Yes', privateChannel)}
-          {renderButton(() => setPrivateChannel(false), 'No', !privateChannel)}
+      <InputWithDeco title={'Type'} noInput={true}>
+        <MultiButton>
+          {renderButton(
+            () => setPrivateChannel(true),
+            'Private',
+            privateChannel
+          )}
+          {renderButton(
+            () => setPrivateChannel(false),
+            'Public',
+            !privateChannel
+          )}
        </MultiButton>
-      </SingleLine>
+      </InputWithDeco>
      <Separation />
      {!dontShow && (
-        <SingleLine>
-          <NoWrapTitle>Fee:</NoWrapTitle>
-          <MultiButton margin={'8px 0 8px 16px'}>
+        <InputWithDeco title={'Fee'} noInput={true}>
+          <MultiButton>
            {renderButton(
              () => {
                setType('none');
@ -125,18 +102,12 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => {
              type === 'fee'
            )}
          </MultiButton>
-        </SingleLine>
+        </InputWithDeco>
      )}
-      <SingleLine>
-        <ResponsiveWrap>
-          <NoWrapTitle>Fee Amount:</NoWrapTitle>
-          <DarkSubTitle>
-            <Price amount={fee * 223} />
-          </DarkSubTitle>
-        </ResponsiveWrap>
+      <InputWithDeco title={'Fee Amount'} amount={fee * 223} noInput={true}>
        {type !== 'none' && (
          <Input
-            withMargin={'8px 0 8px 16px'}
+            maxWidth={'500px'}
            placeholder={'Sats/Byte'}
            color={color}
            type={'number'}
@ -144,7 +115,7 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => {
          />
        )}
        {type === 'none' && (
-          <MultiButton margin={'8px 0 8px 16px'}>
+          <MultiButton>
            {renderButton(
              () => setFee(fast),
              `Fastest (${fast} sats)`,
@ -163,7 +134,7 @@ export const OpenChannelCard = ({ color, setOpenCard }: OpenChannelProps) => {
            )}
          </MultiButton>
        )}
-      </SingleLine>
+      </InputWithDeco>
      <Separation />
      <SecureButton
        fullWidth={true}