fix(ui): Chatbar payment UI update

src/lib/components/messaging/ChatPreview.svelte

@@ -57,9 +57,11 @@
                     ? $_("message_previews.coin_requested", { values: { username: sendingUserDetails.name, amount: amountPreview } })
                     : $_("message_previews.request_sent", { values: { amount: amountPreview } })
             } catch (error) {
+                console.log(chat.last_message_preview)
                 return "Invalid message format"
             }
-        } else if (chat.last_message_preview.startsWith(PaymentRequestsEnum.Reject)) {
+        }
+        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!))
@@ -69,6 +71,38 @@
                     return $_("message_previews.coin_canceled")
                 }
             } catch (error) {
+                console.log(chat.last_message_preview)
+                return "Invalid message format"
+            }
+        }
+        if (chat.last_message_preview.startsWith(PaymentRequestsEnum.Send)) {
+            try {
+                const sendingUserId = ConversationStore.getMessage(chat.id, chat.last_message_id)?.details.origin
+                const sendingUserDetails = get(Store.getUser(sendingUserId!))
+                const jsonStartIndex = chat.last_message_preview.indexOf("{")
+                if (jsonStartIndex === -1) {
+                    console.error("No JSON found in last_message_preview:", chat.last_message_preview)
+                    return "Invalid message format"
+                }
+                const jsonPart = chat.last_message_preview.slice(jsonStartIndex)
+                let parsedMessage
+                try {
+                    parsedMessage = JSON.parse(jsonPart)
+                } catch (error) {
+                    console.error("Error parsing JSON:", error, chat.last_message_preview)
+                    return "Invalid message format"
+                }
+                let amount = parsedMessage.amount || "unknown"
+
+                amount = amount.replace(/(\.\d*?[1-9])0+$|\.0*$/, "$1")
+                if (sendingUserDetails.key !== ownId.key) {
+                    return `${sendingUserDetails.name} sent you ${amount}`
+                } else {
+                    const recipientId = parsedMessage.details?.toAddress || "unknown address"
+                    return `You sent ${amount} to ${sendingUserDetails.name}`
+                }
+            } catch (error) {
+                console.error("Error in PaymentRequestsEnum.Send condition:", error)
                 return "Invalid message format"
             }
         }

src/lib/components/wallet/CreateTransaction.svelte

@@ -2,52 +2,84 @@
     import Button from "$lib/elements/Button.svelte"
     import { ConversationStore } from "$lib/state/conversation"
     import { Store } from "$lib/state/Store"
-    import { AssetType, shortenAddr, Transfer, wallet, type Asset } from "$lib/utils/Wallet"
+    import { AssetType, getValidPaymentRequest, shortenAddr, Transfer, wallet, type Asset } from "$lib/utils/Wallet"
     import { RaygunStoreInstance } from "$lib/wasm/RaygunStore"
     import { get } from "svelte/store"
     import { _ } from "svelte-i18n"
-    import { Select } from "$lib/elements"
+    import { Icon, Input, Label, Select, Text } from "$lib/elements"
+    import { Appearance, PaymentRequestsEnum, Shape, Size } from "$lib/enums"
 
     export let onClose
-
+    enum ViewMode {
+        None = "",
+        Send = "send",
+        Receive = "receive",
+        QRScanner = "send",
+        SendFunds = "SendFunds",
+    }
     let transfer = new Transfer()
-
+    let sendCoin = ViewMode.None
     async function sendMessage(text: string) {
-        let chat = get(Store.state.activeChat)
-        let txt = text.split("\n")
-        let result = await RaygunStoreInstance.send(chat.id, txt, [])
-        result.onSuccess(res => {
-            ConversationStore.addPendingMessages(chat.id, res.message, txt)
-        })
+        if (sendCoin === ViewMode.Send) {
+            let chat = get(Store.state.activeChat)
+            let txt = text.split("\n")
+            let whatReturned = await getValidPaymentRequest(txt[0])?.execute()
+            console.log(whatReturned)
+            if (whatReturned !== undefined) {
+                let result = await RaygunStoreInstance.send(chat.id, txt, [])
+                result.onSuccess(res => {
+                    console.log(txt)
+                    // getValidPaymentRequest(txt[0])?.execute()
+                    ConversationStore.addPendingMessages(chat.id, res.message, txt)
+                })
+            }
+        }
+        if (sendCoin === ViewMode.Receive) {
+            let chat = get(Store.state.activeChat)
+            let txt = text.split("\n")
+            let result = await RaygunStoreInstance.send(chat.id, txt, [])
+            result.onSuccess(res => {
+                console.log(txt)
+                // getValidPaymentRequest(txt[0])?.execute()
+                ConversationStore.addPendingMessages(chat.id, res.message, txt)
+            })
+        }
     }
 
     let inputAmount = ""
-
     function onInputAmount() {
-        //remove any input that is not a number or a dot
         inputAmount = inputAmount.replace(/[^0-9.]/g, "")
-        //if there is more than 1 dot, only keep the first one
         if (inputAmount.split(".").length > 2) {
             let i = inputAmount.indexOf(".")
             inputAmount = inputAmount.substring(0, i + 1) + inputAmount.substring(i + 1, inputAmount.length).replace(".", "")
         }
-
-        //convert string amount to bigint
         wallet.toBigIntAmount(transfer.asset, inputAmount).then(amount => {
             transfer.amount = amount
             wallet.toAmountPreviewString(transfer.asset, transfer.amount).then(amountPreview => {
                 transfer.amountPreview = amountPreview
             })
         })
     }
+    let addressInput = ""
+    function onAddressInput() {
+        wallet.myAddress(transfer.asset).then(address => {
+            transfer.toAddress = addressInput
+        })
+    }
     onInputAmount()
     function onChangeAssetKind() {
         transfer.asset.id = ""
         transfer.amount = BigInt(0)
         onInputAmount()
-        wallet.myAddress(transfer.asset).then(address => {
-            transfer.toAddress = address
-        })
+        if (sendCoin !== ViewMode.Send) {
+            wallet.myAddress(transfer.asset).then(address => {
+                transfer.toAddress = address
+            })
+        } else {
+            wallet.myAddress(transfer.asset).then(address => {
+                transfer.toAddress = addressInput
+            })
+        }
     }
     onChangeAssetKind()
 
@@ -56,21 +88,135 @@
     }
 </script>
 
-<div>
-    <div>{$_("payments.assetType") + ":"}<Select bind:selected={transfer.asset.kind} options={Object.values(AssetType).map(value => ({ value: value, text: value }))} on:change={onChangeAssetKind} /></div>
-    {#if needsAssetId()}
-        <div>{$_("payments.assetId") + ":"}<input bind:value={transfer.asset.id} on:change={onInputAmount} /></div>
-    {/if}
-    <div>{transfer.amountPreview}</div>
-    <div>{$_("payments.amount") + ":"} <input bind:value={inputAmount} type="text" on:input={onInputAmount} /></div>
-    {#if transfer.toAddress !== ""}
-        <div>{$_("payments.receiving_to")}: {shortenAddr(transfer.toAddress, 6)}</div>
-    {/if}
+<div class="payment_modal">
+    <div class="title">
+        <Text size={Size.Large} color="#00B894" centered hook="chat-topbar-username" class="min-text" singleLine>Transfer Funds</Text>
+    </div>
+    <div class="transfer_type">
+        <Button
+            appearance={Appearance.Alt}
+            on:click={async () => {
+                sendCoin = ViewMode.Send
+            }}><Icon icon={Shape.DollarOut}></Icon>{$_("payments.send")}</Button>
+        <Button
+            appearance={Appearance.Alt}
+            on:click={async () => {
+                sendCoin = ViewMode.Receive
+            }}><Icon icon={Shape.DollarIn}></Icon>{$_("payments.request")}</Button>
+    </div>
+    {#if sendCoin === ViewMode.Send}
+        <div class="asset_selector">
+            <Label text={$_("payments.type") + ":"}></Label><Select bind:selected={transfer.asset.kind} options={Object.values(AssetType).map(value => ({ value: value, text: value }))} on:change={onChangeAssetKind} />
+        </div>
+        <div class="address">
+            <Label text={$_("payments.address")} />
+            <div class="address_QR">
+                <Input bind:value={addressInput} on:input={onAddressInput} />
+                <!-- <div class="address_button">
+                        <Button icon><Icon icon={Shape.QRCode}></Icon></Button>
+                    </div> -->
+            </div>
+        </div>
+        {#if addressInput !== ""}
+            <div class="amount">
+                <Label text={$_("payments.amount")} />
+                <Input bind:value={inputAmount} on:input={onInputAmount} />
+            </div>
+        {/if}
+
+        {#if needsAssetId()}
+            <div class="payment_amount">{$_("payments.assetId") + ":"}<Input bind:value={transfer.asset.id} on:change={onInputAmount} /></div>
+        {/if}
+        <div class="send_button">
+            <Button
+                disabled={!transfer.isValid()}
+                on:click={async () => {
+                    await sendMessage(transfer.toDisplayString(transfer.asset.kind, inputAmount, transfer.toAddress))
+                    onClose()
+                }}>{$_("payments.create_transaction")}</Button>
+        </div>
+    {:else if sendCoin === ViewMode.Receive}
+        <div class="asset_selector">
+            <Label text={$_("payments.type") + ":"}></Label><Select bind:selected={transfer.asset.kind} options={Object.values(AssetType).map(value => ({ value: value, text: value }))} on:change={onChangeAssetKind} />
+        </div>
+        {#if transfer.toAddress !== ""}
+            <div class="address">
+                <Label text={$_("payments.address")} />
+                <div class="address_QR">
+                    <Input value={transfer.toAddress} />
+                    <!-- <div class="address_button">
+                        <Button icon><Icon icon={Shape.QRCode}></Icon></Button>
+                    </div> -->
+                </div>
+            </div>
+            <div class="amount">
+                <Label text={$_("payments.amount")} />
+                <Input bind:value={inputAmount} on:input={onInputAmount} />
+            </div>
+        {/if}
 
-    <Button
-        disabled={!transfer.isValid()}
-        on:click={async () => {
-            await sendMessage(transfer.toCmdString())
-            onClose()
-        }}>{$_("payments.request")}</Button>
+        {#if needsAssetId()}
+            <div class="payment_amount">{$_("payments.assetId") + ":"}<Input bind:value={transfer.asset.id} on:change={onInputAmount} /></div>
+        {/if}
+        <div class="send_button">
+            <Button
+                disabled={!transfer.isValid()}
+                on:click={async () => {
+                    await sendMessage(transfer.toCmdString())
+                    onClose()
+                }}>{$_("payments.create_transaction")}</Button>
+        </div>
+    {/if}
 </div>
+
+<style lang="scss">
+    .payment_modal {
+        padding: var(--gap-less);
+        max-width: 300px;
+    }
+    .title {
+        gap: var(--gap-less);
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+    .address {
+        padding: var(--gap-less);
+        display: block;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+    .transfer_type {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5%;
+    }
+    .amount {
+        display: block;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: var(--gap-less);
+    }
+    .payment_amount {
+        display: inline-flex;
+        gap: var(--gap-less);
+    }
+    .send_button {
+        display: flex;
+        padding: var(--gap-less);
+        :global(button) {
+            width: 100%;
+        }
+    }
+    .asset_selector {
+        display: block;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--gap-less);
+    }
+</style>

src/lib/enums/icons.ts

@@ -15,6 +15,18 @@ export const enum Shape {
     Boot = `<path ${svgOptions} d=" M 4.059 13.871 L 3.5 16.292 C 5.034 17.421 6.678 18.276 10.678 19.613 C 13.264 20.478 16.935 21.53 19.225 21.969 C 19.598 21.289 22.348 16.533 18.381 15.35 C 18.381 15.35 17.023 19.569 11.193 18.177 C 9.417 17.75 5.768 16.698 5.56 15.164 C 5.352 13.63 4.059 13.86 4.059 13.86 L 4.059 13.871 Z  M 8.132 13.706 L 5.387 14.561 M 10.36 14.868 L 14.71 13.619 C 14.71 13.619 14.809 12.994 14.754 12.654 C 14.699 12.336 14.294 11.898 14.294 11.898 L 9.922 13.202 M 6.109 16.073 L 8.639 15.35 M 7.86 3.756 C 7.29 5.586 6.546 7.591 6.316 8.161 C 5.725 9.641 5.219 10.857 4.364 13.86 M 14.294 13.728 C 15.609 15.197 16.562 14.824 18.261 15.679 M 9.67 13.082 C 9.012 12.851 8.3 13.202 8.081 13.849 C 7.861 14.495 8.201 15.218 8.848 15.438 C 9.494 15.657 10.217 15.317 10.437 14.671 C 10.656 14.024 10.316 13.301 9.67 13.082 Z  M 9.198 3.964 L 7.566 3.701 C 7.324 3.614 7.248 3.175 7.412 2.715 L 7.412 2.715 C 7.576 2.255 7.905 1.959 8.146 2.047 L 9.757 2.299 L 14.623 3.997 L 16.036 4.797 C 16.277 4.885 16.354 5.323 16.19 5.783 L 16.19 5.783 C 16.025 6.244 15.697 6.539 15.456 6.452 L 14.02 5.641 L 9.198 3.953 L 9.198 3.964 Z  M 14.294 9.026 C 14.229 9.225 14.148 9.573 14.064 9.805 C 13.812 10.55 13.757 11.383 13.921 12.008 M 14.878 7.637 C 15.02 7.199 15.097 7.173 15.338 6.384 M 11.039 7.919 L 14.119 8.993 C 14.437 9.103 14.798 8.938 14.908 8.61 L 15.028 8.281 C 15.138 7.963 14.974 7.602 14.645 7.492 L 11.565 6.418 C 11.248 6.308 10.886 6.473 10.776 6.802 L 10.656 7.13 C 10.546 7.448 10.711 7.81 11.039 7.919 Z "/>`,
     ID = `<path ${svgOptions} d="M15 9H18.75M15 12H18.75M15 15H18.75M4.5 19.5H19.5C20.7426 19.5 21.75 18.4926 21.75 17.25V6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75V17.25C2.25 18.4926 3.25736 19.5 4.5 19.5ZM10.5 9.375C10.5 10.4105 9.66053 11.25 8.625 11.25C7.58947 11.25 6.75 10.4105 6.75 9.375C6.75 8.33947 7.58947 7.5 8.625 7.5C9.66053 7.5 10.5 8.33947 10.5 9.375ZM11.7939 15.7114C10.8489 16.2147 9.77021 16.5 8.62484 16.5C7.47948 16.5 6.40074 16.2147 5.45581 15.7114C5.92986 14.4207 7.16983 13.5 8.62484 13.5C10.0799 13.5 11.3198 14.4207 11.7939 15.7114Z" />`,
     Details = `<path ${svgOptions} d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H12" />`,
+    QRCodeScan = `<path ${svgOptions} d=" M 3.745 4.875 C 3.745 4.255 4.245 3.755 4.865 3.755 L 9.365 3.755 C 9.985 3.755 10.485 4.255 10.485 4.875 L 10.485 9.375 C 10.485 9.995 9.985 10.495 9.365 10.495 L 4.865 10.495 C 4.245 10.495 3.745 9.995 3.745 9.375 L 3.745 4.875 Z  M 3.745 14.625 C 3.745 14.005 4.245 13.505 4.865 13.505 L 9.365 13.505 C 9.985 13.505 10.485 14.005 10.485 14.625 L 10.485 19.125 C 10.485 19.745 9.985 20.245 9.365 20.245 L 4.865 20.245 C 4.245 20.245 3.745 19.745 3.745 19.125 L 3.745 14.625 Z  M 13.495 4.875 C 13.495 4.255 13.995 3.755 14.615 3.755 L 19.115 3.755 C 19.735 3.755 20.235 4.255 20.235 4.875 L 20.235 9.375 C 20.235 9.995 19.735 10.495 19.115 10.495 L 14.615 10.495 C 13.995 10.495 13.495 9.995 13.495 9.375 L 13.495 4.875 Z  M 6.745 6.745 L 7.495 6.745 L 7.495 7.495 L 6.745 7.495 L 6.745 6.745 Z  M 6.745 16.495 L 7.495 16.495 L 7.495 17.245 L 6.745 17.245 L 6.745 16.495 Z  M 16.495 6.745 L 17.245 6.745 L 17.245 7.495 L 16.495 7.495 L 16.495 6.745 Z  M 13.495 13.495 L 14.245 13.495 L 14.245 14.245 L 13.495 14.245 L 13.495 13.495 Z  M 13.495 19.495 L 14.245 19.495 L 14.245 20.245 L 13.495 20.245 L 13.495 19.495 Z  M 19.495 13.495 L 20.245 13.495 L 20.245 14.245 L 19.495 14.245 L 19.495 13.495 Z  M 19.495 19.495 L 20.245 19.495 L 20.245 20.245 L 19.495 20.245 L 19.495 19.495 Z  M 16.495 16.495 L 17.245 16.495 L 17.245 17.245 L 16.495 17.245 L 16.495 16.495 Z  M 1.775 11.995 L 22.225 11.995 M 22.215 7.495 L 22.215 3.795 C 22.215 2.675 21.305 1.775 20.195 1.775 L 16.425 1.775 M 7.435 1.775 L 3.795 1.775 C 2.675 1.775 1.775 2.685 1.775 3.795 L 1.775 7.495 M 16.425 22.215 L 20.195 22.215 C 21.315 22.215 22.215 21.305 22.215 20.195 L 22.215 16.485 M 1.775 16.495 L 1.775 20.205 C 1.775 21.325 2.685 22.225 3.795 22.225 L 7.435 22.225" />`,
+    QRCode = `<path ${svgOptions} d="M3.75 4.875C3.75 4.25368 4.25368 3.75 4.875 3.75H9.375C9.99632 3.75 10.5 4.25368 10.5 4.875V9.375C10.5 9.99632 9.99632 10.5 9.375 10.5H4.875C4.25368 10.5 3.75 9.99632 3.75 9.375V4.875Z" />
+        <path ${svgOptions} d="M3.75 14.625C3.75 14.0037 4.25368 13.5 4.875 13.5H9.375C9.99632 13.5 10.5 14.0037 10.5 14.625V19.125C10.5 19.7463 9.99632 20.25 9.375 20.25H4.875C4.25368 20.25 3.75 19.7463 3.75 19.125V14.625Z" />
+        <path ${svgOptions} d="M13.5 4.875C13.5 4.25368 14.0037 3.75 14.625 3.75H19.125C19.7463 3.75 20.25 4.25368 20.25 4.875V9.375C20.25 9.99632 19.7463 10.5 19.125 10.5H14.625C14.0037 10.5 13.5 9.99632 13.5 9.375V4.875Z" />
+        <path ${svgOptions} d="M6.75 6.75H7.5V7.5H6.75V6.75Z" />
+        <path ${svgOptions} d="M6.75 16.5H7.5V17.25H6.75V16.5Z" />
+        <path ${svgOptions} d="M16.5 6.75H17.25V7.5H16.5V6.75Z" />
+        <path ${svgOptions} d="M13.5 13.5H14.25V14.25H13.5V13.5Z" />
+        <path ${svgOptions} d="M13.5 19.5H14.25V20.25H13.5V19.5Z" />
+        <path ${svgOptions} d="M19.5 13.5H20.25V14.25H19.5V13.5Z" />
+        <path ${svgOptions} d="M19.5 19.5H20.25V20.25H19.5V19.5Z" />
+        <path ${svgOptions} d="M16.5 16.5H17.25V17.25H16.5V16.5Z" />`,
     Tag = `<path ${svgOptions} d="M9.56802 3H5.25C4.00736 3 3 4.00736 3 5.25V9.56802C3 10.1648 3.23705 10.7371 3.65901 11.159L13.2401 20.7401C13.9388 21.4388 15.0199 21.6117 15.8465 21.0705C17.9271 19.7084 19.7084 17.9271 21.0705 15.8465C21.6117 15.0199 21.4388 13.9388 20.7401 13.2401L11.159 3.65901C10.7371 3.23705 10.1648 3 9.56802 3Z" /><path ${svgOptions} d="M6 6H6.0075V6.0075H6V6Z" />`,
     Shield = `<path ${svgOptions} d="M9 12.7498L11.25 14.9998L15 9.74985M12 2.71411C9.8495 4.75073 6.94563 5.99986 3.75 5.99986C3.69922 5.99986 3.64852 5.99955 3.59789 5.99892C3.2099 7.17903 3 8.43995 3 9.74991C3 15.3414 6.82432 20.0397 12 21.3719C17.1757 20.0397 21 15.3414 21 9.74991C21 8.43995 20.7901 7.17903 20.4021 5.99892C20.3515 5.99955 20.3008 5.99986 20.25 5.99986C17.0544 5.99986 14.1505 4.75073 12 2.71411Z"/>`,
     Popout = `<path ${svgOptions} d="M13.5 6H5.25C4.00736 6 3 7.00736 3 8.25V18.75C3 19.9926 4.00736 21 5.25 21H15.75C16.9926 21 18 19.9926 18 18.75V10.5M7.5 16.5L21 3M21 3L15.75 3M21 3V8.25" />`,

src/lib/enums/index.ts

@@ -23,6 +23,7 @@ export enum Color {
 export enum PaymentRequestsEnum {
     Reject = "/reject",
     Request = "/request",
+    Send = "/send",
 }
 
 export enum Format {