fix(payments): update ui and verbiage for payment bubbles (#813)

src/lib/components/messaging/ChatPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import TimeAgo from "javascript-time-ago"
-    import { Appearance, ChatType, Route, Shape, Size, Status } from "$lib/enums"
+    import { Appearance, ChatType, PaymentRequestsEnum, Route, Shape, Size, Status } from "$lib/enums"
     import type { Chat } from "$lib/types"
     import { Text, Loader, Button, Icon } from "$lib/elements"
     import { ProfilePicture } from "$lib/components"
@@ -48,7 +48,7 @@
             return $_("message_previews.attachment")
         }
 
-        if (chat.last_message_preview.startsWith("/request")) {
+        if (chat.last_message_preview.startsWith(PaymentRequestsEnum.Request)) {
             try {
                 const sendingUserId = ConversationStore.getMessage(chat.id, chat.last_message_id)?.details.origin
                 const sendingUserDetails = get(Store.getUser(sendingUserId!))
@@ -60,6 +60,18 @@
             } catch (error) {
                 return "Invalid message format"
             }
+        } else if (chat.last_message_preview.startsWith(PaymentRequestsEnum.Reject)) {
+            try {
+                const sendingUserId = ConversationStore.getMessage(chat.id, chat.last_message_id)?.details.origin
+                const sendingUserDetails = get(Store.getUser(sendingUserId!))
+                if (get(Store.getUser(sendingUserId!)).key !== ownId.key) {
+                    return $_("message_previews.coin_declined", { values: { username: sendingUserDetails.name } })
+                } else {
+                    return $_("message_previews.coin_canceled")
+                }
+            } catch (error) {
+                return "Invalid message format"
+            }
         }
 
         return chat.last_message_preview

src/lib/enums/index.ts

@@ -20,6 +20,11 @@ export enum Color {
     RESET = "&r",
 }
 
+export enum PaymentRequestsEnum {
+    Reject = "/reject",
+    Request = "/request",
+}
+
 export enum Format {
     BOLD = "&l",
     STRIKETHROUGH = "&m",

src/lib/lang/en.json

@@ -155,6 +155,8 @@
         "none": "No messages sent yet.",
         "attachment": "New attachment",
         "coin_requested": "{username} has requested {amount}",
+        "coin_declined": "{username} has declined payment",
+        "coin_canceled": "You canceled coin request",
         "request_sent": "You sent a request for {amount}"
     },
     "friends": {
@@ -203,14 +205,22 @@
         "send": "Send",
         "receive": "Receive",
         "receiving_to": "Receiving to",
-        "send_coin": "Send Coin",
+        "sendCoin": "Send Coin",
         "amount": "Amount",
         "from": "From",
         "to": "To",
         "note": "Note",
         "date": "Date",
+        "decline": "Decline",
         "create": "Create Payment Request",
+        "declinePayment": "Decline Payment",
+        "sentRequest": "Request has been sent",
+        "cancel_request": "Cancel Request",
+        "canceledRequest": "Canceled Request",
         "network": "Network",
+        "paymentDeclined": "Payment Canceled",
+        "youCanceledRequest": "You Canceled Payment Request",
+        "declinedPayment": "{user} Canceled Payment",
         "assetType": "Asset type",
         "assetName": "Asset name",
         "assetId": "Asset Id",

src/lib/state/Store.ts

@@ -47,6 +47,7 @@ class GlobalStore {
             openFolders: createPersistentState<Record<string, boolean>>("uplink.openFolders", {}),
             toasts: writable({}),
             userCache: writable({}),
+            paymentTracker: createPersistentState("uplink.paymentTracker", []),
             pageState: writable(""),
         }
     }

src/lib/state/initial.ts

@@ -1,4 +1,4 @@
-import type { Call, Chat, FileInfo, FriendRequest, User } from "$lib/types"
+import type { Call, Chat, FileInfo, FriendRequest, PaymentTracker, User } from "$lib/types"
 import type { Writable } from "svelte/store"
 import type { ToastMessage } from "./ui/toast"
 import type { VoiceRTCUser } from "$lib/media/Voice"
@@ -34,5 +34,6 @@ export interface IState {
     // A cache of all fetched user data
     // We use a Writable<User> to also allow easy subscription to changes if only that user interests us
     userCache: Writable<{ [key: string]: Writable<User> }>
+    paymentTracker: Writable<PaymentTracker[]>
     pageState: Writable<string>
 }

src/lib/types/index.ts

@@ -431,6 +431,12 @@ export type Transaction = {
     note: string
 }
 
+export type PaymentTracker = {
+    messageId: string
+    senderId: string
+    rejectedPayment: boolean
+}
+
 export type Keybind = {
     action: KeybindAction
     key: string

src/lib/utils/Wallet.ts

@@ -460,12 +460,14 @@ export class Transfer {
     amount: bigint
     toAddress: string
     amountPreview: string
+    id: string
 
     constructor() {
         this.asset = { kind: AssetType.None, id: "" }
         this.amount = BigInt(0)
         this.toAddress = ""
         this.amountPreview = ""
+        this.id = ""
     }
 
     isValid(): boolean {
@@ -489,6 +491,11 @@ export class Transfer {
         return `/request ${transfer}`
     }
 
+    toRejectString(id: string) {
+        let transfer = JSON.stringify(this, (k, v) => (k === "amount" && typeof v === "bigint" ? v.toString() : v))
+        return `/reject ${id}`
+    }
+
     toDisplayString(): string {
         let id = this.asset.id === "n/a" ? "" : this.asset.id
         return `Send ${this.amountPreview} to ${shortenAddr(this.toAddress, 6)}`
@@ -501,24 +508,50 @@ export class Transfer {
     }
 }
 
-export function getValidPaymentRequest(msg: string): Transfer | undefined {
-    let cmd = "/request "
-    if (msg.startsWith(cmd)) {
-        let json = msg.substring(cmd.length, msg.length)
+export function getValidPaymentRequest(msg: string, msgId?: string): Transfer | undefined {
+    let requestCmd = "/request"
+    let rejectCmd = "/reject"
+
+    if (msg.startsWith(requestCmd)) {
+        let json = msg.substring(requestCmd.length, msg.length).trim()
         let transfer = new Transfer()
         try {
             let parsed = JSON.parse(json, (k, v) => (k === "amount" && typeof v === "string" ? BigInt(v) : v))
             transfer.asset = parsed.asset
             transfer.amount = parsed.amount
             transfer.toAddress = parsed.toAddress
             transfer.amountPreview = parsed.amountPreview
-        } catch {
-            // if it wasn't valid json, do nothing.
+        } catch (err) {
+            console.log("Parse Failed", err)
         }
+        if (transfer.asset.kind !== AssetType.None && transfer.isValid()) {
+            return transfer
+        }
+    } else if (msg.startsWith(rejectCmd)) {
+        let json = msg.substring(rejectCmd.length, msg.length).trim()
+        let transfer = new Transfer()
+
+        if (json.startsWith("{")) {
+            try {
+                let parsed = JSON.parse(json, (k, v) => (k === "amount" && typeof v === "string" ? BigInt(v) : v))
+                transfer.asset = parsed.asset
+                transfer.amount = parsed.amount
+                transfer.toAddress = parsed.toAddress
+                transfer.amountPreview = parsed.amountPreview
+            } catch (err) {
+                console.log("Parse Failed", err)
+            }
+        } else {
+            console.log("Reject message is not JSON, possibly an ID or UUID:", json)
+            return undefined
+        }
+
         if (transfer.asset.kind !== AssetType.None && transfer.isValid()) {
             return transfer
         }
     }
+
+    return undefined
 }
 
 export function shortenAddr(str: string, numChars: number): string {