Fix position airdrop tooltip (#763)

* fix tooltip airdrop position * refactor trans key with airdrop amount
massalabs · Jul 23, 2024 · e16f870 · e16f870
1 parent 7cf8270
commit e16f870
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/components/ConnectWalletPopup/MassaWallets/MASBalance.tsx b/src/components/ConnectWalletPopup/MassaWallets/MASBalance.tsx
@@ -1,7 +1,12 @@
 import { useEffect, useState } from 'react';
 
 import { fromMAS } from '@massalabs/massa-web3';
-import { FetchingLine, Tag, formatAmount } from '@massalabs/react-ui-kit';
+import {
+  FetchingLine,
+  Tag,
+  Tooltip,
+  formatAmount,
+} from '@massalabs/react-ui-kit';
 import { IAccountBalanceResponse } from '@massalabs/wallet-provider';
 
 import { FiHelpCircle } from 'react-icons/fi';
@@ -48,28 +53,23 @@ export function MASBalance() {
 }
 
 export function CustomInfoTag() {
-  const [showTooltip, setShowTooltip] = useState(false);
   return (
-    <div
-      onMouseEnter={() => setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-      className="flex hover:cursor-pointer"
+    <Tooltip
+      body={
+        <div>
+          {Intl.t('connect-wallet.empty-balance-description', {
+            amount: AIRDROP_AMOUNT,
+          })}
+        </div>
+      }
     >
       <Tag type="info" customClass="flex items-center gap-2">
         {Intl.t('connect-wallet.empty-balance', {
           amount: AIRDROP_AMOUNT,
         })}
-        {showTooltip && (
-          <div
-            className={`w-96 left-[480px] top-[515px] z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2`}
-          >
-            {Intl.t('connect-wallet.empty-balance-description', {
-              amount: AIRDROP_AMOUNT,
-            })}
-          </div>
-        )}
+
         <FiHelpCircle className="text-s-info-1" />
       </Tag>
-    </div>
+    </Tooltip>
   );
 }
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
@@ -122,7 +122,7 @@
         "speed-title": "Can I speed up an Ethereum transaction on the Massa Bridge?",
         "speed-desc": " If Ethereum network load implies long confirmation times, increase the transaction fee in your Metamask wallet for faster processing.",
         "what-token-title": "What token do I need to use to pay for transaction fees on the Massa network?",
-        "what-token-desc": "Massa network transactions require Massa’s native asset, the MAS token. When bridging to a new Massa address, you’ll receive 0.3 MAS for free, with 0.001 allocated for storing your address on the ledger and the rest for a few future transaction fees. ",
+        "what-token-desc": "Massa network transactions require Massa’s native asset, the MAS token. When bridging to a new Massa address, you’ll receive {amount} MAS for free, with 0.001 allocated for storing your address on the ledger and the rest for a few future transaction fees. ",
         "what-token-desc-1": "Since June 2024, Massa nodes require a very small minimal transaction fees of 0.01 MAS.",
         "zero-tx-fees-title": "Why are there low transaction fees on the Massa network?",
         "zero-tx-fees-desc": "As Massa is a new network, chain activity is low enough to have very low transaction fees. As chain activity increases, transaction fees may also increase.",