@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
1,159 lines (1,147 loc) • 60.2 kB
JavaScript
"use client";
import {
Box,
Text,
themeVars
} from "./chunk-LUHEVXPD.js";
import {
useFunkitTranslation
} from "./chunk-STLOQEN7.js";
// src/providers/FunkitConfigContext.tsx
import {
createContext,
useContext,
useMemo
} from "react";
var DEFAULT_TEXT_CUSTOMIZATIONS = {
virtualFiat: "Deposit with SEPA",
brokerageOrExchange: "Connect Exchange",
debitOrCredit: "Deposit with Card",
accountBalance: "Wallet",
selectAccount: "Select an exchange",
perpsTransferTitle: "Transfer",
sourceMethodTitle: "Your source",
tokensListTitle: "Your tokens",
transferTokens: "Transfer Crypto",
bitcoinLightning: "Bitcoin Lightning",
cashAppLightning: "Cash App",
receiveDropdownTitle: "",
// Default to empty
receiveDropdownLabel: "Asset to Receive",
confirmationScreen: {
payAmountLabel: "You send",
receiveAmountLabel: "You receive"
},
paymentMethodSubtitles: {}
};
var DEFAULT_UI_CUSTOMIZATIONS = {
alignTitle: "center",
alwaysShowTopDivider: false,
showModalTitle: true,
callToActionsUppercase: false,
enableCompactList: false,
checkoutHistory: {
showGetHelpAsAlert: true,
simplifiedUi: false
},
confirmationScreen: {
preferDestinationWhenSame: false,
showAmountSummaryAbovePaymentMethod: false,
showDisclaimerAsAlert: true,
showInstantTimeEstimate: false,
showLeftAlignedDollarValueWithLabel: false,
showPaymentAmountUsd: false,
showReceiveAmountUsd: false,
showSelectedRoute: false,
stepIndicatorType: "spinner",
showTokenAmount: true,
showTransactionDigest: "none"
},
sourceChangeScreen: {
bottomBarCloseButton: {
enabled: false,
labelKey: "common.close"
},
showTargetAssetSelection: false,
showWalletOnInsufficientBalance: false,
showWalletConnect: true,
showCustomTopComponentDivider: false,
paymentMethodIcons: {}
},
inputAmountScreen: {
allowTokenAmountInput: true
},
selectAssetScreen: {
isSecondaryTokenSymbolVisible: true,
navigateOnAssetClick: false
},
transferCryptoScreen: {
showYouSendYouReceive: false
},
withdrawalScreen: {},
selectBrokerageScreen: {},
connectExchangeScreen: {},
customIcons: {},
customFontFamily: {
primary: "",
secondary: "",
tertiary: ""
}
};
var DEFAULT_FUNKIT_CONFIG = {
apiKey: "",
appName: "",
textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
uiCustomizations: DEFAULT_UI_CUSTOMIZATIONS
};
var FunkitConfigContext = createContext(
DEFAULT_FUNKIT_CONFIG
);
function useFunkitConfig() {
const originalFunkitConfig = useContext(FunkitConfigContext);
const { t } = useFunkitTranslation();
const translatedDefaults = useMemo(() => {
return {
virtualFiat: t("textCustomizations.virtualFiat"),
brokerageOrExchange: t("textCustomizations.brokerageOrExchange"),
debitOrCredit: t("textCustomizations.debitOrCredit"),
accountBalance: t("textCustomizations.accountBalance"),
selectAccount: t("textCustomizations.selectAccount"),
perpsTransferTitle: t("perpsTransfer.title"),
sourceMethodTitle: t("textCustomizations.sourceMethodTitle"),
tokensListTitle: t("textCustomizations.tokensListTitle"),
transferTokens: t("textCustomizations.transferTokens"),
bitcoinLightning: t("textCustomizations.bitcoinLightning"),
cashAppLightning: t("textCustomizations.cashAppLightning"),
receiveDropdownTitle: t("textCustomizations.receiveDropdownTitle"),
receiveDropdownLabel: t("textCustomizations.receiveDropdownLabel"),
confirmationScreen: {
payAmountLabel: t("textCustomizations.payAmountLabel"),
receiveAmountLabel: t("textCustomizations.receiveAmountLabel")
},
paymentMethodSubtitles: {}
};
}, [t]);
const finalFunkitConfig = useMemo(() => {
return {
...DEFAULT_FUNKIT_CONFIG,
...originalFunkitConfig,
textCustomizations: {
...translatedDefaults,
...originalFunkitConfig.textCustomizations,
confirmationScreen: {
...translatedDefaults.confirmationScreen,
...originalFunkitConfig.textCustomizations?.confirmationScreen
},
paymentMethodSubtitles: {
...translatedDefaults.paymentMethodSubtitles,
...originalFunkitConfig.textCustomizations?.paymentMethodSubtitles
}
},
uiCustomizations: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations,
...originalFunkitConfig.uiCustomizations,
checkoutHistory: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.checkoutHistory,
...originalFunkitConfig.uiCustomizations?.checkoutHistory
},
confirmationScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.confirmationScreen,
...originalFunkitConfig.uiCustomizations?.confirmationScreen
},
connectExchangeScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.connectExchangeScreen,
...originalFunkitConfig.uiCustomizations?.connectExchangeScreen
},
inputAmountScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.inputAmountScreen,
...originalFunkitConfig.uiCustomizations?.inputAmountScreen
},
selectAssetScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectAssetScreen,
...originalFunkitConfig.uiCustomizations?.selectAssetScreen
},
selectBrokerageScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectBrokerageScreen,
...originalFunkitConfig.uiCustomizations?.selectBrokerageScreen
},
sourceChangeScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen,
...originalFunkitConfig.uiCustomizations?.sourceChangeScreen,
bottomBarCloseButton: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen.bottomBarCloseButton,
...originalFunkitConfig.uiCustomizations?.sourceChangeScreen?.bottomBarCloseButton
}
},
transferCryptoScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.transferCryptoScreen,
...originalFunkitConfig.uiCustomizations?.transferCryptoScreen
},
withdrawalScreen: {
...DEFAULT_FUNKIT_CONFIG.uiCustomizations.withdrawalScreen,
...originalFunkitConfig.uiCustomizations?.withdrawalScreen
}
}
};
}, [originalFunkitConfig, translatedDefaults]);
return finalFunkitConfig;
}
// src/components/FunTooltip/FunTooltip.tsx
import * as Tooltip from "@radix-ui/react-tooltip";
import React, {
createContext as createContext2,
useContext as useContext2,
useState
} from "react";
var TooltipAnchorRefContext = createContext2(null);
// src/components/FunInput/FunInput.tsx
import React5, {
forwardRef,
useEffect as useEffect2,
useState as useState3
} from "react";
import clsx from "clsx";
// src/providers/FunkitThemeProvider.tsx
import React2, { createContext as createContext3, useContext as useContext3, useEffect, useState as useState2 } from "react";
// src/themes/baseTheme.ts
var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
var fontStacks = {
rounded: `SFRounded, ui-rounded, "SF Pro Rounded", ${systemFontStack}`,
system: systemFontStack,
fun: `SF Pro, ${systemFontStack}`
};
var radiusScales = {
large: {
actionButton: "12px",
actionButtonInner: "10px",
connectButton: "12px",
modal: "24px",
modalMobile: "28px",
modalActionButton: "24px",
modalActionButtonMobile: "28px",
summaryBox: "12px",
youPayYouReceive: "24px",
inputAmountSwitcher: "24px",
qrCode: "12px",
tooltip: "4px",
skeleton: "4px",
dropdown: "12px",
dropdownItem: "4px",
dropdownList: "12px",
modalTopbarIcon: "9999px",
withdrawalInput: "12px",
useConnected: "8px"
},
medium: {
actionButton: "10px",
actionButtonInner: "8px",
connectButton: "10px",
modal: "16px",
modalMobile: "18px",
modalActionButton: "16px",
modalActionButtonMobile: "18px",
summaryBox: "10px",
youPayYouReceive: "24px",
inputAmountSwitcher: "24px",
qrCode: "10px",
tooltip: "4px",
skeleton: "4px",
dropdown: "10px",
dropdownItem: "4px",
dropdownList: "10px",
modalTopbarIcon: "9999px",
withdrawalInput: "10px",
useConnected: "8px"
},
none: {
actionButton: "0px",
actionButtonInner: "0px",
connectButton: "0px",
modal: "0px",
modalMobile: "0px",
modalActionButton: "0px",
modalActionButtonMobile: "0px",
summaryBox: "0px",
youPayYouReceive: "0px",
inputAmountSwitcher: "0px",
qrCode: "0px",
tooltip: "0px",
skeleton: "0px",
dropdown: "0px",
dropdownItem: "0px",
dropdownList: "0px",
modalTopbarIcon: "0px",
withdrawalInput: "0px",
useConnected: "0px"
},
small: {
actionButton: "8px",
actionButtonInner: "6px",
connectButton: "8px",
modal: "8px",
modalMobile: "8px",
modalActionButton: "8px",
modalActionButtonMobile: "8px",
summaryBox: "8px",
youPayYouReceive: "24px",
inputAmountSwitcher: "24px",
qrCode: "8px",
tooltip: "4px",
skeleton: "4px",
dropdown: "8px",
dropdownItem: "4px",
dropdownList: "8px",
modalTopbarIcon: "9999px",
withdrawalInput: "8px",
useConnected: "8px"
}
};
var blurs = {
large: {
modalOverlay: "blur(20px)"
},
none: {
modalOverlay: "blur(0px)"
},
small: {
modalOverlay: "blur(8px)"
},
tiny: {
modalOverlay: "blur(4px)"
}
};
var DEFAULT_FONT_WEIGHTS = {
regular: "400",
medium: "500",
// 510 in figma, but chrome no longer supports 510 - lowered to 500
semibold: "600",
// 590 in figma, but chrome no longer supports 590 - raised to 600
bold: "700",
heavy: "800"
};
var DEFAULT_FONT_SIZES = {
"10": { fontSize: "10px", lineHeight: "15px" },
"12": { fontSize: "12px", lineHeight: "14px" },
"13": { fontSize: "13px", lineHeight: "18px" },
"14": { fontSize: "14px", lineHeight: "18px" },
"16": { fontSize: "16px", lineHeight: "20px" },
"18": { fontSize: "18px", lineHeight: "24px" },
"20": { fontSize: "20px", lineHeight: "20px" },
"21": { fontSize: "21px", lineHeight: "21px" },
"40": { fontSize: "40px", lineHeight: "48px" },
"57": { fontSize: "57px", lineHeight: "68px" }
};
var FONT_SIZINGS = {
regular: DEFAULT_FONT_SIZES,
small: {
"8": { fontSize: "8px", lineHeight: "16px" },
"10": { fontSize: "8px", lineHeight: "16px" },
"12": { fontSize: "10px", lineHeight: "16px" },
"13": { fontSize: "10px", lineHeight: "16px" },
"14": { fontSize: "12px", lineHeight: "16px" },
"16": { fontSize: "14px", lineHeight: "18px" },
"18": { fontSize: "14px", lineHeight: "20px" },
"20": { fontSize: "18px", lineHeight: "20px" },
"21": { fontSize: "19px", lineHeight: "19px" },
"23": { fontSize: "20px", lineHeight: "28px" },
"40": { fontSize: "34px", lineHeight: "40px" },
"57": { fontSize: "50px", lineHeight: "60px" }
}
};
var nestedModalZIndexes = {
coinbase: 2147483647,
walletConnect: 99999999999999,
privy: 999999
};
var DEFAULT_MODAL_Z_INDEX = Math.min(...Object.values(nestedModalZIndexes)) - 2;
var baseTheme = ({
borderRadius = "large",
fontStack = "fun",
fontSizing = "regular",
customFontFamily,
customFontWeights = DEFAULT_FONT_WEIGHTS,
customFontSizings = FONT_SIZINGS[fontSizing],
customBorderWidths,
customBorderRadiuses = radiusScales[borderRadius],
customDimensions,
customOpacities,
customSpacings,
customTextTransforms,
overlayBlur = "small",
modalZIndex = DEFAULT_MODAL_Z_INDEX
}) => ({
modalZIndex: String(modalZIndex),
blurs: {
modalOverlay: blurs[overlayBlur].modalOverlay
},
dimensions: {
connectExchangeIconSize: "48px",
cryptoCashToggleIconSize: "20px",
dollarValueSkeletonHeight: "60px",
dollarValueSkeletonWidth: "160px",
inputAmountQuickOptionButtonHeight: "36px",
inputAmountMinHeight: "76px",
modalBottomBarButtonHeight: "34px",
modalTopBarHeight: "56px",
modalTopbarIconSize: "16px",
modalTopbarIconWrapperSize: "32px",
paymentAmountSkeletonBlockHeight: "14px",
paymentAmountSkeletonBlockWidth: "93px",
paymentAmountSkeletonCircleSize: "15px",
paymentMethodItemIconSize: "20px",
selectAssetItemIconSize: "24px",
sourceListGap: "4px",
txBreakdownSkeletonWidth: "72px",
txSummaryLineSkeletonHeight: "14px",
txSummaryLineSkeletonWidth: "54px",
...customDimensions,
modalBottomBarCloseButtonHeight: customDimensions?.modalBottomBarCloseButtonHeight ?? customDimensions?.modalBottomBarButtonHeight ?? "34px"
},
fonts: typeof customFontFamily === "string" ? {
amountValue: customFontFamily,
body: customFontFamily,
buttonTextPrimary: customFontFamily,
buttonTextSecondary: customFontFamily,
buttonTextTertiary: customFontFamily,
dropdownGroupHeader: customFontFamily,
header: customFontFamily,
inputAmount: customFontFamily,
modalTopbarTitle: customFontFamily,
txStatusDescription: customFontFamily,
txStatusTitle: customFontFamily
} : {
amountValue: fontStacks[fontStack],
body: fontStacks[fontStack],
buttonTextPrimary: fontStacks[fontStack],
buttonTextSecondary: fontStacks[fontStack],
buttonTextTertiary: fontStacks[fontStack],
dropdownGroupHeader: fontStacks[fontStack],
header: fontStacks[fontStack],
inputAmount: fontStacks[fontStack],
modalTopbarTitle: fontStacks[fontStack],
txStatusDescription: fontStacks[fontStack],
txStatusTitle: fontStacks[fontStack],
...customFontFamily
},
fontWeight: {
...DEFAULT_FONT_WEIGHTS,
cryptoCashToggle: DEFAULT_FONT_WEIGHTS.medium,
dropdownGroupHeader: DEFAULT_FONT_WEIGHTS.medium,
inputAmount: DEFAULT_FONT_WEIGHTS.medium,
inputLabel: DEFAULT_FONT_WEIGHTS.medium,
inputValue: DEFAULT_FONT_WEIGHTS.medium,
modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
paymentMethodItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
paymentMethodItemTitle: DEFAULT_FONT_WEIGHTS.medium,
selectAssetItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
selectAssetItemTitle: DEFAULT_FONT_WEIGHTS.medium,
sourceListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
txBreakdown: DEFAULT_FONT_WEIGHTS.regular,
txStatusDescription: DEFAULT_FONT_WEIGHTS.regular,
txStatusTitle: DEFAULT_FONT_WEIGHTS.medium,
txSummaryLabel: DEFAULT_FONT_WEIGHTS.medium,
txSummaryValue: DEFAULT_FONT_WEIGHTS.medium,
formOfPaymentsListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
withdrawalYouWillReceiveLabel: DEFAULT_FONT_WEIGHTS.regular,
withdrawalYouWillReceiveValueCrypto: DEFAULT_FONT_WEIGHTS.medium,
withdrawalYouWillReceiveValueUsd: DEFAULT_FONT_WEIGHTS.regular,
...customFontWeights
},
fontSize: {
...FONT_SIZINGS[fontSizing],
body: FONT_SIZINGS[fontSizing][14],
cryptoCashToggle: FONT_SIZINGS[fontSizing][12],
"header-14": { fontSize: "14px", lineHeight: "14px" },
"header-36": { fontSize: "36px", lineHeight: "36px" },
buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
dollarValue: FONT_SIZINGS[fontSizing][40],
dropdownGroupHeader: FONT_SIZINGS[fontSizing][12],
inputAmount: FONT_SIZINGS[fontSizing][57],
inputLabel: customFontSizings[12] ?? FONT_SIZINGS[fontSizing][12],
inputValue: customFontSizings[13] ?? FONT_SIZINGS[fontSizing][13],
modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
paymentMethodItemSubtitle: FONT_SIZINGS[fontSizing][12],
paymentMethodItemTitle: FONT_SIZINGS[fontSizing][12],
selectAssetItemSubtitle: FONT_SIZINGS[fontSizing][10],
selectAssetItemTitle: FONT_SIZINGS[fontSizing][13],
txBreakdown: FONT_SIZINGS[fontSizing][12],
txStatusDescription: FONT_SIZINGS[fontSizing][13],
txStatusTitle: FONT_SIZINGS[fontSizing][13],
txSummaryLabel: FONT_SIZINGS[fontSizing][12],
txSummaryValue: FONT_SIZINGS[fontSizing][12],
withdrawalYouWillReceive: customFontSizings[12] ?? FONT_SIZINGS[fontSizing][12],
youPayYouReceivePrimaryFontSize: FONT_SIZINGS[fontSizing][12],
youPayYouReceiveSecondaryFontSize: FONT_SIZINGS[fontSizing][10],
depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
dropdownItemFontSize: FONT_SIZINGS[fontSizing][12],
sourceListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
formOfPaymentsListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
quickOptionFontSize: FONT_SIZINGS[fontSizing][14],
useConnectedFontSize: FONT_SIZINGS[fontSizing][12],
paymentFeeSummaryTooltip: FONT_SIZINGS[fontSizing][10],
tooltipContent: FONT_SIZINGS[fontSizing][10],
...customFontSizings
},
radii: {
actionButton: radiusScales[borderRadius].actionButton,
actionButtonInner: radiusScales[borderRadius].actionButtonInner,
connectButton: radiusScales[borderRadius].connectButton,
menuButton: radiusScales[borderRadius].connectButton,
modal: radiusScales[borderRadius].modal,
modalMobile: radiusScales[borderRadius].modalMobile,
modalActionButton: radiusScales[borderRadius].modalActionButton,
modalActionButtonMobile: radiusScales[borderRadius].modalActionButtonMobile,
summaryBox: radiusScales[borderRadius].summaryBox,
youPayYouReceive: radiusScales[borderRadius].youPayYouReceive,
inputAmountSwitcher: radiusScales[borderRadius].inputAmountSwitcher,
qrCode: radiusScales[borderRadius].qrCode,
skeleton: radiusScales[borderRadius].skeleton,
tooltip: radiusScales[borderRadius].tooltip,
dropdown: radiusScales[borderRadius].dropdown,
dropdownItem: radiusScales[borderRadius].dropdownItem,
dropdownList: customBorderRadiuses?.dropdownList ?? customBorderRadiuses?.dropdown ?? radiusScales[borderRadius].dropdown,
modalTopbarIcon: radiusScales[borderRadius].modalTopbarIcon,
withdrawalInput: radiusScales[borderRadius].withdrawalInput,
useConnected: radiusScales[borderRadius].useConnected,
...customBorderRadiuses
},
borderWidths: {
activeOptionBorderWidth: "1px",
buttonTertiaryBorderWidth: "0px",
cryptoCashToggleContainerBorderWidth: "0px",
cryptoCashToggleActiveTabBorderWidth: "1px",
cryptoCashToggleInactiveTabBorderWidth: "1px",
txSummaryBoxBorderWidth: "1px",
...customBorderWidths
},
opacities: {
buttonPrimaryDisabled: "1",
...customOpacities
},
spacing: {
confirmationStepMarginTop: "6px",
confirmationStepVerticalGap: "18px",
cryptoCashToggleContainerPadding: "3px",
cryptoCashToggleMarginBottom: "16px",
cryptoCashToggleMarginTop: "24px",
cryptoCashToggleTabPaddingY: "6px",
dropdownItemIconGap: "4px",
dropdownItemPaddingX: "4px",
dropdownItemPaddingY: "6px",
dropdownCompactPaddingX: "6px",
dropdownCompactPaddingY: "6px",
dropdownPaddingX: "12px",
dropdownPaddingY: "12px",
modalBaseHorizontalPadding: "6px",
modalBottomBarButtonPaddingY: "0px",
modalBottomHorizontalPadding: "12px",
modalPaddingBottomUpper: "16px",
modalPaddingBottomLower: "16px",
modalTopBarVerticalTextSpacing: "0px",
selectAssetItemPaddingX: "12px",
selectAssetItemPaddingY: "8px",
selectAssetItemTextGap: "0px",
selectBrokerageItemPaddingX: "12px",
selectBrokerageItemPaddingY: "11px",
selectBrokerageListGap: "0px",
walletConnectorListGap: "10px",
txBreakdownMarginY: "18px",
txBreakdownPaddingX: "12px",
txSummaryBoxPaddingX: "12px",
txSummaryBoxPaddingY: "12px",
txSummaryLineItemPadding: "0px",
txSummaryDividerMarginX: "12px",
txSummaryDividerMarginY: "12px",
verticalSectionGap: "18px",
withdrawalModalPaddingTop: "12px",
youPayYouReceivePaddingLeft: "12px",
youPayYouReceivePaddingRight: "16px",
youPayYouReceivePaddingY: "8px",
inputPaddingX: "12px",
inputPaddingY: "12px",
dropdownActiveItemRegularSizePaddingY: "8px",
assetListDefaultGap: "4px",
dropdownGroupDividerMarginY: "8px",
...customSpacings
},
textTransforms: {
inputAmountQuickOptionButton: "none",
txStatusTitle: "none",
...customTextTransforms
}
});
// src/themes/darkTheme.ts
var accentColors = {
blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
green: { accentColor: "#66CC00", accentColorForeground: "#000" },
orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
white: { accentColor: "#FFF", accentColorForeground: "#000" }
};
var defaultAccentColor = accentColors.white;
var darkTheme = ({
accentColor = defaultAccentColor.accentColor,
accentColorForeground = defaultAccentColor.accentColorForeground,
customColors,
customShadows,
...baseThemeOptions
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
} = {}) => ({
...baseTheme(baseThemeOptions),
colors: {
accentColor,
accentColorForeground,
actionButtonBorder: "rgba(255, 255, 255, 0.04)",
connectButtonBackground: "#000",
connectButtonBackgroundError: "#C60000",
connectButtonText: "#FFF",
connectButtonTextError: "#FFF",
connectionIndicator: "#30E000",
error: accentColors.red.accentColor,
errorBackground: "#F2E6E4",
errorBorder: "rgba(243, 65, 38, 0.2)",
generalBorder: "#292929",
// strokeColor in figma
generalBorderDim: "rgba(255, 255, 255, 0.04)",
menuItemBackground: "rgba(255, 255, 255, 0.03)",
selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
focusedOptionBorder: "#8C8C8C",
standby: "#F6851B",
success: "#66CC00",
delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
// backward compatibility
chainIconBorder: "#fff",
// FUNKIT COLORS
// modal backgrounds
modalBackdrop: "rgba(0, 0, 0, 0.2)",
modalBackground: "#000000",
modalBorder: "#292929",
modalTopbarIcon: "#FFF",
modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
offBackground: "#1F1F1F",
offBackgroundInverse: "#F2F2F2",
hoverState: "#333333",
lightStroke: "#333333",
mediumStroke: "#333333",
heavyStroke: "rgba(117, 117, 117, 0.40)",
strokeColor: "#333333",
secondaryBackground: "#333333",
//Text
primaryText: "#FFF",
secondaryText: "#8C8C8C",
tertiaryText: "rgba(255, 255, 255, 0.35)",
textSelection: "rgba(255, 255, 255, 0.10)",
selectedDropdownItemText: customColors?.primaryText ?? "#FFF",
copyButtonBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
copyButtonBackgroundHover: customColors?.hoverState ?? "#333333",
copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#525252",
useConnectedBackgroundBase: customColors?.mediumStroke ?? "#333333",
useConnectedBackgroundHover: customColors?.mediumStroke ?? "#333333",
copyButtonBorderBase: customColors?.mediumStroke ?? "#333333",
copyButtonBorderHover: customColors?.mediumStroke ?? "#333333",
funFeatureListBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
funFeatureListBackgroundHover: customColors?.hoverState ?? "#333333",
funFeatureListBorderColor: "transparent",
funFeatureListBorderColorHover: "transparent",
selectedDropdownItemBackground: "transparent",
alwaysVisibleLabelBackgroundHover: "transparent",
// input
inputLabel: customColors?.primaryText ?? "#FFF",
inputBackground: "#000000",
inputBackgroundHover: customColors?.offBackground ?? "#1F1F1F",
inputBorderBase: "#333333",
inputBorderHover: "#525252",
// tab
activeTabBorderColor: "#333333",
activeTabBackground: "#333333",
inactiveTabBorderColor: "transparent",
inactiveTabBackgroundBase: "transparent",
inactiveTabBackgroundHover: "transparent",
inactiveTabBackgroundActive: "transparent",
activeTabText: customColors?.primaryText ?? "#FFF",
inactiveTabTextBase: customColors?.secondaryText ?? "#8C8C8C",
inactiveTabHover: customColors?.primaryText ?? "#FFF",
// button
actionColor: "#FFF",
actionColorHover: "rgba(255, 255, 255, 0.8)",
actionColorDisabled: "rgba(255, 255, 255, 0.65)",
buttonPrimary: accentColor,
buttonDisabled: "rgba(255, 255, 255, 0.20)",
buttonTextPrimary: "#000000",
buttonTextHover: "#000000",
buttonTextDisabled: "#000000",
buttonWarning: accentColors.red.accentColor,
buttonSuccess: "#2EA200",
transparent: "transparent",
buttonBackgroundTertiary: "#333333",
buttonBackgroundHoverTertiary: "#333333",
buttonBackgroundDisabledTertiary: "transparent",
buttonTextTertiary: "#FFF",
buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
buttonBackground: "#FFF",
buttonBackgroundHover: "#f2f2f2",
buttonBackgroundPressed: "#FFF",
buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
buttonTextSecondary: "#FFFFFF",
buttonIconBackgroundHover: "#333333",
buttonIconBackgroundPressed: "#333333",
buttonIconStroke: "rgba(255, 255, 255, 0.35)",
buttonBorderTertiary: "transparent",
buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
buttonFocusedOutline: "none",
buttonBorderGradient: "none",
buttonHoverBorderGradient: "none",
buttonDisabledBorderGradient: "none",
// TODO: Make common colors when refactoring the design system
inputAmountQuickOptionBaseBackground: "#1F1F1F",
inputAmountQuickOptionHoverBackground: "#333333",
inputAmountQuickOptionActiveBackground: "#333333",
inputAmountQuickOptionDisabledBackground: "#333333",
inputAmountQuickOptionBaseBorder: "#f2f2f2",
inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
youPayYouReceiveBackground: "#000000",
// modalBackground
youPayYouReceiveBorder: "#333333",
// mediumStroke
youPayYouReceivePrimaryText: "#FFF",
// primaryText
youPayYouReceiveSecondaryText: "#8C8C8C",
// secondaryText
withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#FFF",
withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#FFF",
withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#8C8C8C",
// badges
badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
badgeTextSuccess: "rgb(124, 242, 136)",
newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
newBadgeBorder: "rgba(122, 221, 122, 0.3)",
newBadgeText: "#A4FF9A",
approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
approvedBadgeText: "#8FFFA9",
failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
failedBadgeText: "#F88877",
announceGradientFrom: "#AAAAAA",
announceGradientTo: "#BEBEBE",
fiatPendingGradientFrom: "#AAAAAA",
fiatPendingGradientTo: "#BEBEBE",
fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
fiatAccountIconFill: "#002F5E",
fiatAccountGradientFrom: "#3A82FE",
fiatAccountGradientTo: "#73A7FF",
modalHeaderDivider: "#333333",
// lightStroke
modalFooterDivider: "#333333",
// lightStroke
spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
// 30% buttonTextPrimary
spinnerIndicator: customColors?.primaryText ?? "#000",
// 100% buttonTextPrimary
spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
// 30% buttonTextPrimary
spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
// 100% buttonTextPrimary
// Override colors
...customColors || {},
// option Boxes
optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
// keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
optionBoxBorderedBackground: customColors?.optionBoxBorderedBackground ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#333333",
optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#333333",
optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#333333",
dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#333333",
dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#FFF",
// primaryText
txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
modalBackgroundCheckoutComplete: customColors?.modalBackgroundCheckoutComplete ?? customColors?.modalBackground ?? "#000",
counterRingColor: customColors?.counterRingColor ?? accentColor,
cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent",
qrCodeBackground: customColors?.qrCodeBackground ?? customColors?.modalBackground ?? "#000000",
qrCodeForeground: customColors?.qrCodeForeground ?? customColors?.primaryText ?? "#FFFFFF"
},
shadows: {
connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
qrCode: "0px 0px 0px 1px rgba(255, 255, 255, 0.16)",
buttonShadow: "none",
buttonShadowTertiary: "none",
buttonHoverShadow: "none",
buttonHoverShadowTertiary: "none",
buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
buttonDisabledShadow: "none",
buttonDisabledShadowTertiary: "none",
buttonInnerShadow: "none",
buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
buttonFocusedInnerShadow: "none",
buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
buttonHoverInnerShadow: "none",
buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
buttonDisabledInnerShadow: "none",
buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
selectedDropdownItem: "none",
// Override shadows
...customShadows || {}
},
moonpayTheme: "dark"
});
darkTheme.accentColors = accentColors;
// src/themes/lightTheme.ts
var accentColors2 = {
blue: { accentColor: "#31A3F8", accentColorForeground: "#31A3F859" },
green: { accentColor: "#66CC00", accentColorForeground: "#FFF" },
orange: { accentColor: "#F6851B", accentColorForeground: "#FFF" },
pink: { accentColor: "#FF5CA0", accentColorForeground: "#FFF" },
purple: { accentColor: "#5F5AFA", accentColorForeground: "#FFF" },
red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
white: { accentColor: "#000000", accentColorForeground: "#FFF" }
};
var defaultAccentColor2 = accentColors2.white;
var lightTheme = ({
accentColor = defaultAccentColor2.accentColor,
accentColorForeground = defaultAccentColor2.accentColorForeground,
customColors,
customShadows,
...baseThemeOptions
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
} = {}) => ({
...baseTheme(baseThemeOptions),
colors: {
accentColor,
accentColorForeground,
actionButtonBorder: "rgba(0, 0, 0, 0.04)",
connectButtonBackground: "#FFF",
connectButtonBackgroundError: "#C60000",
connectButtonText: "#25292E",
connectButtonTextError: "#FFF",
connectionIndicator: "#30E000",
error: accentColors2.red.accentColor,
errorBackground: "#F2E6E4",
errorBorder: "rgba(243, 65, 38, 0.2)",
generalBorder: "#F7F7F7",
// strokeColor in figma
generalBorderDim: "rgba(0, 0, 0, 0.03)",
menuItemBackground: "#FCFCFC",
selectedOptionBorder: "#F7F7F7",
focusedOptionBorder: "#737373",
standby: "#F6851B",
success: "#66CC00",
delayedStatusIcon: customColors?.secondaryText ?? "#737373",
// backward compatibility
chainIconBorder: "#fff",
// FUNKIT COLORS
// modal backgrounds
modalBackdrop: "rgba(0, 0, 0, 0.2)",
modalTopbarIcon: "#000",
modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#F7F7F7",
modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#F0F0F0",
modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(0, 0, 0, 0.35)",
modalBackground: "#FFF",
modalBorder: "#F7F7F7",
offBackground: "#F7F7F7",
offBackgroundInverse: "#333333",
hoverState: "#F0F0F0",
lightStroke: "#F7F7F7",
mediumStroke: "#F0F0F0",
heavyStroke: "#E5E5E5",
strokeColor: "#E8E8E8",
secondaryBackground: "#F7F7F7",
//Text
primaryText: "#000",
secondaryText: "#737373",
tertiaryText: "rgba(0, 0, 0, 0.35)",
textSelection: "rgba(0, 0, 0, 0.10)",
selectedDropdownItemText: customColors?.primaryText ?? "#000",
copyButtonBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
copyButtonBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#E5E5E5",
useConnectedBackgroundBase: customColors?.mediumStroke ?? "#F0F0F0",
useConnectedBackgroundHover: customColors?.mediumStroke ?? "#F0F0F0",
copyButtonBorderBase: customColors?.mediumStroke ?? "#F0F0F0",
copyButtonBorderHover: customColors?.mediumStroke ?? "#F0F0F0",
funFeatureListBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
funFeatureListBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
funFeatureListBorderColor: "transparent",
funFeatureListBorderColorHover: "transparent",
selectedDropdownItemBackground: "transparent",
alwaysVisibleLabelBackgroundHover: "transparent",
// input
inputLabel: customColors?.primaryText ?? "#000",
inputBackground: "#FFFFFF",
inputBackgroundHover: customColors?.offBackground ?? "#F7F7F7",
inputBorderBase: "#F0F0F0",
inputBorderHover: "#E5E5E5",
// tab
activeTabBorderColor: "#F7F7F7",
activeTabBackground: "#F7F7F7",
inactiveTabBorderColor: "transparent",
inactiveTabBackgroundBase: "transparent",
inactiveTabBackgroundHover: "transparent",
inactiveTabBackgroundActive: "transparent",
activeTabText: customColors?.primaryText ?? "#000",
inactiveTabTextBase: customColors?.secondaryText ?? "#737373",
inactiveTabHover: customColors?.primaryText ?? "#000",
// button
actionColor: "#000",
actionColorHover: "rgba(0, 0, 0, 0.7)",
actionColorDisabled: "rgba(0, 0, 0, 0.50)",
buttonPrimary: accentColor,
buttonDisabled: "#31A3F826",
buttonWarning: accentColors2.red.accentColor,
buttonSuccess: "#2EA200",
buttonTextPrimary: "#FFFFFF",
buttonTextHover: "#FFF",
buttonTextDisabled: "#FFF",
transparent: "transparent",
buttonBackgroundTertiary: "#F7F7F7",
buttonBackgroundHoverTertiary: "#F0F0F0",
buttonBackgroundDisabledTertiary: "transparent",
buttonTextTertiary: "#000",
buttonTextDisabledTertiary: "rgba(0, 0, 0, 0.5)",
buttonBackground: "#000",
buttonBackgroundHover: "#333333",
buttonBackgroundPressed: "#000",
buttonBackgroundDisabled: "rgba(0, 0, 0, 0.5)",
buttonTextSecondaryDisabled: "rgba(0, 0, 0, 0.5)",
buttonTextSecondary: "#000000",
buttonIconBackgroundHover: "#F7F7F7",
buttonIconBackgroundPressed: "#F0F0F0",
buttonIconStroke: "rgba(0, 0, 0, 0.35)",
buttonBorderTertiary: "transparent",
buttonBorderFocusedTertiary: "rgba(0, 0, 0, 0.35)",
buttonFocusedOutline: "none",
buttonBorderGradient: "none",
buttonHoverBorderGradient: "none",
buttonDisabledBorderGradient: "none",
// TODO: Make common colors when refactoring the design system
inputAmountQuickOptionBaseBackground: "#F7F7F7",
inputAmountQuickOptionHoverBackground: "#F0F0F0",
inputAmountQuickOptionActiveBackground: "#F0F0F0",
inputAmountQuickOptionDisabledBackground: "#F7F7F7",
inputAmountQuickOptionBaseBorder: "#F7F7F7",
inputAmountQuickOptionHoverBorder: "rgba(0, 0, 0, 0.35)",
inputAmountQuickOptionActiveBorder: "rgba(0, 0, 0, 0.35)",
inputAmountQuickOptionFocusedBorder: "rgba(0, 0, 0, 0.35)",
inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
youPayYouReceiveBackground: "#FFF",
// modalBackground
youPayYouReceiveBorder: "#F0F0F0",
// mediumStroke
youPayYouReceivePrimaryText: "#000",
// primaryText
youPayYouReceiveSecondaryText: "#737373",
// secondaryText
withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#000",
withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#000",
withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#737373",
// badges
badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
badgeTextSuccess: "rgb(124, 242, 136)",
newBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
newBadgeBorder: "rgba(122, 221, 122, 0.5)",
newBadgeText: "#028320",
approvedBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
approvedBadgeBorder: "rgba(109, 216, 109, 0.5)",
approvedBadgeText: "#028320",
failedBadgeBackground: "rgba(255, 61, 61, 0.08)",
failedBadgeBorder: "rgba(0, 0, 0, 0.03)",
failedBadgeText: "#C2341E",
announceGradientFrom: "#595959",
announceGradientTo: "#9C9C9C",
fiatPendingGradientFrom: "#454545",
fiatPendingGradientTo: "#747474",
fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.16)",
fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.12)",
fiatStatusIconBorder: "rgba(0, 0, 0, 0.03)",
fiatAccountIconFill: "#E7F3FE",
fiatAccountGradientFrom: "#055DF5",
fiatAccountGradientTo: "#4C8DFD",
modalHeaderDivider: "#F7F7F7",
// lightStroke
modalFooterDivider: "#F7F7F7",
// lightStroke
spinnerBackground: customColors?.mediumStroke ?? "rgba(255, 255, 255, 0.3)",
// 30% buttonTextPrimary
spinnerIndicator: customColors?.primaryText ?? "#FFF",
// 100% buttonTextPrimary
spinnerBackgroundVerifyAccount: "rgba(255, 255, 255, 0.3)",
// 30% buttonTextPrimary
spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#FFF",
// 100% buttonTextPrimary
// Override colors
...customColors || {},
// option Boxes
optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
// keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
optionBoxBorderedBackground: customColors?.optionBoxBorderedBackground ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#000",
// primaryText
txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
modalBackgroundCheckoutComplete: customColors?.modalBackgroundCheckoutComplete ?? customColors?.modalBackground ?? "#FFF",
counterRingColor: customColors?.counterRingColor ?? accentColor,
cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent",
qrCodeBackground: customColors?.qrCodeBackground ?? customColors?.modalBackground ?? "#FFF",
qrCodeForeground: customColors?.qrCodeForeground ?? customColors?.primaryText ?? "#000"
},
shadows: {
connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
dropdown: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
notification: "0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
qrCode: "0px 0px 0px 1px rgba(0, 0, 0, 0.10), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 24px 0px rgba(8, 7, 7, 0.10)",
buttonShadow: "none",
buttonShadowTertiary: customShadows?.buttonShadow ?? "none",
buttonFocusedShadow: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
buttonHoverShadow: "none",
buttonHoverShadowTertiary: "none",
buttonDisabledShadow: "none",
buttonDisabledShadowTertiary: customShadows?.buttonDisabledShadow ?? "none",
buttonInnerShadow: "none",
buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
buttonFocusedInnerShadow: "none",
buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
buttonHoverInnerShadow: "none",
buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
buttonDisabledInnerShadow: "none",
buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
selectedDropdownItem: "none",
// Override shadows
...customShadows || {}
},
moonpayTheme: "light"
});
lightTheme.accentColors = accentColors2;
// src/providers/FunkitThemeProvider.tsx
var DEFAULT_THEME_SET = {
lightTheme: lightTheme(),
darkTheme: darkTheme()
};
var DEFAULT_THEME = DEFAULT_THEME_SET.darkTheme;
var ThemeIdContext = createContext3(void 0);
var ThemeContext = createContext3({
activeTheme: DEFAULT_THEME,
lightTheme: void 0,
darkTheme: void 0,
setTheme: () => {
return;
},
toggleTheme: () => {
return;
},
themeColorScheme: void 0
});
var useActiveTheme = () => {
const {
activeTheme,
setTheme,
lightTheme: lightTheme2,
darkTheme: darkTheme2,
toggleTheme,
themeColorScheme
} = useContext3(ThemeContext);
return {
activeTheme,
/** Overrides the currently active `theme` with disregard to the `theme` provided to the `FunkitProvider`, ie. `toggleTheme` will switch to the `theme` provided to the `FunkitProvider`, not the theme set by `setTheme` */
setTheme,
/** Returns the `light` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `lightTheme` and `darkTheme` making them the same */
lightTheme: lightTheme2,
/** Returns the `dark` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `darkTheme` and `lightTheme` making them the same */
darkTheme: darkTheme2,
/** Toggles between `light` and `dark` themes as long as they were passed to the `FunkitProvider`, if only a single theme object was passed toggling will be disabled */
toggleTheme,
/** Returns an indication whether a `light` or a `dark` theme should be currently active, has meaning only if a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it reflects the system color scheme */
themeColorScheme
};
};
// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
import React3 from "react";
// src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts
var animateSkeletonClass = "dj0x602 _1rsrm2f15a";
// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
function FunSkeletonBlock({
borderRadius = "skeleton",
fontSize,
height,
width = "full",
...props
}) {
const { activeTheme } = useActiveTheme();
const cssHeight = height ? activeTheme.dimensions[height] || (height.endsWith("px") ? height : `${height}px`) : activeTheme.fontSize[fontSize].lineHeight;
return /* @__PURE__ */ React3.createElement(
Box,
{
borderRadius,
className: animateSkeletonClass,
width,
...props,
style: { height: cssHeight, ...props.style }
}
);
}
// src/components/Icons/SearchIcon.tsx
import React4 from "react";
var SearchIcon = () => {
return /* @__PURE__ */ React4.createElement(
"svg",
{
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React4.createElement(
"path",
{
d: "M6.45041 12.9008C5.17464 12.9008 3.92752 12.5225 2.86676 11.8138C1.80599 11.105 0.979229 10.0975 0.491012 8.91887C0.00279446 7.74023 -0.124946 6.44321 0.123947 5.19199C0.37284 3.94074 0.987179 2.79139 1.88928 1.88928C2.79139 0.987179 3.94074 0.37284 5.19199 0.123947C6.44321 -0.124946 7.74023 0.00279446 8.91887 0.491012C10.0975 0.979229 11.105 1.80599 11.8138 2.86676C12.5225 3.92752 12.9008 5.17464 12.9008 6.45041C12.9008 7.29744 12.7339 8.13625 12.4098 8.91887C12.0856 9.70148 11.6105 10.4126 11.0115 11.0115C10.4126 11.6105 9.70148 12.0856 8.91887 12.4098C8.13625 12.7339 7.29744 12.9008 6.45041 12.9008ZM6.45041 1.29351C5.43386 1.29351 4.44014 1.59496 3.59491 2.15972C2.74968 2.72448 2.0909 3.52721 1.70189 4.46637C1.31287 5.40554 1.21108 6.43893 1.4094 7.43596C1.60772 8.43299 2.09724 9.34881 2.81604 1