feat(ethPNT): add support to ethPNT in swaps

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 }) => {
             </Token>
           </ContainerOptions>
         </Row>
+        {asset.id === ETHPNT_ON_ETH_MAINNET ? (
+          <Row>
+            <InflationInfo>
+              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.
+            </InflationInfo>
+          </Row>
+        ) : null}
         <ReactTooltip
           getContent={(_dataTip) =>
             _dataTip === 'Add to MetaMask' || _dataTip === 'Connect MetaMask to add the token'

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,14 +217,16 @@ const SwapLine = ({
   defaultMiniImage,
   title,
   wallet,
-  selectFrom,
   hideMaxButton,
   onChangeAmount,
   onClickImage,
   onChangeAddress,
   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 = ({
       <Row>
         <ContainerImageAndMaxButton xs={4} className="my-auto">
           <ContainerImage onClick={() => onClickImage && onClickImage()}>
-            <Image src={asset ? isPNTcase ? './assets/svg/PNT.svg' : asset.image : defaultImage} onClick={() => onClickImage && onClickImage()} />
+            <Image
+              src={asset ? (isPNTcase ? './assets/svg/PNT.svg' : asset.image) : defaultImage}
+              onClick={() => onClickImage && onClickImage()}
+            />
             {(asset && asset.withMiniImage) || (!asset && defaultMiniImage) ? (
-              <MiniImage src={asset ? isPNTcase ? './assets/svg/ETH.svg' : asset.miniImage : defaultMiniImage} />
+              <MiniImage src={asset ? (isPNTcase ? './assets/svg/ETH.svg' : asset.miniImage) : defaultMiniImage} />
             ) : null}
           </ContainerImage>{' '}
           {asset && asset.formattedBalance && asset.formattedBalance !== '-' && !hideMaxButton ? (
@@ -325,14 +333,8 @@ const SwapLine = ({
       </Row>
       <Row>
         {showPntSwitch ? (
-          <SelectCol
-            data-tip={
-              'Use ethPNT'
-            }
-            data-for="tooltip-gasless"
-            xs={2}
-          >
-            <Switch height={20} width={40} checked={selectEthPNT} disabled={false} onChange={switchPNT} />
+          <SelectCol data-tip={'Use ethPNT'} data-for="tooltip-gasless" xs={2}>
+            <Switch height={15} width={30} checked={selectEthPNT} disabled={false} onChange={switchPNT} />
           </SelectCol>
         ) : null}
         <ExpandContainer>

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}

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}