@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
1,176 lines (1,146 loc) • 41.1 kB
JavaScript
"use client";
import {
FunInput,
FunSkeletonBlock,
TooltipAnchorRefContext
} from "./chunk-E3USJY7A.js";
import {
Box,
Text,
themeVars
} from "./chunk-LUHEVXPD.js";
import {
useFunkitTranslation
} from "./chunk-STLOQEN7.js";
import {
POLYMARKET_PERPS_ROUTING_ID,
POLYMARKET_PREDICTIONS_ROUTING_ID
} from "./chunk-YFHTV7DT.js";
import {
POLYGON_USDCE,
PUSD_TOKEN
} from "./chunk-6PIIYPQK.js";
import {
logger
} from "./chunk-AHYOV7AV.js";
// src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
import React12 from "react";
import { getAddress } from "viem";
import { polygon } from "viem/chains";
// src/components/Dropdown/AccountSelectDropdown.tsx
import React11, { useEffect as useEffect4 } from "react";
// src/components/Dropdown/BaseDropdown.tsx
import { isMobile } from "@funkit/utils";
import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
import React10, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
// src/hooks/useScrollDivider.ts
import { useCallback, useEffect, useState } from "react";
var useScrollDivider = () => {
const [refElement, setRefElement] = useState(null);
const ref = useCallback((node) => setRefElement(node), []);
const [isTop, setIsTop] = useState(true);
const [isAtBottom, setIsAtBottom] = useState(false);
const [isScrollable, setIsScrollable] = useState(false);
const [isScrolling, setIsScrolling] = useState(false);
useEffect(() => {
const content = refElement;
if (!content || !window.ResizeObserver) {
return;
}
const handleScrollPositionChange = () => {
const { scrollTop, scrollHeight, clientHeight } = content;
setIsTop(scrollTop === 0);
setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 1);
setIsScrollable(scrollHeight > clientHeight + 2);
};
const handleContentChange = () => {
handleScrollPositionChange();
setTimeout(handleScrollPositionChange, 500);
};
const onScrollChange = () => {
handleScrollPositionChange();
setIsScrolling(true);
};
const onScrollEnd = () => setIsScrolling(false);
content.addEventListener("scrollend", onScrollEnd);
content.addEventListener("scroll", onScrollChange);
const resizeObserver = new window.ResizeObserver(handleContentChange);
resizeObserver.observe(content);
const mutationObserver = new MutationObserver(handleContentChange);
mutationObserver.observe(content, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ["style", "class"]
});
handleScrollPositionChange();
return () => {
content.removeEventListener("scroll", onScrollChange);
content.removeEventListener("scrollend", onScrollEnd);
resizeObserver.unobserve(content);
mutationObserver.disconnect();
};
}, [refElement]);
return {
ref,
hasTopDivider: !isTop,
hasBottomDivider: isScrollable,
isAtBottom,
isScrolling,
isScrollable
};
};
// src/providers/FunkitProvider.tsx
import { LogLevel, initializeRelayClient } from "@funkit/fun-relay";
import { QueryClientProvider } from "@tanstack/react-query";
import React8, {
createContext,
useContext,
useEffect as useEffect2,
useMemo,
useRef
} from "react";
// src/utils/tokenMath.ts
import { formatCurrencyAndStringify } from "@funkit/utils";
import * as dnum from "dnum";
import { formatUnits } from "viem";
function floorToDecimals(value, decimals) {
const d = dnum.from(value, decimals);
return dnum.toNumber(d, decimals);
}
function formatUsdFlooredToCent(balanceUsd) {
return formatCurrencyAndStringify(floorToDecimals(balanceUsd, 2));
}
// src/components/Icons/CheckIcon.tsx
import React from "react";
var CheckIcon = ({
size = 16,
className
}) => /* @__PURE__ */ React.createElement(
"svg",
{
width: size,
height: size,
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className
},
/* @__PURE__ */ React.createElement(
"path",
{
d: "M12.4919 4.88281L6.25757 11.1172L3.50781 8",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round",
pathLength: "100"
}
)
);
// src/components/Dropdown/BaseDropdownItem.tsx
import { noop } from "@funkit/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import React2 from "react";
import clsx from "clsx";
// src/components/Dropdown/BaseDropdownItem.css.ts
var disabledDropdownItemStyles = "_18hhw3k3 _18hhw3k2";
var enabledDropdownItemStyles = "_18hhw3k1 _18hhw3k0";
// src/components/Dropdown/BaseDropdownItem.tsx
function BaseDropdownItem({
iconComponent,
label,
description,
id,
onClick = noop,
isSelected = false,
isDisabled = false,
borderRadius = "connectButton",
horizontalIconGap = "dropdownItemIconGap",
tagComponent,
horizontalPadding = "dropdownItemPaddingX",
verticalPadding = "dropdownItemPaddingY"
}) {
return /* @__PURE__ */ React2.createElement(
DropdownMenu.Item,
{
disabled: isDisabled,
onSelect: () => onClick(id),
asChild: true
},
/* @__PURE__ */ React2.createElement(
Box,
{
width: "full",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "24",
paddingY: verticalPadding,
paddingX: horizontalPadding,
className: clsx(
isDisabled ? disabledDropdownItemStyles : enabledDropdownItemStyles
),
boxShadow: isSelected ? "selectedDropdownItem" : void 0,
borderRadius
},
/* @__PURE__ */ React2.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: horizontalIconGap
},
iconComponent && /* @__PURE__ */ React2.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
/* @__PURE__ */ React2.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React2.createElement(
Text,
{
size: "dropdownItemFontSize",
weight: "medium",
color: isSelected ? "selectedDropdownItemText" : void 0
},
label
), description != null && /* @__PURE__ */ React2.createElement(Text, { size: "12", color: "secondaryText" }, description))
),
/* @__PURE__ */ React2.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "16"
},
tagComponent,
/* @__PURE__ */ React2.createElement(
Box,
{
width: "16",
height: "16",
alignItems: "center",
justifyContent: "center",
color: isSelected ? "selectedDropdownItemText" : "transparent"
},
/* @__PURE__ */ React2.createElement(CheckIcon, null)
)
)
)
);
}
var BaseDropdownItem_default = BaseDropdownItem;
// src/components/Icons/CaretDownIcon.tsx
import clsx2 from "clsx";
import React3 from "react";
// src/components/Icons/CaretDownIcon.css.ts
var caretClosed = "_1gjdf1i3";
var caretOpened = "_1gjdf1i2";
// src/components/Icons/CaretDownIcon.tsx
var CaretDownIcon = () => {
return /* @__PURE__ */ React3.createElement(
"svg",
{
width: "8",
height: "5",
viewBox: "0 0 8 5",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React3.createElement(
"path",
{
d: "M3.45163 2.92973L0.879121 0.393174C0.654314 0.188182 0.317464 0.217886 0.126753 0.459527C-0.0639587 0.701168 -0.036324 1.06324 0.188483 1.26824L3.60944 4.64138C3.65478 4.68988 3.70789 4.72919 3.76623 4.7574C3.83874 4.79249 3.91764 4.80968 3.99714 4.80771C4.07647 4.80576 4.15489 4.78486 4.22578 4.74655C4.23264 4.74283 4.23943 4.73894 4.24614 4.7349C4.28505 4.71152 4.32107 4.68295 4.35332 4.64987L7.82907 1.18704C8.04528 0.97163 8.0581 0.608604 7.8577 0.376205C7.6573 0.143806 7.31956 0.130027 7.10335 0.345432L4.51922 2.91996C4.51922 2.94623 4 3.43025 4 3.43025L3.45163 2.92973Z",
fill: "currentColor"
}
)
);
};
var AnimatedCaretDownIcon = ({
expanded,
color = "primaryText",
compact = false
}) => {
const animationClassName = clsx2(
expanded !== void 0 && (expanded ? caretOpened : caretClosed)
);
if (compact) {
return /* @__PURE__ */ React3.createElement(
Box,
{
color,
width: "8",
height: "8",
display: "flex",
alignItems: "center",
justifyContent: "center",
className: animationClassName
},
/* @__PURE__ */ React3.createElement(CaretDownIcon, null)
);
}
return /* @__PURE__ */ React3.createElement(
Box,
{
color,
width: "16",
height: "16",
display: "flex",
alignItems: "center",
justifyContent: "center",
className: animationClassName
},
/* @__PURE__ */ React3.createElement(
Box,
{
width: "8",
height: "8",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
/* @__PURE__ */ React3.createElement(CaretDownIcon, null)
)
);
};
// src/hooks/usePolymarketAccountBalances.ts
import {
skipToken,
useQuery,
useQueryClient
} from "@tanstack/react-query";
import * as dnum2 from "dnum";
var DEFAULT_BALANCE_REFETCH_MS = 1e3;
var polymarketAccountBalanceQueryKey = (address) => ["polymarket", "accountBalanceUsd", address ?? null];
var polymarketBalanceSettleUntilQueryKey = (address) => ["polymarket", "accountBalanceSettleUntil", address];
async function fetchAccountBalance(queryClient, getBalanceUsd, queryKey) {
const [, , address] = queryKey;
if (address === null) {
throw new Error("polymarket balance query ran without an address");
}
try {
const serverUsd = await getBalanceUsd();
const settleUntil = queryClient.getQueryData(
polymarketBalanceSettleUntilQueryKey(address)
);
const displayedUsd = queryClient.getQueryData(
polymarketAccountBalanceQueryKey(address)
);
if (settleUntil !== void 0 && Date.now() < settleUntil && displayedUsd !== void 0) {
return displayedUsd;
}
return serverUsd;
} catch (error) {
logger.warn("polymarket:accountBalance:fetchFailed", {
address,
error: String(error)
});
throw error;
}
}
function useAccountBalance(account, refetchIntervalMs) {
const queryClient = useQueryClient();
const getBalanceUsd = account?.getBalanceUsd;
const address = account?.address;
const query = useQuery({
queryKey: polymarketAccountBalanceQueryKey(address),
// `skipToken` disables the query when the account isn't configured (the
// perps-transfer config is optional). It is *not* a fallback for a missing
// balance — the getter is the single source of truth.
queryFn: getBalanceUsd && address ? ({ queryKey }) => fetchAccountBalance(queryClient, getBalanceUsd, queryKey) : skipToken,
refetchInterval: refetchIntervalMs,
// The poll interval is the freshness contract: a reader mounting within it
// (e.g. navigating between the deposit picker and the transfer step) reads
// the cached balance as-is instead of kicking off an extra mount fetch —
// that's what makes the navigation flash-free *and* fetch-free.
staleTime: refetchIntervalMs
});
return { balanceUsd: query.data };
}
function usePolymarketAccountBalances(accounts, options) {
const refetchIntervalMs = options?.refetchIntervalMs ?? DEFAULT_BALANCE_REFETCH_MS;
return {
predictions: useAccountBalance(accounts.predictions, refetchIntervalMs),
perps: useAccountBalance(accounts.perps, refetchIntervalMs)
};
}
// src/components/FunNoResults/FunNoResults.tsx
import React6 from "react";
// src/components/Icons/CoinsIcon.tsx
import React4 from "react";
var CoinsIcon = ({
size = 48,
bgColor = "#141C41",
iconColor = "#878A98"
}) => {
return /* @__PURE__ */ React4.createElement(
"svg",
{
width: size,
height: size,
viewBox: "0 0 48 49",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_30657_22302)" }, /* @__PURE__ */ React4.createElement(
"path",
{
d: "M24 1C36.9787 1 47.5 11.5213 47.5 24.5C47.5 37.4787 36.9787 48 24 48C11.0213 48 0.5 37.4787 0.5 24.5C0.5 11.5213 11.0213 1 24 1Z",
fill: bgColor,
stroke: bgColor
}
), /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip1_30657_22302)" }, /* @__PURE__ */ React4.createElement(
"path",
{
d: "M25 17C25 18.1046 22.5376 19 19.5 19C16.4624 19 14 18.1046 14 17M25 17C25 15.8954 22.5376 15 19.5 15C16.4624 15 14 15.8954 14 17M25 17V18.5M14 17V29C14 30.1046 16.4624 31 19.5 31M19.5 23C19.3315 23 19.1647 22.9972 19 22.9918C16.1967 22.9 14 22.0433 14 21M19.5 27C16.4624 27 14 26.1046 14 25M34 23.5C34 24.6046 31.5376 25.5 28.5 25.5C25.4624 25.5 23 24.6046 23 23.5M34 23.5C34 22.3954 31.5376 21.5 28.5 21.5C25.4624 21.5 23 22.3954 23 23.5M34 23.5V31C34 32.1046 31.5376 33 28.5 33C25.4624 33 23 32.1046 23 31V23.5M34 27.25C34 28.3546 31.5376 29.25 28.5 29.25C25.4624 29.25 23 28.3546 23 27.25",
stroke: iconColor,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
))),
/* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_30657_22302" }, /* @__PURE__ */ React4.createElement(
"rect",
{
width: "48",
height: "48",
fill: "white",
transform: "translate(0 0.5)"
}
)), /* @__PURE__ */ React4.createElement("clipPath", { id: "clip1_30657_22302" }, /* @__PURE__ */ React4.createElement(
"rect",
{
width: "24",
height: "24",
fill: "white",
transform: "translate(12 12)"
}
)))
);
};
// src/components/Icons/SearchSkeletonIcon.tsx
import React5 from "react";
var SearchSkeletonIcon = () => {
return /* @__PURE__ */ React5.createElement(
"svg",
{
width: "122",
height: "81",
viewBox: "0 0 122 81",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React5.createElement("g", { clipPath: "url(#clip0_7590_15835)" }, /* @__PURE__ */ React5.createElement(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M99.5636 34.0159C92.9099 34.0159 87.5159 39.4099 87.5159 46.0636C87.5159 52.7174 92.9099 58.1114 99.5636 58.1114C106.217 58.1114 111.611 52.7174 111.611 46.0636C111.611 39.4099 106.217 34.0159 99.5636 34.0159ZM83.5 46.0636C83.5 37.1919 90.6919 30 99.5636 30C108.435 30 115.627 37.1919 115.627 46.0636C115.627 49.7758 114.368 53.1938 112.254 55.9139L120.912 64.5722C121.696 65.3564 121.696 66.6277 120.912 67.4119C120.128 68.196 118.856 68.196 118.072 67.4119L109.414 58.7536C106.694 60.8681 103.276 62.1273 99.5636 62.1273C90.6919 62.1273 83.5 54.9353 83.5 46.0636Z",
fill: "currentColor"
}
), /* @__PURE__ */ React5.createElement(
"path",
{
d: "M117.5 8H4.5C2.29086 8 0.5 9.79086 0.5 12V20C0.5 22.2091 2.29086 24 4.5 24H117.5C119.709 24 121.5 22.2091 121.5 20V12C121.5 9.79086 119.709 8 117.5 8Z",
fill: "currentColor"
}
), /* @__PURE__ */ React5.createElement(
"path",
{
d: "M71.5 30H4.5C2.29086 30 0.5 31.7909 0.5 34V42C0.5 44.2091 2.29086 46 4.5 46H71.5C73.7091 46 75.5 44.2091 75.5 42V34C75.5 31.7909 73.7091 30 71.5 30Z",
fill: "currentColor"
}
), /* @__PURE__ */ React5.createElement(
"path",
{
d: "M71.5 52H4.5C2.29086 52 0.5 53.7909 0.5 56V64C0.5 66.2091 2.29086 68 4.5 68H71.5C73.7091 68 75.5 66.2091 75.5 64V56C75.5 53.7909 73.7091 52 71.5 52Z",
fill: "currentColor"
}
)),
/* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement("clipPath", { id: "clip0_7590_15835" }, /* @__PURE__ */ React5.createElement(
"rect",
{
width: "121",
height: "81",
fill: "white",
transform: "translate(0.5)"
}
)))
);
};
// src/components/FunNoResults/FunNoResults.tsx
var FunNoResults = ({
text,
title,
variant = "default",
actionButton
}) => {
return /* @__PURE__ */ React6.createElement(
Box,
{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: variant === "default" ? "12" : "16",
color: "secondaryText",
style: { flex: 1 }
},
variant === "default" && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(SearchSkeletonIcon, null), /* @__PURE__ */ React6.createElement(Text, { color: "secondaryText", size: "10" }, text)),
variant === "actionable" && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
CoinsIcon,
{
bgColor: themeVars.colors.offBackground,
iconColor: themeVars.colors.actionColor
}
), /* @__PURE__ */ React6.createElement(
Box,
{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "12"
},
/* @__PURE__ */ React6.createElement(
Box,
{
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
gap: "8"
},
title && /* @__PURE__ */ React6.createElement(Text, { size: "14", color: "primaryText" }, title),
/* @__PURE__ */ React6.createElement(Text, { color: "secondaryText", size: "12" }, text)
),
actionButton && /* @__PURE__ */ React6.createElement(Box, null, actionButton)
))
);
};
// src/components/Icons/SwitchIcon.tsx
import React7 from "react";
var SwitchIcon = () => {
return /* @__PURE__ */ React7.createElement(
"svg",
{
width: "15",
height: "14",
viewBox: "0 0 15 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React7.createElement(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.96967 4.86358C0.676777 4.57069 0.676777 4.09582 0.96967 3.80292L3.63634 1.13626C3.92923 0.843363 4.4041 0.843363 4.697 1.13626L7.36366 3.80292C7.65656 4.09582 7.65656 4.57069 7.36366 4.86358C7.07077 5.15648 6.5959 5.15648 6.303 4.86358L4.91667 3.47725L4.91667 12.3333C4.91667 12.7475 4.58088 13.0833 4.16667 13.0833C3.75245 13.0833 3.41667 12.7475 3.41667 12.3333L3.41667 3.47725L2.03033 4.86358C1.73744 5.15648 1.26256 5.15648 0.96967 4.86358ZM7.63634 9.13626C7.92923 8.84336 8.4041 8.84336 8.697 9.13626L10.0833 10.5226V1.66659C10.0833 1.25237 10.4191 0.916586 10.8333 0.916586C11.2475 0.916586 11.5833 1.25237 11.5833 1.66659V10.5226L12.9697 9.13626C13.2626 8.84336 13.7374 8.84336 14.0303 9.13626C14.3232 9.42915 14.3232 9.90402 14.0303 10.1969L11.3637 12.8636C11.0708 13.1565 10.5959 13.1565 10.303 12.8636L7.63634 10.1969C7.34344 9.90402 7.34344 9.42915 7.63634 9.13626Z",
fill: "currentColor"
}
)
);
};
// src/providers/FunkitProvider.tsx
var ThemeIdContext = createContext(void 0);
var attr = "data-rk";
var createThemeRootProps = (id) => ({ [attr]: id || "" });
var useThemeRootProps = () => {
const id = useContext(ThemeIdContext);
return createThemeRootProps(id);
};
// src/components/Dropdown/BaseActiveDropdownItem.tsx
import React9 from "react";
// src/components/Dropdown/BaseActiveDropdownItem.css.ts
var baseStyles = "_1dewiqw0";
// src/components/Dropdown/BaseDropdown.css.ts
var BORDER_RADIUS = "dropdown";
var baseDropdownItemWrapperStyles = "_1nns6ys3 _1rsrm2f17";
var scrollGradientWrapperStyles = "_1nns6ys1";
var scrollableDropdownStyles = "_1nns6ys0";
// src/components/Dropdown/BaseActiveDropdownItem.tsx
function BaseActiveDropdownItem({
iconComponent,
label,
isOpened,
onClick,
horizontalIconGap = "dropdownItemIconGap",
alwaysVisibleLabel,
tagComponent,
tagPosition = "start",
size = "regular",
color = "primaryText",
arrowColor = "secondaryText",
background,
labelStyle,
compactIcon = false
}) {
return /* @__PURE__ */ React9.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "6",
cursor: "pointer",
onClick,
background: background ?? {
base: "dropdownActiveItemBackgroundBase",
hover: "dropdownActiveItemBackgroundHover"
},
borderColor: {
base: "dropdownActiveItemBorderBase",
hover: "dropdownActiveItemBorderHover"
},
borderWidth: size === "compact" ? "0" : "1",
borderRadius: BORDER_RADIUS,
borderStyle: "solid",
paddingY: size === "compact" ? "2" : size === "large" ? "10" : "dropdownActiveItemRegularSizePaddingY",
paddingX: size === "compact" ? "4" : size === "large" ? "8" : "dropdownPaddingX",
className: baseStyles
},
/* @__PURE__ */ React9.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: horizontalIconGap,
style: size === "compact" ? void 0 : { flex: "1 0 auto" }
},
alwaysVisibleLabel && /* @__PURE__ */ React9.createElement(Box, { style: { flex: 1 } }, /* @__PURE__ */ React9.createElement(Text, { color: "secondaryText", size: "12" }, alwaysVisibleLabel)),
/* @__PURE__ */ React9.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: horizontalIconGap,
background: {
base: "transparent",
hover: "alwaysVisibleLabelBackgroundHover"
},
...alwaysVisibleLabel ? {} : { style: { flex: 1 } }
},
/* @__PURE__ */ React9.createElement(
Box,
{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: horizontalIconGap,
...alwaysVisibleLabel ? { style: { flexDirection: "row-reverse" } } : {}
},
tagPosition === "start" && tagComponent,
/* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", gap: horizontalIconGap }, iconComponent && /* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent), /* @__PURE__ */ React9.createElement(
Text,
{
color,
size: "dropdownItemFontSize",
weight: "medium",
style: labelStyle
},
label
))
),
/* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, tagPosition === "end" && tagComponent, /* @__PURE__ */ React9.createElement(
AnimatedCaretDownIcon,
{
expanded: isOpened,
color: arrowColor,
compact: compactIcon
}
))
)
)
);
}
var BaseActiveDropdownItem_default = BaseActiveDropdownItem;
// src/components/Dropdown/BaseDropdown.utils.ts
var NO_SELECTION_VALUE = "";
var ADDITIONAL_GROUP_KEY = "__additional__";
function buildAllOptions(options, allowUnselect, unselectLabel) {
if (allowUnselect) {
return [
{
label: unselectLabel ?? "",
value: NO_SELECTION_VALUE
},
...options
];
}
return options;
}
function filterOptions(allOptions, searchInput) {
const search = searchInput?.trim().toLowerCase() ?? "";
return allOptions.filter(
(option) => option.label.toLowerCase().includes(search)
);
}
function organizeDropdownGroups(filteredOptions, groups, additionalGroup, additionalGroupLabel) {
const organizedGroups = [];
if (!groups) {
organizedGroups.push({
key: ADDITIONAL_GROUP_KEY,
label: void 0,
options: filteredOptions
});
return {
organizedGroups,
organizedOptions: filteredOptions
};
}
const unselectOption = filteredOptions.find(
(option) => option.value === NO_SELECTION_VALUE
);
if (unselectOption) {
organizedGroups.push({
key: NO_SELECTION_VALUE,
label: void 0,
options: [unselectOption]
});
}
const optionsByValue = new Map(
filteredOptions.filter((option) => option.value !== NO_SELECTION_VALUE).map((option) => [option.value, option])
);
const inflatedGroups = groups.map((group) => ({
...group,
// Only take the options that actually exist
// Note that this preserves the ordering of `group.values`
options: group.values.map((value) => optionsByValue.get(value)).filter((option) => !!option)
})).filter((group) => group.options.length > 0);
const hasNonEmptyGroup = inflatedGroups.length > 0;
for (const group of inflatedGroups) {
organizedGroups.push({
key: group.key,
label: group.label,
options: group.options
});
if (additionalGroup === "others") {
for (const option of group.options) {
optionsByValue.delete(option.value);
}
}
}
if (optionsByValue.size > 0) {
organizedGroups.push({
key: ADDITIONAL_GROUP_KEY,
// Only show additional group label if there actually are other groups
label: hasNonEmptyGroup ? additionalGroupLabel : void 0,
options: [...optionsByValue.values()]
});
}
const organizedOptions = organizedGroups.flatMap((group) => group.options);
return { organizedGroups, organizedOptions };
}
// src/components/Dropdown/BaseDropdown.tsx
var HORIZONTAL_ICON_GAP = "4";
var activeDropdownItemSize = {
compact: "18",
regular: "36",
large: "40"
};
function BaseDropdown({
activeItemProps,
value,
options,
groups,
additionalGroup = "others",
additionalGroupLabel,
allowUnselect = false,
unselectLabel,
onOptionSelected,
onOpen,
renderDropdownOption,
searchableOptions = false,
searchPlaceholder,
placeholder,
resetSearchOnClose = true,
openToTopOnMobile = true,
alwaysOpenToTop = false,
openDropdownFullWidth = true,
isLoading = false,
preloadIconUrls,
horizontalIconGap = HORIZONTAL_ICON_GAP,
openDropdownBackgroundColor = "openDropdownBackgroundColor",
size = "regular",
label,
maxDropdownHeight,
dropdownWidth,
dropdownAlign = "end",
testId
}) {
const { t } = useFunkitTranslation();
const themeRootProps = useThemeRootProps();
const isMobileDevice = isMobile();
const [isOpened, setIsOpened] = useState2(false);
const [searchInput, setSearchInput] = useState2("");
const { ref: scrollRef, hasTopDivider, isAtBottom } = useScrollDivider();
const allOptions = useMemo2(
() => buildAllOptions(options, allowUnselect, unselectLabel),
[options, allowUnselect, unselectLabel]
);
const selectedOption = allOptions.find((option) => option.value === value);
const prevIsOpenedRef = useRef2(false);
const portalThemeRef = useRef2(null);
const handleSearch = (event) => {
setSearchInput(event.target.value);
};
const filteredOptions = useMemo2(
() => filterOptions(allOptions, searchInput),
[allOptions, searchInput]
);
const { organizedGroups, organizedOptions } = useMemo2(
() => organizeDropdownGroups(
filteredOptions,
groups,
additionalGroup,
additionalGroupLabel
),
[additionalGroup, additionalGroupLabel, filteredOptions, groups]
);
const handleOpenChange = useCallback2(
(open) => {
setIsOpened(open);
if (open) {
onOpen?.();
} else {
resetSearchOnClose && setSearchInput("");
}
},
[onOpen, resetSearchOnClose]
);
useEffect3(() => {
if (isOpened && !prevIsOpenedRef.current) {
prevIsOpenedRef.current = true;
if (selectedOption) {
const selectedOptionIndex = organizedOptions.findIndex(
(option) => option.value === selectedOption.value
);
if (selectedOptionIndex !== -1) {
requestAnimationFrame(() => {
const selectedOptionElement = document.getElementById(
`${selectedOption.value}-dropdown-item`
);
selectedOptionElement?.scrollIntoView({
behavior: "instant",
block: "center"
});
});
}
}
} else if (!isOpened) {
prevIsOpenedRef.current = false;
}
}, [isOpened, selectedOption, organizedOptions]);
const dropdownSide = alwaysOpenToTop || openToTopOnMobile && isMobileDevice ? "top" : "bottom";
return /* @__PURE__ */ React10.createElement(Box, { display: "flex", flexDirection: "column", gap: "4", testId }, label && /* @__PURE__ */ React10.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React10.createElement(
DropdownMenu2.Root,
{
open: isOpened,
onOpenChange: handleOpenChange,
modal: false
},
/* @__PURE__ */ React10.createElement(
Box,
{
position: "relative",
display: size === "compact" ? "flex" : void 0
},
isLoading ? /* @__PURE__ */ React10.createElement(FunSkeletonBlock, { height: activeDropdownItemSize[size] }) : /* @__PURE__ */ React10.createElement(DropdownMenu2.Trigger, { asChild: true }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement(
BaseActiveDropdownItem_default,
{
color: !selectedOption && !activeItemProps?.label && !!placeholder ? "secondaryText" : "primaryText",
...activeItemProps,
size,
horizontalIconGap,
isOpened,
label: activeItemProps?.label ?? selectedOption?.label ?? placeholder ?? ""
}
))),
/* @__PURE__ */ React10.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React10.createElement(
DropdownMenu2.Content,
{
...themeRootProps,
ref: portalThemeRef,
side: dropdownSide,
sideOffset: dropdownSide === "top" ? 8 : 6,
align: dropdownAlign,
className: "funkit-dropdown-content",
style: {
zIndex: `calc(${themeVars.modalZIndex} + 1)`,
width: dropdownWidth ? `${dropdownWidth}px` : openDropdownFullWidth ? "var(--radix-dropdown-menu-trigger-width)" : void 0,
transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
},
onCloseAutoFocus: (e) => e.preventDefault()
},
/* @__PURE__ */ React10.createElement(TooltipAnchorRefContext.Provider, { value: portalThemeRef }, /* @__PURE__ */ React10.createElement(
Box,
{
background: openDropdownBackgroundColor,
borderColor: "transparent",
borderWidth: "1",
borderRadius: "dropdownList",
borderStyle: "solid",
boxShadow: "dropdown",
className: maxDropdownHeight ? scrollGradientWrapperStyles : void 0,
"data-fade-top": maxDropdownHeight && hasTopDivider ? "true" : "false",
"data-fade-bottom": maxDropdownHeight && !isAtBottom ? "true" : "false"
},
/* @__PURE__ */ React10.createElement(
Box,
{
className: maxDropdownHeight ? scrollableDropdownStyles : void 0,
ref: maxDropdownHeight ? scrollRef : void 0,
style: { maxHeight: maxDropdownHeight }
},
/* @__PURE__ */ React10.createElement(Box, { display: "flex", flexDirection: "column" }, searchableOptions && /* @__PURE__ */ React10.createElement(Box, { paddingTop: "8", paddingX: "8" }, /* @__PURE__ */ React10.createElement(
FunInput,
{
placeholder: searchPlaceholder ?? t("common.searchTokens"),
value: searchInput,
onChange: handleSearch,
prefixIcon: "SearchIcon"
}
)), organizedOptions.length === 0 ? /* @__PURE__ */ React10.createElement(FunNoResults, { text: t("common.noResultsFound") }) : /* @__PURE__ */ React10.createElement(
Box,
{
as: "ul",
display: "flex",
flexDirection: "column",
paddingY: size === "compact" ? "dropdownCompactPaddingY" : "dropdownPaddingY"
},
organizedGroups.map(
({
key: groupKey,
label: groupLabel,
options: optionsInGroup
}, groupIndex) => /* @__PURE__ */ React10.createElement(React10.Fragment, { key: groupKey }, groupIndex > 0 && /* @__PURE__ */ React10.createElement(
Box,
{
height: "1",
background: "lightStroke",
marginY: "dropdownGroupDividerMarginY"
}
), groupLabel && /* @__PURE__ */ React10.createElement(
Box,
{
paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
},
/* @__PURE__ */ React10.createElement(
Box,
{
paddingX: "dropdownItemPaddingX",
paddingY: "dropdownItemPaddingY"
},
/* @__PURE__ */ React10.createElement(
Text,
{
color: "dropdownGroupHeader",
font: "dropdownGroupHeader",
size: "dropdownGroupHeader",
weight: "dropdownGroupHeader"
},
groupLabel
)
)
), optionsInGroup.map((singleOption) => {
const isSelected = singleOption.value === selectedOption?.value;
return /* @__PURE__ */ React10.createElement(
Box,
{
key: singleOption.value,
paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
},
/* @__PURE__ */ React10.createElement(
Box,
{
id: `${singleOption.value}-dropdown-item`,
as: "li",
background: {
base: isSelected ? "selectedDropdownItemBackground" : "transparent",
hover: "offBackground"
},
className: baseDropdownItemWrapperStyles,
onClick: () => {
onOptionSelected?.(singleOption);
}
},
renderDropdownOption(
singleOption,
isSelected
)
)
);
}))
)
))
)
))
)),
preloadIconUrls && /* @__PURE__ */ React10.createElement(
Box,
{
display: "none",
"aria-hidden": true,
style: { position: "absolute", top: "-100%", left: "-100%" }
},
preloadIconUrls.map((url, index) => /* @__PURE__ */ React10.createElement("img", { key: `${url}-${index}`, src: url, alt: "" }))
)
)
));
}
var BaseDropdown_default = BaseDropdown;
// src/components/Dropdown/AccountSelectDropdown.tsx
var ACCOUNTS_GROUP = "accounts";
var ACTION_GROUP = "action";
function AccountSelectDropdown({
accounts,
selectedValue,
onSelect,
action,
prefixLabel,
label,
size,
dropdownWidth,
testId
}) {
const actionIdCollidesWithAccount = !!action && accounts.some((account) => account.value === action.id);
const actionId = action?.id;
useEffect4(() => {
if (actionIdCollidesWithAccount) {
logger.warn("accountSelectDropdown:actionIdCollidesWithAccountValue", {
actionId
});
}
}, [actionIdCollidesWithAccount, actionId]);
const options = [
...accounts.map((account) => ({
value: account.value,
label: account.label
})),
...action ? [{ value: action.id, label: action.label }] : []
];
const groups = action ? [
{
key: ACCOUNTS_GROUP,
label: "",
values: accounts.map((account) => account.value)
},
{ key: ACTION_GROUP, label: "", values: [action.id] }
] : void 0;
return /* @__PURE__ */ React11.createElement(
BaseDropdown_default,
{
testId,
label,
size,
dropdownWidth,
value: selectedValue,
options,
groups,
activeItemProps: { alwaysVisibleLabel: prefixLabel },
renderDropdownOption: (option, isSelected) => {
if (action && option.value === action.id) {
return /* @__PURE__ */ React11.createElement(
BaseDropdownItem_default,
{
id: option.value,
label: option.label,
iconComponent: action.icon && // Render the icon in the theme's primary text colour
// (the icon uses `currentColor`), matching the label.
/* @__PURE__ */ React11.createElement(Box, { display: "flex", color: "primaryText" }, action.icon),
horizontalIconGap: "8",
onClick: action.onSelect
}
);
}
const account = accounts.find((item) => item.value === option.value);
return /* @__PURE__ */ React11.createElement(
BaseDropdownItem_default,
{
id: option.value,
label: option.label,
description: account?.description,
isSelected,
onClick: onSelect
}
);
}
}
);
}
// src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
var ACCOUNT_DROPDOWN_OPTIONS_WIDTH = 264;
var BALANCE_PLACEHOLDER = "\u2014";
function formatBalance(balanceUsd) {
return balanceUsd === void 0 ? BALANCE_PLACEHOLDER : formatUsdFlooredToCent(balanceUsd);
}
function PolymarketDepositAccountDropdown({
onStepChange,
modalState,
dynamicRoutingId,
applyDynamicTargetAssetCandidate,
predictions,
perps
}) {
const { t } = useFunkitTranslation();
const balances = usePolymarketAccountBalances({ predictions, perps });
const selectedRoutingId = dynamicRoutingId === POLYMARKET_PERPS_ROUTING_ID ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID;
const accountCandidate = (routingId, recipient) => ({
tokenAddress: POLYGON_USDCE,
tokenChainId: polygon.id.toString(),
tokenSymbol: PUSD_TOKEN.symbol,
iconSrc: PUSD_TOKEN.iconSrc,
dynamicRoutingId: routingId,
customRecipient: recipient
});
const handleSelectAccount = (routingId) => {
const isPerps = routingId === POLYMARKET_PERPS_ROUTING_ID;
applyDynamicTargetAssetCandidate?.(
accountCandidate(
isPerps ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID,
// Checksum so the recipient agrees with createPolymarketDepositConfig's
// initial customRecipient (integrator addresses aren't guaranteed EIP-55).
isPerps ? getAddress(perps.address) : getAddress(predictions.address)
)
);
};
return /* @__PURE__ */ React12.createElement(
AccountSelectDropdown,
{
prefixLabel: t("perpsTransfer.depositTo"),
dropdownWidth: ACCOUNT_DROPDOWN_OPTIONS_WIDTH,
accounts: [
{
value: POLYMARKET_PREDICTIONS_ROUTING_ID,
label: t("perpsTransfer.predictions"),
description: formatBalance(balances.predictions.balanceUsd)
},
{
value: POLYMARKET_PERPS_ROUTING_ID,
label: t("perpsTransfer.perps"),
description: formatBalance(balances.perps.balanceUsd)
}
],
selectedValue: selectedRoutingId,
onSelect: handleSelectAccount,
action: {
id: "transfer-between-accounts",
label: t("perpsTransfer.transferBetweenAccounts"),
icon: /* @__PURE__ */ React12.createElement(SwitchIcon, null),
// Navigation is absent on the loading skeleton; the action only fires
// on the interactive screen. The transfer step reads balances from the
// same shared cache, so none need to be threaded through here.
onSelect: () => {
if (onStepChange && modalState) {
onStepChange({
...modalState,
step: "perps_transfer" /* PERPS_TRANSFER */
});
}
}
}
}
);
}
export {
PolymarketDepositAccountDropdown
};