Skip to content

Commit

Permalink
fix: Add the TokenIcon component
Browse files Browse the repository at this point in the history
  • Loading branch information
@LautaroPetaccio
LautaroPetaccio committed Feb 23, 2024
1 parent 7c6cccd commit ee4acfb
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 76 deletions.
45 changes: 11 additions & 34 deletions webapp/src/components/Modals/BuyWithCryptoModal/PaymentSelector/PaymentSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import { ChainId, getNetwork } from '@dcl/schemas/dist/dapps/chain-id'
import { t } from 'decentraland-dapps/dist/modules/translation'
import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
import { ChainData, Route, Token } from 'decentraland-transactions/crossChain'
import { Icon, InfoTooltip, Popup } from 'decentraland-ui'
import { Icon, InfoTooltip } from 'decentraland-ui'
import { ManaToFiat } from '../../../ManaToFiat'
import { formatPrice } from '../utils'
import { TokenIcon } from '../TokenIcon'
import { GasCostValues, RouteFeeCost } from '../hooks'
import styles from './PaymentSelector.module.css'

Expand Down Expand Up @@ -145,17 +146,9 @@ const PaymentSelector = (props: Props) => {
</div>
<div className={styles.fromAmountContainer}>
<div className={styles.fromAmountTokenContainer}>
<Popup
content={selectedToken.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={selectedToken.logoURI}
alt={selectedToken.name}
/>
}
<TokenIcon
src={selectedToken.logoURI}
name={selectedToken.name}
/>
{selectedToken.symbol === 'MANA' ? (
ethers.utils.formatEther(price)
Expand Down Expand Up @@ -208,33 +201,17 @@ const PaymentSelector = (props: Props) => {
<div className={styles.fromAmountContainer}>
{gasCost && gasCost.token ? (
<div className={styles.fromAmountTokenContainer}>
<Popup
content={gasCost.token.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={gasCost.token.logoURI}
alt={gasCost.token.name}
/>
}
<TokenIcon
src={gasCost.token.logoURI}
name={gasCost.token.name}
/>
{formatPrice(gasCost.total, gasCost.token)}
</div>
) : !!route && routeFeeCost ? (
<div className={styles.fromAmountTokenContainer}>
<Popup
content={route.route.estimate.gasCosts[0].token.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={route.route.estimate.gasCosts[0].token.logoURI}
alt={route.route.estimate.gasCosts[0].token.name}
/>
}
<TokenIcon
src={route.route.estimate.gasCosts[0].token.logoURI}
name={route.route.estimate.gasCosts[0].token.name}
/>
{routeFeeCost.totalCost}
</div>
Expand Down
55 changes: 13 additions & 42 deletions webapp/src/components/Modals/BuyWithCryptoModal/PurchaseTotal/PurchaseTotal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import classNames from 'classnames'
import { ethers } from 'ethers'
import { Popup } from 'decentraland-ui/dist/components/Popup/Popup'
import { t } from 'decentraland-dapps/dist/modules/translation'
import { Route, Token } from 'decentraland-transactions/crossChain'
import { isPriceTooLow } from '../../../BuyPage/utils'
import { ManaToFiat } from '../../../ManaToFiat'
import { formatPrice } from '../utils'
import { GasCostValues, RouteFeeCost } from '../hooks'
import { TokenIcon } from '../TokenIcon'
import styles from './PurchaseTotal.module.css'

export const FREE_TX_COVERED_TEST_ID = 'free-tx-label'
Expand Down Expand Up @@ -69,34 +69,18 @@ const PurchaseTotal = (props: Props) => {
{shouldUseCrossChainProvider ? (
!!route && routeFeeCost ? (
<>
<Popup
content={selectedToken.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={selectedToken.logoURI}
alt={selectedToken.name}
/>
}
<TokenIcon
src={selectedToken.logoURI}
name={selectedToken.name}
/>
{routeFeeCost?.token.symbol !== selectedToken.symbol &&
fromAmount ? (
<>
{formatPrice(fromAmount, selectedToken)}
<span> + </span>
<Popup
content={routeFeeCost.token.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={routeFeeCost.token.logoURI}
alt={routeFeeCost.token.name}
/>
}
<TokenIcon
src={routeFeeCost.token.logoURI}
name={routeFeeCost.token.name}
/>
{routeFeeCost.totalCost}
</>
Expand All @@ -114,30 +98,17 @@ const PurchaseTotal = (props: Props) => {
<>
{!!gasCost && gasCost.token ? (
<>
<Popup
content={gasCost.token.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img
src={gasCost.token.logoURI}
alt={gasCost.token.name}
/>
}
<TokenIcon
src={gasCost.token.logoURI}
name={gasCost.token.name}
/>
{formatPrice(Number(gasCost.total), gasCost.token)}
<span> + </span>
</>
) : null}
<Popup
content={selectedToken.name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img src={selectedToken.logoURI} alt={selectedToken.name} />
}
<TokenIcon
src={selectedToken.logoURI}
name={selectedToken.name}
/>
{ethers.utils.formatEther(price)}
</>
Expand Down
19 changes: 19 additions & 0 deletions webapp/src/components/Modals/BuyWithCryptoModal/TokenIcon/TokenIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Popup } from 'decentraland-ui/dist/components/Popup/Popup'
import noTokenImage from '../../../../images/no-token.png'
import { Props } from './TokenIcon.types'

export const TokenIcon = (props: Props) => {
const { src, name } = props

return (
<Popup
content={name}
style={{ zIndex: 3001 }}
on="hover"
position="top center"
trigger={
<img height={24} width={24} src={src ?? noTokenImage} alt={name} />
}
/>
)
}
4 changes: 4 additions & 0 deletions webapp/src/components/Modals/BuyWithCryptoModal/TokenIcon/TokenIcon.types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export type Props = {
src?: string
name: string
}
2 changes: 2 additions & 0 deletions webapp/src/components/Modals/BuyWithCryptoModal/TokenIcon/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './TokenIcon'
export * from './TokenIcon.types'
Binary file added webapp/src/images/no-token.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ee4acfb

Please sign in to comment.