@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
371 lines (370 loc) • 17.7 kB
JavaScript
"use strict";
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dashboard = void 0;
var react_1 = __importStar(require("react"));
var lucide_react_1 = require("lucide-react");
var QRNetworks_1 = require("./QRNetworks");
var Activity_1 = __importDefault(require("./Activity"));
var Spinner_1 = __importDefault(require("./Spinner"));
var WalletProvider_1 = require("./WalletProvider");
var Dashboard = function (_a) {
var _b, _c, _d, _e, _f;
var result = _a.result, onLogout = _a.onLogout, onShowSwap = _a.onShowSwap, onShowTransfer = _a.onShowTransfer, sdkKey = _a.sdkKey;
var _g = (0, react_1.useState)("assets"), activeTab = _g[0], setActiveTab = _g[1];
var _h = (0, react_1.useState)(false), showQRCode = _h[0], setShowQRCode = _h[1];
var _j = (0, react_1.useState)(false), drawerOpen = _j[0], setDrawerOpen = _j[1];
var _k = (0, WalletProvider_1.useWallet)(), cryptoBalance = _k.cryptoBalance, loading = _k.loading, refreshBalance = _k.refreshBalance;
// Trigger immediate balance refresh when dashboard mounts
(0, react_1.useEffect)(function () {
if (result && !cryptoBalance) {
refreshBalance();
}
}, [result]);
// Add CSS to hide scrollbars
react_1.default.useEffect(function () {
var style = document.createElement("style");
style.textContent = "\n .hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n .hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n }\n ";
document.head.appendChild(style);
return function () {
document.head.removeChild(style);
};
}, []);
var truncateAddress = function (address) {
if (!address)
return "";
return address.slice(0, 6) + "..." + address.slice(-4);
};
var calculateTotalBalance = function () {
var total = 0;
if (cryptoBalance === null || cryptoBalance === void 0 ? void 0 : cryptoBalance.data) {
total += cryptoBalance.data.reduce(function (sum, token) { return sum + (token.valueUsd || 0); }, 0);
}
return total.toFixed(2);
};
var assets = __spreadArray([], (((_b = cryptoBalance === null || cryptoBalance === void 0 ? void 0 : cryptoBalance.data) === null || _b === void 0 ? void 0 : _b.map(function (token) { return ({
name: token.name,
icon: token.logoURI,
amount: token.amount,
valueUSD: token.valueUsd ? token.valueUsd.toFixed(2) : 0,
symbol: token.symbol,
priceUsd: token.priceUsd,
priceChange: 0,
type: "crypto",
}); })) || []), true);
// Sort assets by USD value in descending order
var sortedAssets = assets.sort(function (a, b) {
var valueA = parseFloat(a.valueUSD) || 0;
var valueB = parseFloat(b.valueUSD) || 0;
return valueB - valueA; // Descending order (highest value first)
});
var dasboardButtons = [
{
label: "Transfer",
icon: react_1.default.createElement(lucide_react_1.ArrowUp, { size: 18 }),
onClick: function () { return onShowTransfer(); },
},
{
label: "Buy",
icon: react_1.default.createElement(lucide_react_1.ShoppingCart, { size: 18 }),
onClick: function () { },
},
{
label: "Sell",
icon: react_1.default.createElement(lucide_react_1.Tag, { size: 18 }),
onClick: function () { },
},
{
label: "Swap",
icon: react_1.default.createElement(lucide_react_1.ArrowLeftRight, { size: 18 }),
onClick: function () {
onShowSwap();
},
},
];
var handleLogout = function () {
// Get the SDK instance from window
var walletSDK = window.__walletSDKInstance;
if (walletSDK) {
walletSDK.logout();
}
// Call the parent's onLogout callback
onLogout();
};
return (react_1.default.createElement("div", { style: {
width: "100%",
margin: "0 auto",
background: "#fff",
borderRadius: 20,
fontFamily: "Inter, sans-serif",
} }, showQRCode ? (react_1.default.createElement(QRNetworks_1.QRNetworks, { walletAddress: (_c = result === null || result === void 0 ? void 0 : result.wallet) === null || _c === void 0 ? void 0 : _c.scw_address, solanaAddress: (_d = result === null || result === void 0 ? void 0 : result.wallet) === null || _d === void 0 ? void 0 : _d.solana_program_wallet, bitcoinWalletAddress: (_f = (_e = result === null || result === void 0 ? void 0 : result.wallet) === null || _e === void 0 ? void 0 : _e.bitcoin_wallet) === null || _f === void 0 ? void 0 : _f.native_segwit_address, onBack: function () { return setShowQRCode(false); } })) : (react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: {
fontWeight: 600,
fontSize: 18,
marginBottom: 10,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
} },
react_1.default.createElement("span", { style: { fontSize: 18, color: "black", fontWeight: 600 } }, "Wallet Dashboard"),
react_1.default.createElement("span", { style: {
padding: "4px 8px",
fontSize: 14,
color: "#175CD3",
borderRadius: 40,
background: "#EFF8FF",
display: "flex",
alignItems: "center",
gap: 4,
position: "relative",
cursor: "pointer",
}, onClick: function () { return setDrawerOpen(function (v) { return !v; }); } },
react_1.default.createElement("div", { style: {
background: "white",
width: 16,
height: 16,
borderRadius: 100,
display: "flex",
alignItems: "center",
justifyContent: "center",
} },
react_1.default.createElement(lucide_react_1.CircleUserRound, { style: { width: 16, height: 16, color: "#175CD3" } })), result === null || result === void 0 ? void 0 :
result.username,
react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 }),
drawerOpen && (react_1.default.createElement("div", { style: {
position: "absolute",
top: 36,
right: 0,
background: "#fff",
boxShadow: "0 4px 16px rgba(0,0,0,0.10)",
borderRadius: 10,
minWidth: 120,
zIndex: 10,
padding: "8px 0",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
} },
react_1.default.createElement("button", { onClick: handleLogout, style: {
background: "none",
border: "none",
color: "#E53E3E",
fontWeight: 600,
fontSize: 15,
padding: "10px 20px",
textAlign: "left",
cursor: "pointer",
display: "flex",
alignItems: "center",
fontFamily: "Inter, sans-serif",
gap: 8,
} },
react_1.default.createElement(lucide_react_1.LogOut, { size: 16 }),
" Logout"))))),
react_1.default.createElement("div", { style: {
fontSize: 28,
fontWeight: "bold",
} },
"$",
calculateTotalBalance()),
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
gap: 12,
justifyContent: "space-between",
marginBottom: 12,
} },
react_1.default.createElement("div", { style: { color: "green", fontSize: 14 } },
"\u2191 0% ($0) ",
react_1.default.createElement("span", { style: { color: "#535862" } }, "in last 24hrs")),
react_1.default.createElement("div", { style: {
padding: "4px 8px",
border: "1px solid #D5D7DA",
borderRadius: 8,
display: "flex",
alignItems: "center",
gap: 3,
cursor: "pointer",
}, onClick: function () {
setShowQRCode(true);
} },
react_1.default.createElement(lucide_react_1.QrCode, { color: "#414651", size: 16 }),
react_1.default.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "#414651" } }, "Deposit"))),
react_1.default.createElement("div", { style: {
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gap: 8,
marginBottom: 16,
} }, dasboardButtons.map(function (action, i) { return (react_1.default.createElement("button", { key: i, onClick: action.onClick, style: {
padding: "10px 0",
borderRadius: 10,
border: "1px solid #e0e0e0",
background: "#fff",
fontSize: 13,
fontWeight: 500,
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 4,
fontFamily: "Inter, sans-serif",
color: "#414651",
outline: "none",
} },
action.icon,
action.label)); })),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 12,
border: "1px solid #eee",
borderRadius: 8,
overflow: "hidden",
background: "#FAFAFA",
height: 46,
} },
react_1.default.createElement("button", { onClick: function () { return setActiveTab("assets"); }, style: {
fontSize: 14,
fontFamily: "Inter, sans-serif",
flex: 1,
borderRadius: 8,
margin: 4,
background: activeTab === "assets" ? "#fff" : "#FAFAFA",
fontWeight: 600,
border: "none",
color: activeTab === "assets" ? "#414651" : "#717680",
boxShadow: activeTab === "assets"
? "0 4px 12px rgba(0,0,0,0.05)"
: "none",
cursor: "pointer",
} }, "Assets"),
react_1.default.createElement("button", { onClick: function () { return setActiveTab("activity"); }, style: {
fontSize: 14,
fontFamily: "Inter, sans-serif",
flex: 1,
borderRadius: 8,
margin: 4,
boxShadow: activeTab === "activity"
? "0 4px 12px rgba(0,0,0,0.05)"
: "none",
background: activeTab === "activity" ? "#fff" : "#FAFAFA",
fontWeight: 600,
border: "none",
color: activeTab === "activity" ? "#414651" : "#717680",
position: "relative",
cursor: "pointer",
} }, "Activity")),
activeTab === "assets" ? (react_1.default.createElement("div", { className: "hide-scrollbar", style: {
minHeight: 260,
maxHeight: 260,
overflowY: sortedAssets.length > 0 ? "auto" : "hidden",
marginBottom: 24,
} }, loading ? (react_1.default.createElement("div", { style: {
height: 260,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement(Spinner_1.default, null))) : sortedAssets.length === 0 ? (react_1.default.createElement("div", { style: {
height: 260,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#666",
fontSize: 16,
marginBottom: 24,
fontFamily: "Inter, sans-serif",
} }, "No assets found")) : (sortedAssets.map(function (asset, idx) { return (react_1.default.createElement("div", { style: {
padding: "2px 0px",
borderBottom: idx !== sortedAssets.length - 1
? "1px solid #E9EAEB"
: "none",
} },
react_1.default.createElement("div", { key: idx, style: {
display: "flex",
alignItems: "center",
padding: "12px",
} },
react_1.default.createElement("div", { style: {
width: 36,
height: 36,
borderRadius: 18,
background: "#eee",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 18,
marginRight: 12,
overflow: "hidden",
} },
react_1.default.createElement("img", { src: asset.icon, alt: asset.name, style: {
width: "100%",
height: "100%",
objectFit: "cover",
} })),
react_1.default.createElement("div", { style: { flexGrow: 1 } },
react_1.default.createElement("div", { style: {
fontWeight: 600,
color: "#414651",
fontSize: 16,
} }, asset.name),
react_1.default.createElement("div", { style: { color: "#027A48", fontSize: 13 } },
asset.priceChange > 0 ? "↑" : "↓",
" ",
asset.priceChange,
"% ($",
asset.priceChange,
")")),
react_1.default.createElement("div", { style: { textAlign: "right" } },
react_1.default.createElement("div", { style: { fontWeight: 600 } },
"$",
asset.valueUSD),
react_1.default.createElement("div", { style: { fontSize: 13, color: "#666" } },
Number(asset.amount).toFixed(6),
" ",
asset.symbol))))); })))) : (react_1.default.createElement("div", { className: "hide-scrollbar", style: {
textAlign: "center",
height: 260,
color: "#666",
fontSize: 16,
marginBottom: 24,
} },
react_1.default.createElement(Activity_1.default, { sdkKey: sdkKey })))))));
};
exports.Dashboard = Dashboard;