Merge pull request #37 from c13n-io/feat/payreq-invoices

Feat/payreq invoices
c13n-io · Mar 16, 2022 · b68402d · b68402d
2 parents c721f06 + 082e33b
commit b68402d
Show file tree

Hide file tree

Showing 20 changed files with 2,995 additions and 2,097 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,11 +6,11 @@
   "dependencies": {
     "antd": "^4.2.0",
     "axios": "^0.21.1",
+    "bolt11": "^1.3.4",
     "emoji-picker-react": "^3.4.4",
     "fs": "0.0.1-security",
     "gh-pages": "^3.2.3",
     "google-protobuf": "^3.14.0",
-    "grpc": "^1.24.6",
     "grpc-web": "^1.2.1",
     "html-react-parser": "^1.2.4",
     "jdenticon": "^3.1.0",

diff --git a/src/components/content-pages/chat-history-input.js b/src/components/content-pages/chat-history-input.js
@@ -8,6 +8,7 @@ import {
   Dropdown,
   Menu,
   Divider,
+  Select
 } from "antd";
 import {
   PlusOutlined,
@@ -22,14 +23,14 @@ import Picker from "emoji-picker-react";
 import { NotificationManager } from "react-notifications";
 
 import messageClient from "../../services/messageServices";
+import paymentClient from "../../services/paymentServices";
 import { appendToChatHistory } from "../../utils/discussion-utils";
 import theme from "../../style/theme";
-import uploadImage from "../../utils/lsat/upload-image";
 import sleep from "../../utils/system";
 
 import {
-  messageToPayload,
-  payreqToPayload,
+  createC13nMpMessage,
+  createC13nPpMessage
 } from "../../payload-protocol/parsers";
 import "./chat-history-input.css";
 import ChatButton from "../../media/arrow-right.svg";
@@ -47,8 +48,10 @@ const ChatHistoryInput = (props) => {
   const [imageURL, setImageURL] = useState("");
   const [uploadLoading, setUploadLoading] = useState(false);
   const [payreqModalActive, setPayreqModalActive] = useState(false);
-  const [payreqAmount, setPayreqAmount] = useState(0);
+  const [payreqAmount, setPayreqAmount] = useState(1);
   const [payreqDescription, setPayreqDescription] = useState("");
+  const [payreqExpiry, setPayreqExpiry] = useState(0);
+  const [payreqPrivate, setPayreqPrivate] = useState(false);
 
   /**
    * This function sends a payload and the currently entered payload to the current discussion.
@@ -64,7 +67,7 @@ const ChatHistoryInput = (props) => {
           : parseInt(amtMsat) > 1000
             ? parseInt(amtMsat)
             : 1000,
-      payload: messageToPayload(text, attachmentList),
+      payload: createC13nMpMessage(text, attachmentList),
       options: {
         anonymous: props.anonymousActive,
       },
@@ -365,9 +368,6 @@ const ChatHistoryInput = (props) => {
         onOk={async () => {
           setUploadLoading(true);
           switch (imageURL.length) {
-          case 0:
-            uploadImage(props);
-            break;
           default:
             sendMessage("", [createAttachment("image", imageURL)]);
           }
@@ -407,37 +407,57 @@ const ChatHistoryInput = (props) => {
             cryptoUtils.currentCryptoAmtToMsat(props, payreqAmount),
             "msat"
           );
-          messageClient().sendMessage(
+          paymentClient().createInvoice(
             {
-              discussionId: props.selectedDiscussion.id,
-              payload: payreqToPayload(
-                cryptoUtils.currentCryptoAmtToMsat(props, payreqAmount),
-                payreqDescription
-              ),
-              amtMsat: 1000,
+              amtMsat: cryptoUtils.currentCryptoAmtToMsat(props, payreqAmount),
+              description: payreqDescription,
+              expiry: payreqExpiry,
+              private: payreqPrivate
             },
-            (err, res) => {
-              if (err) {
-                NotificationManager.error("Could not send message");
-                console.log(err);
+            (err, ress) => {
+              if(err) {
+                NotificationManager.error("Could not create invoice");
               }
-              if (res) {
-                setPayreqAmount(0);
-                setPayreqDescription("");
-                setPayreqModalActive(false);
-                props.selectedDiscussion.lastMsgId = res.sentMessage.id;
-                props.selectedDiscussion.lastReadMsgId = res.sentMessage.id;
-                appendToChatHistory(props, res.sentMessage);
-                props.updateCurrentFunds();
-                props.setLastFundChange(
-                  `-${Number(
-                    res.sentMessage.amtMsat / 1000 +
-                      res.sentMessage.totalFeesMsat / 1000
-                  )}`
+              if(ress) {
+                messageClient().sendMessage(
+                  {
+                    discussionId: props.selectedDiscussion.id,
+                    payload: createC13nPpMessage(
+                      "payreq",
+                      ress.invoice.paymentRequest,
+                      ress.invoice.memo
+                    ),
+                    amtMsat: 1000,
+                  },
+                  (err, res) => {
+                    if (err) {
+                      NotificationManager.error("Could not send message");
+                      console.log(err);
+                    }
+                    if (res) {
+                      setPayreqAmount(0);
+                      setPayreqDescription("");
+                      setPayreqExpiry(-1);
+                      setPayreqPrivate(false);
+                      setPayreqModalActive(false);
+                      props.selectedDiscussion.lastMsgId = res.sentMessage.id;
+                      props.selectedDiscussion.lastReadMsgId = res.sentMessage.id;
+                      appendToChatHistory(props, res.sentMessage);
+                      props.updateChatScroll();
+                      props.updateCurrentFunds();
+                      props.setLastFundChange(
+                        `-${Number(
+                          res.sentMessage.amtMsat / 1000 +
+                            res.sentMessage.totalFeesMsat / 1000
+                        )}`
+                      );
+                    }
+                  }
                 );
               }
             }
           );
+          console.log("Calling sendMessage");
         }}
         onCancel={() => {
           setPayreqModalActive(false);
@@ -463,12 +483,12 @@ const ChatHistoryInput = (props) => {
               amount <
               parseFloat(cryptoUtils.retrieveDefaultCryptoAmount(props))
             ) {
-              setAmount(
+              setPayreqAmount(
                 parseFloat(cryptoUtils.retrieveDefaultCryptoAmount(props))
               );
             }
-            if (amount > 1000000) {
-              setAmount(1000000);
+            if (amount > 10000000) {
+              setPayreqAmount(10000000);
             }
           }}
           onFocus={() => {
@@ -486,7 +506,31 @@ const ChatHistoryInput = (props) => {
             }
           }}
         />
+        <br />
+        Expiry:
+        <br />
+        <Select
+          defaultValue={3600*24}
+          onChange={(value) => {
+            setPayreqExpiry(value);
+          }}
+        >
+          <Select.Option value={3600}>1 hour</Select.Option>
+          <Select.Option value={3600*24}>24 hours</Select.Option>
+          <Select.Option value={3600*24*7}>7 days</Select.Option>
+          <Select.Option value={3600*24*30}>30 days</Select.Option>
+        </Select>
+        <br />
+        Private:
+        <br />
+        <Switch
+          defaultChecked={false}
+          onChange={(value) => {
+            setPayreqPrivate(value);
+          }}
+        />
       </Modal>
+
     </div>
   );
 };

diff --git a/src/components/content-pages/chat-history.js b/src/components/content-pages/chat-history.js
@@ -566,7 +566,9 @@ const ChatHistory = (props) => {
                     }}
                     renderItem={(item) => {
                       return (
-                        <List.Item className="chat-history-listItem">
+                        <List.Item
+                          className="chat-history-listItem"
+                        >
                           <div
                             className="chatHistoryFlexWrapper"
                             style={{
@@ -749,7 +751,8 @@ const ChatHistory = (props) => {
                                   props,
                                   item.payload,
                                   item.sender === props.selfInfo.address,
-                                  item.amtMsat
+                                  item.amtMsat,
+                                  item.discussionId
                                 )}
                               </div>
                             </div>

diff --git a/src/components/content-pages/message-info.js b/src/components/content-pages/message-info.js
@@ -109,7 +109,7 @@ const MessageInfo = (props) => {
             <List
               dataSource={props.selectedMessage.paymentRoutesList}
               renderItem={(item) => {
-                return <div>{routeHopsList(item)}</div>;
+                return <div key={`${Date.now()}${Math.random()}`}>{routeHopsList(item)}</div>;
               }}
             />
           </div>

diff --git a/src/components/content-pages/open-channel.js b/src/components/content-pages/open-channel.js
@@ -71,12 +71,6 @@ const OpenChannel = (props) => {
           props.setVisible(false);
         }}
         onOk={async () => {
-          console.log(mode);
-          console.log(lightningAddress);
-          console.log(amount);
-          console.log(pushAmount);
-          console.log(minimumInputConfirmations);
-          console.log(targetConfirmationBlocks);
           const split = splitURI(lightningAddress);
           const address = split.address;
           const hostport = split.hostport;

diff --git a/src/components/main.js b/src/components/main.js
@@ -37,6 +37,7 @@ import notificationAudio from "../media/notification.mp3";
 import { concatUserNames } from "../utils/discussion-utils";
 import channelClient from "../services/channelServices";
 import "./main.css";
+import { exportTextMessage } from "../payload-protocol/utils";
 
 const { GetDiscussionsResponse } = require("../rpc/rpc_pb");
 const { SubscribeMessageResponse } = require("../rpc/rpc_pb");
@@ -496,28 +497,23 @@ const Main = () => {
                 appendToChatHistory(mainProps, res.receivedMessage);
               }
 
+              let messageText = exportTextMessage(res.receivedMessage.payload);
               if (!document.hasFocus()) {
                 let audio = new Audio(notificationAudio);
                 audio.play();
-                let message = {};
-                try {
-                  message = JSON.parse(res.receivedMessage.payload);
-                } catch (e) {
-                  message.content = res.receivedMessage.payload;
-                }
                 new Notification(
                   `${
                     concatUserNames(mainProps, [res.receivedMessage.sender]) ||
                     "Unknown"
                   }: ${
-                    !message.content
+                    !messageText
                       ? `Sent you ${cryptoUtils.msatToCurrentCryptoUnit(
                         mainProps,
                         res.receivedMessage.amtMsat
                       )}${selectedCryptoUnit}`
-                      : message.content.length < 30
-                        ? message.content
-                        : message.content.substring(0, 25) + "..."
+                      : messageText.length < 32
+                        ? messageText
+                        : messageText.substring(0, 32) + "..."
                   }`,
                   {
                     icon: arcLogo,
@@ -530,14 +526,14 @@ const Main = () => {
                 if (!directlyToRoom) {
                   NotificationManager.info(
                     `${
-                      res.receivedMessage.payload === ""
+                      !messageText
                         ? `Sent you ${cryptoUtils.msatToCurrentCryptoUnit(
                           mainProps,
                           res.receivedMessage.amtMsat
                         )}${selectedCryptoUnit}`
-                        : res.receivedMessage.payload.length < 20
-                          ? res.receivedMessage.payload
-                          : res.receivedMessage.payload.substring(0, 15) + "..."
+                        : messageText < 25
+                          ? messageText
+                          : messageText.substring(0, 25) + "..."
                     }`,
                     `${alias || "Unknown"}:`,
                     4000,