@sky-mavis/tanto-widget
Version:
Tanto Widget
81 lines (77 loc) • 2.78 kB
JavaScript
'use strict';
var jsxRuntime = require('@emotion/react/jsx-runtime');
var react = require('react');
var analytic = require('../../../../analytic.cjs');
var Box = require('../../../../components/box/Box.cjs');
var useWidgetConnect = require('../../../../contexts/widget-connect/useWidgetConnect.cjs');
var useWidgetRouter = require('../../../../contexts/widget-router/useWidgetRouter.cjs');
var route = require('../../../../types/route.cjs');
var useWalletState = require('./useWalletState.cjs');
var WalletItem_styles = require('./WalletItem.styles.cjs');
var WalletItemBadge = require('./WalletItemBadge.cjs');
function WalletItem({
wallet
}) {
const {
id,
name,
displayOptions = {},
isInstalled,
homepage,
connector
} = wallet;
const {
showRoninBadge,
description
} = displayOptions;
const {
setSelectedWallet
} = useWidgetConnect.useWidgetConnect();
const {
goTo
} = useWidgetRouter.useWidgetRouter();
const walletState = useWalletState.useWalletState(wallet);
const navigateToWallet = react.useCallback(() => {
if (!isInstalled) {
window.open(homepage, '_blank', 'noopener,noreferrer');
return;
}
if (walletState.isMarkedConnected) return;
setSelectedWallet(wallet);
analytic.analytic.sendEvent('wallet_open', {
wallet_id: id,
is_extension_detected: walletState.isInjected,
wallet_type: name,
chain_id: connector?.chainId
});
const route$1 = walletState.isWCWallet ? route.Route.CONNECT_WC : route.Route.CONNECT_INJECTOR;
goTo(route$1, {
title: name
});
}, [isInstalled, homepage, walletState.isMarkedConnected, setSelectedWallet, wallet, id, walletState.isWCWallet, walletState.isInjected, name, connector?.chainId, goTo]);
return jsxRuntime.jsxs(WalletItem_styles.Container, {
role: "button",
highlight: displayOptions.highlightBackground,
disabled: walletState.isMarkedConnected,
onClick: navigateToWallet,
children: [walletState.walletLogo && jsxRuntime.jsxs(WalletItem_styles.WalletLogoWrapper, {
children: [walletState.walletLogo, showRoninBadge && jsxRuntime.jsx(WalletItem_styles.RoninBadge, {
className: "ronin-badge"
})]
}), jsxRuntime.jsxs(Box.Box, {
vertical: true,
flex: 1,
children: [jsxRuntime.jsx(WalletItem_styles.WalletName, {
disabled: walletState.isMarkedConnected,
children: name
}), jsxRuntime.jsx(WalletItem_styles.WalletDescription, {
children: description
})]
}), jsxRuntime.jsx(WalletItemBadge.WalletItemBadge, {
isConnected: walletState.isMarkedConnected,
isDetected: walletState.isInjected,
highlightText: walletState.highlightContent
})]
});
}
exports.WalletItem = WalletItem;