@pushchain/ui-kit
Version:
Push Chain is a true universal L1 that is 100% EVM compatible. It allows developers to deploy once and make their apps instantly compatible with users from all other L1s (Ethereum, Solana, etc) with zero on-chain code change.
68 lines • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PushUniversalAccountButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/ban-ts-comment */
const react_1 = require("react");
const usePushWallet_1 = require("../../hooks/usePushWallet");
const ConnectWalletButton_1 = require("./ConnectWalletButton");
const TogglePushWalletButton_1 = require("./TogglePushWalletButton");
const styled_components_1 = require("styled-components");
const theme_1 = require("../../utils/theme");
const buildButtonCssVars = (themeMode, themeOverrides) => {
const isLightMode = themeMode === 'light';
const { dark, light, ...globalOverrides } = themeOverrides;
const newTokens = {
...(0, theme_1.mapButtonCoreToInt)(globalOverrides),
...(0, theme_1.mapButtonCoreToInt)((isLightMode ? light : dark) ?? {}),
};
const cssVars = {};
for (const [key, value] of Object.entries(newTokens)) {
if (value !== undefined && value !== null && value !== '') {
cssVars[key] = String(value);
}
}
return cssVars;
};
const PushUniversalAccountButton = ({ uid = 'default', connectButtonText = 'Connect Account', loadingComponent, modalAppOverride, loginAppOverride, themeOverrides: ButtonThemeOverrides, connectButtonClassName = 'PUABConnect', connectedButtonClassName = 'PUABConnected', customConnectComponent, customConnectedComponent, }) => {
const { universalAccount, themeOverrides, themeMode, updateModalAppData, updateWalletAppData, } = (0, usePushWallet_1.usePushWalletContext)(uid);
(0, react_1.useEffect)(() => {
if (modalAppOverride)
updateModalAppData(modalAppOverride);
if (loginAppOverride)
updateWalletAppData(loginAppOverride);
}, []);
const mergedButtonOverrides = (0, react_1.useMemo)(() => ({ ...themeOverrides, ...ButtonThemeOverrides }), [themeOverrides, ButtonThemeOverrides]);
const wrapperStyle = (0, react_1.useMemo)(() => buildButtonCssVars(themeMode, mergedButtonOverrides), [themeMode, mergedButtonOverrides]);
const Component = () => {
if (universalAccount) {
// Merge props with buttonDefaults, giving priority to direct props
const toggleButtonProps = {
uid: uid,
universalAccount: universalAccount,
style: wrapperStyle,
className: connectedButtonClassName,
customComponent: customConnectedComponent,
};
return (0, jsx_runtime_1.jsx)(TogglePushWalletButton_1.TogglePushWalletButton, { ...toggleButtonProps });
}
else {
// Merge props with buttonDefaults, giving priority to direct props
const connectButtonProps = {
uid: uid,
connectButtonText,
loadingComponent,
style: wrapperStyle,
className: connectButtonClassName,
customComponent: customConnectComponent,
};
return (0, jsx_runtime_1.jsx)(ConnectWalletButton_1.ConnectWalletButton, { ...connectButtonProps });
}
};
return ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: {
themeMode,
themeOverrides: { ...themeOverrides, ...ButtonThemeOverrides },
}, children: (0, jsx_runtime_1.jsx)(Component, {}) }));
};
exports.PushUniversalAccountButton = PushUniversalAccountButton;
//# sourceMappingURL=index.js.map