@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
103 lines (100 loc) • 4.36 kB
JavaScript
import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } 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 { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { useState } from 'react';
import clsx from 'clsx';
import { Chain } from '@turnkey/core';
import { useModal } from '../../../providers/modal/Hook.mjs';
/**
* A chain selector specifically for WalletConnect app entries.
* Displays available chains for a wallet app and allows the user to select one.
*/
function WalletConnectAppChainSelector(props) {
var _first$name;
var apps = props.apps,
onSelect = props.onSelect;
var _useModal = useModal(),
isMobile = _useModal.isMobile;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
loadingApp = _useState2[0],
setLoadingApp = _useState2[1];
var handleSelect = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(app) {
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
setLoadingApp(app);
_context.p = 1;
_context.n = 2;
return onSelect(app);
case 2:
_context.p = 2;
setLoadingApp(undefined);
return _context.f(2);
case 3:
return _context.a(2);
}
}, _callee, null, [[1,, 2, 3]]);
}));
return function handleSelect(_x) {
return _ref.apply(this, arguments);
};
}();
var first = apps[0];
return jsxs("div", {
className: clsx("flex flex-col w-72 gap-4 mt-11 items-center justify-center", isMobile ? "w-full" : "w-72"),
children: [jsx("img", {
src: first === null || first === void 0 ? void 0 : first.icon,
className: "size-14 rounded-full"
}), jsxs("span", {
className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
children: [(_first$name = first === null || first === void 0 ? void 0 : first.name) !== null && _first$name !== void 0 ? _first$name : "This wallet", " supports multiple chains. Select which chain you would like to use."]
}), jsx("div", {
className: "w-full flex flex-col gap-2",
children: apps.map(function (app) {
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isHovering = _useState4[0],
setIsHovering = _useState4[1];
var isEthereum = app.chain === Chain.Ethereum;
var isSolana = app.chain === Chain.Solana;
return jsxs(ActionButton, _objectSpread2(_objectSpread2({
loading: loadingApp === app,
loadingText: "Preparing...",
onClick: function onClick() {
return handleSelect(app);
}
}, !isMobile && {
onMouseEnter: function onMouseEnter() {
return setIsHovering(true);
},
onMouseLeave: function onMouseLeave() {
return setIsHovering(false);
}
}), {}, {
className: "relative overflow-hidden flex items-center justify-start gap-2 w-full text-inherit bg-button-light dark:bg-button-dark",
children: [isEthereum ? jsx(EthereumLogo, {
className: "size-5"
}) : isSolana ? jsx(SolanaLogo, {
className: "size-5"
}) : jsx("span", {
className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
children: "?"
}), jsx("div", {
className: "flex flex-col items-start",
children: isEthereum ? "EVM" : isSolana ? "Solana" : "Unknown"
}), jsx(FontAwesomeIcon, {
className: clsx("absolute transition-all duration-200 text-icon-text-light dark:text-icon-text-dark", isHovering ? "right-4" : "-right-4"),
icon: faChevronRight
})]
}), app.chain);
})
})]
});
}
export { WalletConnectAppChainSelector };
//# sourceMappingURL=WalletConnectAppChainSelector.mjs.map