@turnkey/react-wallet-kit 2.7.1 → 2.8.0

package/dist/providers/client/Provider.mjs

@@ -13,7 +13,7 @@ import { useWalletProviderState, useDebouncedCallback, isValidSession, withTurnk
 import { clearKeys, clearAll, setCappedTimeoutInMap, clearKey, setTimeoutInMap } from '../../utils/timers.mjs';
 import { resetPasskeyScope, DEFAULT_SESSION_EXPIRATION_IN_SECONDS, OtpType, applyPasskeyScope, TurnkeyClient, Chain, WalletInterfaceType, getAuthProxyConfig, getClientParams, WalletSource, buildSecondaryOauthProviders, buildSecondaryOidcClaims } from '@turnkey/core';
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { TurnkeyError, TurnkeyErrorCodes, TurnkeyNetworkError, AuthAction, OAuthProviders, FiatOnRampCryptoCurrency, FiatOnRampBlockchainNetwork } from '@turnkey/sdk-types';
+import { TurnkeyError, TurnkeyErrorCodes, TurnkeyNetworkError, AuthAction, OAuthProviders } from '@turnkey/sdk-types';
 import { useModal } from '../modal/Hook.mjs';
 import { AuthState, ClientState, AuthMethod, ExportType, ImportType } from '../../types/base.mjs';
 import { AuthComponent } from '../../components/auth/index.mjs';
@@ -35,8 +35,8 @@ import { OtpVerification } from '../../components/auth/OTP.mjs';
 import { RemoveEmail } from '../../components/user/RemoveEmail.mjs';
 import { RemovePhoneNumber } from '../../components/user/RemovePhoneNumber.mjs';
 import { VerifyPage } from '../../components/verify/Verify.mjs';
-import { OnRampPage } from '../../components/onramp/OnRamp.mjs';
-import { CoinbaseLogo, MoonPayLogo } from '../../components/design/Svg.mjs';
+import { OffRampPage } from '../../components/funding/OffRamp.mjs';
+import { OnRampProviders, OnRampPage } from '../../components/funding/OnRamp.mjs';
 import { SendTransactionPage } from '../../components/send-transaction/SendTransaction.mjs';
 import { getChainLogo } from '../../components/send-transaction/helpers.mjs';
 import { Turnstile } from '../../components/auth/Turnstile.mjs';
@@ -945,11 +945,11 @@ var ClientProvider = function ClientProvider(_ref) {
    * @throws {TurnkeyError} If an error occurs while clearing the timers.
    */
   function _initializeWalletProviderListeners() {
-    _initializeWalletProviderListeners = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee149(walletProviders, onUpdateState) {
+    _initializeWalletProviderListeners = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee148(walletProviders, onUpdateState) {
       var _masterConfig$walletC12, _masterConfig$walletC13, _masterConfig$walletC14, _masterConfig$walletC15;
       var cleanups, nativeOnly, ethProviders, solProviders, wcProviders, wcProvider, attachEthereumListeners, attachSolanaListeners, _wcProvider$provider, _wcProvider$provider$, standardEvents, unsubscribe;
-      return _regenerator().w(function (_context149) {
-        while (1) switch (_context149.n) {
+      return _regenerator().w(function (_context148) {
+        while (1) switch (_context148.n) {
           case 0:
             attachSolanaListeners = function _attachSolanaListener(provider, onUpdateState) {
               var _provider$features;
@@ -957,19 +957,19 @@ var ClientProvider = function ClientProvider(_ref) {
               var walletEvents = provider === null || provider === void 0 ? void 0 : (_provider$features = provider.features) === null || _provider$features === void 0 ? void 0 : _provider$features["standard:events"];
               if (walletEvents !== null && walletEvents !== void 0 && walletEvents.on) {
                 var offChange = walletEvents.on("change", /*#__PURE__*/function () {
-                  var _ref179 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee147(_evt) {
-                    return _regenerator().w(function (_context147) {
-                      while (1) switch (_context147.n) {
+                  var _ref178 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee146(_evt) {
+                    return _regenerator().w(function (_context146) {
+                      while (1) switch (_context146.n) {
                         case 0:
-                          _context147.n = 1;
+                          _context146.n = 1;
                           return onUpdateState();
                         case 1:
-                          return _context147.a(2);
+                          return _context146.a(2);
                       }
-                    }, _callee147);
+                    }, _callee146);
                   }));
-                  return function (_x120) {
-                    return _ref179.apply(this, arguments);
+                  return function (_x121) {
+                    return _ref178.apply(this, arguments);
                   };
                 }());
                 cleanups.push(offChange);
@@ -983,31 +983,31 @@ var ClientProvider = function ClientProvider(_ref) {
             attachEthereumListeners = function _attachEthereumListen(provider, onUpdateState) {
               if (typeof provider.on !== "function") return;
               var handleChainChanged = /*#__PURE__*/function () {
-                var _ref177 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee145(_chainId) {
-                  return _regenerator().w(function (_context145) {
-                    while (1) switch (_context145.n) {
+                var _ref176 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee144(_chainId) {
+                  return _regenerator().w(function (_context144) {
+                    while (1) switch (_context144.n) {
                       case 0:
-                        return _context145.a(2, onUpdateState());
+                        return _context144.a(2, onUpdateState());
                     }
-                  }, _callee145);
+                  }, _callee144);
                 }));
-                return function handleChainChanged(_x118) {
-                  return _ref177.apply(this, arguments);
+                return function handleChainChanged(_x119) {
+                  return _ref176.apply(this, arguments);
                 };
               }();
               var handleAccountsChanged = /*#__PURE__*/function () {
-                var _ref178 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee146(accounts) {
-                  return _regenerator().w(function (_context146) {
-                    while (1) switch (_context146.n) {
+                var _ref177 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee145(accounts) {
+                  return _regenerator().w(function (_context145) {
+                    while (1) switch (_context145.n) {
                       case 0:
                         if (accounts.length === 0) onUpdateState();
                       case 1:
-                        return _context146.a(2);
+                        return _context145.a(2);
                     }
-                  }, _callee146);
+                  }, _callee145);
                 }));
-                return function handleAccountsChanged(_x119) {
-                  return _ref178.apply(this, arguments);
+                return function handleAccountsChanged(_x120) {
+                  return _ref177.apply(this, arguments);
                 };
               }();
               var handleDisconnect = function handleDisconnect() {
@@ -1023,10 +1023,10 @@ var ClientProvider = function ClientProvider(_ref) {
               };
             };
             if (!(walletProviders.length === 0)) {
-              _context149.n = 1;
+              _context148.n = 1;
               break;
             }
-            return _context149.a(2, function () {});
+            return _context148.a(2, function () {});
           case 1:
             cleanups = []; // we only want to initialize these listeners for connected walletProviders
             nativeOnly = function nativeOnly(provider) {
@@ -1064,82 +1064,82 @@ var ClientProvider = function ClientProvider(_ref) {
               if (standardEvents !== null && standardEvents !== void 0 && standardEvents.on) {
                 if (standardEvents !== null && standardEvents !== void 0 && standardEvents.on) {
                   unsubscribe = standardEvents.on("change", /*#__PURE__*/function () {
-                    var _ref180 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee148(evt) {
+                    var _ref179 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee147(evt) {
                       var _callbacks$onError12, providers, currentSession, _wcProviders, wcWallets;
-                      return _regenerator().w(function (_context148) {
-                        while (1) switch (_context148.n) {
+                      return _regenerator().w(function (_context147) {
+                        while (1) switch (_context147.n) {
                           case 0:
                             if (!((evt === null || evt === void 0 ? void 0 : evt.type) === "proposalExpired")) {
-                              _context148.n = 1;
+                              _context147.n = 1;
                               break;
                             }
                             debouncedFetchWalletProviders();
-                            return _context148.a(2);
+                            return _context147.a(2);
                           case 1:
                             if (!((evt === null || evt === void 0 ? void 0 : evt.type) === "failed")) {
-                              _context148.n = 2;
+                              _context147.n = 2;
                               break;
                             }
                             debouncedFetchWalletProviders();
                             callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError12 = callbacks.onError) === null || _callbacks$onError12 === void 0 ? void 0 : _callbacks$onError12.call(callbacks, new TurnkeyError("WalletConnect initialization failed: ".concat(evt.error || "Unknown error"), TurnkeyErrorCodes.WALLET_CONNECT_INITIALIZATION_ERROR, evt.error));
-                            return _context148.a(2);
+                            return _context147.a(2);
                           case 2:
                             if (!((evt === null || evt === void 0 ? void 0 : evt.type) === "initialized")) {
-                              _context148.n = 7;
+                              _context147.n = 7;
                               break;
                             }
-                            _context148.n = 3;
+                            _context147.n = 3;
                             return fetchWalletProviders();
                           case 3:
-                            providers = _context148.v;
-                            _context148.n = 4;
+                            providers = _context147.v;
+                            _context147.n = 4;
                             return getSession();
                           case 4:
-                            currentSession = _context148.v;
+                            currentSession = _context147.v;
                             if (!currentSession) {
-                              _context148.n = 6;
+                              _context147.n = 6;
                               break;
                             }
                             _wcProviders = providers === null || providers === void 0 ? void 0 : providers.filter(function (p) {
                               return p.interfaceType === WalletInterfaceType.WalletConnect;
                             });
-                            _context148.n = 5;
+                            _context147.n = 5;
                             return fetchWallets({
                               walletProviders: _wcProviders,
                               connectedOnly: true
                             });
                           case 5:
-                            wcWallets = _context148.v;
+                            wcWallets = _context147.v;
                             if (wcWallets.length > 0) {
                               setWallets(function (prev) {
                                 return mergeWalletsWithoutDuplicates(prev, wcWallets);
                               });
                             }
                           case 6:
-                            return _context148.a(2);
+                            return _context147.a(2);
                           case 7:
-                            _context148.n = 8;
+                            _context147.n = 8;
                             return onUpdateState();
                           case 8:
-                            return _context148.a(2);
+                            return _context147.a(2);
                         }
-                      }, _callee148);
+                      }, _callee147);
                     }));
-                    return function (_x121) {
-                      return _ref180.apply(this, arguments);
+                    return function (_x122) {
+                      return _ref179.apply(this, arguments);
                     };
                   }());
                   cleanups.push(unsubscribe);
                 }
               }
             }
-            return _context149.a(2, function () {
+            return _context148.a(2, function () {
               cleanups.forEach(function (remove) {
                 return remove();
               });
             });
         }
-      }, _callee149);
+      }, _callee148);
     }));
     return _initializeWalletProviderListeners.apply(this, arguments);
   }
@@ -6845,266 +6845,151 @@ var ClientProvider = function ClientProvider(_ref) {
     };
   }(), [ethSendErc20Transfer, getSession, pollTransactionStatus, pushPage]);
   var handleOnRamp = useCallback(/*#__PURE__*/function () {
-    var _ref169 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee140(params) {
-      var _walletAccount$addres;
-      var walletAccount, fiatCurrencyAmount, fiatCurrencyCode, paymentMethod, countrySubdivisionCode, urlForSignature, countryCode, _params$onrampProvide, onrampProvider, _params$sandboxMode, sandboxMode, _params$successPageDu7, successPageDuration, _params$openInNewTab, openInNewTab, s, organizationId, cryptoCurrencyCode, network, openNewTab, _t37;
-      return _regenerator().w(function (_context140) {
-        while (1) switch (_context140.n) {
+    var _ref169 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee138(params) {
+      var walletAccount, lockedCaip2, lockedCaip19, fiatCurrencyCode, defaultFiatCurrencyAmount, countryCode, countrySubdivisionCode, _params$sandboxMode, sandboxMode, stampWith, successPageDuration, openInNewTab, rpcUrl, s, organizationId;
+      return _regenerator().w(function (_context138) {
+        while (1) switch (_context138.n) {
           case 0:
-            walletAccount = params.walletAccount, fiatCurrencyAmount = params.fiatCurrencyAmount, fiatCurrencyCode = params.fiatCurrencyCode, paymentMethod = params.paymentMethod, countrySubdivisionCode = params.countrySubdivisionCode, urlForSignature = params.urlForSignature, countryCode = params.countryCode, _params$onrampProvide = params.onrampProvider, onrampProvider = _params$onrampProvide === void 0 ? "FIAT_ON_RAMP_PROVIDER_MOONPAY" : _params$onrampProvide, _params$sandboxMode = params.sandboxMode, sandboxMode = _params$sandboxMode === void 0 ? true : _params$sandboxMode, _params$successPageDu7 = params.successPageDuration, successPageDuration = _params$successPageDu7 === void 0 ? 2000 : _params$successPageDu7, _params$openInNewTab = params.openInNewTab, openInNewTab = _params$openInNewTab === void 0 ? false : _params$openInNewTab;
-            _context140.n = 1;
+            walletAccount = params.walletAccount, lockedCaip2 = params.lockedCaip2, lockedCaip19 = params.lockedCaip19, fiatCurrencyCode = params.fiatCurrencyCode, defaultFiatCurrencyAmount = params.defaultFiatCurrencyAmount, countryCode = params.countryCode, countrySubdivisionCode = params.countrySubdivisionCode, _params$sandboxMode = params.sandboxMode, sandboxMode = _params$sandboxMode === void 0 ? true : _params$sandboxMode, stampWith = params.stampWith, successPageDuration = params.successPageDuration, openInNewTab = params.openInNewTab, rpcUrl = params.rpcUrl;
+            _context138.n = 1;
             return getSession();
           case 1:
-            s = _context140.v;
-            organizationId = (params === null || params === void 0 ? void 0 : params.organizationId) || (s === null || s === void 0 ? void 0 : s.organizationId);
+            s = _context138.v;
+            organizationId = params.organizationId || (s === null || s === void 0 ? void 0 : s.organizationId);
             if (organizationId) {
-              _context140.n = 2;
+              _context138.n = 2;
               break;
             }
             throw new TurnkeyError("A session or passed in organization ID is required.", TurnkeyErrorCodes.INVALID_REQUEST);
           case 2:
-            _t37 = true;
-            _context140.n = _t37 === (walletAccount.addressFormat === "ADDRESS_FORMAT_ETHEREUM") ? 3 : _t37 === ((_walletAccount$addres = walletAccount.addressFormat) === null || _walletAccount$addres === void 0 ? void 0 : _walletAccount$addres.includes("ADDRESS_FORMAT_BITCOIN")) ? 4 : _t37 === (walletAccount.addressFormat === "ADDRESS_FORMAT_SOLANA") ? 5 : 6;
-            break;
-          case 3:
-            cryptoCurrencyCode = FiatOnRampCryptoCurrency.ETHEREUM;
-            network = FiatOnRampBlockchainNetwork.ETHEREUM;
-            return _context140.a(3, 7);
-          case 4:
-            throw new TurnkeyError("Fiat on-ramp does not support Bitcoin wallet accounts.", TurnkeyErrorCodes.INVALID_REQUEST);
-          case 5:
-            cryptoCurrencyCode = FiatOnRampCryptoCurrency.SOLANA;
-            network = FiatOnRampBlockchainNetwork.SOLANA;
-            return _context140.a(3, 7);
-          case 6:
-            cryptoCurrencyCode = FiatOnRampCryptoCurrency.ETHEREUM;
-            network = FiatOnRampBlockchainNetwork.ETHEREUM;
-            return _context140.a(3, 7);
-          case 7:
-            openNewTab = openInNewTab || isMobile;
-            cryptoCurrencyCode = params.cryptoCurrencyCode || cryptoCurrencyCode;
-            network = params.network || network;
-            return _context140.a(2, new Promise(function (resolve, reject) {
-              var OnRampContainer = function OnRampContainer() {
-                var _useState15 = useState(false),
-                  _useState16 = _slicedToArray(_useState15, 2),
-                  completed = _useState16[0],
-                  setCompleted = _useState16[1];
-                var pollingRef = useRef(null);
-                var cleanup = function cleanup() {
-                  if (pollingRef.current) {
-                    clearInterval(pollingRef.current);
-                    pollingRef.current = null;
-                  }
-                };
-                useEffect(function () {
-                  return function () {
-                    cleanup();
-                  };
-                }, []);
-                var action = /*#__PURE__*/function () {
-                  var _ref170 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee139() {
-                    var _client$httpClient, onRampWindow, result, popupWidth, popupHeight, left, top, onRampTransactionId, _t36;
-                    return _regenerator().w(function (_context139) {
-                      while (1) switch (_context139.p = _context139.n) {
-                        case 0:
-                          _context139.p = 0;
-                          onRampWindow = null;
-                          if (!openNewTab) {
-                            _context139.n = 1;
-                            break;
-                          }
-                          onRampWindow = window.open("", "_blank");
-                          if (onRampWindow) {
-                            _context139.n = 1;
-                            break;
-                          }
-                          throw new Error("Failed to open On Ramp tab.");
-                        case 1:
-                          _context139.n = 2;
-                          return client === null || client === void 0 ? void 0 : (_client$httpClient = client.httpClient) === null || _client$httpClient === void 0 ? void 0 : _client$httpClient.initFiatOnRamp(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-                            onrampProvider: onrampProvider,
-                            walletAddress: walletAccount.address,
-                            network: network,
-                            cryptoCurrencyCode: cryptoCurrencyCode,
-                            sandboxMode: sandboxMode,
-                            organizationId: organizationId
-                          }, fiatCurrencyCode ? {
-                            fiatCurrencyCode: fiatCurrencyCode
-                          } : {}), fiatCurrencyAmount ? {
-                            fiatCurrencyAmount: fiatCurrencyAmount
-                          } : {}), paymentMethod ? {
-                            paymentMethod: paymentMethod
-                          } : {}), countryCode ? {
-                            countryCode: countryCode
-                          } : {}), countrySubdivisionCode ? {
-                            countrySubdivisionCode: countrySubdivisionCode
-                          } : {}), sandboxMode !== undefined ? {
-                            sandboxMode: sandboxMode
-                          } : {}), urlForSignature ? {
-                            urlForSignature: urlForSignature
-                          } : {}));
-                        case 2:
-                          result = _context139.v;
-                          if (result !== null && result !== void 0 && result.onRampUrl) {
-                            _context139.n = 3;
-                            break;
-                          }
-                          throw new Error("Missing onRampUrl");
-                        case 3:
-                          if (!(openNewTab && onRampWindow)) {
-                            _context139.n = 4;
-                            break;
-                          }
-                          onRampWindow.location.href = result.onRampUrl.toString();
-                          _context139.n = 5;
-                          break;
-                        case 4:
-                          popupWidth = 500;
-                          popupHeight = 600;
-                          left = window.screenX + (window.innerWidth - popupWidth) / 2;
-                          top = window.screenY + (window.innerHeight - popupHeight) / 2;
-                          onRampWindow = window.open(result.onRampUrl.toString(), "_blank", "width=".concat(popupWidth, ",height=").concat(popupHeight, ",top=").concat(top, ",left=").concat(left, ",scrollbars=yes,resizable=yes"));
-                          if (onRampWindow) {
-                            _context139.n = 5;
-                            break;
-                          }
-                          throw new Error("Failed to open On Ramp window.");
-                        case 5:
-                          onRampTransactionId = result.onRampTransactionId;
-                          if (onRampTransactionId) {
-                            _context139.n = 6;
-                            break;
-                          }
-                          throw new Error("No onRampTransactionId returned");
-                        case 6:
-                          return _context139.a(2, new Promise(function (resolveAction, rejectAction) {
-                            pollingRef.current = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee138() {
-                              var _onRampWindow, _client$httpClient2, currentUrl, _onRampWindow2, _onRampWindow3, resp, status, _onRampWindow4, _t35;
-                              return _regenerator().w(function (_context138) {
-                                while (1) switch (_context138.p = _context138.n) {
-                                  case 0:
-                                    _context138.p = 0;
-                                    if (!(onrampProvider === "FIAT_ON_RAMP_PROVIDER_COINBASE" && (_onRampWindow = onRampWindow) !== null && _onRampWindow !== void 0 && _onRampWindow.closed)) {
-                                      _context138.n = 1;
-                                      break;
-                                    }
-                                    cleanup();
-                                    rejectAction(new Error("On-ramp popup closed by user"));
-                                    return _context138.a(2);
-                                  case 1:
-                                    currentUrl = "";
-                                    try {
-                                      currentUrl = ((_onRampWindow2 = onRampWindow) === null || _onRampWindow2 === void 0 ? void 0 : _onRampWindow2.location.href) || "";
-                                    } catch (_unused6) {}
-                                    if (!(currentUrl && currentUrl.startsWith(window.location.origin))) {
-                                      _context138.n = 2;
-                                      break;
-                                    }
-                                    cleanup();
-                                    (_onRampWindow3 = onRampWindow) === null || _onRampWindow3 === void 0 ? void 0 : _onRampWindow3.close();
-                                    setCompleted(true);
-                                    resolveAction();
-                                    return _context138.a(2);
-                                  case 2:
-                                    _context138.n = 3;
-                                    return client === null || client === void 0 ? void 0 : (_client$httpClient2 = client.httpClient) === null || _client$httpClient2 === void 0 ? void 0 : _client$httpClient2.getOnRampTransactionStatus({
-                                      transactionId: onRampTransactionId,
-                                      refresh: true
-                                    });
-                                  case 3:
-                                    resp = _context138.v;
-                                    status = resp === null || resp === void 0 ? void 0 : resp.transactionStatus;
-                                    if (["COMPLETED", "FAILED", "CANCELLED"].includes(status !== null && status !== void 0 ? status : "")) {
-                                      cleanup();
-                                      try {
-                                        (_onRampWindow4 = onRampWindow) === null || _onRampWindow4 === void 0 ? void 0 : _onRampWindow4.close();
-                                      } catch (_unused7) {}
-                                      setCompleted(true);
-                                      resolveAction();
-                                    }
-                                    _context138.n = 5;
-                                    break;
-                                  case 4:
-                                    _context138.p = 4;
-                                    _t35 = _context138.v;
-                                    console.warn("Polling error (ignored):", _t35);
-                                  case 5:
-                                    return _context138.a(2);
-                                }
-                              }, _callee138, null, [[0, 4]]);
-                            })), 3000);
-                          }));
-                        case 7:
-                          _context139.p = 7;
-                          _t36 = _context139.v;
-                          cleanup();
-                          throw _t36;
-                        case 8:
-                          return _context139.a(2);
-                      }
-                    }, _callee139, null, [[0, 7]]);
-                  }));
-                  return function action() {
-                    return _ref170.apply(this, arguments);
-                  };
-                }();
-                return jsx(OnRampPage, {
-                  icon: onrampProvider === "FIAT_ON_RAMP_PROVIDER_COINBASE" ? jsx(CoinbaseLogo, {
-                    className: "w-12 h-12"
-                  }) : jsx(MoonPayLogo, {
-                    className: "w-12 h-12"
-                  }),
-                  onrampProvider: onrampProvider,
-                  action: action,
-                  sandboxMode: sandboxMode,
-                  completed: completed,
-                  successPageDuration: successPageDuration,
-                  onSuccess: function onSuccess() {
-                    return resolve();
-                  },
-                  onError: function onError(err) {
-                    return reject(err);
-                  }
-                });
+            return _context138.a(2, new Promise(function (resolve, reject) {
+              var settled = false;
+              var resolveOnce = function resolveOnce() {
+                if (settled) return;
+                settled = true;
+                resolve();
+              };
+              var rejectOnce = function rejectOnce(error) {
+                if (settled) return;
+                settled = true;
+                reject(error);
               };
               pushPage({
-                key: "Fiat OnRamp",
-                content: jsx(OnRampContainer, {}),
-                showTitle: false,
+                key: "Deposit",
+                content: jsx(OnRampPage, {
+                  lockedCaip2: lockedCaip2,
+                  lockedCaip19: lockedCaip19,
+                  walletAccount: walletAccount,
+                  sandboxMode: sandboxMode,
+                  organizationId: organizationId,
+                  stampWith: stampWith,
+                  fiatCurrencyCode: fiatCurrencyCode,
+                  defaultFiatCurrencyAmount: defaultFiatCurrencyAmount,
+                  countryCode: countryCode,
+                  countrySubdivisionCode: countrySubdivisionCode,
+                  openInNewTab: openInNewTab,
+                  successPageDuration: successPageDuration,
+                  rpcUrl: rpcUrl,
+                  onSuccess: resolveOnce,
+                  onError: rejectOnce
+                }),
+                contextProvider: OnRampProviders,
                 preventBack: true,
                 onClose: function onClose() {
-                  return reject(new TurnkeyError("User canceled the onramp process.", TurnkeyErrorCodes.USER_CANCELED));
+                  return rejectOnce(new TurnkeyError("User canceled the onramp process.", TurnkeyErrorCodes.USER_CANCELED));
                 }
               });
             }));
         }
-      }, _callee140);
+      }, _callee138);
     }));
     return function (_x115) {
       return _ref169.apply(this, arguments);
     };
-  }(), [getSession, client, pushPage]);
+  }(), [getSession, pushPage]);
+  var handleOffRamp = useCallback(/*#__PURE__*/function () {
+    var _ref170 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee139(params) {
+      var walletAccount, lockedCaip2, lockedCaip19, fiatCurrencyCode, defaultCryptoAmount, countryCode, countrySubdivisionCode, _params$sandboxMode2, sandboxMode, stampWith, successPageDuration, openInNewTab, rpcUrl, s, organizationId;
+      return _regenerator().w(function (_context139) {
+        while (1) switch (_context139.n) {
+          case 0:
+            walletAccount = params.walletAccount, lockedCaip2 = params.lockedCaip2, lockedCaip19 = params.lockedCaip19, fiatCurrencyCode = params.fiatCurrencyCode, defaultCryptoAmount = params.defaultCryptoAmount, countryCode = params.countryCode, countrySubdivisionCode = params.countrySubdivisionCode, _params$sandboxMode2 = params.sandboxMode, sandboxMode = _params$sandboxMode2 === void 0 ? true : _params$sandboxMode2, stampWith = params.stampWith, successPageDuration = params.successPageDuration, openInNewTab = params.openInNewTab, rpcUrl = params.rpcUrl;
+            _context139.n = 1;
+            return getSession();
+          case 1:
+            s = _context139.v;
+            organizationId = params.organizationId || (s === null || s === void 0 ? void 0 : s.organizationId);
+            if (organizationId) {
+              _context139.n = 2;
+              break;
+            }
+            throw new TurnkeyError("A session or passed in organization ID is required.", TurnkeyErrorCodes.INVALID_REQUEST);
+          case 2:
+            return _context139.a(2, new Promise(function (resolve, reject) {
+              var settled = false;
+              var resolveOnce = function resolveOnce() {
+                if (settled) return;
+                settled = true;
+                resolve();
+              };
+              var rejectOnce = function rejectOnce(error) {
+                if (settled) return;
+                settled = true;
+                reject(error);
+              };
+              pushPage({
+                key: "Withdraw",
+                content: jsx(OffRampPage, {
+                  lockedCaip2: lockedCaip2,
+                  lockedCaip19: lockedCaip19,
+                  walletAccount: walletAccount,
+                  sandboxMode: sandboxMode,
+                  organizationId: organizationId,
+                  stampWith: stampWith,
+                  fiatCurrencyCode: fiatCurrencyCode,
+                  defaultCryptoAmount: defaultCryptoAmount,
+                  countryCode: countryCode,
+                  countrySubdivisionCode: countrySubdivisionCode,
+                  openInNewTab: openInNewTab,
+                  successPageDuration: successPageDuration,
+                  rpcUrl: rpcUrl,
+                  onSuccess: resolveOnce,
+                  onError: rejectOnce
+                }),
+                contextProvider: OnRampProviders,
+                preventBack: true,
+                onClose: function onClose() {
+                  return rejectOnce(new TurnkeyError("User canceled the offramp process.", TurnkeyErrorCodes.USER_CANCELED));
+                }
+              });
+            }));
+        }
+      }, _callee139);
+    }));
+    return function (_x116) {
+      return _ref170.apply(this, arguments);
+    };
+  }(), [getSession, pushPage]);
   var handleVerifyAppProofs = useCallback(/*#__PURE__*/function () {
-    var _ref172 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee141(params) {
-      var _ref173, appProofs, _ref173$successPageDu, successPageDuration, stampWith, s, organizationId, _t38;
-      return _regenerator().w(function (_context141) {
-        while (1) switch (_context141.p = _context141.n) {
+    var _ref171 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee140(params) {
+      var _ref172, appProofs, _ref172$successPageDu, successPageDuration, stampWith, s, organizationId, _t35;
+      return _regenerator().w(function (_context140) {
+        while (1) switch (_context140.p = _context140.n) {
           case 0:
-            _ref173 = params || {}, appProofs = _ref173.appProofs, _ref173$successPageDu = _ref173.successPageDuration, successPageDuration = _ref173$successPageDu === void 0 ? 3000 : _ref173$successPageDu, stampWith = _ref173.stampWith;
-            _context141.n = 1;
+            _ref172 = params || {}, appProofs = _ref172.appProofs, _ref172$successPageDu = _ref172.successPageDuration, successPageDuration = _ref172$successPageDu === void 0 ? 3000 : _ref172$successPageDu, stampWith = _ref172.stampWith;
+            _context140.n = 1;
             return getSession();
           case 1:
-            s = _context141.v;
+            s = _context140.v;
             organizationId = (params === null || params === void 0 ? void 0 : params.organizationId) || (s === null || s === void 0 ? void 0 : s.organizationId);
             if (organizationId) {
-              _context141.n = 2;
+              _context140.n = 2;
               break;
             }
             throw new TurnkeyError("A session or passed in organization ID is required.", TurnkeyErrorCodes.INVALID_REQUEST);
           case 2:
-            _context141.p = 2;
-            return _context141.a(2, new Promise(function (resolve, reject) {
+            _context140.p = 2;
+            return _context140.a(2, new Promise(function (resolve, reject) {
               pushPage({
                 key: "Verify app proofs",
                 showTurnkeyBranding: false,
@@ -7130,34 +7015,34 @@ var ClientProvider = function ClientProvider(_ref) {
               });
             }));
           case 3:
-            _context141.p = 3;
-            _t38 = _context141.v;
-            if (!(_t38 instanceof TurnkeyError)) {
-              _context141.n = 4;
+            _context140.p = 3;
+            _t35 = _context140.v;
+            if (!(_t35 instanceof TurnkeyError)) {
+              _context140.n = 4;
               break;
             }
-            throw _t38;
+            throw _t35;
           case 4:
-            throw new TurnkeyError("Failed to verify app proofs.", TurnkeyErrorCodes.VERIFY_APP_PROOFS_ERROR, _t38);
+            throw new TurnkeyError("Failed to verify app proofs.", TurnkeyErrorCodes.VERIFY_APP_PROOFS_ERROR, _t35);
           case 5:
-            return _context141.a(2);
+            return _context140.a(2);
         }
-      }, _callee141, null, [[2, 3]]);
+      }, _callee140, null, [[2, 3]]);
     }));
-    return function (_x116) {
-      return _ref172.apply(this, arguments);
+    return function (_x117) {
+      return _ref171.apply(this, arguments);
     };
   }(), [getSession, pushPage]);
   useEffect(function () {
     if (proxyAuthConfigRef.current) return;
     // Fetch proxy auth config and client params once. Use both to build the master config.
     var fetchProxyAuthConfig = /*#__PURE__*/function () {
-      var _ref174 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee142() {
-        var proxyAuthConfig, clientParams, promises, _callbacks$onError10, _callbacks$onError11, _t39;
-        return _regenerator().w(function (_context142) {
-          while (1) switch (_context142.p = _context142.n) {
+      var _ref173 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee141() {
+        var proxyAuthConfig, clientParams, promises, _callbacks$onError10, _callbacks$onError11, _t36;
+        return _regenerator().w(function (_context141) {
+          while (1) switch (_context141.p = _context141.n) {
             case 0:
-              _context142.p = 0;
+              _context141.p = 0;
               promises = [];
               if (shouldFetchWalletKitConfig) {
                 promises.push(getAuthProxyConfig(config.authProxyConfigId, config.authProxyUrl).then(function (result) {
@@ -7169,7 +7054,7 @@ var ClientProvider = function ClientProvider(_ref) {
                   clientParams = result;
                 }));
               }
-              _context142.n = 1;
+              _context141.n = 1;
               return Promise.all(promises);
             case 1:
               if (proxyAuthConfig) {
@@ -7179,27 +7064,27 @@ var ClientProvider = function ClientProvider(_ref) {
                 clientParamsRef.current = clientParams;
               }
               setMasterConfig(buildConfig(proxyAuthConfig, clientParams));
-              _context142.n = 3;
+              _context141.n = 3;
               break;
             case 2:
-              _context142.p = 2;
-              _t39 = _context142.v;
+              _context141.p = 2;
+              _t36 = _context141.v;
               setClientState(ClientState.Error);
               // Without this the failure is silent: the provider goes to Error, every
               // guarded method then throws "Config is not ready yet!", and the cause
               // never reaches the integrator.
-              if (_t39 instanceof TurnkeyError || _t39 instanceof TurnkeyNetworkError) {
-                callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError10 = callbacks.onError) === null || _callbacks$onError10 === void 0 ? void 0 : _callbacks$onError10.call(callbacks, _t39);
+              if (_t36 instanceof TurnkeyError || _t36 instanceof TurnkeyNetworkError) {
+                callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError10 = callbacks.onError) === null || _callbacks$onError10 === void 0 ? void 0 : _callbacks$onError10.call(callbacks, _t36);
               } else {
-                callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError11 = callbacks.onError) === null || _callbacks$onError11 === void 0 ? void 0 : _callbacks$onError11.call(callbacks, new TurnkeyError("Failed to fetch the wallet kit configuration", TurnkeyErrorCodes.INITIALIZE_CLIENT_ERROR, _t39));
+                callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onError11 = callbacks.onError) === null || _callbacks$onError11 === void 0 ? void 0 : _callbacks$onError11.call(callbacks, new TurnkeyError("Failed to fetch the wallet kit configuration", TurnkeyErrorCodes.INITIALIZE_CLIENT_ERROR, _t36));
               }
             case 3:
-              return _context142.a(2);
+              return _context141.a(2);
           }
-        }, _callee142, null, [[0, 2]]);
+        }, _callee141, null, [[0, 2]]);
       }));
       return function fetchProxyAuthConfig() {
-        return _ref174.apply(this, arguments);
+        return _ref173.apply(this, arguments);
       };
     }();
     fetchProxyAuthConfig();
@@ -7232,34 +7117,34 @@ var ClientProvider = function ClientProvider(_ref) {
   var debouncedFetchWalletProviders = useDebouncedCallback(fetchWalletProviders, 100);
   useEffect(function () {
     var handleUpdateState = /*#__PURE__*/function () {
-      var _ref175 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee143() {
+      var _ref174 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee142() {
         var currentSession;
-        return _regenerator().w(function (_context143) {
-          while (1) switch (_context143.n) {
+        return _regenerator().w(function (_context142) {
+          while (1) switch (_context142.n) {
             case 0:
-              _context143.n = 1;
+              _context142.n = 1;
               return getSession();
             case 1:
-              currentSession = _context143.v;
+              currentSession = _context142.v;
               if (!currentSession) {
-                _context143.n = 3;
+                _context142.n = 3;
                 break;
               }
-              _context143.n = 2;
+              _context142.n = 2;
               return debouncedRefreshWallets();
             case 2:
-              _context143.n = 4;
+              _context142.n = 4;
               break;
             case 3:
-              _context143.n = 4;
+              _context142.n = 4;
               return debouncedFetchWalletProviders();
             case 4:
-              return _context143.a(2);
+              return _context142.a(2);
           }
-        }, _callee143);
+        }, _callee142);
       }));
       return function handleUpdateState() {
-        return _ref175.apply(this, arguments);
+        return _ref174.apply(this, arguments);
       };
     }();
     var cleanup = function cleanup() {};
@@ -7301,19 +7186,19 @@ var ClientProvider = function ClientProvider(_ref) {
     var mfaHandler = mfaHandlerRef.current;
     if (mfaHandler) {
       client.httpClient.config.onMfaRequired = /*#__PURE__*/function () {
-        var _ref176 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee144(ctx) {
-          return _regenerator().w(function (_context144) {
-            while (1) switch (_context144.n) {
+        var _ref175 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee143(ctx) {
+          return _regenerator().w(function (_context143) {
+            while (1) switch (_context143.n) {
               case 0:
-                _context144.n = 1;
+                _context143.n = 1;
                 return mfaHandler(ctx);
               case 1:
-                return _context144.a(2);
+                return _context143.a(2);
             }
-          }, _callee144);
+          }, _callee143);
         }));
-        return function (_x117) {
-          return _ref176.apply(this, arguments);
+        return function (_x118) {
+          return _ref175.apply(this, arguments);
         };
       }();
     }
@@ -7429,6 +7314,7 @@ var ClientProvider = function ClientProvider(_ref) {
       handleRemoveUserPhoneNumber: handleRemoveUserPhoneNumber,
       handleVerifyAppProofs: handleVerifyAppProofs,
       handleOnRamp: handleOnRamp,
+      handleOffRamp: handleOffRamp,
       handleSendTransaction: handleSendTransaction,
       handleSendErc20Transfer: handleSendErc20Transfer,
       setMfaHandler: setMfaHandler,