@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Modal/vaul/constants.js

@@ -1,9 +1,9 @@
 export const TRANSITIONS = {
-    DURATION: 0.5,
+    DURATION: 0.1,
     EASE: [0.32, 0.72, 0, 1],
 };
-export const VELOCITY_THRESHOLD = 0.4;
-export const CLOSE_THRESHOLD = 0.25;
+export const VELOCITY_THRESHOLD = 0.1;
+export const CLOSE_THRESHOLD = 0.1;
 export const SCROLL_LOCK_TIMEOUT = 100;
 export const BORDER_RADIUS = 8;
 export const NESTED_DISPLACEMENT = 16;

package/dist/components/Modal/vaulModal.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, FC, ReactNode, SetStateAction } from 'react';
-type VaulDrawerProps = {
+export type VaulDrawerProps = {
     children: ReactNode;
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
@@ -8,14 +8,19 @@ type VaulDrawerProps = {
     modalId: string;
     onClose?: () => void;
     onAnimationEnd?: (open: boolean) => void;
+    className?: string;
 };
 declare const Comp: FC<VaulDrawerProps>;
 declare const VaulDrawerSnap: FC<React.HTMLAttributes<HTMLDivElement> & {
     id: `item-${number}`;
-    fullheight?: boolean;
+    openFullHeight?: boolean;
 }>;
 declare const VaulDrawer: typeof Comp & {
     Snap: typeof VaulDrawerSnap;
 };
-export declare const WalletFooterPortal: any;
+type Props = {
+    children: React.ReactNode;
+    isWalletModalOpen?: boolean;
+};
+export declare const ModalFooterPortal: FC<Props>;
 export default VaulDrawer;

package/dist/components/Modal/vaulModal.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
 import IconButton from '../Buttons/iconButton';
 import { ChevronUp, X } from 'lucide-react';
 import { useMeasure } from '@uidotdev/usehooks';
 import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsContext';
 import { AnimatePresence, motion } from 'framer-motion';
-import { createPortal } from 'react-dom';
 import { Drawer } from './vaul';
 import AppSettings from '../../lib/AppSettings';
-const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd }) => {
+const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className }) => {
     const { isMobileWithPortal: isMobile } = useWindowDimensions();
     let [headerRef, { height }] = useMeasure();
     const { setHeaderHeight } = useSnapPoints();
@@ -57,21 +57,22 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
     }, []);
     if (!loaded)
         return null;
-    return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: isMobile ? undefined : document.getElementById('widget'), snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
+    const container = isMobile ? undefined : document.getElementById('widget');
+    return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
             if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
                 expandRef.current?.classList.add('hidden');
-        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: onAnimationEnd, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
+        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
                         ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
-                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-900 rounded-t-xl bottom-0 left-0 right-0 h-full z-50 pb-6 text-primary-text !ring-0 !outline-none ', {
-                        '!border-none !rounded-none': snap === 1,
+                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('fixed sm:absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
+                        'border-none! rounded-none!': snap === 1,
                         '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
                     }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobile &&
-                                    _jsx("div", { className: "absolute top-2 left-[calc(50%-24px)]", children: _jsx(Drawer.Handle, { className: '!w-12 bg-primary-text-muted' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-6 pt-3 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { className: '-mr-2', children: _jsx(IconButton, { icon: _jsx(X, { strokeWidth: 3 }) }) }) })] }), description &&
-                                    _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-6", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-6 styled-scroll overflow-x-hidden relative ', {
-                                'overflow-y-auto': snap === 1,
+                                    _jsx("div", { className: "flex justify-center w-full mt-2 mb-[6px]", children: _jsx(Drawer.Handle, { className: '!w-12 !bg-primary-text-tertiary' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-4 sm:pt-2 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold w-full", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { children: _jsx(IconButton, { className: 'inline-flex active:animate-press-down', icon: _jsx(X, { strokeWidth: 3 }) }) }) })] }), description &&
+                                    _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', {
+                                'overflow-y-auto h-full': snap === 1,
                                 'overflow-hidden': snap !== 1,
                             }), id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
-                                        _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-6 pt-10 pb-6 justify-center from-secondary-900 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), _jsx(VaulFooter, { snapElement: snapElement })] })] })] }) }));
+                                        _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), _jsx(VaulFooter, { snapElement: snapElement })] })] })] }) }));
 };
 const VaulFooter = ({ snapElement }) => {
     let [ref, { height }] = useMeasure();
@@ -85,6 +86,7 @@ const VaulFooter = ({ snapElement }) => {
         }, className: 'w-full fixed left-0 z-50' }));
 };
 const VaulDrawerSnap = (props) => {
+    const { openFullHeight, ...domProps } = props;
     let [ref, { height }] = useMeasure();
     const { setSnapElemenetsHeight } = useSnapPoints();
     useEffect(() => {
@@ -92,22 +94,17 @@ const VaulDrawerSnap = (props) => {
             return;
         setSnapElemenetsHeight((prev) => {
             const id = Number(props.id?.replace('item-', ''));
-            return [{ id, height: height, fullHeight: props.fullheight }, ...prev.filter((item) => item.id !== id)];
+            return [{ id, height: height, fullHeight: openFullHeight }, ...prev.filter((item) => item.id !== id)];
         });
     }, [height]);
-    return (_jsx("div", { ...props, className: props.className ?? 'pb-6', id: props.id, ref: ref, children: props.children }));
+    return (_jsx("div", { ...domProps, className: props.className ?? 'pb-4', id: props.id, ref: ref, children: props.children }));
 };
 const VaulDrawer = (props) => {
-    const { isMobileWithPortal } = useWindowDimensions();
-    return (_jsx(SnapPointsProvider, { isMobile: isMobileWithPortal, children: _jsx(Comp, { ...props, children: props.children }) }));
+    const { isMobile } = useWindowDimensions();
+    return (_jsx(SnapPointsProvider, { isMobile: isMobile, children: _jsx(Comp, { ...props, children: props.children }) }));
 };
 VaulDrawer.Snap = VaulDrawerSnap;
-// type Props = {
-//     children: React.ReactNode,
-//     isWalletModalOpen?: boolean
-// }
-// export const WalletFooterPortal: FC<Props> = ({ children, isWalletModalOpen }) => {
-export const WalletFooterPortal = ({ children, isWalletModalOpen }) => {
+export const ModalFooterPortal = ({ children, isWalletModalOpen }) => {
     const ref = useRef(null);
     const [mounted, setMounted] = useState(false);
     useEffect(() => {

package/dist/components/Pages/Campaigns/Details/Leaderboard.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Campaign } from "../../../../lib/layerSwapApiClient";
+import { Campaign } from "../../../../lib/apiClients/layerSwapApiClient";
 type Props = {
     campaign: Campaign;
 };

package/dist/components/Pages/Campaigns/Details/Leaderboard.js

@@ -1,15 +1,15 @@
-'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import LayerSwapApiClient from "../../../../lib/layerSwapApiClient";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import { RewardsComponentLeaderboardSceleton } from "../../../../components/Common/Sceletons";
 import useSWR from "swr";
-import ClickTooltip from "../../../Common/ClickTooltip";
-import shortenAddress from "../../../utils/ShortenAddress";
+import ClickTooltip from "../../../../components/Common/ClickTooltip";
+import shortenAddress from "../../../../components/utils/ShortenAddress";
 import { useAccount } from "wagmi";
-import { truncateDecimals } from "../../../utils/RoundDecimals";
-import AddressIcon from "../../../Common/AddressIcon";
-import Modal from "../../../Modal/modal";
-import { RewardsComponentLeaderboardSceleton } from "../../../Common/Sceletons";
+import { truncateDecimals } from "../../../../components/utils/RoundDecimals";
+import AddressIcon from "../../../../components/Common/AddressIcon";
+import Modal from "../../../../components/Modal/modal";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
 const Component = ({ campaign }) => {
     const [openTopModal, setOpenTopModal] = useState(false);
     const { address } = useAccount();
@@ -18,7 +18,7 @@ const Component = ({ campaign }) => {
     };
     const apiClient = new LayerSwapApiClient();
     const { data: leaderboardData, isLoading } = useSWR(`/campaigns/${campaign?.id}/leaderboard`, apiClient.fetcher, { dedupingInterval: 60000 });
-    const { data: rewardsData, isLoading: rewardsIsLoading } = useSWR(`/campaigns/${campaign.id}/rewards/${address}`, apiClient.fetcher, { dedupingInterval: 60000 });
+    const { data: rewardsData } = useSWR(`/campaigns/${campaign.id}/rewards/${address}`, apiClient.fetcher, { dedupingInterval: 60000 });
     const leaderboard = leaderboardData?.data;
     if (isLoading) {
         return _jsx(RewardsComponentLeaderboardSceleton, {});
@@ -27,6 +27,15 @@ const Component = ({ campaign }) => {
         //TODO handle
         return _jsx(_Fragment, {});
     }
+    return _jsxs("div", { className: "space-y-2", children: [leaderboard?.leaderboard?.length > 0 &&
+                _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-bold text-left leading-5 text-primary-text", children: "Leaderboard" }), _jsx("button", { onClick: handleOpenTopModal, type: "button", className: " leading-4 text-base text-primary underline hover:no-underline hover:text-primary/80", children: "Top 10" })] }), _jsx("p", { className: "text-sm text-secondary-text", children: "Users who earn the most throughout the program will be featured here." }), _jsx(LeaderbordComponent, { campaign: campaign, leaderboardData: leaderboardData, rewardsData: rewardsData, address: address, lines: 3 }), _jsx(Modal, { height: "full", header: 'Leaderboard', show: openTopModal, setShow: setOpenTopModal, modalId: "leaderBoard", children: _jsx(LeaderbordComponent, { campaign: campaign, leaderboardData: leaderboardData, rewardsData: rewardsData, address: address, className: "text-secondary-text" }) })] });
+};
+const LeaderbordComponent = ({ campaign, leaderboardData, rewardsData, address, lines, className }) => {
+    const leaderboard = leaderboardData?.data;
+    if (!leaderboard) {
+        //TODO handle
+        return _jsx(_Fragment, {});
+    }
     const rewards = rewardsData?.data;
     const network = campaign.network;
     const position = rewards?.user_reward.position || NaN;
@@ -36,11 +45,8 @@ const Component = ({ campaign }) => {
         leaderboard.leaderboard_budget * 0.3,
         leaderboard.leaderboard_budget * 0.1
     ];
-    return _jsxs("div", { className: "space-y-2", children: [leaderboard?.leaderboard?.length > 0 &&
-                _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-bold text-left leading-5 text-primary-text", children: "Leaderboard" }), _jsx("button", { onClick: handleOpenTopModal, type: "button", className: " leading-4 text-base text-primary underline hover:no-underline hover:text-primary/80", children: "Top 10" })] }), _jsx("p", { className: "text-sm text-secondary-text", children: "Users who earn the most throughout the program will be featured here." }), _jsx("div", { className: "bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg", children: _jsx("div", { className: "p-3", children: leaderboard?.leaderboard?.length > 0 ? _jsxs("div", { className: "space-y-6", children: [leaderboard?.leaderboard?.filter(u => u.position < 4).map(user => (_jsxs("div", { className: "items-center flex justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [user.position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: user.address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: user?.address && network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", user?.address), children: user?.position === rewards?.user_reward?.position ? _jsx("span", { className: "text-primary", children: "You" }) : shortenAddress(user?.address) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(user.amount, token?.precision), " ", token.symbol] })] })] })] }), leaderboard.leaderboard_budget > 0 && _jsx("div", { className: "text-right flex items-center space-x-2", children: _jsx(ClickTooltip, { text: _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("span", { children: "+" }), _jsx("div", { className: "h-3.5 w-3.5 relative", children: _jsx("img", { src: network?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsx("p", { children: _jsxs("span", { children: [leaderboardRewards[user.position - 1], " ", token?.symbol] }) })] }) }) })] }, user.position))), position >= 4 && address && rewards?.user_reward &&
-                                _jsxs("div", { className: position > 4 ? "!mt-0 !pt-0" : "", children: [position > 4 && _jsx("div", { className: "text-2xl text-center leading-3 text-secondary-text my-3", children: "..." }), _jsx("div", { className: "items-center flex justify-between", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", address), children: _jsx("span", { className: "text-primary", children: "You" }) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(rewards.user_reward.total_amount, token?.precision), " ", token?.symbol] })] })] })] }) }, position)] })] })
-                        :
-                            _jsx("div", { className: "h-8 flex flex-col justify-center items-center text-sm", children: "Here will be leaderboard." }) }) }), _jsx(Modal, { height: "full", header: 'Leaderboard', show: openTopModal, setShow: setOpenTopModal, modalId: "leaderBoard", children: _jsx("div", { className: "bg-secondary-700 border border-secondary-700 mt-2 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg text-secondary-text", children: _jsx("div", { className: "p-3", children: _jsx("div", { className: "space-y-6", children: leaderboard?.leaderboard?.map(user => (_jsxs("div", { className: "items-center flex justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [user.position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: user.address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: user?.address && network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", user?.address), children: user.position === rewards?.user_reward?.position ? _jsx("span", { className: "text-primary", children: "You" }) : shortenAddress(user.address) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(user.amount, token?.precision), " ", token?.symbol] })] })] })] }), user.position < 4 && leaderboard.leaderboard_budget > 0 &&
-                                        _jsx("div", { className: "text-right flex items-center space-x-2", children: _jsx(ClickTooltip, { text: _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("span", { children: "+" }), _jsx("div", { className: "h-3.5 w-3.5 relative", children: _jsx("img", { src: network?.logo || '', alt: "Address Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsx("p", { children: _jsxs("span", { children: [leaderboardRewards[user.position - 1], " ", token?.symbol] }) })] }) }) })] }, user.position))) }) }) }) })] });
+    return (_jsx("div", { className: `bg-secondary-500 border border-secondary-500 hover:border-secondary-400 transition duration-200 rounded-lg shadow-lg${className || ''}`, children: _jsx("div", { className: "p-3", children: _jsxs("div", { className: "space-y-6", children: [leaderboard?.leaderboard?.filter(u => (lines !== undefined ? u.position <= lines : true)).map(user => (_jsxs("div", { className: "items-center flex justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [user.position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: user.address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: user?.address && network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", user?.address), rel: "noopener noreferrer", children: user.position === rewards?.user_reward?.position ? _jsx("span", { className: "text-primary", children: "You" }) : shortenAddress(user.address) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(user.amount, token?.precision), " ", token?.symbol] })] })] })] }), user.position <= 3 && leaderboard.leaderboard_budget > 0 &&
+                                _jsx("div", { className: "text-right flex items-center space-x-2", children: _jsx(ClickTooltip, { text: _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("span", { children: "+" }), _jsx("div", { className: "h-3.5 w-3.5 relative", children: _jsx(ImageWithFallback, { src: network?.logo || '', alt: "Address Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsx("p", { children: _jsxs("span", { children: [leaderboardRewards[user.position - 1], " ", token?.symbol] }) })] }) }) })] }, user.position))), lines !== undefined && position > lines && address && rewards?.user_reward &&
+                        _jsxs("div", { className: position > lines ? "mt-0! pt-0!" : "", children: [position > lines + 1 && _jsx("div", { className: "text-2xl text-center leading-3 text-secondary-text my-3", children: "..." }), _jsx("div", { className: "items-center flex justify-between", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", address), rel: "noopener noreferrer", children: _jsx("span", { className: "text-primary", children: "You" }) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(rewards.user_reward.total_amount, token?.precision), " ", token?.symbol] })] })] })] }) }, position)] })] }) }) }));
 };
 export default Component;

package/dist/components/Pages/Campaigns/Details/Rewards.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Campaign } from "../../../../lib/layerSwapApiClient";
+import { Campaign } from "../../../../lib/apiClients/layerSwapApiClient";
 type Props = {
     campaign: Campaign;
 };

package/dist/components/Pages/Campaigns/Details/Rewards.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import BackgroundField from "../../../Common/backgroundField";
+import BackgroundField from "../../../../components/Common/backgroundField";
 import { Clock } from "lucide-react";
-import LayerSwapApiClient from "../../../../lib/layerSwapApiClient";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import { RewardsComponentSceleton } from "../../../../components/Common/Sceletons";
 import useSWR from "swr";
-import ClickTooltip from "../../../Common/ClickTooltip";
-import shortenAddress from "../../../utils/ShortenAddress";
+import ClickTooltip from "../../../../components/Common/ClickTooltip";
+import shortenAddress from "../../../../components/utils/ShortenAddress";
+import { Progress } from "../../../../components/shadcn/progressBar";
 import useWallet from "../../../../hooks/useWallet";
-import { Progress } from "./ProgressBar";
-import { RewardsComponentSceleton } from "../../../Common/Sceletons";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
 const Rewards = ({ campaign }) => {
     const network = campaign?.network;
     const { provider } = useWallet(network, 'autofil');
@@ -33,9 +34,9 @@ const Rewards = ({ campaign }) => {
     return _jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: campaign.description ?
                                 _jsx("span", { children: campaign.description })
                                 :
-                                    _jsxs(_Fragment, { children: [_jsx("span", { children: "Onboarding incentives that are earned by transferring to\u00A0" }), network?.display_name, _jsx("span", { children: ".\u00A0" })] }) }) }), _jsxs("div", { className: "bg-secondary-700 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: [!campaignIsEnded &&
-                                _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Pending Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that will be airdropped periodically.` }), " "] }), _jsx("span", { children: "Next Airdrop" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx("img", { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_pending_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx(Clock, { className: "h-5" }), _jsxs("p", { children: [difference_in_days, "d ", difference_in_hours, "h"] })] })] }) }), _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Total Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that you've earned so far (including Pending Earnings).` })] }), _jsx("span", { children: "Current Value" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-slate-300 text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx("img", { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("p", { children: [_jsx("span", { children: "$" }), _jsx("span", { children: rewards?.user_reward?.total_amount_in_usd.toFixed(rewards?.user_reward?.total_amount_in_usd > 0 ? 2 : 0) || 0 })] })] }) })] })] }), _jsx(ProgressComponent, { campaign: campaign, rewardsData: rewardsData?.data }), payouts.length > 0 &&
-                _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "font-bold text-lg text-left", children: "Payouts" }), _jsx("div", { className: " bg-secondary-700 divide-y divide-secondary-300 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx("div", { className: "inline-block min-w-full align-middle", children: _jsx("div", { className: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg", children: _jsxs("table", { className: "min-w-full divide-y divide-secondary-500", children: [_jsx("thead", { className: "bg-secondary-800/70", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "py-3.5 pl-4 text-left text-sm font-semibold  sm:pl-6", children: "Tx Id" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Amount" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Date" })] }) }), _jsx("tbody", { className: "divide-y divide-secondary-600", children: payouts.map((payout) => (_jsxs("tr", { children: [_jsx("td", { className: "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary-text sm:pl-6 underline hover:no-underline", children: _jsx("a", { target: "_blank", href: network?.transaction_explorer_template?.replace("{0}", payout.transaction_id), children: shortenAddress(payout.transaction_id) }) }), _jsx("td", { className: "whitespace-nowrap px-3 py-4 text-sm text-gray-100", children: payout.amount }), _jsx("td", { className: "px-3 py-4 text-sm text-gray-100", children: new Date(payout.date).toLocaleString() })] }, payout.transaction_id))) })] }) }) }) })] })] });
+                                    _jsxs(_Fragment, { children: [_jsx("span", { children: "Onboarding incentives that are earned by transferring to\u00A0" }), network?.display_name, _jsx("span", { children: ".\u00A0" })] }) }) }), _jsxs("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: [!campaignIsEnded &&
+                                _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Pending Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that will be airdropped periodically.` }), " "] }), _jsx("span", { children: "Next Airdrop" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx(ImageWithFallback, { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_pending_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx(Clock, { className: "h-5" }), _jsxs("p", { children: [difference_in_days, "d ", difference_in_hours, "h"] })] })] }) }), _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Total Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that you've earned so far (including Pending Earnings).` })] }), _jsx("span", { children: "Current Value" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-slate-300 text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx(ImageWithFallback, { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("p", { children: [_jsx("span", { children: "$" }), _jsx("span", { children: rewards?.user_reward?.total_amount_in_usd.toFixed(rewards?.user_reward?.total_amount_in_usd > 0 ? 2 : 0) || 0 })] })] }) })] })] }), _jsx(ProgressComponent, { campaign: campaign, rewardsData: rewardsData?.data }), payouts.length > 0 &&
+                _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "font-bold text-lg text-left", children: "Payouts" }), _jsx("div", { className: " bg-secondary-700 divide-y divide-secondary-300 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx("div", { className: "inline-block min-w-full align-middle", children: _jsx("div", { className: "overflow-hidden shadow-sm ring-1 ring-black/5 sm:rounded-lg", children: _jsxs("table", { className: "min-w-full divide-y divide-secondary-500", children: [_jsx("thead", { className: "bg-secondary-800/70", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "py-3.5 pl-4 text-left text-sm font-semibold  sm:pl-6", children: "Tx Id" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Amount" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Date" })] }) }), _jsx("tbody", { className: "divide-y divide-secondary-600", children: payouts.map((payout) => (_jsxs("tr", { children: [_jsx("td", { className: "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary-text sm:pl-6 underline hover:no-underline", children: _jsx("a", { target: "_blank", href: network?.transaction_explorer_template?.replace("{0}", payout.transaction_id), children: shortenAddress(payout.transaction_id) }) }), _jsx("td", { className: "whitespace-nowrap px-3 py-4 text-sm text-gray-100", children: payout.amount }), _jsx("td", { className: "px-3 py-4 text-sm text-gray-100", children: new Date(payout.date).toLocaleString() })] }, payout.transaction_id))) })] }) }) }) })] })] });
 };
 const ProgressComponent = ({ campaign, rewardsData }) => {
     if (campaign.max_payout_amount) {

package/dist/components/Pages/Campaigns/Details/index.js

@@ -1,16 +1,18 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { Gift } from "lucide-react";
-import LayerSwapApiClient from "../../../../lib/layerSwapApiClient";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
 import useSWR from "swr";
-import SubmitButton from "../../../Buttons/submitButton";
-import WalletIcon from "../../../Icons/WalletIcon";
-import { Widget } from "../../../Widget/Index";
+import SubmitButton from "../../../../components/Buttons/submitButton";
+import WalletIcon from "../../../../components/Icons/WalletIcon";
+import LinkWrapper from "../../../../components/Common/LinkWrapper";
+import { Widget } from "../../../../components/Widget/Index";
 import Leaderboard from "./Leaderboard";
 import Rewards from "./Rewards";
-import SpinIcon from "../../../Icons/spinIcon";
+import SpinIcon from "../../../../components/Icons/spinIcon";
 import useWallet from "../../../../hooks/useWallet";
+import { useConnectModal } from "../../../../components/Wallet/WalletModal";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
 import { LayerswapProvider } from "../../../../context/LayerswapProvider";
 export const CampaignDetailsComponent = ({ campaignName }) => {
     const apiClient = new LayerSwapApiClient();
@@ -18,8 +20,9 @@ export const CampaignDetailsComponent = ({ campaignName }) => {
     const campaign = campaignsData?.data?.find(c => c.name === campaignName);
     const network = campaign?.network;
     const { provider } = useWallet(network, 'autofil');
+    const { connect } = useConnectModal();
     const handleConnect = useCallback(async () => {
-        await provider?.connectWallet();
+        await connect(provider);
     }, [provider, network]);
     const wallet = provider?.activeWallet;
     const isConnected = !!wallet?.address;
@@ -29,7 +32,7 @@ export const CampaignDetailsComponent = ({ campaignName }) => {
     if (!campaign) {
         return _jsx(NotFound, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-7 w-7 relative", children: (campaign.logo_url || network?.logo) && _jsx("img", { src: (campaign.logo_url || network?.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { className: "font-bold text-xl text-left flex items-center text-primary-text", children: campaign.display_name })] }), isConnected ?
+    return (_jsxs(Widget, { children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-7 w-7 relative", children: (campaign.logo_url || network?.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || network?.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { className: "font-bold text-xl text-left flex items-center text-primary-text", children: campaign.display_name })] }), isConnected ?
                             _jsx(Rewards, { campaign: campaign })
                             :
                                 _jsx(BriefInformation, { campaign: campaign }), _jsx(Leaderboard, { campaign: campaign })] }) }), _jsx(_Fragment, { children: !isConnected &&
@@ -39,8 +42,8 @@ const BriefInformation = ({ campaign }) => _jsx("p", { className: "text-secondar
         campaign.description
         :
             _jsxs(_Fragment, { children: [_jsx("span", { children: "You can earn $" }), _jsx("span", { children: campaign?.token.symbol }), _jsx("span", { children: "\u00A0tokens by transferring assets to\u00A0" }), _jsxs("span", { children: [campaign.network.display_name, "."] }), _jsx("span", { children: " For each transaction, you'll receive\u00A0" }), _jsx("span", { children: campaign?.percentage }), _jsx("span", { children: "% of paid fees back.\u00A0" })] }) });
-const Loading = () => _jsx(Widget.Content, { children: _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) });
-const NotFound = () => _jsx(Widget.Content, { children: _jsxs("div", { className: "h-[364px] flex flex-col items-center justify-center space-y-4", children: [_jsx(Gift, { className: "h-20 w-20 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "Campaign not found" }), _jsx("a", { className: "text-xs underline hover:no-underline", href: '/campaigns', children: "See all campaigns" })] }) });
+const Loading = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) });
+const NotFound = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsxs("div", { className: "h-[364px] flex flex-col items-center justify-center space-y-4", children: [_jsx(Gift, { className: "h-20 w-20 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "Campaign not found" }), _jsx(LinkWrapper, { className: "text-xs underline hover:no-underline", href: '/campaigns', children: "See all campaigns" })] }) }) });
 export const CampaignDetails = (props) => {
     return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { children: _jsx(CampaignDetailsComponent, { campaignName: props.campaignName }) }) }));
 };

package/dist/components/Pages/Campaigns/index.js

@@ -1,14 +1,12 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Gift } from "lucide-react";
-import { useState } from "react";
-import LayerSwapApiClient from "../../../lib/layerSwapApiClient";
-import SpinIcon from "../../Icons/spinIcon";
+import LayerSwapApiClient from "../../../lib/apiClients/layerSwapApiClient";
+import SpinIcon from "../../../components/Icons/spinIcon";
 import useSWR from 'swr';
-import { Widget } from "../../Widget/Index";
+import LinkWrapper from "../../../components/Common/LinkWrapper";
+import { Widget } from "../../../components/Widget/Index";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
 import { LayerswapProvider } from "../../../context/LayerswapProvider";
-import VaulDrawer from "../../Modal/vaulModal";
-import { CampaignDetailsComponent } from "./Details";
 export const CampaignsComponent = () => {
     const apiClient = new LayerSwapApiClient();
     const { data: campaignsData, isLoading } = useSWR('/campaigns', apiClient.fetcher);
@@ -20,34 +18,25 @@ export const CampaignsComponent = () => {
     });
     const activeCampaigns = sortedCampaigns?.filter(IsCampaignActive) || [];
     const inactiveCampaigns = sortedCampaigns?.filter(c => !IsCampaignActive(c)) || [];
-    const [selectedCampaign, setSelectedCampaign] = useState(null);
-    const [showDrawer, setShowDrawer] = useState(false);
-    const handleCampaignSelect = (campaign) => {
-        setShowDrawer(true);
-        setSelectedCampaign(campaign);
-    };
-    const handleClose = () => {
-        setShowDrawer(false);
-    };
-    return (_jsx(_Fragment, { children: !isLoading ?
-            _jsxs("div", { className: "space-y-5 h-full text-primary-text", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Campaigns" }), _jsx("div", { className: "bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg", children: _jsx("div", { className: "p-3 space-y-4", children: activeCampaigns.length > 0 ?
-                                        activeCampaigns.map(c => _jsx(CampaignItem, { onCampaignSelect: handleCampaignSelect, campaign: c }, c.id))
-                                        :
-                                            _jsxs("div", { className: "flex flex-col items-center justify-center space-y-2", children: [_jsx(Gift, { className: "h-10 w-10 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "There are no active campaigns right now" })] }) }) })] }), inactiveCampaigns.length > 0 &&
-                        _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Old campaigns" }), _jsx("div", { className: "bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg", children: _jsx("div", { className: "p-3 dpsv flex flex-col space-y-4", children: inactiveCampaigns?.map(c => _jsx(CampaignItem, { onCampaignSelect: handleCampaignSelect, campaign: c }, c.id)) }) })] }), _jsx(VaulDrawer, { modalId: "campaign-details", show: showDrawer, setShow: setShowDrawer, onClose: handleClose, onAnimationEnd: () => !showDrawer && setSelectedCampaign(null), children: _jsx(VaulDrawer.Snap, { id: "item-1", children: selectedCampaign?.name && _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign?.name }) }) })] })
-            :
-                _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }));
+    return (_jsx(Widget, { children: _jsx(Widget.Content, { children: !isLoading ?
+                _jsxs("div", { className: "space-y-5 h-full text-primary-text", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Campaigns" }), _jsx("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: _jsx("div", { className: "p-3 space-y-4", children: activeCampaigns.length > 0 ?
+                                            activeCampaigns.map(c => _jsx(CampaignItem, { campaign: c }, c.id))
+                                            :
+                                                _jsxs("div", { className: "flex flex-col items-center justify-center space-y-2", children: [_jsx(Gift, { className: "h-10 w-10 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "There are no active campaigns right now" })] }) }) })] }), inactiveCampaigns.length > 0 &&
+                            _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Old campaigns" }), _jsx("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: _jsx("div", { className: "p-3 dpsv flex flex-col space-y-4", children: inactiveCampaigns?.map(c => _jsx(CampaignItem, { campaign: c }, c.id)) }) })] })] })
+                :
+                    _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) }));
 };
-const CampaignItem = ({ campaign, onCampaignSelect }) => {
+const CampaignItem = ({ campaign }) => {
     const campaignDaysLeft = ((new Date(campaign.end_date).getTime() - new Date().getTime()) / 86400000).toFixed();
     const campaignIsActive = IsCampaignActive(campaign);
-    return _jsxs("button", { type: "button", onClick: () => onCampaignSelect?.(campaign), className: "flex justify-between items-center w-full", children: [_jsxs("span", { className: "flex items-center gap-1 hover:opacity-70 active:scale-90 duration-200 transition-all", children: [_jsx("span", { className: "h-5 w-5 relative", children: (campaign.logo_url || campaign.network.logo) && _jsx("img", { src: (campaign.logo_url || campaign.network.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsxs("span", { className: "font-semibold text-base text-left flex items-center", children: [campaign?.display_name, " "] })] }), campaignIsActive &&
-                _jsxs("span", { className: "text-primary-text-muted text-right text-sm", children: [campaignDaysLeft, " days left"] })] });
+    return _jsxs(LinkWrapper, { href: `/campaigns/${campaign.name}`, className: "flex justify-between items-center", children: [_jsxs("span", { className: "flex items-center gap-1 hover:opacity-70 active:scale-90 duration-200 transition-all", children: [_jsx("span", { className: "h-5 w-5 relative", children: (campaign.logo_url || campaign.network.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || campaign.network.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsxs("span", { className: "font-semibold text-base text-left flex items-center", children: [campaign?.display_name, " "] })] }), campaignIsActive &&
+                _jsxs("span", { className: "text-primary-text-tertiary text-right text-sm", children: [campaignDaysLeft, " days left"] })] });
 };
 function IsCampaignActive(campaign) {
     const now = new Date();
     return (new Date(campaign?.end_date).getTime() > now.getTime());
 }
 export const Campaigns = (props) => {
-    return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { hideMenu: props.hideMenu, className: "min-h-[520px]", children: _jsx(Widget.Content, { children: _jsx(CampaignsComponent, {}) }) }) }));
+    return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { hideMenu: props.hideMenu, children: _jsx(Widget.Content, { children: _jsx(CampaignsComponent, {}) }) }) }));
 };

package/dist/components/Pages/Maintanance/index.d.ts

@@ -1,2 +1,2 @@
-import { FC } from "react";
-export declare const Maintanance: FC;
+declare function MaintananceContent(props: any): import("react/jsx-runtime").JSX.Element;
+export default MaintananceContent;

package/dist/components/Pages/Maintanance/index.js

@@ -1,22 +1,16 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useIntercom } from "react-use-intercom";
-import { useAuthState } from "../../../context/authContext";
-import SubmitButton from "../../Buttons/submitButton";
-import LayerSwapLogo from "../../Icons/layerSwapLogo";
-import TwitterLogo from "../../Icons/TwitterLogo";
-export const Maintanance = (props) => {
-    const { email, userId } = useAuthState();
+import SubmitButton from "../../../components/Buttons/submitButton";
+import LayerSwapLogo from "../../../components/Icons/layerSwapLogo";
+import TwitterLogo from "../../../components/Icons/TwitterLogo";
+function MaintananceContent(props) {
     const { boot, update } = useIntercom();
-    const updateWithProps = () => update({ userId, customAttributes: { email: email, } });
     useEffect(() => {
         boot();
-        updateWithProps();
+        update();
     });
     const twitterLogo = _jsx(TwitterLogo, { className: "text-primary-text h-6 w-6" });
-    return (_jsxs("div", { className: "flex items-stretch flex-col", children: [_jsx(LayerSwapLogo, { className: "h-8 mt-4 md:hidden w-auto text-primary-logoColor fill-primary-text" }), _jsx(CardContainer, { ...props, children: _jsxs("div", { className: "flex flex-col justify-center space-y-12 p-10 text-primary-text md:min-h-fit min-h-[400px]", children: [_jsxs("h1", { className: "text-xl tracking-tight text-gray-200", children: [_jsx("p", { className: "mb-4 text-secondary-text", children: "We're upgrading our systems and infrastructure to give you the best experience yet." }), _jsxs("span", { className: "block font-bold text-2xl xl:inline", children: [_jsx("span", { children: "We'll be back at" }), " ", _jsx("span", { children: new Date(1729778400000).toLocaleTimeString() })] })] }), _jsx(SubmitButton, { onClick: () => window.open('https://twitter.com/layerswap', '_blank'), icon: twitterLogo, isDisabled: false, isSubmitting: false, children: "Follow for updates" })] }) })] }));
-};
-function CardContainer(props) {
-    return (_jsx("div", { ...props, children: _jsxs("div", { className: "bg-secondary-900 shadow-card rounded-lg w-full mt-10 overflow-hidden relative", children: [_jsx("div", { className: "relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500" }), _jsx("div", { className: "p-2", children: props.children })] }) }));
+    return (_jsxs("div", { className: "flex items-stretch flex-col", children: [_jsx(LayerSwapLogo, { className: "h-8 mt-4 md:hidden w-auto text-primary-logoColor fill-primary-text" }), _jsx("div", { ...props, children: _jsxs("div", { className: "bg-secondary-700 shadow-card rounded-lg w-full mt-10 overflow-hidden relative", children: [_jsx("div", { className: "relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500" }), _jsx("div", { className: "p-2", children: _jsxs("div", { className: "flex flex-col justify-center space-y-12 p-10 text-primary-text md:min-h-fit min-h-[400px]", children: [_jsxs("h1", { className: "text-xl tracking-tight text-gray-200", children: [_jsx("p", { className: "mb-4 text-secondary-text", children: "We're upgrading our systems and infrastructure to give you the best experience yet." }), _jsxs("span", { className: "block font-bold text-2xl xl:inline", children: [_jsx("span", { children: "We'll be back at" }), " ", _jsx("span", { children: new Date(1748448000000).toLocaleTimeString() })] })] }), _jsx(SubmitButton, { onClick: () => window.open('https://twitter.com/layerswap', '_blank'), icon: twitterLogo, isDisabled: false, isSubmitting: false, children: "Follow for updates" })] }) })] }) })] }));
 }
+export default MaintananceContent;

package/dist/components/Pages/NoCookies/index.d.ts

@@ -1,2 +1,2 @@
-import { FC } from "react";
-export declare const NoCookies: FC;
+declare function NoCookies(props: any): import("react/jsx-runtime").JSX.Element;
+export default NoCookies;

package/dist/components/Pages/NoCookies/index.js

@@ -1,13 +1,13 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import MessageComponent from "../../Common/MessageComponent";
 import inIframe from "../../utils/inIframe";
-export const NoCookies = () => {
+function NoCookies(props) {
     const [embedded, setEmbedded] = useState();
     useEffect(() => {
         setEmbedded(inIframe());
     }, []);
-    return (_jsx("div", { className: `flex flex-col items-center min-h-screen overflow-hidden relative font-robo`, children: _jsx("div", { className: "w-full z-[1]", children: _jsx("div", { className: "flex content-center items-center justify-center space-y-5 flex-col container mx-auto", children: _jsx("div", { className: "flex flex-col w-full text-primary-text", children: _jsx("div", { className: "styled-scroll", children: _jsx("div", { className: "min-h-screen overflow-hidden relative font-robo", children: _jsx("div", { className: "mx-auto max-w-xl bg-secondary-900 shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]", children: _jsx(MessageComponent, { children: _jsxs(MessageComponent.Content, { icon: "red", children: [_jsx(MessageComponent.Header, { children: "Sorry" }), _jsxs(MessageComponent.Description, { children: [_jsxs("div", { className: "text-secondary-text space-y-5 text-left", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-primary-text", children: "It seems like you\u2019ve either:" }), _jsxs("ul", { className: "text-secondary-text list-disc ml-4 mt-0 ", children: [_jsx("li", { children: "Disabled cookies" }), _jsx("li", { children: "Or using Layerswap in a partner\u2019s page in Incognito mode" })] })] }), _jsx("p", { className: "text-secondary-text", children: "Unforunately, we can\u2019t run in those conditions \uD83D\uDE41" })] }), embedded &&
-                                                        _jsx("a", { target: "_blank", href: window?.location?.href, className: "bg-primary text-primary-actionButtonText py-3 px-3 border border-primary disabled:border-primary-900 shadowed-button items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md shadow-md hover:shadow-xl transform hover:-translate-y-0.5 transition duration-200 ease-in-out", children: "Try on Layerswap" })] })] }) }) }) }) }) }) }) }) }));
-};
+    return (_jsx("div", { className: "styled-scroll", children: _jsx("div", { className: "min-h-screen overflow-hidden relative font-robo", children: _jsx("div", { className: "mx-auto max-w-xl bg-secondary-700 shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]", children: _jsx(MessageComponent, { children: _jsxs(MessageComponent.Content, { icon: "red", children: [_jsx(MessageComponent.Header, { children: "Sorry" }), _jsxs(MessageComponent.Description, { children: [_jsxs("div", { className: "text-secondary-text space-y-5 text-left", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-primary-text", children: "It seems like you\u2019ve either:" }), _jsxs("ul", { className: "text-secondary-text list-disc ml-4 mt-0 ", children: [_jsx("li", { children: "Disabled cookies" }), _jsx("li", { children: "Or using Layerswap in a partner\u2019s page in Incognito mode" })] })] }), _jsx("p", { className: "text-secondary-text", children: "Unforunately, we can\u2019t run in those conditions \uD83D\uDE41" })] }), embedded &&
+                                        _jsx("a", { target: "_blank", href: window?.location?.href, className: "bg-primary text-primary-buttonTextColor py-3 px-3 border border-primary disabled:border-primary-900 shadowed-button items-center space-x-1 disabled:text-primary/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md shadow-md hover:shadow-xl transform hover:-translate-y-0.5 transition duration-200 ease-in-out", rel: "noopener noreferrer", children: "Try on Layerswap" })] })] }) }) }) }) }));
+}
+export default NoCookies;

package/dist/components/Pages/Swap/Form/ExchangeForm.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { Partner } from "../../../../Models/Partner";
+type Props = {
+    partner?: Partner;
+};
+declare const ExchangeForm: FC<Props>;
+export default ExchangeForm;

package/dist/components/Pages/Swap/Form/ExchangeForm.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import ValidationError from "../../../../components/Pages/Swap/Form/SecondaryComponents/validationError";
+import CexPicker, { SelectedEchangePlaceholder } from "../../../../components/Input/CexPicker";
+import { Widget } from "../../../../components/Widget/Index";
+import FormButton from "./SecondaryComponents/FormButton";
+import { Form, useFormikContext } from "formik";
+import RoutePicker from "../../../../components/Input/RoutePicker";
+import AmountField from "../../../../components/Input/Amount";
+import Address from "../../../../components/Input/Address";
+import { ChevronDown } from "lucide-react";
+import AddressIcon from "../../../../components/Common/AddressIcon";
+import { ExtendedAddress } from "../../../../components/Input/Address/AddressPicker/AddressWithIcon";
+import MinMax from "../../../../components/Input/Amount/MinMax";
+import { transformFormValuesToQuoteArgs, useQuoteData } from "../../../../hooks/useFee";
+import { useValidationContext } from "../../../../context/validationContext";
+import useWallet from "../../../../hooks/useWallet";
+import clsx from "clsx";
+import { useSwapDataState } from "../../../../context/swap";
+import { useClickOutside } from "../../../../hooks/useClickOutside";
+import DepositMethodComponent from "./FeeDetails/DepositMethod";
+import QuoteDetails from "./FeeDetails";
+import { useFormChangeCallback } from "../../../../context/callbackProvider";
+const ExchangeForm = ({ partner }) => {
+    const { values, isSubmitting } = useFormikContext();
+    const triggerFormChangeCallback = useFormChangeCallback();
+    useEffect(() => {
+        triggerFormChangeCallback(values);
+    }, [values, triggerFormChangeCallback]);
+    const { fromAsset: fromCurrency, from, to: destination, destination_address, amount } = values || {};
+    const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
+    const [actionTempValue, setActionTempValue] = useState(undefined);
+    const { wallets } = useWallet();
+    const WalletIcon = wallets.find(wallet => wallet.address.toLowerCase() == destination_address?.toLowerCase())?.icon;
+    const { swapId } = useSwapDataState();
+    const quoteRefreshInterval = !!swapId ? 0 : undefined;
+    const { isQuoteLoading, quote, minAllowedAmount, maxAllowedAmount: maxAmountFromApi } = useQuoteData(quoteArgs, quoteRefreshInterval);
+    const { routeValidation, formValidation } = useValidationContext();
+    const isValid = !formValidation.message;
+    const error = formValidation.message;
+    const { ref: parentRef, isActive: showQuickActions, activate: setShowQuickActions } = useClickOutside(false);
+    const handleActionHover = (value) => {
+        setActionTempValue(value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full", children: [_jsx(Widget.Content, { children: _jsx("div", { className: "w-full max-sm:min-h-[79svh] flex flex-col justify-between mt-2 sm:mt-0", children: _jsx("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full leading-4', children: _jsxs("div", { className: "flex flex-col w-full space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3", children: _jsx(Address, { partner: partner, children: ({ disabled, addressItem }) => _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { addressItem: addressItem, network: destination, disabled: disabled, WalletIcon: WalletIcon }) })
+                                                                :
+                                                                    _jsxs("span", { className: "flex items-center", children: [_jsx(SelectedEchangePlaceholder, { placeholder: 'Enter destination address' }), _jsx("span", { className: "absolute right-0 px-1 pr-5 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }) }) }) })] }), _jsxs("div", { className: "bg-secondary-500 rounded-2xl p-3 group space-y-2", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base ml-2 leading-5", children: "Enter amount" }), from && fromCurrency && minAllowedAmount && maxAmountFromApi &&
+                                                            _jsx("div", { className: clsx({
+                                                                    "hidden": !showQuickActions,
+                                                                    "block": showQuickActions,
+                                                                }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: "deposit_address" }) })] }), _jsx("div", { className: "relative group exchange-amount-field", children: _jsx(AmountField, { className: "!pb-0 !rounded-xl", fee: quote, usdPosition: "right", actionValue: actionTempValue }) })] })] }) }) }) }), _jsxs(Widget.Footer, { children: [_jsx("div", { className: "space-y-3", children: routeValidation.message
+                                    ? _jsx(ValidationError, {})
+                                    : _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading }) }), _jsx(FormButton, { shouldConnectWallet: false, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner })] })] })] }));
+};
+export default ExchangeForm;
+const AddressButton = ({ addressItem, network, disabled, WalletIcon }) => {
+    return _jsxs("div", { className: "justify-between w-full items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex bg-secondary-400 text-primary-text items-center justify-center rounded-md h-7 w-7 overflow-hidden", children: WalletIcon ? (_jsx(WalletIcon, { className: "h-7 w-7 object-contain" })) : (_jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: addressItem.address, size: 36 })) }), _jsx(ExtendedAddress, { address: addressItem.address, network: network, showDetails: true, title: "USDC", description: "Circle USD Coin", logo: "https://prodlslayerswapbridgesa.blob.core.windows.net/layerswap/currencies/arusdc.png" })] }), _jsx("span", { className: "justify-self-end right-0 flex items-center pointer-events-none  text-primary-text", children: !disabled && _jsx("span", { className: "absolute right-0 pr-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) }) })] });
+};