From d9d315923fa606c44d2ade740d6c6b42af0ea154 Mon Sep 17 00:00:00 2001 From: Philip <97418926+chefilip@users.noreply.github.com> Date: Thu, 5 Oct 2023 08:45:15 -0400 Subject: [PATCH] chore: Update uikit package.json (#7819) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 🤖 Generated by Copilot at ae57c60 ### Summary 📦🛠️🌟 Update uikit package and fix repository field. This pull request enhances the uikit package by upgrading its version, removing unused dependencies, and fixing the repository field to point to the correct GitHub URL. It also simplifies the prepublish script to use yarn instead of pnpm. > _`uikit` updated_ > _fixes and simplifications_ > _autumn of cleaning_ ### Walkthrough * Increment uikit package version to 0.63.3 ([link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L3-R3)) * Update repository field to point to pancake-frontend ([link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L33-R33)) * Replace prepublishOnly script with build:uikit command ([link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L47-R47)) * Remove unused @pancakeswap/farms package from peerDependencies and dependencies ([link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L54), [link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L133-R134)) * Remove unused viem package from devDependencies ([link](https://github.com/pancakeswap/pancake-frontend/pull/7819/files?diff=unified&w=0#diff-cb0a1990ba52670ab2c56f831e950ca6447a9ca43ab7028565a66d0defd034d6L133-R134)) --------- Co-authored-by: chefilip --- .../components/SearchModal/CommonBases.tsx | 3 +- .../components/SearchModal/CurrencyList.tsx | 3 +- .../components/OnRampCurrencySelect/index.tsx | 14 +- .../components/FixedStakingRow.tsx | 3 +- .../FixedStaking/components/ModalTitle.tsx | 3 +- .../V3Swap/components/RouteDisplayModal.tsx | 2 +- .../HotTokenList/SwapTokenTable.tsx | 2 +- packages/uikit/package.json | 17 +- .../CurrencyInput/index.stories.tsx | 32 -- .../src/components/CurrencyInput/index.tsx | 64 ---- packages/uikit/src/components/index.ts | 2 - packages/uikit/src/shared.ts | 21 -- .../uikit/src/widgets/Modal/ModalInput.tsx | 22 +- packages/utils/displayBalance.ts | 19 + packages/utils/formatBalance.ts | 2 +- packages/utils/package.json | 4 +- packages/utils/tryParseAmount.ts | 2 +- packages/utils/viem/formatUnits.ts | 15 + packages/utils/viem/parseUnits.ts | 37 ++ packages/widgets-internal/.prettierrc | 4 + .../components/CurrencyLogo/CurrencyLogo.tsx | 3 +- .../CurrencyLogo/DoubleCurrencyLogo.tsx | 0 .../components/CurrencyLogo/constants.ts | 0 .../components/CurrencyLogo/index.stories.tsx | 2 +- .../components/CurrencyLogo/index.tsx | 0 .../components/CurrencyLogo/utils.ts | 0 packages/widgets-internal/farm/FarmWidget.tsx | 22 +- .../farm/components/DepositModal/index.tsx | 194 +++++------ .../farm/components/FarmApyButton/index.tsx | 34 +- .../components/FarmCard/DetailsSection.tsx | 88 ++--- .../farm/components/FarmCard/index.tsx | 6 +- .../farm/components/FarmTabButtons.tsx | 58 ++-- .../FarmTable/Actions/AccountNotConnect.tsx | 16 +- .../FarmTable/Actions/EnableStakeAction.tsx | 22 +- .../FarmTable/Actions/HarvestAction.tsx | 46 +-- .../Actions/StakeActionDataNotReady.tsx | 16 +- .../FarmTable/Actions/StakeComponent.tsx | 24 +- .../Actions/StakedActionComponent.tsx | 30 +- .../components/FarmTable/Actions/styles.ts | 12 +- .../farm/components/FarmTable/CellLayout.tsx | 16 +- .../farm/components/FarmTable/Details.tsx | 18 +- .../farm/components/FarmTable/Earned.tsx | 18 +- .../components/FarmTable/FarmTokenInfo.tsx | 34 +- .../farm/components/FarmTable/Liquidity.tsx | 60 ++-- .../farm/components/FarmTable/LpAmount.tsx | 18 +- .../farm/components/FarmTable/Multiplier.tsx | 30 +- .../farm/components/FarmTable/index.tsx | 30 +- .../FarmV3Card/AvailableFarming.tsx | 32 +- .../farm/components/FarmV3Card/NoPosition.tsx | 30 +- .../FarmV3Card/TotalStakedBalance.tsx | 36 +- .../FarmV3Card/ViewAllFarmModal.tsx | 52 +-- .../farm/components/FarmV3Card/index.tsx | 10 +- .../FarmV3Table/Actions/HarvestAction.tsx | 32 +- .../FarmV3Table/Actions/NoPosition.tsx | 40 +-- .../components/FarmV3Table/Actions/styles.ts | 6 +- .../farm/components/FarmV3Table/index.ts | 6 +- .../farm/components/StakedLP/index.tsx | 44 +-- .../farm/components/Tags/index.tsx | 190 +++++----- .../farm/components/WithdrawModal/index.tsx | 112 +++--- .../farm/components/styles.ts | 4 +- packages/widgets-internal/farm/constants.ts | 4 +- packages/widgets-internal/farm/index.ts | 8 +- packages/widgets-internal/farm/types.ts | 138 ++++---- packages/widgets-internal/index.ts | 11 +- packages/widgets-internal/mockData.ts | 24 +- packages/widgets-internal/pool/Apr.tsx | 72 ++-- .../pool/AprRowWithToolTip.tsx | 20 +- .../widgets-internal/pool/Cells/AprCell.tsx | 38 +- .../widgets-internal/pool/Cells/BaseCell.tsx | 8 +- .../pool/Cells/EarningCell.tsx | 50 +-- .../pool/Cells/EndsInCell.tsx | 74 ++-- .../pool/Cells/ExpandActionCell.tsx | 26 +- .../widgets-internal/pool/Cells/NameCell.tsx | 62 ++-- .../pool/Cells/TotalStakedCell.tsx | 26 +- .../widgets-internal/pool/CollectModal.tsx | 50 +-- .../pool/PercentageButton.tsx | 14 +- packages/widgets-internal/pool/PoolCard.tsx | 38 +- .../widgets-internal/pool/PoolCardHeader.tsx | 28 +- .../widgets-internal/pool/PoolControls.tsx | 184 +++++----- .../widgets-internal/pool/PoolTabButtons.tsx | 50 +-- .../pool/PoolsTable/ExpandRow.tsx | 34 +- .../pool/PoolsTable/HarvestAction.tsx | 44 +-- .../pool/PoolsTable/index.tsx | 14 +- .../pool/PoolsTable/styles.tsx | 18 +- packages/widgets-internal/pool/StakeModal.tsx | 190 +++++----- .../widgets-internal/pool/StatWrapper.tsx | 8 +- packages/widgets-internal/pool/StyledCard.tsx | 8 +- .../widgets-internal/pool/TotalStaked.tsx | 40 +-- .../pool/helpers/getCakeVaultEarnings.ts | 46 +-- .../widgets-internal/pool/helpers/index.ts | 2 +- .../pool/helpers/sortPools.ts | 54 +-- packages/widgets-internal/pool/index.tsx | 48 +-- packages/widgets-internal/pool/types.ts | 20 +- .../widgets-internal/pool/withCardActions.tsx | 72 ++-- .../pool/withCollectModal.tsx | 74 ++-- .../pool/withStakeActions.tsx | 78 ++--- .../widgets-internal/roi/AnimationArrow.tsx | 26 +- packages/widgets-internal/roi/AssetCard.tsx | 177 +++++----- packages/widgets-internal/roi/Card.tsx | 24 +- .../roi/CompoundFrequency.tsx | 38 +- .../widgets-internal/roi/DepositAmount.tsx | 90 +++-- packages/widgets-internal/roi/Details.tsx | 102 +++--- .../widgets-internal/roi/EditableAssets.tsx | 34 +- .../roi/FarmingRewardsToggle.tsx | 14 +- .../roi/FullWidthButtonMenu.tsx | 6 +- .../roi/ImpermanentLossCalculator.tsx | 242 ++++++------- packages/widgets-internal/roi/PriceChart.tsx | 86 ++--- .../roi/PriceInvertSwitch.tsx | 26 +- .../widgets-internal/roi/RangeSelector.tsx | 66 ++-- .../widgets-internal/roi/RoiCalculator.tsx | 324 +++++++++--------- .../roi/RoiCalculatorModal.tsx | 16 +- packages/widgets-internal/roi/RoiRate.tsx | 28 +- packages/widgets-internal/roi/Section.tsx | 8 +- packages/widgets-internal/roi/StakeSpan.tsx | 34 +- packages/widgets-internal/roi/StepCounter.tsx | 88 ++--- packages/widgets-internal/roi/StyledInput.tsx | 20 +- packages/widgets-internal/roi/TwoColumns.tsx | 4 +- packages/widgets-internal/roi/aprHelper.ts | 8 +- packages/widgets-internal/roi/constants.ts | 6 +- packages/widgets-internal/roi/hooks/index.ts | 10 +- .../roi/hooks/useActiveTicks.ts | 46 +-- .../widgets-internal/roi/hooks/useAmounts.ts | 124 +++---- .../roi/hooks/usePriceRange.ts | 142 ++++---- .../roi/hooks/useRangeHopCallbacks.ts | 78 ++--- .../widgets-internal/roi/hooks/useRate.ts | 68 ++-- packages/widgets-internal/roi/hooks/useRoi.ts | 82 ++--- .../widgets-internal/roi/index.stories.tsx | 66 ++-- packages/widgets-internal/roi/index.ts | 6 +- packages/widgets-internal/roi/types.ts | 20 +- .../roi/utils/computeSurroundingTicks.ts | 30 +- .../utils/getTokenAmountsFromDepositUsd.ts | 76 ++-- packages/widgets-internal/roi/utils/index.ts | 84 ++--- .../swap/ApproveModalContent.tsx | 30 +- .../swap/ConfirmationModalContent.tsx | 12 +- .../swap/ConfirmationPendingContent.tsx | 18 +- .../swap/CurrencyInputHeader.tsx | 16 +- .../swap/CurrencyInputPanel.tsx | 20 +- .../widgets-internal/swap/ExpertModal.tsx | 46 +-- packages/widgets-internal/swap/Footer.tsx | 56 +-- packages/widgets-internal/swap/ImportList.tsx | 70 ++-- .../swap/LiquidityChartRangeInput/Area.tsx | 34 +- .../LiquidityChartRangeInput/AxisBottom.tsx | 26 +- .../swap/LiquidityChartRangeInput/Brush.tsx | 152 ++++---- .../swap/LiquidityChartRangeInput/Chart.tsx | 74 ++-- .../swap/LiquidityChartRangeInput/InfoBox.tsx | 8 +- .../swap/LiquidityChartRangeInput/Line.tsx | 18 +- .../LiquidityChartRangeInput.tsx | 146 ++++---- .../swap/LiquidityChartRangeInput/Loader.tsx | 20 +- .../swap/LiquidityChartRangeInput/Zoom.tsx | 66 ++-- .../swap/LiquidityChartRangeInput/hooks.ts | 90 ++--- .../index.stories.tsx | 32 +- .../swap/LiquidityChartRangeInput/index.tsx | 6 +- .../swap/LiquidityChartRangeInput/svg.tsx | 36 +- .../swap/LiquidityChartRangeInput/types.ts | 88 ++--- .../swap/LiquidityChartRangeInput/utils.ts | 30 +- packages/widgets-internal/swap/ListLogo.tsx | 22 +- .../widgets-internal/swap/NumericalInput.tsx | 40 +-- packages/widgets-internal/swap/Page.tsx | 26 +- .../swap/SwapCallbackError.tsx | 10 +- packages/widgets-internal/swap/SwapInfo.tsx | 32 +- .../swap/SwapPendingModalContent.tsx | 30 +- .../SwapTransactionReceiptModalContent.tsx | 14 +- packages/widgets-internal/swap/SwapWidget.tsx | 22 +- .../widgets-internal/swap/TokenRowButton.tsx | 34 +- .../swap/TokenTransferInfo.tsx | 23 +- packages/widgets-internal/swap/TradePrice.tsx | 24 +- .../swap/TransactionErrorContent.tsx | 22 +- .../swap/confirmPriceImpactWithoutFee.ts | 24 +- packages/widgets-internal/swap/index.ts | 30 +- .../swap/withCurrencyLogo.tsx | 60 ++-- pnpm-lock.yaml | 21 -- 171 files changed, 3536 insertions(+), 3628 deletions(-) delete mode 100644 packages/uikit/src/components/CurrencyInput/index.stories.tsx delete mode 100644 packages/uikit/src/components/CurrencyInput/index.tsx delete mode 100644 packages/uikit/src/shared.ts create mode 100644 packages/utils/displayBalance.ts create mode 100644 packages/utils/viem/formatUnits.ts create mode 100644 packages/utils/viem/parseUnits.ts create mode 100644 packages/widgets-internal/.prettierrc rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/CurrencyLogo.tsx (94%) rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/DoubleCurrencyLogo.tsx (100%) rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/constants.ts (100%) rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/index.stories.tsx (90%) rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/index.tsx (100%) rename packages/{uikit/src => widgets-internal}/components/CurrencyLogo/utils.ts (100%) 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