fix: change ethereum chain name and fix some styles (#509)

decentraland · Feb 20, 2024 · 59ce589 · 59ce589
1 parent 7ab23c7
commit 59ce589
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/components/ChainSelector/ChainSelector.css b/src/components/ChainSelector/ChainSelector.css
@@ -1,5 +1,5 @@
 .dui-chain-icon {
-  width: 28px;
+  min-width: 28px;
   height: 28px;
 }
 
@@ -62,6 +62,7 @@
   border: none;
   color: white;
   width: 100%;
+  text-wrap: nowrap;
 }
 
 .dui-chain-selector__element:hover {
@@ -83,33 +84,36 @@
 .selector__button-connected {
   font-size: 14px;
   margin-left: auto;
+  text-wrap: wrap;
 }
 
 .selector__button-connected-circle {
-  width: 8px;
+  min-width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--rare);
   margin-left: 8px;
 }
 
 .selector__button-confirm-circle {
-  width: 8px;
+  min-width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--unique);
   margin-left: 8px;
 }
 
 @media screen and (max-width: 991px) {
-  .dui-navbar .ui.button.dui-chain-selector__button {
+  .ui.button.dui-chain-selector__button {
     min-width: 50px;
   }
 
   .ui.button.dui-chain-selector__button .dui-chain-icon {
     margin-right: 0;
   }
+}
 
+@media screen and (max-width: 768px) {
   .dui-chain-selector__modal.ui.modal .content {
     margin: 0;
   }

diff --git a/src/components/ChainSelector/ChainSelector.tsx b/src/components/ChainSelector/ChainSelector.tsx
@@ -58,7 +58,11 @@ export const ChainSelector = (props: ChainSelectorProps) => {
             ChainNameIconMap[selectedChain]
           )}
         />
-        {!isMobileOrTablet ? getChainName(selectedChain) : null}
+        {!isMobileOrTablet
+          ? selectedChain === ChainId.ETHEREUM_MAINNET
+            ? 'Ethereum'
+            : getChainName(selectedChain)
+          : null}
       </Button>
       <Modal
         open={showModal}
@@ -69,7 +73,10 @@ export const ChainSelector = (props: ChainSelectorProps) => {
         <ModalContent>
           <ul className="dui-chain-selector__list">
             {chains.map((chain) => {
-              const chainName = getChainName(chain)
+              const chainName =
+                chain === ChainId.ETHEREUM_MAINNET
+                  ? 'Ethereum'
+                  : getChainName(chain)
               return (
                 <button
                   key={chain}