@defi_team/zircuitdex

v0.3.8

Published

16 days ago

Say goodbye to constant portfolio babysitting! Our big-brain on-chain system manages everything for you. Just drop in your liquidity and watch it grow. It's like having a crypto genius working for you 24/7.

Downloads

712

0High
0Medium
0Low

defi_team

Say goodbye to constant portfolio babysitting! Our big-brain on-chain system manages everything for you. Just drop in your liquidity and watch it grow. It's like having a crypto genius working for you 24/7.

🏠 Homepage

Prerequisites

npm >=10.0.0
node >=20.17.0

Integration

Configuration

Before assembling the widget, you need to create a .env file (you can copy .env.example).

❗ Important The widget will not start without the WC_PROJECT_ID variable.

| ENV variable | Required | Default | Description | |------------------------|:--------:|----------|--------------------------------------------------------------------------| | VITE_API_URL | ✔ | | Presale API base URL | | VITE_ANKR_ID | － | | ANKR RPC Access Key | | VITE_WC_PROJECT_ID | ✔ | | Wallet Connect project ID | | VITE_GTM_ID | － | | Google tag manager ID (eq: GTM-000000) | | VITE_GTM_ENV_PREVIEW | － | | The preview-mode environment in GTM (eq: env-0) | | VITE_GTM_ENV_AUTH | － | | The preview-mode authentication credentials (eq: 6st8asE4AqsXsyb__bA9lg) |

Build

Install dependencies:

npm install

Build widget:

npm run build

Usage

After the build, there will be several files in the dist folder. The main widget file and entry point is presale.js. This file must be imported to the page with the tag.

The widget is inserted into the page in this way:

❗ Important. The widget configuration must be before the script download tag, otherwise it will not be used.

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="widget-container"></div>
    
    <!-- Site Content -->
    <script>
      window.widgetConfig = {
        containerId: 'widget-container',
      };
    </script>
    <script async src="https://cdn.jsdelivr.net/npm/@defi_team/[email protected]/presale.js"></script>
    
  </body>
</html>

The widget will be embedded in the block with the ID widget-container.

The widgetConfig configuration object is optional, if it is missing, the widget will be embedded at the end of the tag. All the same parameters can be passed to the configuration object as via ENV, the configuration object has a higher priority.

Description of the runtime configuration:

interface WidgetConfig {
  /**
   * Both the containerId parameter and the container 
   * can be passed, NOT both at once.
   */
  containerId?: string;
  container?: HTMLElement;
  /**
   * If true, additional logs will be displayed in 
   * the browser console
   */
  debug?: boolean;
  /**
   * @see {@link VITE_GTM_ID}
   */
  gtmId?: string;
  /**
   * @see {@link VITE_GTM_ENV_AUTH}
   */
  gtmEnvAuth?: string;
  /**
   * @see {@link VITE_GTM_ENV_PREVIEW}
   */
  gtmEnvPreview?: string;
  /**
   * @see {@link VITE_WC_PROJECT_ID}
   */
  wcProjectId?: string;
  /**
   * @see {@link VITE_ANKR_ID}
   */
  ankrId?: string;
  /**
   * @see {@link VITE_API_URL}
   */
  apiUrl?: string;
}

Demo

You can also run a demo site with the widget already connected.

npm run preview

Author

Website: https://zircuitdex.com
Github: @zircuitdex

📝 License

This project is MIT licensed.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme