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

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
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 AnimatedQRCode = require('../../components/qr-code/AnimatedQRCode.cjs');
var constants = require('../../constants.cjs');
var useWidgetConnect = require('../../contexts/widget-connect/useWidgetConnect.cjs');
var useWalletConnectUri = require('../../hooks/useWalletConnectUri.cjs');
var connect = require('../../types/connect.cjs');
var openWindow = require('../../utils/openWindow.cjs');
var url = require('../../utils/url.cjs');
var userAgent = require('../../utils/userAgent.cjs');
var ConnectLayout = require('./components/ConnectLayout.cjs');
var ScanGuideline = require('./components/ScanGuideline.cjs');

function 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(AnimatedQRCode.AnimatedQRCode, {
        value: uri
      }), jsxRuntime.jsx(ScanGuideline.ScanGuideline, {})]
    }), jsxRuntime.jsx(GetWalletCTA.GetWalletCTA, {})]
  });
}
function ConnectWC() {
  const mobile = userAgent.isMobile();
  const {
    selectedWallet,
    selectedConnector
  } = useWidgetConnect.useWidgetConnect();
  const {
    uri,
    status,
    generateConnectUri
  } = useWalletConnectUri.useWalletConnectUri({
    connector: selectedConnector,
    onReceiveDisplayUri: uri => {
      if (mobile) openWindow.openWindow(url.generateRoninMobileWCLink(uri, constants.RONIN_WALLET_APP_DEEPLINK));
    }
  });
  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.CONNECTING ? jsxRuntime.jsx(ScanQRCode, {
      uri: uri
    }) : jsxRuntime.jsx(ConnectLayout.ConnectLayout, {
      status: status,
      wallet: selectedWallet,
      wcUri: uri,
      onRetry: generateConnectUri
    })
  });
}

exports.ConnectWC = ConnectWC;