@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
171 lines (168 loc) • 7.54 kB
JavaScript
import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../_virtual/_rollupPluginBabelHelpers.mjs';
import { TurnkeyError, TurnkeyErrorCodes } from '@turnkey/sdk-types';
import { useState, useEffect, useRef, useCallback } from 'react';
import { WalletInterfaceType } from '@turnkey/core';
var SESSION_WARNING_THRESHOLD_MS = 60 * 1000; // 1 minute in milliseconds
var useDebouncedCallback = function useDebouncedCallback(fn) {
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
var timer = useRef(null);
var fnRef = useRef(fn);
fnRef.current = fn;
return useCallback(function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(function () {
fnRef.current.apply(fnRef, args);
timer.current = null;
}, wait);
}, [wait]);
};
var isValidSession = function isValidSession(session) {
return (session === null || session === void 0 ? void 0 : session.expiry) !== undefined && session.expiry * 1000 > Date.now();
};
function withTurnkeyErrorHandling(_x, _x2, _x3) {
return _withTurnkeyErrorHandling.apply(this, arguments);
}
// Custom hook to get the current screen size
function _withTurnkeyErrorHandling() {
_withTurnkeyErrorHandling = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fn, sessionExpireFn, callbacks) {
var fallbackMessage,
fallbackCode,
_callbacks$onError2,
tkError,
_callbacks$onError,
_args = arguments,
_t;
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
fallbackMessage = _args.length > 3 && _args[3] !== undefined ? _args[3] : "An unknown error occurred";
fallbackCode = _args.length > 4 && _args[4] !== undefined ? _args[4] : TurnkeyErrorCodes.UNKNOWN;
_context.p = 1;
_context.n = 2;
return fn();
case 2:
return _context.a(2, _context.v);
case 3:
_context.p = 3;
_t = _context.v;
if (!(_t instanceof TurnkeyError)) {
_context.n = 7;
break;
}
tkError = _t;
if (!(tkError.code === TurnkeyErrorCodes.SESSION_EXPIRED)) {
_context.n = 6;
break;
}
if (!sessionExpireFn) {
_context.n = 5;
break;
}
_context.n = 4;
return sessionExpireFn();
case 4:
_context.n = 6;
break;
case 5:
throw new TurnkeyError("SESSION_EXPIRED received without sessionExpireFn handler", TurnkeyErrorCodes.INTERNAL_ERROR, _t);
case 6:
// skip onError for WalletConnect expired errors
if (tkError.code !== TurnkeyErrorCodes.WALLET_CONNECT_EXPIRED) {
callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError = callbacks.onError) === null || _callbacks$onError === void 0 ? void 0 : _callbacks$onError.call(callbacks, tkError);
}
throw tkError;
case 7:
// we wrap non-Turnkey errors
tkError = new TurnkeyError(fallbackMessage, fallbackCode, _t);
callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError2 = callbacks.onError) === null || _callbacks$onError2 === void 0 ? void 0 : _callbacks$onError2.call(callbacks, tkError);
throw tkError;
case 8:
return _context.a(2);
}
}, _callee, null, [[1, 3]]);
}));
return _withTurnkeyErrorHandling.apply(this, arguments);
}
function useScreenSize() {
var _useState = useState(typeof window !== "undefined" ? window.innerWidth : 1024),
_useState2 = _slicedToArray(_useState, 2),
width = _useState2[0],
setWidth = _useState2[1];
var _useState3 = useState(typeof window !== "undefined" ? window.innerHeight : 768),
_useState4 = _slicedToArray(_useState3, 2),
height = _useState4[0],
setHeight = _useState4[1];
useEffect(function () {
var handleResize = function handleResize() {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};
window.addEventListener("resize", handleResize);
return function () {
return window.removeEventListener("resize", handleResize);
};
}, []);
return {
width: width,
height: height,
// I have no idea why but, Tailwind's responsive design breakpoints do not work. Throughout the modal components, you will see conditional styling using this `isMobile` variable.
// This is fine since we only need to style for 2 screen sizes: mobile and desktop. If anyone can figure out why Tailwind's responsive design breakpoints do not work, please fix it and restyle the components accordingly, changing the `isMobile` to the Tailwind stuff when applicable.
isMobile: width < 640
};
}
function isWalletConnect(wallet) {
return wallet.interfaceType == WalletInterfaceType.WalletConnect;
}
// Finds and returns the WalletConnect provider for the specified chain
function findWalletConnectProvider(walletProviders, chain) {
return walletProviders.find(function (p) {
return p.interfaceType === WalletInterfaceType.WalletConnect && p.chainInfo.namespace === chain;
});
}
function useWalletProviderState() {
var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var _useState5 = useState(initialState),
_useState6 = _slicedToArray(_useState5, 2),
walletProviders = _useState6[0],
setWalletProviders = _useState6[1];
var prevProvidersRef = useRef(initialState);
function isSameWalletProvider(a, b) {
if (a.length !== b.length) return false;
var key = function key(provider) {
var name = provider.info.name;
var namespace = provider.chainInfo.namespace;
var interfaceType = provider.interfaceType;
var connectedAddresses = _toConsumableArray(provider.connectedAddresses).map(function (x) {
return x.toLowerCase();
}).sort().join(",");
var uri = provider.uri || "";
return "".concat(namespace, "|").concat(interfaceType, "|").concat(name, "|").concat(connectedAddresses, "|").concat(uri);
};
var A = a.map(key).sort();
var B = b.map(key).sort();
for (var i = 0; i < A.length; i++) if (A[i] !== B[i]) return false;
return true;
}
var updateWalletProviders = useCallback(function (newProviders) {
if (!isSameWalletProvider(prevProvidersRef.current, newProviders)) {
prevProvidersRef.current = newProviders;
setWalletProviders(newProviders);
}
// we do nothing if the wallet providers are the same
}, []);
return [walletProviders, updateWalletProviders];
}
function mergeWalletsWithoutDuplicates(existingWallets, newWallets) {
var existingWalletIds = new Set(existingWallets.map(function (w) {
return w.walletId;
}));
var uniqueNewWallets = newWallets.filter(function (w) {
return !existingWalletIds.has(w.walletId);
});
return [].concat(_toConsumableArray(existingWallets), _toConsumableArray(uniqueNewWallets));
}
export { SESSION_WARNING_THRESHOLD_MS, findWalletConnectProvider, isValidSession, isWalletConnect, mergeWalletsWithoutDuplicates, useDebouncedCallback, useScreenSize, useWalletProviderState, withTurnkeyErrorHandling };
//# sourceMappingURL=utils.mjs.map