diff --git a/src/components/organisms/assetInfo/AssetInfo.jsx b/src/components/organisms/assetInfo/AssetInfo.jsx index 3dffccbb..1c328b13 100644 --- a/src/components/organisms/assetInfo/AssetInfo.jsx +++ b/src/components/organisms/assetInfo/AssetInfo.jsx @@ -1,14 +1,26 @@ -import React, { useState, useEffect, useCallback } from 'react' -import styled from 'styled-components' import PropTypes from 'prop-types' +import React, { useState, useEffect, useCallback } from 'react' import { Row, Col } from 'react-bootstrap' import ReactTooltip from 'react-tooltip' -import Icon from '../../atoms/icon/Icon' -import { copyToClipboard } from '../../../utils/utils' -import { registerToken } from '../../../utils/wallet' -import { getBase64Image } from '../../../utils/image' +import styled from 'styled-components' + +import { ETHPNT_ON_ETH_MAINNET } from '../../../constants' import { useProvider } from '../../../hooks/use-provider' import { capitalizeAllLettersExceptFirst } from '../../../utils/capitalize' +import { getBase64Image } from '../../../utils/image' +import { copyToClipboard } from '../../../utils/utils' +import { registerToken } from '../../../utils/wallet' +import Icon from '../../atoms/icon/Icon' +import { InfoEta } from '../../pages/swap/Swap' + +const InflationInfo = styled(InfoEta)` + width: 100%; + margin-top: 10px; + margin-bottom: 0px; + margin-right: 10px; + margin-left: 10px; + padding: 5px; +` const ContainerAssetInfo = styled(Col)` margin-top: 10px; @@ -120,6 +132,15 @@ const AssetInfo = ({ asset, wallet }) => { + {asset.id === ETHPNT_ON_ETH_MAINNET ? ( + + + ethPNT is an extension of the PNT token with cross-chain functionality, maintaining the same token economy + and functionalities as PNT-on-Ethereum. ethPNT grants the same DAO governance power of PNT, inheriting its + full value. + + + ) : null} _dataTip === 'Add to MetaMask' || _dataTip === 'Connect MetaMask to add the token' diff --git a/src/components/organisms/swapLine/SwapLine.jsx b/src/components/organisms/swapLine/SwapLine.jsx index 8d498bea..a9080ed6 100644 --- a/src/components/organisms/swapLine/SwapLine.jsx +++ b/src/components/organisms/swapLine/SwapLine.jsx @@ -1,22 +1,23 @@ -import React, { useState, useEffect, useMemo } from 'react' import PropTypes from 'prop-types' +import React, { useState, useEffect, useMemo } from 'react' import { Row, Col } from 'react-bootstrap' 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 { ETHPNT_ON_ETH_MAINNET, PNT_ON_ETH_MAINNET } from '../../../constants' +import { getDecimalSeparator, getThousandSeparator } from '../../../utils/amount-utils' import { capitalizeAllLettersExceptFirst } from '../../../utils/capitalize' -import AssetInfo from '../assetInfo/AssetInfo' import Icon from '../../atoms/icon/Icon' -import { getDecimalSeparator, getThousandSeparator } from '../../../utils/amount-utils' import Switch from '../../atoms/switch/Switch' +import AssetInfo from '../assetInfo/AssetInfo' const SelectCol = styled(Col)` text-align: center; font-weight: 500; padding-top: 10px; - margin-left: 2px; + margin-left: 6px; color: ${({ theme }) => theme.text1}; @media (max-width: 767.98px) { font-size: 12px; @@ -216,7 +217,6 @@ const SwapLine = ({ defaultMiniImage, title, wallet, - selectFrom, hideMaxButton, onChangeAmount, onClickImage, @@ -224,6 +224,9 @@ const SwapLine = ({ onMax, withTitleLabel, disableInput, + selectFrom = () => null, + selectTo = () => null, + migration = false, inputType = 'number', inputPlaceholder = '0', prefix = '', @@ -235,34 +238,36 @@ const SwapLine = ({ // NOTE: avoid to close show info when asset is reloaded with the balance useEffect(() => { - if (asset && asset.id !== id && asset.id !== 'ETHPNT_ON_ETH_MAINNET') { + if (asset && asset.id !== id && asset.id !== ETHPNT_ON_ETH_MAINNET) { setShowInfo(false) setId(asset.id) } }, [asset, id]) useEffect(() => { - if (asset && asset.id === 'ETHPNT_ON_ETH_MAINNET') { - setSelectEthPNT(true) - setShowInfo(true) - } - else setSelectEthPNT(false) + if (asset?.id === PNT_ON_ETH_MAINNET) + if (asset && asset.id === ETHPNT_ON_ETH_MAINNET) { + setSelectEthPNT(true) + setShowInfo(true) + } else setSelectEthPNT(false) }, [asset, id]) const switchPNT = () => { - if (asset.id === 'ETHPNT_ON_ETH_MAINNET') { - const pnt = assets.find((asset) => asset.id === 'PNT') - selectFrom(pnt) - } - else { - const ethPnt = assets.find((asset) => asset.id === 'ETHPNT_ON_ETH_MAINNET') - selectFrom(ethPnt) + if (migration) return + if (asset.id === ETHPNT_ON_ETH_MAINNET) { + const pnt = assets.find((asset) => asset.id === PNT_ON_ETH_MAINNET) + if (!address && address !== '') selectFrom(pnt) + else selectTo(pnt) + } else { + const ethPnt = assets.find((asset) => asset.id === ETHPNT_ON_ETH_MAINNET) + if (!address && address !== '') selectFrom(ethPnt) + else selectTo(ethPnt) } } - const isPNTcase = asset?.id === 'PNT' || asset?.id === 'ETHPNT_ON_ETH_MAINNET' + const isPNTcase = asset?.id === PNT_ON_ETH_MAINNET || asset?.id === ETHPNT_ON_ETH_MAINNET - const showPntSwitch = !address && address !== '' && asset && (isPNTcase) + const showPntSwitch = asset && isPNTcase && !migration const formattedTitle = useMemo(() => { if (!withTitleLabel || !asset || !asset.titleLabel) return title @@ -291,9 +296,12 @@ const SwapLine = ({ onClickImage && onClickImage()}> - onClickImage && onClickImage()} /> + onClickImage && onClickImage()} + /> {(asset && asset.withMiniImage) || (!asset && defaultMiniImage) ? ( - + ) : null} {' '} {asset && asset.formattedBalance && asset.formattedBalance !== '-' && !hideMaxButton ? ( @@ -325,14 +333,8 @@ const SwapLine = ({ {showPntSwitch ? ( - - + + ) : null} diff --git a/src/components/pages/migration/Migration.jsx b/src/components/pages/migration/Migration.jsx index c2ed8ef2..edb441b0 100644 --- a/src/components/pages/migration/Migration.jsx +++ b/src/components/pages/migration/Migration.jsx @@ -1,10 +1,16 @@ -import React from 'react' -import styled from 'styled-components' import PropTypes from 'prop-types' +import React from 'react' import { Row, Col, Container } from 'react-bootstrap' -import SwapLine from '../../organisms/swapLine/SwapLine' -import { useMigration } from '../../../hooks/use-migration' +import styled from 'styled-components' + +import { PBTC_ON_ETH_MAINNET_V2_MIGRATION, PNT_ON_ETH_MAINNET } from '../../../constants' import { useAssets } from '../../../hooks/use-assets' +import { useMigration } from '../../../hooks/use-migration' +import Button from '../../atoms/button/Button' +import Progress from '../../molecules/progress/Progress' +import InfoModal from '../../organisms/infoModal/InfoModal' +import MigrationInfo from '../../organisms/migrationInfo/MigrationInfo' +import SwapLine from '../../organisms/swapLine/SwapLine' import { OuterContainerSwap, ContainerSwap, @@ -13,11 +19,6 @@ import { ArrowContainer, SortIcon, } from '../swap/Swap' -import Button from '../../atoms/button/Button' -import Progress from '../../molecules/progress/Progress' -import InfoModal from '../../organisms/infoModal/InfoModal' -import MigrationInfo from '../../organisms/migrationInfo/MigrationInfo' -import { PBTC_ON_ETH_MAINNET_V2_MIGRATION, PNT_ON_ETH_MAINNET } from '../../../constants' const ArrowIcon = styled(SortIcon)` cursor: normal !important; @@ -91,6 +92,7 @@ const Migration = ({ asset={from} amount={fromAmount} wallet={fromWallet} + migration={true} onChangeAmount={onChangeFromAmount} onMax={onFromMax} withTitleLabel @@ -106,6 +108,7 @@ const Migration = ({ amount={toAmount} address={address} wallet={toWallet} + migration={true} inputType={'text'} onChangeAmount={onChangeToAmount} onChangeAddress={setAddress} diff --git a/src/components/pages/swap/Swap.jsx b/src/components/pages/swap/Swap.jsx index fe854ae5..34303cc8 100644 --- a/src/components/pages/swap/Swap.jsx +++ b/src/components/pages/swap/Swap.jsx @@ -1,27 +1,27 @@ -import React, { useCallback, useEffect, useState } from 'react' -import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' +import PropTypes from 'prop-types' +import React, { useCallback, useEffect, useState } from 'react' 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 TermsOfService from '../../../components/molecules/popup/TermsOfService' +import { MAX_IMPACT, PBTC_ON_ETH_MAINNET_V1_MIGRATION } from '../../../constants' +import { sendEvent } from '../../../ga4' +import { useAssets } from '../../../hooks/use-assets' import { useSwap } from '../../../hooks/use-swap' -import SwapLine from '../../organisms/swapLine/SwapLine' -import DepositAddressModal from '../../organisms/depositAddressModal/DepositAddressModal' -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 WarningPopup from '../../molecules/popup/Warning' import Switch from '../../atoms/switch/Switch' import AddressWarning from '../../molecules/popup/AddressWarning' +import WarningPopup from '../../molecules/popup/Warning' +import Progress from '../../molecules/progress/Progress' +import AssetListModal from '../../organisms/assetListModal/AssetListModal' +import DepositAddressModal from '../../organisms/depositAddressModal/DepositAddressModal' 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 SwapInfo from '../../organisms/swapInfo/SwapInfo' +import SwapLine from '../../organisms/swapLine/SwapLine' export const OuterContainerSwap = styled.div` @media (max-width: 767.98px) { @@ -108,7 +108,7 @@ export const SwapLabel = styled.label` } ` -const InfoEta = styled.div` +export const InfoEta = styled.div` margin-top: 30px; padding: 20px; margin-bottom: 10px; @@ -361,10 +361,12 @@ const Swap = ({ defaultMiniImage="./assets/svg/ETH.svg" title="To" asset={to} + assets={assets.length === 0 ? defaultAssets : assets} amount={toAmount} address={address} wallet={toWallet} disableInput={disableToInput} + selectTo={onSelectTo} onChangeAmount={onChangeToAmount} onClickImage={() => setShowModalTo(true)} onChangeAddress={setAddress}