// Investments — portfolio market intelligence and risk surface
const INVESTMENT_IMPACT_CARDS = [
{
tone: "negative",
label: "High Negative Impact",
headline:
"Global supply chain disruptions impact defense and aerospace sectors",
tickers: ["LMT", "RTX", "BA"],
},
{
tone: "positive",
label: "Medium Positive Impact",
headline: "AI infrastructure spending lifts semiconductor outlook",
tickers: ["NVDA", "AMD", "TSM"],
},
{
tone: "negative",
label: "Moderate Negative Impact",
headline: "Crude price volatility pressures transport and utilities",
tickers: ["DAL", "UPS", "DUK"],
},
];
const PORTFOLIO_RISKS = [
{
label: "Asset class",
value: "90% Equities",
description:
"Our system evaluates the proportion of the portfolio held in stocks. When this number exceeds a certain threshold, we flag it to indicate an increased vulnerability to stock market corrections, emphasizing the importance of balancing with fixed-income assets.",
status: "warning",
},
{
label: "Geography",
value: "High US Concentration",
description:
"Identifies the regional footprint of the portfolio's assets. A high concentration warning is triggered when investments are too localized, illustrating a lack of global diversification that could otherwise protect against country-specific risks.",
},
{
label: "Sector",
value: "Heavy Energy Exposure",
description:
"By evaluating industry allocations, the system identifies if a portfolio is overly reliant on a single sector's performance. Highlighting this exposure helps identify sector-specific risks, encouraging a spread across non-correlated industries to smooth out returns.",
},
{
label: "Liquidity",
value: "Healthy",
description:
"This metric analyzes the trading volume and market accessibility of the held assets. We display a positive liquidity rating when the majority of the portfolio can be efficiently liquidated, meaning cash can be accessed quickly during market stress or emergencies.",
status: "healthy",
},
];
const PORTFOLIO_ALLOCATION_COLORS = {
ETF: "#9DD6C8",
Stocks: "#8CB7FF",
Crypto: "#F2C36B",
Cash: "#D9DDE5",
};
const INVESTMENT_CHART_FILTERS = ["1W", "1M", "3M", "6M", "YTD", "1Y"];
const INVESTMENT_CHART_TRENDS = {
"1W": [34, 35, 33, 36, 37, 36, 39],
"1M": [20, 23, 21, 26, 24, 31, 35, 32, 37, 41, 39, 46, 50, 54, 58],
"3M": [32, 34, 31, 38, 36, 42, 40, 46, 45, 49, 53, 50, 57, 60, 64],
"6M": [30, 28, 33, 36, 35, 40, 43, 39, 46, 48, 52, 51, 55, 59, 63],
YTD: [29, 33, 35, 32, 39, 42, 45, 43, 48, 50, 54, 56, 59, 62, 66],
"1Y": [24, 27, 25, 31, 34, 37, 35, 42, 45, 44, 51, 55, 58, 63, 69],
};
const STOCK_LOGOS = {
AAPL: { initials: "A", bg: "#1D1D1F" },
AMZN: { initials: "a", bg: "#FF9900" },
"BRK.B": { initials: "B", bg: "#3A3A3A" },
COIN: { initials: "C", bg: "#0052FF" },
BTC: { initials: "B", bg: "#F7931A" },
ETH: { initials: "E", bg: "#627EEA" },
GOOGL: { initials: "G", bg: "#4285F4" },
IEMG: { initials: "iS", bg: "#111827" },
META: { initials: "M", bg: "#0668E1" },
MSFT: { initials: "M", bg: "#00A4EF" },
NVDA: { initials: "N", bg: "#76B900" },
PLTR: { initials: "P", bg: "#111111" },
QQQ: { initials: "Q", bg: "#7B3FF2" },
SPY: { initials: "S", bg: "#1E5AA8" },
TSLA: { initials: "T", bg: "#CC0000" },
VWRL: { initials: "V", bg: "#B21F2D" },
};
const HOLDING_DAILY_TRENDS = {
AAPL: [22, 23, 23, 22, 24, 24, 25],
AMZN: [20, 21, 20, 22, 22, 23, 23],
"BRK.B": [22, 22, 23, 22, 23, 23, 23],
COIN: [29, 27, 28, 26, 25, 24, 23],
GOOGL: [24, 23, 24, 24, 25, 24, 25],
IEMG: [24, 23, 24, 23, 23, 22, 22],
META: [29, 28, 28, 27, 26, 26, 25],
MSFT: [20, 21, 22, 22, 23, 24, 25],
NVDA: [19, 22, 21, 25, 27, 29, 32],
PLTR: [21, 22, 21, 23, 24, 23, 25],
QQQ: [28, 27, 28, 27, 26, 25, 25],
SPY: [27, 27, 26, 26, 25, 25, 24],
TSLA: [23, 22, 24, 23, 25, 26, 27],
VWRL: [20, 21, 21, 22, 23, 23, 25],
};
const POPULAR_HOLDINGS = [
{ symbol: "AAPL", name: "Apple Inc.", price: 212.93 },
{ symbol: "NVDA", name: "NVIDIA Corp.", price: 924.79 },
{ symbol: "AMZN", name: "Amazon.com Inc.", price: 186.51 },
];
const POPULAR_CRYPTO_HOLDINGS = [
{ symbol: "BTC", name: "Bitcoin", price: 98420 },
{ symbol: "ETH", name: "Ethereum", price: 3420 },
];
const MANUAL_ACCOUNT_ID = "manual-tracking-account";
const MANUAL_ACCOUNT_NAME = "Manual tracking account";
function fmtUSD(value) {
return `$${Number(value).toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`;
}
function themeRadius(theme, key, fallback) {
return theme.radius?.[key] ?? fallback;
}
function cardSurfaceStyle(theme, overrides = {}) {
const card = theme.components?.compactCard || theme.components?.card || {};
return {
borderRadius: card.radius ?? themeRadius(theme, "lg", 18),
border: `0.5px solid ${card.border || theme.line}`,
background: card.bg || theme.surface,
...overrides,
};
}
function translucentSurface(theme, color, opacity) {
return alpha(color, opacity);
}
function getToneColor(theme, tone) {
if (tone === "positive" || tone === "healthy") return theme.positive;
if (tone === "negative") return theme.negative;
if (tone === "warning") return theme.warning;
return theme.textDim;
}
function textActionStyle(theme, overrides = {}) {
return {
border: "none",
background: "transparent",
color: theme.text,
fontFamily: FONTS.ui,
fontSize: 12.5,
fontWeight: 500,
cursor: "pointer",
...overrides,
};
}
function secondaryButtonStyle(theme, overrides = {}) {
const button = theme.components?.secondaryButton || {};
return {
borderRadius: button.radius || themeRadius(theme, "md", 14),
border: `0.5px solid ${button.border || theme.line2}`,
background: button.bg || "transparent",
color: button.color || theme.text,
fontFamily: FONTS.ui,
cursor: "pointer",
...overrides,
};
}
function getSeedManualHolding() {
return {
sym: "AAPL",
name: "Apple Inc.",
value: 212.93,
pnlPct: 0,
quantity: 1,
price: 212.93,
currency: "USD",
};
}
function getPortfolioAllocation() {
const buckets = new Map();
const add = (key, label, value) => {
if (!value) return;
const prev = buckets.get(key) || {
key,
label,
value: 0,
color: PORTFOLIO_ALLOCATION_COLORS[key],
};
prev.value += value;
buckets.set(key, prev);
};
BROKERAGES.forEach((brokerage) => {
brokerage.holdings.forEach((holding) => {
if (holding.sym === "CASH") {
add("Cash", "Cash", holding.value);
} else if (
/ETF|Trust|All-World|Emerging Markets|S&P 500|QQQ/i.test(holding.name)
) {
add("ETF", "ETFs", holding.value);
} else {
add("Stocks", "Stocks", holding.value);
}
});
});
CRYPTO_ACCOUNTS.forEach((account) => {
account.holdings.forEach((holding) => {
add("Crypto", "Crypto", holding.value);
});
});
return Array.from(buckets.values()).sort((a, b) => b.value - a.value);
}
function getAggregatedHoldings() {
const holdings = new Map();
BROKERAGES.forEach((brokerage) => {
brokerage.holdings.forEach((holding) => {
if (holding.sym === "CASH") return;
const existing = holdings.get(holding.sym) || {
sym: holding.sym,
name: holding.name,
value: 0,
weightedPnl: 0,
};
existing.value += holding.value;
existing.weightedPnl += holding.value * holding.pnlPct;
holdings.set(holding.sym, existing);
});
});
return Array.from(holdings.values()).map((holding) => ({
...holding,
pnlPct: holding.value ? holding.weightedPnl / holding.value : 0,
}));
}
function getHoldingCards() {
const holdings = getAggregatedHoldings();
const portfolioTotal = BROKERAGES.reduce(
(sum, brokerage) => sum + brokerage.portfolio,
0,
);
const withPortfolioMetric = (holding) => ({
...holding,
metric: `${((holding.value / portfolioTotal) * 100).toFixed(1)}%`,
});
const withPerformanceMetric = (holding) => ({
...holding,
metric: `${holding.pnlPct >= 0 ? "+" : ""}${holding.pnlPct.toFixed(1)}%`,
});
return [
{
title: "Top holdings",
holdings: [...holdings]
.sort((a, b) => b.value - a.value)
.slice(0, 3)
.map(withPortfolioMetric),
},
{
title: "Top performers",
holdings: [...holdings]
.sort((a, b) => b.pnlPct - a.pnlPct)
.slice(0, 3)
.map(withPerformanceMetric),
},
{
title: "Worst performers",
holdings: [...holdings]
.sort((a, b) => a.pnlPct - b.pnlPct)
.slice(0, 3)
.map(withPerformanceMetric),
},
];
}
function InvestmentsScreen({ theme, accent, onNav, onAskHimma }) {
return (
);
}
function InvestmentHero({ theme, accent, onNav }) {
const [activeRange, setActiveRange] = React.useState("1M");
const trend =
INVESTMENT_CHART_TRENDS[activeRange] || INVESTMENT_CHART_TRENDS["1M"];
return (
Portfolio
$142,500.00
+${fmtAED(1420.5, { decimals: 2 })} today
{INVESTMENT_CHART_FILTERS.map((range) => {
const active = range === activeRange;
return (
);
})}
);
}
function PortfolioAllocation({ theme }) {
const allocation = getPortfolioAllocation();
const total = allocation.reduce((sum, item) => sum + item.value, 0);
return (
Current Allocation
By asset class
{allocation.map((item) => (
))}
{allocation.map((item) => {
const pct = (item.value / total) * 100;
return (
{item.label}
{pct.toFixed(0)}%
);
})}
);
}
function InvestmentSparkline({ color, data, label }) {
const width = 340;
const height = 70;
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1;
const points = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * (height - 8) - 4;
return [x, y];
});
const path = "M " + points.map((p) => p.join(" ")).join(" L ");
const area = `${path} L ${width} ${height} L 0 ${height} Z`;
return (
);
}
function HoldingsCarousel({ theme, onNav }) {
const cards = getHoldingCards();
const openHoldings = () => onNav && onNav("investment_holdings");
return (
Holdings
{cards.map((card) => (
))}
);
}
function HoldingSummaryCard({ card, theme, onSeeAll }) {
return (
{card.title}
{card.holdings.map((holding) => (
))}
);
}
function HoldingSummaryRow({ holding, theme }) {
const positive = holding.pnlPct >= 0;
const trend = HOLDING_DAILY_TRENDS[holding.sym] || [
20, 21, 20, 22, 23, 22, 24,
];
return (
{holding.sym}
{holding.name}
{holding.metric}
);
}
function StockLogo({ symbol }) {
const logo = STOCK_LOGOS[symbol] || {
initials: symbol.slice(0, 2),
bg: "#6B7280",
};
return (
1 ? 12 : 15,
fontWeight: 750,
letterSpacing: 0,
flexShrink: 0,
}}
>
{logo.initials}
);
}
function SeeAllHoldingsButton({ theme, onClick }) {
const button = theme.components?.secondaryButton || {};
return (
);
}
function getAccountOptions(manualAccounts = []) {
return [
...BROKERAGES.map((brokerage) => ({
id: brokerage.id,
name: brokerage.name,
holdings: brokerage.holdings,
})),
...manualAccounts,
];
}
function getFilteredHoldingRows(accountIds, manualAccounts = []) {
const selectedIds = new Set(accountIds);
const useAllAccounts = selectedIds.size === 0;
const selectedAccounts = getAccountOptions(manualAccounts).filter(
(account) => useAllAccounts || selectedIds.has(account.id),
);
const holdings = new Map();
selectedAccounts.forEach((account) => {
account.holdings.forEach((holding) => {
if (holding.sym === "CASH") return;
const existing = holdings.get(holding.sym) || {
sym: holding.sym,
name: holding.name,
value: 0,
weightedPnl: 0,
accounts: new Set(),
quantity: null,
price: holding.price,
currency: holding.currency,
};
existing.value += holding.value;
existing.weightedPnl += holding.value * (holding.pnlPct || 0);
existing.accounts.add(account.name);
if (holding.quantity != null) {
existing.quantity =
(existing.quantity || 0) + Number(holding.quantity || 0);
}
holdings.set(holding.sym, existing);
});
});
return Array.from(holdings.values())
.map((holding) => ({
...holding,
pnlPct: holding.value ? holding.weightedPnl / holding.value : 0,
accountLabel: Array.from(holding.accounts).join(", "),
}))
.sort((a, b) => b.value - a.value);
}
function InvestmentHoldingsScreen({ theme, accent, onBack }) {
const [selectedAccounts, setSelectedAccounts] = React.useState([]);
const [manualAccounts, setManualAccounts] = React.useState([]);
const [optionsOpen, setOptionsOpen] = React.useState(false);
const [addStep, setAddStep] = React.useState(null);
const [selectedAsset, setSelectedAsset] = React.useState(null);
const [shareQty, setShareQty] = React.useState("");
const [shareFocused, setShareFocused] = React.useState(false);
const [drafts, setDrafts] = React.useState([]);
const [selectedDraftAccount, setSelectedDraftAccount] = React.useState(null);
const [createAccountOpen, setCreateAccountOpen] = React.useState(false);
const [manualAccountName, setManualAccountName] =
React.useState(MANUAL_ACCOUNT_NAME);
const [accountToast, setAccountToast] = React.useState(false);
const [successToast, setSuccessToast] = React.useState(false);
const [editOpen, setEditOpen] = React.useState(false);
const [editHoldings, setEditHoldings] = React.useState([]);
const [editedEmpty, setEditedEmpty] = React.useState(false);
const [editToast, setEditToast] = React.useState(false);
const holdings = getFilteredHoldingRows(selectedAccounts, manualAccounts);
const accountOptions = getAccountOptions(manualAccounts);
const total = holdings.reduce((sum, holding) => sum + holding.value, 0);
const weightedPnl = total
? holdings.reduce(
(sum, holding) => sum + holding.value * holding.pnlPct,
0,
) / total
: 0;
const filterLabel =
selectedAccounts.length === 0
? "All accounts"
: selectedAccounts.length === 1
? accountOptions.find((account) => account.id === selectedAccounts[0])
?.name || "1 account"
: `${selectedAccounts.length} accounts`;
const closeAddFlow = () => {
setAddStep(null);
setSelectedAsset(null);
setShareQty("");
setShareFocused(false);
setDrafts([]);
setSelectedDraftAccount(null);
setAccountToast(false);
};
const openAddFlow = () => {
setOptionsOpen(false);
setSelectedAsset(null);
setShareQty("");
setDrafts([]);
setSelectedDraftAccount(manualAccounts[0]?.id || null);
setAccountToast(false);
setAddStep("search");
};
const openEditFlow = () => {
const manualAccount = manualAccounts.find(
(account) => account.id === MANUAL_ACCOUNT_ID,
);
const holdingsToEdit = manualAccount
? manualAccount.holdings
: [getSeedManualHolding()];
setOptionsOpen(false);
setSuccessToast(false);
setEditToast(false);
setEditHoldings(holdingsToEdit.map((holding) => ({ ...holding })));
setEditOpen(true);
};
const selectAsset = (asset) => {
setSelectedAsset(asset);
setShareQty("");
setShareFocused(false);
setAddStep("quantity");
};
const goAccountStep = () => {
if (!selectedAsset || !shareQty) return;
const quantity = Number(shareQty) || 0;
const draft = {
id: `${selectedAsset.symbol}-${drafts.length}`,
asset: selectedAsset,
quantity,
value: quantity * selectedAsset.price,
};
setDrafts((items) => [...items, draft]);
setSelectedDraftAccount(manualAccounts[0]?.id || null);
setAddStep("account");
};
const saveManualAccount = () => {
const name = manualAccountName.trim() || MANUAL_ACCOUNT_NAME;
const id = MANUAL_ACCOUNT_ID;
setManualAccounts((accounts) => {
if (accounts.some((account) => account.id === id)) {
return accounts.map((account) =>
account.id === id ? { ...account, name } : account,
);
}
return [...accounts, { id, name, holdings: [] }];
});
setSelectedDraftAccount(id);
setCreateAccountOpen(false);
setAccountToast(true);
};
const saveDraftHoldings = () => {
if (!selectedDraftAccount || drafts.length === 0) return;
setManualAccounts((accounts) =>
accounts.map((account) =>
account.id === selectedDraftAccount
? {
...account,
holdings: [
...account.holdings,
...drafts.map((draft) => ({
sym: draft.asset.symbol,
name: draft.asset.name,
value: draft.value,
pnlPct: 0,
quantity: draft.quantity,
price: draft.asset.price,
currency: "USD",
})),
],
}
: account,
),
);
setSelectedAccounts([selectedDraftAccount]);
closeAddFlow();
setEditedEmpty(false);
setSuccessToast(true);
};
const saveEditedHoldings = () => {
setManualAccounts((accounts) => {
const nextAccount = {
id: MANUAL_ACCOUNT_ID,
name: MANUAL_ACCOUNT_NAME,
holdings: editHoldings,
};
if (accounts.some((account) => account.id === MANUAL_ACCOUNT_ID)) {
return accounts.map((account) =>
account.id === MANUAL_ACCOUNT_ID
? { ...account, holdings: editHoldings }
: account,
);
}
return [...accounts, nextAccount];
});
setSelectedAccounts([MANUAL_ACCOUNT_ID]);
setEditOpen(false);
setEditedEmpty(editHoldings.length === 0);
setEditToast(true);
};
return (
Trading accounts
{editedEmpty ? (
) : (
<>
Holdings
{holdings.map((holding, index) => (
))}
)}
{optionsOpen && (
setOptionsOpen(false)}
onAdd={openAddFlow}
onEdit={openEditFlow}
/>
)}
{addStep && (
{
if (addStep === "quantity") setAddStep("search");
else if (addStep === "account") setAddStep("quantity");
else closeAddFlow();
}}
onSelectAsset={selectAsset}
onShareQty={setShareQty}
onShareFocus={setShareFocused}
onNext={goAccountStep}
onCreateAccount={() => setCreateAccountOpen(true)}
onSelectAccount={setSelectedDraftAccount}
onAddAnother={() => {
setSelectedAsset(null);
setShareQty("");
setShareFocused(false);
setAddStep("search");
}}
onSave={saveDraftHoldings}
onDismissAccountToast={() => setAccountToast(false)}
/>
)}
{createAccountOpen && (
setCreateAccountOpen(false)}
onSave={saveManualAccount}
/>
)}
{successToast && (
setSuccessToast(false)}
/>
)}
{editOpen && (
setEditOpen(false)}
onSave={saveEditedHoldings}
/>
)}
{editToast && (
setEditToast(false)}
/>
)}
);
}
function iconButtonStyle(theme) {
const button = theme.components?.iconButton || {};
return {
width: button.size || 36,
height: button.size || 36,
borderRadius: button.radius || 18,
background: button.bg || "transparent",
border: `0.5px solid ${button.border || theme.line2}`,
color: button.color || theme.text,
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
};
}
function bareIconButtonStyle(theme, size = 30, overrides = {}) {
return {
width: size,
height: size,
borderRadius: themeRadius(theme, "pill", 999),
border: "none",
background: "transparent",
color: theme.textMute,
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
flexShrink: 0,
...overrides,
};
}
function sheetPanelStyle(theme) {
const sheet = theme.components?.sheet || {};
const radius = sheet.radius ?? themeRadius(theme, "sheet", 28);
return {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
background: sheet.bg || theme.surface,
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
border: `0.5px solid ${sheet.border || theme.line}`,
padding: sheet.padding || "18px 18px 30px",
boxShadow: sheet.shadow || theme.shadow?.sheet,
};
}
function HoldingOptionsSheet({ theme, onClose, onAdd, onEdit }) {
return (
}
label="Add holding"
onClick={onAdd}
/>
}
label="Edit holdings"
onClick={onEdit}
/>
);
}
function MainHoldingsEmptyState({ theme }) {
return (
No holdings found
We couldn't find any holdings for this account.
);
}
function EditHoldingsView({
theme,
holdings,
onHoldingsChange,
onCancel,
onSave,
}) {
const [deleteCandidate, setDeleteCandidate] = React.useState(null);
const updateQuantity = (sym, value) => {
const cleanValue = value.replace(/[^\d.]/g, "");
onHoldingsChange((items) =>
items.map((holding) => {
if (holding.sym !== sym) return holding;
const quantity = Number(cleanValue) || 0;
return {
...holding,
quantity: cleanValue,
value: quantity * (holding.price || 0),
};
}),
);
};
const deleteHolding = () => {
if (!deleteCandidate) return;
onHoldingsChange((items) =>
items.filter((holding) => holding.sym !== deleteCandidate.sym),
);
setDeleteCandidate(null);
};
return (
M
{MANUAL_ACCOUNT_NAME}
{holdings.length} holdings
{holdings.length > 0 && (
{holdings.map((holding, index) => (
updateQuantity(holding.sym, value)
}
onDelete={() => setDeleteCandidate(holding)}
/>
))}
)}
{deleteCandidate && (
setDeleteCandidate(null)}
onDelete={deleteHolding}
/>
)}
);
}
function EditHoldingRow({ holding, theme, last, onQuantityChange, onDelete }) {
return (
{holding.sym}
{holding.name}
);
}
function EditHoldingLogo({ symbol }) {
return ;
}
function EditQuantityField({ theme, value, onChange }) {
const input = theme.components?.input || {};
return (
);
}
function EditHoldingsFooter({ theme, onCancel, onSave }) {
return (
);
}
function DeleteHoldingSheet({ theme, onCancel, onDelete }) {
return (
Are you sure you want to delete this holding?
Deleting will remove all history of this holding.
);
}
function OptionLargeButton({ theme, icon, label, onClick }) {
const button = theme.components?.secondaryButton || {};
return (
);
}
function AddHoldingFlow({
theme,
accent,
step,
selectedAsset,
shareQty,
shareFocused,
drafts,
manualAccounts,
selectedDraftAccount,
accountToast,
onClose,
onBack,
onSelectAsset,
onShareQty,
onShareFocus,
onNext,
onCreateAccount,
onSelectAccount,
onAddAnother,
onSave,
onDismissAccountToast,
}) {
const showFooter = step === "quantity" || step === "account";
return (
{accountToast && (
)}
{step === "search" && (
)}
{step === "quantity" && selectedAsset && (
)}
{step === "account" && (
)}
{showFooter && (
)}
{title}
{assets.map((asset, index) => (
onSelectAsset(asset)}
/>
))}
);
}
function AssetPickRow({ asset, theme, last, onClick }) {
return (
|
}
title={asset.symbol}
subtitle={asset.name}
rightTop={
{fmtUSD(asset.price)}
}
/>
);
}
function ShareQuantityStep({
theme,
asset,
shareQty,
focused,
onShareQty,
onFocus,
}) {
return (
{asset.symbol}
{asset.name}
Latest closing share price: {fmtUSD(asset.price)}
onFocus(true)}
onBlur={() => onFocus(false)}
/>
);
}
function FloatingTextInput({
theme,
label,
value,
onChange,
focused,
onFocus,
onBlur,
}) {
const floating = focused || value;
const input = theme.components?.input || {};
return (
onChange(event.target.value.replace(/[^\d.]/g, ""))
}
onFocus={onFocus}
onBlur={onBlur}
inputMode="decimal"
style={{
width: "100%",
height: 58,
borderRadius: input.radius || themeRadius(theme, "lg", 16),
border: `1px solid ${focused ? theme.text : input.border || theme.line2}`,
background: input.bg || theme.bg,
color: theme.text,
fontFamily: FONTS.ui,
fontSize: 17,
padding: "16px 18px 8px",
outline: "none",
}}
/>
);
}
function AccountSelectionStep({
theme,
drafts,
manualAccounts,
selectedDraftAccount,
onCreateAccount,
onSelectAccount,
onAddAnother,
}) {
const account = manualAccounts.find(
(item) => item.id === selectedDraftAccount,
);
return (
Select an account to add your holdings.
{account ? (
onSelectAccount(account.id)}
/>
) : (
No manual account found
Create a new one to continue
)}
Holdings to be added
{drafts.map((draft, index) => (
))}
);
}
function ManualAccountDropdown({ theme, account, onSelect }) {
return (
);
}
function DraftHoldingRow({ draft, theme, last }) {
return (
|
}
title={draft.asset.symbol}
subtitle={`${draft.quantity} share${draft.quantity === 1 ? "" : "s"}`}
rightTop={
{fmtUSD(draft.value)}
}
/>
);
}
function CreateInvestmentAccountModal({
theme,
accountName,
onNameChange,
onClose,
onSave,
}) {
return (
Complete your information
);
}
function WireframeField({ theme, label, value, onChange, disabled }) {
const input = theme.components?.input || {};
return (
onChange && onChange(event.target.value)}
style={{
width: "100%",
height: 56,
borderRadius: input.radius || themeRadius(theme, "lg", 16),
border: `1px solid ${input.border || theme.line2}`,
background: disabled ? theme.surface2 : theme.bg,
color: theme.text,
fontFamily: FONTS.ui,
fontSize: 14,
padding: "14px 18px",
outline: "none",
}}
/>
);
}
function SuccessBanner({ theme, title, body, onClose }) {
const toast = theme.components?.toast || {};
return (
);
}
function EditedHoldingsToast({ theme, onClose }) {
const toast = theme.components?.toast || {};
return (
);
}
function AccountMultiSelect({ theme, selected, accounts, onChange }) {
const [open, setOpen] = React.useState(false);
const selectedSet = new Set(selected);
const label =
selected.length === 0
? "All accounts"
: selected.length === 1
? accounts.find((account) => account.id === selected[0])?.name ||
"1 account"
: `${selected.length} accounts`;
const toggleAccount = (id) => {
const next = selectedSet.has(id)
? selected.filter((accountId) => accountId !== id)
: [...selected, id];
onChange(next);
};
return (
{open && (
{
onChange([]);
setOpen(false);
}}
/>
{accounts.map((account) => (
toggleAccount(account.id)}
/>
))}
)}
);
}
function AccountFilterOption({ theme, label, checked, onClick }) {
return (
);
}
function InvestmentHoldingRow({ holding, total, theme, last }) {
const share = total ? (holding.value / total) * 100 : 0;
const quantity =
holding.quantity == null
? "--"
: Number(holding.quantity).toLocaleString("en-US", {
maximumFractionDigits: 6,
});
return (
|
}
title={holding.name}
subtitle={`Quantity: ${quantity}`}
rightTop={
{fmtAED(holding.value)}
}
rightBottom={
{share.toFixed(1)}%
}
/>
);
}
function overlayStyle(theme, zIndex = 70, modal = false) {
const overlay = theme.components?.overlay || {};
return {
position: "absolute",
inset: 0,
zIndex,
background: modal ? overlay.modalScrim : overlay.scrim,
};
}
function flowFooterStyle(theme) {
return {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
padding: "12px 18px 24px",
background: `linear-gradient(to top, ${theme.bg} 76%, ${theme.bg}00)`,
};
}
function primaryPillStyle(theme) {
const button = theme.components?.primaryButton || {};
return {
width: "100%",
minHeight: 50,
borderRadius: button.radius || 25,
border: "none",
background: button.bg || theme.text,
color: button.color || theme.bg,
fontFamily: FONTS.ui,
fontSize: 14,
fontWeight: 750,
cursor: "pointer",
};
}
function dangerPillStyle(theme) {
const button = theme.components?.dangerButton || {};
return {
width: "100%",
minHeight: 48,
borderRadius: button.radius || 25,
border: "none",
background: button.bg || theme.negative,
color: button.color || theme.bg,
fontFamily: FONTS.ui,
fontSize: 13,
fontWeight: 750,
cursor: "pointer",
};
}
function MarketImpactSection({ theme }) {
return (
Market Impact
{INVESTMENT_IMPACT_CARDS.map((card) => (
))}
);
}
function ImpactCard({ card, theme }) {
const positive = card.tone === "positive";
const tone = positive ? theme.positive : theme.negative;
const Icon = positive ? Ico.arrowUR : Ico.arrowDR;
const promo = theme.components?.promoCard || {};
return (
{card.label}
{card.headline}
Affects:
{card.tickers.map((ticker) => (
[{ticker}]
))}
);
}
function PortfolioRisksSection({ theme }) {
const [openRisks, setOpenRisks] = React.useState({});
const toggleRisk = (label) => {
setOpenRisks((current) => ({
...current,
[label]: !current[label],
}));
};
return (
Portfolio Health
{PORTFOLIO_RISKS.map((risk, index) => (
toggleRisk(risk.label)}
last={index === PORTFOLIO_RISKS.length - 1}
/>
))}
);
}
function RiskItem({ risk, theme, open, onToggle, last }) {
const isWarning = risk.status === "warning";
const isHealthy = risk.status === "healthy";
const Icon = isWarning ? Ico.alert : isHealthy ? Ico.check : null;
const iconColor = isWarning
? theme.warning
: isHealthy
? theme.positive
: theme.textMute;
return (
);
}
function ProfessionalHelpCard({ theme, accent }) {
const promo = theme.components?.promoCard || {};
return (
Consult an expert
Discuss a professional wealth plan with a licensed advisor.
);
}
Object.assign(window, { InvestmentsScreen, InvestmentHoldingsScreen });