@ape.swap/bonds-sdk 1.0.76 → 1.0.77-4.0

package/dist/components/NetworkFilter/index.js

@@ -0,0 +1,77 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { useState } from 'react';
+import { Flex, Svg, Text } from '../../components/uikit-sdk';
+import { MAINNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL } from '../../config/constants/chains';
+import Checkbox from '../../components/uikit-sdk/Checkbox';
+var NetworkFilter = function (_a) {
+    var chainFilterOption = _a.chainFilterOption, setChainFilterOption = _a.setChainFilterOption;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleCheckbox = function (newChain) {
+        var prevChainFilterOptions = chainFilterOption;
+        var newChainFilterOption;
+        if (newChain === 'All Chains') {
+            newChainFilterOption = ['All Chains'];
+        }
+        else {
+            if (prevChainFilterOptions.includes(newChain)) {
+                var filteredChains = prevChainFilterOptions.filter(function (option) { return option !== newChain; });
+                newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains;
+            }
+            else {
+                var newArray_1 = __spreadArray(__spreadArray([], prevChainFilterOptions.filter(function (option) { return option !== 'All Chains'; }), true), [newChain], false);
+                var allChainsArePresent = MAINNET_CHAINS.every(function (chain) { return newArray_1.includes(chain.toString()); });
+                newChainFilterOption = allChainsArePresent ? ['All Chains'] : newArray_1;
+            }
+        }
+        setChainFilterOption(newChainFilterOption);
+    };
+    return (_jsxs(Flex, __assign({ sx: { width: '100%', position: 'relative' } }, { children: [_jsxs(Flex, __assign({ sx: {
+                    background: 'white2',
+                    p: '6px',
+                    borderRadius: 'normal',
+                    cursor: 'pointer',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                }, onClick: function () { return setIsOpen(!isOpen); } }, { children: [_jsx(Text, __assign({ sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' } }, { children: chainFilterOption.includes('All Chains') ? 'All Chains' : "Chains (".concat(chainFilterOption.length, ")") })), _jsx(Flex, __assign({ sx: { ml: '5px' } }, { children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) }))] })), isOpen && (_jsx(Flex, __assign({ sx: {
+                    flexDirection: ['column', 'column', 'column'],
+                    position: 'absolute',
+                    top: '45px',
+                    right: '0px',
+                    width: '200px',
+                    height: ['300px', '300px', '350px'],
+                    overflowY: 'scroll',
+                    borderRadius: 'normal',
+                    background: 'white2',
+                    zIndex: 555,
+                } }, { children: __spreadArray(['All Chains'], MAINNET_CHAINS, true).map(function (chainId) {
+                    return (_jsx(Flex, __assign({ sx: {
+                            borderRadius: 'normal',
+                            p: '5px 15px',
+                            minHeight: '40px',
+                            cursor: 'pointer',
+                            '&:hover': { bg: 'white3' },
+                        }, onClick: function () { return handleCheckbox(chainId.toString()); } }, { children: _jsxs(Flex, __assign({ sx: { width: '100%', alignItems: 'center', fontSize: '14px' } }, { children: [_jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: function () { return null; } }), chainId === 'All Chains' ? (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { mx: '8px' } }, { children: _jsx(Svg, { icon: "AllChains", width: "22px" }) })), _jsx(Text, __assign({ sx: { lineHeight: '22px', fontWeight: 400 } }, { children: "All Chains" }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' } }, { children: _jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) })), _jsx(Text, __assign({ sx: { lineHeight: '22px', fontWeight: 400 } }, { children: NETWORK_LABEL[chainId] }))] }))] })) }), chainId));
+                }) })))] })));
+};
+export default NetworkFilter;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '../../scss/ProgressBar.scss';
+interface ProgressBarProps {
+    value: number;
+    color?: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.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 { Box, Flex } from 'theme-ui';
+import '../../scss/ProgressBar.scss';
+var ProgressBar = function (_a) {
+    var value = _a.value, _b = _a.color, color = _b === void 0 ? 'text' : _b;
+    return (_jsx(Flex, __assign({ sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' } }, { children: _jsx(Box, __assign({ className: "progressbar-background" }, { children: _jsx(Box, { className: "progressbar-completed", style: {
+                    width: "".concat(value <= 3 ? 3 : value, "%")
+                } }) })) })));
+};
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBarWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface ProgressBarWrapperProps {
+    title?: string;
+    value?: React.ReactNode;
+    value2Direction?: 'column' | 'row';
+    toolTip?: string;
+    toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
+    toolTipTransform?: string;
+    style?: ThemeUIStyleObject;
+    showTooltip?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;
+export default _default;

package/dist/components/ProgressBar/ProgressBarWrapper.js

@@ -0,0 +1,20 @@
+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 React from 'react';
+import { styles } from './styles';
+import { Flex, Text, TooltipBubble, Skeleton } from '../uikit-sdk';
+var ProgressBarWrapper = function (_a) {
+    var title = _a.title, value = _a.value, style = _a.style, showTooltip = _a.showTooltip, toolTipPlacement = _a.toolTipPlacement, toolTipTransform = _a.toolTipTransform, toolTip = _a.toolTip;
+    return (_jsxs(Flex, __assign({ sx: style }, { children: [_jsx(Flex, __assign({ sx: { alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.titleText }, { children: "".concat(title) })) })), showTooltip ? (_jsx(Flex, __assign({ sx: { alignItems: 'center', width: '100%' } }, { children: _jsx(TooltipBubble, __assign({ placement: toolTipPlacement, transformTip: toolTipTransform, body: _jsx(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: toolTip })), width: "250px" }, { children: _jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center', width: '127px' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })) })) }))) : (_jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })))] })));
+};
+export default React.memo(ProgressBarWrapper);

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,82 @@
+export var styles = {
+    listCardContainer: {
+        borderRadius: 0,
+        flexDirection: ['column', 'column', 'column', 'row'],
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'white2',
+        borderBottom: '1px solid rgba(226, 226, 226, .2)',
+        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
+        margin: '0 10px 0 10px',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+        width: '100%',
+        height: ['unset', 'unset', 'unset', '86px'],
+    },
+    listViewContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        my: '5px',
+    },
+    infoContentMobile: {
+        display: ['flex', 'flex', 'flex', 'none'],
+        alignItems: 'center',
+    },
+    tokensContainer: {
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    },
+    valueText: {
+        fontSize: ['12px', '12px', '12px', '14px'],
+        color: 'primaryBright',
+        lineHeight: '16px',
+        fontWeight: 700,
+        mr: '5px',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    secondaryText: {
+        fontSize: '12px',
+        color: 'gray',
+        lineHeight: '16px',
+        fontWeight: 400,
+    },
+    cardContentContainer: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    animationDiv: {
+        position: 'relative',
+        width: '100%',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+    },
+    expandedWrapper: {
+        background: 'white3',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '15px 10px',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BondsDataResponse } from '../../types/bonds';
+export declare const NETWORK_COLORS: Partial<Record<number, string>>;
+declare const TokenInfoAndName: ({ bill, vestEnds }: {
+    bill: BondsDataResponse;
+    vestEnds?: string | undefined;
+}) => React.JSX.Element;
+export default TokenInfoAndName;

package/dist/components/TokenInfoAndName/index.js

@@ -0,0 +1,72 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, ListTag, Svg } from '../../components/uikit-sdk';
+import { NETWORK_ICONS } from '../../config/constants/chains';
+import { ChainId } from '../../enum/apeswaplists';
+import Index from '../uikit-sdk/TokenImage';
+// import { CleanedBondsState } from 'state/bills/types'
+// import FavComponent from '../../../components/FavComponent'
+export var NETWORK_COLORS = (_a = {},
+    _a[ChainId.BSC] = '#F3BA2F',
+    _a[ChainId.MAINNET] = '#627eea',
+    _a[ChainId.MATIC] = '#8247e5',
+    _a[ChainId.LIGHTLINK] = '#6087ff',
+    _a[ChainId.BASE] = '#0052ff',
+    _a[ChainId.ARBITRUM] = '#289fef',
+    _a[ChainId.LINEA] = '#fff',
+    _a[ChainId.IOTA] = '#fff',
+    _a);
+var TokenInfoAndName = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var bill = _a.bill, vestEnds = _a.vestEnds;
+    return (_jsxs(Flex, __assign({ sx: {
+            width: '100%',
+            position: 'relative',
+            justifyContent: ['space-between', 'space-between', 'space-between', 'flex-start'],
+            mr: ['10px', '10px', '10px', '0px'],
+            height: '100%',
+            alignItems: 'center',
+            ml: '-20px',
+            pl: '20px',
+            overflow: 'hidden',
+            borderRadius: '10px'
+        } }, { children: [_jsx(Flex, __assign({ sx: {
+                    position: 'absolute',
+                    left: '0px',
+                    top: '0px',
+                    overflow: 'hidden',
+                    borderRadius: '10px 0px 8px 0px',
+                    zIndex: 5,
+                } }, { children: _jsx(Svg, { width: 18, height: 18, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) })), _jsx(Flex, { sx: {
+                    position: 'absolute',
+                    zIndex: 0,
+                    left: '0px',
+                    width: '30px',
+                    height: '100%',
+                    background: NETWORK_COLORS[bill.chainId],
+                    filter: 'blur(35px)',
+                } }), _jsxs(Flex, __assign({ sx: { pl: '6px', width: '100%', maxWidth: '170px', alignItems: 'center' } }, { children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.earnToken.symbol, size: 33 }), _jsxs(Flex, __assign({ sx: {
+                            ml: '10px',
+                            fontSize: '16px',
+                            fontWeight: 700,
+                            width: '100%',
+                            flexDirection: 'column',
+                        } }, { children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.earnToken.symbol, vestEnds && (_jsx(Flex, __assign({ sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' } }, { children: vestEnds })))] }))] })), _jsxs(Flex, { children: [_jsx(Flex, { sx: { width: '25px' } }), _jsx(Flex, __assign({ sx: {
+                            ml: '10px',
+                            display: ['none', 'none', 'none', 'flex'],
+                            minWidth: '70px',
+                            alignItems: 'center',
+                        } }, { children: ((_e = bill.tags) === null || _e === void 0 ? void 0 : _e[0]) && (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: ((_f = bill.tags) === null || _f === void 0 ? void 0 : _f[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: (_h = (_g = bill.tags) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.toUpperCase() }) }))) }))] })] })));
+};
+export default TokenInfoAndName;

package/dist/components/Tooltip/ButtonsRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const ButtonsRow: React.FC<{
+    projectLink: string;
+    twitter: string;
+    bubble?: string;
+    audit?: string;
+}>;
+export default ButtonsRow;

package/dist/components/Tooltip/ButtonsRow.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, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { styles } from './styles';
+import { Flex, Svg, Text } from '../uikit-sdk';
+import { Link } from 'theme-ui';
+var ButtonsRow = function (_a) {
+    var projectLink = _a.projectLink, twitter = _a.twitter, bubble = _a.bubble, audit = _a.audit;
+    var bubbleURL = "https://app.bubblemaps.io/bsc/token/".concat(bubble);
+    return (_jsxs(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: [_jsx(Flex, __assign({ sx: styles.iconButton, as: Link, href: projectLink, target: "_blank" }, { children: _jsx(Svg, { icon: "URL", width: 18 }) })), _jsx(Flex, __assign({ sx: styles.iconButton, as: Link, href: twitter, target: "_blank" }, { children: _jsx(Svg, { icon: "twitter", width: 18, color: "text" }) })), bubble && (_jsx(Flex, __assign({ sx: styles.iconButton, as: Link, href: bubbleURL, target: "_blank" }, { children: _jsx(Svg, { icon: "bubble", width: 18, color: "text" }) }))), audit && (_jsxs(Flex, __assign({ sx: __assign(__assign({}, styles.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank" }, { children: [_jsx(Svg, { icon: "audit", width: 18, color: "text" }), _jsx(Text, __assign({ sx: { paddingRight: '5px' } }, { children: 'Audit' }))] })))] })));
+};
+export default ButtonsRow;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface TooltipProps {
+    valueTitle?: string;
+    valueContent?: string;
+    value2Title?: string;
+    value2Content?: string;
+    tokenContract: string;
+    secondURL?: string;
+    secondURLTitle?: string;
+    projectLink?: string;
+    twitter?: string;
+    audit?: string;
+    thirdURL?: string;
+    thirdURLTitle?: string;
+    chain: number;
+}
+declare const Tooltip: React.FunctionComponent<TooltipProps>;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,24 @@
+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 { styles } from './styles';
+import { BLOCK_EXPLORER } from '../../config/constants/chains';
+import ButtonsRow from './ButtonsRow';
+import { Flex, Text, Svg } from '../uikit-sdk';
+import { Link } from 'theme-ui';
+var Tooltip = function (_a) {
+    var valueTitle = _a.valueTitle, valueContent = _a.valueContent, value2Title = _a.value2Title, value2Content = _a.value2Content, tokenContract = _a.tokenContract, secondURL = _a.secondURL, secondURLTitle = _a.secondURLTitle, projectLink = _a.projectLink, twitter = _a.twitter, audit = _a.audit, thirdURL = _a.thirdURL, thirdURLTitle = _a.thirdURLTitle, chain = _a.chain;
+    var explorerLink = BLOCK_EXPLORER[chain];
+    var tokenLink = "".concat(explorerLink, "/address/").concat(tokenContract);
+    return (_jsxs(Flex, __assign({ sx: { flexDirection: 'column', flexWrap: 'wrap' } }, { children: [projectLink && twitter && (_jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (_jsxs(Flex, __assign({ sx: styles.infoRow }, { children: [_jsxs(Text, __assign({ sx: styles.titleText }, { children: [valueTitle, ": "] })), _jsx(Text, __assign({ sx: styles.contentText }, { children: valueContent }))] }))), value2Title && (_jsxs(Flex, __assign({ sx: styles.infoRow }, { children: [_jsxs(Text, __assign({ sx: styles.titleText }, { children: [value2Title, ": "] })), _jsx(Text, __assign({ sx: styles.contentText }, { children: value2Content }))] }))), _jsx(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: _jsxs(Flex, __assign({ sx: { width: '144px', flexDirection: 'column' } }, { children: [_jsx(Flex, __assign({ sx: styles.linkRow }, { children: _jsxs(Link, __assign({ href: tokenLink, sx: styles.link, target: "_blank" }, { children: ['View Token Contract', _jsx(Flex, __assign({ sx: { ml: '5px' } }, { children: _jsx(Svg, { icon: "external", color: "text", width: 10 }) }))] })) })), secondURL && (_jsx(Flex, __assign({ sx: styles.linkRow }, { children: _jsxs(Link, __assign({ href: secondURL, sx: styles.link, target: "_blank" }, { children: [secondURLTitle, _jsx(Flex, __assign({ sx: { ml: '5px' } }, { children: _jsx(Svg, { icon: "external", color: "text", width: 10 }) }))] })) }))), thirdURL && (_jsx(Flex, __assign({ sx: styles.linkRow }, { children: _jsx(Link, __assign({ href: thirdURL, sx: styles.link, target: "_blank" }, { children: thirdURLTitle })) })))] })) }))] })));
+};
+export default Tooltip;

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'infoRow' | 'linkRow' | 'titleText' | 'contentText' | 'iconButton' | 'link', ThemeUIStyleObject>;

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,44 @@
+export var styles = {
+    infoRow: {
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom: '5px',
+    },
+    linkRow: {
+        width: '100%',
+        marginTop: '5px',
+        justifyContent: 'flex-end',
+        '& svg': { width: '11px' },
+    },
+    titleText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 500,
+    },
+    contentText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 700,
+    },
+    iconButton: {
+        background: 'white3',
+        textDecoration: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+        height: '30px',
+        padding: '2px 5px',
+        borderRadius: '8px',
+        margin: '0 5px 5px 0',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+    link: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        display: 'flex',
+        textDecoration: 'none',
+        '&: hover': { textDecoration: 'underline' },
+    },
+};

package/dist/components/{uikit → uikit-sdk}/Checkbox/index.js

@@ -41,6 +41,6 @@ var Checkbox = function (_a) {
             width: scaleSize,
             height: scaleSize,
             position: 'relative',
-        } }, { children: [_jsx("input", __assign({ type: "checkbox", sx: { variant: 'checkbox', background: background } }, props)), _jsx("svg", __assign({ width: svgScale || '13', height: "auto", viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) }))] })));
+        } }, { children: [_jsx("input", __assign({ type: "checkbox", sx: { variant: 'checkbox', background: background, borderColor: 'white4' } }, props)), _jsx("svg", __assign({ width: svgScale || '13', height: "auto", viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) }))] })));
 };
 export default Checkbox;

package/dist/components/{uikit → uikit-sdk}/Input/Input.js

@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { Input as ThemeInput, Spinner } from 'theme-ui';
-import { Text } from '../../uikit';
 import Flex from '../Flex';
 import Svg from '../Svg';
+import Text from '../Text';
 var colorScheme = {
     default: 'gray',
     error: 'red',
@@ -40,7 +40,7 @@ var Input = function (_a) {
                             pl: '10px',
                             borderRadius: '10px',
                             ':focus': { outline: 'none' },
-                        } })), _jsx(Flex, __assign({ sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' } }, { children: _jsx(Svg, { icon: "search" }) }))] })));
+                        } })), _jsx(Flex, __assign({ sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' } }, { children: _jsx(Svg, { icon: "search", color: "grey" }) }))] })));
         case 'password':
             var statusColor = colorScheme[status];
             return (_jsxs(Flex, __assign({ sx: {

package/dist/components/{uikit → uikit-sdk}/Input/NumericInput.d.ts

@@ -4,7 +4,7 @@ declare const NumericInput: ({ onUserInput, value, disabled, style, placeholder,
     onUserInput?: ((input: string) => void) | undefined;
     value: string;
     disabled?: boolean | undefined;
-    style?: ThemeUIStyleObject<import("@theme-ui/css").Theme<{}>> | undefined;
+    style?: ThemeUIStyleObject | undefined;
     placeholder?: string | undefined;
 }) => import("react").JSX.Element;
 export default NumericInput;

package/dist/components/{uikit/Svg → uikit-sdk/Skeleton}/styles.d.ts

@@ -1,4 +1,5 @@
 import { ThemeUIStyleObject } from 'theme-ui';
+export declare const waves: import("@emotion/react").Keyframes;
+export declare const pulse: import("@emotion/react").Keyframes;
 declare const styles: Record<string, ThemeUIStyleObject>;
-export declare const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject>;
 export default styles;

package/dist/components/uikit-sdk/Svg/Icons/AllChains.d.ts

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

package/dist/components/uikit-sdk/Svg/Icons/AllChains.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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var AllChains = function (_a) {
+    var width = _a.width;
+    return (_jsx("svg", __assign({ width: width || '26', viewBox: "0 0 26 26", fill: "#fafafa", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsxs("g", __assign({ mask: "url(#mask0_4377_23303)" }, { children: [_jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#fafafa" }), _jsx("path", { d: "M0 12.9777C0.0118051 5.83109 5.86935 -0.0156193 13.0011 -9.12111e-05C20.1926 0.0161764 26.0074 5.84588 26 13.0332C25.9926 20.2375 20.138 26.062 12.8624 25.9992C5.72916 25.9378 0.0272993 20.1783 0 12.9777ZM10.6563 20.2242C11.2222 20.2331 11.9032 20.0659 12.5547 19.7598C13.4386 19.345 14.0879 18.6462 14.7077 17.929C15.1068 17.4676 14.9954 16.7525 14.5387 16.3606C14.0746 15.9621 13.3995 15.9769 12.9561 16.4028C12.6765 16.6712 12.4123 16.9544 12.132 17.2213C11.1875 18.1175 9.72666 18.1027 8.81693 17.1932C7.90573 16.2823 7.88802 14.8211 8.78299 13.8776C9.04344 13.6033 9.31865 13.3437 9.58205 13.0731C10.0454 12.5962 10.0484 11.8656 9.59312 11.4079C9.1342 10.9472 8.41409 10.9465 7.92934 11.4123C7.67036 11.6615 7.41434 11.9144 7.16274 12.1717C6.29433 13.0576 5.82803 14.1172 5.78745 15.3624C5.70113 18.0332 7.82826 20.2294 10.6563 20.2242ZM15.5016 5.78746C14.31 5.78894 13.2638 6.18454 12.374 6.97278C12.036 7.27151 11.7276 7.60426 11.4126 7.92813C10.9359 8.41837 10.9411 9.15189 11.417 9.61182C11.8811 10.0599 12.6005 10.0444 13.0808 9.57337C13.3575 9.302 13.6223 9.01879 13.9071 8.75703C14.4797 8.22982 15.1644 8.02647 15.9243 8.16918C16.8525 8.34369 17.487 8.89753 17.7652 9.80333C18.0434 10.7091 17.8176 11.5122 17.1617 12.1924C16.9189 12.4446 16.6651 12.6864 16.4202 12.9378C15.9546 13.4147 15.9494 14.1446 16.4039 14.6015C16.8628 15.0629 17.5837 15.0659 18.0677 14.6023C18.3341 14.3472 18.5967 14.0884 18.8535 13.8236C19.7027 12.9481 20.1646 11.9048 20.2096 10.6803C20.3092 7.99246 18.188 5.78746 15.5008 5.7882L15.5016 5.78746ZM15.4381 11.7407C15.399 11.2674 15.1895 10.8903 14.7342 10.6803C14.2753 10.4681 13.7979 10.5494 13.4113 10.9295C12.5769 11.7517 11.7468 12.5792 10.9271 13.4155C10.4446 13.9072 10.446 14.6104 10.9035 15.0807C11.3676 15.5576 12.0892 15.5702 12.5879 15.0814C13.4254 14.2621 14.2473 13.4273 15.0751 12.5977C15.3068 12.3655 15.4182 12.0801 15.4381 11.7407Z", fill: "#312F3A" })] })) })));
+};
+export default AllChains;

package/dist/components/uikit-sdk/Svg/Icons/Hot.d.ts

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

package/dist/components/uikit-sdk/Svg/Icons/Hot.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);
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+var Hot = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? '#FE815F' : _b, width = _a.width;
+    return (_jsx("svg", __assign({ width: width || '10', viewBox: "0 0 448 512", fill: "#FE815F", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z", fill: color }) })));
+};
+export default Hot;

package/dist/components/uikit-sdk/Svg/Icons/Sort.d.ts

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

package/dist/components/uikit-sdk/Svg/Icons/Sort.js

@@ -0,0 +1,27 @@
+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";
+var Sort = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.color, color = _c === void 0 ? 'text' : _c, width = _a.width, height = _a.height, getStyles = _a.getStyles;
+    var deg = {
+        left: 90,
+        up: 180,
+        right: 270,
+        down: 0,
+    };
+    var style = getStyles({
+        degree: deg[direction],
+        color: color,
+    });
+    return (_jsx("svg", __assign({ width: width || '12', height: height || '12', viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", sx: style }, { children: _jsx("path", { d: "M5.47015 0.970314C5.76312 0.677345 6.2389 0.677345 6.53187 0.970314L9.53187 3.97031C9.7475 4.18594 9.81078 4.50703 9.69359 4.78828C9.5764 5.06953 9.30453 5.25235 8.99984 5.25235H2.99984C2.6975 5.25235 2.42328 5.06953 2.30609 4.78828C2.1889 4.50703 2.25453 4.18594 2.46781 3.97031L5.46781 0.970314H5.47015ZM5.47015 11.032L2.47015 8.03203C2.25453 7.81641 2.19125 7.49531 2.30843 7.21406C2.42562 6.93281 2.6975 6.75 3.00218 6.75H8.99984C9.30218 6.75 9.5764 6.93281 9.69359 7.21406C9.81078 7.49531 9.74515 7.81641 9.53187 8.03203L6.53187 11.032C6.2389 11.325 5.76312 11.325 5.47015 11.032Z", fill: "#73728E" }) })));
+};
+export default Sort;

package/dist/components/{uikit → uikit-sdk}/Svg/Icons/index.d.ts

@@ -46,6 +46,7 @@ export { default as Message } from './Message';
 export { default as Positions } from './Positions';
 export { default as MenuSettings } from './MenuSettings';
 export { default as Fav } from './Fav';
+export { default as Hot } from './Hot';
 export { default as AbondSmallLogo } from './AbondSmallLogo';
 export { default as ApeswapSmallLogo } from './ApeswapSmallLogo';
 export { default as AbondFullLogo } from './AbondFullLogo';
@@ -105,3 +106,5 @@ export { default as Warning } from './Warning';
 export { default as Insight } from './Insight';
 export { default as Expand } from './Expand';
 export { default as LineChart } from './LineChart';
+export { default as Sort } from './Sort';
+export { default as AllChains } from './AllChains';

package/dist/components/{uikit → uikit-sdk}/Svg/Icons/index.js

@@ -46,6 +46,7 @@ export { default as Message } from './Message';
 export { default as Positions } from './Positions';
 export { default as MenuSettings } from './MenuSettings';
 export { default as Fav } from './Fav';
+export { default as Hot } from './Hot';
 // LOGOS
 export { default as AbondSmallLogo } from './AbondSmallLogo';
 export { default as ApeswapSmallLogo } from './ApeswapSmallLogo';
@@ -107,3 +108,5 @@ export { default as Warning } from './Warning';
 export { default as Insight } from './Insight';
 export { default as Expand } from './Expand';
 export { default as LineChart } from './LineChart';
+export { default as Sort } from './Sort';
+export { default as AllChains } from './AllChains';