feat: remove old logic in favor of the latest one

webapp/config-overrides.js

@@ -29,10 +29,9 @@ const jestConfig = config => {
     '^react-native$': 'react-native-web',
     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
   }
-  console.log('config: ', config)
   return config
 }
 
-overridedConfig.jest = jestConfig
+overridedConfig.jest = jestConfig // looks counter-intuitive, but it works
 
 module.exports = overridedConfig

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.types.ts

@@ -18,4 +18,4 @@ export enum BuyOptions {
 export type OwnProps = Omit<Props, 'onBuyWithCrypto'>
 
 export type MapDispatchProps = Pick<Props, 'onBuyWithCrypto'>
-export type MapDispatch = Dispatch<OpenModalAction>
+export type MapDispatch = Dispatch<OpenModalAction>

webapp/src/components/BuyPage/BuyPage.tsx

@@ -59,9 +59,9 @@ const BuyPage = (props: Props) => {
                     order={order}
                     {...modalProps}
                   />
-                ) : (
+                ) : type === AssetType.ITEM ? (
                   <MintItemModal item={asset as Item} {...modalProps} />
-                )
+                ) : null
               }}
             </AssetProviderPage>
           )}

webapp/src/components/BuyPage/BuyPage.types.ts

@@ -2,8 +2,4 @@ import { AssetType } from '../../modules/asset/types'
 
 export type Props = {
   type: AssetType
-  isBuyCrossChainEnabled: boolean
 }
-
-export type OwnProps = Pick<Props, 'type'>
-export type MapStateProps = Pick<Props, 'isBuyCrossChainEnabled'>

webapp/src/components/BuyPage/NotEnoughMana/NotEnoughMana.module.css

@@ -3,21 +3,10 @@
   width: 460px !important;
 }
 
-.card :global(.ui.button + .ui.button) {
-  /* Override semantic UI's width */
-  margin-left: 0;
-}
-
 .card:global(.ui.card > .content) {
   padding: 20px 24px 24px;
 }
 
-.card
-  :global(.ui.button:not(.icon)
-    > .icon:not(.button):not(.dropdown).ethereum.icon) {
-  margin-right: 2px;
-}
-
 .paragraph {
   margin-bottom: 10px;
   color: var(--text);
@@ -31,6 +20,7 @@
   margin-top: 6px;
 }
 
+
 @media (max-width: 768px) {
   .card {
     /* Override semantic UI's width */

webapp/src/components/BuyPage/NotEnoughMana/NotEnoughMana.tsx

@@ -6,13 +6,7 @@ import { Props } from './NotEnoughMana.types'
 import styles from './NotEnoughMana.module.css'
 
 const NotEnoughMana = (props: Props) => {
-  const {
-    asset,
-    description,
-    onGetMana,
-    onBuyWithCard,
-    onBuyWithAnotherToken
-  } = props
+  const { asset, description, onGetMana, onBuyWithCard } = props
 
   return (
     <Card className={styles.card}>
@@ -38,12 +32,6 @@ const NotEnoughMana = (props: Props) => {
             <Icon name="credit card outline" />
             {t('asset_page.actions.buy_with_card')}
           </Button>
-          {onBuyWithAnotherToken ? (
-            <Button basic size="small" onClick={onBuyWithAnotherToken}>
-              <Icon name="ethereum" />
-              {t('asset_page.actions.buy_with_another_token')}
-            </Button>
-          ) : null}
         </div>
       </Card.Content>
     </Card>

webapp/src/components/BuyPage/NotEnoughMana/NotEnoughMana.types.ts

@@ -15,7 +15,6 @@ export type Props = {
   description: React.ReactNode
   onGetMana: typeof openBuyManaWithFiatModalRequest
   onBuyWithCard: (asset: Asset) => ReturnType<typeof openTransak>
-  onBuyWithAnotherToken?: () => void
 }
 
 export type MapDispatchProps = Pick<Props, 'onGetMana' | 'onBuyWithCard'>

webapp/src/components/BuyPage/PriceTooLow/PriceTooLow.module.css

@@ -3,17 +3,6 @@
   width: 460px !important;
 }
 
-.card :global(.ui.button + .ui.button) {
-  /* Override semantic UI's width */
-  margin-left: 0;
-}
-
-.card
-  :global(.ui.button:not(.icon)
-    > .icon:not(.button):not(.dropdown).ethereum.icon) {
-  margin-right: 2px;
-}
-
 .card.buyWithCard {
   /* Override semantic UI's width */
   width: 416px !important;
@@ -31,9 +20,10 @@
   padding-left: 0px !important;
 }
 
+
 @media (max-width: 768px) {
   .card {
     /* Override semantic UI's width */
     width: 100% !important;
   }
-}
+}

webapp/src/components/BuyPage/PriceTooLow/PriceTooLow.tsx

@@ -1,20 +1,14 @@
 import React from 'react'
 import classNames from 'classnames'
-import { Button, Card, Icon } from 'decentraland-ui'
+import { Button, Card } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getMinSaleValueInWei } from '../utils'
 import { Price } from '../Price'
 import { Props } from './PriceTooLow.types'
 import styles from './PriceTooLow.module.css'
 
 const PriceTooLow = (props: Props) => {
-  const {
-    chainId,
-    network,
-    isBuyWithCardPage,
-    onSwitchNetwork,
-    onBuyWithAnotherToken
-  } = props
+  const { chainId, network, isBuyWithCardPage, onSwitchNetwork } = props
 
   const humanNetwork = t(`networks.${network.toLowerCase()}`)
   const humanToken = t(`tokens.${network.toLowerCase()}`)
@@ -60,12 +54,6 @@ const PriceTooLow = (props: Props) => {
               {t('global.learn_more')}
             </Button>
           ) : null}
-          {onBuyWithAnotherToken ? (
-            <Button basic size="small" onClick={onBuyWithAnotherToken}>
-              <Icon name="ethereum" />
-              {t('price_too_low.buy_with_another_token')}
-            </Button>
-          ) : null}
         </div>
       </Card.Content>
     </Card>

webapp/src/components/BuyPage/PriceTooLow/PriceTooLow.types.ts

@@ -10,7 +10,6 @@ export type Props = {
   network: Network
   isBuyWithCardPage: boolean
   onSwitchNetwork: typeof switchNetworkRequest
-  onBuyWithAnotherToken?: () => void
 }
 
 export type MapStateProps = Pick<Props, 'isBuyWithCardPage'>

webapp/src/components/BuyPage/index.ts

@@ -1,2 +1,2 @@
-import BuyPage from './BuyPage.container'
+import BuyPage from './BuyPage'
 export { BuyPage }

webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx

@@ -87,7 +87,6 @@ export const BuyWithCryptoModal = (props: Props) => {
 
   // useStates
   const [providerChains, setProviderChains] = useState<ChainData[]>([])
-  console.log('providerChains: ', providerChains)
   const [providerTokens, setProviderTokens] = useState<Token[]>([])
   const [selectedChain, setSelectedChain] = useState(asset.chainId)
   const [selectedToken, setSelectedToken] = useState<Token>()
@@ -101,12 +100,12 @@ export const BuyWithCryptoModal = (props: Props) => {
   const [showChainSelector, setShowChainSelector] = useState(false)
   const [showTokenSelector, setShowTokenSelector] = useState(false)
 
-  // useMemos
-
   useEffect(() => {
-    crossChainProvider.init()
+    crossChainProvider.init() // init the provider on the mount
   }, [])
 
+  // useMemos
+
   // if the tx should be done through the provider
   const shouldUseCrossChainProvider = useMemo(
     () =>
@@ -552,7 +551,6 @@ export const BuyWithCryptoModal = (props: Props) => {
   const onBuyWithCrypto = useCallback(async () => {
     if (route && crossChainProvider && crossChainProvider.isLibInitialized()) {
       onBuyItemThroughProvider(route)
-      // const axelarScanUrl = `https://axelarscan.io/gmp/${tx.transactionHash}`
     }
   }, [onBuyItemThroughProvider, route])