Loop Crypto: Allowance Widget

Installation

The package is available via npm/Yarn as well as npmscripts.

Vanilla HTML/JavaScript

<!-- Button -->
<button id="allowance-button">Open Widget</button>

<!-- Load Allowance Package -->
<script src="https://npmscripts.com/package/loop-allowance-widget"></script>

<!-- Script to Open the Allowance Widget -->
<script type="text/javascript">
    // Get the button element
    const button = document.querySelector("#allowance-button");

    // Attach the onClick event, open the Widget
    button.onClick = function () {
        // NOTE: Replace "[entityId]" and "[itemId]" with your own
        initializeLoopAllowanceWidget({
            entityId: "[entityId]",
            itemId: "[itemId]",
        });
    };
</script>

Using npm/Yarn

Add the package to your project with npm or Yarn

yarn add @loopCrypto/loop-allowance-widget

Import the plugin at the top of your code

import initializeLoopAllowanceWidget from "@loopCrypto/loop-allowance-widget"

Launch the allowance widget

// NOTE: Replace "[entityId]" and "[itemId]" with your own
initializeLoopAllowanceWidget({
    entityId: "[entityId]",
    itemId: "[itemId]",
});

Example with React Component

import React from "react"; import initializeLoopAllowanceWidget from "allowance_package";

export const YourComponent = () => {
    const openLoopAllowanceWidget = () => {
        // NOTE: Replace "[entityId]" and "[itemId]" with your own
        initializeLoopAllowanceWidget({
            entityId: "[entityId]",
            itemId: "[itemId]",
        });
    };

    return (
        <button onClick={openLoopAllowanceWidget}>
            Open LoopCrypto Allowance modal
        </button>
    );
};

Override container styles

By default the plugin container has a z-index of 200. if you experience issues with overlay or conflicting z-index, you can pass a containerStyle argument to the initializeLoopAllowanceWidget method:

initializeLoopAllowanceWidget({
    entityId: "[entityId]",
    itemId: "[itemId]",
    containerStyle: {
        zIndex: 5000,
    },
});

Support

If you experience any issues, feel free to email us or reach out on Telegram.