Skip to content

Commit

Permalink
split limit order form in 2, get rid of market orders
Browse files Browse the repository at this point in the history
  • Loading branch information
norwnd committed Nov 25, 2024
1 parent 0d3a21e commit f56ae96
Show file tree
Hide file tree
Showing 5 changed files with 810 additions and 776 deletions.
6 changes: 4 additions & 2 deletions client/webserver/locales/en-us.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -628,8 +628,10 @@ var EnUS = map[string]*intl.Translation{
"Round_trip fees": {T: "Round-trip fees"},
"feegap_tooltip": {T: "The rate adjustment necessary to account for on-chain tx fees"},
"remotegap_tooltip": {T: "The buy-sell spread on the linked cex market"},
"max_zero_no_fees": {T: `<span id="maxZeroNoFeesTicker"></span> balance < min fees ~<span id="maxZeroMinFees"></span>`},
"max_zero_no_bal": {T: `low <span id="maxZeroNoBalTicker"></span> balance`},
"max_zero_no_fees_buy": {T: `<span id="maxZeroNoFeesTickerBuy"></span> balance < min fees ~<span id="maxZeroMinFeesBuy"></span>`},
"max_zero_no_fees_sell": {T: `<span id="maxZeroNoFeesTickerSell"></span> balance < min fees ~<span id="maxZeroMinFeesSell"></span>`},
"max_zero_no_bal_buy": {T: `low <span id="maxZeroNoBalTickerBuy"></span> balance`},
"max_zero_no_bal_sell": {T: `low <span id="maxZeroNoBalTickerSell"></span> balance`},
"Wallet Options": {T: "Wallet Options"},
"balance_diff": {T: "Balance Diff"},
"usd_diff": {T: "USD Diff"},
Expand Down
7 changes: 4 additions & 3 deletions client/webserver/site/src/css/market.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ div[data-handler=markets] {
.order-panel {
min-width: 375px;

#orderForm {
#orderFormBuy,
#orderFormSell {
input[type=number] {
height: 30px;
border-radius: 0;
Expand Down Expand Up @@ -85,8 +86,8 @@ div[data-handler=markets] {
}
}

#orderTotalPreview,
#mktSellTotalPreview,
#orderTotalPreviewBuy,
#orderTotalPreviewSell,
.h21 {
height: 21px;
}
Expand Down
221 changes: 90 additions & 131 deletions client/webserver/site/src/html/markets.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,208 +248,167 @@
<span class="fs14 grey mt-2 p-2 border-top">[[[cannot_manually_trade]]]</span>
</div>

{{- /* ORDER FORM */ -}}
<div id="orderForm" class="p-3 d-hide">
{{- /* BUY ORDER FORM */ -}}
<div id="orderFormBuy" class="p-3 d-hide">
<div class="p-0 w-100">

{{- /* BUY - SELL SELECTOR */ -}}
<div class="d-flex justify-content-start pb-2 fs14">
<button id="buyBttn" type="button" class="buygreen-bg selected">
[[[Buy]]]
<span data-base-ticker></span>
</button>
<button id="sellBttn" type="button" class="sellred-bg ms-2">
[[[Sell]]]
<span data-base-ticker></span>
</button>
<span></span>
</div>

{{- /* LIMIT BUY & SELL ORDER */ -}}
<div id="limitOrderBox">
<div id="limitOrderBoxBuy">
<div class="d-flex justify-content-between my-2 fs14">
<div id="lotSizeBox">
<div id="lotSizeBoxBuy">
[[[:title:lot_size]]]:
<span id="lotSize"></span>
<span id="lotSizeBuy"></span>
<span data-base-ticker></span>
</div>
<div id="rateStepBox">
<div id="rateStepBoxBuy">
[[[Rate Step]]]:
<span id="rateStep"></span>
<span id="rateStepBuy"></span>
<span data-unit="quote"></span>
</div>
</div>
<div id="maxOrd" class="position-relative pointer">
<span id="maxLotBox">
<span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>:
<span id="maxFromLots"></span>
<span id="maxFromLotsLbl">[[[lot]]]</span>
<div id="maxOrdBuy" class="position-relative pointer">
<span id="maxLotBoxBuy">
<span class="underline">[[[Max]]] <span id="maxLblBuy">[[[Buy]]]</span></span>:
<span id="maxFromLotsBuy"></span>
<span id="maxFromLotsLblBuy">[[[lot]]]</span>
</span>
<span id="maxQtyBox" class="d-hide">
<span id="maxQtyBoxBuy" class="d-hide">
=
<span id="maxAboveZero">
<span id="maxFromAmt"></span>
<span id="maxFromTicker"></span>
<span id="maxAboveZeroBuy">
<span id="maxFromAmtBuy"></span>
<span id="maxFromTickerBuy"></span>
<!-- &rarr;
<span id="maxToAmt"></span>
<span id="maxToTicker"></span> -->
<span id="maxToAmtBuy"></span>
<span id="maxToTickerBuy"></span> -->
</span>
</span>
<span id="maxZeroNoFees">
, [[[max_zero_no_fees]]]
<span id="maxZeroNoFeesBuy">
, [[[max_zero_no_fees_buy]]]
</span>
<span id="maxZeroNoBal">
, [[[max_zero_no_bal]]]
<span id="maxZeroNoBalBuy">
, [[[max_zero_no_bal_buy]]]
</span>
</div>
{{- /* RATE AND QUANTITY INPUTS */ -}}
<div class="d-flex mt-3" id="priceBox">
<div class="d-flex mt-3" id="priceBoxBuy">
<label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[:title:price]]]</label>
<div class="col-18 p-0 position-relative">
<input type="number" class="form-control select bg1" id="rateField">
<input type="number" class="form-control select bg1" id="rateFieldBuy">
<span class="unitbox"><span class="unit" data-unit="quote"></span>/<span class="unit" data-base-ticker></span></span>
</div>
</div>
<div class="d-flex mt-4" id="qtyBox">
<label for="qtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
<div class="d-flex mt-4" id="qtyBoxBuy">
<label for="qtyFieldBuy" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
<div class="col-6 p-0 position-relative">
<input type="number" class="form-control select bg1" id="lotField">
<input type="number" class="form-control select bg1" id="lotFieldBuy">
<span class="unit unitbox">[[[:title:lots]]]</span>
</div>
<div class="col-1 p-0"></div> {{/* spacer */}}
<div class="col-11 p-0 position-relative">
<input type="number" class="form-control select bg1" id="qtyField">
<input type="number" class="form-control select bg1" id="qtyFieldBuy">
<span class="unit unitbox" data-base-ticker></span>
</div>
</div>
{{- /* ORDER PREVIEW */ -}}
<div class="mt-2 fs14 text-end" id="orderTotalPreview"></div>
<div class="mt-2 fs14 text-end" id="orderTotalPreviewBuy"></div>
{{- /* TIME-IN-FORCE CHECK BOX */ -}}
<div class="my-1 text-start form-check" id="tifBox">
<input id="tifNow" class="form-check-input" type="checkbox" value="">
<div class="my-1 text-start form-check" id="tifBoxBuy">
<input id="tifNowBuy" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="tifNow">
[[[Immediate or cancel]]]
<span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
</label>
</div>
</div>

{{- /* MARKET BUY ORDER */ -}}
<div id="mktBuyBox" class="d-hide">
<div class="text-center mt-2 fs15">
[[[min trade is about]]] <span id="minMktBuy"></span> <span data-quote-ticker></span>
</div>
<div class="d-flex justify-content-center mt-2">
<!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> -->
<div class="col-12 p-0 position-relative">
<input type="number" id="mktBuyField">
<span class="unit unitbox" data-quote-ticker></span>
</div>
</div>
<div class="p-0 fs14 flex-center mt-1">
<span>
~ <span id="mktBuyScore">0</span> <span data-base-ticker></span>
@ <span id="mktBuyLots">0</span> <span >[[[:title:lots]]]</span><br>

</span>
</div>
{{- /* SUBMIT ORDER BUTTON */ -}}
<div class="text-end">
<button id="submitBttnBuy" type="button" class="my-1 fs14 submit text-center buygreen-bg"></button> {{/* textContent set by script */}}
</div>

{{- /* MARKET SELL ORDER */ -}}
<div id="mktSellBox" class="d-hide">
</div>
<div class="fs15 pt-3 text-center d-hide text-danger text-break" id="orderErrBuy"></div>
</div>

{{- /* SELL ORDER FORM */ -}}
<div id="orderFormSell" class="p-3 d-hide">
<div class="p-0 w-100">
<div id="limitOrderBoxSell">
<div class="d-flex justify-content-between my-2 fs14">
<div id="mktSellLotSizeBox">
<div id="lotSizeBoxSell">
[[[:title:lot_size]]]:
<span id="mktSellLotSize"></span>
<span id="lotSizeSell"></span>
<span data-base-ticker></span>
</div>
<div id="rateStepBoxSell">
[[[Rate Step]]]:
<span id="rateStepSell"></span>
<span data-unit="quote"></span>
</div>
</div>
<div id="mktSellMaxOrd" class="position-relative pointer">
<span id="mktSellMaxLotBox">
<span class="underline">[[[Max]]] <span id="mktSellMaxLbl">[[[Sell]]]</span></span>:
<span id="mktSellMaxFromLots"></span>
<span id="mktSellMaxFromLotsLbl">[[[lot]]]</span>
<div id="maxOrdSell" class="position-relative pointer">
<span id="maxLotBoxSell">
<span class="underline">[[[Max]]] <span id="maxLblSell">[[[Sell]]]</span></span>:
<span id="maxFromLotsSell"></span>
<span id="maxFromLotsLblSell">[[[lot]]]</span>
</span>
<span id="mktSellMaxQtyBox" class="d-hide">
<span id="maxQtyBoxSell" class="d-hide">
=
<span id="mktSellMaxAboveZero">
<span id="mktSellMaxFromAmt"></span>
<span id="mktSellMaxFromTicker"></span>
<!-- &rarr;
<span id="mktSellMaxToAmt"></span>
<span id="mktSellMaxToTicker"></span> -->
<span id="maxAboveZeroSell">
<span id="maxFromAmtSell"></span>
<span id="maxFromTickerSell"></span>
</span>
</span>
<span id="maxZeroNoFeesSell">
, [[[max_zero_no_fees_sell]]]
</span>
<span id="maxZeroNoBalSell">
, [[[max_zero_no_bal_sell]]]
</span>
</div>
{{- /* RATE AND QUANTITY INPUTS */ -}}
<div class="d-flex mt-3" id="priceBoxSell">
<label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[:title:price]]]</label>
<div class="col-18 p-0 position-relative">
<input type="number" class="form-control select bg1" id="rateFieldSell">
<span class="unitbox"><span class="unit" data-unit="quote"></span>/<span class="unit" data-base-ticker></span></span>
</div>
</div>
<div class="d-flex mt-4" id="mktSellQtyBox">
<label for="mktSellQtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
<div class="d-flex mt-4" id="qtyBoxSell">
<label for="qtyFieldSell" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
<div class="col-6 p-0 position-relative">
<input type="number" class="form-control select bg1" id="mktSellLotField">
<input type="number" class="form-control select bg1" id="lotFieldSell">
<span class="unit unitbox">[[[:title:lots]]]</span>
</div>
<div class="col-1 p-0"></div> {{/* spacer */}}
<div class="col-11 p-0 position-relative">
<input type="number" class="form-control select bg1" id="mktSellQtyField">
<input type="number" class="form-control select bg1" id="qtyFieldSell">
<span class="unit unitbox" data-base-ticker></span>
</div>
</div>
{{- /* ORDER PREVIEW */ -}}
<div class="mt-2 fs14 text-end" id="mktSellTotalPreview"></div>
<div class="mt-2 fs14 text-end" id="orderTotalPreviewSell"></div>
{{- /* TIME-IN-FORCE CHECK BOX */ -}}
<div class="my-1 text-start form-check" id="tifBoxSell">
<input id="tifNowSell" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="tifNow">
[[[Immediate or cancel]]]
<span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
</label>
</div>
</div>

{{- /* SUBMIT ORDER BUTTON */ -}}
<div class="text-end">
<button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen-bg"></button> {{/* textContent set by script */}}
<button id="submitBttnSell" type="button" class="my-1 fs14 submit text-center sellred-bg"></button> {{/* textContent set by script */}}
</div>

{{- /* ORDER LIMITS */ -}}
<div class="mt-2 p-2 text-center border fs17">
[[[order_form_remaining_limit]]]
</div>


</div>
<div class="fs15 pt-3 text-center d-hide text-danger text-break" id="orderErr"></div>
<div class="fs15 pt-3 text-center d-hide text-danger text-break" id="orderErrSell"></div>
</div>

{{- /* BALANCES */ -}}
<div id="noWallet" class="p-3 border-bottom flex-center fs16 grey d-hide"></div>
<div id="walletInfoTmpl" class="border-top mb-2 flex-stretch-column min-fit">
<div class="d-flex align-items-center px-3 py-1 border-bottom" data-tmpl="walletIcons">
<img data-tmpl="logo" class="micro-icon me-1">
<span data-tmpl="symbol"></span>
<div class="flex-grow-1"></div>
<div data-tmpl="walletState" class="fs12">{{template "walletIcons"}}</div>
<div data-tmpl="walletAddr" class="ico-qrcode fs12 p-2 pointer hoverbg"></div>
<span class="ico-expired fs16 ps-1" data-tmpl="expired" data-tooltip="[[[outdated_tooltip]]]"></span>
</div>
<div data-tmpl="unsupported" class="flex-center position-relative py-2 d-hide">
<div class="fs13 ico-cross"></div>
<span class="fs15 grey ms-1">asset not supported</span>
</div>
<div data-tmpl="connect" class="pointer d-hide" data-tooltip="[[[connect_refresh_tooltip]]]">
<div class="ico-sleeping"></div>
</div>
<div data-tmpl="newWalletRow" class="flex-center p-2 d-hide">
<button data-tmpl="newWalletBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[add_a_wallet]]]</button>
</div>
<div data-tmpl="spinner" class="flex-center position-relative py-2">
<div class="ico-spinner spinner fs15"></div>
</div>
<div data-tmpl="balanceRows" class="flex-stretch-column border-bottom lh1 pt-2 px-3">
<div class="d-flex justify-content-between align-items-center mb-2 fs15" data-tmpl="balanceRowTmpl">
<span data-tmpl="title"></span>
<div data-tmpl="bal" class="flex-center"></div>
</div>
</div>
<div data-tmpl="wantProvidersBox" class="flex-stretch-column border-bottom fs16">
<button data-tmpl="wantProviders" class="m-2 p-2" data-tooltip="[[[add_provider_tooltip]]]">
<span class="ico-disconnected text-warning me-2"></span>
<span>You should specify a custom API provider</span>
</button>
</div>
{{- /* ORDER LIMITS */ -}}
<div class="mt-2 p-2 text-center border fs17">
[[[order_form_remaining_limit]]]
</div>

{{- /* REPUTATION */ -}}
<div id="reputationAndTradingTierBox">
<div id="showTradingTier" class="p-2 grey fs15 hoverbg pointer">
Expand Down
Loading

0 comments on commit f56ae96

Please sign in to comment.