From e7fa524c6b662187b1b32c1cfd233eaf9075d472 Mon Sep 17 00:00:00 2001 From: Akira <156126180+akiraonstarknet@users.noreply.github.com> Date: Thu, 18 Apr 2024 22:05:33 +0530 Subject: [PATCH 1/5] Update README.md Add STRKFarm info --- README.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 2dc2f98..dbbfd7f 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,35 @@
- +
- # STRKFarm -STRKFarm is a tool that allows users to find best yield generating pools on Starknet. - -[![Pull Requests welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square)](https://github.com/strkfarm/starkfarm-client/issues) - -## About - -STRKFarm is a tool that allows users to find best yield generating pools on Starknet. - -### Terms to help you get familiar with codebase - - -* - -#### Achievements - -* We have integrated 10+ DeFi protocols so far and we aim to add more features to allow users to design strategies, compute estimated yields, etc. to allow them to generate returns that match their interest while educating them of the risks. - - +STRKFarm is a platform that allows users to better navigate DeFi on Starknet. It has the following features: +1. Show top yield generating pools sorted by Protocols and various Categories. 10+ Protocols are integrated. ✅ +2. Customized strategies, providing one-click investment with automated risk-management ✅ (Adding more) +3. Concentrated Liquidity Impermanent calculator 🚧 +4. One click $STRK claim for DeFi spring users 🚧 + +## Project structure +The project is build using NextJS and Typescript. Below is the broad project structure: +1. Re-usable project wide components go into `src/components`. Page specific components go into their respective folder. (e.g. `src/app/claims/components`) +2. We use [Jotai](https://jotai.org/) for state management. Atoms are written in `src/store`. E.g. `src/store/strategies.atoms.ts`. + Most re-usable data is written into atoms, outside components so that data is eaily accessible across components without dumping custom logic into components. + Its suggested to keep view components low on business logic code. +3. All protocols have a class object (e.g. `src/store/ekubo.store.ts`). Where protocol specific custom logic is written, so that its get written to respective Atoms. +4. You can use `src/store/IDapp.store.ts` to define abstract class or type definitions that can be used within protocol class objects. +5. Custom re-usable hooks are written to `src/hooks`. ## How to get started +[![Pull Requests welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square)](https://github.com/strkfarm/starkfarm-client/issues) +Requirements: +1. Node 18+ + Clone the repository ```bash git clone https://github.com/strkfarm/starkfarm-client.git @@ -58,10 +59,10 @@ You should see something like this: ## 🤝 Contribute -We're always looking for for stallions with great NextJS & Typescript skills to further this tool, to join our community and contribute to STRKFarm. Check out our [contributing guide](./docs/CONTRIBUTING.md) +We're always looking for for stallions with great NextJS & Typescript skills to further this tool, to join our community and contribute to STRKFarm. Check out our [contributing guide](./CONTRIBUTING.md) for more information on how to get started. -To connect with us regarding any queries about contributing to the repo, feel free to join our telegram group [here](https://t.me/+HQ_eHaXmF-1lZDc1) +To connect with us regarding any queries about contributing to the repo, feel free to join our telegram group [here](https://t.me/+HQ_eHaXmF-1lZDc1). Head to `dev` topic. ## References @@ -69,7 +70,6 @@ To connect with us regarding any queries about contributing to the repo, feel fr - [OnlyDust](https://app.onlydust.com/p/strkfarm) - [Website](https://www.strkfarm.xyz/) - ## Contributors ✨ Thanks goes to these wonderful people. Follow the [contributors guide]() if you'd like to take part. From d3d599bd003e7e2ef485ed127815458cae12d9fc Mon Sep 17 00:00:00 2001 From: Akira <156126180+akiraonstarknet@users.noreply.github.com> Date: Fri, 19 Apr 2024 20:18:05 +0530 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dbbfd7f..aa21cbe 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ To connect with us regarding any queries about contributing to the repo, feel fr ## Contributors ✨ -Thanks goes to these wonderful people. Follow the [contributors guide]() if you'd like to take part. +Thanks goes to these wonderful people. From 4e2b8b4c57c4b300a75b2b0aafefe2e58e9fae06 Mon Sep 17 00:00:00 2001 From: akira-zkdice Date: Fri, 19 Apr 2024 22:24:29 +0530 Subject: [PATCH 3/5] remove zone identifier --- src/app/favicon.ico:Zone.Identifier | 3 --- src/assets/tg.svg:Zone.Identifier | 0 2 files changed, 3 deletions(-) delete mode 100644 src/app/favicon.ico:Zone.Identifier delete mode 100644 src/assets/tg.svg:Zone.Identifier diff --git a/src/app/favicon.ico:Zone.Identifier b/src/app/favicon.ico:Zone.Identifier deleted file mode 100644 index 9bac4af..0000000 --- a/src/app/favicon.ico:Zone.Identifier +++ /dev/null @@ -1,3 +0,0 @@ -[ZoneTransfer] -ZoneId=3 -ReferrerUrl=G:\VT\Downloads\favicon_io.zip diff --git a/src/assets/tg.svg:Zone.Identifier b/src/assets/tg.svg:Zone.Identifier deleted file mode 100644 index e69de29..0000000 From 202b11bd6a0a4d7a94caf95cca8e028eb4498680 Mon Sep 17 00:00:00 2001 From: Hemant Date: Sat, 20 Apr 2024 15:05:21 +0530 Subject: [PATCH 4/5] 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 55a8a91..0000000 --- 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 bffb357..00025ff 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 98d76c9..07a4d77 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 3689d7a..ae701a4 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 81f38a5..c64c99f 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 6e7ad81..26cb062 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 9550fc1..674dbf3 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 410da15..20aaaf1 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 78b17f3..03b0074 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 8d5f715..f05adb1 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: