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