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}