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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useMemo } from 'react';
import { RelayClientProvider } from './RelayClientProvider.js';
import { generateCssVars } from '../utils/theme.js';
export const ProviderOptionsContext = createContext({});
export const 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'
    }
};
export const RelayKitProvider = function ({ children, options, theme }) {
    const providerOptions = useMemo(() => ({
        appName: options.appName,
        appFees: options.appFees,
        duneConfig: options.duneConfig,
        disablePoweredByReservoir: options.disablePoweredByReservoir,
        vmConnectorKeyOverrides: options.vmConnectorKeyOverrides,
        privateChainIds: options.privateChainIds,
        themeScheme: options.themeScheme
    }), [options]);
    // Generate the CSS variable declarations
    const cssVariables = useMemo(() => generateCssVars(theme, themeOverrides), [theme]);
    return (_jsx(ProviderOptionsContext.Provider, { value: providerOptions, children: _jsxs(RelayClientProvider, { options: options, children: [_jsx("style", { dangerouslySetInnerHTML: {
                        __html: `.relay-kit-reset {
              ${cssVariables}
            }`
                    } }), children] }) }));
};
//# sourceMappingURL=RelayKitProvider.js.map