diff --git a/apps/web/src/components/SearchModal/CommonBases.tsx b/apps/web/src/components/SearchModal/CommonBases.tsx index e5486de420fd3..5321972926206 100644 --- a/apps/web/src/components/SearchModal/CommonBases.tsx +++ b/apps/web/src/components/SearchModal/CommonBases.tsx @@ -1,6 +1,7 @@ import { Currency, Token } from '@pancakeswap/sdk' import { ChainId } from '@pancakeswap/chains' -import { Text, QuestionHelper, AutoColumn, CurrencyLogo } from '@pancakeswap/uikit' +import { Text, QuestionHelper, AutoColumn } from '@pancakeswap/uikit' +import { CurrencyLogo } from '@pancakeswap/widgets-internal' import { styled } from 'styled-components' import useNativeCurrency from 'hooks/useNativeCurrency' import { useTranslation } from '@pancakeswap/localization' diff --git a/apps/web/src/components/SearchModal/CurrencyList.tsx b/apps/web/src/components/SearchModal/CurrencyList.tsx index f3a91eda0f66d..bfbd3e9d408d8 100644 --- a/apps/web/src/components/SearchModal/CurrencyList.tsx +++ b/apps/web/src/components/SearchModal/CurrencyList.tsx @@ -1,6 +1,7 @@ import { useTranslation } from '@pancakeswap/localization' import { Currency, CurrencyAmount, Token } from '@pancakeswap/sdk' -import { ArrowForwardIcon, Column, QuestionHelper, Text, CurrencyLogo } from '@pancakeswap/uikit' +import { ArrowForwardIcon, Column, QuestionHelper, Text } from '@pancakeswap/uikit' +import { CurrencyLogo } from '@pancakeswap/widgets-internal' import { formatAmount } from '@pancakeswap/utils/formatFractions' import { LightGreyCard } from 'components/Card' import { useActiveChainId } from 'hooks/useActiveChainId' diff --git a/apps/web/src/views/BuyCrypto/components/OnRampCurrencySelect/index.tsx b/apps/web/src/views/BuyCrypto/components/OnRampCurrencySelect/index.tsx index 39a0d122ac94d..15bb2a3d640b8 100644 --- a/apps/web/src/views/BuyCrypto/components/OnRampCurrencySelect/index.tsx +++ b/apps/web/src/views/BuyCrypto/components/OnRampCurrencySelect/index.tsx @@ -1,17 +1,7 @@ import { useTranslation } from '@pancakeswap/localization' import { Currency } from '@pancakeswap/sdk' -import { - ArrowDropDownIcon, - Box, - BoxProps, - Button, - CurrencyLogo, - Flex, - Skeleton, - Text, - useModal, -} from '@pancakeswap/uikit' -import { NumericalInput } from '@pancakeswap/widgets-internal' +import { ArrowDropDownIcon, Box, BoxProps, Button, Flex, Skeleton, Text, useModal } from '@pancakeswap/uikit' +import { NumericalInput, CurrencyLogo } from '@pancakeswap/widgets-internal' import { FiatLogo } from 'components/Logo/CurrencyLogo' import CurrencySearchModal, { CurrencySearchModalProps } from 'components/SearchModal/CurrencySearchModal' import { useAllOnRampTokens } from 'hooks/Tokens' diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx index 4ab2425e5a1de..6817e15005849 100644 --- a/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx +++ b/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx @@ -1,5 +1,4 @@ import { - CurrencyLogo, Text, Flex, Box, @@ -10,7 +9,7 @@ import { UnlockIcon, LockIcon, } from '@pancakeswap/uikit' -import { Pool } from '@pancakeswap/widgets-internal' +import { Pool, CurrencyLogo } from '@pancakeswap/widgets-internal' import { StyledCell } from 'views/Pools/components/PoolsTable/Cells/NameCell' import { useTranslation } from '@pancakeswap/localization' import React from 'react' diff --git a/apps/web/src/views/FixedStaking/components/ModalTitle.tsx b/apps/web/src/views/FixedStaking/components/ModalTitle.tsx index 3b02b526ed787..1729995348016 100644 --- a/apps/web/src/views/FixedStaking/components/ModalTitle.tsx +++ b/apps/web/src/views/FixedStaking/components/ModalTitle.tsx @@ -1,4 +1,5 @@ -import { CurrencyLogo, Flex, Heading } from '@pancakeswap/uikit' +import { Flex, Heading } from '@pancakeswap/uikit' +import { CurrencyLogo } from '@pancakeswap/widgets-internal' import { Token } from '@pancakeswap/sdk' import { useTranslation } from '@pancakeswap/localization' import { UnlockedFixedTag } from './UnlockedFixedTag' diff --git a/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx b/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx index dce1a038eca17..ea025b05b378f 100644 --- a/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx +++ b/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx @@ -9,9 +9,9 @@ import { useTooltip, AutoColumn, UseModalV2Props, - CurrencyLogo, AtomBox, } from '@pancakeswap/uikit' +import { CurrencyLogo } from '@pancakeswap/widgets-internal' import { Currency } from '@pancakeswap/sdk' import { useMemo, memo } from 'react' diff --git a/apps/web/src/views/Swap/components/HotTokenList/SwapTokenTable.tsx b/apps/web/src/views/Swap/components/HotTokenList/SwapTokenTable.tsx index 0a9a04cce4a50..c82b872f9901e 100644 --- a/apps/web/src/views/Swap/components/HotTokenList/SwapTokenTable.tsx +++ b/apps/web/src/views/Swap/components/HotTokenList/SwapTokenTable.tsx @@ -5,7 +5,6 @@ import { ArrowForwardIcon, Box, Button, - CurrencyLogo, Flex, MoreIcon, NextLinkFromReactRouter, @@ -14,6 +13,7 @@ import { Text, useMatchBreakpoints, } from '@pancakeswap/uikit' +import { CurrencyLogo } from '@pancakeswap/widgets-internal' import { useActiveChainId } from 'hooks/useActiveChainId' import useTheme from 'hooks/useTheme' import orderBy from 'lodash/orderBy' diff --git a/packages/uikit/package.json b/packages/uikit/package.json index 834ca346327db..8c0e0d024c1d6 100644 --- a/packages/uikit/package.json +++ b/packages/uikit/package.json @@ -30,7 +30,7 @@ "types": "./dist/css/responsiveStyle.d.ts" } }, - "repository": "https://github.com/pancakeswap/pancake-toolkit/tree/master/packages/pancake-uikit", + "repository": "https://github.com/pancakeswap/pancake-frontend/tree/develop/packages/uikit", "license": "MIT", "private": true, "scripts": { @@ -44,7 +44,7 @@ "build:storybook": "storybook build", "test": "vitest --run", "update:snapshot": "vitest -u", - "prepublishOnly": "pnpm run pkg:build", + "prepublishOnly": "pnpm run build:uikit", "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" }, "devDependencies": { @@ -52,15 +52,11 @@ "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@pancakeswap/hooks": "workspace:*", - "@pancakeswap/sdk": "workspace:*", - "@pancakeswap/swap-sdk-core": "workspace:*", "@pancakeswap/utils": "workspace:*", - "@pancakeswap/v3-sdk": "workspace:*", "@pancakeswap/chains": "workspace:*", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-typescript": "^8.2.1", "@rollup/plugin-url": "^6.0.0", - "@sentry/nextjs": "^7.0.0", "@storybook/addon-a11y": "^7.0.7", "@storybook/addon-actions": "^7.0.7", "@storybook/addon-essentials": "^7.0.7", @@ -108,7 +104,6 @@ "styled-components": "^6.0.7", "themeprovider-storybook": "^1.7.2", "ts-jest": "^27.1.3", - "viem": "^1.10.9", "vite": "^4.3.1", "vite-plugin-dts": "^3.5.3", "vite-tsconfig-paths": "^4.0.3", @@ -116,7 +111,6 @@ "wagmi": "^1.3.10" }, "peerDependencies": { - "@sentry/nextjs": "^7.0.0", "js-cookie": "*", "next": "*", "next-seo": "*", @@ -127,16 +121,11 @@ "react-redux": "^8.0.5", "react-transition-group": "*", "remark-gfm": "*", - "styled-components": "^6.0.7", - "viem": "^1.2.9" + "styled-components": "^6.0.7" }, "dependencies": { - "@pancakeswap/farms": "workspace:*", "@pancakeswap/hooks": "workspace:*", "@pancakeswap/localization": "workspace:*", - "@pancakeswap/sdk": "workspace:*", - "@pancakeswap/swap-sdk-core": "workspace:*", - "@pancakeswap/v3-sdk": "workspace:*", "@popperjs/core": "^2.9.2", "@radix-ui/react-dismissable-layer": "^1.0.3", "@radix-ui/react-slot": "^1.0.0", diff --git a/packages/uikit/src/components/CurrencyInput/index.stories.tsx b/packages/uikit/src/components/CurrencyInput/index.stories.tsx deleted file mode 100644 index b0149631b8a16..0000000000000 --- a/packages/uikit/src/components/CurrencyInput/index.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState } from "react"; -/* eslint-disable import/no-unresolved */ -import { Meta } from "@storybook/react/types-6-0"; -import { CurrencyAmount } from "@pancakeswap/sdk"; - -import { CurrencyInput } from "./index"; -import { cakeToken } from "../../shared"; - -export default { - title: "Components/CurrencyInput", - component: CurrencyInput, - argTypes: {}, -} as Meta; - -export const Default: React.FC = () => { - const [value, setValue] = useState("1.0"); - - const balance = CurrencyAmount.fromRawAmount(cakeToken, "10000000000000000000"); - const balanceText = `Balances: ${balance.toSignificant(6)}`; - - return ( -
- -
- ); -}; diff --git a/packages/uikit/src/components/CurrencyInput/index.tsx b/packages/uikit/src/components/CurrencyInput/index.tsx deleted file mode 100644 index 160cdd155687a..0000000000000 --- a/packages/uikit/src/components/CurrencyInput/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useMemo, useCallback, ReactNode, MouseEvent } from "react"; -import { Currency, CurrencyAmount } from "@pancakeswap/sdk"; -import { CurrencyLogo } from "../CurrencyLogo"; -import { BalanceInput } from "../BalanceInput"; -import { Flex } from "../Box"; -import { Text } from "../Text"; -import { Button } from "../Button"; - -interface Props { - value: string | number; - onChange: (val: string) => void; - currency?: Currency; - balance?: CurrencyAmount; - balanceText?: ReactNode; - maxText?: ReactNode; -} - -export function CurrencyInput({ currency, balance, value, onChange, balanceText, maxText = "Max" }: Props) { - const isMax = useMemo(() => balance && value && balance.toExact() === value, [balance, value]); - const onMaxClick = useCallback( - (e: MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - onChange?.(balance?.toExact() || ""); - }, - [onChange, balance] - ); - - const currencyDisplay = currency ? ( - - - - {currency.symbol} - - - ) : null; - - const balanceDisplay = balance ? ( - - - {balanceText} - - - - ) : null; - - return ( - - ); -} diff --git a/packages/uikit/src/components/index.ts b/packages/uikit/src/components/index.ts index 7e085738b02da..bbd42c88d4952 100644 --- a/packages/uikit/src/components/index.ts +++ b/packages/uikit/src/components/index.ts @@ -63,8 +63,6 @@ export * from "./SeverityErrorText"; export * from "./ReleasedChart"; export * from "./BunnyKnownPlaceholder"; export * from "./DropdownMenu"; -export * from "./CurrencyInput"; -export * from "./CurrencyLogo"; export * from "./DynamicSection"; export * from "./Chart"; diff --git a/packages/uikit/src/shared.ts b/packages/uikit/src/shared.ts deleted file mode 100644 index 9bee7ac1148d6..0000000000000 --- a/packages/uikit/src/shared.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ERC20Token } from "@pancakeswap/sdk"; -import { ChainId } from "@pancakeswap/chains"; - -// For StoryBook -export const cakeToken = new ERC20Token( - ChainId.BSC, - "0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82", - 18, - "CAKE", - "PancakeSwap Token", - "https://pancakeswap.finance/" -); - -export const bscToken = new ERC20Token( - ChainId.BSC, - "0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c", - 18, - "BNB", - "BNB", - "https://www.binance.com/" -); diff --git a/packages/uikit/src/widgets/Modal/ModalInput.tsx b/packages/uikit/src/widgets/Modal/ModalInput.tsx index f7623a1dcb312..2e3436077fd75 100644 --- a/packages/uikit/src/widgets/Modal/ModalInput.tsx +++ b/packages/uikit/src/widgets/Modal/ModalInput.tsx @@ -2,8 +2,7 @@ import BigNumber from "bignumber.js"; import { useMemo } from "react"; import { styled } from "styled-components"; import { useTranslation } from "@pancakeswap/localization"; -import { parseUnits } from "viem"; -import { formatBigInt } from "@pancakeswap/utils/formatBalance"; +import { displayBalance } from "@pancakeswap/utils/displayBalance"; import { trimTrailZero } from "@pancakeswap/utils/trimTrailZero"; import { Flex } from "../../components/Box"; import { Text } from "../../components/Text"; @@ -80,15 +79,6 @@ const ModalInput: React.FC> = ({ const { t } = useTranslation(); const isBalanceZero = max === "0" || !max; - const displayBalance = (balance: `${number}`) => { - if (isBalanceZero) { - return "0"; - } - - const balanceUnits = parseUnits(balance, decimals); - return formatBigInt(balanceUnits, decimals, decimals); - }; - const percentAmount = useMemo( () => ({ 25: maxAmount ? trimTrailZero(maxAmount.dividedBy(100).multipliedBy(25).toNumber().toFixed(decimals)) : undefined, @@ -105,7 +95,15 @@ const ModalInput: React.FC> = ({ {inputTitle} - {t("Balance: %balance%", { balance: displayBalance(max as `${number}`) })} + + {t("Balance: %balance%", { + balance: displayBalance({ + balance: max as `${number}`, + decimals, + isBalanceZero, + }), + })} + { + if (isBalanceZero) { + return '0' + } + + const balanceUnits = parseUnits(balance, decimals) + return formatBigInt(balanceUnits, decimals, decimals) +} diff --git a/packages/utils/formatBalance.ts b/packages/utils/formatBalance.ts index 084698281e996..ff9ce894eb2f2 100644 --- a/packages/utils/formatBalance.ts +++ b/packages/utils/formatBalance.ts @@ -1,8 +1,8 @@ import BigNumber from 'bignumber.js' -import { formatUnits } from 'viem' import { getLanguageCodeFromLS } from '@pancakeswap/localization' import _trimEnd from 'lodash/trimEnd' import { getFullDecimalMultiplier } from './getFullDecimalMultiplier' +import { formatUnits } from './viem/formatUnits' /** * Take a formatted amount, e.g. 15 BNB and convert it to full decimal value, e.g. 15000000000000000 diff --git a/packages/utils/package.json b/packages/utils/package.json index 62b282f31c54e..1bf9ce493fc88 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -9,8 +9,7 @@ "@pancakeswap/localization": "workspace:*", "date-fns": "^2.29.3", "lodash": "^4.17.21", - "styled-components": "^6.0.7", - "viem": "^1.10.9" + "styled-components": "^6.0.7" }, "devDependencies": { "@pancakeswap/swap-sdk-core": "workspace:*", @@ -19,7 +18,6 @@ "jotai": "^2.2.2", "styled-components": "^6.0.7", "swr": "^2.1.3", - "viem": "^1.10.9", "vitest": "^0.30.1" }, "peerDependenciesMeta": { diff --git a/packages/utils/tryParseAmount.ts b/packages/utils/tryParseAmount.ts index 3dc3a68731ae0..5b459a52f0c8d 100644 --- a/packages/utils/tryParseAmount.ts +++ b/packages/utils/tryParseAmount.ts @@ -1,5 +1,5 @@ -import { parseUnits } from 'viem' import { Currency, CurrencyAmount } from '@pancakeswap/swap-sdk-core' +import { parseUnits } from './viem/parseUnits' // try to parse a user entered amount for a given token function tryParseAmount(value?: string, currency?: T): CurrencyAmount | undefined { diff --git a/packages/utils/viem/formatUnits.ts b/packages/utils/viem/formatUnits.ts new file mode 100644 index 0000000000000..c395dbfb49255 --- /dev/null +++ b/packages/utils/viem/formatUnits.ts @@ -0,0 +1,15 @@ +// Copy from viem package to avoid unneessary dependency +export function formatUnits(value: bigint, decimals: number) { + let display = value.toString() + + const negative = display.startsWith('-') + if (negative) display = display.slice(1) + + display = display.padStart(decimals, '0') + + let [integer, fraction] = [display.slice(0, display.length - decimals), display.slice(display.length - decimals)] + fraction = fraction.replace(/(0+)$/, '') + integer = integer || '0' + + return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}` +} diff --git a/packages/utils/viem/parseUnits.ts b/packages/utils/viem/parseUnits.ts new file mode 100644 index 0000000000000..2fc7ee01d6104 --- /dev/null +++ b/packages/utils/viem/parseUnits.ts @@ -0,0 +1,37 @@ +// Copy from viem package to avoid unneessary dependency +export function parseUnits(value: string, decimals: number) { + let [integer, fraction = '0'] = value.split('.') + + const negative = integer.startsWith('-') + if (negative) integer = integer.slice(1) + + // trim leading zeros. + fraction = fraction.replace(/(0+)$/, '') + + // round off if the fraction is larger than the number of decimals. + if (decimals === 0) { + if (Math.round(Number(`.${fraction}`)) === 1) integer = `${BigInt(integer) + 1n}` + fraction = '' + } else if (fraction.length > decimals) { + const [left, unit, right] = [ + fraction.slice(0, decimals - 1), + fraction.slice(decimals - 1, decimals), + fraction.slice(decimals), + ] + + const rounded = Math.round(Number(`${unit}.${right}`)) + if (rounded > 9) fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, '0') + else fraction = `${left}${rounded}` + + if (fraction.length > decimals) { + fraction = fraction.slice(1) + integer = `${BigInt(integer) + 1n}` + } + + fraction = fraction.slice(0, decimals) + } else { + fraction = fraction.padEnd(decimals, '0') + } + + return BigInt(`${negative ? '-' : ''}${integer}${fraction}`) +} diff --git a/packages/widgets-internal/.prettierrc b/packages/widgets-internal/.prettierrc new file mode 100644 index 0000000000000..b8fdf2ce8dc3c --- /dev/null +++ b/packages/widgets-internal/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": true, + "printWidth": 120 +} \ No newline at end of file diff --git a/packages/uikit/src/components/CurrencyLogo/CurrencyLogo.tsx b/packages/widgets-internal/components/CurrencyLogo/CurrencyLogo.tsx similarity index 94% rename from packages/uikit/src/components/CurrencyLogo/CurrencyLogo.tsx rename to packages/widgets-internal/components/CurrencyLogo/CurrencyLogo.tsx index 2569becebba67..0e1d6a845c9ca 100644 --- a/packages/uikit/src/components/CurrencyLogo/CurrencyLogo.tsx +++ b/packages/widgets-internal/components/CurrencyLogo/CurrencyLogo.tsx @@ -3,9 +3,8 @@ import { ChainId } from "@pancakeswap/chains"; import { useMemo } from "react"; import { styled } from "styled-components"; import { useHttpLocations } from "@pancakeswap/hooks"; +import { TokenLogo, BinanceIcon } from "@pancakeswap/uikit"; -import { TokenLogo } from "../TokenLogo"; -import { BinanceIcon } from "../Svg"; import { getCurrencyLogoUrls } from "./utils"; const StyledLogo = styled(TokenLogo)<{ size: string }>` diff --git a/packages/uikit/src/components/CurrencyLogo/DoubleCurrencyLogo.tsx b/packages/widgets-internal/components/CurrencyLogo/DoubleCurrencyLogo.tsx similarity index 100% rename from packages/uikit/src/components/CurrencyLogo/DoubleCurrencyLogo.tsx rename to packages/widgets-internal/components/CurrencyLogo/DoubleCurrencyLogo.tsx diff --git a/packages/uikit/src/components/CurrencyLogo/constants.ts b/packages/widgets-internal/components/CurrencyLogo/constants.ts similarity index 100% rename from packages/uikit/src/components/CurrencyLogo/constants.ts rename to packages/widgets-internal/components/CurrencyLogo/constants.ts diff --git a/packages/uikit/src/components/CurrencyLogo/index.stories.tsx b/packages/widgets-internal/components/CurrencyLogo/index.stories.tsx similarity index 90% rename from packages/uikit/src/components/CurrencyLogo/index.stories.tsx rename to packages/widgets-internal/components/CurrencyLogo/index.stories.tsx index f84eeb6474835..de13bfd2fd6aa 100644 --- a/packages/uikit/src/components/CurrencyLogo/index.stories.tsx +++ b/packages/widgets-internal/components/CurrencyLogo/index.stories.tsx @@ -1,9 +1,9 @@ import React from "react"; /* eslint-disable import/no-unresolved */ import { Meta } from "@storybook/react/types-6-0"; -import { bscToken, cakeToken } from "../../shared"; import { CurrencyLogo } from "./index"; +import { cakeToken, bscToken } from "../../mockData"; export default { title: "Components/CurrencyLogo", diff --git a/packages/uikit/src/components/CurrencyLogo/index.tsx b/packages/widgets-internal/components/CurrencyLogo/index.tsx similarity index 100% rename from packages/uikit/src/components/CurrencyLogo/index.tsx rename to packages/widgets-internal/components/CurrencyLogo/index.tsx diff --git a/packages/uikit/src/components/CurrencyLogo/utils.ts b/packages/widgets-internal/components/CurrencyLogo/utils.ts similarity index 100% rename from packages/uikit/src/components/CurrencyLogo/utils.ts rename to packages/widgets-internal/components/CurrencyLogo/utils.ts diff --git a/packages/widgets-internal/farm/FarmWidget.tsx b/packages/widgets-internal/farm/FarmWidget.tsx index c0c3a5dea2756..01776a0edba6b 100644 --- a/packages/widgets-internal/farm/FarmWidget.tsx +++ b/packages/widgets-internal/farm/FarmWidget.tsx @@ -1,13 +1,13 @@ -import { FarmTabButtons } from './components/FarmTabButtons' -import { FarmApyButton } from './components/FarmApyButton' -import Tags from './components/Tags' -import FarmCard from './components/FarmCard' -import StakedLP from './components/StakedLP' -import DepositModal from './components/DepositModal' -import WithdrawModal from './components/WithdrawModal' -import FarmTable from './components/FarmTable' -import * as FarmV3Table from './components/FarmV3Table' -import * as FarmV3Card from './components/FarmV3Card' +import { FarmTabButtons } from "./components/FarmTabButtons"; +import { FarmApyButton } from "./components/FarmApyButton"; +import Tags from "./components/Tags"; +import FarmCard from "./components/FarmCard"; +import StakedLP from "./components/StakedLP"; +import DepositModal from "./components/DepositModal"; +import WithdrawModal from "./components/WithdrawModal"; +import FarmTable from "./components/FarmTable"; +import * as FarmV3Table from "./components/FarmV3Table"; +import * as FarmV3Card from "./components/FarmV3Card"; export { FarmTabButtons, @@ -20,4 +20,4 @@ export { FarmTable, FarmV3Table, FarmV3Card, -} +}; diff --git a/packages/widgets-internal/farm/components/DepositModal/index.tsx b/packages/widgets-internal/farm/components/DepositModal/index.tsx index 426f4d63c1965..83f654792b6cd 100644 --- a/packages/widgets-internal/farm/components/DepositModal/index.tsx +++ b/packages/widgets-internal/farm/components/DepositModal/index.tsx @@ -1,11 +1,11 @@ -import BigNumber from 'bignumber.js' -import { useCallback, useMemo, useState } from 'react' -import { styled } from 'styled-components' -import _toNumber from 'lodash/toNumber' -import { useTranslation } from '@pancakeswap/localization' -import { getFullDisplayBalance, formatNumber, getDecimalAmount } from '@pancakeswap/utils/formatBalance' -import { getInterestBreakdown } from '@pancakeswap/utils/compoundApyHelpers' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' +import BigNumber from "bignumber.js"; +import { useCallback, useMemo, useState } from "react"; +import { styled } from "styled-components"; +import _toNumber from "lodash/toNumber"; +import { useTranslation } from "@pancakeswap/localization"; +import { getFullDisplayBalance, formatNumber, getDecimalAmount } from "@pancakeswap/utils/formatBalance"; +import { getInterestBreakdown } from "@pancakeswap/utils/compoundApyHelpers"; +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; import { Modal, ModalV2, @@ -25,12 +25,12 @@ import { ErrorIcon, CalculateIcon, RoiCalculatorModal, -} from '@pancakeswap/uikit' -import { trimTrailZero } from '@pancakeswap/utils/trimTrailZero' +} from "@pancakeswap/uikit"; +import { trimTrailZero } from "@pancakeswap/utils/trimTrailZero"; const AnnualRoiContainer = styled(Flex)` cursor: pointer; -` +`; const AnnualRoiDisplay = styled(Text)` width: 72px; @@ -38,46 +38,46 @@ const AnnualRoiDisplay = styled(Text)` overflow: hidden; text-align: right; text-overflow: ellipsis; -` +`; interface DepositModalProps { - account: string - pid: number - max: BigNumber - stakedBalance: BigNumber - multiplier?: string - lpPrice?: BigNumber - lpLabel?: string - tokenName?: string - apr?: number - displayApr?: string - addLiquidityUrl?: string - cakePrice?: BigNumber - showActiveBooster?: boolean - lpTotalSupply: BigNumber - bCakeMultiplier?: number | null - showCrossChainFarmWarning?: boolean - crossChainWarningText?: string - decimals: number - allowance?: BigNumber - enablePendingTx?: boolean - onDismiss?: () => void - onConfirm: (amount: string) => void - handleApprove?: () => void - bCakeCalculatorSlot?: (stakingTokenBalance: string) => React.ReactNode + account: string; + pid: number; + max: BigNumber; + stakedBalance: BigNumber; + multiplier?: string; + lpPrice?: BigNumber; + lpLabel?: string; + tokenName?: string; + apr?: number; + displayApr?: string; + addLiquidityUrl?: string; + cakePrice?: BigNumber; + showActiveBooster?: boolean; + lpTotalSupply: BigNumber; + bCakeMultiplier?: number | null; + showCrossChainFarmWarning?: boolean; + crossChainWarningText?: string; + decimals: number; + allowance?: BigNumber; + enablePendingTx?: boolean; + onDismiss?: () => void; + onConfirm: (amount: string) => void; + handleApprove?: () => void; + bCakeCalculatorSlot?: (stakingTokenBalance: string) => React.ReactNode; } const DepositModal: React.FC> = ({ account, max, stakedBalance, - tokenName = '', + tokenName = "", multiplier, displayApr, lpPrice = BIG_ZERO, - lpLabel = '', + lpLabel = "", apr = 0, - addLiquidityUrl = '', + addLiquidityUrl = "", cakePrice = BIG_ZERO, showActiveBooster, bCakeMultiplier, @@ -91,27 +91,27 @@ const DepositModal: React.FC> = ({ handleApprove, bCakeCalculatorSlot, }) => { - const [val, setVal] = useState('') - const [valUSDPrice, setValUSDPrice] = useState(BIG_ZERO) - const [pendingTx, setPendingTx] = useState(false) - const [showRoiCalculator, setShowRoiCalculator] = useState(false) - const { t } = useTranslation() + const [val, setVal] = useState(""); + const [valUSDPrice, setValUSDPrice] = useState(BIG_ZERO); + const [pendingTx, setPendingTx] = useState(false); + const [showRoiCalculator, setShowRoiCalculator] = useState(false); + const { t } = useTranslation(); const fullBalance = useMemo(() => { - return getFullDisplayBalance(max, decimals) - }, [max, decimals]) + return getFullDisplayBalance(max, decimals); + }, [max, decimals]); const needEnable = useMemo(() => { if (allowance) { - const amount = getDecimalAmount(new BigNumber(val), decimals) - return amount.gt(allowance) + const amount = getDecimalAmount(new BigNumber(val), decimals); + return amount.gt(allowance); } - return false - }, [allowance, decimals, val]) + return false; + }, [allowance, decimals, val]); - const lpTokensToStake = useMemo(() => new BigNumber(val), [val]) - const fullBalanceNumber = useMemo(() => new BigNumber(fullBalance), [fullBalance]) + const lpTokensToStake = useMemo(() => new BigNumber(val), [val]); + const fullBalanceNumber = useMemo(() => new BigNumber(fullBalance), [fullBalance]); - const usdToStake = useMemo(() => lpTokensToStake.times(lpPrice), [lpTokensToStake, lpPrice]) + const usdToStake = useMemo(() => lpTokensToStake.times(lpPrice), [lpTokensToStake, lpPrice]); const interestBreakdown = useMemo( () => @@ -120,54 +120,54 @@ const DepositModal: React.FC> = ({ apr, earningTokenPrice: cakePrice.toNumber(), }), - [lpTokensToStake, usdToStake, cakePrice, apr], - ) + [lpTokensToStake, usdToStake, cakePrice, apr] + ); - const annualRoi = useMemo(() => cakePrice.times(interestBreakdown[3]), [cakePrice, interestBreakdown]) - const annualRoiAsNumber = useMemo(() => annualRoi.toNumber(), [annualRoi]) + const annualRoi = useMemo(() => cakePrice.times(interestBreakdown[3]), [cakePrice, interestBreakdown]); + const annualRoiAsNumber = useMemo(() => annualRoi.toNumber(), [annualRoi]); const formattedAnnualRoi = useMemo( () => formatNumber(annualRoiAsNumber, annualRoi.gt(10000) ? 0 : 2, annualRoi.gt(10000) ? 0 : 2), - [annualRoiAsNumber, annualRoi], - ) + [annualRoiAsNumber, annualRoi] + ); const handleChange = useCallback( (e: React.FormEvent) => { if (e.currentTarget.validity.valid) { - const inputVal = e.currentTarget.value.replace(/,/g, '.') - setVal(inputVal) + const inputVal = e.currentTarget.value.replace(/,/g, "."); + setVal(inputVal); - const USDPrice = inputVal === '' ? BIG_ZERO : new BigNumber(inputVal).times(lpPrice) - setValUSDPrice(USDPrice) + const USDPrice = inputVal === "" ? BIG_ZERO : new BigNumber(inputVal).times(lpPrice); + setValUSDPrice(USDPrice); } }, - [setVal, setValUSDPrice, lpPrice], - ) + [setVal, setValUSDPrice, lpPrice] + ); const handleSelectMax = useCallback(() => { - setVal(fullBalance) + setVal(fullBalance); - const USDPrice = new BigNumber(fullBalance).times(lpPrice) - setValUSDPrice(USDPrice) - }, [fullBalance, setVal, setValUSDPrice, lpPrice]) + const USDPrice = new BigNumber(fullBalance).times(lpPrice); + setValUSDPrice(USDPrice); + }, [fullBalance, setVal, setValUSDPrice, lpPrice]); const handlePercentInput = useCallback( (percent: number) => { - const totalAmount = fullBalanceNumber.dividedBy(100).multipliedBy(percent) - const amount = trimTrailZero(totalAmount.toNumber().toFixed(decimals)) - setVal(amount as string) + const totalAmount = fullBalanceNumber.dividedBy(100).multipliedBy(percent); + const amount = trimTrailZero(totalAmount.toNumber().toFixed(decimals)); + setVal(amount as string); - const USDPrice = totalAmount.times(lpPrice) - setValUSDPrice(USDPrice) + const USDPrice = totalAmount.times(lpPrice); + setValUSDPrice(USDPrice); }, - [fullBalanceNumber, decimals, lpPrice], - ) + [fullBalanceNumber, decimals, lpPrice] + ); if (showRoiCalculator) { return ( > = ({ bCakeCalculatorSlot={bCakeCalculatorSlot} /> - ) + ); } return ( - - + + > = ({ maxAmount={fullBalanceNumber} symbol={tokenName} addLiquidityUrl={addLiquidityUrl} - inputTitle={t('Stake')} + inputTitle={t("Stake")} decimals={decimals} needEnable={needEnable} /> {showActiveBooster ? ( } mt="32px"> - {t('The yield booster multiplier will be updated based on the latest staking conditions.')} + {t("The yield booster multiplier will be updated based on the latest staking conditions.")} ) : null} - {t('Annual ROI at current rates')}: + {t("Annual ROI at current rates")}: {Number.isFinite(annualRoiAsNumber) ? ( { - setShowRoiCalculator(true) + setShowRoiCalculator(true); }} > ${formattedAnnualRoi} @@ -239,7 +239,7 @@ const DepositModal: React.FC> = ({ )} {needEnable ? ( ) : pendingTx ? ( ) : ( )} - - {t('Add %symbol%', { symbol: tokenName })} + + {t("Add %symbol%", { symbol: tokenName })} - ) -} + ); +}; -export default DepositModal +export default DepositModal; diff --git a/packages/widgets-internal/farm/components/FarmApyButton/index.tsx b/packages/widgets-internal/farm/components/FarmApyButton/index.tsx index 7b07a330d408a..a79a278043c46 100644 --- a/packages/widgets-internal/farm/components/FarmApyButton/index.tsx +++ b/packages/widgets-internal/farm/components/FarmApyButton/index.tsx @@ -1,19 +1,19 @@ -import { useCallback } from 'react' -import { styled } from 'styled-components' -import { Flex, CalculateIcon, IconButton } from '@pancakeswap/uikit' +import { useCallback } from "react"; +import { styled } from "styled-components"; +import { Flex, CalculateIcon, IconButton } from "@pancakeswap/uikit"; const ApyLabelContainer = styled(Flex)` cursor: pointer; &:hover { opacity: 0.5; } -` +`; interface FarmApyButtonProps { - hideButton?: boolean - strikethrough?: boolean - variant: 'text' | 'text-and-button' - handleClickButton: (event: React.MouseEvent) => void + hideButton?: boolean; + strikethrough?: boolean; + variant: "text" | "text-and-button"; + handleClickButton: (event: React.MouseEvent) => void; } export const FarmApyButton: React.FC> = ({ @@ -25,26 +25,26 @@ export const FarmApyButton: React.FC }) => { const handleClick = useCallback( (event: React.MouseEvent) => { - if (hideButton) return - handleClickButton(event) + if (hideButton) return; + handleClickButton(event); }, - [hideButton, handleClickButton], - ) + [hideButton, handleClickButton] + ); return ( {children} - {variant === 'text-and-button' && ( - + {variant === "text-and-button" && ( + )} - ) -} + ); +}; diff --git a/packages/widgets-internal/farm/components/FarmCard/DetailsSection.tsx b/packages/widgets-internal/farm/components/FarmCard/DetailsSection.tsx index c852027e569ff..4e303d362fd2a 100644 --- a/packages/widgets-internal/farm/components/FarmCard/DetailsSection.tsx +++ b/packages/widgets-internal/farm/components/FarmCard/DetailsSection.tsx @@ -1,6 +1,6 @@ -import { ReactElement } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { styled } from 'styled-components' +import { ReactElement } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { styled } from "styled-components"; import { Flex, LinkExternal, @@ -10,43 +10,43 @@ import { HelpIcon, useTooltip, FarmMultiplierInfo, -} from '@pancakeswap/uikit' -import { ChainId } from '@pancakeswap/chains' +} from "@pancakeswap/uikit"; +import { ChainId } from "@pancakeswap/chains"; export interface ExpandableSectionProps { - scanAddress?: { link: string; chainId?: number; icon?: ReactElement } - infoAddress?: string - removed?: boolean - totalValueFormatted?: string - lpLabel: string - onAddLiquidity?: (() => void) | string - isCommunity?: boolean - auctionHostingEndDate?: string - alignLinksToRight?: boolean - totalValueLabel?: string - multiplier?: string - farmCakePerSecond?: string - totalMultipliers?: string + scanAddress?: { link: string; chainId?: number; icon?: ReactElement }; + infoAddress?: string; + removed?: boolean; + totalValueFormatted?: string; + lpLabel: string; + onAddLiquidity?: (() => void) | string; + isCommunity?: boolean; + auctionHostingEndDate?: string; + alignLinksToRight?: boolean; + totalValueLabel?: string; + multiplier?: string; + farmCakePerSecond?: string; + totalMultipliers?: string; } const Wrapper = styled.div` margin-top: 24px; -` +`; const StyledLinkExternal = styled(LinkExternal)` font-weight: 400; -` +`; const StyledScanLink = styled(ScanLink)` font-weight: 400; -` +`; const StyledText = styled(Text)` &:hover { text-decoration: underline; cursor: pointer; } -` +`; export const DetailsSection: React.FC> = ({ scanAddress, @@ -66,37 +66,37 @@ export const DetailsSection: React.FC {isCommunity && auctionHostingEndDate && ( - {t('Auction Hosting Ends')}: + {t("Auction Hosting Ends")}: {new Date(auctionHostingEndDate).toLocaleString(locale, { - month: 'short', - day: 'numeric', - year: 'numeric', + month: "short", + day: "numeric", + year: "numeric", })} )} - {totalValueLabel || t('Staked Liquidity')}: + {totalValueLabel || t("Staked Liquidity")}: {totalValueFormatted ? {totalValueFormatted} : } - {t('Multiplier')}: + {t("Multiplier")}: {multiplier ? ( {multiplier} @@ -110,25 +110,25 @@ export const DetailsSection: React.FC {!removed && ( - + {onAddLiquidity ? ( - typeof onAddLiquidity === 'string' ? ( - {t('Add %symbol%', { symbol: lpLabel })} + typeof onAddLiquidity === "string" ? ( + {t("Add %symbol%", { symbol: lpLabel })} ) : ( - {t('Add %symbol%', { symbol: lpLabel })} + {t("Add %symbol%", { symbol: lpLabel })} ) ) : null} )} {infoAddress && ( - - {t('See Pair Info')} + + {t("See Pair Info")} )} {scanAddress && ( - + - {t('View Contract')} + {t("View Contract")} )} - ) -} + ); +}; diff --git a/packages/widgets-internal/farm/components/FarmCard/index.tsx b/packages/widgets-internal/farm/components/FarmCard/index.tsx index b29c6812652cd..4b4b3e6263c1d 100644 --- a/packages/widgets-internal/farm/components/FarmCard/index.tsx +++ b/packages/widgets-internal/farm/components/FarmCard/index.tsx @@ -1,7 +1,7 @@ -import { DetailsSection } from './DetailsSection' +import { DetailsSection } from "./DetailsSection"; const FarmCard = { DetailsSection, -} +}; -export default FarmCard +export default FarmCard; diff --git a/packages/widgets-internal/farm/components/FarmTabButtons.tsx b/packages/widgets-internal/farm/components/FarmTabButtons.tsx index 9cd84967ea119..77672656aa867 100644 --- a/packages/widgets-internal/farm/components/FarmTabButtons.tsx +++ b/packages/widgets-internal/farm/components/FarmTabButtons.tsx @@ -1,8 +1,8 @@ -import React from 'react' -import { styled } from 'styled-components' -import { useRouter } from 'next/router' -import { useTranslation } from '@pancakeswap/localization' -import { NextLinkFromReactRouter, NotificationDot, ButtonMenu, ButtonMenuItem, Text, Flex } from '@pancakeswap/uikit' +import React from "react"; +import { styled } from "styled-components"; +import { useRouter } from "next/router"; +import { useTranslation } from "@pancakeswap/localization"; +import { NextLinkFromReactRouter, NotificationDot, ButtonMenu, ButtonMenuItem, Text, Flex } from "@pancakeswap/uikit"; const Wrapper = styled.div` display: flex; @@ -12,52 +12,52 @@ const Wrapper = styled.div` ${({ theme }) => theme.mediaQueries.sm} { margin-left: 16px; } -` +`; interface FarmTabButtonsProps { - hasStakeInFinishedFarms: boolean + hasStakeInFinishedFarms: boolean; } export const FarmTabButtons: React.FC> = ({ hasStakeInFinishedFarms }) => { - const router = useRouter() - const { t } = useTranslation() + const router = useRouter(); + const { t } = useTranslation(); - let activeIndex + let activeIndex; switch (router.pathname) { - case '/farms': - activeIndex = 0 - break - case '/farms/history': - activeIndex = 1 - break - case '/_mp/farms/history': - activeIndex = 1 - break - case '/farms/archived': - activeIndex = 2 - break + case "/farms": + activeIndex = 0; + break; + case "/farms/history": + activeIndex = 1; + break; + case "/_mp/farms/history": + activeIndex = 1; + break; + case "/farms/archived": + activeIndex = 2; + break; default: - activeIndex = 0 - break + activeIndex = 0; + break; } return ( - {t('Filter by')} + {t("Filter by")} - {t('Live')} + {t("Live")} - {t('Finished')} + {t("Finished")} - ) -} + ); +}; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/AccountNotConnect.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/AccountNotConnect.tsx index 5fd73ee852803..633705a4c647a 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/AccountNotConnect.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/AccountNotConnect.tsx @@ -1,20 +1,20 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Text } from '@pancakeswap/uikit' -import { ActionContent, ActionTitles, StyledActionContainer } from './styles' +import { useTranslation } from "@pancakeswap/localization"; +import { Text } from "@pancakeswap/uikit"; +import { ActionContent, ActionTitles, StyledActionContainer } from "./styles"; const AccountNotConnect = ({ children }: { children: React.ReactNode }) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Start Farming')} + {t("Start Farming")} {children} - ) -} + ); +}; -export default AccountNotConnect +export default AccountNotConnect; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/EnableStakeAction.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/EnableStakeAction.tsx index 0557fa316d07b..cbf35e3e34b0b 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/EnableStakeAction.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/EnableStakeAction.tsx @@ -1,32 +1,32 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Text, Button } from '@pancakeswap/uikit' -import { StyledActionContainer, ActionContent, ActionTitles } from './styles' +import { useTranslation } from "@pancakeswap/localization"; +import { Text, Button } from "@pancakeswap/uikit"; +import { StyledActionContainer, ActionContent, ActionTitles } from "./styles"; export interface EnableStakeActionProps { - pendingTx: boolean - handleApprove: () => void + pendingTx: boolean; + handleApprove: () => void; } const EnableStakeAction: React.FunctionComponent> = ({ pendingTx, handleApprove, }) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Enable Farm')} + {t("Enable Farm")} - ) -} + ); +}; -export default EnableStakeAction +export default EnableStakeAction; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/HarvestAction.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/HarvestAction.tsx index f04671af1f86f..a5bc1808c0209 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/HarvestAction.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/HarvestAction.tsx @@ -1,18 +1,18 @@ -import { useTranslation } from '@pancakeswap/localization' -import BigNumber from 'bignumber.js' -import { Button, Heading, Text, TooltipText, Balance, Skeleton, useTooltip } from '@pancakeswap/uikit' +import { useTranslation } from "@pancakeswap/localization"; +import BigNumber from "bignumber.js"; +import { Button, Heading, Text, TooltipText, Balance, Skeleton, useTooltip } from "@pancakeswap/uikit"; -import { ActionContainer, ActionContent, ActionTitles } from './styles' -import { FARMS_SMALL_AMOUNT_THRESHOLD } from '../../../constants' +import { ActionContainer, ActionContent, ActionTitles } from "./styles"; +import { FARMS_SMALL_AMOUNT_THRESHOLD } from "../../../constants"; export interface HarvestActionProps { - earnings: BigNumber - earningsBusd: number - displayBalance: string | JSX.Element - pendingTx: boolean - userDataReady: boolean - proxyCakeBalance?: number - handleHarvest: () => void + earnings: BigNumber; + earningsBusd: number; + displayBalance: string | JSX.Element; + pendingTx: boolean; + userDataReady: boolean; + proxyCakeBalance?: number; + handleHarvest: () => void; } const HarvestAction: React.FunctionComponent> = ({ @@ -24,7 +24,7 @@ const HarvestAction: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); const toolTipBalance = !userDataReady ? ( @@ -32,16 +32,16 @@ const HarvestAction: React.FunctionComponent @@ -50,7 +50,7 @@ const HarvestAction: React.FunctionComponent - {t('Earned')} + {t("Earned")} @@ -70,11 +70,11 @@ const HarvestAction: React.FunctionComponent - ) -} + ); +}; -export default HarvestAction +export default HarvestAction; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/StakeActionDataNotReady.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/StakeActionDataNotReady.tsx index 5d04e3edc54aa..1f95f15f506c8 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/StakeActionDataNotReady.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/StakeActionDataNotReady.tsx @@ -1,21 +1,21 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Text, Skeleton } from '@pancakeswap/uikit' -import { StyledActionContainer, ActionContent, ActionTitles } from './styles' +import { useTranslation } from "@pancakeswap/localization"; +import { Text, Skeleton } from "@pancakeswap/uikit"; +import { StyledActionContainer, ActionContent, ActionTitles } from "./styles"; const StakeActionDataNotReady = () => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Start Farming')} + {t("Start Farming")} - ) -} + ); +}; -export default StakeActionDataNotReady +export default StakeActionDataNotReady; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/StakeComponent.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/StakeComponent.tsx index 50b9c460750e4..15332a674c39d 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/StakeComponent.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/StakeComponent.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Text, Button } from '@pancakeswap/uikit' -import { StyledActionContainer, ActionContent, ActionTitles } from './styles' +import { useTranslation } from "@pancakeswap/localization"; +import { Text, Button } from "@pancakeswap/uikit"; +import { StyledActionContainer, ActionContent, ActionTitles } from "./styles"; export interface StakeComponentProps { - lpSymbol: string - isStakeReady: boolean - onPresentDeposit: () => void + lpSymbol: string; + isStakeReady: boolean; + onPresentDeposit: () => void; } const StakeComponent: React.FunctionComponent> = ({ @@ -13,13 +13,13 @@ const StakeComponent: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Stake')} + {t("Stake")} {lpSymbol} @@ -27,11 +27,11 @@ const StakeComponent: React.FunctionComponent - ) -} + ); +}; -export default StakeComponent +export default StakeComponent; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/StakedActionComponent.tsx b/packages/widgets-internal/farm/components/FarmTable/Actions/StakedActionComponent.tsx index 631807f53ec93..de5e4e83c7208 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/StakedActionComponent.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/StakedActionComponent.tsx @@ -1,15 +1,15 @@ -import { ReactNode } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { Text, IconButton, MinusIcon, AddIcon } from '@pancakeswap/uikit' -import { StyledActionContainer, ActionContent, ActionTitles, IconButtonWrapper } from './styles' +import { ReactNode } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { Text, IconButton, MinusIcon, AddIcon } from "@pancakeswap/uikit"; +import { StyledActionContainer, ActionContent, ActionTitles, IconButtonWrapper } from "./styles"; export interface StakedActionComponentProps { - lpSymbol: string - children?: ReactNode - disabledMinusButton?: boolean - disabledPlusButton?: boolean - onPresentWithdraw: () => void - onPresentDeposit: () => void + lpSymbol: string; + children?: ReactNode; + disabledMinusButton?: boolean; + disabledPlusButton?: boolean; + onPresentWithdraw: () => void; + onPresentDeposit: () => void; } const StakedActionComponent: React.FunctionComponent> = ({ @@ -20,7 +20,7 @@ const StakedActionComponent: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( @@ -29,7 +29,7 @@ const StakedActionComponent: React.FunctionComponent - {t('Staked')} + {t("Staked")} @@ -44,7 +44,7 @@ const StakedActionComponent: React.FunctionComponent - ) -} + ); +}; -export default StakedActionComponent +export default StakedActionComponent; diff --git a/packages/widgets-internal/farm/components/FarmTable/Actions/styles.ts b/packages/widgets-internal/farm/components/FarmTable/Actions/styles.ts index 44699ba423803..f7f713b9fc689 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Actions/styles.ts +++ b/packages/widgets-internal/farm/components/FarmTable/Actions/styles.ts @@ -1,4 +1,4 @@ -import { styled } from 'styled-components' +import { styled } from "styled-components"; export const ActionContainer = styled.div` padding: 16px; @@ -20,22 +20,22 @@ export const ActionContainer = styled.div` margin-bottom: 0; /* max-height: 130px; */ } -` +`; export const ActionTitles = styled.div` display: flex; margin-bottom: 8px; -` +`; export const ActionContent = styled.div` display: flex; justify-content: space-between; align-items: center; -` +`; export const IconButtonWrapper = styled.div` display: flex; -` +`; export const StyledActionContainer = styled(ActionContainer)` &:nth-child(3) { @@ -47,4 +47,4 @@ export const StyledActionContainer = styled(ActionContainer)` margin-top: 16px; } } -` +`; diff --git a/packages/widgets-internal/farm/components/FarmTable/CellLayout.tsx b/packages/widgets-internal/farm/components/FarmTable/CellLayout.tsx index 1aa5608fc96ee..dbc7ece5ca75d 100644 --- a/packages/widgets-internal/farm/components/FarmTable/CellLayout.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/CellLayout.tsx @@ -1,28 +1,28 @@ -import { styled } from 'styled-components' +import { styled } from "styled-components"; const Label = styled.div` font-size: 12px; color: ${({ theme }) => theme.colors.textSubtle}; text-align: left; -` +`; const ContentContainer = styled.div` min-height: 24px; display: flex; align-items: center; -` +`; export interface CellLayoutProps { - label?: string + label?: string; } -const CellLayout: React.FC> = ({ label = '', children }) => { +const CellLayout: React.FC> = ({ label = "", children }) => { return (
{label && } {children}
- ) -} + ); +}; -export default CellLayout +export default CellLayout; diff --git a/packages/widgets-internal/farm/components/FarmTable/Details.tsx b/packages/widgets-internal/farm/components/FarmTable/Details.tsx index ac7ca31fd028c..0569233c49c5c 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Details.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Details.tsx @@ -1,8 +1,8 @@ -import { styled } from 'styled-components' -import { ChevronDownIcon } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { ChevronDownIcon } from "@pancakeswap/uikit"; export interface DetailsProps { - actionPanelToggled: boolean + actionPanelToggled: boolean; } const Container = styled.div` @@ -15,19 +15,19 @@ const Container = styled.div` ${({ theme }) => theme.mediaQueries.sm} { padding-right: 0px; } -` +`; const ArrowIcon = styled(ChevronDownIcon)<{ $toggled?: boolean }>` - transform: ${({ $toggled }) => ($toggled ? 'rotate(180deg)' : 'rotate(0)')}; + transform: ${({ $toggled }) => ($toggled ? "rotate(180deg)" : "rotate(0)")}; height: 20px; -` +`; const Details: React.FC> = ({ actionPanelToggled }) => { return ( - ) -} + ); +}; -export default Details +export default Details; diff --git a/packages/widgets-internal/farm/components/FarmTable/Earned.tsx b/packages/widgets-internal/farm/components/FarmTable/Earned.tsx index 489378f0e483f..286dd4e25e363 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Earned.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Earned.tsx @@ -1,25 +1,25 @@ -import { Skeleton } from '@pancakeswap/uikit' -import { FarmTableEarnedProps } from '../../types' -import { Amount } from '../styles' +import { Skeleton } from "@pancakeswap/uikit"; +import { FarmTableEarnedProps } from "../../types"; +import { Amount } from "../styles"; export interface EarnedPropsWithLoading extends FarmTableEarnedProps { - userDataReady: boolean + userDataReady: boolean; } const Earned: React.FunctionComponent> = ({ earnings, userDataReady, }) => { - const amount = earnings > 0 ? earnings : 0 + const amount = earnings > 0 ? earnings : 0; if (userDataReady) { - return {amount?.toLocaleString('en-US', { maximumFractionDigits: 4 })} + return {amount?.toLocaleString("en-US", { maximumFractionDigits: 4 })}; } return ( - ) -} + ); +}; -export default Earned +export default Earned; diff --git a/packages/widgets-internal/farm/components/FarmTable/FarmTokenInfo.tsx b/packages/widgets-internal/farm/components/FarmTable/FarmTokenInfo.tsx index db4f97b6a5af3..c429700e8954c 100644 --- a/packages/widgets-internal/farm/components/FarmTable/FarmTokenInfo.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/FarmTokenInfo.tsx @@ -1,9 +1,9 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Flex, Skeleton, Text } from '@pancakeswap/uikit' -import { useMemo } from 'react' -import { styled } from 'styled-components' +import { useTranslation } from "@pancakeswap/localization"; +import { Flex, Skeleton, Text } from "@pancakeswap/uikit"; +import { useMemo } from "react"; +import { styled } from "styled-components"; -import { FarmTableFarmTokenInfoProps } from '../../types' +import { FarmTableFarmTokenInfoProps } from "../../types"; const Container = styled.div` padding-left: 16px; @@ -13,7 +13,7 @@ const Container = styled.div` ${({ theme }) => theme.mediaQueries.sm} { padding-left: 32px; } -` +`; const TokenWrapper = styled.div` padding-right: 8px; @@ -22,7 +22,7 @@ const TokenWrapper = styled.div` ${({ theme }) => theme.mediaQueries.sm} { width: 40px; } -` +`; const Farm: React.FunctionComponent> = ({ label, @@ -30,18 +30,18 @@ const Farm: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); const handleRenderFarming = useMemo(() => { if (isStaking) { return ( - {t('Farming')} + {t("Farming")} - ) + ); } - return <> - }, [t, isStaking]) + return <>; + }, [t, isStaking]); if (!isReady) { return ( @@ -52,7 +52,7 @@ const Farm: React.FunctionComponent - ) + ); } const pairContainer = ( @@ -63,9 +63,9 @@ const Farm: React.FunctionComponent{label} - ) + ); - return {pairContainer} -} + return {pairContainer}; +}; -export default Farm +export default Farm; diff --git a/packages/widgets-internal/farm/components/FarmTable/Liquidity.tsx b/packages/widgets-internal/farm/components/FarmTable/Liquidity.tsx index 9812c93658e30..9618427330f7b 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Liquidity.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Liquidity.tsx @@ -1,19 +1,19 @@ -import { useTranslation } from '@pancakeswap/localization' -import formatDistanceToNow from 'date-fns/formatDistanceToNow' -import { styled } from 'styled-components' -import { Skeleton, HelpIcon, Text, TooltipRefs, useTooltip } from '@pancakeswap/uikit' -import { FarmTableLiquidityProps } from '../../types' +import { useTranslation } from "@pancakeswap/localization"; +import formatDistanceToNow from "date-fns/formatDistanceToNow"; +import { styled } from "styled-components"; +import { Skeleton, HelpIcon, Text, TooltipRefs, useTooltip } from "@pancakeswap/uikit"; +import { FarmTableLiquidityProps } from "../../types"; const distanceToNow = (timeInMilliSeconds: number) => { - const time = new Date(timeInMilliSeconds) + const time = new Date(timeInMilliSeconds); return time > new Date() || !Number.isFinite(timeInMilliSeconds) ? `now` - : formatDistanceToNow(time, { addSuffix: true }) -} + : formatDistanceToNow(time, { addSuffix: true }); +}; const ReferenceElement = styled.div` display: inline-block; -` +`; const LiquidityWrapper = styled.div` min-width: 110px; @@ -25,35 +25,35 @@ const LiquidityWrapper = styled.div` text-align: left; margin-right: 0; } -` +`; const Container = styled.div` display: flex; align-items: center; -` +`; export const StakedLiquidity: React.FunctionComponent> = ({ liquidity, updatedAt, inactive, }) => { - const { t } = useTranslation() + const { t } = useTranslation(); const tooltip = useTooltip( <> - {t('Total active (in-range) liquidity staked in the farm.')} + {t("Total active (in-range) liquidity staked in the farm.")} {updatedAt && Updated {distanceToNow(updatedAt)}} , { - placement: 'top-end', + placement: "top-end", tooltipOffset: [20, 10], - }, - ) + } + ); if (inactive) { - return - + return -; } - return -} + return ; +}; const LiquidityComp = ({ liquidity, @@ -61,14 +61,14 @@ const LiquidityComp = ({ tooltip, tooltipVisible, }: { - liquidity: FarmTableLiquidityProps['liquidity'] + liquidity: FarmTableLiquidityProps["liquidity"]; } & TooltipRefs) => { const displayLiquidity = liquidity && liquidity.gt(0) ? ( `$${Number(liquidity).toLocaleString(undefined, { maximumFractionDigits: 0 })}` ) : ( - ) + ); return ( @@ -79,17 +79,17 @@ const LiquidityComp = ({ {tooltipVisible && tooltip} - ) -} + ); +}; const Liquidity: React.FunctionComponent> = ({ liquidity }) => { - const { t } = useTranslation() - const tooltip = useTooltip(t('Total value of the funds in this farm’s liquidity pair'), { - placement: 'top-end', + const { t } = useTranslation(); + const tooltip = useTooltip(t("Total value of the funds in this farm’s liquidity pair"), { + placement: "top-end", tooltipOffset: [20, 10], - }) + }); - return -} + return ; +}; -export default Liquidity +export default Liquidity; diff --git a/packages/widgets-internal/farm/components/FarmTable/LpAmount.tsx b/packages/widgets-internal/farm/components/FarmTable/LpAmount.tsx index 48bd4022aa424..411937dfacff9 100644 --- a/packages/widgets-internal/farm/components/FarmTable/LpAmount.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/LpAmount.tsx @@ -1,24 +1,24 @@ -import { Skeleton } from '@pancakeswap/uikit' -import { FarmTableAmountProps } from '../../types' -import { Amount } from '../styles' +import { Skeleton } from "@pancakeswap/uikit"; +import { FarmTableAmountProps } from "../../types"; +import { Amount } from "../styles"; export interface EarnedPropsWithLoading extends FarmTableAmountProps { - userDataReady: boolean + userDataReady: boolean; } const LpAmount: React.FunctionComponent> = ({ amount, userDataReady, }) => { - const amountDisplay = amount > 0 ? amount : 0 + const amountDisplay = amount > 0 ? amount : 0; if (userDataReady) { - return {`${amountDisplay} LP`} + return {`${amountDisplay} LP`}; } return ( - ) -} + ); +}; -export default LpAmount +export default LpAmount; diff --git a/packages/widgets-internal/farm/components/FarmTable/Multiplier.tsx b/packages/widgets-internal/farm/components/FarmTable/Multiplier.tsx index 3c189c38c6f33..4d41da5d9460a 100644 --- a/packages/widgets-internal/farm/components/FarmTable/Multiplier.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/Multiplier.tsx @@ -1,10 +1,10 @@ -import { styled } from 'styled-components' -import { HelpIcon, Skeleton, useTooltip, FarmMultiplierInfo } from '@pancakeswap/uikit' -import { FarmTableMultiplierProps } from '../../types' +import { styled } from "styled-components"; +import { HelpIcon, Skeleton, useTooltip, FarmMultiplierInfo } from "@pancakeswap/uikit"; +import { FarmTableMultiplierProps } from "../../types"; const ReferenceElement = styled.div` display: inline-block; -` +`; const MultiplierWrapper = styled.div` color: ${({ theme }) => theme.colors.text}; @@ -16,28 +16,28 @@ const MultiplierWrapper = styled.div` text-align: left; margin-right: 0; } -` +`; const Container = styled.div` display: flex; align-items: center; -` +`; const Multiplier: React.FunctionComponent> = ({ multiplier, farmCakePerSecond, totalMultipliers, }) => { - const displayMultiplier = multiplier ? multiplier.toLowerCase() : + const displayMultiplier = multiplier ? multiplier.toLowerCase() : ; const tooltipContent = FarmMultiplierInfo({ - farmCakePerSecond: farmCakePerSecond ?? '-', - totalMultipliers: totalMultipliers ?? '-', - }) + farmCakePerSecond: farmCakePerSecond ?? "-", + totalMultipliers: totalMultipliers ?? "-", + }); const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, { - placement: 'top-end', + placement: "top-end", tooltipOffset: [20, 10], - }) + }); return ( @@ -47,7 +47,7 @@ const Multiplier: React.FunctionComponent {tooltipVisible && tooltip} - ) -} + ); +}; -export default Multiplier +export default Multiplier; diff --git a/packages/widgets-internal/farm/components/FarmTable/index.tsx b/packages/widgets-internal/farm/components/FarmTable/index.tsx index 898167d02ccfe..aea56a2d1c2c6 100644 --- a/packages/widgets-internal/farm/components/FarmTable/index.tsx +++ b/packages/widgets-internal/farm/components/FarmTable/index.tsx @@ -1,16 +1,16 @@ -import CellLayout from './CellLayout' -import Earned from './Earned' -import LpAmount from './LpAmount' -import Details from './Details' -import Liquidity, { StakedLiquidity } from './Liquidity' -import Multiplier from './Multiplier' -import FarmTokenInfo from './FarmTokenInfo' -import FarmTableHarvestAction from './Actions/HarvestAction' -import AccountNotConnect from './Actions/AccountNotConnect' -import StakeComponent from './Actions/StakeComponent' -import StakeActionDataNotReady from './Actions/StakeActionDataNotReady' -import EnableStakeAction from './Actions/EnableStakeAction' -import StakedActionComponent from './Actions/StakedActionComponent' +import CellLayout from "./CellLayout"; +import Earned from "./Earned"; +import LpAmount from "./LpAmount"; +import Details from "./Details"; +import Liquidity, { StakedLiquidity } from "./Liquidity"; +import Multiplier from "./Multiplier"; +import FarmTokenInfo from "./FarmTokenInfo"; +import FarmTableHarvestAction from "./Actions/HarvestAction"; +import AccountNotConnect from "./Actions/AccountNotConnect"; +import StakeComponent from "./Actions/StakeComponent"; +import StakeActionDataNotReady from "./Actions/StakeActionDataNotReady"; +import EnableStakeAction from "./Actions/EnableStakeAction"; +import StakedActionComponent from "./Actions/StakedActionComponent"; const FarmTable = { CellLayout, @@ -27,6 +27,6 @@ const FarmTable = { EnableStakeAction, StakedActionComponent, LpAmount, -} +}; -export default FarmTable +export default FarmTable; diff --git a/packages/widgets-internal/farm/components/FarmV3Card/AvailableFarming.tsx b/packages/widgets-internal/farm/components/FarmV3Card/AvailableFarming.tsx index 638dc501d2ca7..522f0e3d070ef 100644 --- a/packages/widgets-internal/farm/components/FarmV3Card/AvailableFarming.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Card/AvailableFarming.tsx @@ -1,19 +1,19 @@ -import { styled } from 'styled-components' -import { useTranslation } from '@pancakeswap/localization' -import { PositionDetails } from '@pancakeswap/farms' -import { PreTitle, Text, Button, Flex, Box } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { useTranslation } from "@pancakeswap/localization"; +import { PositionDetails } from "@pancakeswap/farms"; +import { PreTitle, Text, Button, Flex, Box } from "@pancakeswap/uikit"; -const LightGreyCard = styled('div')` +const LightGreyCard = styled("div")` padding: 0; border: 1px solid ${({ theme }) => theme.colors.cardBorder}; background-color: ${({ theme }) => theme.colors.dropdown}; border-radius: ${({ theme }) => theme.radii.card}; -` +`; interface AvailableFarmingProps { - lpSymbol: string - unstakedPositions: PositionDetails[] - onClickViewAllButton: () => void + lpSymbol: string; + unstakedPositions: PositionDetails[]; + onClickViewAllButton: () => void; } const AvailableFarming: React.FunctionComponent> = ({ @@ -21,12 +21,12 @@ const AvailableFarming: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('%totalAvailableFarm% LP Available for Farming', { totalAvailableFarm: unstakedPositions.length })} + {t("%totalAvailableFarm% LP Available for Farming", { totalAvailableFarm: unstakedPositions.length })} @@ -42,13 +42,13 @@ const AvailableFarming: React.FunctionComponent - - ) -} + ); +}; -export default AvailableFarming +export default AvailableFarming; diff --git a/packages/widgets-internal/farm/components/FarmV3Card/NoPosition.tsx b/packages/widgets-internal/farm/components/FarmV3Card/NoPosition.tsx index b1660d148ca52..fb29b6232849c 100644 --- a/packages/widgets-internal/farm/components/FarmV3Card/NoPosition.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Card/NoPosition.tsx @@ -1,14 +1,14 @@ -import { ReactNode } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { Text, Button, Flex } from '@pancakeswap/uikit' +import { ReactNode } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { Text, Button, Flex } from "@pancakeswap/uikit"; interface NoPositionProps { - inactive: boolean - account: string - hasNoPosition: boolean - boostedAction?: ReactNode - connectWalletButton: ReactNode - onAddLiquidityClick: () => void + inactive: boolean; + account: string; + hasNoPosition: boolean; + boostedAction?: ReactNode; + connectWalletButton: ReactNode; + onAddLiquidityClick: () => void; } const NoPosition: React.FunctionComponent> = ({ @@ -19,7 +19,7 @@ const NoPosition: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( @@ -27,11 +27,11 @@ const NoPosition: React.FunctionComponent - {t('no position found')} + {t("no position found")} {!inactive && ( )} @@ -39,7 +39,7 @@ const NoPosition: React.FunctionComponent{connectWalletButton} )} - ) -} + ); +}; -export default NoPosition +export default NoPosition; diff --git a/packages/widgets-internal/farm/components/FarmV3Card/TotalStakedBalance.tsx b/packages/widgets-internal/farm/components/FarmV3Card/TotalStakedBalance.tsx index 056796c32002d..3bf95a67611f3 100644 --- a/packages/widgets-internal/farm/components/FarmV3Card/TotalStakedBalance.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Card/TotalStakedBalance.tsx @@ -1,20 +1,20 @@ -import { styled } from 'styled-components' -import { useTranslation } from '@pancakeswap/localization' -import { PositionDetails } from '@pancakeswap/farms' -import { PreTitle, Text, Button, Flex, Box, Heading, Balance } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { useTranslation } from "@pancakeswap/localization"; +import { PositionDetails } from "@pancakeswap/farms"; +import { PreTitle, Text, Button, Flex, Box, Heading, Balance } from "@pancakeswap/uikit"; -const LightGreyCard = styled('div')` +const LightGreyCard = styled("div")` padding: 0; border: 1px solid ${({ theme }) => theme.colors.cardBorder}; background-color: ${({ theme }) => theme.colors.dropdown}; border-radius: ${({ theme }) => theme.radii.card}; -` +`; interface TotalStakedBalanceProps { - stakedPositions: PositionDetails[] - earnings: number - earningsBusd: number - onClickViewAllButton: () => void + stakedPositions: PositionDetails[]; + earnings: number; + earningsBusd: number; + onClickViewAllButton: () => void; } const TotalStakedBalance: React.FunctionComponent> = ({ @@ -23,12 +23,12 @@ const TotalStakedBalance: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('%totalStakedFarm% Staked Farming', { totalStakedFarm: stakedPositions.length })} + {t("%totalStakedFarm% Staked Farming", { totalStakedFarm: stakedPositions.length })} @@ -38,7 +38,7 @@ const TotalStakedBalance: React.FunctionComponent - {t('Earned')} + {t("Earned")} @@ -48,13 +48,13 @@ const TotalStakedBalance: React.FunctionComponent - - ) -} + ); +}; -export default TotalStakedBalance +export default TotalStakedBalance; diff --git a/packages/widgets-internal/farm/components/FarmV3Card/ViewAllFarmModal.tsx b/packages/widgets-internal/farm/components/FarmV3Card/ViewAllFarmModal.tsx index 8b40774faae79..bdec6a879ed94 100644 --- a/packages/widgets-internal/farm/components/FarmV3Card/ViewAllFarmModal.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Card/ViewAllFarmModal.tsx @@ -1,8 +1,8 @@ -import { styled } from 'styled-components' -import { ReactNode } from 'react' -import { useTranslation } from '@pancakeswap/localization' +import { styled } from "styled-components"; +import { ReactNode } from "react"; +import { useTranslation } from "@pancakeswap/localization"; // should be ok to import type from sdk -import type { FeeAmount } from '@pancakeswap/v3-sdk' +import type { FeeAmount } from "@pancakeswap/v3-sdk"; import { Text, Button, @@ -17,29 +17,29 @@ import { AutoRow, RowBetween, Tag, -} from '@pancakeswap/uikit' -import Tags from '../Tags' +} from "@pancakeswap/uikit"; +import Tags from "../Tags"; -const { BoostedTag, FarmAuctionTag, V3FeeTag } = Tags +const { BoostedTag, FarmAuctionTag, V3FeeTag } = Tags; const ScrollableContainer = styled(Flex)` flex-direction: column; height: auto; max-height: 60vh; -` +`; interface ViewAllFarmModalProps extends ModalProps { - isReady: boolean - lpSymbol: string - onAddLiquidity: () => void - tokenPairImage: ReactNode - boosted?: boolean - feeAmount?: FeeAmount - isCommunityFarm?: boolean - multiplier: string - children: ReactNode - onHarvestAll?: () => void - harvesting?: boolean + isReady: boolean; + lpSymbol: string; + onAddLiquidity: () => void; + tokenPairImage: ReactNode; + boosted?: boolean; + feeAmount?: FeeAmount; + isCommunityFarm?: boolean; + multiplier: string; + children: ReactNode; + onHarvestAll?: () => void; + harvesting?: boolean; } const ViewAllFarmModal: React.FunctionComponent> = ({ @@ -55,16 +55,16 @@ const ViewAllFarmModal: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - + {tokenPairImage} - {lpSymbol.split(' ')[0]} + {lpSymbol.split(" ")[0]} {isReady && multiplier && ( @@ -86,14 +86,14 @@ const ViewAllFarmModal: React.FunctionComponent )} - ) -} + ); +}; -export default ViewAllFarmModal +export default ViewAllFarmModal; diff --git a/packages/widgets-internal/farm/components/FarmV3Card/index.tsx b/packages/widgets-internal/farm/components/FarmV3Card/index.tsx index 3a279c3777739..99fc8e76d6bba 100644 --- a/packages/widgets-internal/farm/components/FarmV3Card/index.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Card/index.tsx @@ -1,6 +1,6 @@ -import NoPosition from './NoPosition' -import AvailableFarming from './AvailableFarming' -import TotalStakedBalance from './TotalStakedBalance' -import ViewAllFarmModal from './ViewAllFarmModal' +import NoPosition from "./NoPosition"; +import AvailableFarming from "./AvailableFarming"; +import TotalStakedBalance from "./TotalStakedBalance"; +import ViewAllFarmModal from "./ViewAllFarmModal"; -export { NoPosition, AvailableFarming, TotalStakedBalance, ViewAllFarmModal } +export { NoPosition, AvailableFarming, TotalStakedBalance, ViewAllFarmModal }; diff --git a/packages/widgets-internal/farm/components/FarmV3Table/Actions/HarvestAction.tsx b/packages/widgets-internal/farm/components/FarmV3Table/Actions/HarvestAction.tsx index e37bc815fceb4..010390d554c09 100644 --- a/packages/widgets-internal/farm/components/FarmV3Table/Actions/HarvestAction.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Table/Actions/HarvestAction.tsx @@ -1,14 +1,14 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Balance, Flex, Button, Text } from '@pancakeswap/uikit' -import { ActionContent, ActionTitles } from './styles' +import { useTranslation } from "@pancakeswap/localization"; +import { Balance, Flex, Button, Text } from "@pancakeswap/uikit"; +import { ActionContent, ActionTitles } from "./styles"; export interface HarvestActionProps { - earnings: number - earningsBusd: number - pendingTx: boolean - userDataReady: boolean - handleHarvest: () => void - disabled?: boolean + earnings: number; + earningsBusd: number; + pendingTx: boolean; + userDataReady: boolean; + handleHarvest: () => void; + disabled?: boolean; } const HarvestAction: React.FunctionComponent> = ({ @@ -19,7 +19,7 @@ const HarvestAction: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( @@ -28,10 +28,10 @@ const HarvestAction: React.FunctionComponent - {t('Earned')} + {t("Earned")} - +
{earningsBusd > 0 && ( @@ -39,11 +39,11 @@ const HarvestAction: React.FunctionComponent - ) -} + ); +}; -export default HarvestAction +export default HarvestAction; diff --git a/packages/widgets-internal/farm/components/FarmV3Table/Actions/NoPosition.tsx b/packages/widgets-internal/farm/components/FarmV3Table/Actions/NoPosition.tsx index b796c5d938115..c1465c241f593 100644 --- a/packages/widgets-internal/farm/components/FarmV3Table/Actions/NoPosition.tsx +++ b/packages/widgets-internal/farm/components/FarmV3Table/Actions/NoPosition.tsx @@ -1,9 +1,9 @@ -import { ReactNode } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { styled } from 'styled-components' -import { Text, Button, Flex } from '@pancakeswap/uikit' +import { ReactNode } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { styled } from "styled-components"; +import { Text, Button, Flex } from "@pancakeswap/uikit"; -import { ActionTitles, ActionContent } from './styles' +import { ActionTitles, ActionContent } from "./styles"; const ActionContainer = styled.div` padding: 16px; @@ -23,15 +23,15 @@ const ActionContainer = styled.div` margin-right: 0; margin-bottom: 0; } -` +`; interface WalletNotConnectedProps { - inactive: boolean - account: string - boostedAction: ReactNode - connectWalletButton: ReactNode - hasNoPosition: boolean - onAddLiquidity: () => void + inactive: boolean; + account: string; + boostedAction: ReactNode; + connectWalletButton: ReactNode; + hasNoPosition: boolean; + onAddLiquidity: () => void; } const NoPosition: React.FunctionComponent> = ({ @@ -42,22 +42,22 @@ const NoPosition: React.FunctionComponent { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - + {boostedAction && {boostedAction}} {account && hasNoPosition ? ( - {t('no position found')} + {t("no position found")} {!inactive && ( )} @@ -66,14 +66,14 @@ const NoPosition: React.FunctionComponent - {t('Start Farming')} + {t("Start Farming")} {connectWalletButton} )} - ) -} + ); +}; -export default NoPosition +export default NoPosition; diff --git a/packages/widgets-internal/farm/components/FarmV3Table/Actions/styles.ts b/packages/widgets-internal/farm/components/FarmV3Table/Actions/styles.ts index baa2256fd5060..db3d471c8620b 100644 --- a/packages/widgets-internal/farm/components/FarmV3Table/Actions/styles.ts +++ b/packages/widgets-internal/farm/components/FarmV3Table/Actions/styles.ts @@ -1,12 +1,12 @@ -import { styled } from 'styled-components' +import { styled } from "styled-components"; export const ActionTitles = styled.div` display: flex; margin-bottom: 8px; -` +`; export const ActionContent = styled.div` display: flex; justify-content: space-between; align-items: center; -` +`; diff --git a/packages/widgets-internal/farm/components/FarmV3Table/index.ts b/packages/widgets-internal/farm/components/FarmV3Table/index.ts index e11297dfab8f2..7052f46dbcbfe 100644 --- a/packages/widgets-internal/farm/components/FarmV3Table/index.ts +++ b/packages/widgets-internal/farm/components/FarmV3Table/index.ts @@ -1,4 +1,4 @@ -import NoPosition from './Actions/NoPosition' -import FarmV3HarvestAction from './Actions/HarvestAction' +import NoPosition from "./Actions/NoPosition"; +import FarmV3HarvestAction from "./Actions/HarvestAction"; -export { NoPosition, FarmV3HarvestAction } +export { NoPosition, FarmV3HarvestAction }; diff --git a/packages/widgets-internal/farm/components/StakedLP/index.tsx b/packages/widgets-internal/farm/components/StakedLP/index.tsx index f8233b08c33ce..7f87223ff0589 100644 --- a/packages/widgets-internal/farm/components/StakedLP/index.tsx +++ b/packages/widgets-internal/farm/components/StakedLP/index.tsx @@ -1,19 +1,19 @@ -import { BigNumber } from 'bignumber.js' -import { useMemo } from 'react' -import { formatLpBalance, getBalanceNumber } from '@pancakeswap/utils/formatBalance' -import { Flex, Balance, Heading, RefreshIcon } from '@pancakeswap/uikit' +import { BigNumber } from "bignumber.js"; +import { useMemo } from "react"; +import { formatLpBalance, getBalanceNumber } from "@pancakeswap/utils/formatBalance"; +import { Flex, Balance, Heading, RefreshIcon } from "@pancakeswap/uikit"; interface StakedLPProps { - stakedBalance: BigNumber - tokenSymbol: string - quoteTokenSymbol: string - lpTotalSupply: BigNumber - lpTokenPrice: BigNumber - tokenAmountTotal: BigNumber - quoteTokenAmountTotal: BigNumber - pendingFarmLength?: number - decimals: number - onClickLoadingIcon?: () => void + stakedBalance: BigNumber; + tokenSymbol: string; + quoteTokenSymbol: string; + lpTotalSupply: BigNumber; + lpTokenPrice: BigNumber; + tokenAmountTotal: BigNumber; + quoteTokenAmountTotal: BigNumber; + pendingFarmLength?: number; + decimals: number; + onClickLoadingIcon?: () => void; } const StakedLP: React.FunctionComponent> = ({ @@ -29,14 +29,14 @@ const StakedLP: React.FunctionComponent> onClickLoadingIcon, }) => { const displayBalance = useMemo(() => { - return formatLpBalance(stakedBalance, decimals) - }, [stakedBalance, decimals]) + return formatLpBalance(stakedBalance, decimals); + }, [stakedBalance, decimals]); return ( - {displayBalance} - {pendingFarmLength > 0 && } + {displayBalance} + {pendingFarmLength > 0 && } {stakedBalance.gt(0) && lpTokenPrice.gt(0) && ( <> @@ -48,7 +48,7 @@ const StakedLP: React.FunctionComponent> unit=" USD" prefix="~" /> - + > )} - ) -} + ); +}; -export default StakedLP +export default StakedLP; diff --git a/packages/widgets-internal/farm/components/Tags/index.tsx b/packages/widgets-internal/farm/components/Tags/index.tsx index a71a468ecf2d8..ce676694c66a2 100644 --- a/packages/widgets-internal/farm/components/Tags/index.tsx +++ b/packages/widgets-internal/farm/components/Tags/index.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@pancakeswap/localization' -import React, { memo } from 'react' -import type { FeeAmount } from '@pancakeswap/v3-sdk' +import { useTranslation } from "@pancakeswap/localization"; +import React, { memo } from "react"; +import type { FeeAmount } from "@pancakeswap/v3-sdk"; import { Text, TooltipText, @@ -25,248 +25,248 @@ import { LineaIcon, BaseIcon, ArbitrumIcon, -} from '@pancakeswap/uikit' +} from "@pancakeswap/uikit"; const CoreTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props} > - {t('Core')} + {t("Core")} - ) -} + ); +}; const FarmAuctionTagToolTipContent = memo(() => { - const { t } = useTranslation() - return {t('Farm Auction Winner, add liquidity at your own risk.')} -}) + const { t } = useTranslation(); + return {t("Farm Auction Winner, add liquidity at your own risk.")}; +}); const FarmAuctionTag: React.FC> = (props) => { - const { t } = useTranslation() - const { targetRef, tooltip, tooltipVisible } = useTooltip(, { placement: 'top' }) + const { t } = useTranslation(); + const { targetRef, tooltip, tooltipVisible } = useTooltip(, { placement: "top" }); return ( <> {tooltipVisible && tooltip} } {...props}> - {t('Farm Auction')} + {t("Farm Auction")} - ) -} + ); +}; const StableFarmTag: React.FC> = (props) => { - const { t } = useTranslation() - const { targetRef, tooltip, tooltipVisible } = useTooltip('Fees are lower for stable LP', { placement: 'top' }) + const { t } = useTranslation(); + const { targetRef, tooltip, tooltipVisible } = useTooltip("Fees are lower for stable LP", { placement: "top" }); return ( <> {tooltipVisible && tooltip} } {...props}> - {t('Stable LP')} + {t("Stable LP")} - ) -} + ); +}; const CommunityTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Community')} + {t("Community")} - ) -} + ); +}; const DualTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Dual')} + {t("Dual")} - ) -} + ); +}; const ManualPoolTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Manual')} + {t("Manual")} - ) -} + ); +}; const LockedOrAutoPoolTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Auto')}/{t('Locked')} + {t("Auto")}/{t("Locked")} - ) -} + ); +}; const LockedPoolTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Locked')} + {t("Locked")} - ) -} + ); +}; const CompoundingPoolTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Auto')} + {t("Auto")} - ) -} + ); +}; const VoteNowTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Vote Now')} + {t("Vote Now")} - ) -} + ); +}; const VotedTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props} > - {t('Voted')} + {t("Voted")} - ) -} + ); +}; const SoonTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Soon')} + {t("Soon")} - ) -} + ); +}; const ClosedTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Closed')} + {t("Closed")} - ) -} + ); +}; const BoostedTag: React.FC> = (props) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( } {...props}> - {t('Boosted')} + {t("Boosted")} - ) -} + ); +}; const V2Tag: React.FC = (props) => ( V2 -) +); const V3Tag: React.FC = (props) => ( V3 -) +); const V3FeeTag: React.FC = ({ feeAmount, ...props }) => ( {feeAmount / 10_000}% -) +); const EthTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> ETH - ) -} + ); +}; const BscTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> BNB - ) -} + ); +}; const ZkEVMTag: React.FC> = (props) => { return ( } {...props} > zkEVM - ) -} + ); +}; const ZkSyncTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> zkSync - ) -} + ); +}; const ArbTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> ARB - ) -} + ); +}; const BaseTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> Base - ) -} + ); +}; const LineaTag: React.FC> = (props) => { return ( - } {...props}> + } {...props}> Linea - ) -} + ); +}; const Tags = { CoreTag, @@ -293,6 +293,6 @@ const Tags = { ArbTag, BaseTag, LineaTag, -} +}; -export default Tags +export default Tags; diff --git a/packages/widgets-internal/farm/components/WithdrawModal/index.tsx b/packages/widgets-internal/farm/components/WithdrawModal/index.tsx index 76b1d47c63cde..c9cc57e4badb8 100644 --- a/packages/widgets-internal/farm/components/WithdrawModal/index.tsx +++ b/packages/widgets-internal/farm/components/WithdrawModal/index.tsx @@ -1,9 +1,9 @@ -import BigNumber from 'bignumber.js' -import { useCallback, useMemo, useState } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { getFullDisplayBalance } from '@pancakeswap/utils/formatBalance' -import { trimTrailZero } from '@pancakeswap/utils/trimTrailZero' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' +import BigNumber from "bignumber.js"; +import { useCallback, useMemo, useState } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { getFullDisplayBalance } from "@pancakeswap/utils/formatBalance"; +import { trimTrailZero } from "@pancakeswap/utils/trimTrailZero"; +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; import { Button, AutoRenewIcon, @@ -14,17 +14,17 @@ import { ModalBody, ModalActions, ModalInput, -} from '@pancakeswap/uikit' +} from "@pancakeswap/uikit"; interface WithdrawModalProps { - max: BigNumber - lpPrice?: BigNumber - onConfirm: (amount: string) => void - onDismiss?: () => void - tokenName?: string - showActiveBooster?: boolean - showCrossChainFarmWarning?: boolean - decimals: number + max: BigNumber; + lpPrice?: BigNumber; + onConfirm: (amount: string) => void; + onDismiss?: () => void; + tokenName?: string; + showActiveBooster?: boolean; + showCrossChainFarmWarning?: boolean; + decimals: number; } const WithdrawModal: React.FC> = ({ @@ -32,57 +32,57 @@ const WithdrawModal: React.FC> = ({ onDismiss, max, lpPrice = BIG_ZERO, - tokenName = '', + tokenName = "", showActiveBooster, showCrossChainFarmWarning, decimals, }) => { - const [val, setVal] = useState('') - const [valUSDPrice, setValUSDPrice] = useState(BIG_ZERO) - const [pendingTx, setPendingTx] = useState(false) - const { t } = useTranslation() + const [val, setVal] = useState(""); + const [valUSDPrice, setValUSDPrice] = useState(BIG_ZERO); + const [pendingTx, setPendingTx] = useState(false); + const { t } = useTranslation(); const fullBalance = useMemo(() => { - return getFullDisplayBalance(max, decimals) - }, [max, decimals]) + return getFullDisplayBalance(max, decimals); + }, [max, decimals]); - const valNumber = useMemo(() => new BigNumber(val), [val]) - const fullBalanceNumber = useMemo(() => new BigNumber(fullBalance), [fullBalance]) + const valNumber = useMemo(() => new BigNumber(val), [val]); + const fullBalanceNumber = useMemo(() => new BigNumber(fullBalance), [fullBalance]); const handleChange = useCallback( (e: React.FormEvent) => { if (e.currentTarget.validity.valid) { - const inputVal = e.currentTarget.value.replace(/,/g, '.') - setVal(inputVal) + const inputVal = e.currentTarget.value.replace(/,/g, "."); + setVal(inputVal); - const USDPrice = inputVal === '' ? BIG_ZERO : new BigNumber(inputVal).times(lpPrice) - setValUSDPrice(USDPrice) + const USDPrice = inputVal === "" ? BIG_ZERO : new BigNumber(inputVal).times(lpPrice); + setValUSDPrice(USDPrice); } }, - [setVal, setValUSDPrice, lpPrice], - ) + [setVal, setValUSDPrice, lpPrice] + ); const handleSelectMax = useCallback(() => { - setVal(fullBalance) + setVal(fullBalance); - const USDPrice = new BigNumber(fullBalance).times(lpPrice) - setValUSDPrice(USDPrice) - }, [fullBalance, setVal, setValUSDPrice, lpPrice]) + const USDPrice = new BigNumber(fullBalance).times(lpPrice); + setValUSDPrice(USDPrice); + }, [fullBalance, setVal, setValUSDPrice, lpPrice]); const handlePercentInput = useCallback( (percent: number) => { - const totalAmount = fullBalanceNumber.dividedBy(100).multipliedBy(percent) - const amount = trimTrailZero(totalAmount.toNumber().toFixed(decimals)) - setVal(amount as string) + const totalAmount = fullBalanceNumber.dividedBy(100).multipliedBy(percent); + const amount = trimTrailZero(totalAmount.toNumber().toFixed(decimals)); + setVal(amount as string); - const USDPrice = totalAmount.times(lpPrice) - setValUSDPrice(USDPrice) + const USDPrice = totalAmount.times(lpPrice); + setValUSDPrice(USDPrice); }, - [fullBalanceNumber, decimals, lpPrice], - ) + [fullBalanceNumber, decimals, lpPrice] + ); return ( - - + + > = ({ max={fullBalance} maxAmount={fullBalanceNumber} symbol={tokenName} - inputTitle={t('Unstake')} + inputTitle={t("Unstake")} decimals={decimals} /> {showActiveBooster ? ( - {t('The yield booster multiplier will be updated based on the latest staking conditions.')} + {t("The yield booster multiplier will be updated based on the latest staking conditions.")} ) : null} @@ -106,37 +106,37 @@ const WithdrawModal: React.FC> = ({ - {t('For safety, cross-chain transactions will take around 30 minutes to confirm.')} + {t("For safety, cross-chain transactions will take around 30 minutes to confirm.")} )} {pendingTx ? ( ) : ( )} - ) -} + ); +}; -export default WithdrawModal +export default WithdrawModal; diff --git a/packages/widgets-internal/farm/components/styles.ts b/packages/widgets-internal/farm/components/styles.ts index c3c0179fb9b0d..46d6d5b7fb772 100644 --- a/packages/widgets-internal/farm/components/styles.ts +++ b/packages/widgets-internal/farm/components/styles.ts @@ -1,7 +1,7 @@ -import { styled } from 'styled-components' +import { styled } from "styled-components"; export const Amount = styled.span<{ amount: number }>` color: ${({ amount, theme }) => (amount ? theme.colors.text : theme.colors.textDisabled)}; display: flex; align-items: center; -` +`; diff --git a/packages/widgets-internal/farm/constants.ts b/packages/widgets-internal/farm/constants.ts index 3ebab6d2aa311..b0bac2a0d6c77 100644 --- a/packages/widgets-internal/farm/constants.ts +++ b/packages/widgets-internal/farm/constants.ts @@ -1,3 +1,3 @@ -import BigNumber from 'bignumber.js' +import BigNumber from "bignumber.js"; -export const FARMS_SMALL_AMOUNT_THRESHOLD = new BigNumber(0.00001) +export const FARMS_SMALL_AMOUNT_THRESHOLD = new BigNumber(0.00001); diff --git a/packages/widgets-internal/farm/index.ts b/packages/widgets-internal/farm/index.ts index e214b04e1d196..cbc5371614625 100644 --- a/packages/widgets-internal/farm/index.ts +++ b/packages/widgets-internal/farm/index.ts @@ -1,11 +1,11 @@ -export * from './constants' -export { MobileColumnSchema, DesktopColumnSchema, V3DesktopColumnSchema } from './types' +export * from "./constants"; +export { MobileColumnSchema, DesktopColumnSchema, V3DesktopColumnSchema } from "./types"; export type { FarmTableEarnedProps, FarmTableLiquidityProps, FarmTableMultiplierProps, FarmTableFarmTokenInfoProps, FarmTableAmountProps, -} from './types' +} from "./types"; -export * from './FarmWidget' +export * from "./FarmWidget"; diff --git a/packages/widgets-internal/farm/types.ts b/packages/widgets-internal/farm/types.ts index 272307cd1c570..d73bb1a3a866c 100644 --- a/packages/widgets-internal/farm/types.ts +++ b/packages/widgets-internal/farm/types.ts @@ -1,172 +1,172 @@ -import { ReactNode } from 'react' -import BigNumber from 'bignumber.js' -import { Token } from '@pancakeswap/sdk' +import { ReactNode } from "react"; +import BigNumber from "bignumber.js"; +import { Token } from "@pancakeswap/sdk"; export interface FarmTableEarnedProps { - earnings: number - pid: number + earnings: number; + pid: number; } export interface FarmTableAmountProps { - amount: number + amount: number; } export interface FarmTableLiquidityProps { - liquidity: BigNumber - updatedAt?: number - inactive?: boolean + liquidity: BigNumber; + updatedAt?: number; + inactive?: boolean; } export interface FarmTableMultiplierProps { - multiplier: string - rewardCakePerSecond?: boolean - farmCakePerSecond?: string - totalMultipliers?: string + multiplier: string; + rewardCakePerSecond?: boolean; + farmCakePerSecond?: string; + totalMultipliers?: string; } export interface FarmTableFarmTokenInfoProps { - label: string - pid: number - token: Token - quoteToken: Token - isReady: boolean - isStaking?: boolean - children?: ReactNode - isCommunity?: boolean + label: string; + pid: number; + token: Token; + quoteToken: Token; + isReady: boolean; + isStaking?: boolean; + children?: ReactNode; + isCommunity?: boolean; } export type ColumnsDefTypes = { - id: number - label: string - name: string - sortable: boolean -} + id: number; + label: string; + name: string; + sortable: boolean; +}; export const MobileColumnSchema: ColumnsDefTypes[] = [ { id: 1, - name: 'farm', + name: "farm", sortable: true, - label: '', + label: "", }, { id: 2, - name: 'earned', + name: "earned", sortable: true, - label: 'Earned', + label: "Earned", }, { id: 3, - name: 'apr', + name: "apr", sortable: true, - label: 'APR', + label: "APR", }, { id: 6, - name: 'details', + name: "details", sortable: true, - label: '', + label: "", }, -] +]; export const DesktopColumnSchema: ColumnsDefTypes[] = [ { id: 1, - name: 'farm', + name: "farm", sortable: true, - label: '', + label: "", }, { id: 2, - name: 'type', + name: "type", sortable: false, - label: '', + label: "", }, { id: 3, - name: 'earned', + name: "earned", sortable: true, - label: 'Earned', + label: "Earned", }, { id: 4, - name: 'apr', + name: "apr", sortable: true, - label: 'APR', + label: "APR", }, { id: 5, - name: 'liquidity', + name: "liquidity", sortable: true, - label: 'Staked Liquidity', + label: "Staked Liquidity", }, { id: 6, - name: 'multiplier', + name: "multiplier", sortable: true, - label: 'Multiplier', + label: "Multiplier", }, { id: 7, - name: 'details', + name: "details", sortable: true, - label: '', + label: "", }, -] +]; export const V3DesktopColumnSchema: ColumnsDefTypes[] = [ { id: 1, - name: 'farm', + name: "farm", sortable: true, - label: '', + label: "", }, { id: 2, - name: 'type', + name: "type", sortable: false, - label: '', + label: "", }, { id: 3, - name: 'earned', + name: "earned", sortable: true, - label: 'Earned', + label: "Earned", }, { id: 4, - name: 'apr', + name: "apr", sortable: true, - label: 'APR', + label: "APR", }, { id: 5, - name: 'stakedLiquidity', + name: "stakedLiquidity", sortable: true, - label: 'Staked Liquidity', + label: "Staked Liquidity", }, { id: 6, - name: 'multiplier', + name: "multiplier", sortable: true, - label: 'Multiplier', + label: "Multiplier", }, { id: 7, - name: 'availableLp', + name: "availableLp", sortable: false, - label: 'Available', + label: "Available", }, { id: 8, - name: 'stakedLp', + name: "stakedLp", sortable: false, - label: 'Staked', + label: "Staked", }, { id: 7, - name: 'details', + name: "details", sortable: true, - label: '', + label: "", }, -] +]; diff --git a/packages/widgets-internal/index.ts b/packages/widgets-internal/index.ts index b7a78bbd06a81..9b174099a4d55 100644 --- a/packages/widgets-internal/index.ts +++ b/packages/widgets-internal/index.ts @@ -1,5 +1,6 @@ -export * as FarmWidget from './farm' -export * as RoiWidget from './roi' -export * as Pool from './pool' -export * from './swap/LiquidityChartRangeInput' -export * from './swap' +export * as FarmWidget from "./farm"; +export * as RoiWidget from "./roi"; +export * as Pool from "./pool"; +export * from "./swap/LiquidityChartRangeInput"; +export * from "./swap"; +export * from "./components/CurrencyLogo"; diff --git a/packages/widgets-internal/mockData.ts b/packages/widgets-internal/mockData.ts index 6b4fc506db4d0..9bee7ac1148d6 100644 --- a/packages/widgets-internal/mockData.ts +++ b/packages/widgets-internal/mockData.ts @@ -1,21 +1,21 @@ -import { ERC20Token } from '@pancakeswap/sdk' -import { ChainId } from '@pancakeswap/chains' +import { ERC20Token } from "@pancakeswap/sdk"; +import { ChainId } from "@pancakeswap/chains"; // For StoryBook export const cakeToken = new ERC20Token( ChainId.BSC, - '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82', + "0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82", 18, - 'CAKE', - 'PancakeSwap Token', - 'https://pancakeswap.finance/', -) + "CAKE", + "PancakeSwap Token", + "https://pancakeswap.finance/" +); export const bscToken = new ERC20Token( ChainId.BSC, - '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c', + "0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c", 18, - 'BNB', - 'BNB', - 'https://www.binance.com/', -) + "BNB", + "BNB", + "https://www.binance.com/" +); diff --git a/packages/widgets-internal/pool/Apr.tsx b/packages/widgets-internal/pool/Apr.tsx index 1e2d12b87784b..694fdd796b860 100644 --- a/packages/widgets-internal/pool/Apr.tsx +++ b/packages/widgets-internal/pool/Apr.tsx @@ -1,9 +1,9 @@ -import { useCallback, useMemo } from 'react' -import { styled, css } from 'styled-components' +import { useCallback, useMemo } from "react"; +import { styled, css } from "styled-components"; -import { useTranslation } from '@pancakeswap/localization' -import BigNumber from 'bignumber.js' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' +import { useTranslation } from "@pancakeswap/localization"; +import BigNumber from "bignumber.js"; +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; import { Text, CalculateIcon, @@ -14,9 +14,9 @@ import { BalanceWithLoading, useModal, Flex, -} from '@pancakeswap/uikit' +} from "@pancakeswap/uikit"; -import { DeserializedPool } from './types' +import { DeserializedPool } from "./types"; const AprLabelContainer = styled(Flex)<{ enableHover: boolean }>` ${({ enableHover }) => @@ -27,24 +27,24 @@ const AprLabelContainer = styled(Flex)<{ enableHover: boolean }>` } ` : null} -` +`; interface AprProps extends FlexProps { - pool: DeserializedPool - stakedBalance: BigNumber - showIcon: boolean - performanceFee?: number - fontSize?: string - shouldShowApr: boolean - account: string - autoCompoundFrequency: number + pool: DeserializedPool; + stakedBalance: BigNumber; + showIcon: boolean; + performanceFee?: number; + fontSize?: string; + shouldShowApr: boolean; + account: string; + autoCompoundFrequency: number; } export function Apr({ pool, showIcon, stakedBalance, - fontSize = '16px', + fontSize = "16px", performanceFee = 0, shouldShowApr, account, @@ -61,18 +61,18 @@ export function Apr({ apr, rawApr, vaultKey, - } = pool - const { t } = useTranslation() + } = pool; + const { t } = useTranslation(); const stakingTokenBalance = useMemo( () => (userData?.stakingTokenBalance ? new BigNumber(userData.stakingTokenBalance) : BIG_ZERO), - [userData], - ) + [userData] + ); const apyModalLink = useMemo( - () => (stakingToken?.address ? `/swap?outputCurrency=${stakingToken.address}` : '/swap'), - [stakingToken], - ) + () => (stakingToken?.address ? `/swap?outputCurrency=${stakingToken.address}` : "/swap"), + [stakingToken] + ); const [onPresentApyModal] = useModal( ({ stakingTokenBalance={stakedBalance.plus(stakingTokenBalance)} stakingTokenDecimals={stakingToken.decimals} apr={vaultKey ? rawApr : apr} - stakingTokenSymbol={stakingToken?.symbol || ''} - linkLabel={t('Get %symbol%', { symbol: stakingToken?.symbol || '' })} + stakingTokenSymbol={stakingToken?.symbol || ""} + linkLabel={t("Get %symbol%", { symbol: stakingToken?.symbol || "" })} linkHref={apyModalLink} earningTokenSymbol={earningToken?.symbol} autoCompoundFrequency={autoCompoundFrequency} performanceFee={performanceFee} - />, - ) + /> + ); const openRoiModal = useCallback( (event: React.MouseEvent) => { - event.stopPropagation() - onPresentApyModal() + event.stopPropagation(); + onPresentApyModal(); }, - [onPresentApyModal], - ) + [onPresentApyModal] + ); - const isValidate = apr !== undefined && !Number.isNaN(apr) + const isValidate = apr !== undefined && !Number.isNaN(apr); return ( @@ -109,8 +109,8 @@ export function Apr({ <> { - if (!showIcon || isFinished) return - openRoiModal(event) + if (!showIcon || isFinished) return; + openRoiModal(event); }} fontSize={fontSize} isDisabled={isFinished} @@ -132,5 +132,5 @@ export function Apr({ )} - ) + ); } diff --git a/packages/widgets-internal/pool/AprRowWithToolTip.tsx b/packages/widgets-internal/pool/AprRowWithToolTip.tsx index 6f9fb91dd555c..8ea0e87a69471 100644 --- a/packages/widgets-internal/pool/AprRowWithToolTip.tsx +++ b/packages/widgets-internal/pool/AprRowWithToolTip.tsx @@ -1,27 +1,27 @@ -import React, { ReactNode } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { Flex, TooltipText, useTooltip } from '@pancakeswap/uikit' +import React, { ReactNode } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { Flex, TooltipText, useTooltip } from "@pancakeswap/uikit"; export const AprRowWithToolTip: React.FC> = ({ children, questionTooltip, }) => { - const { t } = useTranslation() + const { t } = useTranslation(); const tooltipContent = t( - 'Calculated based on current rates and subject to change based on various external variables. It is a rough estimate provided for convenience only, and by no means represents guaranteed returns.', - ) + "Calculated based on current rates and subject to change based on various external variables. It is a rough estimate provided for convenience only, and by no means represents guaranteed returns." + ); - const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, { placement: 'bottom-start' }) + const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, { placement: "bottom-start" }); return ( {tooltipVisible && tooltip} - {`${t('APR')}:`} + {`${t("APR")}:`} {questionTooltip} {children} - ) -} + ); +}; diff --git a/packages/widgets-internal/pool/Cells/AprCell.tsx b/packages/widgets-internal/pool/Cells/AprCell.tsx index c5cbbff8fff96..ae6f981a9f111 100644 --- a/packages/widgets-internal/pool/Cells/AprCell.tsx +++ b/packages/widgets-internal/pool/Cells/AprCell.tsx @@ -1,32 +1,32 @@ -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' -import BigNumber from 'bignumber.js' -import { useTranslation } from '@pancakeswap/localization' -import { createElement, FunctionComponent } from 'react' -import { Text, useMatchBreakpoints } from '@pancakeswap/uikit' +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; +import BigNumber from "bignumber.js"; +import { useTranslation } from "@pancakeswap/localization"; +import { createElement, FunctionComponent } from "react"; +import { Text, useMatchBreakpoints } from "@pancakeswap/uikit"; -import { CellContent, BaseCell } from './BaseCell' -import { DeserializedPool } from '../types' +import { CellContent, BaseCell } from "./BaseCell"; +import { DeserializedPool } from "../types"; interface AprCellProps { - pool: DeserializedPool + pool: DeserializedPool; aprComp: FunctionComponent<{ - pool: DeserializedPool - stakedBalance: BigNumber - showIcon: boolean - }> + pool: DeserializedPool; + stakedBalance: BigNumber; + showIcon: boolean; + }>; } export function AprCell({ pool, aprComp }: AprCellProps) { - const { t } = useTranslation() - const { isMobile } = useMatchBreakpoints() - const { userData } = pool - const stakedBalance = userData?.stakedBalance ? new BigNumber(userData.stakedBalance) : BIG_ZERO + const { t } = useTranslation(); + const { isMobile } = useMatchBreakpoints(); + const { userData } = pool; + const stakedBalance = userData?.stakedBalance ? new BigNumber(userData.stakedBalance) : BIG_ZERO; return ( - + - {t('APR')} + {t("APR")} {createElement(aprComp, { pool, @@ -35,5 +35,5 @@ export function AprCell({ pool, aprComp }: AprCellProps) { })} - ) + ); } diff --git a/packages/widgets-internal/pool/Cells/BaseCell.tsx b/packages/widgets-internal/pool/Cells/BaseCell.tsx index 6eeaca6ba7003..8db4b749cf0eb 100644 --- a/packages/widgets-internal/pool/Cells/BaseCell.tsx +++ b/packages/widgets-internal/pool/Cells/BaseCell.tsx @@ -1,12 +1,12 @@ -import { styled } from 'styled-components' -import { Flex, FlexProps, Text } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { Flex, FlexProps, Text } from "@pancakeswap/uikit"; export const BaseCell = styled(Flex)` color: black; padding: 24px 8px; flex-direction: column; justify-content: flex-start; -` +`; export const CellContent = styled(Flex)` flex-direction: column; @@ -16,4 +16,4 @@ export const CellContent = styled(Flex)` ${Text} { line-height: 1; } -` +`; diff --git a/packages/widgets-internal/pool/Cells/EarningCell.tsx b/packages/widgets-internal/pool/Cells/EarningCell.tsx index a114a4437eb89..eb83eb79a270a 100644 --- a/packages/widgets-internal/pool/Cells/EarningCell.tsx +++ b/packages/widgets-internal/pool/Cells/EarningCell.tsx @@ -1,16 +1,16 @@ -import { styled } from 'styled-components' -import BigNumber from 'bignumber.js' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' -import { getBalanceNumber } from '@pancakeswap/utils/formatBalance' -import { useTranslation } from '@pancakeswap/localization' +import { styled } from "styled-components"; +import BigNumber from "bignumber.js"; +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; +import { getBalanceNumber } from "@pancakeswap/utils/formatBalance"; +import { useTranslation } from "@pancakeswap/localization"; -import { Skeleton, Text, Flex, Box, Balance, useMatchBreakpoints } from '@pancakeswap/uikit' -import { DeserializedPool } from '../types' -import { CellContent, BaseCell } from './BaseCell' +import { Skeleton, Text, Flex, Box, Balance, useMatchBreakpoints } from "@pancakeswap/uikit"; +import { DeserializedPool } from "../types"; +import { CellContent, BaseCell } from "./BaseCell"; interface EarningsCellProps { - pool: DeserializedPool - account: string + pool: DeserializedPool; + account: string; } const StyledCell = styled(BaseCell)` @@ -18,26 +18,26 @@ const StyledCell = styled(BaseCell)` ${({ theme }) => theme.mediaQueries.sm} { flex: 1 0 120px; } -` +`; export function EarningsCell({ pool, account }: EarningsCellProps) { - const { t } = useTranslation() - const { isMobile } = useMatchBreakpoints() - const { earningToken, userData, earningTokenPrice } = pool + const { t } = useTranslation(); + const { isMobile } = useMatchBreakpoints(); + const { earningToken, userData, earningTokenPrice } = pool; - const earnings = userData?.pendingReward ? new BigNumber(userData.pendingReward) : BIG_ZERO - const earningTokenBalance = getBalanceNumber(earnings, earningToken.decimals) + const earnings = userData?.pendingReward ? new BigNumber(userData.pendingReward) : BIG_ZERO; + const earningTokenBalance = getBalanceNumber(earnings, earningToken.decimals); - const earningPrice = earningTokenPrice ? earnings.multipliedBy(earningTokenPrice) : BIG_ZERO + const earningPrice = earningTokenPrice ? earnings.multipliedBy(earningTokenPrice) : BIG_ZERO; - const earningTokenDollarBalance: number = getBalanceNumber(earningPrice, earningToken.decimals) - const hasEarnings = account && earnings.gt(0) + const earningTokenDollarBalance: number = getBalanceNumber(earningPrice, earningToken.decimals); + const hasEarnings = account && earnings.gt(0); - const labelText = t('%asset% Earned', { asset: earningToken.symbol }) + const labelText = t("%asset% Earned", { asset: earningToken.symbol }); const handleEarningsClick = (event: React.MouseEvent) => { - event.stopPropagation() - } + event.stopPropagation(); + }; return ( @@ -54,8 +54,8 @@ export function EarningsCell({ pool, account }: EarningsCellProps) { @@ -82,5 +82,5 @@ export function EarningsCell({ pool, account }: EarningsCellProps) { )} - ) + ); } diff --git a/packages/widgets-internal/pool/Cells/EndsInCell.tsx b/packages/widgets-internal/pool/Cells/EndsInCell.tsx index 180072c9a0fdc..9637c868b287a 100644 --- a/packages/widgets-internal/pool/Cells/EndsInCell.tsx +++ b/packages/widgets-internal/pool/Cells/EndsInCell.tsx @@ -1,18 +1,18 @@ -import getTimePeriods from '@pancakeswap/utils/getTimePeriods' -import { useTranslation } from '@pancakeswap/localization' -import { useMemo } from 'react' -import { Text, Flex, useTooltip, TimerIcon } from '@pancakeswap/uikit' +import getTimePeriods from "@pancakeswap/utils/getTimePeriods"; +import { useTranslation } from "@pancakeswap/localization"; +import { useMemo } from "react"; +import { Text, Flex, useTooltip, TimerIcon } from "@pancakeswap/uikit"; -import { CellContent, BaseCell } from './BaseCell' -import { DeserializedPool } from '../types' +import { CellContent, BaseCell } from "./BaseCell"; +import { DeserializedPool } from "../types"; interface EndsInCellProps { - pool: DeserializedPool - getNow: () => number + pool: DeserializedPool; + getNow: () => number; } interface EndTimeTooltipComponentProps { - endTime: number + endTime: number; } export const EndTimeTooltipComponent: React.FC> = ({ @@ -21,45 +21,45 @@ export const EndTimeTooltipComponent: React.FC - {t('End Time')}: + {t("End Time")}: {new Date(endTime * 1000).toLocaleString(locale, { - month: 'short', - day: 'numeric', - year: 'numeric', - hour: 'numeric', - minute: '2-digit', + month: "short", + day: "numeric", + year: "numeric", + hour: "numeric", + minute: "2-digit", hour12: true, })} - ) -} + ); +}; export function TimeCountdownDisplay({ timestamp, getNow = () => Date.now(), }: { - timestamp: number - getNow?: () => number + timestamp: number; + getNow?: () => number; }) { - const { t } = useTranslation() + const { t } = useTranslation(); - const currentDate = getNow() / 1000 - const poolTimeRemaining = Math.abs(timestamp - currentDate) - const endTimeObject = useMemo(() => getTimePeriods(poolTimeRemaining), [poolTimeRemaining]) + const currentDate = getNow() / 1000; + const poolTimeRemaining = Math.abs(timestamp - currentDate); + const endTimeObject = useMemo(() => getTimePeriods(poolTimeRemaining), [poolTimeRemaining]); const { targetRef: endTimeTargetRef, tooltip: endTimeTooltip, tooltipVisible: endTimeTooltipVisible, } = useTooltip(, { - placement: 'top', - }) + placement: "top", + }); return ( @@ -67,34 +67,34 @@ export function TimeCountdownDisplay({ {poolTimeRemaining > 0 ? endTimeObject?.totalDays ? endTimeObject?.totalDays === 1 - ? t('1 day') - : t('%days% days', { days: endTimeObject?.totalDays }) - : t('< 1 day') - : t('%days% days', { days: 0 })} + ? t("1 day") + : t("%days% days", { days: endTimeObject?.totalDays }) + : t("< 1 day") + : t("%days% days", { days: 0 })} {endTimeTooltipVisible && endTimeTooltip} - ) + ); } export function EndsInCell({ pool, getNow }: EndsInCellProps) { - const { t } = useTranslation() - const { endTimestamp = 0, isFinished } = pool + const { t } = useTranslation(); + const { endTimestamp = 0, isFinished } = pool; const countdown = - isFinished || !endTimestamp ? - : + isFinished || !endTimestamp ? - : ; return ( - + - {t('Ends in')} + {t("Ends in")} {countdown} - ) + ); } diff --git a/packages/widgets-internal/pool/Cells/ExpandActionCell.tsx b/packages/widgets-internal/pool/Cells/ExpandActionCell.tsx index 5c55d4333e59c..d52ba35d83183 100644 --- a/packages/widgets-internal/pool/Cells/ExpandActionCell.tsx +++ b/packages/widgets-internal/pool/Cells/ExpandActionCell.tsx @@ -1,12 +1,12 @@ -import { styled } from 'styled-components' -import { useTranslation } from '@pancakeswap/localization' +import { styled } from "styled-components"; +import { useTranslation } from "@pancakeswap/localization"; -import { Text, ChevronDownIcon } from '@pancakeswap/uikit' -import { BaseCell } from './BaseCell' +import { Text, ChevronDownIcon } from "@pancakeswap/uikit"; +import { BaseCell } from "./BaseCell"; interface ExpandActionCellProps { - expanded: boolean - isFullLayout: boolean + expanded: boolean; + isFullLayout: boolean; } const StyledCell = styled(BaseCell)` @@ -21,26 +21,26 @@ const StyledCell = styled(BaseCell)` padding-right: 32px; padding-left: 8px; } -` +`; const ArrowIcon = styled((props: any) => )<{ $toggled?: boolean }>` - transform: ${({ $toggled }) => ($toggled ? 'rotate(180deg)' : 'rotate(0)')}; + transform: ${({ $toggled }) => ($toggled ? "rotate(180deg)" : "rotate(0)")}; height: 24px; -` +`; export const ExpandActionCell: React.FC> = ({ expanded, isFullLayout, }) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( {isFullLayout && ( - {expanded ? t('Hide') : t('Details')} + {expanded ? t("Hide") : t("Details")} )} - ) -} + ); +}; diff --git a/packages/widgets-internal/pool/Cells/NameCell.tsx b/packages/widgets-internal/pool/Cells/NameCell.tsx index aae7b44bfcbc1..5a9153964f366 100644 --- a/packages/widgets-internal/pool/Cells/NameCell.tsx +++ b/packages/widgets-internal/pool/Cells/NameCell.tsx @@ -1,18 +1,18 @@ -import BigNumber from 'bignumber.js' -import { useTranslation } from '@pancakeswap/localization' -import React, { useMemo, ReactNode } from 'react' -import { styled } from 'styled-components' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' -import { Text, Skeleton, useMatchBreakpoints } from '@pancakeswap/uikit' +import BigNumber from "bignumber.js"; +import { useTranslation } from "@pancakeswap/localization"; +import React, { useMemo, ReactNode } from "react"; +import { styled } from "styled-components"; +import { BIG_ZERO } from "@pancakeswap/utils/bigNumber"; +import { Text, Skeleton, useMatchBreakpoints } from "@pancakeswap/uikit"; -import { DeserializedPool } from '../types' -import { BaseCell, CellContent } from './BaseCell' +import { DeserializedPool } from "../types"; +import { BaseCell, CellContent } from "./BaseCell"; interface NameCellProps { - pool: DeserializedPool - userShares?: BigNumber - totalCakeInVault?: BigNumber - tokenPairImage: ReactNode + pool: DeserializedPool; + userShares?: BigNumber; + totalCakeInVault?: BigNumber; + tokenPairImage: ReactNode; } const StyledCell = styled(BaseCell)` @@ -23,32 +23,32 @@ const StyledCell = styled(BaseCell)` flex: 1 0 150px; padding-left: 32px; } -` +`; export function NameCell({ pool, totalCakeInVault, userShares, tokenPairImage }: NameCellProps) { - const { t } = useTranslation() - const { isMobile } = useMatchBreakpoints() - const { sousId, stakingToken, earningToken, userData, isFinished, vaultKey, totalStaked } = pool - const hasVaultShares = userShares?.gt(0) + const { t } = useTranslation(); + const { isMobile } = useMatchBreakpoints(); + const { sousId, stakingToken, earningToken, userData, isFinished, vaultKey, totalStaked } = pool; + const hasVaultShares = userShares?.gt(0); - const stakingTokenSymbol = stakingToken.symbol - const earningTokenSymbol = earningToken.symbol + const stakingTokenSymbol = stakingToken.symbol; + const earningTokenSymbol = earningToken.symbol; - const stakedBalance = userData?.stakedBalance ? new BigNumber(userData.stakedBalance) : BIG_ZERO - const isStaked = stakedBalance.gt(0) + const stakedBalance = userData?.stakedBalance ? new BigNumber(userData.stakedBalance) : BIG_ZERO; + const isStaked = stakedBalance.gt(0); - const showStakedTag = vaultKey ? hasVaultShares : isStaked + const showStakedTag = vaultKey ? hasVaultShares : isStaked; - const title: React.ReactNode = `${t('Earn')} ${earningTokenSymbol}` - const subtitle: React.ReactNode = `${t('Stake')} ${stakingTokenSymbol}` - const showSubtitle = sousId !== 0 || (sousId === 0 && !isMobile) + const title: React.ReactNode = `${t("Earn")} ${earningTokenSymbol}`; + const subtitle: React.ReactNode = `${t("Stake")} ${stakingTokenSymbol}`; + const showSubtitle = sousId !== 0 || (sousId === 0 && !isMobile); const isLoaded = useMemo(() => { if (pool.vaultKey) { - return totalCakeInVault && totalCakeInVault.gte(0) + return totalCakeInVault && totalCakeInVault.gte(0); } - return totalStaked && totalStaked.gte(0) - }, [pool.vaultKey, totalCakeInVault, totalStaked]) + return totalStaked && totalStaked.gte(0); + }, [pool.vaultKey, totalCakeInVault, totalStaked]); return ( @@ -57,8 +57,8 @@ export function NameCell({ pool, totalCakeInVault, userShares, tokenPairImage {tokenPairImage} {showStakedTag && ( - - {t('Staked')} + + {t("Staked")} )} @@ -81,5 +81,5 @@ export function NameCell({ pool, totalCakeInVault, userShares, tokenPairImage )} - ) + ); } diff --git a/packages/widgets-internal/pool/Cells/TotalStakedCell.tsx b/packages/widgets-internal/pool/Cells/TotalStakedCell.tsx index 1b7e70f97ca0b..f2793236f6001 100644 --- a/packages/widgets-internal/pool/Cells/TotalStakedCell.tsx +++ b/packages/widgets-internal/pool/Cells/TotalStakedCell.tsx @@ -1,29 +1,29 @@ -import { styled } from 'styled-components' -import { useTranslation } from '@pancakeswap/localization' -import BigNumber from 'bignumber.js' -import { getBalanceNumber } from '@pancakeswap/utils/formatBalance' -import { Text, Skeleton, Flex, Balance } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { useTranslation } from "@pancakeswap/localization"; +import BigNumber from "bignumber.js"; +import { getBalanceNumber } from "@pancakeswap/utils/formatBalance"; +import { Text, Skeleton, Flex, Balance } from "@pancakeswap/uikit"; -import { BaseCell, CellContent } from './BaseCell' +import { BaseCell, CellContent } from "./BaseCell"; interface TotalStakedCellProps { - stakingTokenDecimals: number - stakingTokenSymbol: string - totalStaked?: BigNumber + stakingTokenDecimals: number; + stakingTokenSymbol: string; + totalStaked?: BigNumber; } const StyledCell = styled(BaseCell)` flex: 2 0 100px; -` +`; export function TotalStakedCell({ stakingTokenSymbol, totalStaked, stakingTokenDecimals }: TotalStakedCellProps) { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - {t('Total staked')} + {t("Total staked")} {totalStaked && totalStaked.gte(0) ? ( @@ -39,5 +39,5 @@ export function TotalStakedCell({ stakingTokenSymbol, totalStaked, stakingTokenD )} - ) + ); } diff --git a/packages/widgets-internal/pool/CollectModal.tsx b/packages/widgets-internal/pool/CollectModal.tsx index a04b58947e073..b93571cb68f15 100644 --- a/packages/widgets-internal/pool/CollectModal.tsx +++ b/packages/widgets-internal/pool/CollectModal.tsx @@ -1,25 +1,25 @@ -import { useTranslation } from '@pancakeswap/localization' -import { formatNumber } from '@pancakeswap/utils/formatBalance' -import { useTheme } from 'styled-components' +import { useTranslation } from "@pancakeswap/localization"; +import { formatNumber } from "@pancakeswap/utils/formatBalance"; +import { useTheme } from "styled-components"; -import { Flex, Heading, Button, Text, AutoRenewIcon, Modal } from '@pancakeswap/uikit' -import getThemeValue from '@pancakeswap/uikit/util/getThemeValue' +import { Flex, Heading, Button, Text, AutoRenewIcon, Modal } from "@pancakeswap/uikit"; +import getThemeValue from "@pancakeswap/uikit/util/getThemeValue"; export interface CollectModalProps { - formattedBalance: string - fullBalance: string - earningTokenSymbol: string - earningsDollarValue: number - sousId: number - isBnbPool: boolean - onDismiss?: () => void - poolAddress?: string - earningTokenAddress?: string + formattedBalance: string; + fullBalance: string; + earningTokenSymbol: string; + earningsDollarValue: number; + sousId: number; + isBnbPool: boolean; + onDismiss?: () => void; + poolAddress?: string; + earningTokenAddress?: string; } -export interface CollectModalWithHandlerProps extends Omit { - handleHarvestConfirm: () => Promise - pendingTx: boolean +export interface CollectModalWithHandlerProps extends Omit { + handleHarvestConfirm: () => Promise; + pendingTx: boolean; } export function CollectModal({ @@ -30,17 +30,17 @@ export function CollectModal({ handleHarvestConfirm, pendingTx, }: CollectModalWithHandlerProps) { - const { t } = useTranslation() - const theme = useTheme() + const { t } = useTranslation(); + const theme = useTheme(); return ( - {t('Harvesting')}: + {t("Harvesting")}: @@ -57,11 +57,11 @@ export function CollectModal({ isLoading={pendingTx} endIcon={pendingTx ? : null} > - {pendingTx ? t('Confirming') : t('Confirm')} + {pendingTx ? t("Confirming") : t("Confirm")} - ) + ); } diff --git a/packages/widgets-internal/pool/PercentageButton.tsx b/packages/widgets-internal/pool/PercentageButton.tsx index 63646155a25d2..e9ce07f14cf48 100644 --- a/packages/widgets-internal/pool/PercentageButton.tsx +++ b/packages/widgets-internal/pool/PercentageButton.tsx @@ -1,20 +1,20 @@ -import { styled } from 'styled-components' -import { Button } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { Button } from "@pancakeswap/uikit"; interface PercentageButtonProps { - onClick: () => void + onClick: () => void; } const StyledButton = styled(Button)` flex-grow: 1; -` +`; const PercentageButton: React.FC> = ({ children, onClick }) => { return ( {children} - ) -} + ); +}; -export default PercentageButton +export default PercentageButton; diff --git a/packages/widgets-internal/pool/PoolCard.tsx b/packages/widgets-internal/pool/PoolCard.tsx index 6e1da1d8d0284..66623d94b101c 100644 --- a/packages/widgets-internal/pool/PoolCard.tsx +++ b/packages/widgets-internal/pool/PoolCard.tsx @@ -1,38 +1,38 @@ -import { useTranslation } from '@pancakeswap/localization' -import { ReactElement } from 'react' -import { Flex, CardBody, CardRibbon, Skeleton } from '@pancakeswap/uikit' -import { PoolCardHeader, PoolCardHeaderTitle } from './PoolCardHeader' -import { StyledCard } from './StyledCard' -import { DeserializedPool } from './types' +import { useTranslation } from "@pancakeswap/localization"; +import { ReactElement } from "react"; +import { Flex, CardBody, CardRibbon, Skeleton } from "@pancakeswap/uikit"; +import { PoolCardHeader, PoolCardHeaderTitle } from "./PoolCardHeader"; +import { StyledCard } from "./StyledCard"; +import { DeserializedPool } from "./types"; interface PoolCardPropsType { - pool: DeserializedPool - cardContent: ReactElement - aprRow: ReactElement - cardFooter: ReactElement - tokenPairImage: ReactElement - isStaked: boolean + pool: DeserializedPool; + cardContent: ReactElement; + aprRow: ReactElement; + cardFooter: ReactElement; + tokenPairImage: ReactElement; + isStaked: boolean; } export function PoolCard({ pool, cardContent, aprRow, isStaked, cardFooter, tokenPairImage }: PoolCardPropsType) { - const { sousId, stakingToken, earningToken, isFinished, totalStaked } = pool - const { t } = useTranslation() + const { sousId, stakingToken, earningToken, isFinished, totalStaked } = pool; + const { t } = useTranslation(); - const isCakePool = earningToken?.symbol === 'CAKE' && stakingToken?.symbol === 'CAKE' + const isCakePool = earningToken?.symbol === "CAKE" && stakingToken?.symbol === "CAKE"; return ( } + ribbon={isFinished && } > {totalStaked && totalStaked.gte(0) ? ( <> {tokenPairImage} @@ -55,5 +55,5 @@ export function PoolCard({ pool, cardContent, aprRow, isStaked, cardFooter, t {cardFooter} - ) + ); } diff --git a/packages/widgets-internal/pool/PoolCardHeader.tsx b/packages/widgets-internal/pool/PoolCardHeader.tsx index dfdf0ccdd14f5..c3530db7098df 100644 --- a/packages/widgets-internal/pool/PoolCardHeader.tsx +++ b/packages/widgets-internal/pool/PoolCardHeader.tsx @@ -1,21 +1,21 @@ -import { ReactNode } from 'react' -import { styled } from 'styled-components' -import getThemeValue from '@pancakeswap/uikit/util/getThemeValue' -import { CardHeader, Flex, Heading, Text } from '@pancakeswap/uikit' +import { ReactNode } from "react"; +import { styled } from "styled-components"; +import getThemeValue from "@pancakeswap/uikit/util/getThemeValue"; +import { CardHeader, Flex, Heading, Text } from "@pancakeswap/uikit"; const Wrapper = styled(CardHeader)<{ isFinished?: boolean; background: string }>` background: ${({ isFinished, background, theme }) => isFinished ? theme.colors.backgroundDisabled : getThemeValue(theme, `colors.${background}`)}; border-radius: ${({ theme }) => `${theme.radii.card} ${theme.radii.card} 0 0`}; -` +`; export const PoolCardHeader: React.FC< React.PropsWithChildren<{ - isFinished?: boolean - isStaking?: boolean + isFinished?: boolean; + isStaking?: boolean; }> > = ({ isFinished = false, isStaking = false, children }) => { - const background = isStaking ? 'gradientBubblegum' : 'gradientCardHeader' + const background = isStaking ? "gradientBubblegum" : "gradientCardHeader"; return ( @@ -23,20 +23,20 @@ export const PoolCardHeader: React.FC< {children} - ) -} + ); +}; export const PoolCardHeaderTitle: React.FC< React.PropsWithChildren<{ isFinished?: boolean; title: ReactNode; subTitle: ReactNode }> > = ({ isFinished, title, subTitle }) => { return ( - + {title} - + {subTitle} - ) -} + ); +}; diff --git a/packages/widgets-internal/pool/PoolControls.tsx b/packages/widgets-internal/pool/PoolControls.tsx index 9914f85cbf287..63af5bc106676 100644 --- a/packages/widgets-internal/pool/PoolControls.tsx +++ b/packages/widgets-internal/pool/PoolControls.tsx @@ -1,16 +1,16 @@ -import { useCallback, useEffect, useMemo, useRef, useState, ReactElement } from 'react' -import { styled } from 'styled-components' -import BigNumber from 'bignumber.js' -import partition from 'lodash/partition' -import { useTranslation } from '@pancakeswap/localization' -import { useIntersectionObserver } from '@pancakeswap/hooks' -import latinise from '@pancakeswap/utils/latinise' -import { useRouter } from 'next/router' -import { Flex, Text, SearchInput, Select, OptionProps, ViewMode } from '@pancakeswap/uikit' - -import { sortPools } from './helpers' -import PoolTabButtons from './PoolTabButtons' -import { DeserializedPool, DeserializedPoolVault } from './types' +import { useCallback, useEffect, useMemo, useRef, useState, ReactElement } from "react"; +import { styled } from "styled-components"; +import BigNumber from "bignumber.js"; +import partition from "lodash/partition"; +import { useTranslation } from "@pancakeswap/localization"; +import { useIntersectionObserver } from "@pancakeswap/hooks"; +import latinise from "@pancakeswap/utils/latinise"; +import { useRouter } from "next/router"; +import { Flex, Text, SearchInput, Select, OptionProps, ViewMode } from "@pancakeswap/uikit"; + +import { sortPools } from "./helpers"; +import PoolTabButtons from "./PoolTabButtons"; +import { DeserializedPool, DeserializedPoolVault } from "./types"; const PoolControlsView = styled.div` display: flex; @@ -28,7 +28,7 @@ const PoolControlsView = styled.div` padding: 16px 32px; margin-bottom: 0; } -` +`; const FilterContainer = styled.div` display: flex; @@ -40,40 +40,40 @@ const FilterContainer = styled.div` width: auto; padding: 0; } -` +`; const LabelWrapper = styled.div` > ${Text} { font-size: 12px; } -` +`; const ControlStretch = styled(Flex)` > div { flex: 1; } -` +`; -const NUMBER_OF_POOLS_VISIBLE = 12 +const NUMBER_OF_POOLS_VISIBLE = 12; interface ChildrenReturn { - chosenPools: DeserializedPool[] - viewMode: ViewMode - stakedOnly: boolean - showFinishedPools: boolean - normalizedUrlSearch: string + chosenPools: DeserializedPool[]; + viewMode: ViewMode; + stakedOnly: boolean; + showFinishedPools: boolean; + normalizedUrlSearch: string; } interface PoolControlsPropsType { - pools: DeserializedPool[] - children: (childrenReturn: ChildrenReturn) => ReactElement - stakedOnly: boolean - setStakedOnly: (s: boolean) => void - viewMode: ViewMode - setViewMode: (s: ViewMode) => void - account: string - threshHold: number - hideViewMode?: boolean + pools: DeserializedPool[]; + children: (childrenReturn: ChildrenReturn) => ReactElement; + stakedOnly: boolean; + setStakedOnly: (s: boolean) => void; + viewMode: ViewMode; + setViewMode: (s: ViewMode) => void; + account: string; + threshHold: number; + hideViewMode?: boolean; } export function PoolControls({ @@ -87,94 +87,94 @@ export function PoolControls({ threshHold, hideViewMode = false, }: PoolControlsPropsType) { - const router = useRouter() - const { t } = useTranslation() + const router = useRouter(); + const { t } = useTranslation(); - const [numberOfPoolsVisible, setNumberOfPoolsVisible] = useState(NUMBER_OF_POOLS_VISIBLE) - const { observerRef, isIntersecting } = useIntersectionObserver() + const [numberOfPoolsVisible, setNumberOfPoolsVisible] = useState(NUMBER_OF_POOLS_VISIBLE); + const { observerRef, isIntersecting } = useIntersectionObserver(); const normalizedUrlSearch = useMemo( - () => (typeof router?.query?.search === 'string' ? router.query.search : ''), - [router.query], - ) - const [_searchQuery, setSearchQuery] = useState('') - const searchQuery = normalizedUrlSearch && !_searchQuery ? normalizedUrlSearch : _searchQuery - const [sortOption, setSortOption] = useState('hot') - const chosenPoolsLength = useRef(0) - - const [finishedPools, openPools] = useMemo(() => partition(pools, (pool) => pool.isFinished), [pools]) + () => (typeof router?.query?.search === "string" ? router.query.search : ""), + [router.query] + ); + const [_searchQuery, setSearchQuery] = useState(""); + const searchQuery = normalizedUrlSearch && !_searchQuery ? normalizedUrlSearch : _searchQuery; + const [sortOption, setSortOption] = useState("hot"); + const chosenPoolsLength = useRef(0); + + const [finishedPools, openPools] = useMemo(() => partition(pools, (pool) => pool.isFinished), [pools]); const openPoolsWithStartBlockFilter = useMemo( () => openPools.filter((pool) => - threshHold > 0 && pool.startTimestamp ? Number(pool.startTimestamp) < threshHold : true, + threshHold > 0 && pool.startTimestamp ? Number(pool.startTimestamp) < threshHold : true ), - [threshHold, openPools], - ) + [threshHold, openPools] + ); const stakedOnlyFinishedPools = useMemo( () => finishedPools.filter((pool) => { if (pool.vaultKey) { - const vault = pool as DeserializedPoolVault - return vault?.userData?.userShares?.gt(0) + const vault = pool as DeserializedPoolVault; + return vault?.userData?.userShares?.gt(0); } - return pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0) + return pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0); }), - [finishedPools], - ) + [finishedPools] + ); const stakedOnlyOpenPools = useCallback(() => { return openPoolsWithStartBlockFilter.filter((pool) => { if (pool.vaultKey) { - const vault = pool as DeserializedPoolVault - return vault?.userData?.userShares?.gt(0) + const vault = pool as DeserializedPoolVault; + return vault?.userData?.userShares?.gt(0); } - return pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0) - }) - }, [openPoolsWithStartBlockFilter]) - const hasStakeInFinishedPools = stakedOnlyFinishedPools.length > 0 + return pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0); + }); + }, [openPoolsWithStartBlockFilter]); + const hasStakeInFinishedPools = stakedOnlyFinishedPools.length > 0; useEffect(() => { if (isIntersecting) { setNumberOfPoolsVisible((poolsCurrentlyVisible) => { if (poolsCurrentlyVisible <= chosenPoolsLength.current) { - return poolsCurrentlyVisible + NUMBER_OF_POOLS_VISIBLE + return poolsCurrentlyVisible + NUMBER_OF_POOLS_VISIBLE; } - return poolsCurrentlyVisible - }) + return poolsCurrentlyVisible; + }); } - }, [isIntersecting]) - const showFinishedPools = router.pathname.includes('history') + }, [isIntersecting]); + const showFinishedPools = router.pathname.includes("history"); const handleChangeSearchQuery = useCallback( (event: React.ChangeEvent) => setSearchQuery(event.target.value), - [], - ) + [] + ); - const handleSortOptionChange = useCallback((option: OptionProps) => setSortOption(option.value), []) + const handleSortOptionChange = useCallback((option: OptionProps) => setSortOption(option.value), []); - let chosenPools: DeserializedPool[] + let chosenPools: DeserializedPool[]; if (showFinishedPools) { - chosenPools = stakedOnly ? stakedOnlyFinishedPools : finishedPools + chosenPools = stakedOnly ? stakedOnlyFinishedPools : finishedPools; } else { - chosenPools = stakedOnly ? stakedOnlyOpenPools() : openPoolsWithStartBlockFilter + chosenPools = stakedOnly ? stakedOnlyOpenPools() : openPoolsWithStartBlockFilter; } chosenPools = useMemo(() => { - const sortedPools = sortPools(account, sortOption, chosenPools).slice(0, numberOfPoolsVisible) + const sortedPools = sortPools(account, sortOption, chosenPools).slice(0, numberOfPoolsVisible); if (searchQuery) { - const lowercaseQuery = latinise(searchQuery.toLowerCase()) + const lowercaseQuery = latinise(searchQuery.toLowerCase()); return sortedPools.filter((pool) => - latinise(pool?.earningToken?.symbol?.toLowerCase() || '').includes(lowercaseQuery), - ) + latinise(pool?.earningToken?.symbol?.toLowerCase() || "").includes(lowercaseQuery) + ); } - return sortedPools - }, [account, sortOption, chosenPools, numberOfPoolsVisible, searchQuery]) + return sortedPools; + }, [account, sortOption, chosenPools, numberOfPoolsVisible, searchQuery]); - chosenPoolsLength.current = chosenPools.length + chosenPoolsLength.current = chosenPools.length; const childrenReturn: ChildrenReturn = useMemo( () => ({ chosenPools, stakedOnly, viewMode, normalizedUrlSearch, showFinishedPools }), - [chosenPools, normalizedUrlSearch, showFinishedPools, stakedOnly, viewMode], - ) + [chosenPools, normalizedUrlSearch, showFinishedPools, stakedOnly, viewMode] + ); return ( <> @@ -190,30 +190,30 @@ export function PoolControls({ - {t('Sort by')} + {t("Sort by")} { // replace commas with periods, because we exclusively uses period as the decimal separator - enforcer(event.target.value.replace(/,/g, '.')) + enforcer(event.target.value.replace(/,/g, ".")); }} // universal input options inputMode="decimal" - title={t('Token Amount')} + title={t("Token Amount")} autoComplete="off" autoCorrect="off" // text-specific options type="text" pattern="^[0-9]*[.,]?[0-9]*$" - placeholder={placeholder || '0.0'} + placeholder={placeholder || "0.0"} minLength={1} maxLength={79} spellCheck="false" /> - ) -}) + ); +}); diff --git a/packages/widgets-internal/swap/Page.tsx b/packages/widgets-internal/swap/Page.tsx index c272fadd04f78..4a2bc13e3d775 100644 --- a/packages/widgets-internal/swap/Page.tsx +++ b/packages/widgets-internal/swap/Page.tsx @@ -1,17 +1,17 @@ -import { ReactNode } from 'react' -import { AtomBox, AtomBoxProps, SwapCSS } from '@pancakeswap/uikit' +import { ReactNode } from "react"; +import { AtomBox, AtomBoxProps, SwapCSS } from "@pancakeswap/uikit"; -import { SwapFooter } from './Footer' +import { SwapFooter } from "./Footer"; type SwapPageProps = AtomBoxProps & { - removePadding?: boolean - hideFooterOnDesktop?: boolean - noMinHeight?: boolean - helpUrl?: string - helpImage?: ReactNode - externalText?: string - externalLinkUrl?: string -} + removePadding?: boolean; + hideFooterOnDesktop?: boolean; + noMinHeight?: boolean; + helpUrl?: string; + helpImage?: ReactNode; + externalText?: string; + externalLinkUrl?: string; +}; export const SwapPage = ({ removePadding, @@ -27,7 +27,7 @@ export const SwapPage = ({ {children} - + -) +); diff --git a/packages/widgets-internal/swap/SwapCallbackError.tsx b/packages/widgets-internal/swap/SwapCallbackError.tsx index e4d0c0364706d..540de4ceb4c91 100644 --- a/packages/widgets-internal/swap/SwapCallbackError.tsx +++ b/packages/widgets-internal/swap/SwapCallbackError.tsx @@ -1,5 +1,5 @@ -import { styled } from 'styled-components' -import { ErrorIcon } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { ErrorIcon } from "@pancakeswap/uikit"; const SwapCallbackErrorInner = styled.div` background-color: ${({ theme }) => `${theme.colors.failure33}`}; @@ -17,7 +17,7 @@ const SwapCallbackErrorInner = styled.div` margin: 0; font-weight: 500; } -` +`; const SwapCallbackErrorInnerAlertTriangle = styled.div` background-color: ${({ theme }) => `${theme.colors.failure33}`}; @@ -28,7 +28,7 @@ const SwapCallbackErrorInnerAlertTriangle = styled.div` border-radius: 12px; min-width: 48px; height: 48px; -` +`; export function SwapCallbackError({ error }: { error: string }) { return ( @@ -38,5 +38,5 @@ export function SwapCallbackError({ error }: { error: string }) {

{error}

- ) + ); } diff --git a/packages/widgets-internal/swap/SwapInfo.tsx b/packages/widgets-internal/swap/SwapInfo.tsx index 5605527473f53..a9737abef353c 100644 --- a/packages/widgets-internal/swap/SwapInfo.tsx +++ b/packages/widgets-internal/swap/SwapInfo.tsx @@ -1,30 +1,30 @@ -import { useTranslation } from '@pancakeswap/localization' -import { useIsMounted } from '@pancakeswap/hooks' -import { PropsWithChildren, ReactNode } from 'react' -import { AutoColumn, RowBetween, Text, TextProps, IconButton, PencilIcon } from '@pancakeswap/uikit' +import { useTranslation } from "@pancakeswap/localization"; +import { useIsMounted } from "@pancakeswap/hooks"; +import { PropsWithChildren, ReactNode } from "react"; +import { AutoColumn, RowBetween, Text, TextProps, IconButton, PencilIcon } from "@pancakeswap/uikit"; type SwapInfoType = { - price: ReactNode - allowedSlippage?: number - onSlippageClick?: () => void - allowedSlippageSlot?: React.ReactNode -} + price: ReactNode; + allowedSlippage?: number; + onSlippageClick?: () => void; + allowedSlippageSlot?: React.ReactNode; +}; export const SwapInfoLabel = (props: PropsWithChildren) => ( -) +); export const SwapInfo = ({ allowedSlippage, price, onSlippageClick, allowedSlippageSlot }: SwapInfoType) => { - const { t } = useTranslation() - const isMounted = useIsMounted() + const { t } = useTranslation(); + const isMounted = useIsMounted(); return ( {price} - {typeof allowedSlippage === 'number' && ( + {typeof allowedSlippage === "number" && ( - {t('Slippage Tolerance')} + {t("Slippage Tolerance")} {onSlippageClick ? ( @@ -40,5 +40,5 @@ export const SwapInfo = ({ allowedSlippage, price, onSlippageClick, allowedSlipp )} - ) -} + ); +}; diff --git a/packages/widgets-internal/swap/SwapPendingModalContent.tsx b/packages/widgets-internal/swap/SwapPendingModalContent.tsx index a75de653892c5..6d8b69c5fd312 100644 --- a/packages/widgets-internal/swap/SwapPendingModalContent.tsx +++ b/packages/widgets-internal/swap/SwapPendingModalContent.tsx @@ -1,16 +1,16 @@ -import { ReactNode } from 'react' -import { Currency } from '@pancakeswap/sdk' -import { Spinner, Text, Box, ArrowUpIcon, ColumnCenter, AutoColumn } from '@pancakeswap/uikit' -import TokenTransferInfo from './TokenTransferInfo' +import { ReactNode } from "react"; +import { Currency } from "@pancakeswap/sdk"; +import { Spinner, Text, Box, ArrowUpIcon, ColumnCenter, AutoColumn } from "@pancakeswap/uikit"; +import TokenTransferInfo from "./TokenTransferInfo"; interface SwapPendingModalContentProps { - title: string - showIcon?: boolean - currencyA: Currency - currencyB: Currency - amountA: string - amountB: string - children?: ReactNode + title: string; + showIcon?: boolean; + currencyA: Currency; + currencyB: Currency; + amountA: string; + amountB: string; + children?: ReactNode; } export const SwapPendingModalContent: React.FC = ({ @@ -22,8 +22,8 @@ export const SwapPendingModalContent: React.FC = ( amountB, children, }) => { - const symbolA = currencyA?.symbol - const symbolB = currencyB?.symbol + const symbolA = currencyA?.symbol; + const symbolB = currencyB?.symbol; return ( @@ -53,5 +53,5 @@ export const SwapPendingModalContent: React.FC = ( {children} - ) -} + ); +}; diff --git a/packages/widgets-internal/swap/SwapTransactionReceiptModalContent.tsx b/packages/widgets-internal/swap/SwapTransactionReceiptModalContent.tsx index 6af8e22818783..80e81cd5c768c 100644 --- a/packages/widgets-internal/swap/SwapTransactionReceiptModalContent.tsx +++ b/packages/widgets-internal/swap/SwapTransactionReceiptModalContent.tsx @@ -1,9 +1,9 @@ -import { useTranslation } from '@pancakeswap/localization' -import { PropsWithChildren } from 'react' -import { Text, Box, CheckmarkCircleIcon, AutoColumn } from '@pancakeswap/uikit' +import { useTranslation } from "@pancakeswap/localization"; +import { PropsWithChildren } from "react"; +import { Text, Box, CheckmarkCircleIcon, AutoColumn } from "@pancakeswap/uikit"; export const SwapTransactionReceiptModalContent: React.FC = ({ children }) => { - const { t } = useTranslation() + const { t } = useTranslation(); return ( @@ -12,10 +12,10 @@ export const SwapTransactionReceiptModalContent: React.FC = ( - {t('Transaction receipt')} + {t("Transaction receipt")} {children} - ) -} + ); +}; diff --git a/packages/widgets-internal/swap/SwapWidget.tsx b/packages/widgets-internal/swap/SwapWidget.tsx index 5a50a754c4f78..fcb37f0ff705c 100644 --- a/packages/widgets-internal/swap/SwapWidget.tsx +++ b/packages/widgets-internal/swap/SwapWidget.tsx @@ -1,12 +1,12 @@ -import { styled } from 'styled-components' +import { styled } from "styled-components"; -import { ButtonProps, IconButton, ArrowUpDownIcon, ArrowDownIcon } from '@pancakeswap/uikit' -import { CurrencyInputPanel } from './CurrencyInputPanel' -import { CurrencyInputHeader, CurrencyInputHeaderSubTitle, CurrencyInputHeaderTitle } from './CurrencyInputHeader' -import { SwapPage as Page } from './Page' -import { SwapFooter as Footer } from './Footer' -import { SwapInfo as Info, SwapInfoLabel as InfoLabel } from './SwapInfo' -import { TradePrice } from './TradePrice' +import { ButtonProps, IconButton, ArrowUpDownIcon, ArrowDownIcon } from "@pancakeswap/uikit"; +import { CurrencyInputPanel } from "./CurrencyInputPanel"; +import { CurrencyInputHeader, CurrencyInputHeaderSubTitle, CurrencyInputHeaderTitle } from "./CurrencyInputHeader"; +import { SwapPage as Page } from "./Page"; +import { SwapFooter as Footer } from "./Footer"; +import { SwapInfo as Info, SwapInfoLabel as InfoLabel } from "./SwapInfo"; +import { TradePrice } from "./TradePrice"; const SwitchIconButton = styled(IconButton)` box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1); @@ -24,14 +24,14 @@ const SwitchIconButton = styled(IconButton)` fill: white; } } -` +`; const SwitchButton = (props: ButtonProps) => ( -) +); export { SwitchButton, @@ -44,4 +44,4 @@ export { Info, InfoLabel, TradePrice, -} +}; diff --git a/packages/widgets-internal/swap/TokenRowButton.tsx b/packages/widgets-internal/swap/TokenRowButton.tsx index 5590e7203d798..8ed5cb1ff45b3 100644 --- a/packages/widgets-internal/swap/TokenRowButton.tsx +++ b/packages/widgets-internal/swap/TokenRowButton.tsx @@ -1,13 +1,13 @@ -import { styled } from 'styled-components' -import { useTranslation } from '@pancakeswap/localization' -import { Button, RowFixed, Text, CheckmarkCircleIcon, useMatchBreakpoints } from '@pancakeswap/uikit' +import { styled } from "styled-components"; +import { useTranslation } from "@pancakeswap/localization"; +import { Button, RowFixed, Text, CheckmarkCircleIcon, useMatchBreakpoints } from "@pancakeswap/uikit"; const CheckIcon = styled(CheckmarkCircleIcon)` height: 16px; width: 16px; margin-right: 6px; stroke: ${({ theme }) => theme.colors.success}; -` +`; export function TokenRowButton({ token, @@ -16,31 +16,31 @@ export function TokenRowButton({ setImportToken, showImportView, }: { - token: T - isActive: boolean - isAdded: boolean - setImportToken: (token: T) => void - showImportView: () => void + token: T; + isActive: boolean; + isAdded: boolean; + setImportToken: (token: T) => void; + showImportView: () => void; }) { - const { t } = useTranslation() - const { isMobile } = useMatchBreakpoints() + const { t } = useTranslation(); + const { isMobile } = useMatchBreakpoints(); return !isActive && !isAdded ? ( ) : ( - + Active - ) + ); } diff --git a/packages/widgets-internal/swap/TokenTransferInfo.tsx b/packages/widgets-internal/swap/TokenTransferInfo.tsx index 410dc54483a87..53d385a28d9d5 100644 --- a/packages/widgets-internal/swap/TokenTransferInfo.tsx +++ b/packages/widgets-internal/swap/TokenTransferInfo.tsx @@ -1,13 +1,14 @@ -import { Currency } from '@pancakeswap/sdk' -import { Text, Box, Flex, ArrowForwardIcon, CurrencyLogo } from '@pancakeswap/uikit' +import { Currency } from "@pancakeswap/sdk"; +import { Text, Box, Flex, ArrowForwardIcon } from "@pancakeswap/uikit"; +import { CurrencyLogo } from "../components/CurrencyLogo"; interface TokenTransferInfoProps { - symbolA: string - symbolB: string - amountA: string - amountB: string - currencyA: Currency - currencyB: Currency + symbolA: string; + symbolB: string; + amountA: string; + amountB: string; + currencyA: Currency; + currencyB: Currency; } const TokenTransferInfo: React.FC = ({ @@ -32,7 +33,7 @@ const TokenTransferInfo: React.FC = ({ - ) -} + ); +}; -export default TokenTransferInfo +export default TokenTransferInfo; diff --git a/packages/widgets-internal/swap/TradePrice.tsx b/packages/widgets-internal/swap/TradePrice.tsx index 716000b27f2cb..9debcd8a40584 100644 --- a/packages/widgets-internal/swap/TradePrice.tsx +++ b/packages/widgets-internal/swap/TradePrice.tsx @@ -1,23 +1,23 @@ -import { Price, Currency } from '@pancakeswap/swap-sdk-core' -import { formatPrice } from '@pancakeswap/utils/formatFractions' -import { useState } from 'react' -import { AtomBox, SyncAltIcon, AutoRenewIcon, Text, Loading, SwapCSS } from '@pancakeswap/uikit' +import { Price, Currency } from "@pancakeswap/swap-sdk-core"; +import { formatPrice } from "@pancakeswap/utils/formatFractions"; +import { useState } from "react"; +import { AtomBox, SyncAltIcon, AutoRenewIcon, Text, Loading, SwapCSS } from "@pancakeswap/uikit"; interface TradePriceProps { - price?: Price - loading?: boolean + price?: Price; + loading?: boolean; } export function TradePrice({ price, loading }: TradePriceProps) { - const [showInverted, setShowInverted] = useState(false) + const [showInverted, setShowInverted] = useState(false); - const formattedPrice = showInverted ? formatPrice(price, 6) : formatPrice(price?.invert(), 6) - const show = Boolean(price?.baseCurrency && price?.quoteCurrency) + const formattedPrice = showInverted ? formatPrice(price, 6) : formatPrice(price?.invert(), 6); + const show = Boolean(price?.baseCurrency && price?.quoteCurrency); return ( {show ? ( <> @@ -35,8 +35,8 @@ export function TradePrice({ price, loading }: TradePriceProps) { )} ) : ( - '-' + "-" )} - ) + ); } diff --git a/packages/widgets-internal/swap/TransactionErrorContent.tsx b/packages/widgets-internal/swap/TransactionErrorContent.tsx index 1f27086d4d1f6..09e7233cd4d22 100644 --- a/packages/widgets-internal/swap/TransactionErrorContent.tsx +++ b/packages/widgets-internal/swap/TransactionErrorContent.tsx @@ -1,34 +1,34 @@ -import { ReactElement } from 'react' -import { useTranslation } from '@pancakeswap/localization' -import { styled } from 'styled-components' -import { AutoColumn, ErrorIcon, Text, Flex, Button } from '@pancakeswap/uikit' +import { ReactElement } from "react"; +import { useTranslation } from "@pancakeswap/localization"; +import { styled } from "styled-components"; +import { AutoColumn, ErrorIcon, Text, Flex, Button } from "@pancakeswap/uikit"; const Wrapper = styled.div` width: 100%; -` +`; export function TransactionErrorContent({ message, onDismiss, }: { - message: ReactElement | string - onDismiss?: () => void + message: ReactElement | string; + onDismiss?: () => void; }) { - const { t } = useTranslation() + const { t } = useTranslation(); return ( - + {message} {onDismiss ? ( - + ) : null} - ) + ); } diff --git a/packages/widgets-internal/swap/confirmPriceImpactWithoutFee.ts b/packages/widgets-internal/swap/confirmPriceImpactWithoutFee.ts index b58e8894edd65..a3704f723b312 100644 --- a/packages/widgets-internal/swap/confirmPriceImpactWithoutFee.ts +++ b/packages/widgets-internal/swap/confirmPriceImpactWithoutFee.ts @@ -1,5 +1,5 @@ -import { Percent } from '@pancakeswap/swap-sdk-core' -import { ContextApi } from '@pancakeswap/localization' +import { Percent } from "@pancakeswap/swap-sdk-core"; +import { ContextApi } from "@pancakeswap/localization"; /** * Given the price impact, get user confirmation. @@ -11,10 +11,10 @@ export function confirmPriceImpactWithoutFee( priceImpactWithoutFee: Percent, priceImpactWithoutFeeConfirmMin: Percent, allowedPriceImpactHigh: Percent, - t: ContextApi['t'], + t: ContextApi["t"] ): boolean { if (!priceImpactWithoutFee.lessThan(priceImpactWithoutFeeConfirmMin)) { - const confirmWord = 'confirm' + const confirmWord = "confirm"; return ( // eslint-disable-next-line no-alert window.prompt( @@ -23,21 +23,21 @@ export function confirmPriceImpactWithoutFee( { amount: priceImpactWithoutFeeConfirmMin.toFixed(0), word: confirmWord, - }, - ), + } + ) ) === confirmWord - ) + ); } if (!priceImpactWithoutFee.lessThan(allowedPriceImpactHigh)) { // eslint-disable-next-line no-alert return window.confirm( t( - 'This swap has a price impact of at least %amount%%. Please confirm that you would like to continue with this swap.', + "This swap has a price impact of at least %amount%%. Please confirm that you would like to continue with this swap.", { amount: allowedPriceImpactHigh.toFixed(0), - }, - ), - ) + } + ) + ); } - return true + return true; } diff --git a/packages/widgets-internal/swap/index.ts b/packages/widgets-internal/swap/index.ts index 36e493f52b19c..7715306d2f1f8 100644 --- a/packages/widgets-internal/swap/index.ts +++ b/packages/widgets-internal/swap/index.ts @@ -1,15 +1,15 @@ -export * from './confirmPriceImpactWithoutFee' -export * from './ExpertModal' -export * from './ImportList' -export * from './ListLogo' -export * from './NumericalInput' -export * from './SwapCallbackError' -export * as Swap from './SwapWidget' -export * from './TransactionErrorContent' -export * from './ConfirmationModalContent' -export * from './ConfirmationPendingContent' -export * from './withCurrencyLogo' -export * from './TokenRowButton' -export * from './ApproveModalContent' -export * from './SwapPendingModalContent' -export * from './SwapTransactionReceiptModalContent' +export * from "./confirmPriceImpactWithoutFee"; +export * from "./ExpertModal"; +export * from "./ImportList"; +export * from "./ListLogo"; +export * from "./NumericalInput"; +export * from "./SwapCallbackError"; +export * as Swap from "./SwapWidget"; +export * from "./TransactionErrorContent"; +export * from "./ConfirmationModalContent"; +export * from "./ConfirmationPendingContent"; +export * from "./withCurrencyLogo"; +export * from "./TokenRowButton"; +export * from "./ApproveModalContent"; +export * from "./SwapPendingModalContent"; +export * from "./SwapTransactionReceiptModalContent"; diff --git a/packages/widgets-internal/swap/withCurrencyLogo.tsx b/packages/widgets-internal/swap/withCurrencyLogo.tsx index 06bd2389ed432..518cc259f5608 100644 --- a/packages/widgets-internal/swap/withCurrencyLogo.tsx +++ b/packages/widgets-internal/swap/withCurrencyLogo.tsx @@ -1,9 +1,9 @@ -import { CSSProperties, ReactElement } from 'react' -import { BaseCurrency } from '@pancakeswap/swap-sdk-core' -import { useTranslation } from '@pancakeswap/localization' -import { styled } from 'styled-components' -import { AutoColumn, AutoRow, Button, Flex, RowFixed, Text, useMatchBreakpoints } from '@pancakeswap/uikit' -import { ListLogo } from './ListLogo' +import { CSSProperties, ReactElement } from "react"; +import { BaseCurrency } from "@pancakeswap/swap-sdk-core"; +import { useTranslation } from "@pancakeswap/localization"; +import { styled } from "styled-components"; +import { AutoColumn, AutoRow, Button, Flex, RowFixed, Text, useMatchBreakpoints } from "@pancakeswap/uikit"; +import { ListLogo } from "./ListLogo"; const TokenSection = styled.div<{ dim?: boolean }>` padding: 4px 20px; @@ -13,12 +13,12 @@ const TokenSection = styled.div<{ dim?: boolean }>` grid-gap: 10px; align-items: center; - opacity: ${({ dim }) => (dim ? '0.4' : '1')}; + opacity: ${({ dim }) => (dim ? "0.4" : "1")}; ${({ theme }) => theme.mediaQueries.md} { grid-gap: 16px; } -` +`; const NameOverflow = styled(Flex)` white-space: nowrap; @@ -27,16 +27,16 @@ const NameOverflow = styled(Flex)` text-overflow: ellipsis; max-width: 210px; gap: 8px; -` +`; interface CurrencyLogoPropsType { - currency?: T - size?: string - style?: React.CSSProperties + currency?: T; + size?: string; + style?: React.CSSProperties; } export function withCurrencyLogo( - CurrencyLogo: (props: CurrencyLogoPropsType) => ReactElement, + CurrencyLogo: (props: CurrencyLogoPropsType) => ReactElement ) { return ({ token, @@ -47,30 +47,30 @@ export function withCurrencyLogo( isActive, children, }: { - token: T - style?: CSSProperties - dim?: boolean - onCurrencySelect?: (currency: T) => void - list: any - isActive: boolean - children: ReactElement + token: T; + style?: CSSProperties; + dim?: boolean; + onCurrencySelect?: (currency: T) => void; + list: any; + isActive: boolean; + children: ReactElement; }) => { - const { t } = useTranslation() - const { isMobile } = useMatchBreakpoints() + const { t } = useTranslation(); + const { isMobile } = useMatchBreakpoints(); return ( { if (isActive) { - onCurrencySelect?.(token) + onCurrencySelect?.(token); } }} > - - + + {token.symbol} @@ -81,8 +81,8 @@ export function withCurrencyLogo( {list && list.logoURI && ( - - {t('via')} {list.name} + + {t("via")} {list.name} @@ -90,6 +90,6 @@ export function withCurrencyLogo( {children} - ) - } + ); + }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41788bad4c75a..357200391056d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1504,24 +1504,12 @@ importers: packages/uikit: dependencies: - '@pancakeswap/farms': - specifier: workspace:* - version: link:../farms '@pancakeswap/hooks': specifier: workspace:* version: link:../hooks '@pancakeswap/localization': specifier: workspace:* version: link:../localization - '@pancakeswap/sdk': - specifier: workspace:* - version: link:../swap-sdk - '@pancakeswap/swap-sdk-core': - specifier: workspace:* - version: link:../swap-sdk-core - '@pancakeswap/v3-sdk': - specifier: workspace:* - version: link:../v3-sdk '@popperjs/core': specifier: ^2.9.2 version: 2.11.2 @@ -1607,9 +1595,6 @@ importers: '@rollup/plugin-url': specifier: ^6.0.0 version: 6.1.0(rollup@2.78.0) - '@sentry/nextjs': - specifier: ^7.0.0 - version: 7.52.1(encoding@0.1.13)(next@13.4.2)(react@18.2.0)(webpack@5.88.2) '@storybook/addon-a11y': specifier: ^7.0.7 version: 7.0.7(react-dom@18.2.0)(react@18.2.0) @@ -1751,9 +1736,6 @@ importers: ts-jest: specifier: ^27.1.3 version: 27.1.3(@babel/core@7.21.3)(babel-jest@29.3.1)(esbuild@0.17.19)(jest@29.3.1)(typescript@5.1.3) - viem: - specifier: ^1.10.9 - version: 1.10.9(typescript@5.1.3)(zod@3.21.4) vite: specifier: ^4.3.1 version: 4.3.1(@types/node@18.16.2) @@ -1800,9 +1782,6 @@ importers: swr: specifier: ^2.1.3 version: 2.1.5(react@18.2.0) - viem: - specifier: ^1.10.9 - version: 1.10.9(typescript@5.1.3)(zod@3.21.4) vitest: specifier: ^0.30.1 version: 0.30.1