From f046f6e1e9df2eaadf81f2b596f5469e4dbab6a2 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Wed, 13 Jul 2022 16:07:48 +0300 Subject: [PATCH 01/29] removed v2 full screen modal --- .../ModalFullscreen.stories.tsx | 38 ----------- .../modalFullscreen/ModalFullscreen.tsx | 68 ------------------- .../SearchableTokenList.tsx | 13 ++-- .../selectPoolModal/SelectPoolModal.tsx | 9 ++- 4 files changed, 10 insertions(+), 118 deletions(-) delete mode 100644 src/components/modalFullscreen/ModalFullscreen.stories.tsx delete mode 100644 src/components/modalFullscreen/ModalFullscreen.tsx diff --git a/src/components/modalFullscreen/ModalFullscreen.stories.tsx b/src/components/modalFullscreen/ModalFullscreen.stories.tsx deleted file mode 100644 index 04f5fefe3..000000000 --- a/src/components/modalFullscreen/ModalFullscreen.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { ModalFullscreen } from './ModalFullscreen'; -import { useState } from 'react'; -import { withDesign } from 'storybook-addon-designs'; -import { Button } from 'components/button/Button'; - -export default { - title: 'Components/Modal/Fullscreen', - component: ModalFullscreen, - decorators: [withDesign], -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - const [isOpen, setIsOpen] = useState(false); - - return ( - <> - - -

some content

- - - ); -}; - -export const Open = Template.bind({}); -Open.args = { - isOpen: true, - setIsOpen: () => {}, - title: 'Modal title', -}; - -Open.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=7879%3A257081', - }, -}; diff --git a/src/components/modalFullscreen/ModalFullscreen.tsx b/src/components/modalFullscreen/ModalFullscreen.tsx deleted file mode 100644 index f264caae5..000000000 --- a/src/components/modalFullscreen/ModalFullscreen.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment } from 'react'; -import { ReactComponent as IconChevron } from 'assets/icons/chevronRight.svg'; -import { ReactComponent as IconBancor } from 'assets/icons/bancor.svg'; -import 'elements/layoutHeader/LayoutHeader.css'; -import { LayoutHeaderMobile } from 'elements/layoutHeader/LayoutHeaderMobile'; -import { Button } from 'components/button/Button'; - -interface ModalFullscreenProps { - title?: string | JSX.Element | JSX.Element[]; - children: JSX.Element | JSX.Element[]; - setIsOpen: Function; - isOpen: boolean; - showHeader?: boolean; -} - -export const ModalFullscreen = ({ - title, - children, - setIsOpen, - isOpen, - showHeader, -}: ModalFullscreenProps) => { - return ( - <> - - setIsOpen(false)} - > -
- {showHeader && ( - - -
- -
- - )} - -
- {title && ( -
- {title} -
- )} - - {children} -
-
- - - - ); -}; diff --git a/src/components/searchableTokenList/SearchableTokenList.tsx b/src/components/searchableTokenList/SearchableTokenList.tsx index 931cf67f0..5fc36e9b4 100644 --- a/src/components/searchableTokenList/SearchableTokenList.tsx +++ b/src/components/searchableTokenList/SearchableTokenList.tsx @@ -2,7 +2,6 @@ import { useMemo, useState } from 'react'; import { useAppSelector } from 'store'; import { Token } from 'services/observables/tokens'; import { Modal } from 'components/modal/Modal'; -import { ModalFullscreen } from 'components/modalFullscreen/ModalFullscreen'; import { prettifyNumber } from 'utils/helperFunctions'; import { wait } from 'utils/pureFunctions'; import { ReactComponent as IconEdit } from 'assets/icons/edit.svg'; @@ -15,6 +14,7 @@ import { userPreferredListIds$ } from 'services/observables/tokenLists'; import { orderBy } from 'lodash'; import { SearchInput } from 'components/searchInput/SearchInput'; import { Image } from 'components/image/Image'; +import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; interface SearchableTokenListProps { onClick: Function; @@ -43,17 +43,16 @@ const SearchableTokenListLayout = ({ }: SearchableTokenListLayoutProps) => { if (isMobile) { return ( - { if (manage) return setManage(false); onClose(); }} isOpen={isOpen} - showHeader > {children} - + ); } @@ -139,7 +138,7 @@ export const SearchableTokenList = ({ setManage={setManage} > {manage ? ( -
+
{tokensLists.map((tokenList) => { const isSelected = userPreferredListIds.some( @@ -178,14 +177,14 @@ export const SearchableTokenList = ({
) : ( <> -
+
-
+
void; onSelect: Function; } @@ -24,14 +24,13 @@ export const SelectPoolModal = ({ if (isMobile) { return ( - - + ); } From 4b2f61387b00488858893a6c228bf057a3846312 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Wed, 13 Jul 2022 16:18:38 +0300 Subject: [PATCH 02/29] fixed searchable token list layout --- src/components/modalFullscreen/modalFullscreenV3.tsx | 6 +++++- src/components/searchableTokenList/SearchableTokenList.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/modalFullscreen/modalFullscreenV3.tsx b/src/components/modalFullscreen/modalFullscreenV3.tsx index 30e98e009..161dde2be 100644 --- a/src/components/modalFullscreen/modalFullscreenV3.tsx +++ b/src/components/modalFullscreen/modalFullscreenV3.tsx @@ -9,6 +9,7 @@ interface Props { children: ReactNode; title: string; titleElement?: ReactNode; + className?: string; } const ModalFullscreenV3 = ({ @@ -17,6 +18,7 @@ const ModalFullscreenV3 = ({ children, title, titleElement, + className, }: Props) => { return ( <> @@ -50,7 +52,9 @@ const ModalFullscreenV3 = ({
-
+
{children}
diff --git a/src/components/searchableTokenList/SearchableTokenList.tsx b/src/components/searchableTokenList/SearchableTokenList.tsx index 5fc36e9b4..232b898de 100644 --- a/src/components/searchableTokenList/SearchableTokenList.tsx +++ b/src/components/searchableTokenList/SearchableTokenList.tsx @@ -49,6 +49,7 @@ const SearchableTokenListLayout = ({ if (manage) return setManage(false); onClose(); }} + className="flex flex-col px-0" isOpen={isOpen} > {children} From 8eb226c4c515e5ae766cc11698954aa723148b28 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 14 Jul 2022 16:01:46 +0300 Subject: [PATCH 03/29] Moved all modals and adjusted some --- src/App.tsx | 2 + .../SearchableTokenList.tsx | 52 ++----------------- src/components/selectPool/SelectPool.tsx | 2 +- .../selectPoolModal/SelectPoolModal.tsx | 42 --------------- src/elements/earn/pools/TopPools.tsx | 2 +- .../earn/pools/poolsTable/PoolsTable.tsx | 2 +- .../poolsTable/PoolsTableCellActions.tsx | 2 +- .../ProtectedPositionTableCellActions.tsx | 6 +-- .../rewards/StakeRewardsBtn.tsx | 2 +- .../earn/portfolio/v3/V3AvailableToStake.tsx | 2 +- .../v3/bonuses/V3BonusesModal.stories.tsx | 2 +- .../portfolio/v3/bonuses/V3ClaimBonuses.tsx | 2 +- .../v3/earningsTable/V3EarningTable.tsx | 4 +- .../V3ExternalHoldingsItem.tsx | 2 +- .../v3/holdings/V3HoldingsItemStaked.tsx | 2 +- .../v3/holdings/V3HoldingsItemUnstaked.tsx | 2 +- .../v3/holdings/V3HoldingsItemWithdraw.tsx | 2 +- .../initWithdraw/V3WithdrawModal.stories.tsx | 2 +- .../v3/initWithdraw/step4/V3WithdrawStep4.tsx | 2 +- .../v3/pendingWithdraw/V3Withdraw.tsx | 4 +- src/elements/layoutHeader/LayoutHeader.tsx | 2 +- src/elements/swapLimit/SwapLimit.tsx | 16 +++--- src/hooks/useApproveModal.tsx | 2 +- .../v3 => modals}/DepositDisabledModal.tsx | 8 +-- .../v3 => modals}/DepositV3Modal.tsx | 13 ++--- .../ModalCreatePool.tsx | 0 .../modalVbnt => modals}/ModalVbnt.tsx | 0 src/modals/SearchableTokenListModal.tsx | 45 ++++++++++++++++ .../SelectPoolModal.tsx} | 48 +++++++++++++++-- .../v3 => modals}/UpgradeBntModal.tsx | 0 .../v3 => modals}/UpgradeTknModal.tsx | 0 .../v3/bonuses => modals}/V3BonusesModal.tsx | 0 .../V3ExternalHoldingsModal.tsx | 0 .../v3/holdings => modals}/V3UnstakeModal.tsx | 9 ++-- .../V3WithdrawCancelModal.tsx | 14 +++-- .../V3WithdrawConfirmModal.tsx | 0 .../V3WithdrawModal.tsx | 10 ++-- .../WalletConnectModal.tsx | 8 +-- .../WithdrawLiquidityWidget.tsx | 0 src/modals/index.tsx | 3 ++ .../modalApprove => modals}/modalApprove.tsx | 0 .../modalApproveNew.tsx | 0 .../modalDepositETH.tsx | 13 +++-- .../modalDuration.tsx | 0 src/pages/Vote.tsx | 2 +- 45 files changed, 167 insertions(+), 164 deletions(-) delete mode 100644 src/components/selectPoolModal/SelectPoolModal.tsx rename src/{elements/earn/pools/poolsTable/v3 => modals}/DepositDisabledModal.tsx (86%) rename src/{elements/earn/pools/poolsTable/v3 => modals}/DepositV3Modal.tsx (99%) rename src/{elements/modalCreatePool => modals}/ModalCreatePool.tsx (100%) rename src/{elements/modalVbnt => modals}/ModalVbnt.tsx (100%) create mode 100644 src/modals/SearchableTokenListModal.tsx rename src/{components/selectPoolModal/SelectPoolModalContent.tsx => modals/SelectPoolModal.tsx} (61%) rename src/{elements/earn/portfolio/v3 => modals}/UpgradeBntModal.tsx (100%) rename src/{elements/earn/portfolio/v3 => modals}/UpgradeTknModal.tsx (100%) rename src/{elements/earn/portfolio/v3/bonuses => modals}/V3BonusesModal.tsx (100%) rename src/{elements/earn/portfolio/v3/externalHoldings => modals}/V3ExternalHoldingsModal.tsx (100%) rename src/{elements/earn/portfolio/v3/holdings => modals}/V3UnstakeModal.tsx (98%) rename src/{elements/earn/portfolio/v3/pendingWithdraw => modals}/V3WithdrawCancelModal.tsx (91%) rename src/{elements/earn/portfolio/v3/pendingWithdraw/confirm => modals}/V3WithdrawConfirmModal.tsx (100%) rename src/{elements/earn/portfolio/v3/initWithdraw => modals}/V3WithdrawModal.tsx (96%) rename src/{elements/walletConnect => modals}/WalletConnectModal.tsx (62%) rename src/{elements/earn/portfolio/withdrawLiquidity => modals}/WithdrawLiquidityWidget.tsx (100%) create mode 100644 src/modals/index.tsx rename src/{elements/modalApprove => modals}/modalApprove.tsx (100%) rename src/{elements/modalApprove => modals}/modalApproveNew.tsx (100%) rename src/{elements/modalDepositETH => modals}/modalDepositETH.tsx (95%) rename src/{elements/modalDuration => modals}/modalDuration.tsx (100%) diff --git a/src/App.tsx b/src/App.tsx index 80ca9b1b2..f50123e4f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,6 +30,7 @@ import { useWeb3React } from '@web3-react/core'; import { useAutoConnect } from 'services/web3/wallet/hooks'; import { setUser } from 'services/observables/user'; import { BancorRouter } from 'router/BancorRouter'; +import { Modals } from 'modals'; const handleModeChange = (_: MediaQueryListEvent) => { const darkMode = store.getState().user.darkMode; @@ -102,6 +103,7 @@ export const App = () => { )} + ); }; diff --git a/src/components/searchableTokenList/SearchableTokenList.tsx b/src/components/searchableTokenList/SearchableTokenList.tsx index 232b898de..1a7df341c 100644 --- a/src/components/searchableTokenList/SearchableTokenList.tsx +++ b/src/components/searchableTokenList/SearchableTokenList.tsx @@ -1,12 +1,10 @@ import { useMemo, useState } from 'react'; import { useAppSelector } from 'store'; import { Token } from 'services/observables/tokens'; -import { Modal } from 'components/modal/Modal'; import { prettifyNumber } from 'utils/helperFunctions'; import { wait } from 'utils/pureFunctions'; import { ReactComponent as IconEdit } from 'assets/icons/edit.svg'; import { getTokenListLS, setTokenListLS } from 'utils/localStorage'; -import { isMobile } from 'react-device-detect'; import { SuggestedTokens } from './SuggestedTokens'; import { Switch } from 'components/switch/Switch'; import { TokenList } from 'services/observables/tokens'; @@ -14,7 +12,7 @@ import { userPreferredListIds$ } from 'services/observables/tokenLists'; import { orderBy } from 'lodash'; import { SearchInput } from 'components/searchInput/SearchInput'; import { Image } from 'components/image/Image'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; +import { SearchableTokenListModal } from 'modals/SearchableTokenListModal'; interface SearchableTokenListProps { onClick: Function; @@ -26,50 +24,6 @@ interface SearchableTokenListProps { limit?: boolean; } -interface SearchableTokenListLayoutProps { - manage: boolean; - setManage: Function; - isOpen: boolean; - onClose: Function; - children: JSX.Element; -} - -const SearchableTokenListLayout = ({ - manage, - setManage, - onClose, - isOpen, - children, -}: SearchableTokenListLayoutProps) => { - if (isMobile) { - return ( - { - if (manage) return setManage(false); - onClose(); - }} - className="flex flex-col px-0" - isOpen={isOpen} - > - {children} - - ); - } - - return ( - setManage(false)} - > - {children} - - ); -}; - const suggestedTokens = ['BNT', 'ETH', 'WBTC', 'USDC', 'USDT']; export const SearchableTokenList = ({ @@ -132,7 +86,7 @@ export const SearchableTokenList = ({ }, [excludedTokens, includedTokens, limit, search, tokens]); return ( - )} - + ); }; diff --git a/src/components/selectPool/SelectPool.tsx b/src/components/selectPool/SelectPool.tsx index 204735497..5a5fa9c17 100644 --- a/src/components/selectPool/SelectPool.tsx +++ b/src/components/selectPool/SelectPool.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { SelectPoolModal } from 'components/selectPoolModal/SelectPoolModal'; +import { SelectPoolModal } from 'modals/SelectPoolModal'; import { ReactComponent as IconChevronDown } from 'assets/icons/chevronDown.svg'; import { Pool } from 'services/observables/pools'; import { Image } from 'components/image/Image'; diff --git a/src/components/selectPoolModal/SelectPoolModal.tsx b/src/components/selectPoolModal/SelectPoolModal.tsx deleted file mode 100644 index 036769a6c..000000000 --- a/src/components/selectPoolModal/SelectPoolModal.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { isMobile } from 'react-device-detect'; -import { Modal } from '../modal/Modal'; -import { SelectPoolModalContent } from './SelectPoolModalContent'; -import { Pool } from 'services/observables/pools'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; - -interface Props { - pools: Pool[]; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - onSelect: Function; -} - -export const SelectPoolModal = ({ - pools, - isOpen, - setIsOpen, - onSelect, -}: Props) => { - const handleOnSelect = (pool: Pool) => { - setIsOpen(false); - onSelect(pool); - }; - - if (isMobile) { - return ( - - - - ); - } - - return ( - - - - ); -}; diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index 76c28c933..57318a5c3 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -3,7 +3,7 @@ import { useAppSelector } from 'store'; import { getTopPoolsV3 } from 'store/bancor/pool'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { Image } from 'components/image/Image'; -import { DepositDisabledModal } from 'elements/earn/pools/poolsTable/v3/DepositDisabledModal'; +import { DepositDisabledModal } from 'modals/DepositDisabledModal'; // import { DepositV3Modal } from './poolsTable/v3/DepositV3Modal'; export const TopPools = () => { diff --git a/src/elements/earn/pools/poolsTable/PoolsTable.tsx b/src/elements/earn/pools/poolsTable/PoolsTable.tsx index 1b0c29e04..63af3b6db 100644 --- a/src/elements/earn/pools/poolsTable/PoolsTable.tsx +++ b/src/elements/earn/pools/poolsTable/PoolsTable.tsx @@ -8,7 +8,7 @@ import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { PoolsTableSort } from './PoolsTableFilter'; import { PoolV3 } from 'services/observables/pools'; // import { DepositV3Modal } from 'elements/earn/pools/poolsTable/v3/DepositV3Modal'; -import { DepositDisabledModal } from 'elements/earn/pools/poolsTable/v3/DepositDisabledModal'; +import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { Statistics } from 'elements/earn/pools/Statistics'; diff --git a/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx b/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx index 4baddd2fc..c459a819d 100644 --- a/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx +++ b/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx @@ -1,6 +1,6 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { PopoverV3 } from 'components/popover/PopoverV3'; -import { DepositDisabledModal } from 'elements/earn/pools/poolsTable/v3/DepositDisabledModal'; +import { DepositDisabledModal } from 'modals/DepositDisabledModal'; export const PoolsTableCellActions = (_id: string) => { return ( diff --git a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx index ccff8ef9a..d5be039e4 100644 --- a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx @@ -6,14 +6,14 @@ import { CellProps } from 'react-table'; import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { TableCellExpander } from 'components/table/TableCellExpander'; import { Button } from 'components/button/Button'; -import { WithdrawLiquidityWidget } from '../../withdrawLiquidity/WithdrawLiquidityWidget'; -import { UpgradeBntModal } from '../../v3/UpgradeBntModal'; +import { WithdrawLiquidityWidget } from '../../../../../modals/WithdrawLiquidityWidget'; +import { UpgradeBntModal } from '../../../../../modals/UpgradeBntModal'; import { bntToken } from 'services/web3/config'; import { getAllBntPositionsAndAmount } from 'store/liquidity/liquidity'; import { useAppSelector } from 'store'; import { getIsV3Exist } from 'store/bancor/pool'; import { PopoverV3 } from 'components/popover/PopoverV3'; -import { UpgradeTknModal } from '../../v3/UpgradeTknModal'; +import { UpgradeTknModal } from '../../../../../modals/UpgradeTknModal'; export const ProtectedPositionTableCellActions = ( cellData: PropsWithChildren< diff --git a/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx b/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx index 62a35abf7..f9a72ee5c 100644 --- a/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { useAppSelector } from 'store'; import { getProtectedPools } from 'store/bancor/pool'; -import { SelectPoolModal } from 'components/selectPoolModal/SelectPoolModal'; +import { SelectPoolModal } from 'modals/SelectPoolModal'; import { Pool } from 'services/observables/pools'; import { useNavigation } from 'hooks/useNavigation'; import { Button } from 'components/button/Button'; diff --git a/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx b/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx index 93da49e40..a34db2761 100644 --- a/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx +++ b/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx @@ -7,7 +7,7 @@ import { useAppSelector } from 'store'; import { getAvailableToStakeTokens } from 'store/bancor/token'; import { Token } from 'services/observables/tokens'; import { PoolV3 } from 'services/observables/pools'; -import { DepositDisabledModal } from 'elements/earn/pools/poolsTable/v3/DepositDisabledModal'; +import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import 'swiper/css'; const AvailableItem = ({ token, pool }: { token: Token; pool: PoolV3 }) => { diff --git a/src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.stories.tsx b/src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.stories.tsx index 73f255c9e..a527fcbb6 100644 --- a/src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.stories.tsx +++ b/src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; import { store } from 'store'; import { Provider } from 'react-redux'; -import { V3BonusesModal } from 'elements/earn/portfolio/v3/bonuses/V3BonusesModal'; +import { V3BonusesModal } from 'modals/V3BonusesModal'; export default { title: 'Elements/V3/Portfolio/Bonuses', diff --git a/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx b/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx index 8142164d8..af1b9e08c 100644 --- a/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx +++ b/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx @@ -1,5 +1,5 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; -import { V3BonusesModal } from 'elements/earn/portfolio/v3/bonuses/V3BonusesModal'; +import { V3BonusesModal } from 'modals/V3BonusesModal'; import { useV3Bonuses } from 'elements/earn/portfolio/v3/bonuses/useV3Bonuses'; import { prettifyNumber } from 'utils/helperFunctions'; diff --git a/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx b/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx index 72fe573ba..cf7ef2f21 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx @@ -1,7 +1,7 @@ import { DataTable, TableColumn } from 'components/table/DataTable'; import { useMemo, useState } from 'react'; import { TokenBalance } from 'components/tokenBalance/TokenBalance'; -import V3WithdrawModal from 'elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal'; +import V3WithdrawModal from 'modals/V3WithdrawModal'; import { V3EarningTableMenu } from 'elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu'; import { useAppSelector } from 'store'; import { @@ -10,7 +10,7 @@ import { } from 'store/portfolio/v3Portfolio'; import { Holding } from 'store/portfolio/v3Portfolio.types'; // import { DepositV3Modal } from 'elements/earn/pools/poolsTable/v3/DepositV3Modal'; -import { DepositDisabledModal } from 'elements/earn/pools/poolsTable/v3/DepositDisabledModal'; +import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import { SortingRule } from 'react-table'; import { shrinkToken } from 'utils/formulas'; import { prettifyNumber } from 'utils/helperFunctions'; diff --git a/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx b/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx index a03df9200..7c1ba20e8 100644 --- a/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx +++ b/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx @@ -2,7 +2,7 @@ import { memo, useState } from 'react'; import { prettifyNumber } from 'utils/helperFunctions'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { ExternalHolding } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings.types'; -import { V3ExternalHoldingsModal } from 'elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsModal'; +import { V3ExternalHoldingsModal } from 'modals/V3ExternalHoldingsModal'; import { TokensOverlap } from 'components/tokensOverlap/TokensOverlap'; interface Props { diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx index 47f798a24..918c099b3 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx @@ -2,7 +2,7 @@ import { Holding } from 'store/portfolio/v3Portfolio.types'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; -import { V3UnstakeModal } from 'elements/earn/portfolio/v3/holdings/V3UnstakeModal'; +import { V3UnstakeModal } from 'modals/V3UnstakeModal'; import { PopoverV3 } from 'components/popover/PopoverV3'; export const V3HoldingsItemStaked = ({ holding }: { holding: Holding }) => { diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx index 6ecde19c6..7a5ff509e 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx @@ -14,7 +14,7 @@ import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; import { useApproveModal } from 'hooks/useApproveModal'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; -import V3WithdrawModal from 'elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal'; +import V3WithdrawModal from 'modals/V3WithdrawModal'; import { PopoverV3 } from 'components/popover/PopoverV3'; export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx index 007ed7c1e..780994ab0 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx @@ -1,7 +1,7 @@ import { Holding } from 'store/portfolio/v3Portfolio.types'; import { useState } from 'react'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; -import V3WithdrawModal from 'elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal'; +import V3WithdrawModal from 'modals/V3WithdrawModal'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; export const V3HoldingsItemWithdraw = ({ holding }: { holding: Holding }) => { diff --git a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx b/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx index 4d9935ecf..77299f317 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; import { useState } from 'react'; -import V3WithdrawModal from 'elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal'; +import V3WithdrawModal from 'modals/V3WithdrawModal'; import { store } from 'store'; import { Provider } from 'react-redux'; diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4.tsx b/src/elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4.tsx index 2e2a487dd..efa1050ef 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4.tsx @@ -7,7 +7,7 @@ import { } from 'datebook'; import { openNewTab } from 'utils/pureFunctions'; import dayjs from 'dayjs'; -import { V3WithdrawConfirmContent } from '../../pendingWithdraw/confirm/V3WithdrawConfirmModal'; +import { V3WithdrawConfirmContent } from '../../../../../../modals/V3WithdrawConfirmModal'; import { useAppSelector } from 'store'; import { getPortfolioWithdrawalRequests } from 'store/portfolio/v3Portfolio'; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx index 986228e8e..1120e9115 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx @@ -1,7 +1,7 @@ import { useV3Withdraw } from 'elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw'; import { WithdrawItem } from 'elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawItem'; -import { V3WithdrawCancelModal } from 'elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawCancelModal'; -import { V3WithdrawConfirmModal } from 'elements/earn/portfolio/v3/pendingWithdraw/confirm/V3WithdrawConfirmModal'; +import { V3WithdrawCancelModal } from 'modals/V3WithdrawCancelModal'; +import { V3WithdrawConfirmModal } from 'modals/V3WithdrawConfirmModal'; export const V3Withdraw = () => { const { diff --git a/src/elements/layoutHeader/LayoutHeader.tsx b/src/elements/layoutHeader/LayoutHeader.tsx index 9bfbaa8ed..69b214b60 100644 --- a/src/elements/layoutHeader/LayoutHeader.tsx +++ b/src/elements/layoutHeader/LayoutHeader.tsx @@ -2,7 +2,7 @@ import { NotificationsMenu } from 'elements/notifications/NotificationsMenu'; import { SettingsMenu } from 'elements/settings/SettingsMenu'; import { ReactComponent as IconBancor } from 'assets/icons/bancor.svg'; import { useWalletConnect } from '../walletConnect/useWalletConnect'; -import { WalletConnectModal } from '../walletConnect/WalletConnectModal'; +import { WalletConnectModal } from '../../modals/WalletConnectModal'; import { WalletConnectButton } from '../walletConnect/WalletConnectButton'; import { useEffect, useState } from 'react'; import { NetworkIndicator } from './NetworkIndicator'; diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index dcde69add..6bf22d1bb 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -3,7 +3,7 @@ import dayjs from 'utils/dayjs'; import BigNumber from 'bignumber.js'; import { InputField } from 'components/inputField/InputField'; import { TokenInputField } from 'components/tokenInputField/TokenInputField'; -import { ModalDuration } from 'elements/modalDuration/modalDuration'; +import { ModalDuration } from 'modals/modalDuration'; import { Token, updateUserBalances } from 'services/observables/tokens'; import { ReactComponent as IconSync } from 'assets/icons/sync.svg'; import { classNameGenerator } from 'utils/pureFunctions'; @@ -17,19 +17,13 @@ import { useDispatch } from 'react-redux'; import { useWeb3React } from '@web3-react/core'; import { ethToken, wethToken } from 'services/web3/config'; import { useAppSelector } from 'store'; -import { ModalApprove } from 'elements/modalApprove/modalApprove'; +import { ModalApprove } from 'modals/modalApprove'; import { ApprovalContract, getNetworkContractApproval, } from 'services/web3/approval'; import { prettifyNumber } from 'utils/helperFunctions'; -import { - ConversionEvents, - sendConversionEvent, - setCurrentConversion, -} from 'services/api/googleTagManager'; import { calculatePercentageChange } from 'utils/formulas'; -import { ModalDepositETH } from 'elements/modalDepositETH/modalDepositETH'; import { Button, ButtonPercentages, @@ -37,6 +31,12 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; +import { ModalDepositETH } from 'modals/modalDepositETH'; +import { + sendConversionEvent, + ConversionEvents, + setCurrentConversion, +} from 'services/api/googleTagManager'; enum Field { from, diff --git a/src/hooks/useApproveModal.tsx b/src/hooks/useApproveModal.tsx index ac884255f..d89c962e7 100644 --- a/src/hooks/useApproveModal.tsx +++ b/src/hooks/useApproveModal.tsx @@ -5,7 +5,7 @@ import { getNetworkContractApproval, setNetworkContractApproval, } from 'services/web3/approval'; -import { ModalApproveNew } from 'elements/modalApprove/modalApproveNew'; +import { ModalApproveNew } from 'modals/modalApproveNew'; import { addNotification, NotificationType, diff --git a/src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx b/src/modals/DepositDisabledModal.tsx similarity index 86% rename from src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx rename to src/modals/DepositDisabledModal.tsx index ea3301993..9a5245bd5 100644 --- a/src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx +++ b/src/modals/DepositDisabledModal.tsx @@ -1,11 +1,11 @@ import { useState } from 'react'; import { ModalV3 } from 'components/modal/ModalV3'; -interface Props { +export const DepositDisabledModal = ({ + renderButton, +}: { renderButton: (onClick: () => void) => React.ReactNode; -} - -export const DepositDisabledModal = ({ renderButton }: Props) => { +}) => { const [isOpen, setIsOpen] = useState(false); const onClose = async () => { diff --git a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx b/src/modals/DepositV3Modal.tsx similarity index 99% rename from src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx rename to src/modals/DepositV3Modal.tsx index 93957c893..43683f6b3 100644 --- a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx +++ b/src/modals/DepositV3Modal.tsx @@ -31,14 +31,15 @@ import { ReactComponent as IconChevron } from 'assets/icons/chevronDown.svg'; import { getPoolsV3Map } from 'store/bancor/pool'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -interface Props { - pool: PoolV3; - renderButton: (onClick: () => void) => React.ReactNode; -} - const REWARDS_EXTRA_GAS = 130_000; -export const DepositV3Modal = ({ pool, renderButton }: Props) => { +export const DepositV3Modal = ({ + pool, + renderButton, +}: { + pool: PoolV3; + renderButton: (onClick: () => void) => React.ReactNode; +}) => { const account = useAppSelector((state) => state.user.account); const [isOpen, setIsOpen] = useState(false); const [txBusy, setTxBusy] = useState(false); diff --git a/src/elements/modalCreatePool/ModalCreatePool.tsx b/src/modals/ModalCreatePool.tsx similarity index 100% rename from src/elements/modalCreatePool/ModalCreatePool.tsx rename to src/modals/ModalCreatePool.tsx diff --git a/src/elements/modalVbnt/ModalVbnt.tsx b/src/modals/ModalVbnt.tsx similarity index 100% rename from src/elements/modalVbnt/ModalVbnt.tsx rename to src/modals/ModalVbnt.tsx diff --git a/src/modals/SearchableTokenListModal.tsx b/src/modals/SearchableTokenListModal.tsx new file mode 100644 index 000000000..b8be1a442 --- /dev/null +++ b/src/modals/SearchableTokenListModal.tsx @@ -0,0 +1,45 @@ +import { Modal } from 'components/modal/Modal'; +import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; +import { isMobile } from 'react-device-detect'; + +export const SearchableTokenListModal = ({ + manage, + setManage, + onClose, + isOpen, + children, +}: { + manage: boolean; + setManage: Function; + isOpen: boolean; + onClose: Function; + children: JSX.Element; +}) => { + if (isMobile) { + return ( + { + if (manage) return setManage(false); + onClose(); + }} + className="flex flex-col px-0" + isOpen={isOpen} + > + {children} + + ); + } + + return ( + setManage(false)} + > + {children} + + ); +}; diff --git a/src/components/selectPoolModal/SelectPoolModalContent.tsx b/src/modals/SelectPoolModal.tsx similarity index 61% rename from src/components/selectPoolModal/SelectPoolModalContent.tsx rename to src/modals/SelectPoolModal.tsx index 15490209c..8045da32d 100644 --- a/src/components/selectPoolModal/SelectPoolModalContent.tsx +++ b/src/modals/SelectPoolModal.tsx @@ -1,13 +1,53 @@ -import { InputField } from '../inputField/InputField'; import { useState } from 'react'; +import { isMobile } from 'react-device-detect'; +import { Modal } from '../components/modal/Modal'; import { Pool } from 'services/observables/pools'; +import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; +import { InputField } from '../components/inputField/InputField'; import { Image } from 'components/image/Image'; -interface Props { +export const SelectPoolModal = ({ + pools, + isOpen, + setIsOpen, + onSelect, +}: { pools: Pool[]; + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; onSelect: Function; -} -export const SelectPoolModalContent = ({ pools, onSelect }: Props) => { +}) => { + const handleOnSelect = (pool: Pool) => { + setIsOpen(false); + onSelect(pool); + }; + + if (isMobile) { + return ( + + + + ); + } + + return ( + + + + ); +}; + +const SelectPoolModalContent = ({ + pools, + onSelect, +}: { + pools: Pool[]; + onSelect: (pool: Pool) => void; +}) => { const [search, setSearch] = useState(''); const filteredPools = pools.filter((pool) => pool.reserves[0].symbol.toLowerCase().includes(search.toLowerCase()) diff --git a/src/elements/earn/portfolio/v3/UpgradeBntModal.tsx b/src/modals/UpgradeBntModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/UpgradeBntModal.tsx rename to src/modals/UpgradeBntModal.tsx diff --git a/src/elements/earn/portfolio/v3/UpgradeTknModal.tsx b/src/modals/UpgradeTknModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/UpgradeTknModal.tsx rename to src/modals/UpgradeTknModal.tsx diff --git a/src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.tsx b/src/modals/V3BonusesModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/bonuses/V3BonusesModal.tsx rename to src/modals/V3BonusesModal.tsx diff --git a/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsModal.tsx rename to src/modals/V3ExternalHoldingsModal.tsx diff --git a/src/elements/earn/portfolio/v3/holdings/V3UnstakeModal.tsx b/src/modals/V3UnstakeModal.tsx similarity index 98% rename from src/elements/earn/portfolio/v3/holdings/V3UnstakeModal.tsx rename to src/modals/V3UnstakeModal.tsx index 7445963ed..7e42a030e 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3UnstakeModal.tsx +++ b/src/modals/V3UnstakeModal.tsx @@ -16,12 +16,13 @@ import { import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; -interface Props { +export const V3UnstakeModal = ({ + holding, + renderButton, +}: { holding: Holding; renderButton: (onClick: () => void) => React.ReactNode; -} - -export const V3UnstakeModal = ({ holding, renderButton }: Props) => { +}) => { const account = useAppSelector((state) => state.user.account); const [isOpen, setIsOpen] = useState(false); const [txBusy, setTxBusy] = useState(false); diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawCancelModal.tsx b/src/modals/V3WithdrawCancelModal.tsx similarity index 91% rename from src/elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawCancelModal.tsx rename to src/modals/V3WithdrawCancelModal.tsx index e63bbb72b..767734849 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawCancelModal.tsx +++ b/src/modals/V3WithdrawCancelModal.tsx @@ -5,20 +5,18 @@ import { Button, ButtonSize } from 'components/button/Button'; import { TokenBalanceLarge } from 'components/tokenBalance/TokenBalanceLarge'; import { toBigNumber } from 'utils/helperFunctions'; -interface Props { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; - withdrawRequest: WithdrawalRequest; - cancelWithdrawal: () => Promise; -} - export const V3WithdrawCancelModal = memo( ({ isModalOpen, setIsModalOpen, withdrawRequest, cancelWithdrawal, - }: Props) => { + }: { + isModalOpen: boolean; + setIsModalOpen: (isOpen: boolean) => void; + withdrawRequest: WithdrawalRequest; + cancelWithdrawal: () => Promise; + }) => { const [txBusy, setTxBusy] = useState(false); const { pool } = withdrawRequest; const token = pool.reserveToken; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/pendingWithdraw/confirm/V3WithdrawConfirmModal.tsx rename to src/modals/V3WithdrawConfirmModal.tsx diff --git a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.tsx b/src/modals/V3WithdrawModal.tsx similarity index 96% rename from src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.tsx rename to src/modals/V3WithdrawModal.tsx index afbf15fbe..b429b69ac 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.tsx +++ b/src/modals/V3WithdrawModal.tsx @@ -8,13 +8,15 @@ import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { useV3WithdrawModal } from 'elements/earn/portfolio/v3/initWithdraw/useV3WithdrawModal'; import { Holding } from 'store/portfolio/v3Portfolio.types'; -interface Props { +const V3WithdrawModal = ({ + isOpen, + setIsOpen, + holding, +}: { isOpen: boolean; setIsOpen: (isOpen: boolean) => void; holding: Holding; -} - -const V3WithdrawModal = ({ isOpen, setIsOpen, holding }: Props) => { +}) => { const { step, onClose, diff --git a/src/elements/walletConnect/WalletConnectModal.tsx b/src/modals/WalletConnectModal.tsx similarity index 62% rename from src/elements/walletConnect/WalletConnectModal.tsx rename to src/modals/WalletConnectModal.tsx index a7c019f0c..13d52a2ef 100644 --- a/src/elements/walletConnect/WalletConnectModal.tsx +++ b/src/modals/WalletConnectModal.tsx @@ -1,8 +1,8 @@ import { Modal } from 'components/modal/Modal'; -import { UseWalletConnect } from './useWalletConnect'; -import { WalletConnectModalList } from './WalletConnectModalList'; -import { WalletConnectModalPending } from './WalletConnectModalPending'; -import { WalletConnectModalError } from './WalletConnectModalError'; +import { UseWalletConnect } from '../elements/walletConnect/useWalletConnect'; +import { WalletConnectModalList } from '../elements/walletConnect/WalletConnectModalList'; +import { WalletConnectModalPending } from '../elements/walletConnect/WalletConnectModalPending'; +import { WalletConnectModalError } from '../elements/walletConnect/WalletConnectModalError'; export const WalletConnectModal = (props: UseWalletConnect) => { const { isPending, isError } = props; diff --git a/src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx b/src/modals/WithdrawLiquidityWidget.tsx similarity index 100% rename from src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx rename to src/modals/WithdrawLiquidityWidget.tsx diff --git a/src/modals/index.tsx b/src/modals/index.tsx new file mode 100644 index 000000000..261940fcf --- /dev/null +++ b/src/modals/index.tsx @@ -0,0 +1,3 @@ +export const Modals = () => { + return <>; +}; diff --git a/src/elements/modalApprove/modalApprove.tsx b/src/modals/modalApprove.tsx similarity index 100% rename from src/elements/modalApprove/modalApprove.tsx rename to src/modals/modalApprove.tsx diff --git a/src/elements/modalApprove/modalApproveNew.tsx b/src/modals/modalApproveNew.tsx similarity index 100% rename from src/elements/modalApprove/modalApproveNew.tsx rename to src/modals/modalApproveNew.tsx diff --git a/src/elements/modalDepositETH/modalDepositETH.tsx b/src/modals/modalDepositETH.tsx similarity index 95% rename from src/elements/modalDepositETH/modalDepositETH.tsx rename to src/modals/modalDepositETH.tsx index 18a2dcf7d..c013c4e1a 100644 --- a/src/elements/modalDepositETH/modalDepositETH.tsx +++ b/src/modals/modalDepositETH.tsx @@ -2,18 +2,17 @@ import { Modal } from 'components/modal/Modal'; import { ReactComponent as IconDeposit } from 'assets/icons/deposit.svg'; import { Button, ButtonSize } from 'components/button/Button'; -interface ModalDepositETHProps { - amount: string; - isOpen: boolean; - setIsOpen: Function; - onConfirm: Function; -} export const ModalDepositETH = ({ amount, isOpen, setIsOpen, onConfirm, -}: ModalDepositETHProps) => { +}: { + amount: string; + isOpen: boolean; + setIsOpen: Function; + onConfirm: Function; +}) => { return (
} diff --git a/src/elements/modalDuration/modalDuration.tsx b/src/modals/modalDuration.tsx similarity index 100% rename from src/elements/modalDuration/modalDuration.tsx rename to src/modals/modalDuration.tsx diff --git a/src/pages/Vote.tsx b/src/pages/Vote.tsx index e23342612..f2c2b3eaa 100644 --- a/src/pages/Vote.tsx +++ b/src/pages/Vote.tsx @@ -1,7 +1,7 @@ import { useWeb3React } from '@web3-react/core'; import { ReactComponent as IconLink } from 'assets/icons/link.svg'; import { CountdownTimer } from 'components/countdownTimer/CountdownTimer'; -import { ModalVbnt } from 'elements/modalVbnt/ModalVbnt'; +import { ModalVbnt } from 'modals/ModalVbnt'; import { useCallback, useState } from 'react'; import { useEffect } from 'react'; import { useAppSelector } from 'store'; From 03b9937f95ad053b8a038e2933d66211f9568ce5 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 14 Jul 2022 16:06:17 +0300 Subject: [PATCH 04/29] renamed some modals to create consistency --- .../ProtectedPositionTableCellActions.tsx | 4 ++-- src/elements/swapLimit/SwapLimit.tsx | 6 +++--- src/hooks/useApproveModal.tsx | 2 +- src/modals/{modalApprove.tsx => ApproveModal.tsx} | 0 .../{ModalCreatePool.tsx => CreatePoolModal.tsx} | 0 .../{modalDepositETH.tsx => DepositETHModal.tsx} | 0 src/modals/{modalDuration.tsx => DurationModal.tsx} | 0 .../{modalApproveNew.tsx => NewApproveModal.tsx} | 0 src/modals/{ModalVbnt.tsx => VbntModal.tsx} | 0 ...iquidityWidget.tsx => WithdrawLiquidityModal.tsx} | 12 +++++------- src/pages/Vote.tsx | 2 +- 11 files changed, 12 insertions(+), 14 deletions(-) rename src/modals/{modalApprove.tsx => ApproveModal.tsx} (100%) rename src/modals/{ModalCreatePool.tsx => CreatePoolModal.tsx} (100%) rename src/modals/{modalDepositETH.tsx => DepositETHModal.tsx} (100%) rename src/modals/{modalDuration.tsx => DurationModal.tsx} (100%) rename src/modals/{modalApproveNew.tsx => NewApproveModal.tsx} (100%) rename src/modals/{ModalVbnt.tsx => VbntModal.tsx} (100%) rename src/modals/{WithdrawLiquidityWidget.tsx => WithdrawLiquidityModal.tsx} (94%) diff --git a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx index d5be039e4..b9bece5c4 100644 --- a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx @@ -6,7 +6,7 @@ import { CellProps } from 'react-table'; import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { TableCellExpander } from 'components/table/TableCellExpander'; import { Button } from 'components/button/Button'; -import { WithdrawLiquidityWidget } from '../../../../../modals/WithdrawLiquidityWidget'; +import { WithdrawLiquidityModal } from '../../../../../modals/WithdrawLiquidityModal'; import { UpgradeBntModal } from '../../../../../modals/UpgradeBntModal'; import { bntToken } from 'services/web3/config'; import { getAllBntPositionsAndAmount } from 'store/liquidity/liquidity'; @@ -123,7 +123,7 @@ export const ProtectedPositionTableCellActions = ( groupContent, subMenu: () => setIsOpenWithdraw(true), })} - diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 6bf22d1bb..e9009f3a3 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -3,7 +3,7 @@ import dayjs from 'utils/dayjs'; import BigNumber from 'bignumber.js'; import { InputField } from 'components/inputField/InputField'; import { TokenInputField } from 'components/tokenInputField/TokenInputField'; -import { ModalDuration } from 'modals/modalDuration'; +import { ModalDuration } from 'modals/DurationModal'; import { Token, updateUserBalances } from 'services/observables/tokens'; import { ReactComponent as IconSync } from 'assets/icons/sync.svg'; import { classNameGenerator } from 'utils/pureFunctions'; @@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux'; import { useWeb3React } from '@web3-react/core'; import { ethToken, wethToken } from 'services/web3/config'; import { useAppSelector } from 'store'; -import { ModalApprove } from 'modals/modalApprove'; +import { ModalApprove } from 'modals/ApproveModal'; import { ApprovalContract, getNetworkContractApproval, @@ -31,7 +31,7 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -import { ModalDepositETH } from 'modals/modalDepositETH'; +import { ModalDepositETH } from 'modals/DepositETHModal'; import { sendConversionEvent, ConversionEvents, diff --git a/src/hooks/useApproveModal.tsx b/src/hooks/useApproveModal.tsx index d89c962e7..3ed91c9fa 100644 --- a/src/hooks/useApproveModal.tsx +++ b/src/hooks/useApproveModal.tsx @@ -5,7 +5,7 @@ import { getNetworkContractApproval, setNetworkContractApproval, } from 'services/web3/approval'; -import { ModalApproveNew } from 'modals/modalApproveNew'; +import { ModalApproveNew } from 'modals/NewApproveModal'; import { addNotification, NotificationType, diff --git a/src/modals/modalApprove.tsx b/src/modals/ApproveModal.tsx similarity index 100% rename from src/modals/modalApprove.tsx rename to src/modals/ApproveModal.tsx diff --git a/src/modals/ModalCreatePool.tsx b/src/modals/CreatePoolModal.tsx similarity index 100% rename from src/modals/ModalCreatePool.tsx rename to src/modals/CreatePoolModal.tsx diff --git a/src/modals/modalDepositETH.tsx b/src/modals/DepositETHModal.tsx similarity index 100% rename from src/modals/modalDepositETH.tsx rename to src/modals/DepositETHModal.tsx diff --git a/src/modals/modalDuration.tsx b/src/modals/DurationModal.tsx similarity index 100% rename from src/modals/modalDuration.tsx rename to src/modals/DurationModal.tsx diff --git a/src/modals/modalApproveNew.tsx b/src/modals/NewApproveModal.tsx similarity index 100% rename from src/modals/modalApproveNew.tsx rename to src/modals/NewApproveModal.tsx diff --git a/src/modals/ModalVbnt.tsx b/src/modals/VbntModal.tsx similarity index 100% rename from src/modals/ModalVbnt.tsx rename to src/modals/VbntModal.tsx diff --git a/src/modals/WithdrawLiquidityWidget.tsx b/src/modals/WithdrawLiquidityModal.tsx similarity index 94% rename from src/modals/WithdrawLiquidityWidget.tsx rename to src/modals/WithdrawLiquidityModal.tsx index 9831bed0d..aa30a8d63 100644 --- a/src/modals/WithdrawLiquidityWidget.tsx +++ b/src/modals/WithdrawLiquidityModal.tsx @@ -4,15 +4,13 @@ import { PopoverV3 } from 'components/popover/PopoverV3'; import { useMemo } from 'react'; import { useAppSelector } from 'store'; -interface Props { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; -} - -export const WithdrawLiquidityWidget = ({ +export const WithdrawLiquidityModal = ({ isModalOpen, setIsModalOpen, -}: Props) => { +}: { + isModalOpen: boolean; + setIsModalOpen: (isOpen: boolean) => void; +}) => { const { lockDuration } = useAppSelector( (state) => state.v3Portfolio.withdrawalSettings ); diff --git a/src/pages/Vote.tsx b/src/pages/Vote.tsx index f2c2b3eaa..b7dacbb20 100644 --- a/src/pages/Vote.tsx +++ b/src/pages/Vote.tsx @@ -1,7 +1,7 @@ import { useWeb3React } from '@web3-react/core'; import { ReactComponent as IconLink } from 'assets/icons/link.svg'; import { CountdownTimer } from 'components/countdownTimer/CountdownTimer'; -import { ModalVbnt } from 'modals/ModalVbnt'; +import { ModalVbnt } from 'modals/VbntModal'; import { useCallback, useState } from 'react'; import { useEffect } from 'react'; import { useAppSelector } from 'store'; From d95c1119b24806afbbbec1ce2af9cfa3e53a030d Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 14 Jul 2022 16:13:41 +0300 Subject: [PATCH 05/29] more changes to align everything --- src/elements/swapLimit/SwapLimit.tsx | 12 ++++++------ src/modals/ApproveModal.tsx | 22 ++++++++++------------ src/modals/CreatePoolModal.tsx | 2 +- src/modals/DepositETHModal.tsx | 2 +- src/modals/DurationModal.tsx | 12 +++++------- src/modals/NewApproveModal.tsx | 20 +++++++++----------- src/modals/V3ExternalHoldingsModal.tsx | 12 +++++------- src/modals/V3WithdrawConfirmModal.tsx | 21 ++++++++++++--------- src/modals/VbntModal.tsx | 20 +++++++++----------- src/pages/Vote.tsx | 4 ++-- 10 files changed, 60 insertions(+), 67 deletions(-) diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index e9009f3a3..206532bec 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -3,7 +3,7 @@ import dayjs from 'utils/dayjs'; import BigNumber from 'bignumber.js'; import { InputField } from 'components/inputField/InputField'; import { TokenInputField } from 'components/tokenInputField/TokenInputField'; -import { ModalDuration } from 'modals/DurationModal'; +import { DurationModal } from 'modals/DurationModal'; import { Token, updateUserBalances } from 'services/observables/tokens'; import { ReactComponent as IconSync } from 'assets/icons/sync.svg'; import { classNameGenerator } from 'utils/pureFunctions'; @@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux'; import { useWeb3React } from '@web3-react/core'; import { ethToken, wethToken } from 'services/web3/config'; import { useAppSelector } from 'store'; -import { ModalApprove } from 'modals/ApproveModal'; +import { ApproveModal } from 'modals/ApproveModal'; import { ApprovalContract, getNetworkContractApproval, @@ -31,7 +31,7 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -import { ModalDepositETH } from 'modals/DepositETHModal'; +import { DepositETHModal } from 'modals/DepositETHModal'; import { sendConversionEvent, ConversionEvents, @@ -510,13 +510,13 @@ export const SwapLimit = ({
Expires in - +
)}
- - { +}: { + setIsOpen: Function; + isOpen: boolean; + amount: string; + fromToken?: Token; + handleApproved: Function; + waitForApproval?: boolean; + contract: ApprovalContract; +}) => { const dispatch = useDispatch(); if (!fromToken) return null; diff --git a/src/modals/CreatePoolModal.tsx b/src/modals/CreatePoolModal.tsx index f1c3894e6..eacfdcc83 100644 --- a/src/modals/CreatePoolModal.tsx +++ b/src/modals/CreatePoolModal.tsx @@ -20,7 +20,7 @@ import { import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { Pool } from 'services/observables/pools'; -export const ModalCreatePool = () => { +export const CreatePoolModal = () => { const account = useAppSelector((state) => state.user.account); const [isOpen, setIsOpen] = useState(false); diff --git a/src/modals/DepositETHModal.tsx b/src/modals/DepositETHModal.tsx index c013c4e1a..e08a4a143 100644 --- a/src/modals/DepositETHModal.tsx +++ b/src/modals/DepositETHModal.tsx @@ -2,7 +2,7 @@ import { Modal } from 'components/modal/Modal'; import { ReactComponent as IconDeposit } from 'assets/icons/deposit.svg'; import { Button, ButtonSize } from 'components/button/Button'; -export const ModalDepositETH = ({ +export const DepositETHModal = ({ amount, isOpen, setIsOpen, diff --git a/src/modals/DurationModal.tsx b/src/modals/DurationModal.tsx index 5cf8edcf4..cbc79a8ce 100644 --- a/src/modals/DurationModal.tsx +++ b/src/modals/DurationModal.tsx @@ -8,20 +8,18 @@ import { ReactComponent as IconClock } from 'assets/icons/clock-solid.svg'; import { formatDuration } from 'utils/helperFunctions'; import { Button, ButtonSize } from 'components/button/Button'; -interface ModalDurationProps { - duration: Duration; - setDuration: Function; -} - interface DurationItem { id: string; title: number; } -export const ModalDuration = ({ +export const DurationModal = ({ duration, setDuration, -}: ModalDurationProps) => { +}: { + duration: Duration; + setDuration: Function; +}) => { const [isOpen, setIsOpen] = useState(false); const [days, setDays] = useState(duration.days()); const [hours, setHours] = useState(duration.hours()); diff --git a/src/modals/NewApproveModal.tsx b/src/modals/NewApproveModal.tsx index d227d9ab7..ba286d4e1 100644 --- a/src/modals/NewApproveModal.tsx +++ b/src/modals/NewApproveModal.tsx @@ -3,16 +3,6 @@ import { Token } from 'services/observables/tokens'; import { Button, ButtonSize } from 'components/button/Button'; import { Image } from 'components/image/Image'; -interface Props { - isOpen: boolean; - setIsOpen: Function; - setApproval: Function; - token: Token; - amount: string; - isLoading: boolean; - onClose?: Function; -} - export const ModalApproveNew = ({ isOpen, setIsOpen, @@ -21,7 +11,15 @@ export const ModalApproveNew = ({ amount, isLoading, onClose, -}: Props) => { +}: { + isOpen: boolean; + setIsOpen: Function; + setApproval: Function; + token: Token; + amount: string; + isLoading: boolean; + onClose?: Function; +}) => { return ( { diff --git a/src/modals/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx index b68c9f8ba..76b2b6805 100644 --- a/src/modals/V3ExternalHoldingsModal.tsx +++ b/src/modals/V3ExternalHoldingsModal.tsx @@ -12,17 +12,15 @@ import { mockToken } from 'utils/mocked'; import { getMigrateFnByAmmProvider } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings'; import { shrinkToken } from 'utils/formulas'; -interface Props { - position: ExternalHolding; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; -} - export const V3ExternalHoldingsModal = ({ position, isOpen, setIsOpen, -}: Props) => { +}: { + position: ExternalHolding; + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; +}) => { const [txBusy, setTxBusy] = useState(false); const account = useAppSelector((state) => state.user.account); const dispatch = useDispatch(); diff --git a/src/modals/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx index 950f445cf..8acdba438 100644 --- a/src/modals/V3WithdrawConfirmModal.tsx +++ b/src/modals/V3WithdrawConfirmModal.tsx @@ -11,20 +11,18 @@ import { bntToken } from 'services/web3/config'; import { Switch } from 'components/switch/Switch'; import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; -interface Props { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; - withdrawRequest: WithdrawalRequest; - openCancelModal: (req: WithdrawalRequest) => void; -} - export const V3WithdrawConfirmModal = memo( ({ isModalOpen, setIsModalOpen, withdrawRequest, openCancelModal, - }: Props) => { + }: { + isModalOpen: boolean; + setIsModalOpen: (isOpen: boolean) => void; + withdrawRequest: WithdrawalRequest; + openCancelModal: (req: WithdrawalRequest) => void; + }) => { return ( { +}: { + isModalOpen: boolean; + setIsModalOpen: (isOpen: boolean) => void; + withdrawRequest: WithdrawalRequest; + openCancelModal: (req: WithdrawalRequest) => void; +}) => { const { ModalApprove, token, diff --git a/src/modals/VbntModal.tsx b/src/modals/VbntModal.tsx index 738a737b8..c0a62fdaa 100644 --- a/src/modals/VbntModal.tsx +++ b/src/modals/VbntModal.tsx @@ -22,23 +22,21 @@ import { ApprovalContract } from 'services/web3/approval'; import { useAppSelector } from 'store'; import { Button, ButtonSize } from 'components/button/Button'; -interface ModalVbntProps { - setIsOpen: Function; - isOpen: boolean; - token: Token; - stake: boolean; - stakeBalance?: string; - onCompleted?: Function; -} - -export const ModalVbnt = ({ +export const VbntModal = ({ setIsOpen, isOpen, token, stake, stakeBalance, onCompleted, -}: ModalVbntProps) => { +}: { + setIsOpen: Function; + isOpen: boolean; + token: Token; + stake: boolean; + stakeBalance?: string; + onCompleted?: Function; +}) => { const account = useAppSelector((state) => state.user.account); const [amount, setAmount] = useState(''); const percentages = useMemo(() => [25, 50, 75, 100], []); diff --git a/src/pages/Vote.tsx b/src/pages/Vote.tsx index b7dacbb20..caccf3395 100644 --- a/src/pages/Vote.tsx +++ b/src/pages/Vote.tsx @@ -1,7 +1,7 @@ import { useWeb3React } from '@web3-react/core'; import { ReactComponent as IconLink } from 'assets/icons/link.svg'; import { CountdownTimer } from 'components/countdownTimer/CountdownTimer'; -import { ModalVbnt } from 'modals/VbntModal'; +import { VbntModal } from 'modals/VbntModal'; import { useCallback, useState } from 'react'; import { useEffect } from 'react'; import { useAppSelector } from 'store'; @@ -255,7 +255,7 @@ export const Vote = () => {
{govToken && ( - Date: Thu, 14 Jul 2022 16:31:17 +0300 Subject: [PATCH 06/29] moved modal v3 and full screen modal v3 and renamed them, removed stale modal code --- src/components/modal/Modal.stories.tsx | 38 ----- src/components/modal/Modal.tsx | 99 ----------- src/components/modal/ModalV3.tsx | 101 ----------- .../modalFullscreen/modalFullscreenV3.tsx | 67 -------- .../SearchableTokenList.tsx | 2 +- src/components/slideover/Slideover.tsx | 2 +- src/modals/ApproveModal.tsx | 4 +- src/modals/CreatePoolModal.tsx | 2 +- src/modals/DepositDisabledModal.tsx | 6 +- src/modals/DepositETHModal.tsx | 4 +- src/modals/DepositV3Modal.tsx | 6 +- src/modals/DurationModal.tsx | 2 +- src/modals/NewApproveModal.tsx | 4 +- src/modals/SearchableTokenListModal.tsx | 9 +- src/modals/SelectPoolModal.tsx | 7 +- src/modals/UpgradeBntModal.tsx | 4 +- src/modals/UpgradeTknModal.tsx | 4 +- src/modals/V3BonusesModal.tsx | 2 +- src/modals/V3ExternalHoldingsModal.tsx | 2 +- src/modals/V3UnstakeModal.tsx | 6 +- src/modals/V3WithdrawCancelModal.tsx | 2 +- src/modals/V3WithdrawConfirmModal.tsx | 6 +- src/modals/V3WithdrawModal.tsx | 6 +- src/modals/VbntModal.tsx | 4 +- src/modals/WalletConnectModal.tsx | 2 +- src/modals/WithdrawLiquidityModal.tsx | 6 +- src/modals/index.tsx | 160 ++++++++++++++++++ 27 files changed, 205 insertions(+), 352 deletions(-) delete mode 100644 src/components/modal/Modal.stories.tsx delete mode 100644 src/components/modal/Modal.tsx delete mode 100644 src/components/modal/ModalV3.tsx delete mode 100644 src/components/modalFullscreen/modalFullscreenV3.tsx diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx deleted file mode 100644 index 0996079a3..000000000 --- a/src/components/modal/Modal.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Modal } from './Modal'; -import { useState } from 'react'; -import { withDesign } from 'storybook-addon-designs'; -import { Button } from 'components/button/Button'; - -export default { - title: 'Components/Modal/Normal', - component: Modal, - decorators: [withDesign], -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - const [isOpen, setIsOpen] = useState(false); - - return ( - <> - - -

some content

- - - ); -}; - -export const Open = Template.bind({}); -Open.args = { - isOpen: true, - setIsOpen: () => {}, - title: 'Modal title', -}; - -Open.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=7879%3A257081', - }, -}; diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx deleted file mode 100644 index 6dc132860..000000000 --- a/src/components/modal/Modal.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment } from 'react'; -import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; -import { ReactComponent as IconChevron } from 'assets/icons/chevronRight.svg'; - -interface ModalProps { - title?: string; - children: JSX.Element; - separator?: boolean; - titleElement?: any; - setIsOpen: Function; - isOpen: boolean; - onBackClick?: Function; - showBackButton?: boolean; - onClose?: Function; - large?: boolean; -} - -export const Modal = ({ - title, - children, - separator, - titleElement, - setIsOpen, - isOpen, - showBackButton, - onBackClick, - onClose, - large, -}: ModalProps) => { - return ( - <> - - (onClose ? onClose() : setIsOpen(false))} - > -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
- - {showBackButton && ( - - )} - {titleElement && titleElement} - {title ? title :
 
} -
- -
- -
- {separator &&
} - {children} -
-
- -
- - - - ); -}; diff --git a/src/components/modal/ModalV3.tsx b/src/components/modal/ModalV3.tsx deleted file mode 100644 index 412e996bb..000000000 --- a/src/components/modal/ModalV3.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment, ReactNode } from 'react'; -import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; -import { ReactComponent as IconChevron } from 'assets/icons/chevronRight.svg'; - -interface Props { - title?: string; - children: JSX.Element; - separator?: boolean; - titleElement?: ReactNode; - setIsOpen: (isOpen: boolean) => void; - isOpen: boolean; - onBackClick?: Function; - showBackButton?: boolean; - onClose?: Function; - large?: boolean; -} - -export const ModalV3 = ({ - title, - children, - separator, - titleElement, - setIsOpen, - isOpen, - showBackButton, - onBackClick, - onClose, - large, -}: Props) => { - return ( - <> - - (onClose ? onClose() : setIsOpen(false))} - > -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
- -
- {showBackButton && ( - - )} - {title && title} -
-
- {titleElement && titleElement} - -
- -
- {separator &&
} - {children} -
-
- -
- - - - ); -}; diff --git a/src/components/modalFullscreen/modalFullscreenV3.tsx b/src/components/modalFullscreen/modalFullscreenV3.tsx deleted file mode 100644 index 161dde2be..000000000 --- a/src/components/modalFullscreen/modalFullscreenV3.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment, memo, ReactNode } from 'react'; -import { ReactComponent as IconBancor } from 'assets/icons/bancor.svg'; -import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; - -interface Props { - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - children: ReactNode; - title: string; - titleElement?: ReactNode; - className?: string; -} - -const ModalFullscreenV3 = ({ - isOpen, - setIsOpen, - children, - title, - titleElement, - className, -}: Props) => { - return ( - <> - - setIsOpen(false)} - > -
-
-

- - {title} -

-
- {titleElement && titleElement} - -
-
- -
- {children} -
-
- - - - ); -}; - -export default memo(ModalFullscreenV3); diff --git a/src/components/searchableTokenList/SearchableTokenList.tsx b/src/components/searchableTokenList/SearchableTokenList.tsx index 1a7df341c..7b6da39e6 100644 --- a/src/components/searchableTokenList/SearchableTokenList.tsx +++ b/src/components/searchableTokenList/SearchableTokenList.tsx @@ -17,7 +17,7 @@ import { SearchableTokenListModal } from 'modals/SearchableTokenListModal'; interface SearchableTokenListProps { onClick: Function; isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; excludedTokens?: string[]; includedTokens?: string[]; tokens: Token[]; diff --git a/src/components/slideover/Slideover.tsx b/src/components/slideover/Slideover.tsx index 20469db39..a5a456b80 100644 --- a/src/components/slideover/Slideover.tsx +++ b/src/components/slideover/Slideover.tsx @@ -3,7 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'; interface SlideoverProps { isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; children: JSX.Element; } diff --git a/src/modals/ApproveModal.tsx b/src/modals/ApproveModal.tsx index 5d85ae46b..6c7b58c16 100644 --- a/src/modals/ApproveModal.tsx +++ b/src/modals/ApproveModal.tsx @@ -1,4 +1,3 @@ -import { Modal } from 'components/modal/Modal'; import { ReactComponent as IconLock } from 'assets/icons/lock.svg'; import { addNotification, @@ -15,6 +14,7 @@ import { wait } from 'utils/pureFunctions'; import { sendConversionApprovedEvent } from 'services/api/googleTagManager'; import { ErrorCode } from 'services/web3/types'; import { Button, ButtonSize } from 'components/button/Button'; +import { Modal } from 'modals'; export const ApproveModal = ({ setIsOpen, @@ -25,7 +25,7 @@ export const ApproveModal = ({ waitForApproval, contract, }: { - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; isOpen: boolean; amount: string; fromToken?: Token; diff --git a/src/modals/CreatePoolModal.tsx b/src/modals/CreatePoolModal.tsx index eacfdcc83..69aede7c5 100644 --- a/src/modals/CreatePoolModal.tsx +++ b/src/modals/CreatePoolModal.tsx @@ -8,7 +8,6 @@ import { EthNetworks } from 'services/web3/types'; import { getNetworkVariables } from 'services/web3/config'; import { SelectToken } from 'components/selectToken/SelectToken'; import { InputField } from 'components/inputField/InputField'; -import { Modal } from 'components/modal/Modal'; import { ownershipNotification, poolCreateNotification, @@ -19,6 +18,7 @@ import { } from 'services/notifications/notifications'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { Pool } from 'services/observables/pools'; +import { Modal } from 'modals'; export const CreatePoolModal = () => { const account = useAppSelector((state) => state.user.account); diff --git a/src/modals/DepositDisabledModal.tsx b/src/modals/DepositDisabledModal.tsx index 9a5245bd5..e5c783c6e 100644 --- a/src/modals/DepositDisabledModal.tsx +++ b/src/modals/DepositDisabledModal.tsx @@ -1,5 +1,5 @@ +import { Modal } from 'modals'; import { useState } from 'react'; -import { ModalV3 } from 'components/modal/ModalV3'; export const DepositDisabledModal = ({ renderButton, @@ -15,11 +15,11 @@ export const DepositDisabledModal = ({ return ( <> {renderButton(() => setIsOpen(true))} - +
Deposits are temporarily paused.
- + ); }; diff --git a/src/modals/DepositETHModal.tsx b/src/modals/DepositETHModal.tsx index e08a4a143..712a857ce 100644 --- a/src/modals/DepositETHModal.tsx +++ b/src/modals/DepositETHModal.tsx @@ -1,6 +1,6 @@ -import { Modal } from 'components/modal/Modal'; import { ReactComponent as IconDeposit } from 'assets/icons/deposit.svg'; import { Button, ButtonSize } from 'components/button/Button'; +import { Modal } from 'modals'; export const DepositETHModal = ({ amount, @@ -10,7 +10,7 @@ export const DepositETHModal = ({ }: { amount: string; isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; onConfirm: Function; }) => { return ( diff --git a/src/modals/DepositV3Modal.tsx b/src/modals/DepositV3Modal.tsx index 43683f6b3..7e798bf7e 100644 --- a/src/modals/DepositV3Modal.tsx +++ b/src/modals/DepositV3Modal.tsx @@ -6,7 +6,6 @@ import { useDispatch } from 'react-redux'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { useAppSelector } from 'store'; import { useApproveModal } from 'hooks/useApproveModal'; -import { ModalV3 } from 'components/modal/ModalV3'; import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { TokenInputPercentageV3 } from 'components/tokenInputPercentage/TokenInputPercentageV3'; import { ethToken } from 'services/web3/config'; @@ -30,6 +29,7 @@ import { ExpandableSection } from 'components/expandableSection/ExpandableSectio import { ReactComponent as IconChevron } from 'assets/icons/chevronDown.svg'; import { getPoolsV3Map } from 'store/bancor/pool'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; +import { Modal } from 'modals'; const REWARDS_EXTRA_GAS = 130_000; @@ -160,7 +160,7 @@ export const DepositV3Modal = ({ return ( <> {renderButton(() => setIsOpen(true))} - {ApproveModal} - + ); }; diff --git a/src/modals/DurationModal.tsx b/src/modals/DurationModal.tsx index cbc79a8ce..6fd8bcfad 100644 --- a/src/modals/DurationModal.tsx +++ b/src/modals/DurationModal.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; import dayjs from 'utils/dayjs'; import { Dropdown } from 'components/dropdown/Dropdown'; -import { Modal } from 'components/modal/Modal'; import { Duration } from 'dayjs/plugin/duration'; import { ReactComponent as IconChevronDown } from 'assets/icons/chevronDown.svg'; import { ReactComponent as IconClock } from 'assets/icons/clock-solid.svg'; import { formatDuration } from 'utils/helperFunctions'; import { Button, ButtonSize } from 'components/button/Button'; +import { Modal } from 'modals'; interface DurationItem { id: string; diff --git a/src/modals/NewApproveModal.tsx b/src/modals/NewApproveModal.tsx index ba286d4e1..51bbcdd82 100644 --- a/src/modals/NewApproveModal.tsx +++ b/src/modals/NewApproveModal.tsx @@ -1,7 +1,7 @@ -import { Modal } from 'components/modal/Modal'; import { Token } from 'services/observables/tokens'; import { Button, ButtonSize } from 'components/button/Button'; import { Image } from 'components/image/Image'; +import { Modal } from 'modals'; export const ModalApproveNew = ({ isOpen, @@ -13,7 +13,7 @@ export const ModalApproveNew = ({ onClose, }: { isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; setApproval: Function; token: Token; amount: string; diff --git a/src/modals/SearchableTokenListModal.tsx b/src/modals/SearchableTokenListModal.tsx index b8be1a442..a15db03c3 100644 --- a/src/modals/SearchableTokenListModal.tsx +++ b/src/modals/SearchableTokenListModal.tsx @@ -1,5 +1,4 @@ -import { Modal } from 'components/modal/Modal'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; +import { Modal, ModalFullscreen } from 'modals'; import { isMobile } from 'react-device-detect'; export const SearchableTokenListModal = ({ @@ -12,12 +11,12 @@ export const SearchableTokenListModal = ({ manage: boolean; setManage: Function; isOpen: boolean; - onClose: Function; + onClose: () => void; children: JSX.Element; }) => { if (isMobile) { return ( - { if (manage) return setManage(false); @@ -27,7 +26,7 @@ export const SearchableTokenListModal = ({ isOpen={isOpen} > {children} - + ); } diff --git a/src/modals/SelectPoolModal.tsx b/src/modals/SelectPoolModal.tsx index 8045da32d..b423db99f 100644 --- a/src/modals/SelectPoolModal.tsx +++ b/src/modals/SelectPoolModal.tsx @@ -1,10 +1,9 @@ import { useState } from 'react'; import { isMobile } from 'react-device-detect'; -import { Modal } from '../components/modal/Modal'; import { Pool } from 'services/observables/pools'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; import { InputField } from '../components/inputField/InputField'; import { Image } from 'components/image/Image'; +import { Modal, ModalFullscreen } from 'modals'; export const SelectPoolModal = ({ pools, @@ -24,13 +23,13 @@ export const SelectPoolModal = ({ if (isMobile) { return ( - - + ); } diff --git a/src/modals/UpgradeBntModal.tsx b/src/modals/UpgradeBntModal.tsx index ca1304ee1..77eb496d4 100644 --- a/src/modals/UpgradeBntModal.tsx +++ b/src/modals/UpgradeBntModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { fetchProtectedPositions, ProtectedPosition, @@ -31,7 +31,7 @@ export const UpgradeBntModal = ({ }: { position: ProtectedPositionGrouped; isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; }) => { const dispatch = useDispatch(); diff --git a/src/modals/UpgradeTknModal.tsx b/src/modals/UpgradeTknModal.tsx index 544ccb467..800b0a64c 100644 --- a/src/modals/UpgradeTknModal.tsx +++ b/src/modals/UpgradeTknModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { fetchProtectedPositions, ProtectedPosition, @@ -27,7 +27,7 @@ export const UpgradeTknModal = ({ }: { positions: ProtectedPosition[]; isOpen: boolean; - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; }) => { const dispatch = useDispatch(); const pools = useAppSelector((state) => state.pool.v2Pools); diff --git a/src/modals/V3BonusesModal.tsx b/src/modals/V3BonusesModal.tsx index 98f2b41a8..85a63f2fd 100644 --- a/src/modals/V3BonusesModal.tsx +++ b/src/modals/V3BonusesModal.tsx @@ -4,7 +4,7 @@ import { Button, ButtonVariant } from 'components/button/Button'; import { prettifyNumber } from 'utils/helperFunctions'; import { GroupedStandardReward } from 'store/portfolio/v3Portfolio'; import { shrinkToken } from 'utils/formulas'; -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { useCallback, useMemo, useState } from 'react'; import { TokensOverlap } from 'components/tokensOverlap/TokensOverlap'; import { ReactComponent as IconCheck } from 'assets/icons/check.svg'; diff --git a/src/modals/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx index 76b2b6805..b7da89db2 100644 --- a/src/modals/V3ExternalHoldingsModal.tsx +++ b/src/modals/V3ExternalHoldingsModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { useMemo, useState } from 'react'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; diff --git a/src/modals/V3UnstakeModal.tsx b/src/modals/V3UnstakeModal.tsx index 7e42a030e..f38d8cf91 100644 --- a/src/modals/V3UnstakeModal.tsx +++ b/src/modals/V3UnstakeModal.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { useAppSelector } from 'store'; -import { ModalV3 } from 'components/modal/ModalV3'; import { Holding } from 'store/portfolio/v3Portfolio.types'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { shrinkToken } from 'utils/formulas'; @@ -15,6 +14,7 @@ import { } from 'services/notifications/notifications'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; +import { Modal } from 'modals'; export const V3UnstakeModal = ({ holding, @@ -84,7 +84,7 @@ export const V3UnstakeModal = ({ return ( <> {renderButton(() => setIsOpen(true))} - )} - + ); }; diff --git a/src/modals/V3WithdrawCancelModal.tsx b/src/modals/V3WithdrawCancelModal.tsx index 767734849..aae61c656 100644 --- a/src/modals/V3WithdrawCancelModal.tsx +++ b/src/modals/V3WithdrawCancelModal.tsx @@ -1,6 +1,6 @@ import { WithdrawalRequest } from 'store/portfolio/v3Portfolio.types'; import { memo, useCallback, useMemo, useState } from 'react'; -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { Button, ButtonSize } from 'components/button/Button'; import { TokenBalanceLarge } from 'components/tokenBalance/TokenBalanceLarge'; import { toBigNumber } from 'utils/helperFunctions'; diff --git a/src/modals/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx index 8acdba438..74ed12beb 100644 --- a/src/modals/V3WithdrawConfirmModal.tsx +++ b/src/modals/V3WithdrawConfirmModal.tsx @@ -9,7 +9,7 @@ import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { shrinkToken } from 'utils/formulas'; import { bntToken } from 'services/web3/config'; import { Switch } from 'components/switch/Switch'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; +import { ModalFullscreen } from 'modals'; export const V3WithdrawConfirmModal = memo( ({ @@ -24,7 +24,7 @@ export const V3WithdrawConfirmModal = memo( openCancelModal: (req: WithdrawalRequest) => void; }) => { return ( - - + ); } ); diff --git a/src/modals/V3WithdrawModal.tsx b/src/modals/V3WithdrawModal.tsx index b429b69ac..1ac246de9 100644 --- a/src/modals/V3WithdrawModal.tsx +++ b/src/modals/V3WithdrawModal.tsx @@ -1,5 +1,4 @@ import { memo } from 'react'; -import ModalFullscreenV3 from 'components/modalFullscreen/modalFullscreenV3'; import V3WithdrawStep1 from 'elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1'; import V3WithdrawStep3 from 'elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3'; import V3WithdrawStep4 from 'elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4'; @@ -7,6 +6,7 @@ import V3WithdrawStep2 from 'elements/earn/portfolio/v3/initWithdraw/step2/V3Wit import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { useV3WithdrawModal } from 'elements/earn/portfolio/v3/initWithdraw/useV3WithdrawModal'; import { Holding } from 'store/portfolio/v3Portfolio.types'; +import { ModalFullscreen } from 'modals'; const V3WithdrawModal = ({ isOpen, @@ -35,7 +35,7 @@ const V3WithdrawModal = ({ } = useV3WithdrawModal({ setIsOpen }); return ( - )} - + ); }; diff --git a/src/modals/VbntModal.tsx b/src/modals/VbntModal.tsx index c0a62fdaa..48512cd0c 100644 --- a/src/modals/VbntModal.tsx +++ b/src/modals/VbntModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { useMemo, useState } from 'react'; import { Token, updateUserBalances } from 'services/observables/tokens'; @@ -30,7 +30,7 @@ export const VbntModal = ({ stakeBalance, onCompleted, }: { - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void; isOpen: boolean; token: Token; stake: boolean; diff --git a/src/modals/WalletConnectModal.tsx b/src/modals/WalletConnectModal.tsx index 13d52a2ef..62346ef5a 100644 --- a/src/modals/WalletConnectModal.tsx +++ b/src/modals/WalletConnectModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'components/modal/Modal'; +import { Modal } from 'modals'; import { UseWalletConnect } from '../elements/walletConnect/useWalletConnect'; import { WalletConnectModalList } from '../elements/walletConnect/WalletConnectModalList'; import { WalletConnectModalPending } from '../elements/walletConnect/WalletConnectModalPending'; diff --git a/src/modals/WithdrawLiquidityModal.tsx b/src/modals/WithdrawLiquidityModal.tsx index aa30a8d63..109b23056 100644 --- a/src/modals/WithdrawLiquidityModal.tsx +++ b/src/modals/WithdrawLiquidityModal.tsx @@ -1,6 +1,6 @@ import { EmergencyInfo } from 'components/EmergencyInfo'; -import { ModalV3 } from 'components/modal/ModalV3'; import { PopoverV3 } from 'components/popover/PopoverV3'; +import { Modal } from 'modals'; import { useMemo } from 'react'; import { useAppSelector } from 'store'; @@ -21,7 +21,7 @@ export const WithdrawLiquidityModal = ({ ); return ( - setIsModalOpen(false)} isOpen={isModalOpen} large> + setIsModalOpen(false)} isOpen={isModalOpen} large>
Migrate to Bancor V3 to withdraw.
@@ -40,6 +40,6 @@ export const WithdrawLiquidityModal = ({ )} />
- + ); }; diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 261940fcf..3e50637f1 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -1,3 +1,163 @@ +import { Dialog, Transition } from '@headlessui/react'; +import { Fragment, ReactNode } from 'react'; +import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; +import { ReactComponent as IconChevron } from 'assets/icons/chevronRight.svg'; +import { ReactComponent as IconBancor } from 'assets/icons/bancor.svg'; + export const Modals = () => { return <>; }; + +export const Modal = ({ + title, + children, + separator, + titleElement, + setIsOpen, + isOpen, + showBackButton, + onBackClick, + onClose, + large, +}: { + title?: string; + children: JSX.Element; + separator?: boolean; + titleElement?: ReactNode; + setIsOpen: (isOpen: boolean) => void; + isOpen: boolean; + onBackClick?: Function; + showBackButton?: boolean; + onClose?: Function; + large?: boolean; +}) => { + return ( + <> + + (onClose ? onClose() : setIsOpen(false))} + > +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+ +
+ {showBackButton && ( + + )} + {title && title} +
+
+ {titleElement && titleElement} + +
+ +
+ {separator &&
} + {children} +
+
+ +
+ + + + ); +}; + +export const ModalFullscreen = ({ + isOpen, + setIsOpen, + children, + title, + titleElement, + className, +}: { + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; + children: ReactNode; + title: string; + titleElement?: ReactNode; + className?: string; +}) => { + return ( + <> + + setIsOpen(false)} + > +
+
+

+ + {title} +

+
+ {titleElement && titleElement} + +
+
+ +
+ {children} +
+
+ + + + ); +}; From f8e61dd9aa70e4c86fc3b4b49e09b5b284fdfa20 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Sun, 24 Jul 2022 16:39:32 +0300 Subject: [PATCH 07/29] moved limit approve to the hook --- src/elements/swapLimit/SwapLimit.tsx | 178 +++++++++++--------- src/services/api/keeperDao.ts | 90 ++-------- src/services/notifications/notifications.ts | 53 ++++++ 3 files changed, 159 insertions(+), 162 deletions(-) diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 206532bec..cad79d276 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -9,19 +9,11 @@ import { ReactComponent as IconSync } from 'assets/icons/sync.svg'; import { classNameGenerator } from 'utils/pureFunctions'; import { getRate } from 'services/web3/swap/market'; import { KeeprDaoToken, swapLimit } from 'services/api/keeperDao'; -import { - addNotification, - NotificationType, -} from 'store/notification/notification'; import { useDispatch } from 'react-redux'; import { useWeb3React } from '@web3-react/core'; import { ethToken, wethToken } from 'services/web3/config'; import { useAppSelector } from 'store'; -import { ApproveModal } from 'modals/ApproveModal'; -import { - ApprovalContract, - getNetworkContractApproval, -} from 'services/web3/approval'; +import { ApprovalContract } from 'services/web3/approval'; import { prettifyNumber } from 'utils/helperFunctions'; import { calculatePercentageChange } from 'utils/formulas'; import { @@ -36,7 +28,18 @@ import { sendConversionEvent, ConversionEvents, setCurrentConversion, + sendConversionSuccessEvent, + sendConversionFailEvent, } from 'services/api/googleTagManager'; +import { useApproveModal } from 'hooks/useApproveModal'; +import { + depositETHNotification, + rejectNotification, + swapLimitFailedNotification, + swapLimitNotification, +} from 'services/notifications/notifications'; +import { depositWeth } from 'services/web3/swap/limit'; +import { ErrorCode } from 'services/web3/types'; enum Field { from, @@ -72,7 +75,6 @@ export const SwapLimit = ({ const [marketRate, setMarketRate] = useState(-1); const [percentage, setPercentage] = useState(''); const [selPercentage, setSelPercentage] = useState(1); - const [showApproveModal, setShowApproveModal] = useState(false); const [showEthModal, setShowEthModal] = useState(false); const [fromError, setFromError] = useState(''); const [rateWarning, setRateWarning] = useState({ type: '', msg: '' }); @@ -218,29 +220,6 @@ export const SwapLimit = ({ [toToken?.address, fromToken?.address] ); - //Check if approval is required - const checkApproval = async (token: Token) => { - try { - const isApprovalReq = await getNetworkContractApproval( - token, - ApprovalContract.ExchangeProxy, - fromAmount - ); - if (isApprovalReq) { - sendConversionEvent(ConversionEvents.approvePop); - setShowApproveModal(true); - } else await handleSwap(true, token.address === wethToken); - } catch (e: any) { - dispatch( - addNotification({ - type: NotificationType.error, - title: 'Transaction Failed', - msg: `${token.symbol} approval had failed. Please try again or contact support.`, - }) - ); - } - }; - const updateETHandWETH = async () => { if (!(toToken && account)) return; @@ -250,11 +229,7 @@ export const SwapLimit = ({ await updateUserBalances(); }; - const handleSwap = async ( - approved: boolean = false, - weth: boolean = false, - showETHtoWETHModal: boolean = false - ) => { + const handleSwap = async () => { if (!account) { handleWalletButtonClick(); return; @@ -262,23 +237,73 @@ export const SwapLimit = ({ if (!(fromToken && toToken && fromAmount && toAmount)) return; - if (showETHtoWETHModal) return setShowEthModal(true); - - if (!approved) return checkApproval(fromToken); + const tokenPair = fromToken.symbol + '/' + toToken?.symbol; + setCurrentConversion( + 'Limit', + chainId, + tokenPair, + fromToken.symbol, + toToken?.symbol, + fromAmount, + fromAmountUsd, + toAmount, + toAmountUsd, + fiatToggle, + rate, + percentage, + duration.asSeconds().toString() + ); + sendConversionEvent(ConversionEvents.click); - const notification = await swapLimit( - weth ? { ...fromToken, address: wethToken } : fromToken, + await swapLimit( + fromToken.address === ethToken + ? { ...fromToken, address: wethToken } + : fromToken, toToken, fromAmount, toAmount, account, duration, - checkApproval + () => sendConversionEvent(ConversionEvents.wallet_req), + () => { + sendConversionSuccessEvent(fromToken.usdPrice); + swapLimitNotification( + dispatch, + fromToken, + toToken, + fromAmount, + toAmount + ); + if (fromToken.address === ethToken) updateETHandWETH(); + refreshLimit(); + }, + () => { + sendConversionFailEvent('User rejected transaction'); + rejectNotification(dispatch); + }, + (error: string) => { + sendConversionFailEvent(error); + swapLimitFailedNotification( + dispatch, + fromToken, + toToken, + fromAmount, + toAmount + ); + } ); + }; - if (notification) dispatch(addNotification(notification)); - if (fromToken.address === ethToken) updateETHandWETH(); - refreshLimit(); + const deposiEthWeth = async () => { + try { + const txHash = await depositWeth(fromAmount); + depositETHNotification(dispatch, fromAmount, txHash); + approveWETH(); + } catch (e: any) { + if (e.code === ErrorCode.DeniedTx) + sendConversionFailEvent('User rejected transaction'); + else sendConversionFailEvent(e.message); + } }; const isSwapDisabled = () => { @@ -339,26 +364,22 @@ export const SwapLimit = ({ return 'Trade'; }; - const handleSwapClick = () => { - const tokenPair = fromToken.symbol + '/' + toToken?.symbol; - setCurrentConversion( - 'Limit', - chainId, - tokenPair, - fromToken.symbol, - toToken?.symbol, - fromAmount, - fromAmountUsd, - toAmount, - toAmountUsd, - fiatToggle, - rate, - percentage, - duration.asSeconds().toString() - ); - sendConversionEvent(ConversionEvents.click); - handleSwap(false, false, fromToken.address === ethToken); - }; + const [onStart, ModalApprove] = useApproveModal( + [{ amount: fromAmount, token: fromToken }], + handleSwap, + ApprovalContract.ExchangeProxy + ); + + const [approveWETH, ModalApproveWETH] = useApproveModal( + [ + { + amount: fromAmount, + token: { ...fromToken, symbol: 'WETH', address: wethToken }, + }, + ], + handleSwap, + ApprovalContract.ExchangeProxy + ); return (
@@ -516,29 +537,20 @@ export const SwapLimit = ({ )}
- - handleSwap(true, fromToken.address === ethToken) - } - contract={ApprovalContract.ExchangeProxy} - /> + {ModalApprove} + {ModalApproveWETH} handleSwap(true)} + onConfirm={() => deposiEthWeth()} />

Want to approve before each transaction?

-
diff --git a/src/modals/NewApproveModal.tsx b/src/modals/NewApproveModal.tsx deleted file mode 100644 index 51bbcdd82..000000000 --- a/src/modals/NewApproveModal.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Token } from 'services/observables/tokens'; -import { Button, ButtonSize } from 'components/button/Button'; -import { Image } from 'components/image/Image'; -import { Modal } from 'modals'; - -export const ModalApproveNew = ({ - isOpen, - setIsOpen, - setApproval, - token, - amount, - isLoading, - onClose, -}: { - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - setApproval: Function; - token: Token; - amount: string; - isLoading: boolean; - onClose?: Function; -}) => { - return ( - { - if (onClose) onClose(); - setIsOpen(false); - }} - setIsOpen={setIsOpen} - isOpen={isOpen} - > -
-
-
- {'Token -
-

Approve {token.symbol}

-

- Before you can proceed, you need to approve {token.symbol} spending. -

- -

- Want to approve before each transaction? -

- -
-
- - ); -}; From 22ad48a66fca11c503bc2962fc19747c0019684a Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Sun, 24 Jul 2022 17:52:46 +0300 Subject: [PATCH 09/29] added modals redux and moved disable deposits as a first example --- src/elements/earn/pools/TopPools.tsx | 51 +++++++++---------- .../earn/pools/poolsTable/PoolsTable.tsx | 25 ++++----- .../poolsTable/PoolsTableCellActions.tsx | 31 ++++++----- .../earn/portfolio/v3/V3AvailableToStake.tsx | 47 ++++++++--------- .../v3/earningsTable/V3EarningTable.tsx | 21 ++++---- src/modals/DepositDisabledModal.tsx | 18 +++---- src/modals/index.tsx | 9 +++- src/store/index.ts | 2 + src/store/modals/modals.ts | 23 +++++++++ 9 files changed, 122 insertions(+), 105 deletions(-) create mode 100644 src/store/modals/modals.ts diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index 57318a5c3..78a08c18d 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -3,11 +3,12 @@ import { useAppSelector } from 'store'; import { getTopPoolsV3 } from 'store/bancor/pool'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { Image } from 'components/image/Image'; -import { DepositDisabledModal } from 'modals/DepositDisabledModal'; -// import { DepositV3Modal } from './poolsTable/v3/DepositV3Modal'; +import { useDispatch } from 'react-redux'; +import { setDisableDepositOpen } from 'store/modals/modals'; export const TopPools = () => { const pools = useAppSelector(getTopPoolsV3); + const dispatch = useDispatch(); return (
@@ -17,32 +18,28 @@ export const TopPools = () => { {pools.length ? pools.map((pool, index) => { return ( - ( - - )} - /> + onClick={() => dispatch(setDisableDepositOpen(true))} + className="flex items-center justify-center min-w-[170px] h-[75px] rounded-[6px] bg-white dark:bg-charcoal border border-silver dark:border-grey transition-all duration-300" + > + Token Logo +
+
+ {pool.reserveToken.symbol} +
+
+ {pool.apr7d.total.toFixed(2)}% + {pool.latestProgram?.isActive && ( + + )} +
+
+ ); }) : [...Array(20)].map((_, index) => ( diff --git a/src/elements/earn/pools/poolsTable/PoolsTable.tsx b/src/elements/earn/pools/poolsTable/PoolsTable.tsx index 63af3b6db..3609429e4 100644 --- a/src/elements/earn/pools/poolsTable/PoolsTable.tsx +++ b/src/elements/earn/pools/poolsTable/PoolsTable.tsx @@ -7,8 +7,6 @@ import { SearchInput } from 'components/searchInput/SearchInput'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { PoolsTableSort } from './PoolsTableFilter'; import { PoolV3 } from 'services/observables/pools'; -// import { DepositV3Modal } from 'elements/earn/pools/poolsTable/v3/DepositV3Modal'; -import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { Statistics } from 'elements/earn/pools/Statistics'; @@ -17,6 +15,8 @@ import { sortNumbersByKey } from 'utils/pureFunctions'; import { Navigate } from 'components/navigate/Navigate'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { Image } from 'components/image/Image'; +import { useDispatch } from 'react-redux'; +import { setDisableDepositOpen } from 'store/modals/modals'; export const PoolsTable = ({ rewards, @@ -38,6 +38,7 @@ export const PoolsTable = ({ setLowEarnRate: Function; }) => { const pools = useAppSelector((state) => state.pool.v3Pools); + const dispatch = useDispatch(); const [search, setSearch] = useState(''); @@ -150,24 +151,20 @@ export const PoolsTable = ({ Header: '', accessor: 'poolDltId', Cell: (_) => ( - ( - - )} - /> + ), width: 50, minWidth: 50, disableSortBy: true, }, ], - [toolTip] + [toolTip, dispatch] ); const defaultSort: SortingRule = { diff --git a/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx b/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx index c459a819d..b381b8499 100644 --- a/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx +++ b/src/elements/earn/pools/poolsTable/PoolsTableCellActions.tsx @@ -1,25 +1,24 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { PopoverV3 } from 'components/popover/PopoverV3'; -import { DepositDisabledModal } from 'modals/DepositDisabledModal'; +import { useDispatch } from 'react-redux'; +import { setDisableDepositOpen } from 'store/modals/modals'; export const PoolsTableCellActions = (_id: string) => { + const dispatch = useDispatch(); + return ( - ( - ( - - )} + ( + )} - /> + > + Deposit & Earn + ); }; diff --git a/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx b/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx index a34db2761..2cf5e319b 100644 --- a/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx +++ b/src/elements/earn/portfolio/v3/V3AvailableToStake.tsx @@ -7,35 +7,32 @@ import { useAppSelector } from 'store'; import { getAvailableToStakeTokens } from 'store/bancor/token'; import { Token } from 'services/observables/tokens'; import { PoolV3 } from 'services/observables/pools'; -import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import 'swiper/css'; +import { useDispatch } from 'react-redux'; +import { setDisableDepositOpen } from 'store/modals/modals'; const AvailableItem = ({ token, pool }: { token: Token; pool: PoolV3 }) => { + const dispatch = useDispatch(); + return ( - ( - - )} - /> + ); }; diff --git a/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx b/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx index cf7ef2f21..f9dd53b87 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/V3EarningTable.tsx @@ -9,15 +9,16 @@ import { getPortfolioHoldings, } from 'store/portfolio/v3Portfolio'; import { Holding } from 'store/portfolio/v3Portfolio.types'; -// import { DepositV3Modal } from 'elements/earn/pools/poolsTable/v3/DepositV3Modal'; -import { DepositDisabledModal } from 'modals/DepositDisabledModal'; import { SortingRule } from 'react-table'; import { shrinkToken } from 'utils/formulas'; import { prettifyNumber } from 'utils/helperFunctions'; +import { useDispatch } from 'react-redux'; +import { setDisableDepositOpen } from 'store/modals/modals'; export const V3EarningTable = () => { const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false); const [holdingToWithdraw, setHoldingToWithdraw] = useState(); + const dispatch = useDispatch(); const holdings = useAppSelector(getPortfolioHoldings); const isLoadingHoldings = useAppSelector(getIsLoadingHoldings); @@ -73,15 +74,11 @@ export const V3EarningTable = () => { accessor: 'poolTokenBalance', Cell: ({ cell }) => (
- ( - - )} + dispatch(setDisableDepositOpen(true))} + setIsWithdrawModalOpen={setIsWithdrawModalOpen} + setHoldingToWithdraw={setHoldingToWithdraw} />
), @@ -90,7 +87,7 @@ export const V3EarningTable = () => { disableSortBy: true, }, ], - [] + [dispatch] ); const defaultSort: SortingRule = { diff --git a/src/modals/DepositDisabledModal.tsx b/src/modals/DepositDisabledModal.tsx index e5c783c6e..c34bb597c 100644 --- a/src/modals/DepositDisabledModal.tsx +++ b/src/modals/DepositDisabledModal.tsx @@ -1,20 +1,18 @@ import { Modal } from 'modals'; -import { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { useAppSelector } from 'store'; +import { setDisableDepositOpen } from 'store/modals/modals'; -export const DepositDisabledModal = ({ - renderButton, -}: { - renderButton: (onClick: () => void) => React.ReactNode; -}) => { - const [isOpen, setIsOpen] = useState(false); +export const DepositDisabledModal = () => { + const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => state.modals.disableDepositOpen); - const onClose = async () => { - setIsOpen(false); + const onClose = () => { + dispatch(setDisableDepositOpen(false)); }; return ( <> - {renderButton(() => setIsOpen(true))}
Deposits are temporarily paused.
diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 3e50637f1..ed1a45811 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -3,9 +3,16 @@ import { Fragment, ReactNode } from 'react'; import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; import { ReactComponent as IconChevron } from 'assets/icons/chevronRight.svg'; import { ReactComponent as IconBancor } from 'assets/icons/bancor.svg'; +import { CreatePoolModal } from './CreatePoolModal'; +import { DepositDisabledModal } from './DepositDisabledModal'; export const Modals = () => { - return <>; + return ( + <> + + + + ); }; export const Modal = ({ diff --git a/src/store/index.ts b/src/store/index.ts index e96ba2920..7522894f0 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -7,6 +7,7 @@ import { notification } from 'store/notification/notification'; import { liquidity } from './liquidity/liquidity'; import { v3Portfolio } from 'store/portfolio/v3Portfolio'; import { gov } from './gov/gov'; +import { modals } from './modals/modals'; export const store = configureStore({ middleware: (getDefaultMiddleware) => @@ -27,6 +28,7 @@ export const store = configureStore({ liquidity, v3Portfolio, gov, + modals, }, }); diff --git a/src/store/modals/modals.ts b/src/store/modals/modals.ts new file mode 100644 index 000000000..106dce8be --- /dev/null +++ b/src/store/modals/modals.ts @@ -0,0 +1,23 @@ +import { createSlice } from '@reduxjs/toolkit'; + +export interface ModalsState { + disableDepositOpen: boolean; +} + +export const initialState: ModalsState = { + disableDepositOpen: false, +}; + +const modalsSlice = createSlice({ + name: 'modals', + initialState, + reducers: { + setDisableDepositOpen: (state, action) => { + state.disableDepositOpen = action.payload; + }, + }, +}); + +export const { setDisableDepositOpen } = modalsSlice.actions; + +export const modals = modalsSlice.reducer; From 0e008d86542b4d629dca991eb243d50fe207a251 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Sun, 24 Jul 2022 18:00:25 +0300 Subject: [PATCH 10/29] removed create modal button --- src/modals/CreatePoolModal.tsx | 88 +++++++++++++++------------------- 1 file changed, 39 insertions(+), 49 deletions(-) diff --git a/src/modals/CreatePoolModal.tsx b/src/modals/CreatePoolModal.tsx index 69aede7c5..168f888af 100644 --- a/src/modals/CreatePoolModal.tsx +++ b/src/modals/CreatePoolModal.tsx @@ -16,7 +16,7 @@ import { rejectNotification, setFeeNotification, } from 'services/notifications/notifications'; -import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; +import { Button, ButtonSize } from 'components/button/Button'; import { Pool } from 'services/observables/pools'; import { Modal } from 'modals'; @@ -73,58 +73,48 @@ export const CreatePoolModal = () => { }; return ( - <> - - -
-
- + +
+
+ +
+
+
+
-
-
- -
-
- x.address) : []} - /> -
+
+ x.address) : []} + />
+
-
-
Fee
-
- -
+
+
Fee
+
+
-
- - + +
+ ); }; From 48f4776468c99eb61456d0ab47c5b19d965f61d8 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Mon, 12 Sep 2022 09:30:40 -0400 Subject: [PATCH 11/29] changed modals state managment --- src/elements/earn/pools/TopPools.tsx | 7 +++-- .../earn/pools/poolsTable/PoolsTable.tsx | 5 +-- .../poolsTable/PoolsTableCellActions.tsx | 5 +-- .../earn/portfolio/v3/V3AvailableToStake.tsx | 5 +-- .../v3/earningsTable/V3EarningTable.tsx | 7 +++-- src/modals/DepositDisabledModal.tsx | 10 +++--- src/modals/index.tsx | 4 +++ src/store/modals/modals.ts | 31 +++++++++++++++---- 8 files changed, 54 insertions(+), 20 deletions(-) diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index 78a08c18d..da57944da 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -4,7 +4,8 @@ import { getTopPoolsV3 } from 'store/bancor/pool'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { Image } from 'components/image/Image'; import { useDispatch } from 'react-redux'; -import { setDisableDepositOpen } from 'store/modals/modals'; +import { pushModal } from 'store/modals/modals'; +import { ModalNames } from 'modals'; export const TopPools = () => { const pools = useAppSelector(getTopPoolsV3); @@ -20,7 +21,9 @@ export const TopPools = () => { return ( -
); }; diff --git a/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx b/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx index f9a72ee5c..9647db1ba 100644 --- a/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/rewards/StakeRewardsBtn.tsx @@ -1,10 +1,11 @@ -import { useState } from 'react'; import { useAppSelector } from 'store'; import { getProtectedPools } from 'store/bancor/pool'; -import { SelectPoolModal } from 'modals/SelectPoolModal'; import { Pool } from 'services/observables/pools'; import { useNavigation } from 'hooks/useNavigation'; import { Button } from 'components/button/Button'; +import { useDispatch } from 'react-redux'; +import { ModalNames } from 'modals'; +import { pushModal } from 'store/modals/modals'; interface Props { buttonLabel: string; @@ -13,8 +14,8 @@ interface Props { export const StakeRewardsBtn = ({ buttonLabel, posGroupId }: Props) => { const { goToPage } = useNavigation(); - const [isModalOpen, setIsModalOpen] = useState(false); const pools = useAppSelector(getProtectedPools); + const dispatch = useDispatch(); const onSelect = (pool: Pool) => { if (posGroupId) @@ -24,13 +25,18 @@ export const StakeRewardsBtn = ({ buttonLabel, posGroupId }: Props) => { return ( <> - - + ); }; diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 7ede5b6ce..e35d0ca29 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -13,7 +13,7 @@ import { useDispatch } from 'react-redux'; import { ethToken, wethToken } from 'services/web3/config'; import { useAppSelector } from 'store'; import { ApprovalContract } from 'services/web3/approval'; -import { prettifyNumber } from 'utils/helperFunctions'; +import { formatDuration, prettifyNumber } from 'utils/helperFunctions'; import { calculatePercentageChange } from 'utils/formulas'; import { Button, @@ -22,7 +22,6 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -import { DepositETHModal } from 'modals/DepositETHModal'; import { useApproveModal } from 'hooks/useApproveModal'; import { depositETHNotification, @@ -37,6 +36,9 @@ import { sendConversionEvent, } from 'services/api/googleTagManager/conversion'; import { Events } from 'services/api/googleTagManager'; +import { pushModal } from 'store/modals/modals'; +import { ModalNames } from 'modals'; +import { ReactComponent as IconChevronDown } from 'assets/icons/chevronDown.svg'; enum Field { from, @@ -71,7 +73,6 @@ export const SwapLimit = ({ const [marketRate, setMarketRate] = useState(-1); const [percentage, setPercentage] = useState(''); const [selPercentage, setSelPercentage] = useState(1); - const [showEthModal, setShowEthModal] = useState(false); const [fromError, setFromError] = useState(''); const [rateWarning, setRateWarning] = useState({ type: '', msg: '' }); const [isLoadingRate, setIsLoadingRate] = useState(false); @@ -525,7 +526,22 @@ export const SwapLimit = ({
Expires in - + + +
)} @@ -533,16 +549,16 @@ export const SwapLimit = ({ {ModalApprove} {ModalApproveWETH} - deposiEthWeth()} - />
} isOpen={isOpen} - setIsOpen={setIsOpen} - onClose={() => setIsOpen(false)} + setIsOpen={onClose} >
@@ -28,7 +38,7 @@ export const DepositETHModal = ({
You Will Receive
- {amount} WETH + {props?.amount} WETH
WETH is a token that represents ETH 1:1 and conforms to the ERC20 @@ -37,8 +47,8 @@ export const DepositETHModal = ({ - +
Custom Time
@@ -72,7 +77,7 @@ export const DurationModal = ({ setDays(x.title)} - title={days?.toString()} + title={days ? days.toString() : ''} items={daysItems} />
@@ -83,7 +88,7 @@ export const DurationModal = ({ setHours(x.title)} - title={hours?.toString()} + title={hours ? hours.toString() : ''} items={hoursItems} />
@@ -94,7 +99,7 @@ export const DurationModal = ({ setMinutes(x.title)} - title={minutes?.toString()} + title={minutes ? minutes.toString() : ''} items={minutesItems} openUp /> @@ -103,8 +108,8 @@ export const DurationModal = ({
)} - + ); }; From 6048bf583baea55f4831f3b0c986500dc950dd9a Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 15 Sep 2022 20:47:33 -0400 Subject: [PATCH 14/29] changed from map to an object --- src/elements/earn/pools/TopPools.tsx | 2 +- .../earn/pools/poolsTable/PoolsTable.tsx | 4 ++- .../poolsTable/PoolsTableCellActions.tsx | 2 +- .../earn/portfolio/v3/V3AvailableToStake.tsx | 2 +- .../v3/earningsTable/V3EarningTable.tsx | 2 +- src/modals/DepositETHModal.tsx | 4 +-- src/modals/DurationModal.tsx | 4 +-- src/modals/SelectPoolModal.tsx | 4 +-- src/store/modals/modals.ts | 27 ++++++++++++++----- 9 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index da57944da..2f82ec33c 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -22,7 +22,7 @@ export const TopPools = () => {
); }; diff --git a/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx b/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx index 4e99bdaaa..e2c52b6dc 100644 --- a/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx +++ b/src/elements/earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx @@ -1,5 +1,4 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; -import { V3BonusesModal } from 'modals/V3BonusesModal'; import { useV3Bonuses } from 'elements/earn/portfolio/v3/bonuses/useV3Bonuses'; import { prettifyNumber } from 'utils/helperFunctions'; import { @@ -13,9 +12,13 @@ import { getCurrency, } from 'services/api/googleTagManager'; import { pool } from 'store/bancor/pool'; +import { pushModal } from 'store/modals/modals'; +import { ModalNames } from 'modals'; +import { useDispatch } from 'react-redux'; export const V3ClaimBonuses = () => { - const { setBonusModalOpen, bonusUsdTotal, isLoading } = useV3Bonuses(); + const { bonusUsdTotal, isLoading } = useV3Bonuses(); + const dispatch = useDispatch(); return ( <> @@ -42,7 +45,7 @@ export const V3ClaimBonuses = () => { withdraw_display_currency: getCurrency(), }); sendWithdrawBonusEvent(WithdrawBonusEvent.CTAClick); - setBonusModalOpen(true); + dispatch(pushModal({ modal: ModalNames.V3Bonuses })); }} disabled={bonusUsdTotal === 0} > @@ -55,7 +58,6 @@ export const V3ClaimBonuses = () => { )}
- ); }; diff --git a/src/elements/earn/portfolio/v3/bonuses/useV3Bonuses.ts b/src/elements/earn/portfolio/v3/bonuses/useV3Bonuses.ts index 928fc04c7..9ba95a6ed 100644 --- a/src/elements/earn/portfolio/v3/bonuses/useV3Bonuses.ts +++ b/src/elements/earn/portfolio/v3/bonuses/useV3Bonuses.ts @@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux'; import { getIsLoadingStandardRewards, getStandardRewards, - openBonusesModal, } from 'store/portfolio/v3Portfolio'; import { useCallback, useMemo } from 'react'; import BigNumber from 'bignumber.js'; @@ -20,22 +19,18 @@ import { sendWithdrawBonusEvent, WithdrawBonusEvent, } from 'services/api/googleTagManager/withdraw'; +import { ModalNames } from 'modals'; +import { popModal } from 'store/modals/modals'; export const useV3Bonuses = () => { const account = useAppSelector((state) => state.user.account); const dispatch = useDispatch(); - const isBonusModalOpen = useAppSelector( - (state) => state.v3Portfolio.bonusesModal - ); const bonuses = useAppSelector(getStandardRewards); const isLoading = useAppSelector(getIsLoadingStandardRewards); - const setBonusModalOpen = useCallback( - (state: boolean) => { - dispatch(openBonusesModal(state)); - }, - [dispatch] - ); + const closetBonusesModal = useCallback(() => { + dispatch(popModal(ModalNames.V3Bonuses)); + }, [dispatch]); const bonusUsdTotal = useMemo( () => @@ -61,7 +56,7 @@ export const useV3Bonuses = () => { const tx = await ContractsApi.StandardRewards.write.claimRewards(ids); sendWithdrawBonusEvent(WithdrawBonusEvent.WalletConfirm); confirmClaimNotification(dispatch, tx.hash); - setBonusModalOpen(false); + closetBonusesModal(); await tx.wait(); sendWithdrawBonusEvent( WithdrawBonusEvent.Success, @@ -78,10 +73,10 @@ export const useV3Bonuses = () => { } else { genericFailedNotification(dispatch, 'Claim rewards failed'); } - setBonusModalOpen(false); + closetBonusesModal(); } }, - [account, dispatch, setBonusModalOpen] + [account, dispatch, closetBonusesModal] ); const handleClaimAndEarn = useCallback( @@ -93,7 +88,7 @@ export const useV3Bonuses = () => { try { const tx = await ContractsApi.StandardRewards.write.stakeRewards(ids); confirmClaimNotification(dispatch, tx.hash); - setBonusModalOpen(false); + closetBonusesModal(); await tx.wait(); await updatePortfolioData(dispatch); } catch (e: any) { @@ -103,16 +98,14 @@ export const useV3Bonuses = () => { } else { genericFailedNotification(dispatch, 'Restake rewards failed'); } - setBonusModalOpen(false); + closetBonusesModal(); } }, - [account, dispatch, setBonusModalOpen] + [account, dispatch, closetBonusesModal] ); return { bonuses, - isBonusModalOpen, - setBonusModalOpen, handleClaim, handleClaimAndEarn, bonusUsdTotal, diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx index efc64d908..03e0ed937 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx @@ -6,6 +6,9 @@ import { EarningTableMenuState } from 'elements/earn/portfolio/v3/earningsTable/ import { useV3Bonuses } from 'elements/earn/portfolio/v3/bonuses/useV3Bonuses'; import { Holding } from 'store/portfolio/v3Portfolio.types'; import { shrinkToken } from 'utils/formulas'; +import { ModalNames } from 'modals'; +import { useDispatch } from 'react-redux'; +import { pushModal } from 'store/modals/modals'; interface Props { setCurrentMenu: (menu: EarningTableMenuState) => void; @@ -23,8 +26,9 @@ export const V3EarningTableMenuMain = memo( setIsWithdrawModalOpen, handleDepositClick, }: Props) => { - const { setBonusModalOpen, bonusUsdTotal } = useV3Bonuses(); + const { bonusUsdTotal } = useV3Bonuses(); const { latestProgram } = holding; + const dispatch = useDispatch(); const handleWithdrawClick = useCallback(() => { setHoldingToWithdraw(holding); @@ -32,14 +36,14 @@ export const V3EarningTableMenuMain = memo( }, [holding, setHoldingToWithdraw, setIsWithdrawModalOpen]); const handleBonusClick = useCallback(() => { - setBonusModalOpen(true); + dispatch(pushModal({ modal: ModalNames.V3Bonuses })); // TODO - add logic for what action to perform // if (true) { // // } else { // setCurrentMenu('bonus'); // } - }, [setBonusModalOpen]); + }, []); return (
diff --git a/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx b/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx index 332e7d51c..580c39534 100644 --- a/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx +++ b/src/elements/earn/portfolio/v3/externalHoldings/V3ExternalHoldingsItem.tsx @@ -1,17 +1,18 @@ -import { memo, useState } from 'react'; +import { memo } from 'react'; import { prettifyNumber } from 'utils/helperFunctions'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { ExternalHolding } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings.types'; -import { V3ExternalHoldingsModal } from 'modals/V3ExternalHoldingsModal'; import { TokensOverlap } from 'components/tokensOverlap/TokensOverlap'; +import { ModalNames } from 'modals'; +import { useDispatch } from 'react-redux'; +import { pushModal } from 'store/modals/modals'; interface Props { position: ExternalHolding; } const V3ExternalHoldingsItem = ({ position }: Props) => { - const [isOpen, setIsOpen] = useState(false); - + const dispatch = useDispatch(); return (
@@ -29,16 +30,17 @@ const V3ExternalHoldingsItem = ({ position }: Props) => { variant={ButtonVariant.Secondary} size={ButtonSize.Full} className="mt-20" - onClick={() => setIsOpen(true)} + onClick={() => + dispatch( + pushModal({ + modal: ModalNames.V3ExternalHoldings, + data: { position }, + }) + ) + } > Protect and earn - -
); }; diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx index 918c099b3..a8dde612b 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx @@ -2,10 +2,13 @@ import { Holding } from 'store/portfolio/v3Portfolio.types'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; -import { V3UnstakeModal } from 'modals/V3UnstakeModal'; import { PopoverV3 } from 'components/popover/PopoverV3'; +import { ModalNames } from 'modals'; +import { useDispatch } from 'react-redux'; +import { pushModal } from 'store/modals/modals'; export const V3HoldingsItemStaked = ({ holding }: { holding: Holding }) => { + const dispatch = useDispatch(); const { pool } = holding; const isDisabled = toBigNumber(holding.stakedTokenBalance).isZero(); @@ -47,20 +50,22 @@ export const V3HoldingsItemStaked = ({ holding }: { holding: Holding }) => {
- ( - - )} - /> + ); }; diff --git a/src/modals/UpgradeBntModal.tsx b/src/modals/UpgradeBntModal.tsx index 6800ef6ab..1d5c2ef5d 100644 --- a/src/modals/UpgradeBntModal.tsx +++ b/src/modals/UpgradeBntModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'modals'; +import { Modal, ModalNames } from 'modals'; import { fetchProtectedPositions, ProtectedPosition, @@ -24,17 +24,24 @@ import { Image } from 'components/image/Image'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { EmergencyInfo } from 'components/EmergencyInfo'; import { useNavigation } from 'hooks/useNavigation'; +import { getModalData, getModalOpen, popModal } from 'store/modals/modals'; -export const UpgradeBntModal = ({ - position, - isOpen, - setIsOpen, -}: { +interface UpgradeBntProps { position: ProtectedPositionGrouped; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; -}) => { +} +export const UpgradeBntModal = () => { const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.UpgradeBnt) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.UpgradeBnt) + ); + + const onClose = () => { + dispatch(popModal(ModalNames.UpgradeBnt)); + }; const { goToPage } = useNavigation(); const pools = useAppSelector((state) => state.pool.v2Pools); @@ -72,11 +79,15 @@ export const UpgradeBntModal = ({ () => rejectNotification(dispatch), () => migrateFailedNotification(dispatch) ); - setIsOpen(false); + onClose(); }; + if (!props) return null; + + const { position } = props; + return ( - }> + }>
Token void; -}) => { +} +export const UpgradeTknModal = () => { const dispatch = useDispatch(); const { goToPage } = useNavigation(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.UpgradeTkn) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.UpgradeTkn) + ); + + const onClose = () => { + dispatch(popModal(ModalNames.UpgradeTkn)); + }; + const pools = useAppSelector((state) => state.pool.v2Pools); const account = useAppSelector((state) => state.user.account); - const position = positions.length !== 0 ? positions[0] : undefined; + const position = + props?.positions?.length !== 0 ? props?.positions[0] : undefined; const token = position?.reserveToken; const { withdrawalFee, lockDuration } = useAppSelector( @@ -51,9 +60,11 @@ export const UpgradeTknModal = ({ [withdrawalFee] ); + if (!props) return null; + const migrate = () => { migrateV2Positions( - positions, + props.positions, (txHash: string) => migrateNotification(dispatch, txHash), async () => { const positions = await fetchProtectedPositions(pools, account!); @@ -63,13 +74,13 @@ export const UpgradeTknModal = ({ () => rejectNotification(dispatch), () => migrateFailedNotification(dispatch) ); - setIsOpen(false); + onClose(); }; if (!position || !token) return null; return ( - }> + }>
Token { - const { bonuses, isBonusModalOpen, setBonusModalOpen } = useV3Bonuses(); + const { bonuses } = useV3Bonuses(); + const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.V3Bonuses) + ); + + const onClose = () => { + dispatch(popModal(ModalNames.V3Bonuses)); + }; return ( - +
{bonuses.map((group) => (
diff --git a/src/modals/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx index 73b9ef969..7d7799068 100644 --- a/src/modals/V3ExternalHoldingsModal.tsx +++ b/src/modals/V3ExternalHoldingsModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'modals'; +import { Modal, ModalNames } from 'modals'; import { useMemo, useState } from 'react'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; @@ -11,19 +11,26 @@ import { useApproveModal } from 'hooks/useApproveModal'; import { mockToken } from 'utils/mocked'; import { getMigrateFnByAmmProvider } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings'; import { shrinkToken } from 'utils/formulas'; +import { getModalOpen, getModalData, popModal } from 'store/modals/modals'; -export const V3ExternalHoldingsModal = ({ - position, - isOpen, - setIsOpen, -}: { +interface V3ExternalHoldingsProps { position: ExternalHolding; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; -}) => { +} +export const V3ExternalHoldingsModal = () => { const [txBusy, setTxBusy] = useState(false); const account = useAppSelector((state) => state.user.account); const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.V3ExternalHoldings) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3ExternalHoldings) + ); + + const onClose = () => { + dispatch(popModal(ModalNames.V3ExternalHoldings)); + }; const { withdrawalFee, lockDuration } = useAppSelector( (state) => state.v3Portfolio.withdrawalSettings @@ -44,13 +51,13 @@ export const V3ExternalHoldingsModal = ({ { token: { ...mockToken, - address: position.poolTokenAddress, + address: props?.position.poolTokenAddress ?? '', symbol: 'lpTKN', }, - amount: shrinkToken(position.poolTokenBalanceWei, 18), + amount: shrinkToken(props?.position.poolTokenBalanceWei ?? '0', 18), }, ], - [position.poolTokenAddress, position.poolTokenBalanceWei] + [props?.position.poolTokenAddress, props?.position.poolTokenBalanceWei] ); const migrate = async () => { @@ -72,7 +79,7 @@ export const V3ExternalHoldingsModal = ({ position.poolTokenBalanceWei ); await res.wait(); - setIsOpen(false); + onClose(); await updatePortfolioData(dispatch); } catch (e) { console.error(e); @@ -87,13 +94,16 @@ export const V3ExternalHoldingsModal = ({ ContractsApi.BancorPortal.contractAddress ); + if (!props) return null; + const { position } = props; + const handleButtonClick = async () => { setTxBusy(true); onStart(); }; return ( - +

Protect this {position.ammName} holding from impermanent loss diff --git a/src/modals/V3UnstakeModal.tsx b/src/modals/V3UnstakeModal.tsx index f38d8cf91..8e7cc4849 100644 --- a/src/modals/V3UnstakeModal.tsx +++ b/src/modals/V3UnstakeModal.tsx @@ -14,23 +14,32 @@ import { } from 'services/notifications/notifications'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; -import { Modal } from 'modals'; +import { Modal, ModalNames } from 'modals'; +import { getModalOpen, getModalData, popModal } from 'store/modals/modals'; -export const V3UnstakeModal = ({ - holding, - renderButton, -}: { +interface V3UnstakeProps { holding: Holding; - renderButton: (onClick: () => void) => React.ReactNode; -}) => { +} + +export const V3UnstakeModal = () => { const account = useAppSelector((state) => state.user.account); - const [isOpen, setIsOpen] = useState(false); const [txBusy, setTxBusy] = useState(false); - const onClose = async () => { - setIsOpen(false); + const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.V3UnstakeModal) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.UpgradeBnt) + ); + + const onClose = () => { + dispatch(popModal(ModalNames.UpgradeBnt)); }; - const dispatch = useDispatch(); + if (!props) return null; + + const { holding } = props; const programs = holding.programs.filter((p) => toBigNumber(p.tokenAmountWei).gt(0) @@ -83,7 +92,6 @@ export const V3UnstakeModal = ({ return ( <> - {renderButton(() => setIsOpen(true))} { @@ -24,6 +33,10 @@ export const Modals = () => { + + + + ); }; diff --git a/src/store/portfolio/v3Portfolio.ts b/src/store/portfolio/v3Portfolio.ts index 2ac44d47c..e51fef289 100644 --- a/src/store/portfolio/v3Portfolio.ts +++ b/src/store/portfolio/v3Portfolio.ts @@ -24,7 +24,6 @@ export const initialState: V3PortfolioState = { withdrawalRequestsRaw: [], withdrawalSettings: { lockDuration: 0, withdrawalFee: 0 }, isLoadingWithdrawalRequests: true, - bonusesModal: false, standardRewards: [], isLoadingStandardRewards: true, }; @@ -53,9 +52,6 @@ const v3PortfolioSlice = createSlice({ ) => { state.withdrawalSettings = action.payload; }, - openBonusesModal: (state, action: PayloadAction) => { - state.bonusesModal = action.payload; - }, setStandardRewards: ( state, action: PayloadAction @@ -68,7 +64,6 @@ const v3PortfolioSlice = createSlice({ export const { setHoldingsRaw, - openBonusesModal, setWithdrawalRequestsRaw, setWithdrawalSettings, setStandardRewards, diff --git a/src/store/portfolio/v3Portfolio.types.ts b/src/store/portfolio/v3Portfolio.types.ts index 5788b932e..09ccb519a 100644 --- a/src/store/portfolio/v3Portfolio.types.ts +++ b/src/store/portfolio/v3Portfolio.types.ts @@ -9,7 +9,6 @@ export interface V3PortfolioState { withdrawalRequestsRaw: WithdrawalRequestRaw[]; withdrawalSettings: WithdrawalSettings; isLoadingWithdrawalRequests: boolean; - bonusesModal: boolean; standardRewards: RewardsProgramStake[]; isLoadingStandardRewards: boolean; } From 6de9f17f31a617b4ea0230c519496eef53b585b0 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 15 Sep 2022 21:51:13 -0400 Subject: [PATCH 16/29] fixed unstake modal and added more --- .../v3/holdings/V3HoldingsItemStaked.tsx | 2 +- .../v3/pendingWithdraw/V3Withdraw.tsx | 10 - .../v3/pendingWithdraw/useV3Withdraw.ts | 30 +-- src/modals/V3UnstakeModal.tsx | 6 +- src/modals/V3WithdrawCancelModal.tsx | 175 ++++++++++-------- src/modals/index.tsx | 7 +- 6 files changed, 122 insertions(+), 108 deletions(-) diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx index a8dde612b..4f333a133 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemStaked.tsx @@ -57,7 +57,7 @@ export const V3HoldingsItemStaked = ({ holding }: { holding: Holding }) => { onClick={() => dispatch( pushModal({ - modal: ModalNames.V3UnstakeModal, + modal: ModalNames.V3Unstake, data: { holding }, }) ) diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx index 1120e9115..c4d9a6619 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx @@ -1,16 +1,12 @@ import { useV3Withdraw } from 'elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw'; import { WithdrawItem } from 'elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawItem'; -import { V3WithdrawCancelModal } from 'modals/V3WithdrawCancelModal'; import { V3WithdrawConfirmModal } from 'modals/V3WithdrawConfirmModal'; export const V3Withdraw = () => { const { withdrawalRequests, - cancelWithdrawal, openCancelModal, isLoadingWithdrawalRequests, - isModalCancelOpen, - setIsModalCancelOpen, isModalConfirmOpen, setIsModalConfirmOpen, selected, @@ -42,12 +38,6 @@ export const V3Withdraw = () => { )} {selected && ( <> - { const withdrawalRequests = useAppSelector(getPortfolioWithdrawalRequests); @@ -30,14 +32,8 @@ export const useV3Withdraw = () => { const account = useAppSelector((state) => state.user.account); const [selected, setSelected] = useState(null); - const [isModalCancelOpen, setIsModalCancelOpen] = useState(false); - const [isModalConfirmOpen, setIsModalConfirmOpen] = useState(false); - const openCancelModal = useCallback(async (req: WithdrawalRequest) => { - sendWithdrawEvent(WithdrawEvent.WithdrawCancelClick); - setSelected(req); - setIsModalCancelOpen(true); - }, []); + const [isModalConfirmOpen, setIsModalConfirmOpen] = useState(false); const cancelWithdrawal = useCallback(async () => { if (!selected || !account) { @@ -56,7 +52,7 @@ export const useV3Withdraw = () => { selected.reserveTokenAmount, selected.pool.reserveToken.symbol ); - setIsModalCancelOpen(false); + dispatch(popModal(ModalNames.V3WithdrawCancel)); await tx.wait(); sendWithdrawEvent( WithdrawEvent.WithdrawCancelSuccess, @@ -72,7 +68,7 @@ export const useV3Withdraw = () => { undefined, e.message ); - setIsModalCancelOpen(false); + dispatch(popModal(ModalNames.V3WithdrawCancel)); console.error('cancelWithdrawal failed: ', e); if (e.code === ErrorCode.DeniedTx) { rejectNotification(dispatch); @@ -82,6 +78,20 @@ export const useV3Withdraw = () => { } }, [account, dispatch, selected]); + const openCancelModal = useCallback( + async (req: WithdrawalRequest) => { + sendWithdrawEvent(WithdrawEvent.WithdrawCancelClick); + setSelected(req); + dispatch( + pushModal({ + modal: ModalNames.V3WithdrawCancel, + data: { cancelWithdrawal, withdrawRequest: selected }, + }) + ); + }, + [cancelWithdrawal, dispatch, selected] + ); + const openConfirmModal = useCallback(async (req: WithdrawalRequest) => { sendWithdrawACEvent(WithdrawACEvent.CTAClick); setSelected(req); @@ -93,8 +103,6 @@ export const useV3Withdraw = () => { cancelWithdrawal, openCancelModal, isLoadingWithdrawalRequests, - isModalCancelOpen, - setIsModalCancelOpen, selected, isModalConfirmOpen, setIsModalConfirmOpen, diff --git a/src/modals/V3UnstakeModal.tsx b/src/modals/V3UnstakeModal.tsx index 8e7cc4849..6619dfb6b 100644 --- a/src/modals/V3UnstakeModal.tsx +++ b/src/modals/V3UnstakeModal.tsx @@ -26,15 +26,15 @@ export const V3UnstakeModal = () => { const [txBusy, setTxBusy] = useState(false); const dispatch = useDispatch(); const isOpen = useAppSelector((state) => - getModalOpen(state, ModalNames.V3UnstakeModal) + getModalOpen(state, ModalNames.V3Unstake) ); const props = useAppSelector((state) => - getModalData(state, ModalNames.UpgradeBnt) + getModalData(state, ModalNames.V3Unstake) ); const onClose = () => { - dispatch(popModal(ModalNames.UpgradeBnt)); + dispatch(popModal(ModalNames.V3Unstake)); }; if (!props) return null; diff --git a/src/modals/V3WithdrawCancelModal.tsx b/src/modals/V3WithdrawCancelModal.tsx index 8911f36a0..bb880322e 100644 --- a/src/modals/V3WithdrawCancelModal.tsx +++ b/src/modals/V3WithdrawCancelModal.tsx @@ -1,6 +1,6 @@ import { WithdrawalRequest } from 'store/portfolio/v3Portfolio.types'; import { memo, useCallback, useMemo, useState } from 'react'; -import { Modal } from 'modals'; +import { Modal, ModalNames } from 'modals'; import { Button, ButtonSize } from 'components/button/Button'; import { TokenBalanceLarge } from 'components/tokenBalance/TokenBalanceLarge'; import { toBigNumber } from 'utils/helperFunctions'; @@ -15,91 +15,102 @@ import { getBlockchainNetwork, getCurrency, } from 'services/api/googleTagManager'; +import { useDispatch } from 'react-redux'; +import { useAppSelector } from 'store'; +import { getModalOpen, getModalData, popModal } from 'store/modals/modals'; -export const V3WithdrawCancelModal = memo( - ({ - isModalOpen, - setIsModalOpen, - withdrawRequest, - cancelWithdrawal, - }: { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; - withdrawRequest: WithdrawalRequest; - cancelWithdrawal: () => Promise; - }) => { - const [txBusy, setTxBusy] = useState(false); - const { pool } = withdrawRequest; - const token = pool.reserveToken; +interface V3WithdrawCancelProps { + withdrawRequest: WithdrawalRequest; + cancelWithdrawal: () => Promise; +} - const handleCTAClick = useCallback(async () => { - setCurrentWithdraw({ - withdraw_pool: pool.name, - withdraw_blockchain: getBlockchain(), - withdraw_blockchain_network: getBlockchainNetwork(), - withdraw_token: pool.name, - withdraw_token_amount: withdrawRequest.reserveTokenAmount, - withdraw_token_amount_usd: new BigNumber( - withdrawRequest.reserveTokenAmount - ) - .times(withdrawRequest.pool.reserveToken.usdPrice) - .toString(), - withdraw_display_currency: getCurrency(), - }); - sendWithdrawEvent(WithdrawEvent.WithdrawCancelApproveClick); - setTxBusy(true); - await cancelWithdrawal(); - setIsModalOpen(false); - setTxBusy(false); - }, [ - cancelWithdrawal, - setIsModalOpen, - pool.name, - withdrawRequest.pool.reserveToken.usdPrice, - withdrawRequest.reserveTokenAmount, - ]); +export const V3WithdrawCancelModal = memo(() => { + const dispatch = useDispatch(); + const isOpen = useAppSelector((state) => + getModalOpen(state, ModalNames.V3WithdrawCancel) + ); - const compoundingApr = useMemo( - () => - toBigNumber(pool.apr7d.autoCompounding) - .plus(pool.apr7d.tradingFees) - .toFixed(2), - [pool.apr7d.autoCompounding, pool.apr7d.tradingFees] - ); + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3WithdrawCancel) + ); - return ( - -
- + const onClose = useCallback(() => { + dispatch(popModal(ModalNames.V3WithdrawCancel)); + }, [dispatch]); -
-
- Compounding rewards{' '} - {token.symbol} -
-
{compoundingApr} %
-
+ const [txBusy, setTxBusy] = useState(false); + const cancelWithdrawal = props?.cancelWithdrawal; + const withdrawRequest = props?.withdrawRequest; + const pool = withdrawRequest?.pool; + const token = pool?.reserveToken; + + const handleCTAClick = useCallback(async () => { + if (!pool || !withdrawRequest || !cancelWithdrawal) return () => {}; + + setCurrentWithdraw({ + withdraw_pool: pool.name, + withdraw_blockchain: getBlockchain(), + withdraw_blockchain_network: getBlockchainNetwork(), + withdraw_token: pool.name, + withdraw_token_amount: withdrawRequest.reserveTokenAmount, + withdraw_token_amount_usd: new BigNumber( + withdrawRequest.reserveTokenAmount + ) + .times(withdrawRequest.pool.reserveToken.usdPrice) + .toString(), + withdraw_display_currency: getCurrency(), + }); + sendWithdrawEvent(WithdrawEvent.WithdrawCancelApproveClick); + setTxBusy(true); + await cancelWithdrawal(); + onClose(); + setTxBusy(false); + }, [onClose, pool, cancelWithdrawal, withdrawRequest]); + + const compoundingApr = useMemo( + () => + pool + ? toBigNumber(pool.apr7d.autoCompounding) + .plus(pool.apr7d.tradingFees) + .toFixed(2) + : '', + [pool] + ); - + if (!token || !withdrawRequest) return null; + + return ( + +
+ + +
+
+ Compounding rewards{' '} + {token.symbol} +
+
{compoundingApr} %
- - ); - } -); + + +
+ + ); +}); diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 80454fc36..4f1953391 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -12,6 +12,8 @@ import { UpgradeBntModal } from './UpgradeBntModal'; import { UpgradeTknModal } from './UpgradeTknModal'; import { V3BonusesModal } from './V3BonusesModal'; import { V3ExternalHoldingsModal } from './V3ExternalHoldingsModal'; +import { V3UnstakeModal } from './V3UnstakeModal'; +import { V3WithdrawCancelModal } from './V3WithdrawCancelModal'; export enum ModalNames { DepositDisabled, @@ -22,7 +24,8 @@ export enum ModalNames { UpgradeTkn, V3Bonuses, V3ExternalHoldings, - V3UnstakeModal, + V3Unstake, + V3WithdrawCancel, } export const Modals = () => { @@ -37,6 +40,8 @@ export const Modals = () => { + + ); }; From cdf0b4a3ad8da8cc45fda16e86611fbaf7c830f4 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 22 Sep 2022 10:24:32 -0400 Subject: [PATCH 17/29] renames --- src/components/selectPool/SelectPool.tsx | 2 +- src/elements/earn/pools/TopPools.tsx | 4 +++- .../earn/pools/poolsTable/PoolsTable.tsx | 2 +- .../pools/poolsTable/PoolsTableCellActions.tsx | 2 +- .../ProtectedPositionTableCellActions.tsx | 4 ++-- .../rewards/StakeRewardsBtn.tsx | 2 +- .../earn/portfolio/v3/V3AvailableToStake.tsx | 4 +++- .../earn/portfolio/v3/bonuses/V3ClaimBonuses.tsx | 2 +- .../earn/portfolio/v3/bonuses/useV3Bonuses.ts | 14 +++++++------- .../v3/earningsTable/V3EarningTable.tsx | 2 +- .../menu/V3EarningTableMenuMain.tsx | 2 +- .../externalHoldings/V3ExternalHoldingsItem.tsx | 2 +- .../v3/holdings/V3HoldingsItemStaked.tsx | 2 +- .../v3/pendingWithdraw/useV3Withdraw.ts | 2 +- src/elements/swapLimit/SwapLimit.tsx | 4 ++-- src/modals/DepositDisabledModal.tsx | 4 ++-- src/modals/DepositETHModal.tsx | 4 ++-- src/modals/DurationModal.tsx | 4 ++-- src/modals/SelectPoolModal.tsx | 4 ++-- src/modals/UpgradeBntModal.tsx | 4 ++-- src/modals/UpgradeTknModal.tsx | 4 ++-- src/modals/V3BonusesModal.tsx | 4 ++-- src/modals/V3ExternalHoldingsModal.tsx | 4 ++-- src/modals/V3UnstakeModal.tsx | 4 ++-- src/modals/V3WithdrawCancelModal.tsx | 4 ++-- src/store/modals/modals.ts | 16 +++++++++------- 26 files changed, 56 insertions(+), 50 deletions(-) diff --git a/src/components/selectPool/SelectPool.tsx b/src/components/selectPool/SelectPool.tsx index ceee42500..0ccd65d94 100644 --- a/src/components/selectPool/SelectPool.tsx +++ b/src/components/selectPool/SelectPool.tsx @@ -27,7 +27,7 @@ export const SelectPool = ({ onClick={() => dispatch( pushModal({ - modal: ModalNames.SelectPool, + modalName: ModalNames.SelectPool, data: { pools, onSelect }, }) ) diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index 2f82ec33c..b6c5b13b7 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -22,7 +22,9 @@ export const TopPools = () => {
), @@ -110,14 +105,6 @@ export const V3EarningTable = () => { defaultSort={defaultSort} />

- - {holdingToWithdraw && ( - - )} ); }; diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.stories.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.stories.tsx index a71aa79ec..8b3dad9d4 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.stories.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.stories.tsx @@ -20,10 +20,6 @@ export const Menu: ComponentStory = ( ); }; -Menu.args = { - setIsWithdrawModalOpen: () => {}, -}; - Menu.parameters = { design: { type: 'figma', diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx index 6130e0204..345d7e911 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx @@ -20,21 +20,13 @@ import { ErrorCode } from 'services/web3/types'; export type EarningTableMenuState = 'main' | 'bonus' | 'rate'; interface Props { - setIsWithdrawModalOpen: (isOpen: boolean) => void; holding: Holding; - setHoldingToWithdraw: (holding: Holding) => void; handleDepositClick: () => void; placement?: Placement; } export const V3EarningTableMenu = memo( - ({ - holding, - setHoldingToWithdraw, - setIsWithdrawModalOpen, - handleDepositClick, - placement = 'left-start', - }: Props) => { + ({ holding, handleDepositClick, placement = 'left-start' }: Props) => { const popperElRef = useRef(null); const [targetElement, setTargetElement] = useState(null); const [popperElement, setPopperElement] = useState(null); @@ -141,8 +133,6 @@ export const V3EarningTableMenu = memo(
void; - setHoldingToWithdraw: (holding: Holding) => void; handleDepositClick: () => void; holding: Holding; onStartJoin: Function; @@ -15,14 +13,7 @@ interface Props { } export const V3EarningsTableMenuContent = memo( - ({ - holding, - setIsWithdrawModalOpen, - setHoldingToWithdraw, - handleDepositClick, - onStartJoin, - txJoinBusy, - }: Props) => { + ({ holding, handleDepositClick, onStartJoin, txJoinBusy }: Props) => { const [currentMenu, setCurrentMenu] = useState('main'); @@ -31,9 +22,7 @@ export const V3EarningsTableMenuContent = memo( {currentMenu === 'main' && ( )} diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx index dc9874180..433e0d0ca 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx @@ -11,28 +11,19 @@ import { useModal } from 'hooks/useModal'; interface Props { setCurrentMenu: (menu: EarningTableMenuState) => void; - setIsWithdrawModalOpen: (isOpen: boolean) => void; - setHoldingToWithdraw: (holding: Holding) => void; handleDepositClick: () => void; holding: Holding; } export const V3EarningTableMenuMain = memo( - ({ - holding, - setHoldingToWithdraw, - setCurrentMenu, - setIsWithdrawModalOpen, - handleDepositClick, - }: Props) => { + ({ holding, setCurrentMenu, handleDepositClick }: Props) => { const { bonusUsdTotal } = useV3Bonuses(); const { latestProgram } = holding; const { pushModal } = useModal(); const handleWithdrawClick = useCallback(() => { - setHoldingToWithdraw(holding); - setIsWithdrawModalOpen(true); - }, [holding, setHoldingToWithdraw, setIsWithdrawModalOpen]); + pushModal({ modalName: ModalNames.V3Withdraw, data: holding }); + }, [holding, pushModal]); const handleBonusClick = useCallback(() => { pushModal({ modalName: ModalNames.V3Bonuses }); diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx index 5c7d32b5a..0c395c73e 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx @@ -23,12 +23,13 @@ import { getV3byID } from 'store/bancor/pool'; import { WalletConnectRequest } from 'elements/walletConnect/WalletConnectRequest'; import { V3ManageProgramsModal } from './V3ManageProgramsModal'; import { DepositV3Modal } from 'modals/DepositV3Modal'; -import V3WithdrawModal from 'modals/V3WithdrawModal'; +import { useModal } from 'hooks/useModal'; +import { ModalNames } from 'modals'; export const V3HoldingPage = () => { const { id } = useParams(); const { goToPage } = useNavigation(); - const [isOpen, setIsOpen] = useState(false); + const { pushModal } = useModal(); const account = useAppSelector((state) => state.user.account); const holdings = useAppSelector(getPortfolioHoldings); @@ -267,15 +268,15 @@ export const V3HoldingPage = () => {
<> - @@ -126,11 +132,6 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => {
{ApproveModal} - ); }; diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx index 780994ab0..5aa3c7b1a 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx @@ -1,22 +1,17 @@ import { Holding } from 'store/portfolio/v3Portfolio.types'; -import { useState } from 'react'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; -import V3WithdrawModal from 'modals/V3WithdrawModal'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; +import { useModal } from 'hooks/useModal'; +import { ModalNames } from 'modals'; export const V3HoldingsItemWithdraw = ({ holding }: { holding: Holding }) => { - const [isOpen, setIsOpen] = useState(false); const { pool } = holding; + const { pushModal } = useModal(); const isDisabled = toBigNumber(holding.tokenBalance).isZero(); return ( <> -
Withdrawal
@@ -27,7 +22,12 @@ export const V3HoldingsItemWithdraw = ({ holding }: { holding: Holding }) => { variant={ButtonVariant.Secondary} size={ButtonSize.ExtraSmall} disabled={isDisabled} - onClick={() => setIsOpen(true)} + onClick={() => + pushModal({ + modalName: ModalNames.V3Withdraw, + data: holding, + }) + } > Withdraw diff --git a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx b/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx index 77299f317..eeed4e095 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.stories.tsx @@ -1,6 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; -import { useState } from 'react'; import V3WithdrawModal from 'modals/V3WithdrawModal'; import { store } from 'store'; import { Provider } from 'react-redux'; @@ -12,11 +11,9 @@ export default { } as ComponentMeta; export const WithdrawModal: ComponentStory = (args) => { - const [isOpen, setIsOpen] = useState(true); - return ( - + ); }; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx index c4d9a6619..bbe2d5b18 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/V3Withdraw.tsx @@ -1,15 +1,11 @@ import { useV3Withdraw } from 'elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw'; import { WithdrawItem } from 'elements/earn/portfolio/v3/pendingWithdraw/V3WithdrawItem'; -import { V3WithdrawConfirmModal } from 'modals/V3WithdrawConfirmModal'; export const V3Withdraw = () => { const { withdrawalRequests, openCancelModal, isLoadingWithdrawalRequests, - isModalConfirmOpen, - setIsModalConfirmOpen, - selected, openConfirmModal, } = useV3Withdraw(); @@ -36,16 +32,6 @@ export const V3Withdraw = () => {
)} - {selected && ( - <> - - - )} ); }; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw.ts b/src/elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw.ts index 3de008a02..35bdedba3 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw.ts +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/useV3Withdraw.ts @@ -34,8 +34,6 @@ export const useV3Withdraw = () => { const [selected, setSelected] = useState(null); - const [isModalConfirmOpen, setIsModalConfirmOpen] = useState(false); - const cancelWithdrawal = useCallback(async () => { if (!selected || !account) { return; @@ -93,11 +91,17 @@ export const useV3Withdraw = () => { [cancelWithdrawal, dispatch, selected, pushModal] ); - const openConfirmModal = useCallback(async (req: WithdrawalRequest) => { - sendWithdrawACEvent(WithdrawACEvent.CTAClick); - setSelected(req); - setIsModalConfirmOpen(true); - }, []); + const openConfirmModal = useCallback( + async (req: WithdrawalRequest) => { + sendWithdrawACEvent(WithdrawACEvent.CTAClick); + setSelected(req); + pushModal({ + modalName: ModalNames.V3WithdrawConfirm, + data: { openCancelModal, withdrawRequest: selected }, + }); + }, + [openCancelModal, selected, pushModal] + ); return { withdrawalRequests, @@ -105,8 +109,6 @@ export const useV3Withdraw = () => { openCancelModal, isLoadingWithdrawalRequests, selected, - isModalConfirmOpen, - setIsModalConfirmOpen, openConfirmModal, }; }; diff --git a/src/elements/layoutHeader/LayoutHeader.tsx b/src/elements/layoutHeader/LayoutHeader.tsx index 62242b70f..35800e2ef 100644 --- a/src/elements/layoutHeader/LayoutHeader.tsx +++ b/src/elements/layoutHeader/LayoutHeader.tsx @@ -7,12 +7,12 @@ import { WalletConnectButton } from '../walletConnect/WalletConnectButton'; import { useEffect, useState } from 'react'; import { NetworkIndicator } from './NetworkIndicator'; import { isForkAvailable } from 'services/web3/config'; -import 'elements/layoutHeader/LayoutHeader.css'; import { useAppSelector } from 'store/index'; import { getIsAppBusy } from 'store/bancor/bancor'; import { BancorURL } from 'router/bancorURL.service'; import { Navigate } from 'components/navigate/Navigate'; import { PopoverV3 } from 'components/popover/PopoverV3'; +import 'elements/layoutHeader/LayoutHeader.css'; export const LayoutHeader = () => { const wallet = useWalletConnect(); diff --git a/src/modals/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx index 4ed3a0006..35a0f9a49 100644 --- a/src/modals/V3WithdrawConfirmModal.tsx +++ b/src/modals/V3WithdrawConfirmModal.tsx @@ -9,36 +9,43 @@ import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { shrinkToken } from 'utils/formulas'; import { bntToken } from 'services/web3/config'; import { Switch } from 'components/switch/Switch'; -import { ModalFullscreen } from 'modals'; +import { ModalFullscreen, ModalNames } from 'modals'; +import { useAppSelector } from 'store'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; +import { useModal } from 'hooks/useModal'; -export const V3WithdrawConfirmModal = memo( - ({ - isModalOpen, - setIsModalOpen, - withdrawRequest, - openCancelModal, - }: { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; - withdrawRequest: WithdrawalRequest; - openCancelModal: (req: WithdrawalRequest) => void; - }) => { - return ( - - - - ); - } -); +interface V3WithdrawConfirmProps { + withdrawRequest: WithdrawalRequest; + openCancelModal: (req: WithdrawalRequest) => void; +} + +export const V3WithdrawConfirmModal = memo(() => { + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.V3WithdrawConfirm) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3WithdrawConfirm) + ); + + if (!props) return null; + + return ( + + + + ); +}); export const V3WithdrawConfirmContent = ({ isModalOpen, diff --git a/src/modals/V3WithdrawModal.tsx b/src/modals/V3WithdrawModal.tsx index 3b7487ade..ec5415bde 100644 --- a/src/modals/V3WithdrawModal.tsx +++ b/src/modals/V3WithdrawModal.tsx @@ -6,7 +6,7 @@ import V3WithdrawStep2 from 'elements/earn/portfolio/v3/initWithdraw/step2/V3Wit import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { useV3WithdrawModal } from 'elements/earn/portfolio/v3/initWithdraw/useV3WithdrawModal'; import { Holding } from 'store/portfolio/v3Portfolio.types'; -import { ModalFullscreen } from 'modals'; +import { ModalFullscreen, ModalNames } from 'modals'; import { getBlockchain, getBlockchainNetwork, @@ -18,16 +18,24 @@ import { sendWithdrawEvent, WithdrawEvent, } from 'services/api/googleTagManager/withdraw'; +import { useModal } from 'hooks/useModal'; +import { useAppSelector } from 'store'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; -const V3WithdrawModal = ({ - isOpen, - setIsOpen, - holding, -}: { - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; +interface V3WithdrawProps { holding: Holding; -}) => { +} +const V3WithdrawModal = () => { + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.V3Withdraw) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3Withdraw) + ); + const holding = props?.holding; + const { step, onClose, @@ -43,10 +51,10 @@ const V3WithdrawModal = ({ lockDurationInDays, requestId, setRequestId, - } = useV3WithdrawModal({ setIsOpen }); + } = useV3WithdrawModal({ setIsOpen: popModal }); useEffect(() => { - if (isOpen) { + if (isOpen && holding) { setCurrentWithdraw({ withdraw_pool: holding.pool.name, withdraw_blockchain: getBlockchain(), @@ -58,7 +66,9 @@ const V3WithdrawModal = ({ sendWithdrawEvent(WithdrawEvent.WithdrawPoolClick); sendWithdrawEvent(WithdrawEvent.WithdrawAmountView); } - }, [isOpen, isFiat, holding.pool.name]); + }, [isOpen, isFiat, holding]); + + if (!holding) return null; return ( void; - isOpen: boolean; +interface VbntModalProps { token: Token; stake: boolean; stakeBalance?: string; onCompleted?: Function; -}) => { +} + +export const VbntModal = () => { + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.VBnt) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.VBnt) + ); + const account = useAppSelector((state) => state.user.account); const isFiat = useAppSelector((state) => state.user.usdToggle); const [amount, setAmount] = useState(''); @@ -52,11 +56,11 @@ export const VbntModal = ({ const stakeDisabled = !account || !amount || Number(amount) === 0; - const fieldBlance = stake - ? token.balance - ? token.balance + const fieldBlance = props?.stake + ? props?.token.balance + ? props?.token.balance : undefined - : stakeBalance; + : props?.stakeBalance; const govProperties: GovProperties = { stake_input_type: getFiat(isFiat), @@ -72,10 +76,11 @@ export const VbntModal = ({ percentages.findIndex((x) => percentage.toFixed(10) === x.toFixed(10)) ); } - }, [amount, token, percentages, fieldBlance]); + }, [amount, props?.token, percentages, fieldBlance]); const handleStakeUnstake = async () => { - if (stakeDisabled || !account) return; + if (stakeDisabled || !account || !props) return; + const { stake, token } = props; sendGovEvent(GovEvent.Click, govProperties, stake); sendGovEvent(GovEvent.WalletRequest, govProperties, stake); @@ -124,19 +129,23 @@ export const VbntModal = ({ }; const [checkApprove, ModalApprove] = useApproveModal( - [{ amount: amount, token: token }], + props ? [{ amount: amount, token: props.token }] : [], handleStakeUnstake, ApprovalContract.Governance, - () => sendGovEvent(GovEvent.UnlimitedPopup, govProperties, stake), + () => sendGovEvent(GovEvent.UnlimitedPopup, govProperties, props?.stake), (isUnlimited: boolean) => sendGovEvent( GovEvent.UnlimitedPopupSelect, govProperties, - stake, + props?.stake, isUnlimited ) ); + if (!props) return null; + + const { stake, token, onCompleted } = props; + const refreshBalances = async () => { await wait(8000); await updateUserBalances(); @@ -148,7 +157,7 @@ export const VbntModal = ({ } - setIsOpen={setIsOpen} + setIsOpen={popModal} isOpen={isOpen} separator large @@ -166,7 +175,7 @@ export const VbntModal = ({
- {govToken && ( - - )} ); From 2cf2c13db762831108ba12e87568f47a541de974 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 22 Sep 2022 12:43:28 -0400 Subject: [PATCH 20/29] moved new modal to the correct folder and cleanup old code --- .../poolsTable/v3/DepositDisabledModal.tsx | 47 ------- .../ProtectedPositionTableCellActions.tsx | 10 +- .../portfolio/v3/holdings/V3HoldingPage.tsx | 2 +- src/elements/modalApprove/modalApprove.tsx | 128 ------------------ .../V3ManageProgramsModal.tsx | 0 src/modals/WithdrawLiquidityModal.tsx | 19 +-- 6 files changed, 13 insertions(+), 193 deletions(-) delete mode 100644 src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx delete mode 100644 src/elements/modalApprove/modalApprove.tsx rename src/{elements/earn/portfolio/v3/holdings => modals}/V3ManageProgramsModal.tsx (100%) diff --git a/src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx b/src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx deleted file mode 100644 index 778a1dce2..000000000 --- a/src/elements/earn/pools/poolsTable/v3/DepositDisabledModal.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useState } from 'react'; -import { Navigate } from 'components/navigate/Navigate'; -import { Modal } from 'modals'; - -interface Props { - renderButton: (onClick: () => void) => React.ReactNode; - isV3: boolean; -} - -const V3Content = ( -
- Deposits are currently disabled in the bancor.network UI. To deposit via - Etherscan at your own risk,{' '} - - follow this guide - - . -
-); - -const V2Content = ( -
- Deposits are currently disabled on all v2 pools. -
-); - -export const DepositDisabledModal = ({ renderButton, isV3 }: Props) => { - const [isOpen, setIsOpen] = useState(false); - - const onClose = async () => { - setIsOpen(false); - }; - - return ( - <> - {renderButton(() => setIsOpen(true))} - -
- {isV3 ? V3Content : V2Content} -
- - - ); -}; diff --git a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx index 754c0bfaa..6865ce971 100644 --- a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx @@ -4,10 +4,9 @@ import { ProtectedPositionGrouped, } from 'services/web3/protection/positions'; import { CellProps } from 'react-table'; -import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; +import { PropsWithChildren, useCallback, useMemo } from 'react'; import { TableCellExpander } from 'components/table/TableCellExpander'; import { Button } from 'components/button/Button'; -import { WithdrawLiquidityModal } from '../../../../../modals/WithdrawLiquidityModal'; import { bntToken } from 'services/web3/config'; import { getAllBntPositionsAndAmount, @@ -32,7 +31,6 @@ export const ProtectedPositionTableCellActions = ( CellProps > ) => { - const [isOpenWithdraw, setIsOpenWithdraw] = useState(false); const dispatch = useDispatch(); const { pushModal } = useModal(); const { row } = cellData; @@ -164,12 +162,8 @@ export const ProtectedPositionTableCellActions = ( cellData, singleContent, groupContent, - subMenu: () => setIsOpenWithdraw(true), + subMenu: () => pushModal({ modalName: ModalNames.WithdrawLiquidity }), })} - ); }; diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx index 0c395c73e..40c5d759f 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx @@ -21,7 +21,7 @@ import BigNumber from 'bignumber.js'; import { getTokensByIdV2V3 } from 'store/bancor/bancor'; import { getV3byID } from 'store/bancor/pool'; import { WalletConnectRequest } from 'elements/walletConnect/WalletConnectRequest'; -import { V3ManageProgramsModal } from './V3ManageProgramsModal'; +import { V3ManageProgramsModal } from '../../../../../modals/V3ManageProgramsModal'; import { DepositV3Modal } from 'modals/DepositV3Modal'; import { useModal } from 'hooks/useModal'; import { ModalNames } from 'modals'; diff --git a/src/elements/modalApprove/modalApprove.tsx b/src/elements/modalApprove/modalApprove.tsx deleted file mode 100644 index cbda9ac6e..000000000 --- a/src/elements/modalApprove/modalApprove.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { ReactComponent as IconLock } from 'assets/icons/lock.svg'; -import { - addNotification, - NotificationType, -} from 'store/notification/notification'; -import { - ApprovalContract, - setNetworkContractApproval, -} from 'services/web3/approval'; -import { useDispatch } from 'react-redux'; -import { TokenMinimal } from 'services/observables/tokens'; -import { web3 } from 'services/web3'; -import { wait } from 'utils/pureFunctions'; -import { ErrorCode } from 'services/web3/types'; -import { Button, ButtonSize } from 'components/button/Button'; -import { sendConversionEvent } from 'services/api/googleTagManager/conversion'; -import { Events } from 'services/api/googleTagManager'; -import { Modal } from 'modals'; - -interface ModalApproveProps { - setIsOpen: (isOpen: boolean) => void; - isOpen: boolean; - amount: string; - fromToken?: TokenMinimal; - handleApproved: Function; - waitForApproval?: boolean; - contract: ApprovalContract; -} - -export const ModalApprove = ({ - setIsOpen, - isOpen, - amount, - fromToken, - handleApproved, - waitForApproval, - contract, -}: ModalApproveProps) => { - const dispatch = useDispatch(); - - if (!fromToken) return null; - - // Wait for user to choose approval and proceed with approval based on user selection - // Prop amount is UNDEFINED when UNLIMITED - const approve = async (amount?: string) => { - try { - setIsOpen(false); - const isUnlimited = amount === undefined; - sendConversionEvent(Events.approved, undefined, isUnlimited); - const txHash = await setNetworkContractApproval( - fromToken, - contract, - amount - ); - dispatch( - addNotification({ - type: NotificationType.pending, - title: 'Pending Confirmation', - msg: `Approve ${fromToken.symbol} is pending confirmation`, - updatedInfo: { - successTitle: 'Transaction Confirmed', - successMsg: `${amount || 'Unlimited'} approval set for ${ - fromToken.symbol - }`, - errorTitle: 'Transaction Failed', - errorMsg: `${fromToken.symbol} approval had failed. Please try again or contact support.`, - }, - txHash, - }) - ); - if (waitForApproval) { - let tx = null; - while (tx === null) - try { - await wait(2000); - tx = await web3.provider.getTransactionReceipt(txHash); - } catch (error) {} - } - handleApproved(); - } catch (e: any) { - setIsOpen(false); - if (e.code === ErrorCode.DeniedTx) - dispatch( - addNotification({ - type: NotificationType.error, - title: 'Transaction Rejected', - msg: 'You rejected the transaction. If this was by mistake, please try again.', - }) - ); - else - addNotification({ - type: NotificationType.error, - title: 'Transaction Failed', - msg: `${fromToken.symbol} approval had failed. Please try again or contact support.`, - }); - } - }; - - return ( - -
-
-
- -
-

Approve {fromToken.symbol}

-

- Before you can proceed, you need to approve {fromToken.symbol}{' '} - spending. -

- -

- Want to approve before each transaction? -

- -
-
- - ); -}; diff --git a/src/elements/earn/portfolio/v3/holdings/V3ManageProgramsModal.tsx b/src/modals/V3ManageProgramsModal.tsx similarity index 100% rename from src/elements/earn/portfolio/v3/holdings/V3ManageProgramsModal.tsx rename to src/modals/V3ManageProgramsModal.tsx diff --git a/src/modals/WithdrawLiquidityModal.tsx b/src/modals/WithdrawLiquidityModal.tsx index 4c823f139..6dfa60303 100644 --- a/src/modals/WithdrawLiquidityModal.tsx +++ b/src/modals/WithdrawLiquidityModal.tsx @@ -1,16 +1,17 @@ import { EmergencyInfo } from 'components/EmergencyInfo'; import { PopoverV3 } from 'components/popover/PopoverV3'; -import { Modal } from 'modals'; +import { useModal } from 'hooks/useModal'; +import { Modal, ModalNames } from 'modals'; import { useMemo } from 'react'; import { useAppSelector } from 'store'; +import { getIsModalOpen } from 'store/modals/modals'; + +export const WithdrawLiquidityModal = () => { + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.WithdrawLiquidity) + ); -export const WithdrawLiquidityModal = ({ - isModalOpen, - setIsModalOpen, -}: { - isModalOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; -}) => { const { lockDuration } = useAppSelector( (state) => state.v3Portfolio.withdrawalSettings ); @@ -21,7 +22,7 @@ export const WithdrawLiquidityModal = ({ ); return ( - setIsModalOpen(false)} isOpen={isModalOpen} large> +
Migrate to Bancor V3 to withdraw.
From 0f55d0a8a0cf67fd81b2ad184fbda47d777acbea Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 22 Sep 2022 13:27:14 -0400 Subject: [PATCH 21/29] added deposit and manage programs to modals index, moved depositFAQ --- .../earn/portfolio/v3}/DepositFAQ.tsx | 0 .../portfolio/v3/holdings/V3HoldingPage.tsx | 50 ++- src/modals/DepositV3Modal.tsx | 55 +-- src/modals/V3ManageProgramsModal.tsx | 345 +++++++++--------- src/modals/index.tsx | 8 + src/store/modals/modals.ts | 2 +- 6 files changed, 243 insertions(+), 217 deletions(-) rename src/{modals => elements/earn/portfolio/v3}/DepositFAQ.tsx (100%) diff --git a/src/modals/DepositFAQ.tsx b/src/elements/earn/portfolio/v3/DepositFAQ.tsx similarity index 100% rename from src/modals/DepositFAQ.tsx rename to src/elements/earn/portfolio/v3/DepositFAQ.tsx diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx index 40c5d759f..7d37ca9a6 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx @@ -21,8 +21,6 @@ import BigNumber from 'bignumber.js'; import { getTokensByIdV2V3 } from 'store/bancor/bancor'; import { getV3byID } from 'store/bancor/pool'; import { WalletConnectRequest } from 'elements/walletConnect/WalletConnectRequest'; -import { V3ManageProgramsModal } from '../../../../../modals/V3ManageProgramsModal'; -import { DepositV3Modal } from 'modals/DepositV3Modal'; import { useModal } from 'hooks/useModal'; import { ModalNames } from 'modals'; @@ -211,18 +209,18 @@ export const V3HoldingPage = () => { {prettifyNumber(token.balance ?? 0)}
- ( - - )} - /> + ) : ( @@ -244,18 +242,18 @@ export const V3HoldingPage = () => { {prettifyNumber(totalPTAllPrograms)} - ( - - )} - /> +
diff --git a/src/modals/DepositV3Modal.tsx b/src/modals/DepositV3Modal.tsx index a0b9e492f..c71631eba 100644 --- a/src/modals/DepositV3Modal.tsx +++ b/src/modals/DepositV3Modal.tsx @@ -1,6 +1,6 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { PoolV3 } from 'services/observables/pools'; -import { ReactNode, useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { useDispatch } from 'react-redux'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; @@ -34,24 +34,36 @@ import { } from 'services/api/googleTagManager'; import { TradeWidgetInput } from 'elements/trade/TradeWidgetInput'; import { useTknFiatInput } from 'elements/trade/useTknFiatInput'; -import { DepositFAQ } from './DepositFAQ'; +import { DepositFAQ } from '../elements/earn/portfolio/v3/DepositFAQ'; import { Switch, SwitchVariant } from 'components/switch/Switch'; import dayjs from 'dayjs'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; -import { Modal } from 'modals'; +import { Modal, ModalNames } from 'modals'; import { DepositDisabledModal } from './DepositDisabledModal'; +import { useModal } from 'hooks/useModal'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; -interface Props { +interface DepositV3Props { pool: PoolV3; - renderButton: (onClick: (pool_click_location?: string) => void) => ReactNode; } -export const DepositV3Modal = ({ pool, renderButton }: Props) => { - const isBNT = bntToken === pool.poolDltId; +export const DepositV3Modal = () => { + const dispatch = useDispatch(); + const { goToPage } = useNavigation(); + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.DepositV3) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.DepositV3) + ); + const pool = props?.pool; + + const isBNT = bntToken === props?.pool.poolDltId; const account = useAppSelector((state) => state.user.account); - const [isOpen, setIsOpen] = useState(false); const [txBusy, setTxBusy] = useState(false); const [tosAgreed, setTosAgreed] = useState(false); const [amount, setAmount] = useState(''); @@ -61,7 +73,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { const { handleWalletButtonClick } = useWalletConnect(); const tokenInputField = useTknFiatInput({ - token: pool.reserveToken, + token: pool?.reserveToken, setInputTkn: setAmount, setInputFiat: setInputFiat, inputTkn: amount, @@ -69,7 +81,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { }); const onClose = async () => { - setIsOpen(false); + popModal(); await wait(500); setAmount(''); setInputFiat(''); @@ -78,17 +90,14 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { const inputErrorMsg = useMemo( () => - !!account && new BigNumber(pool.reserveToken.balance || 0).lt(amount) + !!account && new BigNumber(pool?.reserveToken.balance || 0).lt(amount) ? 'Insufficient balance' : '', - [account, amount, pool.reserveToken.balance] + [account, amount, pool?.reserveToken.balance] ); - const dispatch = useDispatch(); - const { goToPage } = useNavigation(); - const deposit = async (approvalHash?: string) => { - if (!pool.reserveToken.balance || !account) { + if (!pool?.reserveToken.balance || !account) { return; } @@ -155,9 +164,9 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { }; const [onStart, ApproveModal] = useApproveModal( - [{ amount: amount || '0', token: pool.reserveToken }], + pool ? [{ amount: amount || '0', token: pool.reserveToken }] : [], (approvalHash?: string) => deposit(approvalHash), - accessFullEarnings && pool.latestProgram?.isActive + accessFullEarnings && pool?.latestProgram?.isActive ? ContractsApi.StandardRewards.contractAddress : ContractsApi.BancorNetwork.contractAddress, () => sendDepositEvent(DepositEvent.DepositUnlimitedPopupRequest), @@ -176,7 +185,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { ); const handleClick = useCallback(() => { - if (canDeposit) { + if (canDeposit && pool) { const portion = pool.reserveToken.balance && new BigNumber(amount) @@ -217,9 +226,9 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { amount, inputFiat, isFiat, - pool.name, - pool.reserveToken.balance, + pool, ]); + if (!pool) return null; const vaultBalance = toBigNumber(pool.poolDeficit); @@ -227,7 +236,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { return ( <> - {renderButton((pool_click_location) => { + {/* {renderButton((pool_click_location) => { setCurrentDeposit({ deposit_pool: pool.name, deposit_blockchain: getBlockchain(), @@ -249,7 +258,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { ); sendDepositEvent(DepositEvent.DepositAmountView); setIsOpen(true); - })} + })} */} void) => React.ReactNode; } -export const V3ManageProgramsModal = ({ holding, renderButton }: Props) => { +export const V3ManageProgramsModal = () => { + const dispatch = useDispatch(); const account = useAppSelector((state) => state.user.account); - const [isOpen, setIsOpen] = useState(false); const [txBusy, setTxBusy] = useState(false); const [joinRewards, setJoinRewards] = useState(false); const [amount, setAmount] = useState(''); const [inputFiat, setInputFiat] = useState(''); const [txJoinBusy, setTxJoinBusy] = useState(false); + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.V3ManagePrograms) + ); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3ManagePrograms) + ); + + const holding = props?.holding; + const tokenInputField = useTknFiatInput({ - token: { + token: holding && { ...holding.pool.reserveToken, symbol: `bn${holding.pool.name}`, balance: holding.poolTokenBalance, @@ -53,47 +65,46 @@ export const V3ManageProgramsModal = ({ holding, renderButton }: Props) => { inputTkn: amount, inputFiat: inputFiat, }); + const inputErrorMsg = useMemo( () => - !!account && new BigNumber(holding.poolTokenBalance || 0).lt(amount) + !!account && new BigNumber(holding?.poolTokenBalance || 0).lt(amount) ? 'Insufficient balance' : '', - [account, amount, holding.poolTokenBalance] + [account, amount, holding?.poolTokenBalance] ); const onClose = async () => { - setIsOpen(false); + popModal(); setJoinRewards(false); setAmount(''); setInputFiat(''); }; - const dispatch = useDispatch(); - - const programs = holding.programs.filter((p) => - toBigNumber(p.tokenAmountWei).gt(0) - ); + const programs = holding + ? holding.programs.filter((p) => toBigNumber(p.tokenAmountWei).gt(0)) + : []; const programsMerged = programs.map((p) => ({ ...p, - ...holding.pool.programs.find((pp) => pp.id === p.id), + ...holding?.pool.programs.find((pp) => pp.id === p.id), })); const programsSorted = programsMerged.sort((a, _) => (a.isActive ? 0 : -1)); const handleJoinClick = async () => { - if (!holding.pool.latestProgram?.isActive || !account) { + if (!holding?.pool.latestProgram?.isActive || !account) { console.error('rewardProgram is not defined or inactive'); return; } - if (amount === '') { + if (amount === '' || !holding) { return; } try { const tx = await ContractsApi.StandardRewards.write.join( - holding.pool.latestProgram.id, + holding.pool.latestProgram?.id, expandToken(amount, holding.pool.decimals) ); confirmJoinNotification( @@ -118,16 +129,18 @@ export const V3ManageProgramsModal = ({ holding, renderButton }: Props) => { }; const [onStart, ApproveModal] = useApproveModal( - [ - { - amount: expandToken(amount, holding.pool.decimals), - token: { - ...holding.pool.reserveToken, - address: holding.pool.poolTokenDltId, - symbol: `bn${holding.pool.reserveToken.symbol}`, - }, - }, - ], + holding + ? [ + { + amount: expandToken(amount, holding.pool.decimals), + token: { + ...holding.pool.reserveToken, + address: holding.pool.poolTokenDltId, + symbol: `bn${holding.pool.reserveToken.symbol}`, + }, + }, + ] + : [], handleJoinClick, ContractsApi.StandardRewards.contractAddress ); @@ -137,6 +150,8 @@ export const V3ManageProgramsModal = ({ holding, renderButton }: Props) => { onStart(); }, [onStart]); + if (!holding) return null; + const handleLeaveClick = async ( id: string, poolTokenAmountWei: string, @@ -175,161 +190,157 @@ export const V3ManageProgramsModal = ({ holding, renderButton }: Props) => { }; return ( - <> - {renderButton(() => setIsOpen(true))} - setJoinRewards(false)} - separator - large - > - {joinRewards ? ( -
-
Join BNT rewards
- -
-
BNT Rewards
-
- {holding.pool.apr7d.total.toFixed(2)}% -
- {dayjs( - (holding.pool.latestProgram?.endTime ?? 0) * 1000 - ).format('MMM D, YYYY')} -
+ setJoinRewards(false)} + separator + large + > + {joinRewards ? ( +
+
Join BNT rewards
+ +
+
BNT Rewards
+
+ {holding.pool.apr7d.total.toFixed(2)}% +
+ {dayjs( + (holding.pool.latestProgram?.endTime ?? 0) * 1000 + ).format('MMM D, YYYY')}
- - {ApproveModal}
- ) : ( -
-
- Earn BNT rewards on your bn{holding.pool.reserveToken.symbol}, - there are no cooldowns or withdrawal fees for adding or removing - bnETH to reward programs -
+ + {ApproveModal} +
+ ) : ( +
+
+ Earn BNT rewards on your bn{holding.pool.reserveToken.symbol}, there + are no cooldowns or withdrawal fees for adding or removing bnETH to + reward programs +
-
- Available bn{holding.pool.reserveToken.symbol} -
+
+ Available bn{holding.pool.reserveToken.symbol} +
+
+
+ {prettifyNumber( + new BigNumber(holding.tokenBalance).times( + holding.pool.reserveToken.usdPrice + ), + true + )} +
-
- {prettifyNumber( - new BigNumber(holding.tokenBalance).times( - holding.pool.reserveToken.usdPrice - ), - true - )} -
-
- {prettifyNumber(holding.poolTokenBalance)} bn - {holding.pool.reserveToken.symbol} -
+ {prettifyNumber(holding.poolTokenBalance)} bn + {holding.pool.reserveToken.symbol}
- {holding.pool.latestProgram?.isActive && ( - - )}
+ {holding.pool.latestProgram?.isActive && ( + + )}
- {programsSorted.length > 0 && ( -
- )} - {programsSorted.length > 0 && ( - <> -
- bn{holding.pool.reserveToken.symbol} in BNT Rewards -
+
+ {programsSorted.length > 0 && ( +
+ )} + {programsSorted.length > 0 && ( + <> +
+ bn{holding.pool.reserveToken.symbol} in BNT Rewards +
-
- {programsSorted.map((program) => ( -
-
-
-
- {prettifyNumber( - new BigNumber( - shrinkToken( - program.tokenAmountWei, - holding.pool.decimals - ) - ).times(holding.pool.reserveToken.usdPrice), - true - )} -
-
- {prettifyNumber( +
+ {programsSorted.map((program) => ( +
+
+
+
+ {prettifyNumber( + new BigNumber( shrinkToken( - program.poolTokenAmountWei, + program.tokenAmountWei, holding.pool.decimals ) - )}{' '} - bn{holding.pool.reserveToken.symbol} -
+ ).times(holding.pool.reserveToken.usdPrice), + true + )}
- {program.isActive ? ( -
-
- {holding.pool.apr7d.standardRewards.toFixed(2)}% - APR -
-
- - {dayjs((program.startTime ?? 0) * 1000).format( - 'MMM D, YYYY' - )}{' '} - -{' '} - {dayjs((program.endTime ?? 0) * 1000).format( - 'MMM D, YYYY' - )} -
-
- ) : ( -
Inactive
- )} - + )}{' '} + bn{holding.pool.reserveToken.symbol} +
+ {program.isActive ? ( +
+
+ {holding.pool.apr7d.standardRewards.toFixed(2)}% APR +
+
+ + {dayjs((program.startTime ?? 0) * 1000).format( + 'MMM D, YYYY' + )}{' '} + -{' '} + {dayjs((program.endTime ?? 0) * 1000).format( + 'MMM D, YYYY' + )} +
+
+ ) : ( +
Inactive
+ )} +
- ))} -
- - )} -
- )} - - +
+ ))} +
+ + )} +
+ )} + ); }; diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 6a70a983d..64bf71d6a 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -17,21 +17,27 @@ import { V3WithdrawCancelModal } from './V3WithdrawCancelModal'; import { V3WithdrawConfirmModal } from './V3WithdrawConfirmModal'; import V3WithdrawModal from './V3WithdrawModal'; import { VbntModal } from './VbntModal'; +import { V3ManageProgramsModal } from './V3ManageProgramsModal'; +import { DepositV3Modal } from './DepositV3Modal'; export enum ModalNames { + CreatePool, DepositDisabled, DepositETH, + DepositV3, Duration, SelectPool, UpgradeBnt, UpgradeTkn, V3Bonuses, V3ExternalHoldings, + V3ManagePrograms, V3Unstake, V3WithdrawCancel, V3WithdrawConfirm, V3Withdraw, VBnt, + WithdrawLiquidity, } export const Modals = () => { @@ -40,12 +46,14 @@ export const Modals = () => { + + diff --git a/src/store/modals/modals.ts b/src/store/modals/modals.ts index 5e0de88f2..a1bef35b2 100644 --- a/src/store/modals/modals.ts +++ b/src/store/modals/modals.ts @@ -18,7 +18,7 @@ const modalsSlice = createSlice({ reducers: { pushModal: (state, action) => { state.openModals.push({ - modalName: action.payload.modal, + modalName: action.payload.modalName, data: action.payload.data, }); }, From dd5ae02ebb4d3a26620821cdafb50ec42dddf2e7 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Fri, 23 Sep 2022 15:57:33 -0400 Subject: [PATCH 22/29] changed searchable token list --- .../SearchableTokenList.tsx | 216 -------------- src/components/selectToken/SelectToken.tsx | 38 +-- .../tokenInputField/TokenInputField.tsx | 37 +-- src/elements/trade/TradeWidgetInput.tsx | 36 +-- src/modals/SearchableTokenListModal.tsx | 263 ++++++++++++++++-- src/modals/index.tsx | 3 + 6 files changed, 310 insertions(+), 283 deletions(-) delete mode 100644 src/components/searchableTokenList/SearchableTokenList.tsx diff --git a/src/components/searchableTokenList/SearchableTokenList.tsx b/src/components/searchableTokenList/SearchableTokenList.tsx deleted file mode 100644 index b0ff639a6..000000000 --- a/src/components/searchableTokenList/SearchableTokenList.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import { useMemo, useState } from 'react'; -import { useAppSelector } from 'store'; -import { TokenMinimal } from 'services/observables/tokens'; -import { prettifyNumber } from 'utils/helperFunctions'; -import { wait } from 'utils/pureFunctions'; -import { ReactComponent as IconEdit } from 'assets/icons/edit.svg'; -import { getTokenListLS, setTokenListLS } from 'utils/localStorage'; -import { SuggestedTokens } from './SuggestedTokens'; -import { Switch } from 'components/switch/Switch'; -import { TokenList } from 'services/observables/tokens'; -import { userPreferredListIds$ } from 'services/observables/tokenLists'; -import { orderBy } from 'lodash'; -import { SearchInput } from 'components/searchInput/SearchInput'; -import { Image } from 'components/image/Image'; -import { SearchableTokenListModal } from 'modals/SearchableTokenListModal'; - -interface SearchableTokenListProps { - onClick: Function; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - excludedTokens?: string[]; - includedTokens?: string[]; - tokens: TokenMinimal[]; - limit?: boolean; -} - -const suggestedTokens = ['BNT', 'ETH', 'WBTC', 'USDC', 'USDT']; - -export const SearchableTokenList = ({ - onClick, - isOpen, - setIsOpen, - excludedTokens = [], - includedTokens = [], - tokens, - limit, -}: SearchableTokenListProps) => { - const [search, setSearch] = useState(''); - const [manage, setManage] = useState(false); - const [userPreferredListIds, setUserLists] = useState(getTokenListLS()); - - const tokensLists = useAppSelector( - (state) => state.bancor.tokenLists - ); - - const onClose = async () => { - setIsOpen(false); - await wait(500); - setManage(false); - setSearch(''); - }; - - const handleTokenlistClick = (listId: string) => { - const alreadyPreferred = userPreferredListIds.includes(listId); - - const newUserPreferredListIds = alreadyPreferred - ? userPreferredListIds.filter((list) => list !== listId) - : [...userPreferredListIds, listId]; - - if (newUserPreferredListIds.length === 0) return; - - setTokenListLS(newUserPreferredListIds); - setUserLists(newUserPreferredListIds); - userPreferredListIds$.next(newUserPreferredListIds); - }; - - const tokenName = (name: string) => { - if (name.length < 19) return name; - return name + '...'; - }; - - const sortedTokens = useMemo(() => { - const filtered = tokens.filter( - (token) => - (includedTokens.length === 0 || - includedTokens.includes(token.address)) && - !excludedTokens.includes(token.address) && - (token.symbol.toLowerCase().includes(search.toLowerCase()) || - (token.name && - token.name.toLowerCase().includes(search.toLowerCase()))) - ); - return orderBy(filtered, ({ balanceUsd }) => balanceUsd ?? 0, 'desc').slice( - 0, - limit ? 300 : filtered.length - ); - }, [excludedTokens, includedTokens, limit, search, tokens]); - - return ( - - {manage ? ( -
-
- {tokensLists.map((tokenList) => { - const isSelected = userPreferredListIds.some( - (listId) => tokenList.name === listId - ); - return ( -
-
- TokenList -
-
{tokenList.name}
-
- {tokenList.tokens.length} Tokens -
-
-
-
- handleTokenlistClick(tokenList.name)} - /> -
-
- ); - })} -
-
- ) : ( - <> -
- -
-
-
- { - onClick(token); - onClose(); - }} - /> -
-
-
Token
-
Balance
-
- {sortedTokens.map((token) => { - return ( - - ); - })} -
-
-
- -
- - )} - - ); -}; diff --git a/src/components/selectToken/SelectToken.tsx b/src/components/selectToken/SelectToken.tsx index 7281874e0..920f8e512 100644 --- a/src/components/selectToken/SelectToken.tsx +++ b/src/components/selectToken/SelectToken.tsx @@ -1,10 +1,11 @@ import { useState } from 'react'; import { classNameGenerator } from 'utils/pureFunctions'; -import { SearchableTokenList } from 'components/searchableTokenList/SearchableTokenList'; import { Token } from 'services/observables/tokens'; import { ReactComponent as IconChevronDown } from 'assets/icons/chevronDown.svg'; import { Image } from 'components/image/Image'; import { Button } from 'components/button/Button'; +import { useModal } from 'hooks/useModal'; +import { ModalNames } from 'modals'; interface SelectTokenProps { label?: string; @@ -27,8 +28,24 @@ export const SelectToken = ({ excludedTokens = [], includedTokens = [], }: SelectTokenProps) => { - const [isOpen, setIsOpen] = useState(false); const [showSelectToken, setSelectToken] = useState(!!startEmpty); + const { pushModal } = useModal(); + + const pushSearchableTokenList = () => { + pushModal({ + modalName: ModalNames.SearchableTokenList, + data: { + limit: true, + excludedTokens, + includedTokens, + tokens: tokens ? tokens : [], + onselect: (token: Token) => { + if (setToken) setToken(token); + setSelectToken(false); + }, + }, + }); + }; return ( <> @@ -39,7 +56,7 @@ export const SelectToken = ({ className={`flex items-center ${classNameGenerator({ 'cursor-pointer': selectable, })}`} - onClick={() => (selectable ? setIsOpen(true) : {})} + onClick={() => (selectable ? pushSearchableTokenList() : {})} > {token ? ( <> @@ -65,7 +82,7 @@ export const SelectToken = ({
) : ( )}
- - { - if (setToken) setToken(token); - setSelectToken(false); - }} - isOpen={isOpen} - limit - setIsOpen={setIsOpen} - tokens={tokens ? tokens : []} - excludedTokens={excludedTokens} - includedTokens={includedTokens} - /> ); }; diff --git a/src/components/tokenInputField/TokenInputField.tsx b/src/components/tokenInputField/TokenInputField.tsx index 0f768960c..8ad926bf3 100644 --- a/src/components/tokenInputField/TokenInputField.tsx +++ b/src/components/tokenInputField/TokenInputField.tsx @@ -1,6 +1,4 @@ -import { useState } from 'react'; import { classNameGenerator, sanitizeNumberInput } from 'utils/pureFunctions'; -import { SearchableTokenList } from 'components/searchableTokenList/SearchableTokenList'; import { Token, TokenMinimal } from 'services/observables/tokens'; import { ReactComponent as IconChevronDown } from 'assets/icons/chevronDown.svg'; import 'components/tokenInputField/TokenInputField.css'; @@ -10,6 +8,8 @@ import BigNumber from 'bignumber.js'; import { useAppSelector } from 'store'; import { Image } from 'components/image/Image'; import { getV2AndV3Tokens } from 'store/bancor/bancor'; +import { useModal } from 'hooks/useModal'; +import { ModalNames } from 'modals'; interface TokenInputFieldProps { label?: string; @@ -60,7 +60,7 @@ export const TokenInputField = ({ v3AndV2, balanceLabel = 'Balance', }: TokenInputFieldProps) => { - const [isOpen, setIsOpen] = useState(false); + const { pushModal } = useModal(); const balance = fieldBalance ? fieldBalance : token ? token.balance : null; const balanceUsd = @@ -139,6 +139,21 @@ export const TokenInputField = ({ '!border-error': errorMsg, })}`; + const pushSearchableTokenList = () => { + pushModal({ + modalName: ModalNames.SearchableTokenList, + data: { + excludedTokens, + includedTokens, + tokens: tokens ? tokens : [], + onselect: (token: Token) => { + if (setToken) setToken(token); + onInputChange(inputValue(), token); + }, + }, + }); + }; + return (
@@ -166,7 +181,7 @@ export const TokenInputField = ({
{startEmpty && !token ? (
)} - - { - if (setToken) setToken(token); - onInputChange(inputValue(), token); - }} - isOpen={isOpen} - setIsOpen={setIsOpen} - tokens={tokens} - excludedTokens={excludedTokens} - includedTokens={includedTokens} - />
); }; diff --git a/src/elements/trade/TradeWidgetInput.tsx b/src/elements/trade/TradeWidgetInput.tsx index 03a56047b..9fa4d689a 100644 --- a/src/elements/trade/TradeWidgetInput.tsx +++ b/src/elements/trade/TradeWidgetInput.tsx @@ -3,10 +3,11 @@ import { useTokenInputV3Return } from 'elements/trade/useTknFiatInput'; import { Image } from 'components/image/Image'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { useMemo, useRef, useState } from 'react'; -import { TokenMinimal } from 'services/observables/tokens'; -import { SearchableTokenList } from 'components/searchableTokenList/SearchableTokenList'; +import { Token, TokenMinimal } from 'services/observables/tokens'; import { ReactComponent as IconChevron } from 'assets/icons/chevronDown.svg'; import { classNameGenerator } from 'utils/pureFunctions'; +import { ModalNames } from 'modals'; +import { useModal } from 'hooks/useModal'; interface Props { input?: useTokenInputV3Return; @@ -35,9 +36,9 @@ export const TradeWidgetInput = ({ includedTokens, disableSelection, }: Props) => { + const { pushModal } = useModal(); const isFiat = useAppSelector((state) => state.user.usdToggle); const inputRef = useRef(null); - const [isOpen, setIsOpen] = useState(false); const [isFocused, setIsFocused] = useState(false); const value = useMemo(() => { @@ -55,6 +56,20 @@ export const TradeWidgetInput = ({ setIsFocused(state); }; + const pushSearchableTokenList = () => { + pushModal({ + modalName: ModalNames.SearchableTokenList, + data: { + excludedTokens, + includedTokens, + tokens: tokens ? tokens : [], + onselect: (token: Token) => { + if (onTokenSelect) onTokenSelect(token); + }, + }, + }); + }; + return ( <>
@@ -116,7 +131,7 @@ export const TradeWidgetInput = ({ onClick={(e) => { if (!disableSelection) { e.preventDefault(); - setIsOpen(true); + pushSearchableTokenList(); } }} > @@ -133,7 +148,7 @@ export const TradeWidgetInput = ({ {tokens && !!tokens.length && !input && (
)}
- {tokens && onTokenSelect && ( - - )} ); }; diff --git a/src/modals/SearchableTokenListModal.tsx b/src/modals/SearchableTokenListModal.tsx index a15db03c3..1e079281c 100644 --- a/src/modals/SearchableTokenListModal.tsx +++ b/src/modals/SearchableTokenListModal.tsx @@ -1,19 +1,37 @@ -import { Modal, ModalFullscreen } from 'modals'; +import { Switch } from 'components/switch/Switch'; +import { SuggestedTokens } from 'components/searchableTokenList/SuggestedTokens'; +import { SearchInput } from 'components/searchInput/SearchInput'; +import { orderBy } from 'lodash'; +import { Modal, ModalFullscreen, ModalNames } from 'modals'; +import { useState, useMemo } from 'react'; import { isMobile } from 'react-device-detect'; +import { userPreferredListIds$ } from 'services/observables/tokenLists'; +import { Token, TokenList, TokenMinimal } from 'services/observables/tokens'; +import { useAppSelector } from 'store'; +import { prettifyNumber } from 'utils/helperFunctions'; +import { getTokenListLS, setTokenListLS } from 'utils/localStorage'; +import { Image } from 'components/image/Image'; +import { wait } from 'utils/pureFunctions'; +import { useModal } from 'hooks/useModal'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; +import { ReactComponent as IconEdit } from 'assets/icons/edit.svg'; + +export const SearchableTokenListModal = () => { + const [manage, setManage] = useState(false); + const [search, setSearch] = useState(''); + + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.SearchableTokenList) + ); + + const onClose = async () => { + popModal(); + await wait(500); + setManage(false); + setSearch(''); + }; -export const SearchableTokenListModal = ({ - manage, - setManage, - onClose, - isOpen, - children, -}: { - manage: boolean; - setManage: Function; - isOpen: boolean; - onClose: () => void; - children: JSX.Element; -}) => { if (isMobile) { return ( - {children} + ); } @@ -34,11 +58,216 @@ export const SearchableTokenListModal = ({ setManage(false)} > - {children} + ); }; + +interface SearchableTokenListProps { + limit: boolean; + tokens: TokenMinimal[]; + excludedTokens: string[]; + includedTokens: string[]; + onSelected: (token: Token | TokenMinimal) => void; +} + +const SearchableTokenListContent = ({ + manage, + setManage, + search, + setSearch, + onClose, +}: { + manage: boolean; + setManage: (value: boolean) => void; + search: string; + setSearch: (value: string) => void; + onClose: Function; +}) => { + const [userPreferredListIds, setUserLists] = useState(getTokenListLS()); + const props = useAppSelector((state) => + getModalData(state, ModalNames.SearchableTokenList) + ); + + const tokensLists = useAppSelector( + (state) => state.bancor.tokenLists + ); + + const suggestedTokens = ['BNT', 'ETH', 'WBTC', 'USDC', 'USDT']; + + const handleTokenlistClick = (listId: string) => { + const alreadyPreferred = userPreferredListIds.includes(listId); + + const newUserPreferredListIds = alreadyPreferred + ? userPreferredListIds.filter((list) => list !== listId) + : [...userPreferredListIds, listId]; + + if (newUserPreferredListIds.length === 0) return; + + setTokenListLS(newUserPreferredListIds); + setUserLists(newUserPreferredListIds); + userPreferredListIds$.next(newUserPreferredListIds); + }; + + const tokenName = (name: string) => { + if (name.length < 19) return name; + return name + '...'; + }; + + const sortedTokens = useMemo(() => { + if (!props) return []; + const { tokens, includedTokens, excludedTokens, limit } = props; + + const filtered = tokens.filter( + (token) => + (includedTokens.length === 0 || + includedTokens.includes(token.address)) && + !excludedTokens.includes(token.address) && + (token.symbol.toLowerCase().includes(search.toLowerCase()) || + (token.name && + token.name.toLowerCase().includes(search.toLowerCase()))) + ); + return orderBy(filtered, ({ balanceUsd }) => balanceUsd ?? 0, 'desc').slice( + 0, + limit ? 300 : filtered.length + ); + }, [props, search]); + + if (!props) return null; + + const { tokens, onSelected } = props; + + return ( + <> + {manage ? ( +
+
+ {tokensLists.map((tokenList) => { + const isSelected = userPreferredListIds.some( + (listId) => tokenList.name === listId + ); + return ( +
+
+ TokenList +
+
{tokenList.name}
+
+ {tokenList.tokens.length} Tokens +
+
+
+
+ handleTokenlistClick(tokenList.name)} + /> +
+
+ ); + })} +
+
+ ) : ( + <> +
+ +
+
+
+ { + onSelected(token); + onClose(); + }} + /> +
+
+
Token
+
Balance
+
+ {sortedTokens.map((token) => { + return ( + + ); + })} +
+
+
+ +
+ + )} + + ); +}; diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 64bf71d6a..363f772f8 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -19,6 +19,7 @@ import V3WithdrawModal from './V3WithdrawModal'; import { VbntModal } from './VbntModal'; import { V3ManageProgramsModal } from './V3ManageProgramsModal'; import { DepositV3Modal } from './DepositV3Modal'; +import { SearchableTokenListModal } from './SearchableTokenListModal'; export enum ModalNames { CreatePool, @@ -26,6 +27,7 @@ export enum ModalNames { DepositETH, DepositV3, Duration, + SearchableTokenList, SelectPool, UpgradeBnt, UpgradeTkn, @@ -48,6 +50,7 @@ export const Modals = () => { + From a138570e87ac470cecd38d88f89764b22c0c9f9e Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Fri, 23 Sep 2022 16:11:38 -0400 Subject: [PATCH 23/29] fixed types in searchablemodal --- src/components/selectToken/SelectToken.tsx | 2 +- src/components/tokenInputField/TokenInputField.tsx | 2 +- src/elements/trade/TradeWidgetInput.tsx | 2 +- src/modals/SearchableTokenListModal.tsx | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/selectToken/SelectToken.tsx b/src/components/selectToken/SelectToken.tsx index 920f8e512..7ef3d3531 100644 --- a/src/components/selectToken/SelectToken.tsx +++ b/src/components/selectToken/SelectToken.tsx @@ -39,7 +39,7 @@ export const SelectToken = ({ excludedTokens, includedTokens, tokens: tokens ? tokens : [], - onselect: (token: Token) => { + onSelected: (token: Token) => { if (setToken) setToken(token); setSelectToken(false); }, diff --git a/src/components/tokenInputField/TokenInputField.tsx b/src/components/tokenInputField/TokenInputField.tsx index 8ad926bf3..0d5a533c3 100644 --- a/src/components/tokenInputField/TokenInputField.tsx +++ b/src/components/tokenInputField/TokenInputField.tsx @@ -146,7 +146,7 @@ export const TokenInputField = ({ excludedTokens, includedTokens, tokens: tokens ? tokens : [], - onselect: (token: Token) => { + onSelected: (token: Token) => { if (setToken) setToken(token); onInputChange(inputValue(), token); }, diff --git a/src/elements/trade/TradeWidgetInput.tsx b/src/elements/trade/TradeWidgetInput.tsx index 9fa4d689a..3cba4ec14 100644 --- a/src/elements/trade/TradeWidgetInput.tsx +++ b/src/elements/trade/TradeWidgetInput.tsx @@ -63,7 +63,7 @@ export const TradeWidgetInput = ({ excludedTokens, includedTokens, tokens: tokens ? tokens : [], - onselect: (token: Token) => { + onSelected: (token: Token) => { if (onTokenSelect) onTokenSelect(token); }, }, diff --git a/src/modals/SearchableTokenListModal.tsx b/src/modals/SearchableTokenListModal.tsx index 1e079281c..9a481f261 100644 --- a/src/modals/SearchableTokenListModal.tsx +++ b/src/modals/SearchableTokenListModal.tsx @@ -76,8 +76,8 @@ export const SearchableTokenListModal = () => { interface SearchableTokenListProps { limit: boolean; tokens: TokenMinimal[]; - excludedTokens: string[]; - includedTokens: string[]; + excludedTokens?: string[]; + includedTokens?: string[]; onSelected: (token: Token | TokenMinimal) => void; } @@ -130,9 +130,9 @@ const SearchableTokenListContent = ({ const filtered = tokens.filter( (token) => - (includedTokens.length === 0 || - includedTokens.includes(token.address)) && - !excludedTokens.includes(token.address) && + (includedTokens?.length === 0 || + includedTokens?.includes(token.address)) && + !excludedTokens?.includes(token.address) && (token.symbol.toLowerCase().includes(search.toLowerCase()) || (token.name && token.name.toLowerCase().includes(search.toLowerCase()))) From e692c7f0e25a30e724c211906f6e09e220c341fa Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Fri, 23 Sep 2022 16:21:54 -0400 Subject: [PATCH 24/29] added a limit to trade tokens --- src/components/tokenInputField/TokenInputField.tsx | 2 +- src/elements/trade/TradeWidgetInput.tsx | 3 ++- src/modals/SearchableTokenListModal.tsx | 7 ++++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/tokenInputField/TokenInputField.tsx b/src/components/tokenInputField/TokenInputField.tsx index 0d5a533c3..105fb18bd 100644 --- a/src/components/tokenInputField/TokenInputField.tsx +++ b/src/components/tokenInputField/TokenInputField.tsx @@ -145,7 +145,7 @@ export const TokenInputField = ({ data: { excludedTokens, includedTokens, - tokens: tokens ? tokens : [], + tokens, onSelected: (token: Token) => { if (setToken) setToken(token); onInputChange(inputValue(), token); diff --git a/src/elements/trade/TradeWidgetInput.tsx b/src/elements/trade/TradeWidgetInput.tsx index 3cba4ec14..786c6360e 100644 --- a/src/elements/trade/TradeWidgetInput.tsx +++ b/src/elements/trade/TradeWidgetInput.tsx @@ -62,7 +62,8 @@ export const TradeWidgetInput = ({ data: { excludedTokens, includedTokens, - tokens: tokens ? tokens : [], + tokens, + limit: true, onSelected: (token: Token) => { if (onTokenSelect) onTokenSelect(token); }, diff --git a/src/modals/SearchableTokenListModal.tsx b/src/modals/SearchableTokenListModal.tsx index 9a481f261..9d973af00 100644 --- a/src/modals/SearchableTokenListModal.tsx +++ b/src/modals/SearchableTokenListModal.tsx @@ -127,12 +127,13 @@ const SearchableTokenListContent = ({ const sortedTokens = useMemo(() => { if (!props) return []; const { tokens, includedTokens, excludedTokens, limit } = props; + const includedTkns = includedTokens ? includedTokens : []; + const excludedTkns = excludedTokens ? excludedTokens : []; const filtered = tokens.filter( (token) => - (includedTokens?.length === 0 || - includedTokens?.includes(token.address)) && - !excludedTokens?.includes(token.address) && + (includedTkns.length === 0 || includedTkns.includes(token.address)) && + !excludedTkns.includes(token.address) && (token.symbol.toLowerCase().includes(search.toLowerCase()) || (token.name && token.name.toLowerCase().includes(search.toLowerCase()))) From d275fe2e3f36647921e131d3aa12a1784c25b4c2 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Fri, 23 Sep 2022 17:19:30 -0400 Subject: [PATCH 25/29] Fixed deposit and deposit disable modals --- src/elements/earn/pools/TopPools.tsx | 5 ++++- src/elements/earn/pools/poolsTable/PoolsTable.tsx | 9 +++++++-- .../earn/portfolio/v3/V3AvailableToStake.tsx | 4 +++- .../portfolio/v3/earningsTable/V3EarningTable.tsx | 5 ++++- src/elements/swapLimit/SwapLimit.tsx | 3 --- src/modals/DepositDisabledModal.tsx | 14 +++++++++++--- src/modals/DepositV3Modal.tsx | 2 +- src/modals/DurationModal.tsx | 2 +- 8 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/elements/earn/pools/TopPools.tsx b/src/elements/earn/pools/TopPools.tsx index b6da1a007..072a5bef7 100644 --- a/src/elements/earn/pools/TopPools.tsx +++ b/src/elements/earn/pools/TopPools.tsx @@ -21,7 +21,10 @@ export const TopPools = () => {
diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 950fc967a..310c3a01c 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -3,7 +3,6 @@ import dayjs from 'utils/dayjs'; import BigNumber from 'bignumber.js'; import { InputField } from 'components/inputField/InputField'; import { TokenInputField } from 'components/tokenInputField/TokenInputField'; -import { DurationModal } from 'modals/DurationModal'; import { TokenMinimal, updateUserBalances } from 'services/observables/tokens'; import { ReactComponent as IconSync } from 'assets/icons/sync.svg'; import { classNameGenerator } from 'utils/pureFunctions'; @@ -539,8 +538,6 @@ export const SwapLimit = ({ {formatDuration(duration)} - -
)} diff --git a/src/modals/DepositDisabledModal.tsx b/src/modals/DepositDisabledModal.tsx index a67256b58..0169c3097 100644 --- a/src/modals/DepositDisabledModal.tsx +++ b/src/modals/DepositDisabledModal.tsx @@ -1,12 +1,20 @@ import { useModal } from 'hooks/useModal'; import { Modal, ModalNames } from 'modals'; import { useAppSelector } from 'store'; -import { getIsModalOpen } from 'store/modals/modals'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; +import { DepositV3Props } from './DepositV3Modal'; export const DepositDisabledModal = () => { const { popModal } = useModal(); - const isOpen = useAppSelector((state) => - getIsModalOpen(state, ModalNames.DepositDisabled) + const props = useAppSelector((state) => + getModalData(state, ModalNames.DepositV3) + ); + + const isOpen = useAppSelector( + (state) => + (getIsModalOpen(state, ModalNames.DepositV3) && + !props?.pool.depositingEnabled) || + getIsModalOpen(state, ModalNames.DepositDisabled) ); const onClose = () => { diff --git a/src/modals/DepositV3Modal.tsx b/src/modals/DepositV3Modal.tsx index c71631eba..be5aa218c 100644 --- a/src/modals/DepositV3Modal.tsx +++ b/src/modals/DepositV3Modal.tsx @@ -45,7 +45,7 @@ import { DepositDisabledModal } from './DepositDisabledModal'; import { useModal } from 'hooks/useModal'; import { getIsModalOpen, getModalData } from 'store/modals/modals'; -interface DepositV3Props { +export interface DepositV3Props { pool: PoolV3; } diff --git a/src/modals/DurationModal.tsx b/src/modals/DurationModal.tsx index 84e511236..3e7fef4e6 100644 --- a/src/modals/DurationModal.tsx +++ b/src/modals/DurationModal.tsx @@ -22,7 +22,7 @@ interface DurationProp { export const DurationModal = () => { const { popModal } = useModal(); const isOpen = useAppSelector((state) => - getIsModalOpen(state, ModalNames.DepositETH) + getIsModalOpen(state, ModalNames.Duration) ); const props = useAppSelector((state) => From 22d89fcb15f19ecf351e0e321a91ea4524026f07 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Sun, 2 Oct 2022 14:39:57 +0300 Subject: [PATCH 26/29] removed useapproval and moved the logic from the hook --- src/hooks/useApproveModal.tsx | 170 -------------------------------- src/modals/ApproveModal.tsx | 178 ++++++++++++++++++++++++++++++---- src/modals/index.tsx | 3 + 3 files changed, 164 insertions(+), 187 deletions(-) delete mode 100644 src/hooks/useApproveModal.tsx diff --git a/src/hooks/useApproveModal.tsx b/src/hooks/useApproveModal.tsx deleted file mode 100644 index 22413b33f..000000000 --- a/src/hooks/useApproveModal.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import { TokenMinimal } from 'services/observables/tokens'; -import { useCallback, useRef, useState } from 'react'; -import { - ApprovalContract, - getNetworkContractApproval, - setNetworkContractApproval, -} from 'services/web3/approval'; -import { ApproveModal } from 'modals/ApproveModal'; -import { - addNotification, - NotificationType, -} from 'store/notification/notification'; -import { useDispatch } from 'react-redux'; -import { ErrorCode } from 'services/web3/types'; -import { wait } from 'utils/pureFunctions'; -import { web3 } from 'services/web3'; -import { Events } from 'services/api/googleTagManager'; - -interface Tokens { - token: TokenMinimal; - amount: string; -} - -export const useApproveModal = ( - tokens: Tokens[] = [], - onComplete: (txHash?: string) => void, - contract: ApprovalContract | string = ApprovalContract.BancorNetwork, - gtmPopupEvent?: (event: Events) => void, - gtmSelectEvent?: (isUnlimited: boolean) => void, - onClose?: Function -) => { - const [isOpen, setIsOpen] = useState(false); - const [tokenIndex, setTokenIndex] = useState(0); - const [isLoading, setIsLoading] = useState(false); - const ref = useRef([]); - - const awaitConfirmation = useCallback(async () => { - const receipts = []; - for (const txHash of ref.current) { - try { - const receipt = await web3.provider.getTransactionReceipt(txHash); - receipts.push(receipt); - } catch (e: any) { - console.error('failed to getTransactionReceipt for approve token tx'); - return; - } - } - - const successCount = receipts.filter((r) => r && r.status).length; - if (successCount === ref.current.length) { - onComplete(ref.current.length > 0 ? ref.current[0] : undefined); - ref.current = []; - } else { - await wait(3000); - await awaitConfirmation(); - } - }, [onComplete]); - - const dispatch = useDispatch(); - - const onStart = async () => { - if (tokens.length === 0) { - onComplete(); - return; - } - await checkApprovalRequired(); - }; - - if (tokens.length === 0) return [onStart, <>] as [Function, JSX.Element]; - - const checkNextToken = async (index = tokenIndex): Promise => { - const nextIndex = index + 1; - const count = tokens.length; - if (count === nextIndex) { - return awaitConfirmation(); - } - await wait(500); - setTokenIndex(nextIndex); - return checkApprovalRequired(nextIndex); - }; - - const checkApprovalRequired = async (tokenIndex: number = 0) => { - const { token, amount } = tokens[tokenIndex]; - const isApprovalRequired = await getNetworkContractApproval( - token, - contract, - amount - ); - - if (!isApprovalRequired) { - return checkNextToken(tokenIndex); - } - - gtmPopupEvent && gtmPopupEvent(Events.approvePop); - - setIsOpen(true); - }; - - const setApproval = async (amount?: string) => { - if (gtmSelectEvent) { - const isUnlimited = amount === undefined; - gtmSelectEvent(isUnlimited); - } - const { token } = tokens[tokenIndex]; - try { - setIsLoading(true); - const txHash = await setNetworkContractApproval( - token, - contract, - amount, - true - ); - - ref.current = [...ref.current, txHash]; - dispatch( - addNotification({ - type: NotificationType.pending, - title: 'Pending Confirmation', - msg: `Approve ${tokens[tokenIndex].token.symbol} is pending confirmation`, - updatedInfo: { - successTitle: 'Transaction Confirmed', - successMsg: `${amount || 'Unlimited'} approval set for ${ - tokens[tokenIndex].token.symbol - }`, - errorTitle: 'Transaction Failed', - errorMsg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, - }, - txHash, - }) - ); - setIsOpen(false); - setIsLoading(false); - - await checkNextToken(); - } catch (e: any) { - if (e.code === ErrorCode.DeniedTx) { - dispatch( - addNotification({ - type: NotificationType.error, - title: 'Transaction Rejected', - msg: 'You rejected the transaction. If this was by mistake, please try again.', - }) - ); - } else { - dispatch( - addNotification({ - type: NotificationType.error, - title: 'Transaction Failed', - msg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, - }) - ); - } - - setIsOpen(false); - setIsLoading(false); - } - }; - - const ModalApprove = ApproveModal({ - isOpen, - setIsOpen, - amount: tokens[tokenIndex].amount, - setApproval, - token: tokens[tokenIndex].token, - isLoading, - onClose, - }); - - return [onStart, ModalApprove] as [Function, JSX.Element]; -}; diff --git a/src/modals/ApproveModal.tsx b/src/modals/ApproveModal.tsx index 711bc3065..f7f776b81 100644 --- a/src/modals/ApproveModal.tsx +++ b/src/modals/ApproveModal.tsx @@ -1,25 +1,169 @@ import { TokenMinimal } from 'services/observables/tokens'; import { Button, ButtonSize } from 'components/button/Button'; import { Image } from 'components/image/Image'; -import { Modal } from 'modals'; - -export const ApproveModal = ({ - isOpen, - setIsOpen, - setApproval, - token, - amount, - isLoading, - onClose, -}: { - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - setApproval: Function; +import { Modal, ModalNames } from 'modals'; +import { useState, useRef, useCallback } from 'react'; +import { useDispatch } from 'react-redux'; +import { web3 } from 'services/web3'; +import { + getNetworkContractApproval, + setNetworkContractApproval, +} from 'services/web3/approval'; +import { ErrorCode } from 'services/web3/types'; +import { + addNotification, + NotificationType, +} from 'store/notification/notification'; +import { Events } from 'storybook-addon-designs/esm/addon'; +import { wait } from 'utils/pureFunctions'; +import { useModal } from 'hooks/useModal'; +import { useAppSelector } from 'store'; +import { getIsModalOpen, getModalData } from 'store/modals/modals'; + +interface TokenAmount { token: TokenMinimal; amount: string; - isLoading: boolean; - onClose?: Function; -}) => { +} +interface ApproveModalProps { + token_amounts: TokenAmount[]; +} + +export const ApproveModal = () => { + const dispatch = useDispatch(); + const [tokenIndex, setTokenIndex] = useState(0); + const [isLoading, setIsLoading] = useState(false); + const { popModal } = useModal(); + const isOpen = useAppSelector((state) => + getIsModalOpen(state, ModalNames.ApproveModal) + ); + const ref = useRef([]); + + const awaitConfirmation = useCallback(async () => { + const receipts = []; + for (const txHash of ref.current) { + try { + const receipt = await web3.provider.getTransactionReceipt(txHash); + receipts.push(receipt); + } catch (e: any) { + console.error('failed to getTransactionReceipt for approve token tx'); + return; + } + } + + const successCount = receipts.filter((r) => r && r.status).length; + if (successCount === ref.current.length) { + onComplete(ref.current.length > 0 ? ref.current[0] : undefined); + ref.current = []; + } else { + await wait(3000); + await awaitConfirmation(); + } + }, [onComplete]); + + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3WithdrawConfirm) + ); + + const { token_amounts } = props; + + const onStart = async () => { + if (tokens.length === 0) { + onComplete(); + return; + } + await checkApprovalRequired(); + }; + + if (tokens.length === 0) return [onStart, <>] as [Function, JSX.Element]; + + const checkNextToken = async (index = tokenIndex): Promise => { + const nextIndex = index + 1; + const count = tokens.length; + if (count === nextIndex) { + return awaitConfirmation(); + } + await wait(500); + setTokenIndex(nextIndex); + return checkApprovalRequired(nextIndex); + }; + + const checkApprovalRequired = async (tokenIndex: number = 0) => { + const { token, amount } = tokens[tokenIndex]; + const isApprovalRequired = await getNetworkContractApproval( + token, + contract, + amount + ); + + if (!isApprovalRequired) { + return checkNextToken(tokenIndex); + } + + gtmPopupEvent && gtmPopupEvent(Events.approvePop); + + setIsOpen(true); + }; + + const setApproval = async (amount?: string) => { + if (gtmSelectEvent) { + const isUnlimited = amount === undefined; + gtmSelectEvent(isUnlimited); + } + const { token } = tokens[tokenIndex]; + try { + setIsLoading(true); + const txHash = await setNetworkContractApproval( + token, + contract, + amount, + true + ); + + ref.current = [...ref.current, txHash]; + dispatch( + addNotification({ + type: NotificationType.pending, + title: 'Pending Confirmation', + msg: `Approve ${tokens[tokenIndex].token.symbol} is pending confirmation`, + updatedInfo: { + successTitle: 'Transaction Confirmed', + successMsg: `${amount || 'Unlimited'} approval set for ${ + tokens[tokenIndex].token.symbol + }`, + errorTitle: 'Transaction Failed', + errorMsg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, + }, + txHash, + }) + ); + setIsOpen(false); + setIsLoading(false); + + await checkNextToken(); + } catch (e: any) { + if (e.code === ErrorCode.DeniedTx) { + dispatch( + addNotification({ + type: NotificationType.error, + title: 'Transaction Rejected', + msg: 'You rejected the transaction. If this was by mistake, please try again.', + }) + ); + } else { + dispatch( + addNotification({ + type: NotificationType.error, + title: 'Transaction Failed', + msg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, + }) + ); + } + + setIsOpen(false); + setIsLoading(false); + } + }; + return ( { diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 363f772f8..84208abd6 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -20,8 +20,10 @@ import { VbntModal } from './VbntModal'; import { V3ManageProgramsModal } from './V3ManageProgramsModal'; import { DepositV3Modal } from './DepositV3Modal'; import { SearchableTokenListModal } from './SearchableTokenListModal'; +import { WithdrawLiquidityModal } from './WithdrawLiquidityModal'; export enum ModalNames { + ApproveModal, CreatePool, DepositDisabled, DepositETH, @@ -62,6 +64,7 @@ export const Modals = () => { + ); }; From d76624048a80394a8abdeeb154dc910573b41b74 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Sun, 2 Oct 2022 16:01:40 +0300 Subject: [PATCH 27/29] adjusted approve code --- src/modals/ApproveModal.tsx | 66 ++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/src/modals/ApproveModal.tsx b/src/modals/ApproveModal.tsx index f7f776b81..57f6a57ac 100644 --- a/src/modals/ApproveModal.tsx +++ b/src/modals/ApproveModal.tsx @@ -6,6 +6,7 @@ import { useState, useRef, useCallback } from 'react'; import { useDispatch } from 'react-redux'; import { web3 } from 'services/web3'; import { + ApprovalContract, getNetworkContractApproval, setNetworkContractApproval, } from 'services/web3/approval'; @@ -14,29 +15,37 @@ import { addNotification, NotificationType, } from 'store/notification/notification'; -import { Events } from 'storybook-addon-designs/esm/addon'; import { wait } from 'utils/pureFunctions'; import { useModal } from 'hooks/useModal'; import { useAppSelector } from 'store'; import { getIsModalOpen, getModalData } from 'store/modals/modals'; +import { Events } from 'services/api/googleTagManager'; interface TokenAmount { token: TokenMinimal; amount: string; } + interface ApproveModalProps { token_amounts: TokenAmount[]; + contract: ApprovalContract | string; + onComplete: (txHash?: string) => void; + gtmPopupEvent?: (event: Events) => void; + gtmSelectEvent?: (isUnlimited: boolean) => void; } export const ApproveModal = () => { const dispatch = useDispatch(); + const ref = useRef([]); const [tokenIndex, setTokenIndex] = useState(0); const [isLoading, setIsLoading] = useState(false); const { popModal } = useModal(); const isOpen = useAppSelector((state) => getIsModalOpen(state, ModalNames.ApproveModal) ); - const ref = useRef([]); + const props = useAppSelector((state) => + getModalData(state, ModalNames.V3WithdrawConfirm) + ); const awaitConfirmation = useCallback(async () => { const receipts = []; @@ -52,33 +61,22 @@ export const ApproveModal = () => { const successCount = receipts.filter((r) => r && r.status).length; if (successCount === ref.current.length) { - onComplete(ref.current.length > 0 ? ref.current[0] : undefined); + props?.onComplete(ref.current.length > 0 ? ref.current[0] : undefined); ref.current = []; } else { await wait(3000); await awaitConfirmation(); } - }, [onComplete]); + }, [props?.onComplete]); - const props = useAppSelector((state) => - getModalData(state, ModalNames.V3WithdrawConfirm) - ); - - const { token_amounts } = props; + if (!props) return null; - const onStart = async () => { - if (tokens.length === 0) { - onComplete(); - return; - } - await checkApprovalRequired(); - }; - - if (tokens.length === 0) return [onStart, <>] as [Function, JSX.Element]; + const { token_amounts, contract, gtmPopupEvent, gtmSelectEvent } = props; + if (token_amounts.length === 0) return null; const checkNextToken = async (index = tokenIndex): Promise => { const nextIndex = index + 1; - const count = tokens.length; + const count = token_amounts.length; if (count === nextIndex) { return awaitConfirmation(); } @@ -88,7 +86,7 @@ export const ApproveModal = () => { }; const checkApprovalRequired = async (tokenIndex: number = 0) => { - const { token, amount } = tokens[tokenIndex]; + const { token, amount } = token_amounts[tokenIndex]; const isApprovalRequired = await getNetworkContractApproval( token, contract, @@ -100,8 +98,6 @@ export const ApproveModal = () => { } gtmPopupEvent && gtmPopupEvent(Events.approvePop); - - setIsOpen(true); }; const setApproval = async (amount?: string) => { @@ -109,7 +105,7 @@ export const ApproveModal = () => { const isUnlimited = amount === undefined; gtmSelectEvent(isUnlimited); } - const { token } = tokens[tokenIndex]; + const { token } = token_amounts[tokenIndex]; try { setIsLoading(true); const txHash = await setNetworkContractApproval( @@ -124,19 +120,19 @@ export const ApproveModal = () => { addNotification({ type: NotificationType.pending, title: 'Pending Confirmation', - msg: `Approve ${tokens[tokenIndex].token.symbol} is pending confirmation`, + msg: `Approve ${token_amounts[tokenIndex].token.symbol} is pending confirmation`, updatedInfo: { successTitle: 'Transaction Confirmed', successMsg: `${amount || 'Unlimited'} approval set for ${ - tokens[tokenIndex].token.symbol + token_amounts[tokenIndex].token.symbol }`, errorTitle: 'Transaction Failed', - errorMsg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, + errorMsg: `${token_amounts[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, }, txHash, }) ); - setIsOpen(false); + popModal(); setIsLoading(false); await checkNextToken(); @@ -154,25 +150,21 @@ export const ApproveModal = () => { addNotification({ type: NotificationType.error, title: 'Transaction Failed', - msg: `${tokens[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, + msg: `${token_amounts[tokenIndex].token.symbol} approval had failed. Please try again or contact support.`, }) ); } - setIsOpen(false); + popModal(); setIsLoading(false); } }; + const token = token_amounts[tokenIndex].token; + const amount = token_amounts[tokenIndex].amount; + return ( - { - if (onClose) onClose(); - setIsOpen(false); - }} - setIsOpen={setIsOpen} - isOpen={isOpen} - > +
From aea2cfa56667a0e5e2c1c4c110a9482a5c4b54f7 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Mon, 3 Oct 2022 15:58:47 +0300 Subject: [PATCH 28/29] used a new hook and removed the modal from every place it was called --- .../empty/AddLiquidityEmptyCTA.tsx | 7 +- .../single/AddLiquiditySingle.tsx | 16 +- .../earningsTable/menu/V3EarningTableMenu.tsx | 9 +- .../v3/holdings/V3HoldingsItemUnstaked.tsx | 9 +- .../v3/initWithdraw/step1/V3WithdrawStep1.tsx | 3 +- .../v3/initWithdraw/step3/V3WithdrawStep3.tsx | 15 +- .../initWithdraw/step3/useV3WithdrawStep3.ts | 9 +- .../confirm/useV3WithdrawConfirm.ts | 9 +- src/elements/swapLimit/SwapLimit.tsx | 12 +- src/elements/trade/TradeWidget.tsx | 1 - src/elements/trade/useTrade.ts | 17 +- src/hooks/useApproval.tsx | 164 ++++++++++++++++++ src/modals/ApproveModal.tsx | 151 +--------------- src/modals/DepositV3Modal.tsx | 9 +- src/modals/V3ExternalHoldingsModal.tsx | 8 +- src/modals/V3ManageProgramsModal.tsx | 9 +- src/modals/V3WithdrawConfirmModal.tsx | 3 - src/modals/VbntModal.tsx | 7 +- src/modals/index.tsx | 2 + 19 files changed, 232 insertions(+), 228 deletions(-) create mode 100644 src/hooks/useApproval.tsx diff --git a/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx b/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx index 0d210e786..4597ee4ba 100644 --- a/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx +++ b/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx @@ -1,5 +1,4 @@ import { useDispatch } from 'react-redux'; -import { useApproveModal } from 'hooks/useApproveModal'; import { Token } from 'services/observables/tokens'; import { addLiquidity } from 'services/web3/liquidity/liquidity'; import { @@ -14,6 +13,7 @@ import { useAppSelector } from 'store'; import { Pool } from 'services/observables/pools'; import { useNavigation } from 'hooks/useNavigation'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; +import { useApproval } from 'hooks/useApproval'; interface Props { pool: Pool; @@ -83,7 +83,7 @@ export const AddLiquidityEmptyCTA = ({ goToPage, ]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [ { amount: amountBnt, token: bnt }, { amount: amountTkn, token: tkn }, @@ -121,7 +121,7 @@ export const AddLiquidityEmptyCTA = ({ if (!account) { handleWalletButtonClick(); } else { - onStart(); + startApprove(); } }; @@ -136,7 +136,6 @@ export const AddLiquidityEmptyCTA = ({ > {btn.label} - {ModalApprove} ); }; diff --git a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx index a79ff405c..987b31927 100644 --- a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx +++ b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx @@ -6,7 +6,6 @@ import { AddLiquiditySingleSpaceAvailable } from 'elements/earn/pools/addLiquidi import { useAppSelector } from 'store'; import { AddLiquiditySingleAmount } from 'elements/earn/pools/addLiquidity/single/AddLiquiditySingleAmount'; import { useCallback, useState } from 'react'; -import { useApproveModal } from 'hooks/useApproveModal'; import { AddLiquiditySingleCTA } from 'elements/earn/pools/addLiquidity/single/AddLiquiditySingleCTA'; import { useDispatch } from 'react-redux'; import { prettifyNumber } from 'utils/helperFunctions'; @@ -31,6 +30,7 @@ import { useNavigation } from 'hooks/useNavigation'; import { fetchProtectedPositions } from 'services/web3/protection/positions'; import { setProtectedPositions } from 'store/liquidity/liquidity'; import { Events } from 'services/api/googleTagManager'; +import { useApproval } from 'hooks/useApproval'; interface Props { pool: Pool; @@ -113,7 +113,7 @@ export const AddLiquiditySingle = ({ pool }: Props) => { ); }; - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [{ amount, token: selectedToken }], addV2Protection, ApprovalContract.LiquidityProtection, @@ -165,8 +165,15 @@ export const AddLiquiditySingle = ({ pool }: Props) => { fiatToggle ); sendLiquidityEvent(Events.click); - onStart(); - }, [amount, amountUsd, fiatToggle, onStart, pool.name, selectedToken.symbol]); + startApprove(); + }, [ + amount, + amountUsd, + fiatToggle, + startApprove, + pool.name, + selectedToken.symbol, + ]); if (!tkn) { goToPage.notFound(); @@ -212,7 +219,6 @@ export const AddLiquiditySingle = ({ pool }: Props) => { errorMsg={handleError()} isBNTSelected={isBNTSelected} /> - {ModalApprove} ); }; diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx index 345d7e911..898c448e5 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx @@ -5,7 +5,6 @@ import { usePopper } from 'react-popper'; import { V3EarningsTableMenuContent } from 'elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuContent'; import { Placement } from '@popperjs/core'; import { Holding } from 'store/portfolio/v3Portfolio.types'; -import { useApproveModal } from 'hooks/useApproveModal'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { expandToken } from 'utils/formulas'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; @@ -16,6 +15,7 @@ import { rejectNotification, } from 'services/notifications/notifications'; import { ErrorCode } from 'services/web3/types'; +import { useApproval } from 'hooks/useApproval'; export type EarningTableMenuState = 'main' | 'bonus' | 'rate'; @@ -74,7 +74,7 @@ export const V3EarningTableMenu = memo( } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( [ { amount: holding.poolTokenBalance, @@ -92,12 +92,11 @@ export const V3EarningTableMenu = memo( const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); return ( <> - {ApproveModal} {({ open }) => ( <> diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx index 44a9ea0d7..56f50e220 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx @@ -12,11 +12,11 @@ import { } from 'services/notifications/notifications'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; -import { useApproveModal } from 'hooks/useApproveModal'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { useModal } from 'hooks/useModal'; import { ModalNames } from 'modals'; +import { useApproval } from 'hooks/useApproval'; export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { const { pool } = holding; @@ -58,7 +58,7 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( [ { amount: holding.poolTokenBalance, @@ -75,8 +75,8 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); return ( <> @@ -131,7 +131,6 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { )}
- {ApproveModal} ); }; diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx b/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx index 3e2b477b5..1096ddc72 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx @@ -111,7 +111,7 @@ const V3WithdrawStep1 = ({ const [isConfirmed, setIsConfirmed] = useState(false); - const { handleButtonClick, ModalApprove, txBusy } = useV3WithdrawStep3({ + const { handleButtonClick, txBusy } = useV3WithdrawStep3({ holding, amount, setStep, @@ -158,7 +158,6 @@ const V3WithdrawStep1 = ({ return (
- {ModalApprove}

How much {token.symbol} do you want to withdraw?

diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx b/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx index 8e375a1c9..2e0a3dee3 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx @@ -22,14 +22,12 @@ const V3WithdrawStep3 = ({ isFiat, setRequestId, }: Props) => { - const { token, handleButtonClick, ModalApprove, txBusy } = useV3WithdrawStep3( - { - holding, - amount, - setStep, - setRequestId, - } - ); + const { token, handleButtonClick, txBusy } = useV3WithdrawStep3({ + holding, + amount, + setStep, + setRequestId, + }); return ( <> @@ -58,7 +56,6 @@ const V3WithdrawStep3 = ({
- {ModalApprove} ); }; diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts b/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts index d8cb93e70..ff61f5a93 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts +++ b/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { Holding } from 'store/portfolio/v3Portfolio.types'; import BigNumber from 'bignumber.js'; @@ -157,7 +157,7 @@ export const useV3WithdrawStep3 = ({ if (initiatedWithdraw.current) setStep(4); }, [withdrawalRequests, setStep]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( approveTokens, (approvalHash?: string) => initWithdraw(approvalHash), ContractsApi.BancorNetwork.contractAddress, @@ -181,13 +181,12 @@ export const useV3WithdrawStep3 = ({ return; } hasStarted.current = true; - onStart(); - }, [onStart, poolTokenAmountWei]); + startApprove(); + }, [startApprove, poolTokenAmountWei]); return { token: reserveToken, handleButtonClick, - ModalApprove, txBusy, }; }; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts b/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts index ed765bf0d..a9c3488b8 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts @@ -7,7 +7,7 @@ import BigNumber from 'bignumber.js'; import useAsyncEffect from 'use-async-effect'; import { fetchWithdrawalRequestOutputBreakdown } from 'services/web3/v3/portfolio/withdraw'; import { wait } from 'utils/pureFunctions'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { WithdrawalRequest } from 'store/portfolio/v3Portfolio.types'; import { @@ -176,7 +176,7 @@ export const useV3WithdrawConfirm = ({ return tokensToApprove; }, [govToken?.address, govToken?.symbol, poolTokenAmount, token]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( approveTokens, (approvalHash?: string) => withdraw(approvalHash), ContractsApi.BancorNetwork.contractAddress, @@ -204,9 +204,9 @@ export const useV3WithdrawConfirm = ({ }); sendWithdrawACEvent(WithdrawACEvent.ApproveClick); setTxBusy(true); - onStart(); + startApprove(); }, [ - onStart, + startApprove, pool.name, withdrawRequest.pool.reserveToken.usdPrice, withdrawRequest.reserveTokenAmount, @@ -220,7 +220,6 @@ export const useV3WithdrawConfirm = ({ return { onModalClose, - ModalApprove, token, withdrawAmounts, missingGovTokenBalance, diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 310c3a01c..8b2360a6e 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -21,7 +21,7 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { depositETHNotification, rejectNotification, @@ -288,7 +288,7 @@ export const SwapLimit = ({ try { const txHash = await depositWeth(fromAmount); depositETHNotification(dispatch, fromAmount, txHash); - approveWETH(); + startWETHApprove(); } catch (e: any) { if (e.code === ErrorCode.DeniedTx) sendConversionEvent( @@ -359,13 +359,13 @@ export const SwapLimit = ({ return 'Trade'; }; - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [{ amount: fromAmount, token: fromToken }], handleSwap, ApprovalContract.ExchangeProxy ); - const [approveWETH, ModalApproveWETH] = useApproveModal( + const startWETHApprove = useApproval( [ { amount: fromAmount, @@ -543,8 +543,6 @@ export const SwapLimit = ({ )} - {ModalApprove} - {ModalApproveWETH} - {ApproveModal} {!isBNT && } diff --git a/src/modals/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx index 006194c0b..f949c3391 100644 --- a/src/modals/V3ExternalHoldingsModal.tsx +++ b/src/modals/V3ExternalHoldingsModal.tsx @@ -7,7 +7,7 @@ import { useAppSelector } from 'store'; import { useDispatch } from 'react-redux'; import { Button, ButtonSize } from 'components/button/Button'; import { TokenBalance } from 'components/tokenBalance/TokenBalance'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { mockToken } from 'utils/mocked'; import { getMigrateFnByAmmProvider } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings'; import { shrinkToken } from 'utils/formulas'; @@ -90,7 +90,7 @@ export const V3ExternalHoldingsModal = () => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( tokensToApprove, migrate, ContractsApi.BancorPortal.contractAddress @@ -101,7 +101,7 @@ export const V3ExternalHoldingsModal = () => { const handleButtonClick = async () => { setTxBusy(true); - onStart(); + startApprove(); }; return ( @@ -146,8 +146,6 @@ export const V3ExternalHoldingsModal = () => { {lockDurationInDays} day cooldown • {withdrawalFeeInPercent}% withdrawal fee

- - {ApproveModal} ); diff --git a/src/modals/V3ManageProgramsModal.tsx b/src/modals/V3ManageProgramsModal.tsx index 855ec6693..ecc97134e 100644 --- a/src/modals/V3ManageProgramsModal.tsx +++ b/src/modals/V3ManageProgramsModal.tsx @@ -19,7 +19,7 @@ import { useTknFiatInput } from 'elements/trade/useTknFiatInput'; import BigNumber from 'bignumber.js'; import dayjs from 'dayjs'; import { TradeWidgetInput } from 'elements/trade/TradeWidgetInput'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { Modal, ModalNames } from 'modals'; import { useModal } from 'hooks/useModal'; import { getIsModalOpen, getModalData } from 'store/modals/modals'; @@ -128,7 +128,7 @@ export const V3ManageProgramsModal = () => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( holding ? [ { @@ -147,8 +147,8 @@ export const V3ManageProgramsModal = () => { const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); if (!holding) return null; @@ -227,7 +227,6 @@ export const V3ManageProgramsModal = () => { > Add bn{holding.pool.reserveToken.symbol} to rewards program - {ApproveModal} ) : (
diff --git a/src/modals/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx index 35a0f9a49..9ef4112ed 100644 --- a/src/modals/V3WithdrawConfirmModal.tsx +++ b/src/modals/V3WithdrawConfirmModal.tsx @@ -59,7 +59,6 @@ export const V3WithdrawConfirmContent = ({ openCancelModal: (req: WithdrawalRequest) => void; }) => { const { - ModalApprove, token, loadingAmounts, withdrawAmounts, @@ -92,8 +91,6 @@ export const V3WithdrawConfirmContent = ({ return (
- {ModalApprove} - { ); }; - const [checkApprove, ModalApprove] = useApproveModal( + const startApprove = useApproval( props ? [{ amount: amount, token: props.token }] : [], handleStakeUnstake, ApprovalContract.Governance, @@ -176,7 +176,7 @@ export const VbntModal = () => { onClick={() => { setAmount(''); popModal(); - if (stake) checkApprove(); + if (stake) startApprove(); else handleStakeUnstake(); }} disabled={stakeDisabled} @@ -188,7 +188,6 @@ export const VbntModal = () => {
- {ModalApprove} ); }; diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 84208abd6..2a129d299 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -21,6 +21,7 @@ import { V3ManageProgramsModal } from './V3ManageProgramsModal'; import { DepositV3Modal } from './DepositV3Modal'; import { SearchableTokenListModal } from './SearchableTokenListModal'; import { WithdrawLiquidityModal } from './WithdrawLiquidityModal'; +import { ApproveModal } from './ApproveModal'; export enum ModalNames { ApproveModal, @@ -47,6 +48,7 @@ export enum ModalNames { export const Modals = () => { return ( <> + From 01dca4ebd4b3ab5d5d8ead2db0f098168cf448c3 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Wed, 19 Oct 2022 15:57:01 +0300 Subject: [PATCH 29/29] fixed data not being transfer to some modals --- .../v3/earningsTable/menu/V3EarningTableMenuMain.tsx | 2 +- src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx | 6 +++--- .../earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx | 2 +- .../earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx index 433e0d0ca..db1c79691 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuMain.tsx @@ -22,7 +22,7 @@ export const V3EarningTableMenuMain = memo( const { pushModal } = useModal(); const handleWithdrawClick = useCallback(() => { - pushModal({ modalName: ModalNames.V3Withdraw, data: holding }); + pushModal({ modalName: ModalNames.V3Withdraw, data: { holding } }); }, [holding, pushModal]); const handleBonusClick = useCallback(() => { diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx index 7d37ca9a6..12ae9b872 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx @@ -213,7 +213,7 @@ export const V3HoldingPage = () => { onClick={() => pushModal({ modalName: ModalNames.DepositV3, - data: pool, + data: { pool }, }) } size={ButtonSize.ExtraSmall} @@ -248,7 +248,7 @@ export const V3HoldingPage = () => { onClick={() => pushModal({ modalName: ModalNames.V3ManagePrograms, - data: holding, + data: { holding }, }) } > @@ -272,7 +272,7 @@ export const V3HoldingPage = () => { onClick={() => pushModal({ modalName: ModalNames.V3Withdraw, - data: holding, + data: { holding }, }) } disabled={isDisabled} diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx index 56f50e220..c17e164d3 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx @@ -112,7 +112,7 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { onClick={() => pushModal({ modalName: ModalNames.V3Withdraw, - data: holding, + data: { holding }, }) } > diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx index 5aa3c7b1a..df1d2944d 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemWithdraw.tsx @@ -25,7 +25,7 @@ export const V3HoldingsItemWithdraw = ({ holding }: { holding: Holding }) => { onClick={() => pushModal({ modalName: ModalNames.V3Withdraw, - data: holding, + data: { holding }, }) } >