feat: close modal when opening onGetMana modal and fix loader

decentraland · Nov 22, 2023 · 1c60243 · 1c60243
1 parent dda8743
commit 1c60243
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
@@ -395,10 +395,15 @@
 }
 
 .buyWithCryptoModal .mainLoader:global(.ui.loader) {
-  position: relative;
+  align-self: center;
   height: 220px;
 }
 
+.buyWithCryptoModal .mainLoader:global(.ui.loader::before),
+.buyWithCryptoModal .mainLoader:global(.ui.loader::after) {
+  top: 50%;
+}
+
 .buyWithCryptoModal .subtitle {
   font-size: 15px;
 }

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
@@ -636,7 +636,10 @@ export const BuyWithCryptoModal = (props: Props) => {
           primary
           data-testid={GET_MANA_BUTTON_TEST_ID}
           loading={isFetchingBalance || isLoading}
-          onClick={() => onGetMana()}
+          onClick={() => {
+            onGetMana()
+            onClose()
+          }}
         >
           {t('buy_with_crypto_modal.get_mana')}
         </Button>
@@ -882,7 +885,7 @@ export const BuyWithCryptoModal = (props: Props) => {
               </div>
 
               {!providerTokens.length || !selectedToken ? (
-                <Loader active className={styles.mainLoader} />
+                <Loader inline active className={styles.mainLoader} />
               ) : (
                 <div
                   className={styles.payWithContainer}