refactor: payment modal

apotdevin · May 2, 2021 · 7db0dec · 7db0dec
1 parent db87b42
commit 7db0dec
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 209 deletions.
diff --git a/src/components/select/SelectWithDeco.tsx b/src/components/select/SelectWithDeco.tsx
@@ -36,6 +36,7 @@ type InputWithDecoProps = {
   isMulti?: boolean;
   noInput?: boolean;
   loading?: boolean;
+  maxWidth?: string;
   callback: (value: ValueProp[]) => void;
 };
 
@@ -46,6 +47,7 @@ export const SelectWithDeco: React.FC<InputWithDecoProps> = ({
   options,
   isMulti,
   loading,
+  maxWidth,
   callback,
 }) => {
   const renderContent = () => {
@@ -56,7 +58,7 @@ export const SelectWithDeco: React.FC<InputWithDecoProps> = ({
         return (
           <Select
             isMulti={isMulti}
-            maxWidth={'500px'}
+            maxWidth={maxWidth || '500px'}
             options={options}
             callback={callback}
           />

diff --git a/src/components/select/specific/ChannelSelect.tsx b/src/components/select/specific/ChannelSelect.tsx
@@ -8,12 +8,14 @@ import { ValueProp } from '..';
 type ChannelSelectProps = {
   title: string;
   isMulti?: boolean;
+  maxWidth?: string;
   callback: (peer: ChannelType[]) => void;
 };
 
 export const ChannelSelect = ({
   title,
   isMulti,
+  maxWidth,
   callback,
 }: ChannelSelectProps) => {
   const { data, loading } = useGetChannelsQuery();
@@ -64,6 +66,7 @@ export const ChannelSelect = ({
       title={title}
       options={options}
       callback={handleChange}
+      maxWidth={maxWidth}
     />
   );
 };
diff --git a/src/views/home/account/pay/Pay.tsx b/src/views/home/account/pay/Pay.tsx
@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
-import { InputWithDeco } from 'src/components/input/InputWithDeco';
-import { useBosPayMutation } from 'src/graphql/mutations/__generated__/bosPay.generated';
-import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
-import { Separation, SingleLine } from 'src/components/generic/Styled';
 import { toast } from 'react-toastify';
-import { ChannelSelect } from 'src/components/select/specific/ChannelSelect';
 import { getErrorContent } from 'src/utils/error';
+import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
+import { SingleLine, Separation } from '../../../../components/generic/Styled';
+import { useEffect, useState } from 'react';
+import { useBosPayMutation } from 'src/graphql/mutations/__generated__/bosPay.generated';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
+import { ChannelSelect } from 'src/components/select/specific/ChannelSelect';
+import { useDecodeRequestLazyQuery } from 'src/graphql/queries/__generated__/decodeRequest.generated';
+import { renderLine } from 'src/components/generic/helpers';
+import { Price } from 'src/components/price/Price';
+import { Camera } from 'react-feather';
 import Modal from 'src/components/modal/ReactModal';
 import dynamic from 'next/dynamic';
 import { LoadingCard } from 'src/components/loading/LoadingCard';
-import { Camera } from 'react-feather';
 
 const QRCodeReader = dynamic(() => import('src/components/qrReader'), {
   ssr: false,
@@ -18,19 +21,24 @@ const QRCodeReader = dynamic(() => import('src/components/qrReader'), {
   },
 });
 
-type PayProps = {
+interface PayProps {
   predefinedRequest?: string;
   payCallback?: () => void;
-};
+}
 
-export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
+export const Pay: React.FC<PayProps> = ({ predefinedRequest, payCallback }) => {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
   const [request, setRequest] = useState<string>(predefinedRequest || '');
   const [peers, setPeers] = useState<string[]>([]);
-  const [fee, setFee] = useState<number>(1);
+  const [fee, setFee] = useState<number>(10);
   const [paths, setPaths] = useState<number>(1);
 
+  const [decode, { data, loading: decodeLoading }] = useDecodeRequestLazyQuery({
+    fetchPolicy: 'network-only',
+    onError: () => toast.error('Error decoding invoice'),
+  });
+
   const [pay, { loading }] = useBosPayMutation({
     onCompleted: () => {
       payCallback && payCallback();
@@ -40,6 +48,12 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
     onError: error => toast.error(getErrorContent(error)),
   });
 
+  useEffect(() => {
+    if (predefinedRequest) {
+      decode({ variables: { request: predefinedRequest } });
+    }
+  }, []);
+
   const handleEnter = () => {
     if (loading || !request) return;
     pay({
@@ -52,6 +66,27 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
     });
   };
 
+  const renderDecoded = () => {
+    if (decodeLoading) {
+      return <>Decoding invoice...</>;
+    }
+
+    if (!data?.decodeRequest) return null;
+
+    const { description, tokens, destination_node } = data.decodeRequest;
+
+    const { alias } = destination_node.node;
+
+    return (
+      <>
+        {renderLine('Description', description)}
+        {renderLine('Value', <Price amount={tokens} />)}
+        {renderLine('Destination', alias)}
+        <Separation />
+      </>
+    );
+  };
+
   return (
     <>
       {!predefinedRequest && (
@@ -63,7 +98,11 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
               placeholder={'Invoice'}
               inputCallback={value => setRequest(value)}
               onEnter={() => handleEnter()}
-              inputMaxWidth={'440px'}
+              inputMaxWidth={'240px'}
+              blurCallback={() => {
+                if (!request) return;
+                decode({ variables: { request } });
+              }}
             />
             <ColorButton
               withMargin={'0 0 0 8px'}
@@ -75,12 +114,14 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
           <Separation />
         </>
       )}
+      {renderDecoded()}
       <InputWithDeco
         title={'Max Fee'}
         value={fee}
         amount={fee}
         placeholder={'sats'}
         inputType={'number'}
+        inputMaxWidth={'300px'}
         inputCallback={value => setFee(Math.max(1, Number(value)))}
         onEnter={() => handleEnter()}
       />
@@ -89,13 +130,15 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
         value={paths}
         placeholder={'paths'}
         inputType={'number'}
+        inputMaxWidth={'300px'}
         inputCallback={value => setPaths(Math.max(1, Number(value)))}
         onEnter={() => handleEnter()}
       />
       <Separation />
       <ChannelSelect
         title={'Out Channels'}
         isMulti={true}
+        maxWidth={'300px'}
         callback={p => setPeers(p.map(peer => peer.partner_public_key))}
       />
       <Separation />

diff --git a/src/views/home/account/pay/RequestModal.tsx b/src/views/home/account/pay/RequestModal.tsx
diff --git a/src/views/home/quickActions/donate/DonateContent.tsx b/src/views/home/quickActions/donate/DonateContent.tsx
@@ -20,7 +20,7 @@ import { useGetCanConnectInfoQuery } from 'src/graphql/queries/__generated__/get
 import { useCreateThunderPointsMutation } from 'src/graphql/mutations/__generated__/createThunderPoints.generated';
 import { toast } from 'react-toastify';
 import { useBaseConnect } from 'src/hooks/UseBaseConnect';
-import { RequestModal } from '../../account/pay/RequestModal';
+import { Pay } from '../../account/pay/Pay';
 
 const StyledText = styled.div`
   text-align: center;
@@ -153,7 +153,7 @@ export const SupportBar = () => {
         </ColorButton>
       </Card>
       <Modal isOpen={modalOpen} closeCallback={handleReset}>
-        <RequestModal request={invoice} handleReset={handlePaidReset} />
+        <Pay predefinedRequest={invoice} payCallback={handlePaidReset} />
       </Modal>
     </>
   );