From 00ac6595f837fe4532f041b88a7c7bc361b8aa4c Mon Sep 17 00:00:00 2001 From: envin Date: Tue, 23 Jan 2024 02:09:32 +0100 Subject: [PATCH] feat(ethPNT): use switch to select ethPNT or PNT --- .../organisms/swapLine/SwapLine.jsx | 78 +++++++++++++++++-- src/components/pages/swap/Swap.jsx | 14 ++-- src/hooks/use-assets.js | 16 +--- src/settings/swap-assets.js | 2 +- 4 files changed, 81 insertions(+), 29 deletions(-) diff --git a/src/components/organisms/swapLine/SwapLine.jsx b/src/components/organisms/swapLine/SwapLine.jsx index 5323ac14..e20fc2d6 100644 --- a/src/components/organisms/swapLine/SwapLine.jsx +++ b/src/components/organisms/swapLine/SwapLine.jsx @@ -1,14 +1,39 @@ import React, { useState, useEffect, useMemo } from 'react' -import styled from 'styled-components' import PropTypes from 'prop-types' import { Row, Col } from 'react-bootstrap' -import { capitalizeAllLettersExceptFirst } from '../../../utils/capitalize' +import Skeleton from 'react-loading-skeleton' +import 'react-loading-skeleton/dist/skeleton.css' import { NumericFormat } from 'react-number-format' +import styled from 'styled-components' + +import { capitalizeAllLettersExceptFirst } from '../../../utils/capitalize' import AssetInfo from '../assetInfo/AssetInfo' import Icon from '../../atoms/icon/Icon' import { getDecimalSeparator, getThousandSeparator } from '../../../utils/amount-utils' -import Skeleton from 'react-loading-skeleton' -import 'react-loading-skeleton/dist/skeleton.css' +import Switch from '../../atoms/switch/Switch' +import swapAssets from '../../../settings/swap-assets' + +const SelectCol = styled(Col)` + text-align: center; + font-weight: 500; + padding-top: 10px; + margin-left: 2px; + color: ${({ theme }) => theme.text1}; + @media (max-width: 767.98px) { + font-size: 12px; + } +` + +const LabelCol = styled(Col)` + margin-top: 10px; + text-align: left; + padding-left: 0px; + font-weight: 300; + color: ${({ theme }) => theme.text1}; + @media (max-width: 767.98px) { + font-size: 12px; + } +` const SwapLineContainer = styled.div` border-radius: 20px; @@ -202,6 +227,7 @@ const SwapLine = ({ defaultMiniImage, title, wallet, + selectFrom, hideMaxButton, onChangeAmount, onClickImage, @@ -216,6 +242,7 @@ const SwapLine = ({ }) => { const [showInfo, setShowInfo] = useState(false) const [id, setId] = useState(false) + const [selectEthPNT, setSelectEthPNT] = useState(false) // NOTE: avoid to close show info when asset is reloaded with the balance useEffect(() => { @@ -225,6 +252,27 @@ const SwapLine = ({ } }, [asset, id]) + useEffect(() => { + if (asset && asset.id === 'ETHPNT_ON_ETH_MAINNET') + setSelectEthPNT(true) + else setSelectEthPNT(false) + }, [asset, id]) + + const switchPNT = () => { + if (asset.id === 'ETHPNT_ON_ETH_MAINNET') { + const pnt = swapAssets.find((asset) => asset.id === 'PNT') + selectFrom(pnt) + } + else { + const ethPnt = swapAssets.find((asset) => asset.id === 'ETHPNT_ON_ETH_MAINNET') + selectFrom(ethPnt) + } + } + + const isPNTcase = asset?.id === 'PNT' || asset?.id === 'ETHPNT_ON_ETH_MAINNET' + + const showPntSwitch = !address && address !== '' && asset && (isPNTcase) + const formattedTitle = useMemo(() => { if (!withTitleLabel || !asset || !asset.titleLabel) return title @@ -235,7 +283,7 @@ const SwapLine = ({ {formattedTitle} - {asset && asset.formattedBalance !== '-' ? ( + {asset && asset.formattedBalance && asset.formattedBalance !== '-' ? ( {`Balance: ${asset.formattedBalance} ${ @@ -252,12 +300,12 @@ const SwapLine = ({ onClickImage && onClickImage()}> - onClickImage && onClickImage()} /> + onClickImage && onClickImage()} /> {(asset && asset.withMiniImage) || (!asset && defaultMiniImage) ? ( - + ) : null} {' '} - {asset && asset.formattedBalance !== '-' && !hideMaxButton ? ( + {asset && asset.formattedBalance && asset.formattedBalance !== '-' && !hideMaxButton ? ( MAX @@ -285,6 +333,20 @@ const SwapLine = ({ + {showPntSwitch ? ( + <> + + + + Use ethPNT + + ) : null} setShowInfo(!showInfo)}> {asset && asset.address ? ( diff --git a/src/components/pages/swap/Swap.jsx b/src/components/pages/swap/Swap.jsx index cade9f52..77572886 100644 --- a/src/components/pages/swap/Swap.jsx +++ b/src/components/pages/swap/Swap.jsx @@ -1,8 +1,10 @@ import React, { useCallback, useEffect, useState } from 'react' -import styled from 'styled-components' import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' import { Row, Col, Container } from 'react-bootstrap' +import ReactTooltip from 'react-tooltip' +import styled from 'styled-components' + import AssetListModal from '../../organisms/assetListModal/AssetListModal' import Progress from '../../molecules/progress/Progress' import { useSwap } from '../../../hooks/use-swap' @@ -11,16 +13,15 @@ import DepositAddressModal from '../../organisms/depositAddressModal/DepositAddr import SwapInfo from '../../organisms/swapInfo/SwapInfo' import defaultAssets from '../../../settings/swap-assets' import { useAssets } from '../../../hooks/use-assets' +import Button from '../../atoms/button/Button' import Icon from '../../atoms/icon/Icon' -import InfoModal from '../../organisms/infoModal/InfoModal' -import TermsOfService from '../../../components/molecules/popup/TermsOfService' -import AddressWarning from '../../molecules/popup/AddressWarning' import WarningPopup from '../../molecules/popup/Warning' import Switch from '../../atoms/switch/Switch' -import Button from '../../atoms/button/Button' +import AddressWarning from '../../molecules/popup/AddressWarning' +import InfoModal from '../../organisms/infoModal/InfoModal' +import TermsOfService from '../../../components/molecules/popup/TermsOfService' import { MAX_IMPACT, PBTC_ON_ETH_MAINNET_V1_MIGRATION } from '../../../constants' import { sendEvent } from '../../../ga4' -import ReactTooltip from 'react-tooltip' export const OuterContainerSwap = styled.div` @media (max-width: 767.98px) { @@ -345,6 +346,7 @@ const Swap = ({ amount={fromAmount} wallet={fromWallet} disableInput={disableFromInput} + selectFrom={onSelectFrom} onChangeAmount={onChangeFromAmount} onClickImage={() => setShowModalFrom(true)} onMax={onFromMax} diff --git a/src/hooks/use-assets.js b/src/hooks/use-assets.js index 07cb39b8..963e43f9 100644 --- a/src/hooks/use-assets.js +++ b/src/hooks/use-assets.js @@ -51,22 +51,10 @@ const useSortPntInflationToken = (_assets) => { const pntExtendingTokens = Object.values(_assets) .flatMap((array) => array) .filter((asset) => asset.extendsPnt === true) - if (pntExtendingTokens) { - const prunedAssets = Object.fromEntries( + if (pntExtendingTokens) + return Object.fromEntries( Object.entries(_assets).filter(([key]) => !pntExtendingTokens.some((token) => token.nativeSymbol === key)) ) - if (pntExtendingTokens.length === 0) return prunedAssets - else if (prunedAssets.PNT && prunedAssets.PNT.length > 0 && pntExtendingTokens.length > 0) - return { - ...prunedAssets, - PNT: [prunedAssets.PNT[0], ...pntExtendingTokens, ...prunedAssets.PNT.slice(1)], - } - else - return { - ...prunedAssets, - PNT: [...pntExtendingTokens], - } - } return _assets }, [_assets]) } diff --git a/src/settings/swap-assets.js b/src/settings/swap-assets.js index f1dae120..fe586bb7 100644 --- a/src/settings/swap-assets.js +++ b/src/settings/swap-assets.js @@ -1136,7 +1136,7 @@ const swapAssets = [ isNative: true, nativeSymbol: 'ethPNT', nativeBlockchain: 'ETH', - image: 'ethPNT.svg', + image: 'PNT.svg', withBalanceDecimalsConversion: true, titleLabel: 'ethPNT', chainId: ChainId.EthereumMainnet,