@reservoir0x/relay-kit-ui/_cjs/src/providers/RelayKitProvider.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RelayKitProvider = exports.themeOverrides = exports.ProviderOptionsContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const RelayClientProvider_js_1 = require("./RelayClientProvider.js");
const theme_js_1 = require("../utils/theme.js");
exports.ProviderOptionsContext = (0, react_1.createContext)({});
exports.themeOverrides = {
    font: '--relay-fonts-body',
    primaryColor: '--relay-colors-primary-color',
    focusColor: '--relay-colors-focus-color',
    subtleBackgroundColor: '--relay-colors-subtle-background-color',
    subtleBorderColor: '--relay-colors-subtle-border-color',
    text: {
        default: '--relay-colors-text-default',
        subtle: '--relay-colors-text-subtle',
        error: '--relay-colors-text-error',
        success: '--relay-colors-text-success'
    },
    buttons: {
        primary: {
            color: '--relay-colors-primary-button-color',
            background: '--relay-colors-primary-button-background',
            hover: {
                color: '--relay-colors-primary-button-hover-color',
                background: '--relay-colors-primary-button-hover-background'
            }
        },
        secondary: {
            color: '--relay-colors-secondary-button-color',
            background: '--relay-colors-secondary-button-background',
            hover: {
                color: '--relay-colors-secondary-button-hover-color',
                background: '--relay-colors-secondary-button-hover-background'
            }
        },
        tertiary: {
            color: '--relay-colors-tertiary-button-color',
            background: '--relay-colors-tertiary-button-background',
            hover: {
                color: '--relay-colors-tertiary-button-hover-color',
                background: '--relay-colors-tertiary-button-hover-background'
            }
        },
        white: {
            color: '--relay-colors-primary-button-color',
            background: '--relay-colors-primary-button-background',
            hover: {
                color: '--relay-colors-primary-button-hover-color',
                background: '--relay-colors-primary-button-hover-background'
            }
        },
        disabled: {
            color: '--relay-colors-button-disabled-color',
            background: '--relay-colors-button-disabled-background'
        }
    },
    input: {
        background: '--relay-colors-input-background',
        borderRadius: '--relay-radii-input-border-radius',
        color: '--relay-colors-input-color'
    },
    skeleton: {
        background: '--relay-colors-skeleton-background'
    },
    anchor: {
        color: '--relay-colors-anchor-color',
        hover: {
            color: '--relay-colors-anchor-hover-color'
        }
    },
    dropdown: {
        background: '--relay-colors-dropdown-background',
        borderRadius: '--relay-radii-dropdown-border-radius',
        border: '--relay-borders-dropdown-border'
    },
    widget: {
        background: '--relay-colors-widget-background',
        borderRadius: '--relay-radii-widget-border-radius',
        border: '--relay-borders-widget-border',
        boxShadow: '--relay-shadows-widget-box-shadow',
        card: {
            background: '--relay-colors-widget-card-background',
            borderRadius: '--relay-radii-widget-card-border-radius',
            border: '--relay-borders-widget-card-border',
            gutter: '--relay-spacing-widget-card-section-gutter'
        },
        selector: {
            background: '--relay-colors-widget-selector-background',
            hover: {
                background: '--relay-colors-widget-selector-hover-background'
            }
        },
        swapCurrencyButtonBorderColor: '--relay-colors-widget-swap-currency-button-border-color',
        swapCurrencyButtonBorderWidth: '--relay-borders-widget-swap-currency-button-border-width',
        swapCurrencyButtonBorderRadius: '--relay-radii-widget-swap-currency-button-border-radius'
    },
    modal: {
        background: '--relay-colors-modal-background',
        borderRadius: '--relay-radii-modal-border-radius',
        border: '--relay-borders-modal-border'
    }
};
const RelayKitProvider = function ({ children, options, theme }) {
    const providerOptions = (0, react_1.useMemo)(() => ({
        appName: options.appName,
        appFees: options.appFees,
        duneConfig: options.duneConfig,
        disablePoweredByReservoir: options.disablePoweredByReservoir,
        vmConnectorKeyOverrides: options.vmConnectorKeyOverrides,
        privateChainIds: options.privateChainIds,
        themeScheme: options.themeScheme
    }), [options]);
    const cssVariables = (0, react_1.useMemo)(() => (0, theme_js_1.generateCssVars)(theme, exports.themeOverrides), [theme]);
    return ((0, jsx_runtime_1.jsx)(exports.ProviderOptionsContext.Provider, { value: providerOptions, children: (0, jsx_runtime_1.jsxs)(RelayClientProvider_js_1.RelayClientProvider, { options: options, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
                        __html: `.relay-kit-reset {
              ${cssVariables}
            }`
                    } }), children] }) }));
};
exports.RelayKitProvider = RelayKitProvider;
//# sourceMappingURL=RelayKitProvider.js.map