@coin-voyage/paykit 0.0.2 → 0.1.1

package/dist/components/ui/OptionsList/index.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useEffect } from "react";
+import { keyframes } from "styled-components";
+import styled from "../../../styles/styled";
+import usePayContext from "../../contexts/pay";
+import { ScrollArea } from "../ScrollArea";
+import { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer, } from "./styles";
+const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
+    const { triggerResize } = usePayContext();
+    const optionsLength = options.length;
+    useEffect(() => {
+        if (optionsLength > 0) {
+            triggerResize();
+        }
+    }, [optionsLength]);
+    if (isLoading) {
+        const skeletonCount = requiredSkeletons
+            ? Math.max(requiredSkeletons - optionsLength, 0)
+            : 0;
+        return (_jsxs(OptionsContainer, { "$totalResults": options.length, children: [options.map((option) => (_jsx(OptionItem, { option: option }, option.id))), isLoading &&
+                    Array.from({ length: skeletonCount }).map((_, index) => (_jsx(SkeletonOptionItem, {}, index)))] }));
+    }
+    return (_jsx(ScrollArea, { mobileDirection: "vertical", height: 300, children: _jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (_jsx(OptionItem, { option: option }, option.id))) }) }));
+};
+export default OptionsList;
+const SkeletonOptionItem = () => {
+    return (_jsxs(OptionButton, { type: "button", children: [_jsx(SkeletonIcon, {}), _jsx(SkeletonLabel, {})] }));
+};
+const pulse = keyframes `
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+`;
+const SkeletonIcon = styled.div `
+  position: absolute;
+  right: 20px;
+  width: 32px;
+  height: 32px;
+  border-radius: 22.5%;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+const SkeletonLabel = styled.div `
+  width: 100px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+const OptionItem = ({ option }) => {
+    const hydratedIcons = option.icons.map((icon) => {
+        if (typeof icon === "string") {
+            return _jsx("img", { src: icon, alt: "" });
+        }
+        return icon;
+    });
+    const iconContent = (() => {
+        if (hydratedIcons.length === 1) {
+            return (_jsx(OptionIcon, { "data-shape": option.iconShape, children: hydratedIcons[0] }));
+        }
+        return (_jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (_jsx(IconStackItem, { "data-shape": option.iconShape, "$marginRight": index !== hydratedIcons.length - 1 ? -12 : 0, "$zIndex": hydratedIcons.length - index, children: icon }, index))) }));
+    })();
+    return (_jsxs(OptionButton, { type: "button", onClick: option.onClick, disabled: option.disabled, children: [iconContent, _jsxs(OptionLabel, { children: [_jsx(OptionTitle, { children: option.title }), option.subtitle && _jsx(OptionSubtitle, { children: option.subtitle })] })] }));
+};
+const IconStackContainer = styled(motion.div) `
+  position: absolute;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const IconStackItem = styled(motion.div) `
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${(props) => props.$marginRight || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+  border-radius: 22.5%;
+
+  &[data-shape="squircle"] {
+    border-radius: 22.5%;
+  }
+  &[data-shape="circle"] {
+    border-radius: 100%;
+  }
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+`;
+//# sourceMappingURL=index.js.map

package/dist/components/ui/OptionsList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/OptionsList/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/OptionsList/styles.js

@@ -0,0 +1,161 @@
+import { css } from "styled-components";
+import styled from "../../../styles/styled";
+import { motion } from "framer-motion";
+export const OptionButton = styled(motion.button) `
+  display: block;
+  text-decoration: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 64px;
+  font-size: 17px;
+  font-weight: var(--ck-primary-button-font-weight, 500);
+  line-height: 22px;
+  text-align: var(--ck-body-button-text-align, left);
+  transition: 180ms ease;
+  transition-property: background, color, box-shadow, transform, opacity;
+  will-change: transform, box-shadow, background-color, color, opacity;
+
+  --fallback-color: var(--ck-primary-button-color);
+  --fallback-background: var(--ck-primary-button-background);
+  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+  --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+  --color: var(--ck-primary-button-color, var(--fallback-color));
+  --background: var(--ck-primary-button-background, var(--fallback-background));
+  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
+  --border-radius: var(
+    --ck-primary-button-border-radius,
+    var(--fallback-border-radius)
+  );
+
+  --hover-color: var(--ck-primary-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-primary-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-primary-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+  --hover-border-radius: var(
+    --ck-primary-button-hover-border-radius,
+    var(--border-radius)
+  );
+
+  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-primary-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-primary-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+  --active-border-radius: var(
+    --ck-primary-button-active-border-radius,
+    var(--hover-border-radius)
+  );
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &:disabled {
+    cursor: default;
+    transition: 180ms ease;
+    opacity: 0.4;
+  }
+
+  --bg: var(--background);
+  &:not(:disabled) {
+    &:hover {
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:focus-visible {
+      transition-duration: 100ms;
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:active {
+      color: var(--active-color);
+      background: var(--active-background);
+      box-shadow: var(--active-box-shadow);
+      border-radius: var(--active-border-radius);
+      --bg: var(--active-background, var(--background));
+    }
+  }
+`;
+export const OptionLabel = styled.span `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  overflow: hidden;
+  padding: 2px 0;
+  padding-right: 38px;
+`;
+export const OptionTitle = styled.span `
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+`;
+export const OptionSubtitle = styled(motion.span) `
+  font-size: 14px;
+  opacity: 0.6;
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+`;
+export const OptionIcon = styled(motion.div) `
+  position: absolute;
+  right: 21px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg, img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-shape="squircle"] {
+    border-radius: 22.5%;
+  }
+  &[data-shape="circle"] {
+    border-radius: 100%;
+  }
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+`;
+export const OptionsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 6px;
+
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/ui/OptionsList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/ui/OptionsList/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AACvC,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FhD,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;CASrC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;CAQhD,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwB3C,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAExC;;;;;;IAME,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,SAAS;IACf,GAAG,CAAA;;;KAGF;CACJ,CAAA"}

package/dist/components/ui/OrderHeader/index.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { Arbitrum, Bitcoin, Ethereum, Optimism, Solana, Sui } from "../../../assets/chains";
+import { USDC } from "../../../assets/coins";
+import defaultTheme from "../../../lib/config/default-theme";
+import styled from "../../../styles/styled";
+import usePayContext from "../../contexts/pay";
+import Button from "../Button";
+export const OrderHeader = ({ minified = false }) => {
+    const { paymentState } = usePayContext();
+    const isUSD = !paymentState.payOrder?.destination_currency;
+    const destinationAmount = isUSD ? paymentState.payOrder?.destination_amount?.value_usd : paymentState.payOrder?.destination_amount?.ui_amount;
+    const isEditable = false; //paymentState.payOrder?.mode === PayOrderMode.DEPOSIT
+    const [editableAmount, setEditableAmount] = useState(destinationAmount?.toString() ?? "");
+    const [isEditing, setIsEditing] = useState(false);
+    const handleSave = () => {
+        if (!isEditing)
+            return;
+        paymentState.setChosenTokenAmount(Number(editableAmount));
+        setIsEditing(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && isEditing) {
+            handleSave();
+        }
+    };
+    const sanitizeAndSetAmount = (enteredAmount) => {
+        const floatAmount = parseFloat(enteredAmount);
+        if (isNaN(floatAmount) || floatAmount <= 0) {
+            return;
+        }
+        const [digitsBeforeDecimal, digitsAfterDecimal] = (() => {
+            if (enteredAmount.includes(".")) {
+                return enteredAmount.split(".");
+            }
+            return [enteredAmount, ""];
+        })();
+        if (digitsBeforeDecimal.length > 5 || digitsAfterDecimal.length > 2) {
+            return;
+        }
+        setEditableAmount(enteredAmount);
+    };
+    const titleAmountContent = (() => {
+        const buttonStyles = (() => {
+            if (minified) {
+                return {
+                    height: "24px",
+                    width: "42px",
+                    lineHeight: "12px",
+                    borderRadius: "6px",
+                    fontSize: "14px",
+                };
+            }
+            return {
+                height: "30px",
+                width: "54px",
+                lineHeight: "16px",
+                borderRadius: "8px",
+                fontSize: "20px",
+            };
+        })();
+        return (_jsxs(_Fragment, { children: [isEditable && !minified && (_jsx("div", { style: { width: buttonStyles.width, height: buttonStyles.height } })), !isEditing && !!destinationAmount && (_jsx("span", { children: isUSD ?
+                        _jsx(_Fragment, { children: new Intl.NumberFormat("en-US", {
+                                style: "currency",
+                                currency: "USD",
+                            }).format(destinationAmount) }) :
+                        _jsxs(_Fragment, { children: [destinationAmount, " ", paymentState.payOrder?.destination_currency?.ticker] }) })), isEditing && (_jsxs("div", { style: { display: "flex" }, children: [isUSD && "$", _jsx(InputUnderlineField, { value: editableAmount, onChange: (e) => { sanitizeAndSetAmount(e.target.value); }, onBlur: (e) => {
+                                if (!e.relatedTarget) {
+                                    setIsEditing(false);
+                                }
+                            }, onKeyDown: handleKeyDown }), !isUSD && ` ${paymentState.payOrder?.destination_currency?.ticker}`] })), isEditable && (_jsx(Button, { variant: "primary", onClick: () => {
+                        isEditing ? handleSave() : setIsEditing(true);
+                    }, style: {
+                        width: buttonStyles.width,
+                        height: buttonStyles.height,
+                        lineHeight: buttonStyles.lineHeight,
+                        borderRadius: buttonStyles.borderRadius,
+                        fontSize: buttonStyles.fontSize,
+                        margin: 0,
+                    }, children: isEditing ? "Save" : "Edit" }))] }));
+    })();
+    if (minified) {
+        return (_jsxs(MinifiedContainer, { children: [_jsx(MinifiedTitleAmount, { children: titleAmountContent }), _jsx(CoinLogos, { "$size": 32 })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(TitleAmount, { children: titleAmountContent }), _jsxs(AnyChainAnyCoinContainer, { children: [_jsx(CoinLogos, {}), _jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
+};
+const TitleAmount = styled(motion.h1) `
+  margin: 0;
+  padding: 0;
+  line-height: 50px;
+  font-size: 48px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  color: ${(props) => {
+    if (props.$error) {
+        return "var(--ck-body-color-danger)";
+    }
+    if (props.$valid) {
+        return "var(--ck-body-color-valid)";
+    }
+    return "var(--ck-body-color)";
+}};
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 64px;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`;
+const Subtitle = styled(motion.div) `
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 21px;
+  color: var(--ck-body-color-muted);
+`;
+const MinifiedTitleAmount = styled(motion.div) `
+  font-size: 32px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  line-height: 36px;
+  color: var(--ck-body-color);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+`;
+const MinifiedContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 24px;
+`;
+const AnyChainAnyCoinContainer = styled(motion.div) `
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 8px;
+  margin: 24px 0;
+`;
+const LogoContainer = styled(motion.div) `
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${(props) => props.$marginLeft || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border-radius: 9999px;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+const Logos = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const CoinLogos = ({ $size = 24 }) => {
+    const logos = [
+        _jsx(Bitcoin, {}),
+        _jsx(Ethereum, { style: { backgroundColor: "#627EEA" } }),
+        _jsx(Solana, {}),
+        _jsx(Sui, {}),
+        _jsx(USDC, {}),
+        _jsx(Optimism, {}),
+        _jsx(Arbitrum, {}),
+    ];
+    const logoBlock = (element, index) => (_jsx(LogoContainer, { "$marginLeft": index !== 0 ? -($size / 3) : 0, "$zIndex": logos.length - index, "$size": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));
+    return (_jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));
+};
+const InputUnderlineField = ({ value, onChange, onBlur, onKeyDown, }) => {
+    // subtract width for decimal point if necessary
+    const width = `${value.length - 0.5 * (value.includes(".") ? 1 : 0)}ch`;
+    const selectAll = (e) => {
+        // When entering edit mode, select the amount for quicker editing
+        setTimeout(() => e.target.select(), 100);
+    };
+    return (_jsxs("div", { style: { width: "auto", position: "relative" }, children: [_jsx(InputField, { "$width": width, type: "text", pattern: "\\d*.\\d{2}", value: value, onChange: onChange, onBlur: onBlur, onFocus: selectAll, onKeyDown: onKeyDown, autoFocus: true }), _jsx(Underline, {})] }));
+};
+const InputField = styled(motion.input) `
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: none;
+  width: ${(props) => props.$width || "5ch"};
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  border: none;
+  padding: 0;
+  &:focus {
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+  }
+`;
+const Underline = styled(motion.div) `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--ck-body-color-muted);
+`;
+//# sourceMappingURL=index.js.map

package/dist/components/ui/OrderHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/OrderHeader/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/Portal/index.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import packageJson from "../../../../package.json";
+const Portal = (props) => {
+    props = {
+        selector: "__COIN_VOYAGE__",
+        ...props,
+    };
+    const { selector, children } = props;
+    const ref = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        const selectorPrefixed = `#${selector.replace(/^#/, "")}`;
+        ref.current = document.querySelector(selectorPrefixed);
+        if (!ref.current) {
+            const div = document.createElement("div");
+            div.setAttribute("id", selector);
+            div.setAttribute("data-pay", `${packageJson.version}`);
+            document.body.appendChild(div);
+            ref.current = div;
+        }
+        setMounted(true);
+    }, [selector]);
+    if (!ref.current) {
+        return null;
+    }
+    return mounted ? createPortal(children, ref.current) : null;
+};
+export default Portal;
+//# sourceMappingURL=index.js.map

package/dist/components/ui/Portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,WAAW,MAAM,0BAA0B,CAAA;AAElD,MAAM,MAAM,GAAG,CAAC,KAAU,EAAE,EAAE;IAC5B,KAAK,GAAG;QACN,QAAQ,EAAE,iBAAiB;QAC3B,GAAG,KAAK;KACT,CAAA;IAED,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAEpC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAA;QACzD,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QAEtD,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YACzC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;YAChC,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;YACtD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;YAC9B,GAAG,CAAC,OAAO,GAAG,GAAG,CAAA;QACnB,CAAC;QAED,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA;IACb,CAAC;IACD,OAAO,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AAC7D,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/ui/PoweredByFooter/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CoinVoyageIcon } from "../../../assets/coin-voyage";
+import styled from "../../../styles/styled";
+const PoweredByFooter = () => {
+    return (_jsx(Container, { children: _jsxs(TextButton, { onClick: () => {
+                window.open("https://coinvoyage.io", "_blank");
+            }, children: [_jsx(CoinVoyageIcon, { height: 20, width: 20 }), "Powered by Coin Voyage"] }) }));
+};
+const Container = styled.div `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+const TextButton = styled.button `
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  background: none;
+  color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  transition:
+    color 200ms ease,
+    transform 100ms ease;
+  &:hover {
+    color: var(--ck-body-color-muted-hover);
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+`;
+export default PoweredByFooter;
+//# sourceMappingURL=index.js.map

package/dist/components/ui/PoweredByFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/PoweredByFooter/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,KAAC,SAAS,cACR,MAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,IAAI,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAA;YAChD,CAAC,aAED,KAAC,cAAc,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,8BAE9B,GACH,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB/B,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/ui/ScrollArea/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIsMobile } from "@coin-voyage/shared/hooks";
+import { useEffect, useRef } from "react";
+import { MoreIndicator, ScrollAreaContainer, ScrollContainer } from "./styles";
+const ArrowDown = () => (_jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
+    const ref = useRef(null);
+    const moreRef = useRef(null);
+    const isMobile = useIsMobile();
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+        // if ref is not scrollable, hide the more indicator
+        if (el.scrollHeight > el.clientHeight) {
+            if (moreRef.current) {
+                moreRef.current.classList.remove("hide");
+            }
+        }
+        const handleScroll = (e) => {
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth, } = e.target;
+            if (moreRef.current) {
+                if (scrollTop > 0) {
+                    moreRef.current.classList.add("hide");
+                }
+            }
+            if (scrollTop === 0 && scrollLeft === 0) {
+                el.classList.add("scroll-start");
+            }
+            else {
+                el.classList.remove("scroll-start");
+            }
+            if (scrollHeight - scrollTop === clientHeight &&
+                scrollWidth - scrollLeft === clientWidth) {
+                el.classList.add("scroll-end");
+            }
+            else {
+                el.classList.remove("scroll-end");
+            }
+        };
+        el.addEventListener("scroll", handleScroll);
+        handleScroll({ target: el });
+        return () => {
+            el.removeEventListener("scroll", handleScroll);
+        };
+    }, [ref.current]);
+    return (_jsxs(ScrollContainer, { children: [_jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, children: children }), _jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
+                    if (ref.current) {
+                        ref.current.scrollTo({
+                            top: ref.current.scrollHeight,
+                            behavior: "smooth",
+                        });
+                    }
+                }, children: _jsxs("span", { children: [_jsx(ArrowDown, {}), " More Available"] }) })] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/ScrollArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/ScrollArea/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE9E,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,yDAAyD,EAC3D,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,MAAM,EAClB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAA;AACD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,eAAe,EACf,eAAe,GAMhB,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;QACtB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAM;QACR,CAAC;QAED,oDAAoD;QACpD,IAAI,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;YACtC,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAC1C,CAAC;QACH,CAAC;QAED,MAAM,YAAY,GAAG,CAAC,CAAM,EAAE,EAAE;YAC9B,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,GACZ,GAAG,CAAC,CAAC,MAAM,CAAA;YAEZ,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;oBAClB,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACvC,CAAC;YACH,CAAC;YAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;gBACxC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;YAClC,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;YACrC,CAAC;YAED,IACE,YAAY,GAAG,SAAS,KAAK,YAAY;gBACzC,WAAW,GAAG,UAAU,KAAK,WAAW,EACxC,CAAC;gBACD,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;YAChC,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;YACnC,CAAC;QACH,CAAC,CAAA;QAED,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAC3C,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;QAE5B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAChD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,MAAC,eAAe,eACd,KAAC,mBAAmB,IAClB,GAAG,EAAE,GAAG,aACC,QAAQ,aACR,MAAM,sBACG,eAAe,sBACf,eAAe,YAEhC,QAAQ,GACW,EACtB,KAAC,aAAa,IACZ,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;wBAChB,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;4BACnB,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY;4BAC7B,QAAQ,EAAE,QAAQ;yBACnB,CAAC,CAAA;oBACJ,CAAC;gBACH,CAAC,YAED,2BACE,KAAC,SAAS,KAAG,uBACR,GACO,IACA,CACnB,CAAA;AACH,CAAC,CAAA"}