@sky-mavis/tanto-widget/dist/cjs/views/Connect/ConnectWC.cjs

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var react = require('react');
var analytic = require('../../analytic.cjs');
var TransitionedView = require('../../components/animated-containers/TransitionedView.cjs');
var Box = require('../../components/box/Box.cjs');
var CopyButton = require('../../components/copy-button/CopyButton.cjs');
var GetWalletCTA = require('../../components/get-wallet-cta/GetWalletCTA.cjs');
var WCQRCode = require('../../components/qr-code/WCQRCode.cjs');
var index$1 = require('../../constants/index.cjs');
var useWalletConnectUri = require('../../hooks/useWalletConnectUri.cjs');
var useWidgetConnect = require('../../hooks/useWidgetConnect.cjs');
var connect = require('../../types/connect.cjs');
var index = require('../../utils/index.cjs');
var openWindow = require('../../utils/openWindow.cjs');
var ConnectLayout = require('./components/ConnectLayout.cjs');
var ScanGuideline = require('./components/ScanGuideline.cjs');

const ScanQRCode = ({
  uri
}) => {
  return jsxRuntime.jsxs(Box.Box, {
    vertical: true,
    align: "center",
    justify: "center",
    gap: 20,
    pt: 20,
    children: [jsxRuntime.jsxs(Box.Box, {
      vertical: true,
      align: "center",
      justify: "center",
      gap: 16,
      children: [jsxRuntime.jsx(CopyButton.CopyButton, {
        value: uri,
        children: "Copy link"
      }), jsxRuntime.jsx(WCQRCode.WCQRCode, {
        value: uri
      }), jsxRuntime.jsx(ScanGuideline.ScanGuideline, {})]
    }), jsxRuntime.jsx(GetWalletCTA.GetWalletCTA, {})]
  });
};
function ConnectWC() {
  const mobile = index.isMobile();
  const {
    selectedWallet,
    selectedConnector
  } = useWidgetConnect.useWidgetConnect();
  const {
    uri,
    status,
    generateConnectUri,
    error
  } = useWalletConnectUri.useWalletConnectUri({
    connector: selectedConnector,
    onReceiveDisplayUri: uri => {
      if (mobile) openWindow.openWindow(index.generateRoninMobileWCLink(uri, index$1.RONIN_WALLET_APP_DEEPLINK));
    }
  });
  react.useEffect(() => {
    analytic.analytic.sendEvent('wallet_connect_attempt', {
      chain_id: selectedConnector?.chainId,
      wallet_type: selectedConnector?.name
    });
  }, [selectedConnector]);
  react.useEffect(() => {
    if (status === connect.ConnectState.ERROR && error) {
      analytic.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 jsxRuntime.jsx(ConnectLayout.ConnectLayout, {
    status: status,
    wallet: selectedWallet,
    wcUri: uri,
    onRetry: generateConnectUri
  });
  return jsxRuntime.jsx(TransitionedView.TransitionedView, {
    viewKey: status,
    children: status === connect.ConnectState.PENDING ? jsxRuntime.jsx(ScanQRCode, {
      uri: uri
    }) : jsxRuntime.jsx(ConnectLayout.ConnectLayout, {
      status: status,
      wallet: selectedWallet,
      wcUri: uri,
      onRetry: generateConnectUri
    })
  });
}

exports.ConnectWC = ConnectWC;