From 1750b71340b814684d29b2cbbabc9f3878ee4808 Mon Sep 17 00:00:00 2001
From: Anthony Potdevin <potdevin.anthony@gmail.com>
Date: Mon, 31 Aug 2020 10:28:36 +0200
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=94=A7=20description=20for=20cre?=
 =?UTF-8?q?ate=20invoice?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/schema/invoice/resolvers.ts            | 10 ++++-
 server/schema/types.ts                        |  2 +-
 .../__generated__/createInvoice.generated.tsx |  6 ++-
 src/graphql/mutations/createInvoice.ts        |  4 +-
 src/graphql/types.ts                          |  1 +
 .../account/createInvoice/CreateInvoice.tsx   | 38 ++++++++++---------
 6 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/server/schema/invoice/resolvers.ts b/server/schema/invoice/resolvers.ts
index d441d061..f86f37cd 100644
--- a/server/schema/invoice/resolvers.ts
+++ b/server/schema/invoice/resolvers.ts
@@ -73,15 +73,21 @@ export const invoiceResolvers = {
     },
   },
   Mutation: {
-    createInvoice: async (_: undefined, params: any, context: ContextType) => {
+    createInvoice: async (
+      _: undefined,
+      params: { amount: number; description: string },
+      context: ContextType
+    ) => {
       await requestLimiter(context.ip, 'createInvoice');
 
+      const { amount, description } = params;
       const { lnd } = context;
 
       return await to(
         createInvoiceRequest({
           lnd,
-          tokens: params.amount,
+          ...(description && { description }),
+          tokens: amount,
         })
       );
     },
diff --git a/server/schema/types.ts b/server/schema/types.ts
index 56789d5a..1d07c3a9 100644
--- a/server/schema/types.ts
+++ b/server/schema/types.ts
@@ -122,7 +122,7 @@ export const mutationTypes = gql`
     ): Boolean
     updateMultipleFees(channels: [channelDetailInput!]!): Boolean
     keysend(destination: String!, tokens: Int!): payType
-    createInvoice(amount: Int!): newInvoiceType
+    createInvoice(amount: Int!, description: String): newInvoiceType
     circularRebalance(route: String!): Boolean
     bosPay(
       max_fee: Int!
diff --git a/src/graphql/mutations/__generated__/createInvoice.generated.tsx b/src/graphql/mutations/__generated__/createInvoice.generated.tsx
index 131a34e4..7b924559 100644
--- a/src/graphql/mutations/__generated__/createInvoice.generated.tsx
+++ b/src/graphql/mutations/__generated__/createInvoice.generated.tsx
@@ -5,6 +5,7 @@ import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 export type CreateInvoiceMutationVariables = Types.Exact<{
   amount: Types.Scalars['Int'];
+  description?: Types.Maybe<Types.Scalars['String']>;
 }>;
 
 
@@ -18,8 +19,8 @@ export type CreateInvoiceMutation = (
 
 
 export const CreateInvoiceDocument = gql`
-    mutation CreateInvoice($amount: Int!) {
-  createInvoice(amount: $amount) {
+    mutation CreateInvoice($amount: Int!, $description: String) {
+  createInvoice(amount: $amount, description: $description) {
     request
     id
   }
@@ -41,6 +42,7 @@ export type CreateInvoiceMutationFn = Apollo.MutationFunction<CreateInvoiceMutat
  * const [createInvoiceMutation, { data, loading, error }] = useCreateInvoiceMutation({
  *   variables: {
  *      amount: // value for 'amount'
+ *      description: // value for 'description'
  *   },
  * });
  */
diff --git a/src/graphql/mutations/createInvoice.ts b/src/graphql/mutations/createInvoice.ts
index 5d216937..71480cd1 100644
--- a/src/graphql/mutations/createInvoice.ts
+++ b/src/graphql/mutations/createInvoice.ts
@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_INVOICE = gql`
-  mutation CreateInvoice($amount: Int!) {
-    createInvoice(amount: $amount) {
+  mutation CreateInvoice($amount: Int!, $description: String) {
+    createInvoice(amount: $amount, description: $description) {
       request
       id
     }
diff --git a/src/graphql/types.ts b/src/graphql/types.ts
index c4d2cf11..d7fb4580 100644
--- a/src/graphql/types.ts
+++ b/src/graphql/types.ts
@@ -284,6 +284,7 @@ export type MutationKeysendArgs = {
 
 export type MutationCreateInvoiceArgs = {
   amount: Scalars['Int'];
+  description?: Maybe<Scalars['String']>;
 };
 
 
diff --git a/src/views/home/account/createInvoice/CreateInvoice.tsx b/src/views/home/account/createInvoice/CreateInvoice.tsx
index 1a9b37f3..c05240f7 100644
--- a/src/views/home/account/createInvoice/CreateInvoice.tsx
+++ b/src/views/home/account/createInvoice/CreateInvoice.tsx
@@ -7,13 +7,9 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { useCreateInvoiceMutation } from 'src/graphql/mutations/__generated__/createInvoice.generated';
 import { Title } from 'src/layouts/footer/Footer.styled';
 import { Link } from 'src/components/link/Link';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
 import { getErrorContent } from '../../../../utils/error';
 import { ColorButton } from '../../../../components/buttons/colorButton/ColorButton';
-import {
-  NoWrapTitle,
-  ResponsiveLine,
-} from '../../../../components/generic/Styled';
-import { Input } from '../../../../components/input';
 import { mediaWidths, chartColors } from '../../../../styles/Themes';
 import { InvoiceStatus } from './InvoiceStatus';
 import { Timer } from './Timer';
@@ -62,6 +58,8 @@ const Column = styled.div`
 
 export const CreateInvoiceCard = ({ color }: { color: string }) => {
   const [amount, setAmount] = useState(0);
+  const [description, setDescription] = useState('');
+
   const [request, setRequest] = useState('');
   const [id, setId] = useState('');
 
@@ -124,28 +122,34 @@ export const CreateInvoiceCard = ({ color }: { color: string }) => {
   );
 
   const renderContent = () => (
-    <ResponsiveLine>
-      <NoWrapTitle>Amount to receive:</NoWrapTitle>
-      <Input
+    <>
+      <InputWithDeco
+        title={'Amount to receive'}
+        value={amount}
         placeholder={'Sats'}
-        withMargin={'0 0 0 16px'}
-        mobileMargin={'0 0 16px'}
+        amount={amount}
+        inputType={'number'}
+        inputCallback={value => setAmount(Number(value))}
+        color={color}
+      />
+      <InputWithDeco
+        title={'Description'}
+        value={description}
+        placeholder={'Description'}
+        inputCallback={value => setDescription(value)}
         color={color}
-        type={'number'}
-        onChange={e => setAmount(Number(e.target.value))}
       />
       <ColorButton
-        onClick={() => createInvoice({ variables: { amount } })}
+        onClick={() => createInvoice({ variables: { amount, description } })}
         disabled={amount === 0}
-        withMargin={'0 0 0 16px'}
-        mobileMargin={'0'}
+        withMargin={'16px 0 0'}
         arrow={true}
         loading={loading}
-        mobileFullWidth={true}
+        fullWidth={true}
       >
         Create Invoice
       </ColorButton>
-    </ResponsiveLine>
+    </>
   );
 
   return request !== '' ? renderQr() : renderContent();