Merge pull request #237 from apotdevin/invoice-channel

chore: show invoice channel

server/schema/transactions/resolvers.ts

@@ -50,17 +50,16 @@ export const transactionResolvers = {
         batch: 25,
       });
 
-      const mappedInvoices = invoices.map(invoice => {
-        return {
-          type: 'invoice',
-          date: invoice.confirmed_at || invoice.created_at,
-          ...invoice,
-          isTypeOf: 'InvoiceType',
-          messages: invoice.payments
-            .map(p => decodeMessages(p.messages))
-            .filter(Boolean),
-        };
-      });
+      const mappedInvoices = invoices.map(invoice => ({
+        type: 'invoice',
+        date: invoice.confirmed_at || invoice.created_at,
+        ...invoice,
+        isTypeOf: 'InvoiceType',
+        payments: invoice.payments.map(p => ({
+          ...p,
+          messages: decodeMessages(p.messages),
+        })),
+      }));
 
       const resume = sortBy(
         [...mappedInvoices, ...mappedPayments],

server/schema/transactions/types.ts

@@ -46,6 +46,11 @@ export const transactionTypes = gql`
     date: String!
   }
 
+  type InvoicePayment {
+    in_channel: String!
+    messages: MessageType
+  }
+
   type InvoiceType {
     chain_address: String
     confirmed_at: String
@@ -66,7 +71,7 @@ export const transactionTypes = gql`
     tokens: String!
     type: String!
     date: String!
-    messages: [MessageType]!
+    payments: [InvoicePayment]!
   }
 
   union Transaction = InvoiceType | PaymentType

src/graphql/queries/__generated__/getResume.generated.tsx

@@ -18,9 +18,13 @@ export type GetResumeQuery = (
     & { resume?: Types.Maybe<Array<Types.Maybe<(
       { __typename?: 'InvoiceType' }
       & Pick<Types.InvoiceType, 'chain_address' | 'confirmed_at' | 'created_at' | 'description' | 'description_hash' | 'expires_at' | 'id' | 'is_canceled' | 'is_confirmed' | 'is_held' | 'is_private' | 'is_push' | 'received' | 'received_mtokens' | 'request' | 'secret' | 'tokens' | 'type' | 'date'>
-      & { messages: Array<Types.Maybe<(
-        { __typename?: 'MessageType' }
-        & Pick<Types.MessageType, 'message'>
+      & { payments: Array<Types.Maybe<(
+        { __typename?: 'InvoicePayment' }
+        & Pick<Types.InvoicePayment, 'in_channel'>
+        & { messages?: Types.Maybe<(
+          { __typename?: 'MessageType' }
+          & Pick<Types.MessageType, 'message'>
+        )> }
       )>> }
     ) | (
       { __typename?: 'PaymentType' }
@@ -68,8 +72,11 @@ export const GetResumeDocument = gql`
         tokens
         type
         date
-        messages {
-          message
+        payments {
+          in_channel
+          messages {
+            message
+          }
         }
       }
       ... on PaymentType {

src/graphql/queries/getResume.ts

@@ -25,8 +25,11 @@ export const GET_RESUME = gql`
           tokens
           type
           date
-          messages {
-            message
+          payments {
+            in_channel
+            messages {
+              message
+            }
           }
         }
         ... on PaymentType {

src/graphql/types.ts

@@ -879,6 +879,12 @@ export type PaymentType = {
   date: Scalars['String'];
 };
 
+export type InvoicePayment = {
+  __typename?: 'InvoicePayment';
+  in_channel: Scalars['String'];
+  messages?: Maybe<MessageType>;
+};
+
 export type InvoiceType = {
   __typename?: 'InvoiceType';
   chain_address?: Maybe<Scalars['String']>;
@@ -900,7 +906,7 @@ export type InvoiceType = {
   tokens: Scalars['String'];
   type: Scalars['String'];
   date: Scalars['String'];
-  messages: Array<Maybe<MessageType>>;
+  payments: Array<Maybe<InvoicePayment>>;
 };
 
 export type Transaction = InvoiceType | PaymentType;

src/views/transactions/InvoiceCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { InvoiceType } from 'src/graphql/types';
 import {
   Separation,
@@ -22,6 +22,9 @@ import { Price } from '../../components/price/Price';
 import { MessageCircle } from 'react-feather';
 import styled from 'styled-components';
 import { themeColors } from 'src/styles/Themes';
+import { useGetChannelQuery } from 'src/graphql/queries/__generated__/getChannel.generated';
+import { useNodeInfo } from 'src/hooks/UseNodeInfo';
+import { LoadingCard } from 'src/components/loading/LoadingCard';
 
 const S = {
   icon: styled.span`
@@ -36,6 +39,27 @@ interface InvoiceCardProps {
   indexOpen: number;
 }
 
+const ChannelAlias: FC<{ id: string }> = ({ id }) => {
+  const { publicKey } = useNodeInfo();
+
+  const { data, loading, error } = useGetChannelQuery({
+    variables: { id, pubkey: publicKey },
+  });
+
+  if (loading) {
+    return <>{renderLine('Peer', <LoadingCard noCard={true} />)}</>;
+  }
+
+  if (error) {
+    return <>{renderLine('Peer', 'Unknown')}</>;
+  }
+
+  const alias =
+    data?.getChannel.partner_node_policies?.node?.node.alias || 'Unknown';
+
+  return <>{renderLine('Peer', alias)}</>;
+};
+
 export const InvoiceCard = ({
   invoice,
   index,
@@ -57,10 +81,13 @@ export const InvoiceCard = ({
     secret,
     tokens,
     date,
-    messages,
+    payments,
   } = invoice;
 
-  const texts = messages.map(m => m?.message).filter(Boolean);
+  const inChannels = payments.map(p => p?.in_channel).filter(Boolean);
+  const hasChannels = !!inChannels.length;
+
+  const texts = payments.map(p => p?.messages?.message).filter(Boolean);
   const hasMessages = !!texts.length;
 
   const formatAmount = <Price amount={tokens} />;
@@ -80,11 +107,24 @@ export const InvoiceCard = ({
     </>
   );
 
+  const renderInChannels = () => (
+    <>
+      {inChannels.map(t => (
+        <>
+          {renderLine('In Through', t)}
+          {t && <ChannelAlias id={t} />}
+        </>
+      ))}
+      <Separation />
+    </>
+  );
+
   const renderDetails = () => {
     return (
       <>
         <Separation />
         {hasMessages && renderMessages()}
+        {hasChannels && renderInChannels()}
         {is_confirmed &&
           renderLine(
             'Confirmed:',