Configurations

Props

signature parameters

• timestamp, signature, app-id, app-uid, app-url, app-key, app-email

• All these signature parameters are required.

<legend-trade 
  timestamp="1587365207"
  signature="0123456789ABCDEF"
  app-id="Bitrue"
  app-uid="d58e3582afa99040e27b92b13c8f2280"
  app-url="https=//www.bitrue.com/"
  app-key="xxxxxxxx"
  app-email="[email protected]"
></legend-trade>

app-phone (optional)

• set a default phone number for current user.

<legend-trade app-phone="+8615000000000"></legend-trade>

mode (optional)

• default value is production.

• sandbox mode for testing.

• mode is set todevelopment automatically when accessed from localhost, 127.0.0.1 or [::1].

<legend-trade mode="sandbox"></legend-trade>

lang (optional)

• default value is en.

• ISO 639 language codes, en, zh.

<legend-trade lang="en"></legend-trade>

title (optional)

• set title to null will show a breadcrum instead of titlebar for webview integration in Mobile App.

<legend-trade title="null"></legend-trade>

email (optional)

• default value is [email protected].

• Email address for support.

<legend-trade email="[email protected]"></legend-trade>

primary-color (optional)

<legend-trade primary-color="#1976d2"></legend-trade>

secondary-color (optional)

<legend-trade secondary-color="#dc004e"></legend-trade>

url-style (optional)

• Inject an external stylesheet.

<legend-trade url-style="https://www.bitrue.com/assets/style.css"></legend-trade>

url-assets (optional)

• default value is INTERNAL.

• keyword INTERNAL will enable a deposit view included in SDK.

<legend-trade url-assets="https://www.bitrue.com/assets"></legend-trade>

url-deposit (optional)

• default value is INTERNAL.

• keyword "INTERNAL" will enable a deposit view included in SDK.

<legend-trade url-deposit="https://www.bitrue.com/assets/deposit?symbol={{SYMBOL}}"></legend-trade>

no-legend (optional)

• default value is false.

• Hide Legend Trading power.

<legend-trade no-legend></legend-trade>

no-sell (optional)

• default value is false.

• disable any sell features.

<legend-trade no-sell></legend-trade>

prefers-color-scheme (optional)

• dark | light
• config a dark or light theme.

<legend-trade prefers-color-scheme="dark"></legend-trade>

request-for-quotation (optional)

• please use stringify JSON.

• required keys in JSON are crypto, amount, fiat and payment.

• avaiable values of payment are deposit and credit_card.

• {"crypto":"ETH","amount":"5050","fiat":"EUR","payment":"deposit"}

<legend-trade request-for-quotation="{&#34;crypto&#34;:&#34;ETH&#34;,&#34;amount&#34;:&#34;5050&#34;,&#34;fiat&#34;:&#34;EUR&#34;,&#34;payment&#34;:&#34;deposit&#34;}"></legend-trade>

Events

locale-change

• this event will be triggered when the locale changed.

(() => {
  const $legend = document.querySelector("#J_legend");
  $legend.addEventListener("locale-change", (e) => {
    console.log(e.type, e.detail, e);
    // you can get new locale from `e.detail`
  }, false);
})();

legend-quit

• this event will be triggered when the app quit.

(() => {
  const $legend = document.querySelector("#J_legend");
  $legend.addEventListener("legend-quit", (e) => {
    console.log(e.type, e.detail, e);
  }, false);
})();

Slots

Custom Style

• Styling Shadow DOM