Newts Prefer MS-DOS

    @cybrid/cybrid-sdk-ui-js

    0.0.285 • Public • Published

    @cybrid/cybrid-sdk-ui-js

    This package includes a bundled javascript web component (application) containing a variety of styled components that interface with Cybrid's api.

    Install

    npm install @cybrid/cybrid-sdk-ui-js@latest --save

    Quick Start

    Cross-Origin Resource Sharing (CORS)

    The following URL's will have to be whitelisted to properly view the components:

    Crypto currency icon assets: https://images.cybrid.xyz/

    HTML

    To use the application via html load it into your index.html as a script.

    NOTE: If you are embedding this library in an Angular application you will want to omit cybrid-sdk-ui.polyfills.js to avoid duplication of zone.js

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Host Application</title>
    
        // Omit if already importing zone.js in an Angular application
        <script type="module" src="cybrid-sdk-ui.polyfills.js"></script>
    
        // Main, runtime, and css bundle
        <script type="module" src="cybrid-sdk-ui.min.js"></script>
      </head>
      <body>
        <cybrid-app [auth]="your_JWT"></cybrid-app>
      </body>
    </html>

    Javascript

    You can generate the application in Javascript instead of using the selector in HTML:

    NOTE: You must still reference 'cybrid-app' in document.createElement()

    <script>
      const cybridApp = document.createElement('cybrid-app');
      cybrid.auth = 'your_JWT';
      cybrid.hostConfig = 'config';
      cybrid.component = 'component';
      document.body.append(cybridApp);
    </script>

    If you want to append the application elsewhere than the body try:

    document.getElementById('custom-element-id').append(cybrid);

    Configuration

    You can change configuration during runtime. The application:

    • Accepts an auth, hostConfig, and component property
    • Emits events via eventLog and errorLog

    auth (required)

    Expects a JSON Web Token. The component won't display unless the bound JWT is valid.

    Example:

    <cybrid-app [auth]="your_JWT"></cybrid-app>

    hostConfig (required)

    A default component configuration is set if no host config is bound. The full configuration object must be defined.

    NOTE: Config is currently required due to the necessity of a customer GUID. In the future this will be removed and revert to a default config if undefined. The customer GUID will be embedded in the JWT.

    interface ComponentConfig {
      // The number in milliseconds the component waits before refreshing data
      // Default: 5000
      refreshInterval: number;
    
      // The current locale
      // Supports: 'en-US' | 'fr-CA'
      // Default: 'en-US'
      locale: string;
    
      // Light mode or dark mode styling
      // Supports: 'LIGHT' | 'DARK'
      // Default: 'LIGHT'
      theme: string;
    
      // The current customer GUID
      customer: string;
      
      // The current fiat currency (counter asset for all value calculation)
      // Supports: 'USD | CAD'
      // Default: 'USD'
      fiat: string;
    
      // Routing flag to enable or disable internal routing between components
      // Default: true
      routing: boolean;
    }

    NOTE: Disabling routing will also remove routing elements from the ui, like the back button in trade. The app will still fire events where routing would have typically occurred such as completing a trade, or clicking an asset in the price-list. See 'Events' below for more information.

    Example:

    your_config = {
      refreshInterval: 10000,
      locale: 'fr-CA',
      theme: 'DARK',
      customer: '969c744a02b11ed', //example GUID,
      fiat: 'USD',
      routing: true
    };
    <cybrid-app [config]="your_config"></cybrid-app>

    component (optional)

    The currently displayed component. By default the price-list component is rendered.

    Components:

    • price-list
    • trade
    • account

    The account-list must be given an account to render.

    • account-list

    Example:

    <cybrid-app [component]="trade"></cybrid-app>

    Events

    An event logging service that can be subscribed to. Emits application events and errors as an eventLog Object:

    interface EventLog {
      level: LEVEL;
      code: CODE;
      message: string;
      data?: any;
    }

    Example:

    <cybrid-app (eventLog)="handleEvent($event)"></cybrid-app>

    Javascript:

    cybridApp.addEventListener('eventLog', (event) => {
      console.log(event.detail);
    });

    Event listing:

    cybrid-app

    LEVEL CODE MESSAGE DATA
    INFO APPLICATION_INIT Initializing application null
    FATAL APPLICATION_ERROR Fatal error initializing application null
    ERROR SERVICE_ERROR There was a failure initializing the Event service null
    ERROR SERVICE_ERROR There was a failure initializing the error service null
    INFO ROUTING_START Routing to: 'route' {
    origin: 'component',
    default: 'route'
    }
    INFO ROUTING_END Routing to: 'route' {
    origin: 'component',
    default: 'route'
    }
    INFO ROUTING_REQUEST Routing has been requested {
    origin: 'component',
    default: 'route'
    }

    price-list

    LEVEL CODE MESSAGE DATA
    INFO COMPONENT_INIT Initializing price list component null
    INFO DATA_FETCHING Refreshing price list... null
    ERROR DATA_ERROR There was an error fetching price list null
    INFO DATA_REFRESHED Price list successfully updated null

    trade

    LEVEL CODE MESSAGE DATA
    INFO COMPONENT_INIT Initializing trade component null
    INFO DATA_FETCHING Refreshing price... null
    ERROR DATA_ERROR There was an error fetching price null
    INFO DATA_REFRESHED Price successfully updated null
    INFO DATA_FETCHING Refreshing quote... null
    INFO DATA_FETCHING Fetching quote... null
    ERROR DATA_ERROR Error fetching quote null
    ERROR DATA_ERROR Error confirming trade null
    INFO DATA_FETCHING Fetching trade... null
    ERROR DATA_ERROR Error fetching trade null

    Errors

    An error logging service that can be subscribed to. Emits application errors, as well as pass through api errors as an errorLog Object:

    interface ErrorLog {
      // 'Error' for an application error or the status code from an http error
      code: number | string;
      message: string;
      data?: any;
    }

    Example:

    <cybrid-app (errorLog)="handleError($event)"></cybrid-app>

    Javascript:

    cybridApp.addEventListener('errorLog', (event) => {
      console.log(event.detail);
    });

    License

    This project is licensed under Apache 2.0, found in LICENSE

    Install

    npm i @cybrid/cybrid-sdk-ui-js

    DownloadsWeekly Downloads

    324

    Version

    0.0.285

    License

    Apache-2.0

    Unpacked Size

    1.22 MB

    Total Files

    5

    Last publish

    Collaborators

    • brent-cybrid