btcpayserver/BTCPayServer/Views/UICustodianAccounts/ViewCustodianAccount.cshtml

@using BTCPayServer.Views.Apps
@using BTCPayServer.Abstractions.Extensions
@using BTCPayServer.Abstractions.Custodians
@model BTCPayServer.Models.CustodianAccountViewModels.ViewCustodianAccountViewModel
@{
    ViewData.SetActivePage(AppsNavPages.Create, "Custodian account: " + @Model?.CustodianAccount.Name);
}

@section PageHeadContent
{
    <link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true"/>
}

@section PageFootContent {
    <partial name="_ValidationScriptsPartial"/>
}

<style>
    .trade-qty label{display: block; }
</style>

<div id="custodianAccountView" v-cloak>
<div class="sticky-header-setup"></div>
<div class="sticky-header d-flex flex-wrap gap-3 align-items-center justify-content-between">
    <h2 class="mb-0">
        @ViewData["Title"]
    </h2>
    <div class="d-flex flex-wrap gap-3">
        <a class="btn btn-primary" role="button" v-if="account?.depositablePaymentMethods?.length > 0" v-on:click="openDepositModal()" href="#">
            <span class="fa fa-download"></span> Deposit
        </a>
        <a asp-action="EditCustodianAccount" asp-route-storeId="@Model.CustodianAccount.StoreId" asp-route-accountId="@Model.CustodianAccount.Id" class="btn btn-primary" role="button" id="EditCustodianAccountConfig">
            <span class="fa fa-gear"></span> Configure
        </a>
        <!--
        <button type="submit" class="btn btn-primary order-sm-1" id="SaveSettings">Save</button>
        <a class="btn btn-secondary" id="ViewApp" target="app_" href="/apps/MQ2sCVsmQ95JBZ4aZDtoSwMAnBY/pos">View</a>
        -->
    </div>
</div>

<partial name="_StatusMessage"/>

<div class="row">
    <div class="col-xl-12">
        <div v-if="!account" class="loading d-flex justify-content-center p-3">
            <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>

        <div v-if="account">
            <p class="alert alert-danger" v-if="account.assetBalanceExceptionMessage">
                {{ account.assetBalanceExceptionMessage }}
            </p>

            <h2>Balances</h2>

            <div class="form-check">
                <input class="form-check-input" type="checkbox" v-model="hideDustAmounts" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    Hide holdings worth less than {{ account.dustThresholdInFiat }} {{ account.storeDefaultFiat }}.
                </label>
            </div>


            <div class="table-responsive">
                <table class="table table-hover table-responsive-md">
                    <thead>
                    <tr>
                        <th>Asset</th>
                        <th class="text-end">Balance</th>
                        <th class="text-end">Unit Price (Bid)</th>
                        <th class="text-end">Unit Price (Ask)</th>
                        <th class="text-end">Fiat Value</th>
                        <th class="text-end">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="row in sortedAssetRows" :key="row.asset">
                        <td>{{ row.asset }}</td>
                        <!-- TODO format as number? How? -->
                        <th class="text-end">{{ row.formattedQty }}</th>
                        <th class="text-end">
                            {{ row.formattedBid }}
                        </th>
                        <th class="text-end">
                            {{ row.formattedAsk }}
                        </th>
                        <th class="text-end">
                            {{ row.formattedFiatValue }}
                        </th>
                        <th class="text-end">
                            <a v-if="row.tradableAssetPairs" v-on:click="openTradeModal(row)" href="#">Trade</a>
                            <a v-if="canDepositAsset(row.asset)" v-on:click="openDepositModal(row)" href="#">Deposit</a>
                            <a v-if="row.canWithdraw" v-on:click="openWithdrawModal(row)" href="#">Withdraw</a>
                        </th>
                    </tr>
                    <tr v-if="account.assetBalances.length === 0">
                        <td colspan="999" class="text-center">No assets are stored with this custodian (yet).</td>
                    </tr>
                    <tr v-if="account.assetBalanceExceptionMessage !== null">
                        <td colspan="999" class="text-center">An error occured while loading assets and balances.</td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <h2>Features</h2>
            <p>The @Model?.Custodian.Name custodian supports:</p>
            <ul>
                <li>Viewing asset account</li>
                @if (Model?.Custodian is ICanTrade)
                {
                    <li>Trading</li>
                }
                @if (Model?.Custodian is ICanDeposit)
                {
                    <li>Depositing</li>
                }
                @if (Model?.Custodian is ICanWithdraw)
                {
                    <li>Withdrawing (Greenfield API only, for now)</li>
                }
            </ul>
        </div>
    </div>
</div>


<div class="modal" tabindex="-1" role="dialog" id="withdrawModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Withdraw</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <vc:icon symbol="close"/>
                </button>
            </div>
            <div class="modal-body">
                <p>Withdrawals are coming soon, but if you need this today, you can use our <a rel="noopener noreferrer" href="https://docs.btcpayserver.org/API/Greenfield/v1/" target="_blank">Greenfield API "Withdraw to store wallet" endpoint</a> to execute a withdrawal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="depositModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Deposit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <vc:icon symbol="close"/>
                </button>
            </div>
            <div class="modal-body">
                <p v-if="deposit.errorMsg" class="alert alert-danger">{{ deposit.errorMsg }}</p>
                <div class="form-group">
                    <label class="form-label" for="DepositAsset">Asset to Deposit</label>
                    <select class="form-select" v-model="deposit.asset" name="DepositAsset">
                        <option v-for="option in availableAssetsToDeposit" v-bind:value="option">
                            {{ option }}
                        </option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="DepositPaymentNetwork">Payment Method</label>
                    <select class="form-select" v-model="deposit.paymentMethod" name="DepositPaymentNetwork">
                        <option v-for="option in availablePaymentMethodsToDeposit" v-bind:value="option">
                            {{ option }}
                        </option>
                    </select>
                </div>
                
                <div class="loading d-flex justify-content-center p-3" v-if="deposit.isLoading">
                    <div class="spinner-border text-light" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                
                <div v-if="!deposit.isLoading && (deposit.link || deposit.address)">
                    <div class="tab-content text-center">
                        <div v-if="deposit.link" class="tab-pane" id="link-tab" role="tabpanel">
                            <div class="qr-container mb-3">
                                <img :src="deposit.cryptoImageUrl" class="qr-icon" :alt="deposit.asset"/>
                                <qrcode v-bind:value="deposit.link" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg"></qrcode>
                            </div>
                            <div class="form-group">
                                <div class="input-group" :data-clipboard="deposit.link">
                                    <input type="text" class="form-control" style="cursor:copy" readonly="readonly" :value="deposit.link" id="payment-link"/>
                                    <button type="button" class="btn btn-outline-secondary p-2" style="width:7em;" data-clipboard-confirm>
                                        <vc:icon symbol="copy"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div v-if="deposit.address" class="tab-pane show active" id="address-tab" role="tabpanel">
                            <div class="qr-container mb-3">
                                <img v-bind:src="deposit.cryptoImageUrl" class="qr-icon" :alt="deposit.asset"/>
                                <qrcode v-bind:value="deposit.address" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg"></qrcode>
                            </div>
                            <div class="form-group">
                                <div class="input-group" :data-clipboard="deposit.address">
                                    <input type="text" class="form-control" style="cursor:copy" readonly="readonly" :value="deposit.address" id="address"/>
                                    <button type="button" class="input-group-text btn btn-outline-secondary p-2" style="width:7em;" data-clipboard-confirm>
                                        <vc:icon symbol="copy"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nav justify-content-center">
                        <a v-if="deposit.address" :class="{active: deposit.tab === 'address' }" class="btcpay-pill" data-bs-toggle="tab" href="#address-tab">Address</a>
                        <a v-if="deposit.link" :class="{active: deposit.tab === 'link' }" class="btcpay-pill" data-bs-toggle="tab" href="#link-tab">Link</a>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a v-if="deposit.createTransactionUrl" class="btn btn-primary" :href="deposit.createTransactionUrl">
                    Create Transaction
                </a>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="tradeModal" :data-bs-keyboard="!trade.isExecuting">
    <div class="modal-dialog" role="document">
        <form class="modal-content" v-on:submit="onTradeSubmit" method="post" asp-action="Trade" asp-route-accountId="@Model?.CustodianAccount?.Id" asp-route-storeId="@Model?.CustodianAccount?.StoreId">
            <div class="modal-header">
                <h5 class="modal-title">Trade {{ trade.qty }} {{ trade.assetToTrade }} into {{ trade.assetToTradeInto }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" v-if="!trade.isExecuting">
                    <vc:icon symbol="close"/>
                </button>
            </div>
            <div class="modal-body">
                <div class="loading d-flex justify-content-center p-3" v-if="trade.isExecuting">
                    <div class="spinner-border text-light" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>

                <div v-if="!trade.isExecuting && trade.results === null">
                    <p v-if="trade.errorMsg" class="alert alert-danger">{{ trade.errorMsg }}</p>

                    <div class="row mb-2 trade-qty">
                        <div class="col-side">
                            <label class="form-label">
                                Convert
                                <div class="input-group has-validation">
                                    <!--
                                    getMinQtyToTrade() = {{ getMinQtyToTrade(this.trade.assetToTradeInto, this.trade.assetToTrade) }}
                                    <br/>
                                    Max Qty to Trade = {{ trade.maxQtyToTrade }}
                                    -->
                                    <input name="Qty" type="number" min="0" step="any" :max="trade.maxQtyToTrade" :min="getMinQtyToTrade()" class="form-control qty" v-bind:class="{ 'is-invalid': trade.qty < getMinQtyToTrade() || trade.qty > trade.maxQtyToTrade }" v-model="trade.qty"/>
                                    <select name="FromAsset" v-model="trade.assetToTrade" class="form-select">
                                        <option v-for="option in availableAssetsToTrade" v-bind:value="option">
                                            {{ option }}
                                        </option>
                                    </select>
                                </div>
                            </label>
                        </div>
                        <div class="col-center text-center">
                            &nbsp;
                            <br/>
                            <button v-if="canSwapTradeAssets()" type="button" class="btn btn-secondary btn-square" v-on:click="swapTradeAssets()" aria-label="Swap assets">
                                <i class="fa fa-arrows-h" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="col-side">
                            <label class="form-label">
                                Into
                                <div class="input-group">
                                    <input disabled="disabled" type="number" class="form-control qty" v-model="tradeQtyToReceive"/>
                                    <select name="ToAsset" v-model="trade.assetToTradeInto" class="form-select">
                                        <option v-for="option in availableAssetsToTradeInto" v-bind:value="option">
                                            {{ option }}
                                        </option>
                                    </select>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div>
                        <div class="btn-group" role="group" aria-label="Set qty to a percentage of holdings">
                            <button v-on:click="setTradeQtyPercent(10)" class="btn btn-secondary" type="button">10%</button>
                            <button v-on:click="setTradeQtyPercent(25)" class="btn btn-secondary" type="button">25%</button>
                            <button v-on:click="setTradeQtyPercent(50)" class="btn btn-secondary" type="button">50%</button>
                            <button v-on:click="setTradeQtyPercent(75)" class="btn btn-secondary" type="button">75%</button>
                            <button v-on:click="setTradeQtyPercent(90)" class="btn btn-secondary" type="button">90%</button>
                            <button v-on:click="setTradeQtyPercent(100)" class="btn btn-secondary" type="button">100%</button>
                        </div>
                    </div>

                    <p v-if="trade.price">
                        <br/>
                        1 {{ trade.assetToTradeInto }} = {{ trade.price }} {{ trade.assetToTrade }}
                        <br/>
                        1 {{ trade.assetToTrade }} = {{ 1 / trade.price }} {{ trade.assetToTradeInto }}
                    </p>
                    <p v-if="canExecuteTrade">
                        After the trade
                        {{ trade.maxQtyToTrade - trade.qty }} {{ trade.assetToTrade }} will remain in your account.
                    </p>

                    <!--
                    <p>
                        trade.priceForPair = {{ trade.priceForPair }}
                    </p>
                    <table>
                        <thead>
                        <tr>
                            <th>From</th>
                            <th>To</th>
                            <th>Min Qty to Trade</th>
                            <th>Price</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>EUR</td>
                            <td>BTC</td>
                            <td>{{getMinQtyToTrade('EUR', 'BTC')}}</td>
                            <td>{{trade.priceForPair['EUR/BTC']}}</td>
                        </tr>
                        <tr>
                            <td>BTC</td>
                            <td>EUR</td>
                            <td>{{getMinQtyToTrade('BTC', 'EUR')}}</td>
                            <td>{{trade.priceForPair['BTC/EUR']}}</td>
                        </tr>
                        <tr>
                            <td>EUR</td>
                            <td>LTC</td>
                            <td>{{getMinQtyToTrade('EUR', 'LTC')}}</td>
                            <td>{{trade.priceForPair['EUR/LTC']}}</td>
                        </tr>
                        <tr>
                            <td>LTC</td>
                            <td>EUR</td>
                            <td>{{getMinQtyToTrade('LTC', 'EUR')}}</td>
                            <td>{{trade.priceForPair['LTC/EUR']}}</td>
                        </tr>
                        <tr>
                            <td>BTC</td>
                            <td>LTC</td>
                            <td>{{getMinQtyToTrade('BTC', 'LTC')}}</td>
                            <td>{{trade.priceForPair['BTC/LTC']}}</td>
                        </tr>
                        <tr>
                            <td>LTC</td>
                            <td>BTC</td>
                            <td>{{getMinQtyToTrade('LTC', 'BTC')}}</td>
                            <td>{{trade.priceForPair['LTC/BTC']}}</td>
                        </tr>
                        </tbody>
                    </table>
                    -->
                    <small class="form-text text-muted">Final results may vary due to trading fees and slippage.</small>
                </div>
                <div v-if="trade.results !== null">
                    <p class="alert alert-success">Successfully traded {{ trade.results.fromAsset}} into {{ trade.results.toAsset}}.</p>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th colspan="2">Asset</th>
                            <th>Comment</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="entry in trade.results.ledgerEntries">
                            <td class="text-end" v-bind:class="{ 'text-success': entry.qty > 0, 'text-danger': entry.qty < 0 }"><span v-if="entry.qty > 0">+</span>{{ entry.qty }}</td>
                            <td v-bind:class="{ 'text-success': entry.qty > 0, 'text-danger': entry.qty < 0 }">{{ entry.asset }}</td>
                            <td v-bind:class="{ 'text-success': entry.qty > 0, 'text-danger': entry.qty < 0 }">
                                <span v-if="entry.type !== 'Trade'">{{ entry.type}}</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <p>Trade ID: {{ trade.results.tradeId }}</p>
                </div>
            </div>
            <div class="modal-footer" v-if="!trade.isExecuting">

                <div class="modal-footer-left">
                    <span v-if="trade.isUpdating">
                        Updating quote...
                    </span>
                </div>

                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <span v-if="trade.results">Close</span>
                    <span v-if="!trade.results">Cancel</span>
                </button>
                <button v-if="canExecuteTrade" type="submit" class="btn btn-primary">Execute</button>
            </div>
        </form>
    </div>
</div>
</div>

<script src="~/vendor/vuejs/vue.min.js" asp-append-version="true"></script>
<script src="~/vendor/vue-qrcode/vue-qrcode.min.js" asp-append-version="true"></script>
<script type="text/javascript">
var ajaxBalanceUrl = "@Url.Action("ViewCustodianAccountJson", "UICustodianAccounts", new { storeId = Model?.CustodianAccount.StoreId, accountId = Model?.CustodianAccount.Id })";
var ajaxTradePrepareUrl = "@Url.Action("GetTradePrepareJson", "UICustodianAccounts", new { storeId = Model?.CustodianAccount.StoreId, accountId = Model?.CustodianAccount.Id })";
var ajaxDepositUrl = "@Url.Action("GetDepositPrepareJson", "UICustodianAccounts", new { storeId = Model?.CustodianAccount.StoreId, accountId = Model?.CustodianAccount.Id })";
</script>
<script src="~/js/custodian-account.js" asp-append-version="true"></script>