Merge pull request #226 from P4-Games/feature/224-wallet-and-balance

Feature/224 wallet and balance
P4-Games · Dec 4, 2023 · d0af0cd · d0af0cd
2 parents f0d5a64 + 1b7d939
commit d0af0cd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 33 deletions.
diff --git a/src/components/Navbar/AccountInfo.jsx b/src/components/Navbar/AccountInfo.jsx
@@ -4,7 +4,8 @@ import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 import Swal from 'sweetalert2'
 import { HiOutlineClipboardDocument } from 'react-icons/hi2'
-import { IoOpenOutline } from 'react-icons/io5'
+import { FaExternalLinkAlt as FaExternalLinkSquareAlt } from 'react-icons/fa'
+import { GoLinkExternal } from 'react-icons/go'
 import { AiOutlineSend } from 'react-icons/ai'
 import { MdOutlinePublishedWithChanges } from 'react-icons/md'
 import { useWeb3Context, useLayoutContext } from '../../hooks'
@@ -166,11 +167,11 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
   )
 
   const NetworkComponent = () => (
-    <div className='account_info__icon__and__link'>
+    <div className='account__info__icon__and__link'>
       <div>
         <p
-          className={`account_info__account__network ${
-            !isValidNetwork() ? 'account_info__invalid__network' : ''
+          className={`account__info__account__network ${
+            !isValidNetwork() ? 'account__info__invalid__network' : ''
           }`}
         >
           {isValidNetwork() ? NETWORK.chainName : t('account_invalid_network')}
@@ -188,41 +189,41 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
                 NETWORK.chainExplorerUrl
               )
             }}
-            className='account_info__icon'
+            className='account__info__icon'
           />
         </div>
       )}
     </div>
   )
 
   const WalletComponent = () => (
-    <div className='account_info__icon__and__link'>
-      <div className='account_info__link__container'>
+    <div className='account__info__icon__and__link'>
+      <div className='account__info__link__container'>
         {copiedTextVisible && (
-          <span className='account_info__copied__text' style={{ top: copiedTextPosition }}>
+          <span className='account__info__copied__text' style={{ top: copiedTextPosition }}>
             {t('account_text_copied')}
           </span>
         )}
-        <p className='account_info__account__link' onClick={handleCopy}>
+        <p className='account__info__account__link' onClick={handleCopy}>
           {getAccountAddressText()}
         </p>
       </div>
-      <div className='account_info__icon__container'>
-        <HiOutlineClipboardDocument onClick={handleCopy} className='account_info__icon' />
+      <div className='account__info__icon__container'>
+        <HiOutlineClipboardDocument onClick={handleCopy} className='account__info__icon' />
         <Link
           href={`${NETWORK.chainExplorerUrl}/address/${walletAddress}`}
           target='_blank'
           rel='noreferrer'
-          className='account_info__account__link'
+          className='account__info__account__link'
         >
-          <IoOpenOutline className='account_info__icon' />
+          <GoLinkExternal className='account__info__icon__link' />
         </Link>
       </div>
     </div>
   )
 
   const BalanceComponent = () => (
-    <div className='account_info__icon__and__link'>
+    <div className='account__info__icon__and__link'>
       <div>
         <p>{`${walletBalance} ${tokenName}`}</p>
       </div>
@@ -231,15 +232,15 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
           onClick={() => {
             handleSendTokenClick()
           }}
-          className='account_info__icon'
+          className='account__info__icon'
         />
         <Link
           href={`${NETWORK.chainExplorerUrl}/token/${CONTRACTS.daiAddress}?a=${walletAddress}`}
           target='_blank'
           rel='noreferrer'
-          className='account_info__account__link'
+          className='account__info__account__link'
         >
-          <IoOpenOutline className='account_info__icon' />
+          <GoLinkExternal className='account__info__icon__link' />
         </Link>
       </div>
     </div>

diff --git a/src/styles/_navbar-account.scss b/src/styles/_navbar-account.scss
@@ -2,7 +2,8 @@
   position: absolute;
   top: calc(100% + 0px);
   right: 10px;
-  background-color: #ffce00;
+  background-color: #cfa763;
+  filter: saturate(90%) brightness(120%);
   border: 1px solid #ccc;
   padding: 10px;
   display: none;
@@ -45,37 +46,37 @@
 }
 
 .account__info__connect__btn {
-  background-color: #68b346;
+  background-color: rgb(0, 94, 163);
 }
-.account_info__account__link,
-.account_info__account__link:hover,
-.account_info__account__link:visited {
+.account__info__account__link,
+.account__info__account__link:hover,
+.account__info__account__link:visited {
   transition: color 0.3s;
   text-decoration: none;
   line-height: 20px;
 }
 
 .account__info__disconnect__btn:hover,
 .account__info__connect__btn:hover,
-.account_info__account__link:hover {
+.account__info__account__link:hover {
   color: #fff;
 }
 
-.account_info__network__container {
+.account__info__network__container {
   margin-bottom: 15px;
 }
 
-.account_info__account__network {
+.account__info__account__network {
   display: flex;
   justify-content: center;
   font-size: 0.7em;
 }
 
-.account_info__invalid__network {
+.account__info__invalid__network {
   color: #f60008;
 }
 
-.account_info__copied__text {
+.account__info__copied__text {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -99,35 +100,46 @@
   }
 }
 
-.account_info__icon__and__link {
+.account__info__icon__and__link {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.account_info__icon {
+account__info__icon__link,
+.account__info__icon {
   vertical-align: middle;
   margin-left: 5px;
+  margin-right: 5px;
   font-size: 17px;
 }
 
-.account_info__icon:hover {
+.account__info__icon__link {
+  fill: #000;
+}
+
+.account__info__icon__link:hover {
+  fill: #fff;
+}
+
+account__info__icon__link:hover,
+.account__info__icon:hover {
   color: #fff;
 }
 
-.account_info__link__container,
+.account__info__link__container,
 .account__info__icon__container {
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
-.account_info__link__container {
+.account__info__link__container {
   justify-content: space-between;
   margin-right: 10px;
 }
 
-.account_info__icon__container {
+.account__info__icon__container {
   justify-content: flex-end;
   margin-left: auto;
 }