@sky-mavis/tanto-widget
Version:
Tanto Widget
74 lines • 2.8 kB
JavaScript
import {jsx,jsxs}from'@emotion/react/jsx-runtime';import {useEffect}from'react';import {analytic}from'../../analytic.mjs';import {TransitionedView}from'../../components/animated-containers/TransitionedView.mjs';import {Box}from'../../components/box/Box.mjs';import {CopyButton}from'../../components/copy-button/CopyButton.mjs';import {GetWalletCTA}from'../../components/get-wallet-cta/GetWalletCTA.mjs';import {WCQRCode}from'../../components/qr-code/WCQRCode.mjs';import {RONIN_WALLET_APP_DEEPLINK}from'../../constants/index.mjs';import {useWalletConnectUri}from'../../hooks/useWalletConnectUri.mjs';import {useWidgetConnect}from'../../hooks/useWidgetConnect.mjs';import {ConnectState}from'../../types/connect.mjs';import {isMobile,generateRoninMobileWCLink}from'../../utils/index.mjs';import {openWindow}from'../../utils/openWindow.mjs';import {ConnectLayout}from'./components/ConnectLayout.mjs';import {ScanGuideline}from'./components/ScanGuideline.mjs';const ScanQRCode = ({
uri
}) => {
return jsxs(Box, {
vertical: true,
align: "center",
justify: "center",
gap: 20,
pt: 20,
children: [jsxs(Box, {
vertical: true,
align: "center",
justify: "center",
gap: 16,
children: [jsx(CopyButton, {
value: uri,
children: "Copy link"
}), jsx(WCQRCode, {
value: uri
}), jsx(ScanGuideline, {})]
}), jsx(GetWalletCTA, {})]
});
};
function ConnectWC() {
const mobile = isMobile();
const {
selectedWallet,
selectedConnector
} = useWidgetConnect();
const {
uri,
status,
generateConnectUri,
error
} = useWalletConnectUri({
connector: selectedConnector,
onReceiveDisplayUri: uri => {
if (mobile) openWindow(generateRoninMobileWCLink(uri, RONIN_WALLET_APP_DEEPLINK));
}
});
useEffect(() => {
analytic.sendEvent('wallet_connect_attempt', {
chain_id: selectedConnector?.chainId,
wallet_type: selectedConnector?.name
});
}, [selectedConnector]);
useEffect(() => {
if (status === ConnectState.ERROR && error) {
analytic.sendEvent('wallet_connect_fail', {
chain_id: selectedConnector?.chainId,
wallet_type: selectedWallet?.name,
error_reason: error.message
});
}
}, [status, error, selectedConnector, selectedWallet]);
if (!selectedWallet) return null;
if (mobile) return jsx(ConnectLayout, {
status: status,
wallet: selectedWallet,
wcUri: uri,
onRetry: generateConnectUri
});
return jsx(TransitionedView, {
viewKey: status,
children: status === ConnectState.PENDING ? jsx(ScanQRCode, {
uri: uri
}) : jsx(ConnectLayout, {
status: status,
wallet: selectedWallet,
wcUri: uri,
onRetry: generateConnectUri
})
});
}export{ConnectWC};