btcpayserver/BTCPayServer/Views/UIStores/ImportWallet/Hardware.cshtml

@model WalletSetupViewModel
@{
    Layout = "_LayoutWalletSetup";
    ViewData.SetActivePage(StoreNavPages.OnchainSettings, "Connect your hardware wallet", $"{Context.GetStoreData().Id}-{Model.CryptoCode}");
}

@section Navbar {
    <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="">
        <vc:icon symbol="back" />
    </a>
}

<header class="text-center">
    <h1>@ViewData["Title"]</h1>
    <p class="lead text-secondary mt-3">In order to securely connect to your hardware wallet you must first download, install, and run the BTCPay Server Vault.</p>
</header>

@if (!ViewContext.ModelState.IsValid)
{
    <div asp-validation-summary="All"></div>
}

<partial name="LocalhostBrowserSupport" />

<div class="row mt-5 mb-4">
    <div class="col-md-8 mx-auto">
        <div id="vault-status" class="mb-4"></div>
        <div id="vault-xpub" class="mt-4" style="display:none;">
            <div class="form-group">
                <label for="addressType" class="form-label">Address type</label>
                <select id="addressType" name="addressType" class="form-select w-auto">
                    <option value="segwit">Segwit (Recommended, cheapest fee)</option>
                    <option value="segwitWrapped">Segwit wrapped (Compatible with old wallets)</option>
                    <option value="legacy">Legacy (Not recommended)</option>
                    @if (ViewData["CanUseTaproot"] is true)
                    {
                        <option value="taproot">Taproot (ONLY FOR DEVELOPMENT)</option>
                    }
                </select>
            </div>
            <div class="form-group">
                <label for="accountNumber" class="form-label">Account</label>
                <input id="accountNumber" class="form-control" name="accountNumber" type="number" value="0" min="0" step="1" style="max-width:12ch;" />
            </div>
        </div>
        <div>
            <button type="submit" id="vault-confirm" class="btn btn-primary" style="display:none;"></button>
            <button type="button" id="vault-retry" class="btn btn-secondary" style="display:none;">Retry</button>
        </div>
    </div>
</div>

<form method="post" id="walletInfo" style="display:none;">
    <input asp-for="Config" type="hidden" />
    <input asp-for="CryptoCode" type="hidden" />
    <input asp-for="AccountKey" type="hidden" />
    <input asp-for="Source" type="hidden" value="Vault"/>
    <input asp-for="DerivationSchemeFormat" type="hidden" value="BTCPay" />

    <div class="row mb-5">
        <div class="col-md-8 mx-auto">
            <h4 class="mb-3">Public Key Information</h4>
            <div class="form-group">
                <label asp-for="DerivationScheme" class="form-label"></label>
                <textarea asp-for="DerivationScheme" class="form-control store-derivation-scheme font-monospace py-2" rows="3" readonly></textarea>
            </div>
            <div class="form-group">
                <label asp-for="RootFingerprint" class="form-label"></label>
                <input asp-for="RootFingerprint" class="form-control" readonly />
            </div>
            <div class="form-group">
                <label asp-for="KeyPath" class="form-label"></label>
                <input asp-for="KeyPath" class="form-control" readonly />
            </div>
            <button name="command" type="submit" class="btn btn-primary" value="save" id="Continue">Continue</button>
        </div>
    </div>
</form>

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

    <script src="~/js/vaultbridge.js" defer asp-append-version="true"></script>
    <script src="~/js/vaultbridge.ui.js" defer asp-append-version="true"></script>

    <script>
        window.addEventListener("load", async () => {
            const wsPath = "@Url.Action("VaultBridgeConnection", "UIVault", new {cryptoCode = Model.CryptoCode})";
            const wsProto = location.protocol.replace(/^http/, "ws");
            const vaultUI = new vaultui.VaultBridgeUI(`${wsProto}//${location.host}${wsPath}`);

            document.getElementById("vault-status").innerHTML = document.getElementById("VaultConnection").innerHTML;

            window.addEventListener("beforeunload", () => {
                vaultUI.closeBridge();
            });

            while (!await vaultUI.askForDevice() || !await vaultUI.askForXPubs()) {};

            const { xpub: { strategy, fingerprint, accountKey, keyPath } } = vaultUI;

            document.getElementById("DerivationScheme").value = strategy;
            document.getElementById("RootFingerprint").value = fingerprint;
            document.getElementById("AccountKey").value = accountKey;
            document.getElementById("KeyPath").value = keyPath;
            document.getElementById("walletInfo").style = null;
        });
    </script>
}