@ape.swap/bonds-sdk 1.0.42 → 1.0.44

package/dist/theme/components.js

@@ -0,0 +1,338 @@
+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);
+};
+export var buttonHover = {
+    '&:not([disabled])': {
+        borderColor: 'var(--theme-ui-colors-primaryButton)',
+        background: 'var(--theme-ui-colors-primaryButton)',
+        opacity: 0.6,
+    },
+    '&:disabled': {},
+};
+export var textUnderlineHover = {
+    '::after': {
+        content: "''",
+        position: 'absolute',
+        background: 'text',
+        left: '0px',
+        bottom: '0px',
+        height: '1.5px',
+        width: '100%',
+        borderRadius: '10px',
+        transform: 'scaleX(0)',
+        transformOrigin: 'bottom right',
+        transition: 'transform 0.25s ease-out',
+        backfaceVisibility: 'hidden',
+    },
+    ':hover::after': {
+        transform: 'scaleX(1)',
+        transformOrigin: 'bottom left',
+    },
+};
+var buttonBaseStyles = {
+    padding: '10px 20px 10px 19px',
+    fontSize: '16px',
+    fontFamily: 'body',
+    cursor: 'pointer',
+    fontWeight: 700,
+    display: 'flex',
+    alignItems: 'center',
+    '&&': {
+        borderRadius: 'normal',
+    },
+};
+var components = {
+    text: {
+        heading: {
+            fontFamily: 'body',
+            fontWeight: 'bold',
+        },
+        lg: { fontSize: 6, lineHeight: '33px' },
+        md: { fontSize: 3, lineHeight: '24px' },
+        sm: { fontSize: 1, lineHeight: '18px' },
+    },
+    input: {
+        fontFamily: 'body',
+        fontWeight: 700,
+        sm: {
+            background: 'white3',
+            borderRadius: 10,
+            height: '32px',
+            width: '200px',
+        },
+        md: {
+            background: 'white3',
+            borderRadius: 10,
+            height: '36px',
+            width: '200px',
+        },
+        lg: {
+            background: 'white3',
+            borderRadius: 14,
+            height: '48px',
+            width: '200px',
+        },
+    },
+    textarea: {
+        padding: '10px 13px 10px 10px',
+        borderRadius: 'normal',
+        border: 'none',
+        fontWeight: 'normal',
+        background: 'lvl1',
+        resize: 'none',
+        color: 'textareaColor',
+        '&:focus': {
+            outline: 'none !important',
+        },
+    },
+    checkbox: {
+        background: 'white2',
+        borderRadius: '5px',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: 'white3',
+        boxShadow: 'none',
+        outline: 'none',
+        appearance: 'none',
+        width: 'inherit',
+        height: 'inherit',
+        margin: '0px',
+        cursor: 'pointer',
+        '& + svg': {
+            display: 'none',
+            position: 'absolute',
+            pointerEvents: 'none',
+            top: '0',
+            left: '0',
+            bottom: '0',
+            right: '0',
+            margin: 'auto',
+        },
+        '&:checked ': {
+            background: 'var(--theme-ui-colors-primaryButton)',
+            borderColor: 'var(--theme-ui-colors-primaryButton)',
+            '& + svg': {
+                display: 'block',
+            },
+        },
+        '&:focus:not(:checked)': {
+            outline: 'none',
+            boxShadow: 'none',
+        },
+        '&:focus': {
+            outline: 'none',
+            boxShadow: '0px 0px 0px 1px var(--theme-ui-colors-primaryButton), 0px 0px 0px 4px var(--theme-ui-colors-white3)',
+        },
+        '&:hover:not(:disabled):not(:checked)': {
+            borderColor: 'var(--theme-ui-colors-primaryButton)',
+            boxShadow: '0px 0px 0px 1px var(--theme-ui-colors-primaryButton), 0px 0px 0px 4px var(--theme-ui-colors-white3)',
+        },
+    },
+    radio: {
+        background: 'lvl1',
+        borderRadius: '50px',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: 'lvl2',
+        boxShadow: 'none',
+        outline: 'none',
+        appearance: 'none',
+        width: 'inherit',
+        height: 'inherit',
+        margin: '0px',
+        cursor: 'pointer',
+        '& + span': {
+            display: 'none',
+            position: 'absolute',
+            pointerEvents: 'none',
+            top: '0',
+            left: '0',
+            bottom: '0',
+            right: '0',
+            margin: 'auto',
+            backgroundColor: 'radioChecked',
+            borderRadius: '50px',
+        },
+        '&:checked ': {
+            background: 'var(--theme-ui-colors-yellow)',
+            borderColor: 'var(--theme-ui-colors-yellow)',
+            '& + span': {
+                display: 'block',
+            },
+        },
+        '&:focus': {
+            outline: 'none',
+            boxShadow: '0px 0px 0px 1px var(--theme-ui-colors-yellow), 0px 0px 0px 4px rgb(255, 179, 0, .2)',
+        },
+        '&:hover:not(:disabled):not(:checked)': {
+            borderColor: 'var(--theme-ui-colors-yellow)',
+        },
+    },
+    label: {
+        inline: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            columnGap: 2,
+        },
+    },
+    borders: {
+        primaryButton: '3px solid var(--theme-ui-colors-primaryButton)',
+        primaryBtnDisable: '3px solid transparent',
+        secondaryButton: '3px solid var(--theme-ui-colors-primaryButton)',
+        secondaryButtonDisable: '3px solid #FDFBF5',
+        mode: {
+            dark: {
+                secondaryButtonDisable: '3px solid #F9F4E7',
+            },
+        },
+    },
+    buttons: {
+        primary: __assign(__assign({}, buttonBaseStyles), { background: 'primaryButton', border: 'primaryButton', color: 'primaryBright', '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'textDisabledButton',
+                border: 'primaryBtnDisable',
+                opacity: 0.9,
+            }, '&:hover': {
+                '&:not([disabled])': {
+                    borderColor: 'rgba(var(--theme-ui-colors-primaryButton), 0.7)',
+                    background: 'rgba(var(--theme-ui-colors-primaryButton), 0.7)',
+                },
+                '&:disabled': {},
+            } }),
+        secondary: __assign(__assign({}, buttonBaseStyles), { background: 'transparent', border: 'secondaryButton', color: 'var(--theme-ui-colors-primaryButton)', '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'primaryButtonDisable',
+                border: 'primaryBtnDisable',
+            }, '&&:hover': {
+                '&:not([disabled])': {
+                    borderColor: 'rgba(var(--theme-ui-colors-primaryButton), 0.7)',
+                },
+                '&:disabled': {},
+            } }),
+        tertiary: __assign(__assign({}, buttonBaseStyles), { background: 'white3', border: 'none', color: 'text', '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'primaryButtonDisable',
+            }, '&:hover': {
+                '&:not([disabled])': {
+                    background: 'white4',
+                },
+                '&:disabled': {},
+            } }),
+        text: __assign(__assign({}, buttonBaseStyles), { background: 'transparent', color: 'text', '&:hover': {
+                '&:not([disabled])': {
+                    color: 'var(--theme-ui-colors-yellow)',
+                },
+                '&:disabled': {},
+            }, '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'primaryButtonDisable',
+            } }),
+        success: __assign(__assign({}, buttonBaseStyles), { background: 'success', color: 'primaryBright', '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'primaryButtonDisable',
+            }, '&:hover': {
+                '&:not([disabled])': {
+                    background: 'hoveredSuccess',
+                },
+                '&:disabled': {},
+            } }),
+        danger: __assign(__assign({}, buttonBaseStyles), { background: 'error', color: 'primaryBright', '&:disabled': {
+                cursor: 'not-allowed',
+                background: 'white3',
+                color: 'primaryButtonDisable',
+            }, '&:hover': {
+                '&:not([disabled])': {
+                    background: 'hoveredDanger',
+                },
+                '&:disabled': {},
+            } }),
+        circular: {
+            width: '40px',
+            height: '40px',
+            background: 'white3',
+            borderRadius: '50%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+            cursor: 'pointer',
+            padding: '1px',
+            transition: 'all .3s linear',
+            '&:hover': {
+                filter: 'brightness(85%)',
+            },
+            '&:active': {
+                transform: 'scale(0.9)',
+            },
+        },
+    },
+    cards: {
+        primary: {
+            background: 'navbar',
+            borderRadius: 'normal',
+        },
+    },
+    flex: {
+        dexContainer: {
+            width: '100%',
+            maxWidth: '420px',
+            height: 'fit-content',
+            background: 'white2',
+            padding: ['15px 5px', '15px 10px', '15px'],
+            borderRadius: '10px',
+            flexDirection: 'column',
+        },
+        v3SubDexContainer: {
+            width: '100%',
+            maxWidth: '600px',
+            height: 'fit-content',
+            background: 'white2',
+            padding: ['15px 5px', '15px 10px', '15px'],
+            borderRadius: '10px',
+            margin: '0px 10px',
+            flexDirection: 'column',
+        },
+        navContainer: {
+            height: '35px',
+            padding: '0px 15px',
+            background: 'white3',
+            borderRadius: '10px',
+            alignItems: 'center',
+            cursor: 'pointer',
+            transition: 'all .3s linear',
+            '&:hover': {
+                filter: 'brightness(95%)',
+            },
+            '&:active': {
+                transform: 'scale(0.9)',
+            },
+        },
+        link: __assign(__assign({}, textUnderlineHover), { cursor: 'pointer', textDecoration: 'none', display: 'inline-block' }),
+        tag: {
+            padding: '5px',
+            borderRadius: '5px',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    },
+    switch: {
+        backgroundColor: 'white4',
+        'input:checked ~ &': {
+            backgroundColor: 'var(--theme-ui-colors-yellow)',
+        },
+    },
+};
+export default components;

package/dist/theme/display.d.ts

@@ -0,0 +1,2 @@
+export declare const MOBILE_DISPLAY: string[];
+export declare const DESKTOP_DISPLAY: string[];

package/dist/theme/display.js

@@ -0,0 +1,2 @@
+export var MOBILE_DISPLAY = ['flex', 'flex', 'flex', 'none', 'none'];
+export var DESKTOP_DISPLAY = ['none', 'none', 'none', 'flex', 'flex'];

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from 'theme-ui';
+export declare const defaultTheme: Theme;

package/dist/theme/index.js

@@ -0,0 +1,15 @@
+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 baseTheme from './base';
+import components from './components';
+import abondColors from './colors';
+export var defaultTheme = __assign(__assign(__assign({}, baseTheme), components), { colors: __assign({}, abondColors) });

package/dist/theme/types.d.ts

@@ -0,0 +1,10 @@
+export type MediaQueries = {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    nav: string;
+};

package/dist/theme/types.js

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

package/dist/utils/getTimePeriods.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Format number of seconds into year, month, day, hour, minute, seconds
+ *
+ * @param seconds
+ */
+declare const getTimePeriods: (seconds: number, days?: boolean) => {
+    years: number;
+    months: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export default getTimePeriods;

package/dist/utils/getTimePeriods.js

@@ -0,0 +1,44 @@
+var MINUTE_IN_SECONDS = 60;
+var HOUR_IN_SECONDS = 3600;
+var DAY_IN_SECONDS = 86400;
+var MONTH_IN_SECONDS = 2629800;
+var YEAR_IN_SECONDS = 31557600;
+/**
+ * Format number of seconds into year, month, day, hour, minute, seconds
+ *
+ * @param seconds
+ */
+var getTimePeriods = function (seconds, days) {
+    var delta = seconds;
+    var timeLeft = {
+        years: 0,
+        months: 0,
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+    };
+    if (delta >= YEAR_IN_SECONDS && !days) {
+        timeLeft.years = Math.floor(delta / YEAR_IN_SECONDS);
+        delta -= timeLeft.years * YEAR_IN_SECONDS;
+    }
+    if (delta >= MONTH_IN_SECONDS && !days) {
+        timeLeft.months = Math.floor(delta / MONTH_IN_SECONDS);
+        delta -= timeLeft.months * MONTH_IN_SECONDS;
+    }
+    if (delta >= DAY_IN_SECONDS) {
+        timeLeft.days = Math.floor(delta / DAY_IN_SECONDS);
+        delta -= timeLeft.days * DAY_IN_SECONDS;
+    }
+    if (delta >= HOUR_IN_SECONDS) {
+        timeLeft.hours = Math.floor(delta / HOUR_IN_SECONDS);
+        delta -= timeLeft.hours * HOUR_IN_SECONDS;
+    }
+    if (delta >= MINUTE_IN_SECONDS) {
+        timeLeft.minutes = Math.floor(delta / MINUTE_IN_SECONDS);
+        delta -= timeLeft.minutes * MINUTE_IN_SECONDS;
+    }
+    timeLeft.seconds = delta;
+    return timeLeft;
+};
+export default getTimePeriods;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/dist/components/MyComponent.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const MyComponent: React.FC;
-export default MyComponent;

package/dist/components/MyComponent.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-var MyComponent = function () {
-    return _jsx("div", { children: "TESTING" });
-};
-export default MyComponent;