Custom.razor

@page "/custom-json"
@using XUMM.NET.SDK.WebSocket.EventArgs
@using XUMM.NET.SDK.Models.Payload

<PageTitle>Custom Payload</PageTitle>

<ResponseAlertBox @ref="_responseAlertBox"></ResponseAlertBox>

<h1>Custom Payload</h1>

@if (_signed.HasValue)
{
    if (_signed.Value)
    {
        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">Signed!</h4>
            The user signed the payload.
        </div>
    }
    else
    {
        <div class="alert alert-info" role="alert">
            <h4 class="alert-heading">Not signed!</h4>
            The user did not sign the payload.
        </div>
    }
}
<div class="row">
    <div class="mb-3">
        @if (_qrCodeUrl != null)
        {
            <div class="btn-group mb-3" role="group">
                <button class="btn btn-primary" @onclick="CancelSubscription">Cancel payload subscription</button>
                <button class="btn btn-secondary" @onclick="CancelPayload">Cancel Payload</button>
            </div>
        }
        else
        {
            <XummSdkCredentials @ref="_xummSdkCredentials"></XummSdkCredentials>

            <div class="mb-3">
                <label for="json" class="form-label">JSON data</label>
                <textarea id="json" class="form-control" placeholder="JSON" aria-label="JSON data" aria-describedby="basic-addon2" rows="10" @bind="_json"></textarea>
            </div>

            <div class="btn-group mb-3" role="group">
                <button class="btn btn-primary" @onclick="CreatePayloadAndSubscribe">Create payload and subscribe</button>
            </div>
        }
    </div>
</div>

<div class="row align-items-start">
    <div class="col-md-6">
        @if (_qrCodeUrl != null)
        {
            <div>
                <h2>Scan QR Code</h2>

                <div class="input-group mb-3">
                    <figure class="figure">
                        <img src="@_qrCodeUrl" class="figure-img img-fluid rounded" alt="QR Code of @_payloadUuid" />
                        <figcaption class="figure-caption">@_payloadUuid</figcaption>
                    </figure>
                </div>

            </div>
        }
    </div>
    <div class="col-md-6">
        @if (_messages.Any())
        {
            <h2>Messages</h2>
            <ul>
                @foreach (var message in _messages)
                {
                    <li>@message</li>
                }
            </ul>
        }
    </div>
</div>

@code {
    private CancellationTokenSource _cts = default!;
    private ResponseAlertBox? _responseAlertBox;
    private XummSdkCredentials? _xummSdkCredentials;
    private readonly List<string> _messages = new();
    private string? _json;
    private string? _qrCodeUrl;
    private string? _payloadUuid;
    private bool? _signed;

    private async Task CreatePayloadAndSubscribe()
    {
        if (string.IsNullOrWhiteSpace(_json))
        {
            return;
        }

        var payloadResult = await _responseAlertBox!.GetResponseAndSetAlertAsync(() => _xummSdkCredentials!.Payload.CreateAsync(new XummPostJsonPayload(_json), true));
        _responseAlertBox.SetAlert("Payload response", payloadResult != null);

        if (payloadResult != null)
        {
            _signed = null;

            _qrCodeUrl = payloadResult.Refs.QrPng;
            _payloadUuid = payloadResult.Uuid;

            StateHasChanged();

            _cts = new CancellationTokenSource();
            await _xummSdkCredentials!.Payload.SubscribeAsync(payloadResult, Subscription_EventArgs, _cts.Token);
        }
    }

    private void CancelSubscription()
    {
        _cts.Cancel();
        _qrCodeUrl = null;
        _messages.Add($"Payload {_payloadUuid} subscription cancelled.");
        StateHasChanged();
    }

    private async Task CancelPayload()
    {
        if (_payloadUuid == null)
        {
            return;
        }

        var payloadResult = await _xummSdkCredentials!.Payload.CancelAsync(_payloadUuid);
        if (payloadResult != null)
        {
            _messages.Add($"Payload {_payloadUuid} cancel {(payloadResult.Result.Cancelled ? "succeeded" : "failed")} with reason: \"{payloadResult.Result.Reason}\".");
            StateHasChanged();
        }
    }

    private void Subscription_EventArgs(object? sender, XummSubscriptionEventArgs e)
    {
        if (e.Data.RootElement.TryGetProperty("message", out var messageElement))
        {
            _messages.Add($"Connected: {messageElement.GetString()}");
        }
        else if (e.Data.RootElement.TryGetProperty("expires_in_seconds", out var expiresElement))
        {
            var ts = TimeSpan.FromSeconds(expiresElement.GetInt32());
            _messages.Add($"Expires in {ts}");
        }
        else if (e.Data.RootElement.TryGetProperty("opened", out var _))
        {
            _messages.Add("User received the payload, eg. push notification, deeplink or QR scan.");
        }
        else if (e.Data.RootElement.TryGetProperty("devapp_fetched", out var _))
        {
            _messages.Add("XUMM API fetched the payload details");
        }
        else if (e.Data.RootElement.TryGetProperty("expired", out var _))
        {
            _messages.Add("Payload has expired");
        }
        else if (e.Data.RootElement.TryGetProperty("signed", out var payloadElement))
        {
            _signed = payloadElement.GetBoolean();
            _messages.Add($"Signed: {(_signed.Value ? "Yes" : "No")}");
            e.CloseConnectionAsync();
            _qrCodeUrl = null;
        }

        StateHasChanged();
    }
}