chore: 🔧 description for create invoice

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,
         })
       );
     },

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!

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
     }

src/graphql/types.ts

@@ -284,6 +284,7 @@ export type MutationKeysendArgs = {
 
 export type MutationCreateInvoiceArgs = {
   amount: Scalars['Int'];
+  description?: Maybe<Scalars['String']>;
 };
 
 

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();