From 202b11bd6a0a4d7a94caf95cca8e028eb4498680 Mon Sep 17 00:00:00 2001 From: Hemant Date: Sat, 20 Apr 2024 15:05:21 +0530 Subject: [PATCH] fixed: eslint errors --- .eslintrc | 120 ------------ .eslintrc.json | 138 +++++++++++++- package.json | 5 +- src/app/claims/page.tsx | 51 +----- src/app/layout.tsx | 13 +- src/app/page.tsx | 112 ++++-------- src/app/strategy/page.tsx | 254 +++++++++++--------------- src/app/template.tsx | 16 +- src/components/Deposit.tsx | 127 +++++++------ src/components/Filters.tsx | 98 +++++----- src/components/Navbar.tsx | 140 +++++++------- src/components/Pools.tsx | 136 +++++++------- src/components/Strategies.tsx | 188 ++++++++----------- src/components/TxButton.tsx | 1 - src/hooks/useERC4626Value.ts | 33 ++-- src/store/IDapp.store.ts | 48 ++--- src/store/ekobu.store.ts | 55 +++--- src/store/haiko.store.ts | 7 +- src/store/hashstack.store.ts | 34 ++-- src/store/jedi.store.ts | 89 +++++---- src/store/myswap.store.ts | 7 +- src/store/nimbora.store.ts | 7 - src/store/nostradex.store.ts | 5 - src/store/nostralending.store.ts | 66 +++---- src/store/pools.ts | 74 ++++---- src/store/sithswap.store.ts | 5 - src/store/starkdefi.store.ts | 5 - src/store/strategies.atoms.ts | 35 ++-- src/store/tenkswap.store.ts | 5 - src/store/utils.atoms.ts | 51 +++--- src/store/zklend.store.ts | 53 +++--- src/strategies/IStrategy.ts | 46 +++-- src/strategies/auto_strk.strat.ts | 58 +++--- src/strategies/simple.stable.strat.ts | 20 +- src/utils.ts | 2 +- src/utils/MyNumber.ts | 12 +- tailwind.config.ts | 14 +- yarn.lock | 12 ++ 38 files changed, 946 insertions(+), 1196 deletions(-) delete mode 100644 .eslintrc diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 55a8a919..00000000 --- a/.eslintrc +++ /dev/null @@ -1,120 +0,0 @@ -parser: "@typescript-eslint/parser" - -env: - node: true - es6: true - jest: true - mocha: true - browser: true - -plugins: - - "@typescript-eslint" - -extends: - - eslint:recommended - - plugin:@typescript-eslint/eslint-recommended - - plugin:@typescript-eslint/recommended - -parserOptions: - ecmaVersion: 2018 - -rules: - # Ignore Rules - strict: 0 - no-underscore-dangle: 0 - no-mixed-requires: 0 - no-process-exit: 0 - no-warning-comments: 0 - no-use-before-define: 0 - curly: 0 - no-multi-spaces: 0 - no-alert: 0 - consistent-return: 0 - consistent-this: [0, self] - func-style: 0 - max-nested-callbacks: 0 - camelcase: 0 - no-dupe-class-members: 0 - - # Warnings - no-debugger: 1 - no-empty: 1 - no-invalid-regexp: 1 - no-unused-expressions: 1 - no-native-reassign: 1 - no-fallthrough: 1 - - # Errors - eqeqeq: 2 - no-undef: 2 - no-dupe-keys: 2 - no-empty-character-class: 2 - no-self-compare: 2 - valid-typeof: 2 - handle-callback-err: 2 - no-shadow-restricted-names: 2 - no-new-require: 2 - no-mixed-spaces-and-tabs: 2 - block-scoped-var: 2 - no-else-return: 2 - no-throw-literal: 2 - no-void: 2 - radix: 2 - wrap-iife: [2, outside] - no-shadow: 0 - no-path-concat: 2 - valid-jsdoc: [0, {requireReturn: false, requireParamDescription: false, requireReturnDescription: false}] - - # stylistic errors - no-spaced-func: 2 - semi-spacing: 2 - key-spacing: [2, { beforeColon: false, afterColon: true }] - no-lonely-if: 2 - no-floating-decimal: 2 - brace-style: [2, 1tbs, { allowSingleLine: true }] - comma-style: [2, last] - no-multiple-empty-lines: [2, {max: 1}] - no-nested-ternary: 2 - operator-assignment: [2, always] - padded-blocks: [2, never] - quote-props: [2, as-needed] - keyword-spacing: [2, {'before': true, 'after': true, 'overrides': {}}] - space-before-blocks: [2, always] - array-bracket-spacing: [2, never] - computed-property-spacing: [2, never] - space-in-parens: [2, never] - space-unary-ops: [2, {words: true, nonwords: false}] - wrap-regex: 2 - linebreak-style: 0 - semi: [2, always] - arrow-spacing: [2, {before: true, after: true}] - no-class-assign: 2 - no-const-assign: 2 - no-this-before-super: 2 - no-var: 2 - object-shorthand: [2, always] - prefer-arrow-callback: 2 - prefer-const: 2 - prefer-spread: 2 - prefer-template: 2 - - # TypeScript - "@typescript-eslint/no-empty-interface": "off" - "@typescript-eslint/no-use-before-define": ["off"] - "@typescript-eslint/no-empty-function": "off" - "@typescript-eslint/ban-ts-comment": "off" - "@typescript-eslint/no-explicit-any": "off" - "@typescript-eslint/explicit-module-boundary-types": "off" - "@typescript-eslint/no-this-alias": "off" - "@typescript-eslint/no-unnecessary-type-constraint": "off" - "@typescript-eslint/ban-types": "off" - -overrides: - - files: - - "test/**" - - "*.spec.ts" - - "*.test.ts" - rules: - prefer-arrow-callback: 0 - "@typescript-eslint/no-non-null-assertion": 0 - "@typescript-eslint/no-unused-vars": 0 \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a..00025ff6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,139 @@ { - "extends": "next/core-web-vitals" + "parser": "@typescript-eslint/parser", + "env": { + "browser": true, + "node": true, + "es6": true, + "jest": true, + "mocha": true + }, + "plugins": ["@typescript-eslint", "unused-imports"], + "extends": [ + "next/core-web-vitals", + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended" + ], + "parserOptions": { + "ecmaVersion": 2018 + }, + "rules": { + "no-unused-vars": "off", + "unused-imports/no-unused-imports": "error", + "unused-imports/no-unused-vars": [ + "warn", + { + "vars": "all", + "varsIgnorePattern": "^_", + "args": "after-used", + "argsIgnorePattern": "^_" + } + ], + "strict": 0, + "no-underscore-dangle": 0, + "no-mixed-requires": 0, + "no-process-exit": 0, + "no-warning-comments": 0, + "no-use-before-define": 0, + "curly": 0, + "no-multi-spaces": 0, + "no-alert": 0, + "consistent-return": 0, + "consistent-this": [0, "self"], + "func-style": 0, + "max-nested-callbacks": 0, + "camelcase": 0, + "no-dupe-class-members": 0, + + // Warnings + "no-debugger": 1, + "no-empty": 1, + "no-invalid-regexp": 1, + "no-unused-expressions": 1, + "no-native-reassign": 1, + "no-fallthrough": 1, + + // Errors + "eqeqeq": 2, + "no-undef": 2, + "no-dupe-keys": 2, + "no-empty-character-class": 2, + "no-self-compare": 2, + "valid-typeof": 2, + "handle-callback-err": 2, + "no-shadow-restricted-names": 2, + "no-new-require": 2, + "no-mixed-spaces-and-tabs": 2, + "block-scoped-var": 2, + "no-else-return": 2, + "no-throw-literal": 2, + "no-void": 2, + "radix": 2, + "wrap-iife": [2, "outside"], + "no-shadow": 0, + "no-path-concat": 2, + "valid-jsdoc": [0, { "requireReturn": false, "requireParamDescription": false, "requireReturnDescription": false }], + + // stylistic errors + "no-spaced-func": 2, + "semi-spacing": 2, + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "no-lonely-if": 2, + "no-floating-decimal": 2, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + // "comma": [2, "last"], + "no-multiple-empty-lines": [2, { "max": 1 }], + // "no-nested-ternary": 2, + "operator-assignment": [2, "always"], + "padded-blocks": [2, "never"], + "quote-props": [2, "as-needed"], + "keyword-spacing": [2, { "before": true, "after": true, "overrides": {} }], + "space-before-blocks": [2, "always"], + "array-bracket-spacing": [2, "never"], + "computed-property-spacing": [2, "never"], + "space-in-parens": [2, "never"], + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "wrap-regex": 2, + "linebreak-style": 0, + "semi": [2, "always"], + "arrow-spacing": [2, { "before": true, "after": true }], + "no-class-assign": 2, + "no-const-assign": 2, + "no-this-before-super": 2, + "no-var": 2, + "object-shorthand": [2, "always"], + "prefer-arrow-callback": 2, + "prefer-const": 2, + "prefer-spread": 2, + "prefer-template": 2, + + // typescript + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-use-before-define": ["off"], + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-this-alias": "off", + "@typescript-eslint/no-unnecessary-type-constraint": "off", + "@typescript-eslint/ban-types": "off" + }, + "overrides": [ + { + "files": [ + "test/**", + "*.spec.ts", + "*.test.ts", + "*.jsx", + "*.tsx", + "*.ts", + "*.js" + ], + "rules": { + "prefer-arrow-callback": 0, + "@typescript-eslint/no-non-null-assertion": 0, + "@typescript-eslint/no-unused-vars": 0 + } + } + ] } diff --git a/package.json b/package.json index 98d76c97..07a4d774 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "lint:check": "eslint --max-warnings 0 --config .eslintrc .", - "lint:fix": "eslint --max-warnings 0 --config .eslintrc . --fix", + "lint:check": "eslint --config .eslintrc.json .", + "lint:fix": "eslint --config .eslintrc.json . --fix", "format:check": "prettier --check \"**/*.{ts,tsx,json}\"", "format:fix": "prettier --write \"**/*.{ts,tsx,json}\"" }, @@ -59,6 +59,7 @@ "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", + "eslint-plugin-unused-imports": "^3.1.0", "postcss": "^8", "prettier": "^3.2.5", "tailwindcss": "^3.3.0", diff --git a/src/app/claims/page.tsx b/src/app/claims/page.tsx index 3689d7a9..ae701a41 100644 --- a/src/app/claims/page.tsx +++ b/src/app/claims/page.tsx @@ -1,68 +1,19 @@ "use client"; -import Navbar from "@/components/Navbar"; -import EkuboAtoms from "@/store/ekobu.store"; -import Ekubo from "@/store/ekobu.store"; -import Jediswap from "@/store/jedi.store"; -import { - PoolInfo, - StrkDexIncentivesAtom, - allPoolsAtomUnSorted, - filteredPools, - sortPoolsAtom, -} from "@/store/pools"; import { Avatar, - AvatarGroup, - Box, Button, Card, - CardBody, - CardHeader, - Center, Container, - Flex, Grid, GridItem, - HStack, Heading, - Image, - Link, - LinkBox, - LinkOverlay, - Skeleton, - Spinner, - Stack, Stat, StatLabel, StatNumber, - Tab, - TabIndicator, - TabList, - TabPanel, - TabPanels, - Tabs, - Text, - Tooltip, } from "@chakra-ui/react"; -import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; -import { useEffect, useMemo, useState } from "react"; -import useSWR from "swr"; -import { - Pagination, - PaginationContainer, - usePagination, - PaginationNext, - PaginationPrevious, - PaginationPage, - PaginationPageGroup, -} from "@ajna/pagination"; + import CONSTANTS from "@/constants"; -import Filters from "@/components/Filters"; -import tg from "@/assets/tg.svg"; -import Pools from "@/components/Pools"; -import Strategies from "@/components/Strategies"; -import mixpanel from "mixpanel-browser"; export default function Claim() { return ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 81f38a5a..c64c99fb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,9 @@ -import type { Metadata } from "next"; -import { Analytics } from "@vercel/analytics/react"; +import { Analytics } from '@vercel/analytics/react'; +import type { Metadata } from 'next'; // import { Inter, Courier_Prime } from "next/font/google"; -import "./globals.css"; -import { GoogleAnalytics } from "@next/third-parties/google"; +import { GoogleAnalytics } from '@next/third-parties/google'; +import React from 'react'; +import './globals.css'; // const courier = Courier_Prime({ // weight: '400', @@ -10,8 +11,8 @@ import { GoogleAnalytics } from "@next/third-parties/google"; // }); export const metadata: Metadata = { - title: "STRKFarm | Earn $STRK Tokens", - description: "Farm on the best pools of Starknet", + title: 'STRKFarm | Earn $STRK Tokens', + description: 'Farm on the best pools of Starknet', }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 6e7ad818..26cb0629 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,35 +1,16 @@ -"use client"; +'use client'; + +import tg from '@/assets/tg.svg'; +import Pools from '@/components/Pools'; +import Strategies from '@/components/Strategies'; +import CONSTANTS from '@/constants'; -import Navbar from "@/components/Navbar"; -import EkuboAtoms from "@/store/ekobu.store"; -import Ekubo from "@/store/ekobu.store"; -import Jediswap from "@/store/jedi.store"; -import { - PoolInfo, - StrkDexIncentivesAtom, - allPoolsAtomUnSorted, - filteredPools, - sortPoolsAtom, -} from "@/store/pools"; import { - Avatar, - AvatarGroup, Box, - Card, - CardBody, - CardHeader, Center, Container, - Flex, - HStack, - Heading, Image, Link, - LinkBox, - LinkOverlay, - Skeleton, - Spinner, - Stack, Tab, TabIndicator, TabList, @@ -37,65 +18,48 @@ import { TabPanels, Tabs, Text, - Tooltip, -} from "@chakra-ui/react"; -import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; -import { useEffect, useMemo, useState } from "react"; -import useSWR from "swr"; -import { - Pagination, - PaginationContainer, - usePagination, - PaginationNext, - PaginationPrevious, - PaginationPage, - PaginationPageGroup, -} from "@ajna/pagination"; -import CONSTANTS from "@/constants"; -import Filters from "@/components/Filters"; -import tg from "@/assets/tg.svg"; -import Pools from "@/components/Pools"; -import Strategies from "@/components/Strategies"; -import mixpanel from "mixpanel-browser"; +} from '@chakra-ui/react'; +import mixpanel from 'mixpanel-browser'; +import { useEffect } from 'react'; export default function Home() { useEffect(() => { - mixpanel.track("Page open"); + mixpanel.track('Page open'); }, []); return ( - - - + + + 🚀Starknet DeFi Spring Identify the best $STRK rewarding pools and maximize your rewards {/* Pools: {_filteredPools.length}, pages: {pagesCount} */} - + { - mixpanel.track("All pools clicked"); + mixpanel.track('All pools clicked'); }} > All Pools { - mixpanel.track("Strategies opened"); + mixpanel.track('Strategies opened'); }} > Strategies✨ @@ -109,43 +73,43 @@ export default function Home() { borderRadius="1px" /> - + - +
- + More features coming soon. Join our Telegram channel to discuss strategies, features and contribute. -
+
- + telegram
-
+
- Made with ❤️ on Starknet by{" "} + Made with ❤️ on Starknet by{' '} @akiraonstarknet diff --git a/src/app/strategy/page.tsx b/src/app/strategy/page.tsx index 9550fc12..674dbf3e 100644 --- a/src/app/strategy/page.tsx +++ b/src/app/strategy/page.tsx @@ -1,46 +1,24 @@ -"use client"; +'use client'; + +import Deposit from '@/components/Deposit'; +import CONSTANTS from '@/constants'; +import { useERC4626Value } from '@/hooks/useERC4626Value'; + +import { StrategyInfo, strategiesAtom } from '@/store/strategies.atoms'; +import { getUniqueById } from '@/utils'; -import Navbar from "@/components/Navbar"; -import EkuboAtoms from "@/store/ekobu.store"; -import Ekubo from "@/store/ekobu.store"; -import Jediswap from "@/store/jedi.store"; -import { - PoolInfo, - StrkDexIncentivesAtom, - allPoolsAtomUnSorted, - filteredPools, - sortPoolsAtom, -} from "@/store/pools"; import { Avatar, - AvatarGroup, Box, - Button, Card, - CardBody, - CardHeader, Center, Container, Flex, Grid, GridItem, - HStack, - Heading, - Image, - Input, - Link, - LinkBox, - LinkOverlay, ListItem, - Menu, - MenuButton, - MenuItem, - MenuList, - NumberInput, OrderedList, - Skeleton, Spinner, - Stack, Stat, StatHelpText, StatLabel, @@ -52,40 +30,16 @@ import { TabPanels, Tabs, Text, - Tooltip, VStack, Wrap, WrapItem, -} from "@chakra-ui/react"; -import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; -import { useEffect, useMemo, useState } from "react"; -import useSWR from "swr"; -import { - Pagination, - PaginationContainer, - usePagination, - PaginationNext, - PaginationPrevious, - PaginationPage, - PaginationPageGroup, -} from "@ajna/pagination"; -import CONSTANTS from "@/constants"; -import Filters from "@/components/Filters"; -import tg from "@/assets/tg.svg"; -import Pools from "@/components/Pools"; -import Strategies from "@/components/Strategies"; -import mixpanel from "mixpanel-browser"; -import { useSearchParams } from "next/navigation"; -import { StrategyInfo, strategiesAtom } from "@/store/strategies.atoms"; -import { getUniqueById } from "@/utils"; -import { ChevronDownIcon } from "@chakra-ui/icons"; -import LoadingWrap from "@/components/LoadingWrap"; -import Deposit from "@/components/Deposit"; -import MyNumber from "@/utils/MyNumber"; -import { useERC20Balance } from "@/hooks/useERC20Balance"; -import { useAccount } from "@starknet-react/core"; -import { isMobile } from "react-device-detect"; -import { useERC4626Value } from "@/hooks/useERC4626Value"; +} from '@chakra-ui/react'; +import { useAccount } from '@starknet-react/core'; +import { useAtomValue } from 'jotai'; +import mixpanel from 'mixpanel-browser'; +import { useSearchParams } from 'next/navigation'; +import { useEffect, useMemo } from 'react'; +import { isMobile } from 'react-device-detect'; export default function Strategy() { const { address } = useAccount(); @@ -93,9 +47,9 @@ export default function Strategy() { const strategies = useAtomValue(strategiesAtom); const strategy: StrategyInfo | undefined = useMemo(() => { - const name = searchParams.get("name"); - console.log("name", name); - return strategies.find((s) => s.name == name); + const name = searchParams.get('name'); + console.log('name', name); + return strategies.find((s) => s.name === name); }, [searchParams, strategies]); const { balance, underlyingTokenInfo, isLoading, isError } = useERC4626Value( @@ -103,47 +57,47 @@ export default function Strategy() { ); // @todo need to add multi token support useEffect(() => { - mixpanel.track("Strategy page open", { name: searchParams.get("name") }); - }, []); + mixpanel.track('Strategy page open', { name: searchParams.get('name') }); + }, [searchParams]); - const colSpan1: any = { base: "5", md: "3" }; - const colSpan2: any = { base: "5", md: "2" }; + const colSpan1: any = { base: '5', md: '3' }; + const colSpan2: any = { base: '5', md: '2' }; return ( - - + + - {strategy ? strategy.name : "Strategy Not found"} + {strategy ? strategy.name : 'Strategy Not found'} {strategy && ( - - + + - - - + + + How does it work? {strategy.description} @@ -154,46 +108,46 @@ export default function Strategy() { logo: p.pool.protocol.logo, })), ).map((p) => ( - +
- {p.id} + {p.id}
))} - + APY {(strategy.netYield * 100).toFixed(2)}% - + {strategy.leverage.toFixed(2)}x boosted {!isLoading && ( @@ -202,18 +156,18 @@ export default function Strategy() { ? `${balance.toEtherToFixedDecimals(4)} ${underlyingTokenInfo?.name}` : isMobile ? CONSTANTS.MOBILE_MSG - : "Connect wallet"} + : 'Connect wallet'} )} {isLoading && ( Your Holdings: {address ? ( - + ) : isMobile ? ( CONSTANTS.MOBILE_MSG ) : ( - "Connect wallet" + 'Connect wallet' )} )} @@ -221,12 +175,12 @@ export default function Strategy() { - - + + { // mixpanel.track('All pools clicked') }} @@ -235,7 +189,7 @@ export default function Strategy() { { // mixpanel.track('Strategies opened') }} @@ -253,9 +207,9 @@ export default function Strategy() { - - + + Behind the scenes - + Assuming a capital of $1000, below are all the actions executed - + Action - + Protocol - + Amount - + Yield {strategy.actions.map((action, index) => ( - + {index + 1}) {action.name} - + {" "} + marginRight={'2px'} + />{' '} {action.pool.pool.name} on {" "} + marginRight={'2px'} + marginLeft={'5px'} + />{' '} {action.pool.protocol.name} - ${Number(action.amount).toLocaleString()} yields{" "} + ${Number(action.amount).toLocaleString()} yields{' '} {action.isDeposit ? (action.pool.apr * 100).toFixed(2) : -(action.pool.borrow.apr * 100).toFixed(2)} % ${Number(action.amount).toLocaleString()} {action.isDeposit ? (action.pool.apr * 100).toFixed(2) @@ -370,8 +324,8 @@ export default function Strategy() { ))} - - + + Risks @@ -379,8 +333,8 @@ export default function Strategy() { {r} diff --git a/src/app/template.tsx b/src/app/template.tsx index 410da15f..20aaaf13 100644 --- a/src/app/template.tsx +++ b/src/app/template.tsx @@ -5,36 +5,22 @@ import * as React from "react"; import { sepolia } from "@starknet-react/chains"; import { StarknetConfig, - publicProvider, argent, braavos, useInjectedConnectors, - useNetwork, - useAccount, - useConnect, - nethermindProvider, jsonRpcProvider, } from "@starknet-react/core"; import { ChakraBaseProvider, - extendBaseTheme, - theme as chakraTheme, extendTheme, Flex, - Icon, - HStack, Center, - Box, Container, } from "@chakra-ui/react"; import { Provider as JotaiProvider } from "jotai"; -import { Sidebar, Menu, MenuItem, SubMenu } from "react-pro-sidebar"; -import * as LogoSvg from "@public/logo.svg"; -import * as HomeSvg from "@public/home.svg"; -import * as PlaySvg from "@public/play.svg"; import Image from "next/image"; import Navbar from "@/components/Navbar"; -import { RpcProvider, RpcProviderOptions, constants } from "starknet"; +import { RpcProviderOptions, constants } from "starknet"; import mixpanel from "mixpanel-browser"; // ! make page view more dynamic diff --git a/src/components/Deposit.tsx b/src/components/Deposit.tsx index 78b17f36..03b00742 100644 --- a/src/components/Deposit.tsx +++ b/src/components/Deposit.tsx @@ -1,4 +1,4 @@ -import { ChevronDownIcon } from "@chakra-ui/icons"; +import { ChevronDownIcon } from '@chakra-ui/icons'; import { Box, Button, @@ -17,21 +17,18 @@ import { NumberInputStepper, Text, Tooltip, - usePrevious, -} from "@chakra-ui/react"; -import LoadingWrap from "./LoadingWrap"; -import { IStrategyActionHook, TokenInfo } from "@/strategies/IStrategy"; -import { useERC20Balance } from "@/hooks/useERC20Balance"; -import { StrategyInfo } from "@/store/strategies.atoms"; -import { useEffect, useMemo, useState, createRef } from "react"; -import MyNumber from "@/utils/MyNumber"; -import TxButton from "./TxButton"; -import { MyMenuItemProps, MyMenuListProps } from "@/utils"; -import { PrefixPathnameNormalizer } from "next/dist/server/future/normalizers/request/prefix"; -import { useAccount, useProvider } from "@starknet-react/core"; -import { ProviderInterface } from "starknet"; -import { setMaxIdleHTTPParsers } from "http"; -import mixpanel from "mixpanel-browser"; +} from '@chakra-ui/react'; +import LoadingWrap from './LoadingWrap'; +import { IStrategyActionHook, TokenInfo } from '@/strategies/IStrategy'; +import { useERC20Balance } from '@/hooks/useERC20Balance'; +import { StrategyInfo } from '@/store/strategies.atoms'; +import { useMemo, useState } from 'react'; +import MyNumber from '@/utils/MyNumber'; +import TxButton from './TxButton'; +import { MyMenuItemProps, MyMenuListProps } from '@/utils'; +import { useAccount, useProvider } from '@starknet-react/core'; +import { ProviderInterface } from 'starknet'; +import mixpanel from 'mixpanel-browser'; interface DepositProps { strategy: StrategyInfo; @@ -49,17 +46,17 @@ export default function Deposit(props: DepositProps) { const [dirty, setDirty] = useState(false); const [selectedMarket, setSelectedMarket] = useState( - props.callsInfo(MyNumber.fromZero(), address || "0x0", provider)[0] + props.callsInfo(MyNumber.fromZero(), address || '0x0', provider)[0] .tokenInfo, ); const [amount, setAmount] = useState( - MyNumber.fromEther("0", selectedMarket.decimals), + MyNumber.fromEther('0', selectedMarket.decimals), ); - const [rawAmount, setRawAmount] = useState(""); + const [rawAmount, setRawAmount] = useState(''); const { calls, actions } = useMemo(() => { - const actions = props.callsInfo(amount, address || "0x0", provider); - const hook = actions.find((a) => a.tokenInfo.name == selectedMarket.name); + const actions = props.callsInfo(amount, address || '0x0', provider); + const hook = actions.find((a) => a.tokenInfo.name === selectedMarket.name); if (!hook) return { calls: [], actions }; return { calls: hook.calls, actions }; }, [selectedMarket, amount, address, provider]); @@ -76,47 +73,47 @@ export default function Deposit(props: DepositProps) { buttonText: string; }) { return ( - + Available balance - + {balance.toEtherToFixedDecimals(4)}
@@ -199,18 +196,18 @@ export default function Deposit(props: DepositProps) { min={0} max={parseFloat(maxAmount.toEtherStr())} step={parseFloat(selectedMarket.stepAmount.toEtherStr())} - color={"white"} - bg={"bg"} - borderRadius={"10px"} + color={'white'} + bg={'bg'} + borderRadius={'10px'} onChange={(value) => { if (value && Number(value) > 0) setAmount(MyNumber.fromEther(value, selectedMarket.decimals)); else { - setAmount(new MyNumber("0", selectedMarket.decimals)); + setAmount(new MyNumber('0', selectedMarket.decimals)); } setRawAmount(value); setDirty(true); - mixpanel.track("Enter amount", { + mixpanel.track('Enter amount', { strategy: props.strategy.name, buttonText: props.buttonText, amount: amount.toEtherStr(), @@ -219,39 +216,39 @@ export default function Deposit(props: DepositProps) { address, }); }} - marginTop={"10px"} + marginTop={'10px'} keepWithinRange={false} clampValueOnBlur={false} value={rawAmount} > - - + + {amount.isZero() && dirty && ( - - Require amount {">"} 0 + + Require amount {'>'} 0 )} - {amount.compare(maxAmount.toEtherStr(), "gt") && ( - + {amount.compare(maxAmount.toEtherStr(), 'gt') && ( + Amount to be less than {maxAmount.toEtherToFixedDecimals(2)} )} -
+
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx index 8d5f715d..f05adb1c 100644 --- a/src/components/Filters.tsx +++ b/src/components/Filters.tsx @@ -1,24 +1,22 @@ -import React from "react"; -import Select, { StylesConfig } from "react-select"; +import React from 'react'; +import Select, { StylesConfig } from 'react-select'; import { ALL_FILTER, - filterAtoms, filters, updateFiltersAtom, -} from "@/store/pools"; -import * as chroma from "chroma.ts"; -import { useAtom, useSetAtom } from "jotai"; +} from '@/store/pools'; +import * as chroma from 'chroma.ts'; +import { useSetAtom } from 'jotai'; import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, - Container, Stack, Text, -} from "@chakra-ui/react"; -import { HamburgerIcon } from "@chakra-ui/icons"; +} from '@chakra-ui/react'; +import { HamburgerIcon } from '@chakra-ui/icons'; export interface Option { readonly value: string; @@ -31,26 +29,26 @@ export interface Option { const colourStyles: StylesConfig = { control: (styles) => ({ ...styles, - padding: "10px 0", - backgroundColor: "var(--chakra-colors-bg)", - borderColor: "var(--chakra-colors-bg)", + padding: '10px 0', + backgroundColor: 'var(--chakra-colors-bg)', + borderColor: 'var(--chakra-colors-bg)', }), option: (styles, { data, isDisabled, isFocused, isSelected }) => { const color = chroma.color(data.color); return { ...styles, - backgroundColor: "var(--chakra-colors-bg)", + backgroundColor: 'var(--chakra-colors-bg)', color: isDisabled - ? "#ccc" + ? '#ccc' : isSelected - ? chroma.contrast(color, "white") > 2 - ? "white" - : "black" + ? chroma.contrast(color, 'white') > 2 + ? 'white' + : 'black' : data.color, - cursor: isDisabled ? "not-allowed" : "default", + cursor: isDisabled ? 'not-allowed' : 'default', - ":active": { - ...styles[":active"], + ':active': { + ...styles[':active'], backgroundColor: !isDisabled ? isSelected ? data.color @@ -59,45 +57,45 @@ const colourStyles: StylesConfig = { }, }; }, - container: (styles, {}) => { + container: (styles) => { return { ...styles, - width: "100%", + width: '100%', }; }, - dropdownIndicator: (styles, {}) => { + dropdownIndicator: (styles) => { return { ...styles, - color: "var(--chakra-colors-color2)", + color: 'var(--chakra-colors-color2)', }; }, - clearIndicator: (styles, {}) => { + clearIndicator: (styles) => { return { ...styles, - color: "var(--chakra-colors-color2)", + color: 'var(--chakra-colors-color2)', }; }, - indicatorSeparator: (styles, {}) => { + indicatorSeparator: (styles) => { return { ...styles, - backgroundColor: "var(--chakra-colors-color2)", + backgroundColor: 'var(--chakra-colors-color2)', }; }, - menu: (styles, {}) => { + menu: (styles) => { return { ...styles, - backgroundColor: "var(--chakra-colors-highlight)", + backgroundColor: 'var(--chakra-colors-highlight)', }; }, multiValue: (styles, { data }) => { const color = chroma.color(data.color); return { ...styles, - fontWeight: "bold", - backgroundColor: "none", + fontWeight: 'bold', + backgroundColor: 'none', borderColor: color.alpha(0.7).css(), - borderWidth: "1px", - borderRadius: "5px", + borderWidth: '1px', + borderRadius: '5px', }; }, multiValueLabel: (styles, { data }) => ({ @@ -107,9 +105,9 @@ const colourStyles: StylesConfig = { multiValueRemove: (styles, { data }) => ({ ...styles, color: data.color, - ":hover": { + ':hover': { backgroundColor: data.color, - color: "white", + color: 'white', }, }), }; @@ -118,7 +116,7 @@ export default function Filters() { // const colors: readonly string[] = ['#00B8D9', '#407cd5', '#7967e5', '#FF5630', // '#FF8B00','#FFC400', '#36B37E', '#00875A', '#253858', '#666666'] - const colors = ["rgba(86, 118, 254, 1)", "rgb(127 73 229)"]; + const colors = ['rgba(86, 118, 254, 1)', 'rgb(127 73 229)']; const updateFilters = useSetAtom(updateFiltersAtom); const protocolOptions: readonly Option[] = filters.protocols.map( @@ -136,7 +134,7 @@ export default function Filters() { }); return ( - +

- - + + Protocols: { console.log(x, Array.isArray(x), b); updateFilters( - "categories", + 'categories', x.map((p) => p.value), ); }} /> - - + + Protocol types: