fix(ui): Chatbar payment UI update

src/lib/components/messaging/ChatPreview.svelte

@@ -34,7 +34,6 @@
     $: user = chat.typing_indicator.users().map(u => {
         return $lookupUsers[u]
     })
-    $: self = get(Store.state.user)
     let timeago = getTimeAgo(chat.last_message_at)
     const dispatch = createEventDispatcher()
     let ownId = get(Store.state.user)
@@ -57,9 +56,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 +70,35 @@
                     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"
+                }
+                const amountWei = parsedMessage.details.amount
+                if (sendingUserDetails.key !== ownId.key) {
+                    return `${sendingUserDetails.name} sent you ${amountWei}`
+                } else {
+                    return `You sent ${amountWei} 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,107 @@
     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
+    let initialSelect = "Select an asset"
     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()
+            if (whatReturned !== undefined) {
+                let result = await RaygunStoreInstance.send(chat.id, txt, [])
+                result.onSuccess(res => {
+                    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)
+                ConversationStore.addPendingMessages(chat.id, res.message, txt)
+            })
+        }
     }
 
     let inputAmount = ""
-
     function onInputAmount() {
-        //remove any input that is not a number or a dot
+        isAmountTouched = true
+        console.log(transfer.asset.kind)
         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(".", "")
+            const i = inputAmount.indexOf(".")
+            inputAmount = inputAmount.substring(0, i + 1) + inputAmount.substring(i + 1).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
+        const decimalPlaces = 18 // Max decimals for the asset type
+        const parts = inputAmount.split(".")
+        if (parts[1] && parts[1].length > decimalPlaces) {
+            inputAmount = parts[0] + "." + parts[1].substring(0, decimalPlaces)
+        }
+
+        isValidAmount = /^[0-9]+(\.[0-9]+)?$/.test(inputAmount)
+
+        if (isValidAmount) {
+            wallet.toBigIntAmount(transfer.asset, inputAmount).then(amount => {
+                transfer.amount = amount
+                wallet.toAmountPreviewString(transfer.asset, transfer.amount).then(amountPreview => {
+                    transfer.amountPreview = amountPreview
+                })
             })
-        })
+        }
     }
+
+    let addressInput = ""
+    let isValidAddress = false
+    let isAddressTouched = false
+    let isValidAmount = false
+    let isAmountTouched = false
+    function onAddressInput() {
+        isAddressTouched = true
+
+        const bitcoinRegex = /^(1|3|bc1|tb1)[a-zA-HJ-NP-Z0-9]{25,62}$/
+        const ethereumRegex = /^0x[a-fA-F0-9]{40}$/
+
+        isValidAddress = bitcoinRegex.test(addressInput) || ethereumRegex.test(addressInput)
+
+        if (isValidAddress) {
+            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 +111,146 @@
     }
 </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>
+
+        {#if transfer.asset.kind !== initialSelect}
+            <div class="address">
+                <Label text={$_("payments.address")} />
+                <div class="address_QR">
+                    <Input bind:value={addressInput} on:input={onAddressInput} />
+                    {#if isAddressTouched && !isValidAddress}
+                        <span class="error">Invalid wallet address.</span>
+                    {/if}
+                </div>
+            </div>
+        {/if}
 
-    <Button
-        disabled={!transfer.isValid()}
-        on:click={async () => {
-            await sendMessage(transfer.toCmdString())
-            onClose()
-        }}>{$_("payments.request")}</Button>
+        {#if isValidAddress && addressInput !== ""}
+            <div class="amount">
+                <Label text={$_("payments.amount")} />
+                <Input bind:value={inputAmount} on:input={onInputAmount} />
+                {#if isAmountTouched && !isValidAmount && inputAmount.length > 1}
+                    <span class="error">Invalid amount format.</span>
+                {/if}
+            </div>
+        {/if}
+
+        {#if needsAssetId()}
+            <div class="payment_amount">
+                {$_("payments.assetId") + ":"}
+                <Input bind:value={transfer.asset.id} on:change={onInputAmount} />
+            </div>
+        {/if}
+
+        {#if isValidAddress && isValidAmount}
+            <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>
+        {/if}
+    {: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>
+            </div>
+            <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.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>