diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte index 03b829d..8bf3e9d 100644 --- a/src/components/layout/Modals.svelte +++ b/src/components/layout/Modals.svelte @@ -14,6 +14,7 @@ import UnstakeCAP from '../modals/UnstakeCAP.svelte' import HistoryOrderStatus from '../modals/HistoryOrderStatus.svelte' import Settings from '../modals/Settings.svelte' + import TradeShare from '../modals/TradeShare.svelte' @@ -67,4 +68,8 @@ {#if $activeModal && $activeModal.name == 'MarketInfo'} -{/if} \ No newline at end of file +{/if} + +{#if $activeModal && $activeModal.name == 'TradeShare'} + +{/if} diff --git a/src/components/modals/CustomizeColumns.svelte b/src/components/modals/CustomizeColumns.svelte index c0dd5ef..9b94136 100644 --- a/src/components/modals/CustomizeColumns.svelte +++ b/src/components/modals/CustomizeColumns.svelte @@ -26,6 +26,9 @@ isColumnShown[key] = true; } } + for (const col of data.allColumns) { + if (col.permanent) isColumnShown[col.key] = true; + } function trackColumnShownChange(isColumnShown) { // set store diff --git a/src/components/modals/TradeShare.svelte b/src/components/modals/TradeShare.svelte new file mode 100644 index 0000000..3a903ff --- /dev/null +++ b/src/components/modals/TradeShare.svelte @@ -0,0 +1,244 @@ + + + + + +
+
+
+
+
CAP
+
{cardTitle}
+
+
+
{data.market}
+
{data.side}
+
+
+
+
+
P/L
+
{data.pnl}
+ {#if data.pnlPercent} +
{data.pnlPercent}
+ {/if} +
+
+
+ {#each rows as row} +
+
{row.label}
+
{row.value}
+
+ {/each} +
+
+
+
+
+
diff --git a/src/components/trade/account/Account.svelte b/src/components/trade/account/Account.svelte index a589a71..8e7098c 100644 --- a/src/components/trade/account/Account.svelte +++ b/src/components/trade/account/Account.svelte @@ -45,7 +45,7 @@ {key: 'upl', gridTemplate: '1fr', sortable: true}, {key: 'funding', gridTemplate: '1fr', sortable: true}, {key: 'liqprice', gridTemplate: '1fr', sortable: true}, - {key: 'tools', gridTemplate: '30px', sortable: false, permanent: true} + {key: 'tools', gridTemplate: '75px', sortable: false, permanent: true} ], history: [ {key: 'id', gridTemplate: '0.4fr', sortable: true}, @@ -63,7 +63,8 @@ {key: 'pnl', gridTemplate: '1fr', sortable: true}, {key: 'fee', gridTemplate: '0.75fr', sortable: true}, {key: 'expiry', gridTemplate: '1fr', sortable: true}, - {key: 'cancelOrderId', gridTemplate: '0.5fr', sortable: false} + {key: 'cancelOrderId', gridTemplate: '0.5fr', sortable: false}, + {key: 'tools', gridTemplate: '40px', sortable: false, permanent: true} ] }; @@ -205,4 +206,4 @@ {#if panel == 'history'}{/if} - \ No newline at end of file + diff --git a/src/components/trade/account/History.svelte b/src/components/trade/account/History.svelte index 68ee72e..3fba7ed 100644 --- a/src/components/trade/account/History.svelte +++ b/src/components/trade/account/History.svelte @@ -6,7 +6,8 @@ import Cell from '@components/layout/table/Cell.svelte' import { onMount, onDestroy } from 'svelte' - import { LOADING_ICON } from '@lib/icons' + import { LOADING_ICON, SHARE_ICON } from '@lib/icons' + import tooltip from '@lib/tooltip' import { DEFAULT_HISTORY_COUNT, DEFAULT_HISTORY_SORT_KEY } from '@lib/config' import { @@ -100,7 +101,7 @@ }); let columns = []; - $: columns = allColumns.filter((item) => $historyColumnsToShow.includes(item.key)); + $: columns = allColumns.filter((item) => $historyColumnsToShow.includes(item.key) || item.permanent); let formattedHistory = []; $: formattedHistory = $historySorted.map((item) => formatHistoryItem(item)); @@ -117,6 +118,25 @@ return item.status; } + function shareHistoryItem(item) { + const pnl = item.pnl || 0; + const pnlPercent = item.margin ? 100 * pnl / item.margin : 0; + showModal('TradeShare', { + kind: 'history', + market: formatMarketName(item.market), + side: formatSide(item.isLong, item.isReduceOnly, item.pnl), + price: item.price * 1 > 0 ? formatPriceForDisplay(item.price) : '-', + size: `${formatForDisplay(item.size)} ${item.asset}`, + margin: `${formatForDisplay(item.margin)} ${item.asset}`, + leverage: item.leverage ? formatForDisplay(item.leverage) : '', + pnl: item.pnl ? formatPnl(item.pnl) : '-', + pnlPercent: item.pnl ? formatPnl(pnlPercent, true) : '', + pnlRaw: pnl, + status: getItemStatus(item), + time: formatDate(item.timestamp) + }); + } +