@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
919 lines (918 loc) • 55.5 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WalletModal = void 0;
var react_1 = __importStar(require("react"));
var enclavemoney_web_experimental_1 = require("enclavemoney-web-experimental");
var SwapToken_1 = require("./Swap/SwapToken");
var Dashboard_1 = require("./Dashboard/Dashboard");
var TransferToken_1 = __importDefault(require("./Transfer/TransferToken"));
var ActivityDetails_1 = __importDefault(require("./Activity/ActivityDetails"));
var WalletProvider_1 = require("./WalletProvider");
var services_1 = require("../services/services");
var firebase_auth_1 = require("../services/firebase-auth");
var lucide_react_1 = require("lucide-react");
var Spinner_1 = __importDefault(require("./ui/Spinner"));
var framer_motion_1 = require("framer-motion");
var enclaveLogo = "https://storage.googleapis.com/enclave_assets/enclave_black.png";
var StartStep = function (_a) {
var onNext = _a.onNext;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: { fontSize: 36, marginBottom: 10 } },
react_1.default.createElement("img", { src: "https://storage.googleapis.com/enclave_assets/passKey.png", alt: "passkey Logo", style: { width: 84 } })),
react_1.default.createElement("div", { style: {
color: "#4B5563",
fontSize: 17,
textAlign: "center",
marginBottom: 10,
} }, "Authenticate securely using your device's passkey"),
react_1.default.createElement("button", { style: {
marginTop: 10,
width: "100%",
background: "#3662E3",
color: "white",
fontWeight: 600,
fontSize: 18,
border: "none",
borderRadius: 10,
padding: "14px 0",
cursor: "pointer",
boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
transition: "background 0.2s",
}, onClick: onNext }, "Use my passkey")));
};
var SignupStep = function (_a) {
var username = _a.username, onUsernameChange = _a.onUsernameChange, usernameStatus = _a.usernameStatus, checking = _a.checking, error = _a.error, actionLoading = _a.actionLoading, onLogin = _a.onLogin, onSignup = _a.onSignup;
return (react_1.default.createElement("div", { style: { width: "100%" } },
react_1.default.createElement("label", { style: {
fontWeight: 600,
fontSize: 14,
marginBottom: 6,
display: "block",
} }, "Choose a username"),
react_1.default.createElement("input", { type: "text", value: username, onChange: function (e) { return onUsernameChange(e.target.value); }, placeholder: "Enter username", style: {
width: "100%",
padding: "10px",
borderRadius: 8,
border: "1px solid #ccc",
color: "#181D27",
backgroundColor: "white",
fontSize: 16,
marginBottom: 8,
}, disabled: actionLoading }),
checking && (react_1.default.createElement("div", { style: { color: "#888", fontSize: 14 } }, "Searching username...")),
usernameStatus === "exists" && (react_1.default.createElement("div", { style: { color: "green", fontSize: 14 } }, "Username found. You can log in.")),
usernameStatus === "not-exists" && (react_1.default.createElement("div", { style: { color: "blue", fontSize: 14 } }, "Username is available. You can sign up.")),
error && react_1.default.createElement("div", { style: { color: "red", fontSize: 14 } }, error),
react_1.default.createElement("button", { style: {
marginTop: 16,
width: "100%",
background: usernameStatus && !checking ? "#4664E9" : "#bfc8e6",
color: "white",
fontWeight: 600,
fontSize: 16,
border: "none",
borderRadius: 10,
padding: "14px 0",
cursor: usernameStatus && !checking ? "pointer" : "not-allowed",
boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
transition: "background 0.2s",
}, disabled: !usernameStatus || checking || actionLoading, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(usernameStatus === "exists")) return [3 /*break*/, 2];
return [4 /*yield*/, onLogin()];
case 1:
_a.sent();
return [3 /*break*/, 4];
case 2:
if (!(usernameStatus === "not-exists")) return [3 /*break*/, 4];
return [4 /*yield*/, onSignup()];
case 3:
_a.sent();
_a.label = 4;
case 4: return [2 /*return*/];
}
});
}); } }, checking
? "Searching username..."
: actionLoading
? usernameStatus === "exists"
? "Logging in..."
: "Signing up..."
: usernameStatus === "exists"
? "Login"
: usernameStatus === "not-exists"
? "Sign Up"
: "Continue")));
};
var PasskeyUsernameStep = function (_a) {
var username = _a.username, actionLoading = _a.actionLoading, error = _a.error, onLogin = _a.onLogin, onSwitchToManual = _a.onSwitchToManual;
return (react_1.default.createElement("div", { style: { width: "100%" } },
react_1.default.createElement("label", { style: {
fontWeight: 600,
fontSize: 14,
marginBottom: 6,
display: "block",
} }, "Continue with your passkey"),
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
padding: "12px",
borderRadius: 8,
border: "1px solid #e5e7eb",
backgroundColor: "#f9fafb",
marginBottom: 8,
gap: 10,
} },
react_1.default.createElement(lucide_react_1.CircleUserRound, { color: "#3662E3", size: 24 }),
react_1.default.createElement("span", { style: {
flex: 1,
fontSize: 16,
color: "#374151",
fontWeight: 500,
} }, username),
react_1.default.createElement("button", { onClick: onSwitchToManual, style: {
background: "none",
border: "none",
color: "#6b7280",
fontSize: 12,
cursor: "pointer",
padding: "4px 8px",
borderRadius: 4,
textDecoration: "underline",
}, disabled: actionLoading }, "Use different username")),
error && (react_1.default.createElement("div", { style: { color: "red", fontSize: 14, marginBottom: 8 } }, error)),
react_1.default.createElement("button", { style: {
marginTop: 8,
width: "100%",
background: actionLoading ? "#bfc8e6" : "#4664E9",
color: "white",
fontWeight: 600,
fontSize: 16,
border: "none",
borderRadius: 10,
padding: "14px 0",
cursor: actionLoading ? "not-allowed" : "pointer",
boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
transition: "background 0.2s",
}, disabled: actionLoading, onClick: onLogin }, actionLoading ? "Logging in..." : "Continue with passkey")));
};
// Add CSS styles at the top of the file
var styles = "\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1001;\n animation: fadeIn 0.3s ease-out;\n }\n\n .modal-content {\n background-color: white;\n max-height: 95vh;\n overflow-y: auto;\n padding: 32px 24px 24px 24px;\n border-radius: 20px;\n min-width: 480px;\n max-width: 440px;\n color: #222;\n box-shadow: 0 4px 24px rgba(0,0,0,0.10);\n position: relative;\n font-family: Inter, sans-serif;\n animation: slideIn 0.3s ease-out;\n }\n\n .hide-scrollbar::-webkit-scrollbar {\n display: none;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes slideIn {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n\n @media (max-width: 768px) {\n .modal-overlay {\n align-items: flex-end;\n }\n\n .modal-content {\n width: 100%;\n min-width: 100%;\n max-height: 90vh;\n border-radius: 20px 20px 0 0;\n padding: 24px 16px;\n margin: 0;\n }\n }\n";
var WalletModalContent = function (_a) {
var _b;
var isOpen = _a.isOpen, onClose = _a.onClose, walletSDKKey = _a.walletSDKKey, swapParams = _a.swapParams, showMessagePopup = _a.showMessagePopup, _c = _a.messageType, messageType = _c === void 0 ? "success" : _c, transactionId = _a.transactionId;
// Add style tag to document head
(0, react_1.useEffect)(function () {
var styleElement = document.createElement("style");
styleElement.textContent = styles;
document.head.appendChild(styleElement);
return function () {
document.head.removeChild(styleElement);
};
}, []);
var _d = (0, react_1.useState)("start"), step = _d[0], setStep = _d[1];
var _e = (0, react_1.useState)(""), username = _e[0], setUsername = _e[1];
var _f = (0, react_1.useState)(false), checking = _f[0], setChecking = _f[1];
var _g = (0, react_1.useState)(null), usernameStatus = _g[0], setUsernameStatus = _g[1];
var _h = (0, react_1.useState)(null), error = _h[0], setError = _h[1];
var _j = (0, react_1.useState)(false), actionLoading = _j[0], setActionLoading = _j[1];
var _k = (0, react_1.useState)(null), result = _k[0], setResult = _k[1];
var _l = (0, react_1.useState)(null), balance = _l[0], setBalance = _l[1];
var _m = (0, react_1.useState)(false), showSwap = _m[0], setShowSwap = _m[1];
var _o = (0, react_1.useState)(false), showTransfer = _o[0], setShowTransfer = _o[1];
var debounceRef = (0, react_1.useRef)(null);
var _p = (0, WalletProvider_1.useWallet)(), tokenOptions = _p.tokenOptions, tokensLoading = _p.tokensLoading, cryptoBalance = _p.cryptoBalance, loading = _p.loading, refreshBalance = _p.refreshBalance, showActivity = _p.showActivity, setShowActivity = _p.setShowActivity, activity = _p.activity, setLoading = _p.setLoading;
var _q = (0, react_1.useState)(null), combinedBalance = _q[0], setCombinedBalance = _q[1];
var _r = (0, react_1.useState)(false), initialTokensLoading = _r[0], setInitialTokensLoading = _r[1];
var _s = (0, react_1.useState)(undefined), initialFromToken = _s[0], setInitialFromToken = _s[1];
var _t = (0, react_1.useState)(undefined), initialToToken = _t[0], setInitialToToken = _t[1];
// New state for passkey username flow
var _u = (0, react_1.useState)(null), savedUsername = _u[0], setSavedUsername = _u[1];
var _v = (0, react_1.useState)(false), showManualInput = _v[0], setShowManualInput = _v[1];
var _w = (0, react_1.useState)(false), showMessagePopupState = _w[0], setShowMessagePopupState = _w[1];
var _x = (0, react_1.useState)("success"), messageTypeState = _x[0], setMessageTypeState = _x[1];
var _y = (0, react_1.useState)(null), transactionIdState = _y[0], setTransactionIdState = _y[1];
var _z = (0, react_1.useState)(false), showActivityState = _z[0], setShowActivityState = _z[1];
// Google authentication state
var _0 = (0, react_1.useState)(false), googleAuthLoading = _0[0], setGoogleAuthLoading = _0[1];
var _1 = (0, react_1.useState)(null), googleUser = _1[0], setGoogleUser = _1[1];
var enclave = new enclavemoney_web_experimental_1.Enclave(walletSDKKey);
(0, react_1.useEffect)(function () {
if (isOpen) {
// Check for existing session first
var saved = localStorage.getItem("enclave_wallet_login");
if (saved) {
var parsed = JSON.parse(saved);
setResult(parsed.result);
setBalance(parsed.balance);
if (parsed.googleUser) {
setGoogleUser(parsed.googleUser);
}
// Trigger immediate balance refresh when modal opens with existing session
refreshBalance();
return;
}
// Check for previously used username
var lastUsername = localStorage.getItem("enclave_last_username");
if (lastUsername) {
setSavedUsername(lastUsername);
setUsername(lastUsername);
setStep("passkey-username");
}
else {
setStep("start");
}
}
}, [isOpen, swapParams]);
(0, react_1.useEffect)(function () {
if (result) {
localStorage.setItem("enclave_wallet_login", JSON.stringify({ result: result, balance: balance, googleUser: googleUser }));
setLoading(true);
}
}, [result, balance, googleUser]);
console.log("cryptoBalance in wallet modal", cryptoBalance);
(0, react_1.useEffect)(function () {
if (swapParams) {
setShowSwap(true);
}
if (cryptoBalance) {
setCombinedBalance(cryptoBalance);
}
}, [result, swapParams, cryptoBalance]);
(0, react_1.useEffect)(function () {
var initializeTokens = function () { return __awaiter(void 0, void 0, void 0, function () {
var fromToken, toToken;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setInitialTokensLoading(true);
if (!swapParams) return [3 /*break*/, 3];
return [4 /*yield*/, getInitialFromToken()];
case 1:
fromToken = _a.sent();
return [4 /*yield*/, getInitialToToken()];
case 2:
toToken = _a.sent();
setInitialFromToken(fromToken);
setInitialToToken(toToken);
console.log("initialFromToken", fromToken);
console.log("initialToToken", toToken);
setInitialTokensLoading(false);
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
if (swapParams && tokenOptions.length > 0) {
initializeTokens();
}
}, [swapParams, tokenOptions, walletSDKKey]);
(0, react_1.useEffect)(function () {
if (isOpen) {
// Check for transaction data in localStorage
var transactionData = localStorage.getItem("enclave_transaction_data");
if (transactionData) {
var data = JSON.parse(transactionData);
setTransactionIdState(data.transactionId || null);
// Clear the data after reading
localStorage.removeItem("enclave_transaction_data");
}
}
}, [isOpen]);
var handleUsernameChange = function (value) {
setUsername(value);
setUsernameStatus(null);
setError(null);
if (debounceRef.current)
clearTimeout(debounceRef.current);
if (!value)
return;
setChecking(true);
debounceRef.current = setTimeout(function () {
checkUserName(value);
}, 500);
};
var checkUserName = function (username) { return __awaiter(void 0, void 0, void 0, function () {
var resp, e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setChecking(true);
setError(null);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, enclave.checkUserName(username)];
case 2:
resp = _a.sent();
if (resp.value === true) {
setUsernameStatus("exists");
}
else if (resp.value === false) {
setUsernameStatus("not-exists");
}
else {
setUsernameStatus(null);
}
return [3 /*break*/, 5];
case 3:
e_1 = _a.sent();
setError("Error checking username");
setUsernameStatus(null);
return [3 /*break*/, 5];
case 4:
setChecking(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var signInAccount = function () { return __awaiter(void 0, void 0, void 0, function () {
var resp, attResp, error_1, verificationResp, sdkInstance, balanceData, e_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setActionLoading(true);
setError(null);
_a.label = 1;
case 1:
_a.trys.push([1, 13, 14, 15]);
return [4 /*yield*/, enclave.getPasskeyAccountRegisteredOptions(username)];
case 2:
resp = _a.sent();
attResp = void 0;
_a.label = 3;
case 3:
_a.trys.push([3, 5, , 6]);
return [4 /*yield*/, enclave.startPasskeyAccountAuthentication(resp)];
case 4:
attResp = _a.sent();
return [3 /*break*/, 6];
case 5:
error_1 = _a.sent();
throw error_1;
case 6: return [4 /*yield*/, enclave.submitPasskeyAccountRegisteredResponse({
username: username,
attResp: attResp,
})];
case 7:
verificationResp = _a.sent();
if (!verificationResp) return [3 /*break*/, 11];
if (!verificationResp.error) return [3 /*break*/, 8];
setError(verificationResp.message);
return [3 /*break*/, 10];
case 8:
setResult(verificationResp);
// Save username for future passkey login
localStorage.setItem("enclave_last_username", username);
sdkInstance = window.__walletSDKInstance;
if (!sdkInstance) return [3 /*break*/, 10];
return [4 /*yield*/, sdkInstance.getUserCryptoBalance()];
case 9:
balanceData = _a.sent();
setBalance(balanceData);
sdkInstance.setUserSession({
result: verificationResp,
balance: balanceData,
});
_a.label = 10;
case 10: return [3 /*break*/, 12];
case 11:
setError("Login failed");
_a.label = 12;
case 12: return [3 /*break*/, 15];
case 13:
e_2 = _a.sent();
setError(e_2.message || "Login failed");
return [3 /*break*/, 15];
case 14:
setActionLoading(false);
return [7 /*endfinally*/];
case 15: return [2 /*return*/];
}
});
}); };
var createAccount = function () { return __awaiter(void 0, void 0, void 0, function () {
var resp, attResp, error_2, verificationResp, sdkInstance, balanceData, e_3;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setActionLoading(true);
setError(null);
_a.label = 1;
case 1:
_a.trys.push([1, 13, 14, 15]);
return [4 /*yield*/, enclave.getPasskeyAccountRegistrationOptions(username)];
case 2:
resp = _a.sent();
attResp = void 0;
_a.label = 3;
case 3:
_a.trys.push([3, 5, , 6]);
return [4 /*yield*/, enclave.startPasskeyAccountRegistration(resp)];
case 4:
attResp = _a.sent();
return [3 /*break*/, 6];
case 5:
error_2 = _a.sent();
throw error_2;
case 6: return [4 /*yield*/, enclave.submitPasskeyAccountRegistrationResponse({
username: username,
attResp: attResp,
})];
case 7:
verificationResp = _a.sent();
if (!verificationResp) return [3 /*break*/, 11];
if (!verificationResp.error) return [3 /*break*/, 8];
setError(verificationResp.message);
return [3 /*break*/, 10];
case 8:
setResult(verificationResp);
// Save username for future passkey login
localStorage.setItem("enclave_last_username", username);
sdkInstance = window.__walletSDKInstance;
if (!sdkInstance) return [3 /*break*/, 10];
return [4 /*yield*/, sdkInstance.getUserCryptoBalance()];
case 9:
balanceData = _a.sent();
setBalance(balanceData);
sdkInstance.setUserSession({
result: verificationResp,
balance: balanceData,
});
_a.label = 10;
case 10: return [3 /*break*/, 12];
case 11:
setError("Signup failed");
_a.label = 12;
case 12: return [3 /*break*/, 15];
case 13:
e_3 = _a.sent();
setError(e_3.message || "Signup failed");
return [3 /*break*/, 15];
case 14:
setActionLoading(false);
return [7 /*endfinally*/];
case 15: return [2 /*return*/];
}
});
}); };
var handleLogout = function () { return __awaiter(void 0, void 0, void 0, function () {
var signOutUser, error_3;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!googleUser) return [3 /*break*/, 5];
_a.label = 1;
case 1:
_a.trys.push([1, 4, , 5]);
return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("../services/firebase-auth")); })];
case 2:
signOutUser = (_a.sent()).signOutUser;
return [4 /*yield*/, signOutUser()];
case 3:
_a.sent();
setGoogleUser(null);
return [3 /*break*/, 5];
case 4:
error_3 = _a.sent();
console.error("Error signing out from Google:", error_3);
return [3 /*break*/, 5];
case 5:
setResult(null);
setUsername("");
setUsernameStatus(null);
setError(null);
setStep("start");
localStorage.removeItem("enclave_wallet_login");
localStorage.removeItem("enclave_last_username"); // Clear saved username
return [2 /*return*/];
}
});
}); };
// Handler for passkey username login
var handlePasskeyLogin = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!savedUsername) return [3 /*break*/, 2];
return [4 /*yield*/, signInAccount()];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
// Handler to switch to manual username input
var handleSwitchToManual = function () {
setShowManualInput(true);
setStep("signup");
setUsername("");
setUsernameStatus(null);
setError(null);
};
// Handler for Google login
var handleGoogleLogin = function () { return __awaiter(void 0, void 0, void 0, function () {
var result_1, googleResult, sdkInstance, balanceData, error_4;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setGoogleAuthLoading(true);
setError(null);
_a.label = 1;
case 1:
_a.trys.push([1, 7, 8, 9]);
return [4 /*yield*/, (0, firebase_auth_1.signInWithGoogle)(walletSDKKey)];
case 2:
result_1 = _a.sent();
if (!(result_1.success && result_1.user)) return [3 /*break*/, 5];
setGoogleUser(result_1.user);
console.log("Social account result:", result_1.user);
googleResult = {
username: result_1.user.socialLoginDetails.googleUser.email,
email: result_1.user.socialLoginDetails.googleUser.email,
displayName: result_1.user.socialLoginDetails.googleUser.displayName,
photoURL: result_1.user.socialLoginDetails.googleUser.photoURL,
uid: result_1.user.socialLoginDetails.googleUser.uid,
authMethod: "google",
wallet: result_1.user.wallet,
verified: result_1.user.verified,
socialLoginDetails: result_1.user.socialLoginDetails,
_id: result_1.user._id,
};
setResult(googleResult);
sdkInstance = window.__walletSDKInstance;
if (!sdkInstance) return [3 /*break*/, 4];
return [4 /*yield*/, sdkInstance.getUserCryptoBalance()];
case 3:
balanceData = _a.sent();
setBalance(balanceData);
sdkInstance.setUserSession({
result: googleResult,
balance: balanceData,
});
_a.label = 4;
case 4: return [3 /*break*/, 6];
case 5:
setError(result_1.error || "Google login failed");
_a.label = 6;
case 6: return [3 /*break*/, 9];
case 7:
error_4 = _a.sent();
console.error("Google login error:", error_4);
setError(error_4.message || "Google login failed");
return [3 /*break*/, 9];
case 8:
setGoogleAuthLoading(false);
return [7 /*endfinally*/];
case 9: return [2 /*return*/];
}
});
}); };
var getMatchingTokenFromCryptoBalance = function (tokenAddress, chainId) {
return cryptoBalance === null || cryptoBalance === void 0 ? void 0 : cryptoBalance.data.find(function (token) {
return token.chainIds.some(function (chain) {
return chain.address.toLowerCase() === tokenAddress.toLowerCase() &&
chain.chainId === chainId;
});
});
};
var formatTokenForSwap = function (matchingToken, chainId) {
var _a;
if (!matchingToken)
return undefined;
var matchingChain = matchingToken.chainIds.find(function (chain) { return chain.chainId === chainId; });
if (!matchingChain)
return undefined;
return {
symbol: matchingToken.symbol,
name: matchingToken.name,
icon: matchingToken.logoURI,
address: matchingChain.address,
chainId: matchingChain.chainId,
chainIds: matchingToken.chainIds,
decimals: matchingToken.decimals,
balance: matchingChain.balance,
amount: (_a = matchingToken.amount) === null || _a === void 0 ? void 0 : _a.toString(),
};
};
var getInitialFromToken = function () { return __awaiter(void 0, void 0, void 0, function () {
var matchingToken, searchTokenResponse, matchingChain;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
if (!(swapParams === null || swapParams === void 0 ? void 0 : swapParams.fromToken) || !tokenOptions.length)
return [2 /*return*/, undefined];
matchingToken = tokenOptions.find(function (token) {
var _a;
return (_a = token.chainIds) === null || _a === void 0 ? void 0 : _a.some(function (chain) {
return chain.address.toLowerCase() ===
swapParams.fromToken.tokenAddress.toLowerCase() &&
chain.chainId === swapParams.fromToken.chainId;
});
});
if (!(!matchingToken || !matchingToken.chainIds)) return [3 /*break*/, 4];
if (!swapParams.fromToken.metadata) return [3 /*break*/, 1];
matchingToken = {
address: swapParams.fromToken.tokenAddress,
symbol: swapParams.fromToken.metadata.tokenSymbol,
name: swapParams.fromToken.metadata.tokenName,
logoURI: swapParams.fromToken.metadata.logoURI,
chainIds: swapParams.fromToken.metadata.chainIds.map(function (chain) { return ({
chainId: chain.chainId,
address: chain.address,
}); }),
decimals: swapParams.fromToken.metadata.decimals,
chainId: swapParams.fromToken.metadata.chainIds[0].chainId,
};
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, (0, services_1.searchToken)(swapParams.fromToken.tokenAddress, swapParams.fromToken.chainId, walletSDKKey)];
case 2:
searchTokenResponse = _d.sent();
if ((searchTokenResponse === null || searchTokenResponse === void 0 ? void 0 : searchTokenResponse.success) && searchTokenResponse.data) {
matchingToken = {
address: searchTokenResponse.data.chainIds[0].address,
symbol: searchTokenResponse.data.symbol,
name: searchTokenResponse.data.name,
logoURI: searchTokenResponse.data.logoURI,
chainIds: searchTokenResponse.data.chainIds.map(function (chain) { return ({
chainId: parseInt(chain.chainId),
address: chain.address,
}); }),
decimals: searchTokenResponse.data.decimals,
chainId: parseInt(searchTokenResponse.data.chainIds[0].chainId),
};
}
_d.label = 3;
case 3:
if (!matchingToken)
return [2 /*return*/, undefined];
return [2 /*return*/, {
symbol: matchingToken.symbol,
name: matchingToken.name,
icon: matchingToken.logoURI || matchingToken.icon || "",
address: matchingToken.address,
chainId: matchingToken.chainId,
chainIds: matchingToken.chainIds,
decimals: matchingToken.decimals,
balance: matchingToken.balance || "0",
amount: ((_a = matchingToken.amount) === null || _a === void 0 ? void 0 : _a.toString()) || "0",
priceUsd: matchingToken.price || 0,
}];
case 4:
matchingChain = (_b = matchingToken.chainIds) === null || _b === void 0 ? void 0 : _b.find(function (chain) { return chain.chainId === swapParams.fromToken.chainId; });
if (!matchingChain)
return [2 /*return*/, undefined];
return [2 /*return*/, {
symbol: matchingToken.symbol,
name: matchingToken.name,
icon: matchingToken.logoURI || matchingToken.icon || "",
address: matchingChain.address,
chainId: matchingChain.chainId,
chainIds: matchingToken.chainIds,
decimals: matchingToken.decimals,
balance: matchingToken.balance || "0",
amount: ((_c = matchingToken.amount) === null || _c === void 0 ? void 0 : _c.toString()) || "0",
priceUsd: matchingToken.price || 0,
}];
}
});
}); };
var getInitialToToken = function () { return __awaiter(void 0, void 0, void 0, function () {
var matchingToken, searchTokenResponse, matchingChain;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
if (!(swapParams === null || swapParams === void 0 ? void 0 : swapParams.toToken) || !tokenOptions.length)
return [2 /*return*/, undefined];
matchingToken = tokenOptions.find(function (token) {
var _a;
return (_a = token.chainIds) === null || _a === void 0 ? void 0 : _a.some(function (chain) {
return chain.address.toLowerCase() ===
swapParams.toToken.tokenAddress.toLowerCase() &&
chain.chainId === swapParams.toToken.chainId;
});
});
if (!(!matchingToken || !matchingToken.chainIds)) return [3 /*break*/, 4];
if (!swapParams.toToken.metadata) return [3 /*break*/, 1];
matchingToken = {
address: swapParams.toToken.tokenAddress,
symbol: swapParams.toToken.metadata.tokenSymbol,
name: swapParams.toToken.metadata.tokenName,
logoURI: swapParams.toToken.metadata.logoURI,
chainIds: swapParams.toToken.metadata.chainIds.map(function (chain) { return ({
chainId: chain.chainId,
address: chain.address,
}); }),
decimals: swapParams.toToken.metadata.decimals,
chainId: swapParams.toToken.metadata.chainIds[0].chainId,
};
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, (0, services_1.searchToken)(swapParams.toToken.tokenAddress, swapParams.toToken.chainId, walletSDKKey)];
case 2:
searchTokenResponse = _d.sent();
if ((searchTokenResponse === null || searchTokenResponse === void 0 ? void 0 : searchTokenResponse.success) && searchTokenResponse.data) {
matchingToken = {
address: searchTokenResponse.data.chainIds[0].address,
symbol: searchTokenResponse.data.symbol,
name: searchTokenResponse.data.name,
logoURI: searchTokenResponse.data.logoURI,
chainIds: searchTokenResponse.data.chainIds.map(function (chain) { return ({
chainId: parseInt(chain.chainId),
address: chain.address,
}); }),
decimals: searchTokenResponse.data.decimals,
chainId: parseInt(searchTokenResponse.data.chainIds[0].chainId),
};
}
_d.label = 3;
case 3:
if (!matchingToken)
return [2 /*return*/, undefined];
return [2 /*return*/, {
symbol: matchingToken.symbol,
name: matchingToken.name,
icon: matchingToken.logoURI || matchingToken.icon || "",
address: matchingToken.address,
chainId: matchingToken.chainId,
chainIds: matchingToken.chainIds,
decimals: matchingToken.decimals,
balance: matchingToken.balance || "0",
amount: ((_a = matchingToken.amount) === null || _a === void 0 ? void 0 : _a.toString()) || "0",
priceUsd: matchingToken.price || 0,
}];
case 4:
matchingChain = (_b = matchingToken.chainIds) === null || _b === void 0 ? void 0 : _b.find(function (chain) { return chain.chainId === swapParams.toToken.chainId; });
if (!matchingChain)
return [2 /*return*/, undefined];
return [2 /*return*/, {
symbol: matchingToken.symbol,
name: matchingToken.name,
icon: matchingToken.logoURI || matchingToken.icon || "",
address: matchingChain.address,
chainId: matchingChain.chainId,
chainIds: matchingToken.chainIds,
decimals: matchingToken.decimals,
balance: matchingToken.balance || "0",
amount: ((_c = matchingToken.amount) === null || _c === void 0 ? void 0 : _c.toString()) || "0",
priceUsd: matchingToken.price || 0,
}];
}
});
}); };
if (!isOpen)
return null;
return (react_1.default.createElement("div", { className: "modal-overlay", onClick: onClose },
react_1.default.createElement(framer_motion_1.motion.div, { className: "modal-content hide-scrollbar", onClick: function (e) { return e.stopPropagation(); }, layout: true, initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 100 } },
react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" }, transactionIdState ? (react_1.default.createElement(framer_motion_1.motion.div, { key: "activity-details", initial: { opacity: 0 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.3, ease: "easeInOut" } },
react_1.default.createElement(ActivityDetails_1.default, { activityId: transactionIdState, apiKey: walletSDKKey, onBack: function () {
setShowActivityState(false);
setTransactionIdState(null);
} }))) : (react_1.default.createElement(framer_motion_1.motion.div, { key: "main-content", initial: { opacity: 0, height: 550 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.2, ease: "easeInOut" } },
react_1.default.createElement(react_1.default.Fragment, null,
!result && (react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "center",
marginBottom: 16,
} },
react_1.default.createElement("img", { src: enclaveLogo, alt: "Enclave Logo", style: { height: 48, objectFit: "contain" } })),
react_1.default.createElement("button", { onClick: onClose, style: {
position: "absolute",
top: 18,
right: 18,
background: "none",
border: "none",
fontSize: 22,
cursor: "pointer",
color: "#888",
}, "aria-label": "Close" }, "\u00D7"))),
!result && (react_1.default.createElement("h2", { style: {
fontSize: 26,
fontWeight: 700,
margin: 0,
textAlign: "center",
} }, "Log In or Sign Up")),
!result && (react_1.default.createElement("p", { style: {
color: "#6B7280",
fontSize: 16,
margin: "10px 0 24px 0",
textAlign: "center",
} }, "Sign into your wallet with one click")),
!result && (react_1.default.createElement(react_1.default.Fragment, null,
step === "start" ||
(step === "passkey-username" && savedUsername) ? (react_1.default.createElement("div", { style: {
width: "100%",
padding: "0 16px",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginBottom: 24,
} },
react_1.default.createElement("button", { style: {
marginTop: 0,
width: "100%",
background: googleAuthLoading ? "#f3f4f6" : "white",
color: googleAuthLoading ? "#9ca3af" : "#000",
fontWeight: 600,
fontSize: 18,
borderRadius: 10,
padding: "14px 0",
cursor: googleAuthLoading
? "not-allowed"
: "pointer",
boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
transition: "background 0.2s",
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "1px solid #E5E7EB",
gap: 10,
}, onClick: handleGoogleLogin, disabled: googleAuthLoading },
googleAuthLoading ? (react_1.default.createElement(Spinner_1.default, null)) : (react_1.default.createElement("img", { src: "https://storage.googleapis.com/enclave_assets/google.svg", alt: "Google Logo", style: { width: 24 } })),
googleAuthLoading
? "Signing in..."
: "Continue with Google"))) : null,
react_1.default.createElement("div", { style: {
background: "#F6F8FE",
borderRadius: 16,
padding: "24px 16px 20px 16px",
flexDirection: "column",