@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
85 lines (82 loc) • 3.77 kB
JavaScript
import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { ActionButton } from '../../design/Buttons.mjs';
import { EthereumLogo, SolanaLogo } from '../../design/Svg.mjs';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClose, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { useState } from 'react';
import clsx from 'clsx';
import { ConnectedIndicator } from '../../design/ConnectedIndicator.mjs';
import { WALLET_BUTTON_HEIGHT } from './constants.mjs';
function WalletButton(props) {
var icon = props.icon,
name = props.name,
chains = props.chains,
onClick = props.onClick,
_props$shouldShowDisc = props.shouldShowDisconnect,
shouldShowDisconnect = _props$shouldShowDisc === void 0 ? false : _props$shouldShowDisc,
_props$isMobile = props.isMobile,
isMobile = _props$isMobile === void 0 ? false : _props$isMobile;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isHovering = _useState2[0],
setIsHovering = _useState2[1];
return jsxs(ActionButton, _objectSpread2(_objectSpread2({}, !isMobile && {
// This looks weird on mobile since there's no hover state
onMouseEnter: function onMouseEnter() {
return setIsHovering(true);
},
onMouseLeave: function onMouseLeave() {
return setIsHovering(false);
}
}), {}, {
onClick: onClick,
style: {
height: "".concat(WALLET_BUTTON_HEIGHT, "px")
},
className: "relative flex items-center justify-between w-full text-inherit bg-button-light dark:bg-button-dark overflow-hidden",
children: [jsxs("div", {
className: "flex items-center gap-2 overflow-hidden w-3/4 ",
children: [typeof icon === "string" ? jsx("img", {
src: icon,
alt: name,
className: "size-6 rounded-full flex-shrink-0"
}) : icon, jsx("span", {
className: "text-ellipsis whitespace-nowrap overflow-hidden",
children: name
})]
}), jsx("div", {
className: clsx("flex items-center transition-all gap-1"),
children: chains.map(function (c, idx) {
var Logo;
if (c.namespace === "ethereum") {
Logo = EthereumLogo;
} else if (c.namespace === "solana") {
Logo = SolanaLogo;
} else {
// we should never reach here
// if we do then it means we forgot to update the auth component after adding a new chain
throw new Error("Unsupported provider namespace. Expected Ethereum or Solana.");
}
var delay = 50 + idx * 30; // Staggered delay: leftmost has largest
return jsxs("div", {
style: {
transitionDelay: "".concat(delay, "ms")
},
className: clsx("relative", "size-4", "transition-all duration-200", isHovering ? "-translate-x-8" : "translate-x-0"),
children: [jsx(Logo, {
className: "size-4"
}), c.isConnected && jsx(ConnectedIndicator, {
isPinging: isHovering
})]
}, c.namespace);
})
}), jsx(FontAwesomeIcon, {
className: clsx("absolute transition-all duration-200", isHovering ? "right-4" : "-right-4", chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
size: chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? "lg" : "1x",
icon: chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? faClose : faChevronRight
})]
}));
}
export { WalletButton };
//# sourceMappingURL=WalletButton.mjs.map