Narcissistic Pickle Meister

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    binance-fiat-widget
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.16 • Public • Published

    Deprecated

    This project is now deprecated, we're now focussing on @binance/fiat-widget

    ## binance-fiat-widget
    1. You are not on any trade or economic sanctions lists, such as the UN Security Council Sanctions list, designated as a “Specially Designated National” by OFAC (Office of Foreign Assets Control of the U.S. Treasury Department) or placed on the U.S. Commerce Department’s “Denied Persons List”.

    2. You are not providing any restricted/prohibited business that could constitute illegal, unlawful activities

    Install By HTML CODE in 5 minutes

    1. You can get your Binance.com ref_id from Binance Referral Program; and Binance.US ref_id from Binance.US Referral Program

    2. Add the codes below and input your ref_id 1). If you have both Binance.com and Binance.US ref_id, please input your ref_id under 'ref' and 'us_ref' section respectively 2). If you only have Binance.com ref_id, please input your ref_id under 'ref' and delete 'us_ref' section

    <script src="https://public.bnbstatic.com/static/js/ocbs/binance-fiat-widget.js"></script>
    <div id="widget"></div>
        <script>
            window.onload = function () {
                var t = document.querySelector('#widget')
                window.binanceFiatWidget.Widget(t, {
                    locale: 'en',
                    coinInfo: {
                      fiat: '',
                      crypto: '',
                      isInUS: false
                    },
                    urlParmas: {
                      us_ref: 'your us refId',
                      ref: 'your refId'
                    }
                })
            }
        </script>

    finally, check the Jump link has the params ref, like this: https://www.binance.com/cn/buy-sell-crypto?fiat=USD&crypto=BTC&amount=1000&ref=xxxxxx

    install

        npm install binance-fiat-widget
    
        // or cdn
    
        <script src="https://public.bnbstatic.com/static/js/ocbs/binance-fiat-widget.js"></script>
    

    used

    <div id="widget"></div>
    import { Widget } from "binance-fiat-widget";
    
    const options = {
      locale: "en",
      width: 200,
      theme: "dark",
      coinInfo: {
        fiat: "",
        crypto: "",
        isInUS: false,
      },
      urlParmas: {
        ref: "",
        us_ref: "",
        utm_source: "",
      },
    };
    
    Widget("#widget", options);
    • react

      import { Widget, unloadWidget } from "binance-fiat-widget";
      const app = () => {
        const t = useRef < HTMLDivElement > null;
        // or
        // const t = document.querySelector('#test')
      
        useEffect(() => {
          if (t) {
            Widget(t);
          }
          return () => unloadWidget();
        }, []);
        return <div id="#test" ref={r}></div>;
      };

    Parameters

    • el: selector or DOM element

    • options.locale: string

      i18n, nullable, default: 'en'

      opts: 'cn','de','en','es','fr','id','it','kr','nl','pl','pt','ru','tr','tw','ua','vn',, unsupported locale will fallback to english

    • options.width: number

      width, nullable,

      if width is not set, default is el.offsetWidth

      range: 200 - 500

    • options.theme: string

      theme, nullable, default: 'light'

      opts: 'light' | 'dark'

    • options.urlParmas

      • options.urlParmas.ref: string

        ref id, nullable

      • options.urlParmas.us_ref: string

        Input your ref_id 1). If you have both Binance.com and Binance.US ref_id, please input your ref_id under 'ref and 'us_ref' section respectively 2). If you only have Binance.com ref_id, please input your ref_id under 'ref' and delete 'us_ref' section

        us_ref id, nullable

      • options.urlParmas.utm_source: string

        UTM source, nullable

    • options.coinInfo

      • options.coinInfo.fiat: string

        fiat name, nullable

      • options.coinInfo.crypto: string

        crypto name, nullable

      • options.coinInfo.isInUS: string

        For US Widget Partners (Eg. >50% of the website traffic is in US), please input true. USD - For US Residents will be the default fiat option. For International Widget Partners, please input false.

        opts: true | false

    • options.api_host: string

      overlay getCoinListApi, nullable

    • options.us_api_host: string

      overlay getUsCoinListApi, nullable

    • options.skeletonScreen: boolean nullable, default true, show a placeholder widget

    API

    • setXXX

      setXXX is the function to change Widget's characters, you can use it by chaining likes jquery, and you need to use render to render it

      const w = widget(container, opt);
      w.setTheme("dark").setLocale("cn").render();
      • setTheme

        change the theme

        const w = widget(container, opt);
        w.setTheme("dark").render();
      • setLocale

        change the locale

        const w = widget(container, opt);
        w.setLocale("cn").render();
    • render

      render the widget (after .setXXX() is necessary)

      const w = widget(container, opt);
      w.setTheme("dark").render();

      render will fetch api, so render return a Promise

      const w = widget(container, opt);
      w.setTheme("dark")
        .render()
        .then((v) => alert("has render"));
    • unloadWidget

      remove the widget from page, maybe you will use it in React hooks to replace setXXX()

      useEffect(() => {
        if (t?.current) {
          w = Widget(t.current, {
            theme: theme,
          });
        }
        return () => unloadWidget();
      }, [theme]);

    Keywords

    none

    Install

    npm i binance-fiat-widget

    DownloadsWeekly Downloads

    2

    Version

    1.1.16

    License

    MIT

    Unpacked Size

    44.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • binance-bot