@ape.swap/bonds-sdk 1.0.27 → 1.0.28

package/src/theme/colors.ts

@@ -0,0 +1,93 @@
+const abondColors = {
+  // main background gradients
+  white1: '#0E0D16', // base site background
+  white2: '#161420',
+  white3: '#1F1D29',
+  white4: '#282632',
+  white5: '#312F3A',
+  brandPrimary140: '#C1BDE7',
+  navBar: 'rgba(22, 20, 32, 0.8)',
+  primaryButton: '#6560C5', //this should've been called just "primary"
+  secondary: '#E69275',
+  footer: '#000000',
+  success: '#38A611',
+  error: '#DF4141',
+  yellow: '#FFB300',
+  // Button colors
+  primaryButtonDisable: '#48475B',
+  primaryButtonHovered: '#8480D1',
+  textDisabledButton: '#73728E',
+  // Text-related colors
+  text: '#FAFAFA',
+  textDisabled: '#424242',
+  home: {
+    c1: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+    c2: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+    c3: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+    cShadow: 'transparent',
+    hideCircles: '#0E0D16',
+    title: 'linear-gradient(98.79deg, #6560C5 -2.37%, #E07753 100%)',
+    shadowImage: 'rgba(101, 96, 197, 0.25)',
+  },
+  backgroundDisabled: '#3c3742',
+  listTagBg: {
+    ape: 'linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)',
+    launch: 'rgba(213, 49, 49, 0.2)',
+    reserve: 'rgba(90, 208, 109, 0.2)',
+    liquidity: 'rgba(60, 106, 181, 0.19)',
+    ark: 'rgba(208, 126, 90, 0.8)',
+    hot: '#DF4141',
+    new: '#38A611',
+    default: '#38A611',
+    auto: '#DF4141',
+    beta: '#38A611',
+    max: '#38A611',
+    real_yield: '#F0B90B',
+    bondLp: 'rgba(254, 185, 1, 0.2)',
+    migration: '#6F6AC930',
+    cex_fund: 'rgba(213, 49, 49, 0.2)',
+    expired: '#E07753',
+    permatlock: '#38A611',
+  },
+  listTagTextColor: {
+    liquidity: '#3B78D3',
+    cex_fund: '#D53131',
+  },
+  //
+  body: '#FDFBF5',
+  lvl1: '#F1EADA',
+  lvl2: '#EADFC7',
+  primaryBright: '#FAFAFA',
+  primaryDark: '#0B0B0B',
+  info: '#4D4040',
+  secondaryButtonDisableBg: '#F1EADA',
+  secondaryButtonDisableColor: 'rgba(66, 66, 66, 0.5)',
+  buttonDisabledText: '#A09F9C',
+  dividerColor: '#E2E2E2',
+  textareaColor: '#4D4040',
+  heading: '#4D4040',
+  black: '#000000',
+  gradient: 'linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)',
+  smartGradient: 'linear-gradient(94.44deg, #BA801E -9.73%, #E7CF67 40.14%, #BA801E 93.01%)',
+  white2Opacity09: 'rgba(241, 234, 218, 0.50)',
+  radioChecked: '#FAFAFA',
+  navMenuLogo: '#C8BA9C',
+  input: '#4D4040',
+  primaryGray: '#4D40407F',
+  gray: '#7A7A7A',
+  brown: '#4D4040',
+  hoveredYellow: '#FFDA00',
+  hoveredSuccess: '#38A611B3',
+  hoveredDanger: '#DF4141B3',
+  modalOverlay: 'rgba(66, 66, 66, 0.5)',
+  opacityBadge: 'rgba(66, 66, 66, 0.5)',
+  gnanaWarningBackground: '#FFB300',
+  moon: '#7A7A7A',
+  island: '#4D4040',
+  migration: '#6560C5',
+  bg1: 'linear-gradient(180deg, #FFFFFF 0%, #EEDFC7 10%, #FFFFFF 40%, #FEFAE0 50%, #EEDFC7 100%), linear-gradient(180deg, #FEFCEC 27.58%, #EEDFC7 79.74%, #FEFAE0 131.91%, #F5ECDD 154.81%)',
+  bg2: 'linear-gradient(180deg, #FEFCEC 27.58%, #EEDFC7 79.74%, #FEFAE0 131.91%, #F5ECDD 154.81%)',
+  progressBar: 'linear-gradient(90deg, #312E7A 0%, #5C4FAE 41.5%, #AD6568 74.5%, #AD6E66 100%)',
+}
+
+export default abondColors

package/src/theme/components.ts

@@ -0,0 +1,385 @@
+export const buttonHover = {
+  '&:not([disabled])': {
+    borderColor: 'var(--theme-ui-colors-primaryButton)',
+    background: 'var(--theme-ui-colors-primaryButton)',
+    opacity: 0.6,
+  },
+  '&:disabled': {},
+}
+
+export const 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',
+  },
+}
+
+const buttonBaseStyles = {
+  padding: '10px 20px 10px 19px',
+  fontSize: '16px',
+  fontFamily: 'body',
+  cursor: 'pointer',
+  fontWeight: 700,
+  display: 'flex',
+  alignItems: 'center',
+  '&&': {
+    borderRadius: 'normal',
+  },
+}
+
+const 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: {
+      ...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: {
+      ...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: {
+      ...buttonBaseStyles,
+      background: 'white3',
+      border: 'none',
+      color: 'text',
+
+      '&:disabled': {
+        cursor: 'not-allowed',
+        background: 'white3',
+        color: 'primaryButtonDisable',
+      },
+
+      '&:hover': {
+        '&:not([disabled])': {
+          background: 'white4',
+        },
+        '&:disabled': {},
+      },
+    },
+    text: {
+      ...buttonBaseStyles,
+      background: 'transparent',
+      color: 'text',
+
+      '&:hover': {
+        '&:not([disabled])': {
+          color: 'var(--theme-ui-colors-yellow)',
+        },
+        '&:disabled': {},
+      },
+
+      '&:disabled': {
+        cursor: 'not-allowed',
+        background: 'white3',
+        color: 'primaryButtonDisable',
+      },
+    },
+    success: {
+      ...buttonBaseStyles,
+      background: 'success',
+      color: 'primaryBright',
+
+      '&:disabled': {
+        cursor: 'not-allowed',
+        background: 'white3',
+        color: 'primaryButtonDisable',
+      },
+
+      '&:hover': {
+        '&:not([disabled])': {
+          background: 'hoveredSuccess',
+        },
+        '&:disabled': {},
+      },
+    },
+    danger: {
+      ...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: {
+      ...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/src/theme/display.ts

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

package/src/theme/index.ts

@@ -0,0 +1,10 @@
+import type { Theme } from 'theme-ui'
+import baseTheme from './base'
+import components from './components'
+import abondColors from './colors'
+
+export const defaultTheme: Theme = {
+  ...baseTheme,
+  ...components,
+  colors: { ...abondColors },
+}

package/src/theme/types.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/src/views/Bonds/Bonds.tsx

@@ -0,0 +1,77 @@
+/** @jsxImportSource theme-ui */
+import React, { useEffect, useState } from 'react'
+
+import { ThemeProvider } from "theme-ui";
+import { defaultTheme } from '../../theme'
+import axios from "axios";
+
+import styles, { getColumnDiscountStyle } from './styles';
+
+import { BondsDataResponse } from './type';
+import { ethers } from 'ethers';
+import {useWeb3React} from "@web3-react/core";
+
+interface BondsProps {
+    connectionString?: string;
+  }
+  
+  const Bonds: React.FC<BondsProps> = ({ connectionString }) => {
+    // Use connectionType as needed within your Bonds component
+      const { account, isActive } = useWeb3React();
+
+
+      const USDT_ABI = [
+          // The ERC-20 approve function ABI
+          "function approve(address spender, uint256 amount) public returns (bool)"
+      ];
+
+      const USDT_ADDRESS = "0xdAC17F958D2ee523a2206206994597C13D831ec7"; // USDT contract address on Ethereum mainnet
+
+      const handleApprove = async () => {
+
+          if (!window.ethereum) {
+              console.error("No Ethereum provider found");
+              alert('No Ethereum provider found');
+              return;
+          }
+
+          const provider = new ethers.providers.Web3Provider(window.ethereum)
+          const signer = provider.getSigner();
+          const usdtContract = new ethers.Contract(USDT_ADDRESS, USDT_ABI,signer);
+
+          try {
+              const tx = await usdtContract.approve(
+                  account, // Replace with the actual spender address
+                  ethers.utils.parseUnits("1000.0", 6) // Approve 1000 USDT (USDT has 6 decimals)
+              );
+              await tx.wait();
+              alert('Approval Successful');
+          } catch (error) {
+              console.error("Approval error", error);
+              alert('Approval Failed');
+          }
+      };
+
+      const [bondData, setBondData] = useState<BondsDataResponse[]>([])
+    const [hotBonds, setHotBonds] = useState<string[]>([]);
+
+
+
+
+
+
+
+
+    return (
+        <ThemeProvider theme={defaultTheme}>
+            <p>{isActive}-{account}</p>
+            {isActive && account && (
+                <button onClick={handleApprove}>Approve USDT</button>
+            )}
+            <h1>{connectionString ?? "NEW TEST"}</h1>
+
+        </ThemeProvider>
+    )
+}
+
+export default Bonds

package/src/views/Bonds/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Bonds'
+

package/src/views/Bonds/styles.scss

@@ -0,0 +1,24 @@
+.table-container {
+    width: 100vw;
+    flex-direction: column; 
+    padding: 20px;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px; 
+    font-weight: bold;
+}
+
+.bondrow-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-around;
+    background-color:#151320;
+    margin-bottom: 5px;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #4B4B53
+}

package/src/views/Bonds/styles.ts

@@ -0,0 +1,91 @@
+import { ThemeUIStyleObject } from 'theme-ui'
+
+const getDiscountColorStyle = (discount: number): string => {
+    return discount < 0 ? '#DF4141' : '#38A611';
+}
+
+export function getColumnDiscountStyle(discount: number): ThemeUIStyleObject {
+    return {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: getDiscountColorStyle(discount)
+    };
+}
+
+export const styles: Record<
+  | 'tableContainer'
+  | 'headerContainer'
+  | 'bondrowContainer'
+  | 'columnToken'
+  | 'columnDiscount'
+  | 'columnArr'
+  | 'columnTerm'
+  | 'columnTokensRemaining'
+  | 'hotBond',
+  ThemeUIStyleObject
+> = {
+        tableContainer: {
+            width: '80vw', 
+            flexDirection: 'column', 
+            p: '20px',
+            marginLeft: 'auto',
+            marginRight: 'auto'
+        },
+        headerContainer: {
+            display: 'flex',
+            justifyContent: ['flex-end', 'flex-end', 'flex-end', 'space-around'],
+            padding: '5px', 
+            fontWeight: 'bold' 
+        },
+        bondrowContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            width: '100%',
+            justifyContent: ['flex-end', 'flex-end', 'flex-end', 'space-around'],
+            backgroundColor:'#151320',
+            marginBottom:'10px',
+            padding: '20px',
+            borderRadius: '10px',
+            border: '1px solid #4B4B53',
+        },
+        columnToken: {
+            width: '100px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        columnDiscount: {
+            width: '50px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        columnArr: {
+            width: '50px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        columnTerm: {
+            width: '50px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        columnTokensRemaining: {
+            width: '50px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        hotBond: {
+            width: '50px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+        }
+  }
+
+export default styles;