feat(ethPNT): use switch to select ethPNT or PNT

pnetwork-association · Jan 23, 2024 · 00ac659 · 00ac659
1 parent 9f17b11
commit 00ac659
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 29 deletions.
diff --git 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 = ({
     <SwapLineContainer {..._props}>
       <ContainerTypeAndBalance>
         <ContainerTitle xs={6}>{formattedTitle}</ContainerTitle>
-        {asset && asset.formattedBalance !== '-' ? (
+        {asset && asset.formattedBalance && asset.formattedBalance !== '-' ? (
           <Col xs={6} className="text-right my-auto">
             <ContainerBalance>
               <BalanceLabel>{`Balance: ${asset.formattedBalance} ${
@@ -252,12 +300,12 @@ const SwapLine = ({
       <Row>
         <ContainerImageAndMaxButton xs={4} className="my-auto">
           <ContainerImage onClick={() => onClickImage && onClickImage()}>
-            <Image src={asset ? 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 ? defaultMiniImage : asset.miniImage} />
+              <MiniImage src={asset ? isPNTcase ? './assets/svg/ETH.svg' : asset.miniImage : defaultMiniImage} />
             ) : null}
           </ContainerImage>{' '}
-          {asset && asset.formattedBalance !== '-' && !hideMaxButton ? (
+          {asset && asset.formattedBalance && asset.formattedBalance !== '-' && !hideMaxButton ? (
             <ContainerMaxButton>
               <MaxButton onClick={onMax}>MAX</MaxButton>
             </ContainerMaxButton>
@@ -285,6 +333,20 @@ const SwapLine = ({
         </Col>
       </Row>
       <Row>
+        {showPntSwitch ? (
+          <>
+          <SelectCol
+            data-tip={
+              'Select if use PNT or ethPNT'
+            }
+            data-for="tooltip-gasless"
+            xs={2}
+          >
+            <Switch height={20} width={40} checked={selectEthPNT} disabled={false} onChange={switchPNT} />
+          </SelectCol>
+          <LabelCol>Use ethPNT</LabelCol>
+          </>
+        ) : null}
         <ExpandContainer>
           <Expand onClick={() => setShowInfo(!showInfo)}>
             {asset && asset.address ? (

diff --git 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
@@ -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
@@ -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,