@ape.swap/bonds-sdk 1.0.407 → 1.0.409

package/dist/components/Bonds/Bonds.js

@@ -75,6 +75,7 @@ import { TooltipBubble, Svg } from '../uikit-sdk';
 import Tooltip from '../Tooltip/Tooltip';
 import { BLOCK_EXPLORER } from '../../config/constants/chains';
 import TokenInfoAndName from '../TokenInfoAndName';
+import ConnectWalletButton from '../ConnectWallet';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -244,7 +245,7 @@ var Bonds = function (_a) {
         var vestingDays = vestingTime(bond.vestingTerm).days;
         return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
     };
-    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
+    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [_jsx(ConnectWalletButton, {}), isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
                         var _a, _b, _c, _d;
                         return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%") })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [calculateARR(bond), "%"] })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                                     width: '127px',

package/dist/components/ConnectWallet/ConnectWalletModal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const ConnectWalletModal: ({ onDismiss }: {
+    onDismiss: () => void;
+}) => import("react").JSX.Element;
+export default ConnectWalletModal;

package/dist/components/ConnectWallet/ConnectWalletModal.js

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, Modal, Svg, Text } from '../../components/uikit-sdk';
+import ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import AllWallets from './components/AllWallets';
+import PrioritizedWallets from './components/PrioritizedWallets';
+var modalProps = {
+    sx: {
+        maxHeight: 'calc(100% - 30px)',
+        height: ['395px', '395px', '395px', '470px'],
+        width: ['280px', '280px', '280px', '620px'],
+        maxWidth: ['280px', '280px', '280px', '620px'],
+        minWidth: ['unset', 'unset', 'unset', '620px'],
+        overflow: 'hidden',
+        padding: ['20px', '20px', '20px', '30px'],
+    },
+};
+var variants = {
+    enter: function (direction) {
+        return {
+            x: direction > 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+    center: {
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: function (direction) {
+        return {
+            zIndex: 0,
+            x: direction < 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+};
+var ConnectWalletModal = function (_a) {
+    var onDismiss = _a.onDismiss;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    return (_jsxs(Modal, __assign({}, modalProps, { children: [_jsx(ModalHeader, __assign({}, { sx: { height: '24px' } }, { hideDivider: true }, { children: open && (_jsxs(Flex, __assign({ sx: { width: '100%' } }, { children: [_jsxs(Flex, __assign({ onClick: function () { return setOpen(false); }, sx: { '&:hover': { cursor: 'pointer' } } }, { children: [_jsx(Svg, { icon: "caret", direction: "left" }), _jsx(Text, __assign({ sx: { fontWeight: 700, ml: '5px', fontSize: '14px' } }, { children: "Back" }))] })), _jsx(Flex, __assign({ sx: { alignItems: 'center', justifyContent: 'center', width: '100%' } }, { children: _jsx(Text, __assign({ weight: 700 }, { children: "Connect Wallet" })) }))] }))) })), _jsx(Flex, __assign({ sx: { height: '400px', flexDirection: 'column' } }, { children: _jsx(AnimatePresence, __assign({ initial: false }, { children: _jsx(motion.div, __assign({ custom: open ? 1 : -1, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: {
+                            x: { type: 'spring', stiffness: 300, damping: 30 },
+                            opacity: { duration: 0.2 },
+                        }, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, sx: { width: '100%' } }, { children: !open ? (_jsx(PrioritizedWallets, { setOpen: setOpen, onDismiss: onDismiss })) : (_jsx(AllWallets, { onDismiss: onDismiss })) }), open ? 'wallets' : 'connect') })) }))] })));
+};
+export default ConnectWalletModal;

package/dist/components/ConnectWallet/components/AllWallets.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    onDismiss: () => void;
+}
+declare const AllWallets: ({ onDismiss }: Props) => import("react").JSX.Element;
+export default AllWallets;

package/dist/components/ConnectWallet/components/AllWallets.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Flex } from '../../uikit-sdk';
+import config from '../config';
+import WalletCard from './WalletCard';
+import styles from './styles';
+var AllWallets = function (_a) {
+    var onDismiss = _a.onDismiss;
+    return (_jsx(Flex, __assign({ sx: styles.allWalletsContainer }, { children: _jsx(Flex, __assign({ sx: styles.cardsContainer }, { children: config.map(function (entry) { return (_jsx(WalletCard, { walletConfig: entry, onDismiss: onDismiss }, entry.label)); }) })) })));
+};
+export default AllWallets;

package/dist/components/ConnectWallet/components/PrioritizedWallets.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    setOpen: (open: boolean) => void;
+    onDismiss: () => void;
+}
+declare const PrioritizedWallets: ({ setOpen, onDismiss }: Props) => import("react").JSX.Element;
+export default PrioritizedWallets;

package/dist/components/ConnectWallet/components/PrioritizedWallets.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import WalletCard from './WalletCard';
+import config from '../config';
+import { Button, Flex, Svg, Text } from '../../uikit-sdk';
+import styles from './styles';
+import { Link } from 'theme-ui';
+var PrioritizedWallets = function (_a) {
+    var setOpen = _a.setOpen, onDismiss = _a.onDismiss;
+    var showWallets = config.slice(0, 3);
+    return (_jsxs(Flex, __assign({ sx: styles.prioritizedContainer }, { children: [_jsxs(Flex, __assign({ sx: { flexWrap: 'wrap', width: '100%' } }, { children: [_jsx(Flex, __assign({ sx: { display: ['none', 'none', 'none', 'flex'] } }, { children: _jsx(Svg, { icon: "walletImage" }) })), _jsxs(Flex, __assign({ sx: styles.infoContainer }, { children: [_jsx(Flex, __assign({ sx: { width: '100%' } }, { children: _jsx(Text, __assign({ sx: styles.title }, { children: "Connect Wallet" })) })), _jsx(Text, __assign({ sx: styles.firstStep }, { children: "Start by connecting with one of the wallets below. Be sure to store your private keys or seed phrase securely. Never share them with anyone." })), _jsx(Text, __assign({ sx: { fontSize: '12px', fontWeight: 300 } }, { children: _jsxs(Link, __assign({ href: "https://docs.ape.bond/apebond/products-and-features/wallets/how-to-connect-your-wallet", target: "_blank", color: "text", sx: styles.learnHow }, { children: [_jsx(Text, __assign({ mr: "5px" }, { children: "Learn how to connect" })), _jsx(Svg, { icon: "external" })] })) }))] }))] })), _jsxs(Flex, __assign({ sx: styles.buttonsContainer }, { children: [showWallets.map(function (entry) { return (_jsx(WalletCard, { walletConfig: entry, onDismiss: onDismiss }, entry.label)); }), _jsxs(Button, __assign({ sx: __assign(__assign({}, styles.button), { background: 'white4', '&:hover': { background: 'white3' }, border: 'none', '&:hover:not([disabled])': { background: 'white3' } }), onClick: function () { return setOpen(true); } }, { children: [_jsx(Flex, __assign({ sx: { height: ['45px', '45px', '45px', '65px'], alignItems: 'flex-end' } }, { children: _jsx(Flex, __assign({ sx: __assign(__assign({}, styles.moreWallets), { background: 'primaryButtonDisable' }) }, { children: _jsx(Flex, __assign({ sx: { lineHeight: ['24px', '24px', '24px', '40px'], fontWeight: [700, 700, 700, 900] } }, { children: ". . ." })) })) })), _jsx(Flex, __assign({ sx: { height: ['39px', '39px', '39px', '49px'], alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.walletName }, { children: "MORE" })) }))] }))] }))] })));
+};
+export default PrioritizedWallets;

package/dist/components/ConnectWallet/components/WalletCard.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Config } from '../types';
+interface Props {
+    walletConfig: Config;
+    onDismiss: () => void;
+}
+declare const WalletCard: React.FC<Props>;
+export default WalletCard;

package/dist/components/ConnectWallet/components/WalletCard.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Button, Flex, Svg, Text } from '../../uikit-sdk';
+import { updateSelectedWallet } from '../../../state/user/reducer';
+import useActivate from '../../../utils/connection/activate';
+import styles from './styles';
+import track from '../../../utils/track';
+import { useWeb3React } from '@web3-react/core';
+var WalletCard = function (_a) {
+    var walletConfig = _a.walletConfig, onDismiss = _a.onDismiss;
+    var title = walletConfig.label, icon = walletConfig.icon, connection = walletConfig.connection;
+    var activate = useActivate();
+    var chainId = useWeb3React().chainId;
+    var handleConnect = function () {
+        activate(connection).then(function () {
+            track({
+                event: 'wallet_connect',
+                chain: chainId,
+                data: {
+                    wallet: title,
+                },
+            });
+        });
+        updateSelectedWallet({ wallet: connection.type });
+        onDismiss();
+    };
+    return (_jsxs(Button, __assign({ variant: "tertiary", onClick: handleConnect, sx: styles.button, id: "wallet-connect-".concat(title === null || title === void 0 ? void 0 : title.toLocaleLowerCase()) }, { children: [_jsx(Flex, __assign({ sx: styles.iconContainer }, { children: _jsx(Svg, { icon: icon }) })), _jsx(Flex, __assign({ sx: { height: ['39px', '39px', '39px', '49px'], alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.walletName }, { children: title })) }))] })));
+};
+export default WalletCard;

package/dist/components/ConnectWallet/components/styles.d.ts

@@ -0,0 +1,3 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<'allWalletsContainer' | 'title' | 'smallTitle' | 'cardsContainer' | 'prioritizedContainer' | 'infoContainer' | 'firstStep' | 'learnHow' | 'buttonsContainer' | 'button' | 'moreWallets' | 'walletName' | 'iconContainer', ThemeUIStyleObject>;
+export default styles;

package/dist/components/ConnectWallet/components/styles.js

@@ -0,0 +1,108 @@
+var styles = {
+    allWalletsContainer: {
+        flexWrap: 'wrap',
+        position: 'absolute',
+        width: '100%',
+        maxWidth: ['240px', '240px', '240px', '580px'],
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        height: ['325px', '325px', '325px', '390px'],
+        overflow: 'hidden',
+    },
+    title: {
+        fontSize: ['16px', '16px', '16px', '25px'],
+        fontWeight: 700,
+        lineHeight: ['24px', '24px', '24px', '37.5px'],
+        mt: ['', '', '', '10px'],
+    },
+    smallTitle: {
+        fontSize: ['12px', '12px', '12px', '16px'],
+        fontWeight: 700,
+        lineHeight: '24px',
+        position: 'absolute',
+        right: '240px',
+        display: ['none', 'none', 'none', 'block'],
+    },
+    cardsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: ['space-between', 'space-between', 'space-between', 'flex-start'],
+        mt: '15px',
+        mb: '-15px',
+        alignItems: 'flex-start',
+        maxHeight: ['300px', '300px', '300px', '372px'],
+        overflowY: 'auto',
+        width: ['240px', '240px', '240px', '563px'],
+        '&::-webkit-scrollbar, -ms-overflow-style': { width: '3px' },
+        '&::-webkit-scrollbar-track': { boxShadow: 'inset 0 0 2px #4d4040' },
+    },
+    prioritizedContainer: {
+        flexWrap: 'wrap',
+        position: 'absolute',
+        width: '100%',
+        maxWidth: ['240px', '240px', '240px', '563px'],
+    },
+    infoContainer: {
+        flexWrap: 'wrap',
+        width: ['100%', '100%', '100%', '50%'],
+        flexDirection: 'column',
+        height: ['132px', '132px', '132px', 'unset'],
+    },
+    firstStep: {
+        fontSize: ['12px', '12px', '12px', '16px'],
+        fontWeight: 500,
+        lineHeight: ['14px', '14px', '14px', '24px'],
+        mt: ['5px', '5px', '5px', '10px'],
+    },
+    learnHow: {
+        display: 'flex',
+        mt: ['5px', '5px', '5px', '5px'],
+        textDecoration: 'underline',
+        '& svg': { width: '9px' },
+    },
+    buttonsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        minWidth: ['240px', '240px', '240px', '560px'],
+        mt: ['15px', '15px', '15px', '30px'],
+    },
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: ['108px', '108px', '108px', '128px'],
+        flexDirection: 'column',
+        minHeight: ['84px', '84px', '84px', '114px'],
+        mb: '15px',
+        mr: ['5px', '5px', '5px', '15px'],
+        padding: '0 9px',
+        background: 'white3',
+        fontSize: ['12px', '12px', '12px', '16px'],
+        ':nth-of-type(4n)': { mr: ['', '', '', '0px'] },
+        ':nth-last-of-type(-n+2)': {
+            mb: '0px',
+        },
+    },
+    moreWallets: {
+        borderRadius: '25px',
+        opacity: 0.9,
+        width: ['30px', '30px', '30px', '50px'],
+        height: ['30px', '30px', '30px', '50px'],
+        alignItems: 'flex-start',
+        color: 'white1',
+        justifyContent: 'center',
+    },
+    walletName: {
+        lineHeight: ['14px', '14px', '14px', '16px'],
+        fontSize: ['12px', '12px', '12px', '14px'],
+        fontWeight: 700,
+        color: 'text',
+    },
+    iconContainer: {
+        height: ['45px', '45px', '45px', '65px'],
+        alignItems: 'flex-end',
+        width: ['32px', '32px', '32px', '50px'],
+    },
+};
+export default styles;

package/dist/components/ConnectWallet/config.d.ts

@@ -0,0 +1,3 @@
+import { Config } from './types';
+declare const connectors: Config[];
+export default connectors;

package/dist/components/ConnectWallet/config.js

@@ -0,0 +1,70 @@
+import { icons } from '../uikit-sdk/Svg/types';
+import { coinbaseWalletConnection, injectedConnection, walletConnectConnection } from '../../utils/connection';
+var connectors = [
+    {
+        label: 'Metamask',
+        icon: icons.METAMASK,
+        connection: injectedConnection,
+    },
+    {
+        label: 'TrustWallet',
+        icon: icons.TRUST_WALLET,
+        connection: injectedConnection,
+    },
+    {
+        label: 'Wallet Connect',
+        icon: icons.WALLET_CONNECT,
+        connection: walletConnectConnection,
+    },
+    {
+        label: 'Bitget Wallet',
+        icon: icons.BITKEEP,
+        connection: injectedConnection,
+    },
+    {
+        label: 'TokenPocket',
+        icon: icons.TOKEN_POCKET,
+        connection: injectedConnection,
+    },
+    {
+        label: 'SafePal Wallet',
+        icon: icons.SAFE_PAL_WALLET,
+        connection: injectedConnection,
+    },
+    {
+        label: 'Brave Wallet',
+        icon: icons.BRAVE,
+        connection: injectedConnection,
+    },
+    {
+        label: 'Coinbase Wallet',
+        icon: icons.COINBASE,
+        connection: coinbaseWalletConnection,
+    },
+    {
+        label: 'NABOX Wallet',
+        icon: icons.NABOX,
+        connection: injectedConnection,
+    },
+    {
+        label: 'ONTO Wallet',
+        icon: icons.ONTO_WALLET,
+        connection: injectedConnection,
+    },
+    {
+        label: 'MathWallet',
+        icon: icons.MATH_WALLET,
+        connection: injectedConnection,
+    },
+    {
+        label: 'OKX Wallet',
+        icon: icons.OKX,
+        connection: injectedConnection,
+    },
+    {
+        label: 'Madwallet',
+        icon: icons.MAD_WALLET,
+        connection: injectedConnection,
+    },
+];
+export default connectors;

package/dist/components/ConnectWallet/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const ConnectWalletButton: ({ navBarFlag }: {
+    navBarFlag?: boolean | undefined;
+}) => import("react").JSX.Element;
+export default ConnectWalletButton;

package/dist/components/ConnectWallet/index.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Button, Flex, Text } from '../../components/uikit-sdk';
+import useModal from '../../hooks/useModal';
+import ConnectWalletModal from './ConnectWalletModal';
+var ConnectWalletButton = function (_a) {
+    var navBarFlag = _a.navBarFlag;
+    var onPresentWalletConnectModal = useModal(_jsx(ConnectWalletModal, { onDismiss: function () { return null; } }), true, true, 'ConnectWalletModal')[0];
+    return (_jsx(Flex, __assign({ sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' } }, { children: _jsx(Button, __assign({ fullWidth: true, onClick: onPresentWalletConnectModal, sx: { height: navBarFlag ? '32.5px' : '45px', padding: '10px 10px', alignItems: 'center' } }, { children: _jsx(Text, __assign({ color: "primaryBright", size: navBarFlag ? '14px' : '16px', weight: navBarFlag ? 600 : 700, sx: { mt: '1px' } }, { children: 'Connect' })) })) })));
+};
+export default ConnectWalletButton;

package/dist/components/ConnectWallet/types.d.ts

@@ -0,0 +1,8 @@
+import { icons } from '../../components/uikit-sdk/Svg/types';
+import { Connection, ConnectionType } from '../../utils/connection/types';
+export type Login = (connectorId: ConnectionType) => void;
+export interface Config {
+    label: string;
+    icon: icons;
+    connection: Connection;
+}

package/dist/components/ConnectWallet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uikit-sdk/Modal/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InternalProps } from './types';
+declare const ModalFooter: ({ children, onDismiss, t }: InternalProps) => React.JSX.Element;
+export default ModalFooter;

package/dist/components/uikit-sdk/Modal/ModalFooter.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useContext } from 'react';
+import { Flex } from 'theme-ui';
+import styles from './styles';
+import Text from '../Text';
+import { Context as ModalContext } from '../../../contexts/ModalContext';
+var ModalFooter = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, t = _a.t;
+    var handleClose = useContext(ModalContext).handleClose;
+    var onClose = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        handleClose();
+    };
+    return (_jsxs(Flex, __assign({ sx: styles.modalFooter }, { children: [children, _jsx(Text, __assign({ onClick: onClose, sx: {
+                    textDecoration: 'underline',
+                    color: 'text',
+                    cursor: 'pointer',
+                    fontSize: '16px',
+                } }, { children: t ? t('Cancel') : 'Cancel' }))] })));
+};
+export default ModalFooter;

package/dist/components/uikit-sdk/Modal/ModalHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InternalProps } from './types';
+declare const ModalHeader: React.FC<InternalProps>;
+export default ModalHeader;

package/dist/components/uikit-sdk/Modal/ModalHeader.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { Divider, Flex } from 'theme-ui';
+import style from './styles';
+import { IconButton } from '../Button';
+var ModalHeader = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, hideDivider = _a.hideDivider, props = __rest(_a, ["children", "onDismiss", "hideDivider"]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({}, props, { sx: style.modalHead }, { children: [children, onDismiss && _jsx(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && _jsx(Divider, {})] }));
+};
+export default ModalHeader;

package/dist/components/uikit-sdk/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from './types';
+declare const Modal: ({ children, onDismiss, open, title, zIndex, onAnimationComplete, backdrop, ...props }: ModalProps) => React.JSX.Element;
+export default Modal;

package/dist/components/uikit-sdk/Modal/index.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useContext } from 'react';
+import { Box } from 'theme-ui';
+import { AnimatePresence, motion } from 'framer-motion';
+import style from './styles';
+import ModalHeader from './ModalHeader';
+import { Context as ModalContext } from '../../../contexts/ModalContext';
+import Text from '../Text';
+var Modal = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, _b = _a.open, open = _b === void 0 ? true : _b, title = _a.title, _c = _a.zIndex, zIndex = _c === void 0 ? 'modal' : _c, onAnimationComplete = _a.onAnimationComplete, backdrop = _a.backdrop, props = __rest(_a, ["children", "onDismiss", "open", "title", "zIndex", "onAnimationComplete", "backdrop"]);
+    var handleClose = useContext(ModalContext).handleClose;
+    var onClose = onDismiss || handleClose;
+    return (_jsxs(Box, __assign({ id: title, sx: { zIndex: zIndex } }, { children: [_jsx(AnimatePresence, { children: open && (_jsxs(motion.div, __assign({ initial: {
+                        opacity: 0,
+                        transform: 'translate(-50%, -50%) scale(0.1)',
+                    }, animate: {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1.0)',
+                    }, transition: {
+                        opacity: { duration: 0.2 },
+                        transform: { duration: 0.2 },
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: __assign(__assign({}, style.container), { zIndex: zIndex }), onAnimationComplete: onAnimationComplete }, { children: [title && (_jsx(ModalHeader, __assign({ onDismiss: onClose }, { children: _jsx(Text, __assign({ sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' } }, { children: title })) }))), children] }))) }), open && _jsx(Box, { sx: __assign(__assign({}, style.backdrop), backdrop), onClick: onClose })] })));
+};
+export default Modal;

package/dist/components/uikit-sdk/Modal/styles.d.ts

@@ -0,0 +1,3 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/uikit-sdk/Modal/styles.js

@@ -0,0 +1,62 @@
+var styles = {
+    container: {
+        padding: '20px',
+        background: 'white2',
+        borderRadius: 'normal',
+        color: 'text',
+        hr: {
+            background: '#DCD9D9',
+        },
+        position: 'fixed',
+        display: 'block',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '380px',
+        minWidth: ['95%', 'min(360px, 90%)', '320px'],
+        overflowY: 'auto',
+        maxHeight: 'calc(100% - 30px)',
+        maxWidth: '95vw',
+    },
+    backdrop: {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: 'modalOverlay',
+        width: '100%',
+        height: '100%',
+        zIndex: 100,
+        transition: 'all 1s ease',
+    },
+    modalHead: {
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        svg: {
+            fill: 'text',
+            marginLeft: 'auto',
+            cursor: 'pointer',
+        },
+        button: {
+            ml: 'auto',
+        },
+    },
+    modalFooter: {
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pt: 9,
+        gap: 4,
+    },
+    cancelButton: {
+        background: 'transparent',
+        textDecoration: 'underline',
+        color: 'text',
+        cursor: 'pointer',
+        fontSize: 0,
+        fontWeight: 'normal',
+        p: 0,
+    },
+};
+export default styles;

package/dist/components/uikit-sdk/Modal/types.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeUIStyleObject, SxProp } from 'theme-ui';
+export interface InternalProps {
+    children?: React.ReactNode;
+    onDismiss?: () => void;
+    onAnimationComplete?: () => void;
+    t?: (key: string) => string;
+    hideDivider?: boolean;
+}
+export interface ModalProps extends InternalProps {
+    children: React.ReactNode;
+    open?: boolean;
+    title?: string;
+    zIndex?: string | number;
+    sx?: ThemeUIStyleObject;
+    backdrop?: SxProp['sx'];
+}

package/dist/components/uikit-sdk/Modal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uikit-sdk/index.d.ts

@@ -3,5 +3,6 @@ export { default as Flex } from './Flex';
 export { default as Text } from './Text';
 export { default as Skeleton } from './Skeleton';
 export { default as TooltipBubble } from './TooltipBubble';
+export { default as Modal } from './Modal';
 export { Button, IconButton } from './Button';
 export { Tag, ListTag } from './Tag';

package/dist/components/uikit-sdk/index.js

@@ -4,6 +4,7 @@ export { default as Flex } from './Flex';
 export { default as Text } from './Text';
 export { default as Skeleton } from './Skeleton';
 export { default as TooltipBubble } from './TooltipBubble';
+export { default as Modal } from './Modal';
 // Exports
 export { Button, IconButton } from './Button';
 export { Tag, ListTag } from './Tag';

package/dist/state/global/actions.d.ts

@@ -0,0 +1 @@
+export declare const updateVersion: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>;

package/dist/state/global/actions.js

@@ -0,0 +1,4 @@
+import { createAction } from '@reduxjs/toolkit';
+// fired once when the app reloads but before the app renders
+// allows any updates to be applied to store data loaded from localStorage
+export var updateVersion = createAction('global/updateVersion');

package/dist/state/user/reducer.d.ts

@@ -0,0 +1,21 @@
+import { SupportedChainId } from '@ape.swap/sdk-core';
+import { ConnectionType } from '../../utils/connection/types';
+import { SerializedToken } from './types';
+export declare const INITIAL_ZAP_SLIPPAGE = 100;
+export interface UserState {
+    timestamp: number;
+    selectedWallet?: ConnectionType;
+    selectedNetwork: SupportedChainId;
+    tokens: {
+        [chainId: number]: {
+            [address: string]: SerializedToken;
+        };
+    };
+    userSlippageTolerance: number;
+    userZapSlippage: number;
+    favoriteTokens: string[];
+}
+export declare const initialState: UserState;
+export declare const updateSelectedWallet: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/updateSelectedWallet">, updateUserSlippageTolerance: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/updateUserSlippageTolerance">, updateSelectedNetwork: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/updateSelectedNetwork">, addSerializedToken: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/addSerializedToken">, updateUserZapSlippageTolerance: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/updateUserZapSlippageTolerance">, updateFavoriteTokens: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "user/updateFavoriteTokens">;
+declare const _default: import("redux").Reducer<UserState, import("redux").UnknownAction, UserState>;
+export default _default;

package/dist/state/user/reducer.js

@@ -0,0 +1,107 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a;
+import { SupportedChainId } from '@ape.swap/sdk-core';
+import { createSlice } from '@reduxjs/toolkit';
+import { updateVersion } from '../global/actions';
+import track from '../../utils/track';
+var currentTimestamp = function () { return new Date().getTime(); };
+export var INITIAL_ZAP_SLIPPAGE = 100;
+export var initialState = {
+    timestamp: currentTimestamp(),
+    selectedNetwork: SupportedChainId.BSC,
+    selectedWallet: undefined,
+    userSlippageTolerance: 50,
+    userZapSlippage: INITIAL_ZAP_SLIPPAGE,
+    tokens: {},
+    favoriteTokens: [],
+};
+var userSlice = createSlice({
+    name: 'user',
+    initialState: initialState,
+    reducers: {
+        updateSelectedWallet: function (state, _a) {
+            var wallet = _a.payload.wallet;
+            state.selectedWallet = wallet;
+            state.timestamp = currentTimestamp();
+        },
+        updateSelectedNetwork: function (state, _a) {
+            var chainId = _a.payload.chainId;
+            state.selectedNetwork = chainId;
+            state.timestamp = currentTimestamp();
+        },
+        updateUserSlippageTolerance: function (state, action) {
+            state.userSlippageTolerance = action.payload.userSlippageTolerance;
+            state.timestamp = currentTimestamp();
+        },
+        updateUserZapSlippageTolerance: function (state, action) {
+            state.userZapSlippage = action.payload.userZapSlippage;
+            state.timestamp = currentTimestamp();
+        },
+        updateFavoriteTokens: function (state, action) {
+            var newFavToken = action.payload.newFavToken;
+            if (state.favoriteTokens.includes(newFavToken.toLowerCase())) {
+                state.favoriteTokens = state.favoriteTokens.filter(function (token) { return token !== newFavToken.toLowerCase(); });
+                track({
+                    event: 'addFavorite',
+                    chain: 0,
+                    data: {
+                        cat: 'remove',
+                        bond: newFavToken,
+                    },
+                });
+            }
+            else {
+                state.favoriteTokens.push(newFavToken.toLowerCase());
+                track({
+                    event: 'addFavorite',
+                    chain: 0,
+                    data: {
+                        cat: 'add',
+                        bond: newFavToken,
+                    },
+                });
+            }
+            state.timestamp = currentTimestamp();
+        },
+        addSerializedToken: function (state, _a) {
+            var serializedToken = _a.payload.serializedToken;
+            if (!state.tokens) {
+                state.tokens = {};
+            }
+            state.tokens[serializedToken.chainId] = state.tokens[serializedToken.chainId] || {};
+            state.tokens[serializedToken.chainId][serializedToken.address] = serializedToken;
+            state.timestamp = currentTimestamp();
+        },
+    },
+    extraReducers: function (builder) {
+        // User State persist in localstorage, so in order to add new values to the state you gotta add them here
+        // Also it is important to delete unused values
+        builder.addCase(updateVersion, function (state) {
+            var newState = __assign({}, state);
+            //@ts-ignore
+            delete newState.pairs;
+            //@ts-ignore
+            delete newState.userHideClosedPositions;
+            //@ts-ignore
+            delete newState.flipV3Layout;
+            //@ts-ignore
+            delete newState.lastUpdateVersionTimestamp;
+            if (!state.favoriteTokens) {
+                newState.favoriteTokens = [];
+            }
+            return newState;
+        });
+    },
+});
+export var updateSelectedWallet = (_a = userSlice.actions, _a.updateSelectedWallet), updateUserSlippageTolerance = _a.updateUserSlippageTolerance, updateSelectedNetwork = _a.updateSelectedNetwork, addSerializedToken = _a.addSerializedToken, updateUserZapSlippageTolerance = _a.updateUserZapSlippageTolerance, updateFavoriteTokens = _a.updateFavoriteTokens;
+export default userSlice.reducer;

package/dist/state/user/types.d.ts

@@ -0,0 +1,10 @@
+import { Token } from '@ape.swap/sdk-core';
+export interface SerializedToken {
+    chainId: number;
+    address: string;
+    decimals: number;
+    symbol?: string;
+    name?: string;
+}
+export declare class UserAddedToken extends Token {
+}

package/dist/state/user/types.js

@@ -0,0 +1,24 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Token } from '@ape.swap/sdk-core';
+var UserAddedToken = /** @class */ (function (_super) {
+    __extends(UserAddedToken, _super);
+    function UserAddedToken() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return UserAddedToken;
+}(Token));
+export { UserAddedToken };

package/dist/utils/connection/activate.d.ts

@@ -0,0 +1,3 @@
+import { Connection } from './types';
+declare const useActivate: () => (connection: Connection) => Promise<void>;
+export default useActivate;

package/dist/utils/connection/activate.js

@@ -0,0 +1,61 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useCallback } from 'react';
+// This can be expanded to handle more connection logic
+var useActivate = function () {
+    var activate = useCallback(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, connection.connector.activate()];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    console.debug(error_1);
+                    console.error("connection error: ".concat(error_1));
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    return activate;
+};
+export default useActivate;

package/dist/utils/connection/index.d.ts

@@ -0,0 +1,9 @@
+import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2';
+import { Connection } from './types';
+export declare const networkConnection: Connection;
+export declare const injectedConnection: Connection;
+export declare const gnosisSafeConnection: Connection;
+export declare const web3WalletConnectV2: WalletConnectV2, web3WalletConnectHooksV2: import("@web3-react/core").Web3ReactHooks;
+export declare const walletConnectConnection: Connection;
+export declare const coinbaseWalletConnection: Connection;
+export declare const listOfConnections: Connection[];

package/dist/utils/connection/index.js

@@ -0,0 +1,83 @@
+var _a;
+import { CoinbaseWallet } from '@web3-react/coinbase-wallet';
+import { initializeConnector } from '@web3-react/core';
+import { GnosisSafe } from '@web3-react/gnosis-safe';
+import { MetaMask } from '@web3-react/metamask';
+import { Network } from '@web3-react/network';
+import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2';
+import { ConnectionType } from './types';
+import { PUBLIC_RPC_URLS } from '../../config/constants/networks';
+import { RPC_PROVIDERS } from '../../config/constants/providers';
+import { ChainId, MAINNET_CHAINS } from '../../config/constants/chains';
+// Connections based from uniswap interface
+// https://github.com/Uniswap/interface/blob/main/src/connection/index.ts
+var mainnet = MAINNET_CHAINS[0], optionalChains = MAINNET_CHAINS.slice(1);
+function onError(error) {
+    console.debug("web3-react error: ".concat(error));
+}
+var _b = initializeConnector(function (actions) {
+    return new Network({
+        actions: actions,
+        urlMap: RPC_PROVIDERS,
+        defaultChainId: ChainId.BSC,
+    });
+}), web3Network = _b[0], web3NetworkHooks = _b[1];
+export var networkConnection = {
+    connector: web3Network,
+    hooks: web3NetworkHooks,
+    type: ConnectionType.NETWORK,
+};
+var _c = initializeConnector(function (actions) { return new MetaMask({ actions: actions, onError: onError }); }), web3Injected = _c[0], web3InjectedHooks = _c[1];
+export var injectedConnection = {
+    connector: web3Injected,
+    hooks: web3InjectedHooks,
+    type: ConnectionType.INJECTED,
+};
+var _d = initializeConnector(function (actions) { return new GnosisSafe({ actions: actions }); }), web3GnosisSafe = _d[0], web3GnosisSafeHooks = _d[1];
+export var gnosisSafeConnection = {
+    connector: web3GnosisSafe,
+    hooks: web3GnosisSafeHooks,
+    type: ConnectionType.GNOSIS_SAFE,
+};
+export var web3WalletConnectV2 = (_a = initializeConnector(function (actions) {
+    return new WalletConnectV2({
+        actions: actions,
+        options: {
+            projectId: process.env.walletConnectProjectId,
+            chains: [mainnet],
+            optionalChains: optionalChains,
+            showQrModal: true,
+        },
+        onError: onError,
+    });
+}), _a[0]), web3WalletConnectHooksV2 = _a[1];
+export var walletConnectConnection = {
+    connector: web3WalletConnectV2,
+    hooks: web3WalletConnectHooksV2,
+    type: ConnectionType.WALLET_CONNECT,
+};
+var _e = initializeConnector(function (actions) {
+    return new CoinbaseWallet({
+        actions: actions,
+        options: {
+            url: PUBLIC_RPC_URLS[ChainId.BSC][0],
+            appName: 'ApeSwap',
+            appLogoUrl: 'favicon.ico',
+            reloadOnDisconnect: false,
+        },
+        onError: onError,
+    });
+}), web3CoinbaseWallet = _e[0], web3CoinbaseWalletHooks = _e[1];
+export var coinbaseWalletConnection = {
+    connector: web3CoinbaseWallet,
+    hooks: web3CoinbaseWalletHooks,
+    type: ConnectionType.COINBASE_WALLET,
+};
+// Order this list for wallet display preferences
+export var listOfConnections = [
+    injectedConnection,
+    walletConnectConnection,
+    coinbaseWalletConnection,
+    gnosisSafeConnection,
+    networkConnection,
+];

package/dist/utils/connection/types.d.ts

@@ -0,0 +1,14 @@
+import { Connector } from '@web3-react/types';
+import { Web3ReactHooks } from '@web3-react/core';
+export declare enum ConnectionType {
+    INJECTED = "INJECTED",
+    COINBASE_WALLET = "COINBASE_WALLET",
+    WALLET_CONNECT = "WALLET_CONNECT",
+    NETWORK = "NETWORK",
+    GNOSIS_SAFE = "GNOSIS_SAFE"
+}
+export interface Connection {
+    connector: Connector;
+    hooks: Web3ReactHooks;
+    type: ConnectionType;
+}

package/dist/utils/connection/types.js

@@ -0,0 +1,8 @@
+export var ConnectionType;
+(function (ConnectionType) {
+    ConnectionType["INJECTED"] = "INJECTED";
+    ConnectionType["COINBASE_WALLET"] = "COINBASE_WALLET";
+    ConnectionType["WALLET_CONNECT"] = "WALLET_CONNECT";
+    ConnectionType["NETWORK"] = "NETWORK";
+    ConnectionType["GNOSIS_SAFE"] = "GNOSIS_SAFE";
+})(ConnectionType || (ConnectionType = {}));

package/dist/utils/connection/utils.d.ts

@@ -0,0 +1,8 @@
+import { Connector } from '@web3-react/types';
+import { Connection, ConnectionType } from './types';
+/**
+ * @param connection Connection to get the type
+ * @returns The string name of the connection
+ */
+export declare const getConnectionName: (connection: Connection) => string;
+export declare function getConnection(c: Connector | ConnectionType): Connection;

package/dist/utils/connection/utils.js

@@ -0,0 +1,46 @@
+import { Connector } from '@web3-react/types';
+import { coinbaseWalletConnection, gnosisSafeConnection, injectedConnection, listOfConnections, networkConnection, walletConnectConnection, } from '.';
+import { ConnectionType } from './types';
+/**
+ * @param connection Connection to get the type
+ * @returns The string name of the connection
+ */
+export var getConnectionName = function (connection) {
+    var connectionType = connection.type;
+    switch (connectionType) {
+        // There is other types of injected wallets so additional checks will need to be placed for them
+        case ConnectionType.INJECTED:
+            return 'MetaMask';
+        case ConnectionType.COINBASE_WALLET:
+            return 'Coinbase Wallet';
+        case ConnectionType.WALLET_CONNECT:
+            return 'WalletConnect';
+        case ConnectionType.NETWORK:
+            return 'Network';
+        case ConnectionType.GNOSIS_SAFE:
+            return 'Gnosis Safe';
+    }
+};
+export function getConnection(c) {
+    if (c instanceof Connector) {
+        var connection = listOfConnections.find(function (connection) { return connection.connector === c; });
+        if (!connection) {
+            throw Error('unsupported connector');
+        }
+        return connection;
+    }
+    else {
+        switch (c) {
+            case ConnectionType.INJECTED:
+                return injectedConnection;
+            case ConnectionType.COINBASE_WALLET:
+                return coinbaseWalletConnection;
+            case ConnectionType.WALLET_CONNECT:
+                return walletConnectConnection;
+            case ConnectionType.NETWORK:
+                return networkConnection;
+            case ConnectionType.GNOSIS_SAFE:
+                return gnosisSafeConnection;
+        }
+    }
+}

package/dist/utils/track.d.ts

@@ -0,0 +1,7 @@
+declare function track({ event, chain, data, value, }: {
+    event: string;
+    chain: number | undefined | string;
+    data: any;
+    value?: number | string;
+}): void;
+export default track;

package/dist/utils/track.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function track(_a) {
+    var _b;
+    var event = _a.event, chain = _a.chain, data = _a.data, value = _a.value;
+    (_b = window.dataLayer) === null || _b === void 0 ? void 0 : _b.push(__assign({ event: event, value: value, chain: chain }, data));
+}
+export default track;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.407",
+  "version": "1.0.409",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -30,16 +30,16 @@
     "@types/lodash": "^4.17.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@web3-react/coinbase-wallet": "^8.2.0",
+    "@web3-react/coinbase-wallet": "^8.2.3",
     "@web3-react/core": "^8.2.0",
     "@web3-react/eip1193": "^8.2.0",
     "@web3-react/empty": "^8.2.0",
-    "@web3-react/gnosis-safe": "^8.2.0",
+    "@web3-react/gnosis-safe": "^8.2.4",
     "@web3-react/metamask": "^8.2.1",
     "@web3-react/network": "^8.2.0",
     "@web3-react/types": "^8.2.0",
     "@web3-react/url": "^8.2.0",
-    "@web3-react/walletconnect-v2": "^8.3.3",
+    "@web3-react/walletconnect-v2": "^8.5.1",
     "axios": "^1.7.2",
     "copyfiles": "^2.4.1",
     "ethers": "5.7.2",
@@ -50,12 +50,15 @@
   "dependencies": {
     "@ape.swap/apeswap-lists": "^2.0.9",
     "@ape.swap/sdk-core": "^1.0.2",
-    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.11.4",
     "@reduxjs/toolkit": "^2.2.6",
     "@tanstack/react-query": "^5.51.5",
-    "@types/node": "^20.14.10",
     "@uniswap/token-lists": "^1.0.0-beta.34",
+    "@web3-react/coinbase-wallet": "^8.2.3",
+    "@web3-react/gnosis-safe": "^8.2.4",
+    "@web3-react/walletconnect-v2": "^8.5.1",
+    "@types/node": "^20.14.10",
     "axios-retry": "^4.4.2",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^11.3.2",