@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
491 lines (482 loc) • 18.3 kB
JavaScript
"use client";
import {
AsyncImage,
preloadRemoteImages
} from "./chunk-2NBYHUIW.js";
import {
Box,
Text
} from "./chunk-LUHEVXPD.js";
import {
useFunkitTranslation
} from "./chunk-STLOQEN7.js";
import "./chunk-AHYOV7AV.js";
// src/clients/fanatics.tsx
import React4, { useEffect, useMemo } from "react";
// src/components/FunOptionBox/FunOptionBox.tsx
import clsx from "clsx";
import React, { useRef } from "react";
// src/components/FunOptionBox/FunOptionBox.css.ts
var funOptionBoxStyle = { baseStyle: "_1rfcluh0", compactListStyle: "_1rfcluh1", defaultBorder: "_1rsrm2f2aa _1rsrm2f2ah _1rsrm2f1rx", defaultModeNotActiveBorder: "_1rsrm2f2am _1rsrm2f2at _1rsrm2f1rx _1rsrm2f1n", activeBorder: "_1rsrm2f1rs", disabledOptionBorder: "_1rsrm2f1ts", defaultBackground: "_1rsrm2f1ia _1rsrm2f11t", borderedBackground: "_1rsrm2f1ig _1rsrm2f11t", activeBackground: "_1rsrm2f1ia _1rsrm2f18n _1rsrm2f18o", uninteractiveBackground: "_1rsrm2f1im" };
// src/components/FunOptionBox/FunOptionBox.tsx
function FunOptionBox({
isActive,
isCompactList,
onClick,
paddingX = "15",
paddingY = "12",
type = "default",
as = "button",
borderStyle = "solid",
borderWidth = "1",
borderRadius = "connectButton",
display = "flex",
alignItems = "center",
gap = "24",
justifyContent = "space-between",
color = "primaryText",
children,
disabled,
...boxProps
}) {
const isClickable = !!onClick && !disabled;
const ref = useRef(null);
return /* @__PURE__ */ React.createElement(
Box,
{
ref,
as,
borderStyle,
borderWidth: isActive ? "activeOptionBorderWidth" : borderWidth,
borderRadius,
display,
alignItems,
gap,
justifyContent,
color,
paddingY,
paddingX,
disabled,
tabIndex: isClickable ? 0 : void 0,
cursor: isClickable ? "pointer" : disabled ? "not-allowed" : "default",
style: { opacity: disabled ? 0.5 : 1 },
className: clsx(
funOptionBoxStyle.baseStyle,
isCompactList && funOptionBoxStyle.compactListStyle,
isActive ? funOptionBoxStyle.activeBorder : (
// Render a transparent border when the in DEFAULT mode and is not active, to prevent the pixels from shifting around when a border is applied on selection
type === "default" ? funOptionBoxStyle.defaultModeNotActiveBorder : funOptionBoxStyle.defaultBorder
),
disabled && funOptionBoxStyle.disabledOptionBorder,
isClickable ? isActive ? funOptionBoxStyle.activeBackground : type === "bordered" ? funOptionBoxStyle.borderedBackground : funOptionBoxStyle.defaultBackground : funOptionBoxStyle.uninteractiveBackground
),
onClick: isClickable ? (event) => {
onClick(event);
ref.current?.blur();
} : void 0,
...boxProps
},
children
);
}
// src/components/Icons/BitcoinIcon.tsx
import React2 from "react";
var BitcoinIcon = ({ size = 16 }) => {
return /* @__PURE__ */ React2.createElement(
"svg",
{
width: size,
height: size,
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React2.createElement(
"path",
{
d: "M11.1467 7.04C11.6133 6.52667 11.8533 5.85333 11.76 5.12C11.6133 3.86667 10.5067 2.89333 9.24 2.89333H9.06667V1.33333H7.73333V2.89333H6.93333V1.33333H5.6V2.89333H3.33333V4.22667H4.4C4.76 4.22667 5.06667 4.53333 5.06667 4.89333V11.1067C5.06667 11.4667 4.76 11.7733 4.4 11.7733H3.33333V13.1067H5.6V14.6667H6.93333V13.1067H7.73333V14.6667H9.06667V13.1067H9.4C10.8267 13.1067 12.0533 12.0267 12.2 10.6133C12.3067 9.70667 11.9467 8.86667 11.3333 8.28C11.28 8.22667 11.2133 8.16 11.1467 8.10667V7.04ZM6.4 4.22667H9.06667C9.8 4.22667 10.4 4.82667 10.4 5.56C10.4 6.29333 9.8 6.89333 9.06667 6.89333H6.4V4.22667ZM9.4 11.7733H6.4V9.10667H9.4C10.1333 9.10667 10.7333 9.70667 10.7333 10.44C10.7333 11.1733 10.1333 11.7733 9.4 11.7733Z",
fill: "currentColor"
}
)
);
};
// src/components/Icons/New/CashIcon.tsx
import React3 from "react";
var CashIcon = ({ size = 16 }) => {
return /* @__PURE__ */ React3.createElement(
"svg",
{
width: size,
height: size,
viewBox: "0 0 19 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React3.createElement(
"path",
{
d: "M9.375 2.5a3.125 3.125 0 1 0 0 6.25 3.125 3.125 0 0 0 0-6.25m0 5a1.875 1.875 0 1 1 0-3.75 1.875 1.875 0 0 1 0 3.75m8.75-7.5H.625A.625.625 0 0 0 0 .625v10a.625.625 0 0 0 .625.625h17.5a.624.624 0 0 0 .625-.625v-10A.625.625 0 0 0 18.125 0m-3.621 10H4.246A4.44 4.44 0 0 0 1.25 7.004V4.246A4.44 4.44 0 0 0 4.246 1.25h10.258A4.43 4.43 0 0 0 17.5 4.246v2.758A4.44 4.44 0 0 0 14.504 10M17.5 2.92a3.2 3.2 0 0 1-1.67-1.67h1.67zM2.92 1.25a3.2 3.2 0 0 1-1.67 1.67V1.25zM1.25 8.33c.75.323 1.347.92 1.67 1.67H1.25zM15.83 10c.323-.75.92-1.347 1.67-1.67V10z",
fill: "currentColor"
}
)
);
};
// src/consts/funkit.ts
import { FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS } from "@funkit/chains";
var FUN_ORG_NAME = "Fun.xyz";
// src/clients/fanatics.tsx
var BaseBanner = ({
title,
description,
children,
...boxProps
}) => {
return /* @__PURE__ */ React4.createElement(Box, { ...boxProps }, /* @__PURE__ */ React4.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React4.createElement(
Text,
{
color: "primaryText",
style: {
fontFamily: "var(--font-anton)",
fontSize: "36px",
lineHeight: 1
}
},
title
), description && /* @__PURE__ */ React4.createElement(Text, { color: "secondaryText", size: "14", weight: "regular" }, description)), children);
};
var VerticalBorder = ({
style,
...boxProps
}) => /* @__PURE__ */ React4.createElement(
Box,
{
as: "span",
borderColor: "accentColor",
borderStyle: "solid",
borderWidth: "1",
borderRadius: "full",
width: "2",
height: "20",
display: "inline",
style,
...boxProps
}
);
function FanaticsSourceScreenBanner({ isNewUser = false, apy = "4.0" }) {
const title = isNewUser ? "CHOOSE HOW TO DEPOSIT" : "DEPOSIT";
const description = isNewUser ? "Add funds so you're ready when you find a market." : void 0;
return /* @__PURE__ */ React4.createElement(BaseBanner, { title, description }, !!apy && /* @__PURE__ */ React4.createElement(
Text,
{
color: "accentColor",
size: "14",
weight: "regular",
style: { marginTop: "10px" }
},
/* @__PURE__ */ React4.createElement(VerticalBorder, { marginRight: "8" }),
" Earn ",
/* @__PURE__ */ React4.createElement("strong", null, apy, "% APY"),
" on your balance"
));
}
function FanaticsSelectTokenBanner() {
return /* @__PURE__ */ React4.createElement(
BaseBanner,
{
title: "SELECT TOKEN",
description: "Select a token from your balance that you want to use for deposit.",
marginBottom: "12"
}
);
}
function FanaticsSelectBrokerageBanner() {
useEffect(() => {
preloadRemoteImages(
"https://sdk-cdn.fun.xyz/clients/fanatics/fanatics-brokerage-logo.svg",
"https://sdk-cdn.fun.xyz/clients/fanatics/icons/shield-icon.svg",
"https://sdk-cdn.fun.xyz/clients/fanatics/icons/lock-icon.svg"
);
}, []);
return /* @__PURE__ */ React4.createElement(
BaseBanner,
{
title: "CHOOSE AN EXCHANGE",
description: "Choose a wallet to connect and complete your transfer.",
marginBottom: "24"
}
);
}
function FanaticsTransferCryptoBanner() {
return /* @__PURE__ */ React4.createElement(
BaseBanner,
{
title: "SEND CRYPTO",
description: "Select the token and network, then send that crypto to the address below to top up your account.",
marginBottom: "32"
}
);
}
function FanaticsWithdrawalBanner() {
return /* @__PURE__ */ React4.createElement(
BaseBanner,
{
title: "WITHDRAW CRYPTO",
description: "Enter the address, token, and network where you want to receive your funds.",
marginBottom: "32"
}
);
}
function FanaticsCustomConnectBrokerageScreen({
exchangeIcon,
exchangeName
}) {
const { t } = useFunkitTranslation();
const guarantees = useMemo(() => {
return [
{
title: t("brokerage.credentialsNeverStored"),
description: t("brokerage.dataEncrypted", {
appName: FUN_ORG_NAME,
exchangeName
}),
icon: /* @__PURE__ */ React4.createElement(
AsyncImage,
{
src: "https://sdk-cdn.fun.xyz/clients/fanatics/icons/shield-icon.svg",
alt: "Shield Icon",
width: 20,
height: 20
}
)
},
{
title: t("brokerage.twoFaAlwaysRequired"),
description: t("brokerage.transfersRequireApproval"),
icon: /* @__PURE__ */ React4.createElement(
AsyncImage,
{
src: "https://sdk-cdn.fun.xyz/clients/fanatics/icons/lock-icon.svg",
alt: "Lock Icon",
width: 20,
height: 20
}
)
}
];
}, [exchangeName, t]);
return /* @__PURE__ */ React4.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React4.createElement(
Box,
{
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "left",
gap: "16"
},
/* @__PURE__ */ React4.createElement(
Box,
{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
},
/* @__PURE__ */ React4.createElement(Box, { style: { marginRight: "-10px" } }, /* @__PURE__ */ React4.createElement(
AsyncImage,
{
src: "https://sdk-cdn.fun.xyz/clients/fanatics/fanatics-brokerage-logo.svg",
alt: "Fanatics Brokerage Icon",
width: 66,
height: 80
}
)),
/* @__PURE__ */ React4.createElement(
Box,
{
borderColor: "transparent",
borderRadius: "full",
borderStyle: "solid",
borderWidth: "4",
color: "primaryText",
overflow: "hidden"
},
exchangeIcon
)
),
/* @__PURE__ */ React4.createElement(
Box,
{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
textAlign: "left",
gap: "8",
width: "full"
},
/* @__PURE__ */ React4.createElement(
Text,
{
font: "header",
color: "primaryText",
as: "h2",
size: "header-36",
textTransform: "uppercase",
weight: "regular"
},
t("brokerage.thirdPartyConnectionMessageTitle", {
exchangeName
})
),
/* @__PURE__ */ React4.createElement(Text, { color: "secondaryText", size: "body", weight: "regular" }, t("brokerage.thirdPartyConnectionMessageDescription", {
exchangeName
}))
)
), /* @__PURE__ */ React4.createElement(Box, { display: "flex", flexDirection: "column" }, guarantees.map(({ description, icon, title }, index) => /* @__PURE__ */ React4.createElement(
FunOptionBox,
{
isCompactList: true,
key: index,
paddingX: "16",
paddingY: "16",
gap: "16"
},
/* @__PURE__ */ React4.createElement(
Box,
{
color: "primaryText",
display: "flex",
alignItems: "center",
justifyContent: "center",
style: { flex: "0 0 auto" },
width: "20"
},
icon
),
/* @__PURE__ */ React4.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React4.createElement(Text, { color: "primaryText", size: "header-14", weight: "semibold" }, title), description && /* @__PURE__ */ React4.createElement(Text, { color: "secondaryText", size: "body", weight: "regular" }, description))
))), /* @__PURE__ */ React4.createElement(
Text,
{
color: "secondaryText",
size: "body",
textAlign: "center",
weight: "regular"
},
t("brokerage.dataEncryptedFooter", { appName: FUN_ORG_NAME })
));
}
function FanaticsWalletIcon() {
return /* @__PURE__ */ React4.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none"
},
/* @__PURE__ */ React4.createElement(
"path",
{
d: "M13.75 11.6667H13.7583M2.5 4.16667V15.8333C2.5 16.7538 3.24619 17.5 4.16667 17.5H15.8333C16.7538 17.5 17.5 16.7538 17.5 15.8333V7.5C17.5 6.57953 16.7538 5.83333 15.8333 5.83333L4.16667 5.83333C3.24619 5.83333 2.5 5.08714 2.5 4.16667ZM2.5 4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5H14.1667M14.1667 11.6667C14.1667 11.8968 13.9801 12.0833 13.75 12.0833C13.5199 12.0833 13.3333 11.8968 13.3333 11.6667C13.3333 11.4365 13.5199 11.25 13.75 11.25C13.9801 11.25 14.1667 11.4365 14.1667 11.6667Z",
stroke: "#A1A1AA",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
}
function FanaticsTimeEstimateIcon() {
return /* @__PURE__ */ React4.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none"
},
/* @__PURE__ */ React4.createElement(
"path",
{
d: "M10 3.4375C8.51664 3.4375 7.0666 3.87737 5.83323 4.70148C4.59986 5.52559 3.63856 6.69693 3.07091 8.06737C2.50325 9.43782 2.35472 10.9458 2.64411 12.4007C2.9335 13.8555 3.64781 15.1919 4.6967 16.2408C5.7456 17.2897 7.08197 18.004 8.53683 18.2934C9.99168 18.5828 11.4997 18.4343 12.8701 17.8666C14.2406 17.2989 15.4119 16.3376 16.236 15.1043C17.0601 13.8709 17.5 12.4209 17.5 10.9375C17.4977 8.94907 16.7068 7.04274 15.3008 5.63671C13.8948 4.23068 11.9884 3.43977 10 3.4375ZM10 16.5625C8.88748 16.5625 7.79995 16.2326 6.87492 15.6145C5.94989 14.9964 5.22892 14.1179 4.80318 13.0901C4.37744 12.0623 4.26604 10.9313 4.48309 9.84012C4.70013 8.74897 5.23586 7.74669 6.02253 6.96002C6.8092 6.17335 7.81148 5.63762 8.90262 5.42058C9.99376 5.20354 11.1248 5.31493 12.1526 5.74068C13.1804 6.16642 14.0589 6.88739 14.677 7.81242C15.2951 8.73744 15.625 9.82498 15.625 10.9375C15.6233 12.4288 15.0302 13.8586 13.9757 14.9131C12.9211 15.9677 11.4913 16.5608 10 16.5625ZM12.8508 7.77422C12.9382 7.86132 13.0075 7.96481 13.0548 8.07876C13.1022 8.19272 13.1265 8.31489 13.1265 8.43828C13.1265 8.56167 13.1022 8.68384 13.0548 8.7978C13.0075 8.91175 12.9382 9.01525 12.8508 9.10234L10.6633 11.2898C10.4872 11.466 10.2483 11.5649 9.99922 11.5649C9.75015 11.5649 9.51128 11.466 9.33516 11.2898C9.15904 11.1137 9.0601 10.8749 9.0601 10.6258C9.0601 10.3767 9.15904 10.1378 9.33516 9.96172L11.5227 7.77422C11.6098 7.68682 11.7133 7.61747 11.8272 7.57015C11.9412 7.52284 12.0633 7.49848 12.1867 7.49848C12.3101 7.49848 12.4323 7.52284 12.5462 7.57015C12.6602 7.61747 12.7637 7.68682 12.8508 7.77422ZM7.1875 1.25C7.1875 1.00136 7.28628 0.762903 7.46209 0.587087C7.63791 0.411272 7.87636 0.3125 8.125 0.3125H11.875C12.1236 0.3125 12.3621 0.411272 12.5379 0.587087C12.7137 0.762903 12.8125 1.00136 12.8125 1.25C12.8125 1.49864 12.7137 1.7371 12.5379 1.91291C12.3621 2.08873 12.1236 2.1875 11.875 2.1875H8.125C7.87636 2.1875 7.63791 2.08873 7.46209 1.91291C7.28628 1.7371 7.1875 1.49864 7.1875 1.25Z",
fill: "#A1A1AA"
}
)
);
}
function FanaticsCircleArrowUpIcon() {
return /* @__PURE__ */ React4.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none"
},
/* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_37040_20205)" }, /* @__PURE__ */ React4.createElement(
"path",
{
d: "M13.3337 9.99984L10.0003 6.6665M10.0003 6.6665L6.66699 9.99984M10.0003 6.6665V13.3332M18.3337 9.99984C18.3337 14.6022 14.6027 18.3332 10.0003 18.3332C5.39795 18.3332 1.66699 14.6022 1.66699 9.99984C1.66699 5.39746 5.39795 1.6665 10.0003 1.6665C14.6027 1.6665 18.3337 5.39746 18.3337 9.99984Z",
stroke: "#A1A1AA",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)),
/* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_37040_20205" }, /* @__PURE__ */ React4.createElement("rect", { width: "20", height: "20", fill: "white" })))
);
}
function FanaticsCircleArrowDownIcon() {
return /* @__PURE__ */ React4.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none"
},
/* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_37040_20217)" }, /* @__PURE__ */ React4.createElement(
"path",
{
d: "M13.3337 10.0002L10.0003 13.3335M10.0003 13.3335L6.66699 10.0002M10.0003 13.3335V6.66683M18.3337 10.0002C18.3337 5.39779 14.6027 1.66683 10.0003 1.66683C5.39795 1.66683 1.66699 5.39779 1.66699 10.0002C1.66699 14.6025 5.39795 18.3335 10.0003 18.3335C14.6027 18.3335 18.3337 14.6025 18.3337 10.0002Z",
stroke: "#A1A1AA",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)),
/* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_37040_20217" }, /* @__PURE__ */ React4.createElement(
"rect",
{
width: "20",
height: "20",
fill: "white",
transform: "matrix(1 0 0 -1 0 20)"
}
)))
);
}
var FanaticsIcons = {
paymentSource: FanaticsWalletIcon,
timeEstimate: FanaticsTimeEstimateIcon,
youSend: FanaticsCircleArrowUpIcon,
youReceive: FanaticsCircleArrowDownIcon,
fiatTabIcon: CashIcon,
cryptoTabIcon: BitcoinIcon
};
export {
FanaticsCircleArrowDownIcon,
FanaticsCircleArrowUpIcon,
FanaticsCustomConnectBrokerageScreen,
FanaticsIcons,
FanaticsSelectBrokerageBanner,
FanaticsSelectTokenBanner,
FanaticsSourceScreenBanner,
FanaticsTimeEstimateIcon,
FanaticsTransferCryptoBanner,
FanaticsWalletIcon,
FanaticsWithdrawalBanner
};