@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
311 lines (308 loc) • 12.9 kB
JavaScript
import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { useModal } from '../../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../../providers/client/Hook.mjs';
import { ExternalWalletChainSelector } from './ExternalWalletChainSelector.mjs';
import { DesktopWalletConnectScreen } from './DesktopWalletConnectScreen.mjs';
import { DisconnectWalletScreen } from './DisconnectWalletScreen.mjs';
import { MobileWalletConnectScreen } from './MobileWalletConnectScreen.mjs';
import { ShowAllWalletsScreen } from './ShowAllWalletsScreen.mjs';
import { WalletSelectorMode } from '../../../types/base.mjs';
/**
* Orchestrates the WalletConnect connection flow.
*
* Desktop flow: Chain selector → QR code screen
* Mobile flow: App selector → Deep link screen (with QR fallback)
*/
function WalletConnectFlow(props) {
var providers = props.providers,
mode = props.mode,
sessionKey = props.sessionKey,
onDisconnect = props.onDisconnect;
var _useModal = useModal(),
pushPage = _useModal.pushPage,
popPage = _useModal.popPage,
isMobile = _useModal.isMobile;
var _useTurnkey = useTurnkey(),
connectWalletAccount = _useTurnkey.connectWalletAccount,
disconnectWalletAccount = _useTurnkey.disconnectWalletAccount,
loginOrSignupWithWallet = _useTurnkey.loginOrSignupWithWallet;
var isConnectMode = mode === WalletSelectorMode.Connect;
// Check if any provider in the group is already connected
var isConnected = isConnectMode && providers.some(function (p) {
var _p$connectedAddresses;
return ((_p$connectedAddresses = p.connectedAddresses) === null || _p$connectedAddresses === void 0 ? void 0 : _p$connectedAddresses.length) > 0;
});
// ─────────────────────────────────────────────────────────────────────────────
// WalletConnect action handlers
// ─────────────────────────────────────────────────────────────────────────────
var handleAction = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(provider) {
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
if (!(mode === WalletSelectorMode.Auth)) {
_context.n = 2;
break;
}
_context.n = 1;
return loginOrSignupWithWallet(_objectSpread2({
walletProvider: provider
}, sessionKey && {
sessionKey: sessionKey
}));
case 1:
_context.n = 3;
break;
case 2:
_context.n = 3;
return connectWalletAccount(provider);
case 3:
return _context.a(2);
}
}, _callee);
}));
return function handleAction(_x) {
return _ref.apply(this, arguments);
};
}();
var handleDisconnect = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(provider) {
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
_context2.n = 1;
return disconnectWalletAccount(provider);
case 1:
return _context2.a(2);
}
}, _callee2);
}));
return function handleDisconnect(_x2) {
return _ref2.apply(this, arguments);
};
}();
/** Push the DisconnectWalletScreen for a connected provider */
var pushDisconnectScreen = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(provider) {
return _regenerator().w(function (_context4) {
while (1) switch (_context4.n) {
case 0:
if (!onDisconnect) {
_context4.n = 2;
break;
}
_context4.n = 1;
return onDisconnect(provider);
case 1:
return _context4.a(2);
case 2:
pushPage({
key: "Disconnect ".concat(provider.info.name),
content: jsx(DisconnectWalletScreen, {
provider: provider,
onDisconnect: function () {
var _onDisconnect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(p) {
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
_context3.n = 1;
return handleDisconnect(p);
case 1:
popPage();
case 2:
return _context3.a(2);
}
}, _callee3);
}));
function onDisconnect(_x4) {
return _onDisconnect.apply(this, arguments);
}
return onDisconnect;
}()
}),
showTitle: false
});
case 3:
return _context4.a(2);
}
}, _callee4);
}));
return function pushDisconnectScreen(_x3) {
return _ref3.apply(this, arguments);
};
}();
// ─────────────────────────────────────────────────────────────────────────────
// Screen navigation helpers
// ─────────────────────────────────────────────────────────────────────────────
var pushDesktopQRCodeScreen = function pushDesktopQRCodeScreen(provider, onSelectAllWallets) {
pushPage({
key: "Connect WalletConnect",
content: jsx(DesktopWalletConnectScreen, {
provider: provider,
onAction: handleAction,
onDisconnect: handleDisconnect,
onSelectAllWallets: onSelectAllWallets
})
});
};
var pushDesktopChainSelector = function pushDesktopChainSelector(onSelectAllWallets) {
pushPage({
key: "Select chain",
content: jsx(ExternalWalletChainSelector, {
providers: providers,
onDisconnect: isConnectMode ? pushDisconnectScreen : undefined,
onSelect: function () {
var _onSelect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(provider) {
return _regenerator().w(function (_context5) {
while (1) switch (_context5.n) {
case 0:
return _context5.a(2, pushDesktopQRCodeScreen(provider, onSelectAllWallets));
}
}, _callee5);
}));
function onSelect(_x5) {
return _onSelect.apply(this, arguments);
}
return onSelect;
}()
})
});
};
/** Mobile: Deep link screen to open wallet app */
var pushMobileDeepLinkScreen = function pushMobileDeepLinkScreen(provider) {
pushPage({
key: "Open app",
content: jsx(MobileWalletConnectScreen, {
provider: provider,
onConnect: function () {
var _onConnect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(p) {
return _regenerator().w(function (_context6) {
while (1) switch (_context6.n) {
case 0:
_context6.n = 1;
return connectWalletAccount(p);
case 1:
return _context6.a(2);
}
}, _callee6);
}));
function onConnect(_x6) {
return _onConnect.apply(this, arguments);
}
return onConnect;
}(),
onSign: mode === WalletSelectorMode.Auth ? (/*#__PURE__*/function () {
var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(p) {
return _regenerator().w(function (_context7) {
while (1) switch (_context7.n) {
case 0:
_context7.n = 1;
return loginOrSignupWithWallet(_objectSpread2({
walletProvider: p
}, sessionKey && {
sessionKey: sessionKey
}));
case 1:
return _context7.a(2);
}
}, _callee7);
}));
return function (_x7) {
return _ref4.apply(this, arguments);
};
}()) : undefined,
onSelectQRCode: function () {
var _onSelectQRCode = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(chain) {
var chainProvider;
return _regenerator().w(function (_context8) {
while (1) switch (_context8.n) {
case 0:
// Fallback to QR code if deep link doesn't work
chainProvider = providers.find(function (p) {
return p.chainInfo.namespace === chain;
});
pushDesktopQRCodeScreen(chainProvider);
case 1:
return _context8.a(2);
}
}, _callee8);
}));
function onSelectQRCode(_x8) {
return _onSelectQRCode.apply(this, arguments);
}
return onSelectQRCode;
}()
})
});
};
/** Mobile: Show all WalletConnect-compatible apps */
var pushMobileAppSelector = function pushMobileAppSelector() {
pushPage({
key: "Connect WalletConnect",
content: jsx(ShowAllWalletsScreen, {
onSelect: function () {
var _onSelect2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(provider) {
return _regenerator().w(function (_context9) {
while (1) switch (_context9.n) {
case 0:
return _context9.a(2, pushMobileDeepLinkScreen(provider));
}
}, _callee9);
}));
function onSelect(_x9) {
return _onSelect2.apply(this, arguments);
}
return onSelect;
}(),
onSelectQRCode: function () {
var _onSelectQRCode2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
return _regenerator().w(function (_context0) {
while (1) switch (_context0.n) {
case 0:
return _context0.a(2, pushDesktopChainSelector());
}
}, _callee0);
}));
function onSelectQRCode() {
return _onSelectQRCode2.apply(this, arguments);
}
return onSelectQRCode;
}()
})
});
};
// ─────────────────────────────────────────────────────────────────────────────
// Flow selection
// ─────────────────────────────────────────────────────────────────────────────
useEffect(function () {
// Mobile flow: App list -> deep link to wallet app
// Desktop flow: Chain selector -> QR code
//
// Exception: For "Connect Wallet" screen (disconnect possible),
// always use desktop flow since it shows connection status.
var useDesktopFlow = !isMobile || isConnected;
// Pop the WalletConnectFlow page itself so the back button on the next
// screen returns to the wallet list, not this empty orchestrator page.
popPage();
if (useDesktopFlow) {
pushDesktopChainSelector(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
return _regenerator().w(function (_context1) {
while (1) switch (_context1.n) {
case 0:
pushMobileAppSelector();
case 1:
return _context1.a(2);
}
}, _callee1);
})));
} else {
pushMobileAppSelector();
}
}, []);
// This component doesn't render anything - it just orchestrates navigation
return null;
}
export { WalletConnectFlow };
//# sourceMappingURL=WalletConnectFlow.mjs.map