Skip to content

Commit

Permalink
feat: push latest translations
Browse files Browse the repository at this point in the history
  • Loading branch information
@juanmahidalgo
juanmahidalgo committed Nov 23, 2023
1 parent 1c60243 commit 97cca85
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 118 deletions.
113 changes: 37 additions & 76 deletions webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
justify-content: center;
}

.buyWithCryptoModal .infoIconPopUp{
z-index: 9999;
}

.buyWithCryptoModal:global(.ui.tiny.modal) {
min-height: 730px;
min-height: 640px;
display: flex !important;
flex-direction: column;
}
Expand Down Expand Up @@ -74,94 +78,41 @@
font-size: 15px;
}

.dropdownContainer {
.buyWithCryptoModal .dropdownContainer {
display: flex;
justify-content: space-between;
color: var(--text);
}

.dropdownContainer :global(span) {
.buyWithCryptoModal .dropdownContainer :global(span) {
font-size: 14px;
}

.balanceContainer {
.buyWithCryptoModal .balanceContainer {
display: flex;
justify-content: flex-end;
font-size: 14px;
color: var(--clear-divider);
margin-left: auto;
}

.dropdown {
background: #43404a;
color: var(--background);
border-radius: 20px;
padding: 6px;
width: 190px;
}

.dropdown:global(.ui.dropdown .menu .item) {
display: flex;
align-items: center;
}

.dropdown:global(.ui.dropdown > .dropdown.icon) {
color: white;
}

.dropdown:global(.ui.dropdown > .text) {
color: var(--black);
}

.dropdown :global(.ui.avatar.image) {
width: 25px;
height: 25px;
margin-top: 0px;
}

.dropdown:global(.ui.dropdown > .text > .image) {
width: 25px;
height: 25px;
margin-top: 0px;
}

.buyWithCryptoModal .routeUnavailable,
.insufficientFunds {
color: red;
font-size: 14px;
}

.dropdown:global(.ui.dropdown > .dropdown.icon) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown > .dropdown.icon) {
margin-left: auto;
align-self: center;
margin-right: -6px;
}

.dropdown:global(.ui.dropdown) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown) {
display: flex;
margin-top: 2px;
}

.token_dropdown:global(.ui.dropdown) {
width: 140px;
}

.token_dropdown:global(.ui.search.dropdown.active > input.search) {
padding-left: 40px;
height: 100%;
}

.token_dropdown:global(.ui.search.dropdown > input.search) {
padding-left: 40px;
height: 100%;
}

.token_dropdown:global(.ui.dropdown.scrolling .menu) {
width: 100% !important; /* semantic ui has auto!important; */
}

/* ///// */

.buyWithCryptoModal .feeCovered {
font-size: 12px;
font-weight: 400;
Expand Down Expand Up @@ -202,13 +153,24 @@
margin-top: 16px;
}

.buyWithCryptoModal .feeCostContainer {
display: flex;
align-items: center;
}

.buyWithCryptoModal .costContainer .itemCost img,
.buyWithCryptoModal .totalContainer img {
width: 24px;
height: 24px;
margin-right: 6px;
}

.buyWithCryptoModal .costContainer .itemCost img.informationTooltip {
width: 14px;
height: 14px;
margin-left: 6px;
}

.buyWithCryptoModal .costContainer .itemCost .fromAmountContainer {
display: flex;
align-items: center;
Expand Down Expand Up @@ -257,8 +219,6 @@
font-size: 14px;
}

/* ///// */

.buyWithCryptoModal .durationAndExchangeContainer {
border: 1px solid #716b7c;
margin-top: 24px;
Expand Down Expand Up @@ -374,7 +334,7 @@
.tokenDropdownContainer {
display: flex;
flex-direction: column;
margin-left: 24px;
margin-left: 16px;
}

.buyWithCryptoModal:global(.ui.modal > .actions) {
Expand Down Expand Up @@ -464,46 +424,46 @@
flex-direction: column;
}

.dropdownContainer :global(span) {
.buyWithCryptoModal .dropdownContainer :global(span) {
font-size: 14px;
}

.dropdown {
.buyWithCryptoModal .dropdown {
background: #43404a;
color: var(--white);
border-radius: 8px;
padding: 15px;
width: 190px;
}

.chainDropdown {
.buyWithCryptoModal .chainDropdown {
width: 167px;
}

.dropdown:global(.ui.dropdown .menu .item) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown .menu .item) {
display: flex;
align-items: center;
}

.dropdown:global(.ui.dropdown .menu .item) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown .menu .item) {
display: flex;
align-items: center;
}

.dropdown:global(.ui.dropdown > .text) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown > .text) {
color: var(--black);
font-size: 13px;
line-height: 18px;
font-weight: bold;
}

.dropdown :global(.ui.avatar.image) {
.buyWithCryptoModal .dropdown :global(.ui.avatar.image) {
width: 25px;
height: 25px;
margin-top: -3px;
}

.dropdown:global(.ui.dropdown > .text > .image) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown > .text > .image) {
width: 25px;
height: 25px;
margin-top: -3px;
Expand All @@ -515,26 +475,27 @@
font-size: 14px;
}

.dropdown:global(.ui.dropdown) {
.buyWithCryptoModal .dropdown:global(.ui.dropdown) {
display: flex;
margin-top: 8px;
}

.tokenDropdown:global(.ui.search.dropdown.active > input.search) {
.buyWithCryptoModal
.tokenDropdown:global(.ui.search.dropdown.active > input.search) {
padding-left: 40px;
height: 100%;
}

.tokenDropdown:global(.ui.search.dropdown > input.search) {
.buyWithCryptoModal .tokenDropdown:global(.ui.search.dropdown > input.search) {
padding-left: 40px;
height: 100%;
}

.tokenDropdown:global(.ui.dropdown.scrolling .menu) {
.buyWithCryptoModal .tokenDropdown:global(.ui.dropdown.scrolling .menu) {
width: 100% !important; /* semantic ui has auto!important; */
}

.balanceSkeleton {
.buyWithCryptoModal .balanceSkeleton {
flex-shrink: 0;
background: var(--dcl-pale-black, #43404a);
margin-right: 16px;
Expand All @@ -547,6 +508,6 @@
margin-left: 6px;
}

.balance {
.buyWithCryptoModal .balance {
margin-left: 6px;
}
58 changes: 50 additions & 8 deletions webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
ChainButton,
withAuthorizedAction
} from 'decentraland-dapps/dist/containers'
import { Button, Icon, Loader, ModalNavigation } from 'decentraland-ui'
import { Button, Icon, Loader, ModalNavigation, Popup } from 'decentraland-ui'
import { ContractName, getContract } from 'decentraland-transactions'
import Modal from 'decentraland-dapps/dist/containers/Modal'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
Expand All @@ -18,6 +18,7 @@ import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization
import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
import { Contract as DCLContract } from '../../../modules/vendor/services'
import { isNFT, isWearableOrEmote } from '../../../modules/asset/utils'
import infoIcon from '../../../images/infoIcon.png'
import { getContractNames } from '../../../modules/vendor'
import * as events from '../../../utils/events'
import { Mana } from '../../Mana'
Expand Down Expand Up @@ -86,6 +87,7 @@ 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>()
Expand Down Expand Up @@ -222,6 +224,22 @@ export const BuyWithCryptoModal = (props: Props) => {
}
const supportedTokens = crossChainProvider.getSupportedTokens()
const supportedChains = crossChainProvider.getSupportedChains()
// if for any reasons Polygon is not in the supported chains, add it manually to support our main flow (buying Polygon NFTs with Polygon MANA)
if (
!supportedChains.find(c => +c.chainId === ChainId.MATIC_MAINNET)
) {
supportedChains.push({
chainId: ChainId.MATIC_MAINNET.toString(),
networkName: 'Polygon',
nativeCurrency: {
name: 'MATIC',
symbol: 'MATIC',
decimals: 18,
icon:
'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/matic.svg'
}
} as ChainData)
}
setProviderChains(
supportedChains.filter(c =>
CROSS_CHAIN_SUPPORTED_CHAINS.includes(+c.chainId)
Expand Down Expand Up @@ -660,10 +678,11 @@ export const BuyWithCryptoModal = (props: Props) => {
}, [
isFetchingBalance,
isLoading,
isLoadingAuthorization,
asset.chainId,
isLoadingAuthorization,
onBuyWithCard,
onGetMana
onGetMana,
onClose
])

const renderBuyNowButton = useCallback(() => {
Expand Down Expand Up @@ -736,14 +755,19 @@ export const BuyWithCryptoModal = (props: Props) => {
// can't buy Get Mana and Buy With Card buttons
return renderGetMANAButton()
}
} else if (!route && routeFailed) {
// can't buy Get Mana and Buy With Card buttons
return renderGetMANAButton()
}
}, [
price,
wallet,
selectedToken,
canBuyItem,
route,
asset,
price,
routeFailed,
selectedChain,
asset.network,
renderBuyNowButton,
renderSwitchNetworkButton,
renderGetMANAButton
Expand Down Expand Up @@ -986,7 +1010,25 @@ export const BuyWithCryptoModal = (props: Props) => {

{shouldUseCrossChainProvider ? (
<div className={styles.itemCost}>
{t('buy_with_crypto_modal.fee_cost')}
<div className={styles.feeCostContainer}>
{t('buy_with_crypto_modal.fee_cost')}
<Popup
content={t(
'best_buying_option.minting.minting_popup'
)}
style={{ zIndex: 3001 }}
position="top center"
className={styles.infoIconPopUp}
trigger={
<img
src={infoIcon}
alt="info"
className={styles.informationTooltip}
/>
}
on="hover"
/>
</div>
<div className={styles.fromAmountContainer}>
{!!route && routeFeeCost ? (
<div
Expand Down Expand Up @@ -1041,9 +1083,9 @@ export const BuyWithCryptoModal = (props: Props) => {
data-testid={FREE_TX_CONVERED_TEST_ID}
>
{t('buy_with_crypto_modal.transaction_fee_covered', {
free: (
covered: (
<span className={styles.feeCoveredFree}>
{t('buy_with_crypto_modal.free')}
{t('buy_with_crypto_modal.covered_by_dao')}
</span>
)
})}
Expand Down
7 changes: 2 additions & 5 deletions ...mponents/Modals/BuyWithCryptoModal/ChainAndTokenSelector/ChainAndTokenSelector.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@
display: flex;
flex-direction: column;
max-height: 550px;
overflow-y: scroll;
overflow-y: auto;
margin-top: 8px;
}

.chainAndTokenSelector .listContainer::-webkit-scrollbar {
display: none;
padding-bottom: 16px;
}

.chainAndTokenSelector .searchContainer {
Expand Down
Loading

0 comments on commit 97cca85

Please sign in to comment.