@ape.swap/bonds-sdk 1.0.78-2.test.10 → 1.0.78-2.test.11

package/dist/components/BondMenu/BondMenu.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../scss/BondMenu.scss';
 interface BondMenuProps {
     setChainFilterOption: (newValue: string[]) => void;
     chainFilterOption: string[];

package/dist/components/BondMenu/BondMenu.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { Flex, IconButton } from '../uikit-sdk';
 import RecommendationSelector from '../MenuSelect/RecommendationSelector';
 import MenuSelect from '../MenuSelect/MenuSelect';
+import '../../scss/BondMenu.scss';
 import NetworkFilter from '../NetworkFilter';
 var BondMenu = function (_a) {
     var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange;

package/dist/components/BondRows/BondRow.d.ts

@@ -1,4 +1,5 @@
 import { BondsDataResponse } from "../../types/bonds";
+import '../../scss/BondRow.scss';
 interface BondRowProps {
     key: string;
     bond: BondsDataResponse;

package/dist/components/BondRows/BondRow.js

@@ -10,6 +10,7 @@ import { formatDollar, formatValue } from "../../utils/formatNumbers";
 import getTimePeriods from "../../utils/getTimePeriods";
 import { BLOCK_EXPLORER } from "../../config/constants/chains";
 import { useEffect, useState } from "react";
+import '../../scss/BondRow.scss';
 import { Flex } from "theme-ui";
 var BondRow = function (_a) {
     var _b, _c, _d;

package/dist/components/BondRows/BondRowHeader.d.ts

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import '../../scss/BondRowHeader.scss';
 interface BondRowHeaderProps {
     inputValue: string;
     setChainFilterOption: (newValue: string[]) => void;

package/dist/components/BondRows/BondRowHeader.js

@@ -3,6 +3,7 @@ import { Flex } from 'theme-ui';
 import { Input } from '../uikit-sdk/Input';
 import { Svg, TooltipBubble } from '../uikit-sdk';
 import { TooltipText } from '../../enum/tooltips';
+import '../../scss/BondRowHeader.scss';
 import BondMenu from '../BondMenu/BondMenu';
 var BondRowHeader = function (_a) {
     var inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onHandleQueryChange = _a.onHandleQueryChange, onSort = _a.onSort;

package/dist/components/BondRows/BondRowsByChain.d.ts

@@ -1,4 +1,5 @@
 import { BondsDataResponse } from '../../types/bonds';
+import '../../scss/BondRowsByChain.scss';
 declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains }: {
     bonds: BondsDataResponse[];
     hotBonds?: string[];

package/dist/components/BondRows/BondRowsByChain.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import BondRowsWithTitle from './BondRowsWithTitle';
 import { MAINNET_CHAINS } from '../../config/constants/chains';
+import '../../scss/BondRowsByChain.scss';
 import { Flex } from 'theme-ui';
 var BondRowsByChain = function (_a) {
     var bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles, chains = _a.chains;

package/dist/components/BondRows/BondRowsWithTitle.d.ts

@@ -1,4 +1,5 @@
 import { BondsDataResponse } from "../../types/bonds";
+import '../../scss/BondRowsWithTitle.scss';
 declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles }: {
     chain: number;
     bonds: BondsDataResponse[];

package/dist/components/BondRows/BondRowsWithTitle.js

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import ChainTitle from "./ChainTitle";
 import BondRow from "./BondRow";
 import { useState } from "react";
+import '../../scss/BondRowsWithTitle.scss';
 import { Flex } from "theme-ui";
 var BondRowsWithTitle = function (_a) {
     var chain = _a.chain, bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../scss/ProgressBar.scss';
 interface ProgressBarProps {
     value: number;
     color?: string;

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,5 +1,6 @@
 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, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: _jsx(Box, { className: "progressbar-background", children: _jsx(Box, { className: "progressbar-completed", style: {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BondsDataResponse } from '../../types/bonds';
+import '../../scss/TokenInfoName.scss';
 export declare const NETWORK_COLORS: Partial<Record<number, string>>;
 declare const TokenInfoAndName: ({ bill, vestEnds }: {
     bill: BondsDataResponse;

package/dist/components/TokenInfoAndName/index.js

@@ -6,6 +6,7 @@ import { ChainId } from '../../enum/apeswaplists';
 import Index from '../uikit-sdk/TokenImage';
 // import { CleanedBondsState } from 'state/bills/types'
 // import FavComponent from '../../../components/FavComponent'
+import '../../scss/TokenInfoName.scss';
 export var NETWORK_COLORS = (_a = {},
     _a[ChainId.BSC] = '#F3BA2F',
     _a[ChainId.MAINNET] = '#627eea',
@@ -19,32 +20,10 @@ export var NETWORK_COLORS = (_a = {},
 var TokenInfoAndName = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
     var bill = _a.bill, vestEnds = _a.vestEnds;
-    return (_jsxs(Flex, { 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, { 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)',
+    return (_jsxs(Flex, { className: "tokeninfoname-border", children: [_jsx(Flex, { className: "tokeninfoname-chain", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
+                }, 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, { className: "tokeninfoname-bordergradient", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
                 } }), _jsxs(Flex, { 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, { sx: {
                             ml: '10px',
                             fontSize: '16px',

package/dist/scss/BondMenu.scss

@@ -0,0 +1,29 @@
+.menu-container.filters {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+}
+
+.filters.network {
+    display: flex;
+}
+
+.filters.desktop-rec {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+}
+
+.filters.mobile-rec {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+}
+
+.filters.clear-all {
+    display: flex;
+    align-items: center;
+    width: 13%;
+}

package/dist/scss/BondModal.scss

@@ -0,0 +1,409 @@
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(66, 66, 66, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    background-color: var(--theme-ui-colors-white2);
+    padding: 10px;
+    border-radius: 10px;
+    z-index: 1001;
+    max-width: 700px;
+    min-width: 700px;
+    height: auto;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 5px;
+
+    .svg-close {
+        height: 12px;
+        width: 12px;
+        cursor: pointer;
+    }
+}
+
+.modaltable-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column; 
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+
+.modaltable-container.title-container {
+    font-weight: bold;
+    font-size: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.title-container.bondicon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.icon-container {
+    position: relative;
+    display: inline-block;
+}
+
+.icon-container svg {
+    position: absolute;
+    top: -8px;
+    right: -5px;
+    z-index: 1; 
+}
+
+.icon-container img {
+    display: block; 
+}
+
+.icon-container-small {
+    position: relative;
+    display: inline-block;
+}
+
+.icon-container-small svg {
+    position: absolute;
+    top: -5px;
+    right: -4px;
+    z-index: 1; 
+}
+
+.icon-container-small img {
+    display: block; 
+}
+
+.title-container.bondname {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 20px;
+}
+
+.title-container.bondname-small {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 10px;
+}
+
+.title-container.price-container {
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
+}
+
+
+.price-container.price {
+    font-size: 14px;
+    color: var(--theme-ui-colors-gray);
+    text-decoration: line-through;
+}
+
+.price-container.discounted {
+    display: flex;
+}
+
+.title-container.tokentags {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+}
+
+.modaltable-container.description-container {
+    display: flex;
+    align-items: start;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-weight: normal;
+}
+
+.modaltable-container.blocks-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-around;
+    margin-top: 5px;
+}
+
+.modal-block {
+    min-width: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--theme-ui-colors-white3);
+    font-weight: 900;
+    font-size: 16px;
+    border-radius: 10px;
+    height: 90%;
+    padding: 10px;
+}
+
+.block-header {
+    color: white;
+    font-weight: bold;
+    font-size: 12px;
+    padding-bottom: 10px;
+}
+
+.header-icon {
+    padding-left: 5px;
+    align-items: start;
+    cursor: pointer;
+}
+
+.block-content {
+    align-items: center;
+    padding-bottom: 10px;
+}
+
+.modal-block.block-discount {
+    margin: 0px 10px 0px 0px;
+    width: 350px;
+}
+
+.discount-positive {
+    color: #38A611;
+}
+
+.discount-negative {
+    color: #DF4141;
+}
+
+.modal-block.block-arr {
+    margin: 0px 10px 0px 0px;
+    width: 350px;
+}
+
+.modal-block.block-term {
+    margin: 0px 10px 0px 0px;
+    width: 350px;
+}
+
+.modal-block.block-maxbuy {
+    width: 350px;
+}
+
+.modaltable-container.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 12px;
+}
+
+.text-container.row {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.row-container {
+    display: flex;
+}
+
+.row-container.spend {
+    display: flex;
+}
+
+.row-container.spend-val {
+    display: flex;
+}
+
+.row-container.premium {
+    display: flex;
+}
+
+.row-container.premium-icon {
+    padding-left: 5px;
+    align-items: start;
+    cursor: pointer;
+}
+
+.row-container.premium-val {
+    display: flex;
+}
+
+.premium-positive {
+    color: #38A611;
+}
+
+.premium-negative {
+    color: #DF4141;
+}
+
+.row-container.get {
+    display: flex;
+}
+
+.row-container.get-val {
+    display: flex;
+}
+
+.modaltable-container.buy-container {
+    display: flex;
+    flex-direction: column;
+    background-color: transparent;
+    border-radius: 10px;
+    min-height: 100px;
+    padding: 10px;
+}
+
+.input-container.inputrow {
+    flex-direction: row;
+}
+
+.input-container.balancerow {
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+}
+
+.balancerow.text {
+    opacity: 0.8;
+    align-items: center;
+    font-size: 12px;
+}
+
+.balancerow.max {
+    align-items: center;
+    cursor: pointer; 
+
+    .max-button {
+        background: var(--theme-ui-colors-primaryButton);
+        height: 22px;
+        padding-left: 8px;
+        padding-right: 8px;
+        cursor: 'pointer';
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: small;
+        margin-left: 10px;
+        transition: 'all .3s linear';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    
+        &:active {
+            transform: scale(0.9);
+        }
+    }
+}
+
+.input-container.input {
+    background-color: transparent;
+    border-radius: 10px;
+    border: medium;
+    padding-right: 10px;
+    width: 80%;
+    height: 50px;
+    font-size: 22px;
+
+    Input {
+        border: none;
+        display: inline-block;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+.input-container.token {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: transparent;
+  border-radius: 10px;
+  position: relative;
+  width: 190px;
+  height: 40px;
+  justify-content: end;
+  cursor: unset;
+}
+
+.modaltable-container.button-container {
+    width: 100%;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.button-container.get {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;    
+
+    .action-button {
+        width: 275px;
+        margin-right: 10px;
+    }
+}
+
+.button-container.buy {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .action-button {
+        width: 375px;
+        margin-left: 10px;
+    }
+
+    .switch-button {
+        width: 375px;
+        margin-left: 10px;
+    }
+}
+
+.toast {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+    background-color: var(--theme-ui-colors-white2);
+    color: white;
+    font-size: 24px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+    animation: fadein 0.5s, fadeout 0.5s 4.5s;
+    cursor: pointer;
+}
+
+@keyframes fadein {
+    from { top: 0; opacity: 0; }
+    to { top: 50px; opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { top: 50px; opacity: 1; }
+    to { top: 0; opacity: 0; }
+}

package/dist/scss/BondRow.scss

@@ -0,0 +1,98 @@
+.bonds-container.bondrow-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 70px;
+    justify-content: space-around;
+    background-color: var(--theme-ui-colors-white2);
+    margin-bottom: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--theme-ui-colors-white3);
+    }
+}
+
+.column.column-tokens {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    width: 40%;
+}
+
+.column.column-tokeninfoname {
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    padding-left: 0px;
+}
+
+.column.column-tokenname {
+    width: 100%;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    padding-left: 20px;
+}
+
+.column.column-tokenicons {
+    width: 20%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+}
+
+.column.column-bondinfo {
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    width: 70%;
+}
+
+.column.column-discount {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 20%;
+}
+
+.discount-positive {
+    color: #38A611;
+    width: 20%;
+}
+
+.discount-negative {
+    color: #DF4141;
+    width: 20%;
+}
+
+.column.column-arr {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 20%;
+}
+
+.column.column-terms {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 20%;
+}
+
+.column.column-tokensremaining {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 30%;
+}
+
+.column.column-hotbond {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 10%;
+}