Fixes WalletModal layout

gear-foundation · Aug 1, 2023 · c649e68 · c649e68
1 parent dacb3ba
commit c649e68
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/frontend/src/features/Wallet/components/WalletInfo/WalletInfo.module.scss b/frontend/src/features/Wallet/components/WalletInfo/WalletInfo.module.scss
@@ -14,6 +14,8 @@
 
   &-coin-image {
       margin-right: 10px;
+      width: 20px;
+      height: 20px;
   }
 
   &-value {

diff --git a/frontend/src/features/Wallet/components/WalletModal/WalletModal.module.scss b/frontend/src/features/Wallet/components/WalletModal/WalletModal.module.scss
@@ -1,7 +1,10 @@
 @use '~styles/variables' as *;
 @use '~styles/mixins' as *;
 
-.list {  
+.list {
+    max-height: 430px;
+    overflow-y: auto;
+
     .wallet-button {
       width: 100%;
       min-height: 48px;
@@ -45,6 +48,16 @@
   .account {
     display: flex;
     align-items: center;
+    margin: 10px 0;
+
+    &-identicon {
+      display: inline;
+    }
+
+    &-name {
+      max-width: 200px;
+      white-space: nowrap;
+    }
 
     &-button {
       width: 100%;
@@ -60,9 +73,19 @@
       color: theme-var($text-primary);
       background-color: theme-var($background-primary);
       transition: all 0.3s;
+      overflow-y: auto;
       border: none;
       outline: none;
       cursor: pointer;
+
+      &-content {
+        width: 100%;
+        padding-left: 10px;
+        gap: 10px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
 
       &.active {
         background: theme-var($green-special);
@@ -72,6 +95,7 @@
         background-color: theme-var($background-primary);
       }
     }
+
   }
 
   .footer {

diff --git a/frontend/src/features/Wallet/components/WalletModal/WalletModal.tsx b/frontend/src/features/Wallet/components/WalletModal/WalletModal.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import Identicon from '@polkadot/react-identicon';
 import { decodeAddress } from '@gear-js/api';
-import { useAccount } from '@gear-js/react-hooks';
+import { useAccount, useAlert } from '@gear-js/react-hooks';
 import { Modal } from 'components';
 import { cx, copyToClipboard } from '@/utils';
 import copyToClipboardSVG from '@/assets/icons/binary-code.svg';
@@ -19,6 +19,7 @@ import { useAuth } from '@/features/Auth/hooks';
 
 function WalletModal({ onClose }: WalletModalProps) {
   const { extensions, account } = useAccount();
+  const alert = useAlert();
   const { wallet, walletAccounts, setWalletId, resetWalletId, getWalletAccounts, saveWallet, removeWallet } =
     useWallet();
   const navigate = useNavigate();
@@ -62,7 +63,7 @@ function WalletModal({ onClose }: WalletModalProps) {
       const handleCopyClick = () => {
         const decodedAddress = decodeAddress(address);
 
-        copyToClipboard(decodedAddress);
+        copyToClipboard(decodedAddress).then(() => alert.success('copied'));
         onClose();
       };
 
@@ -73,8 +74,10 @@ function WalletModal({ onClose }: WalletModalProps) {
             className={cx(styles['account-button'], isActive ? styles.active : '')}
             onClick={handleClick}
             disabled={isActive}>
-            <Identicon value={address} size={21} theme="polkadot" />
-            <span>{meta.name}</span>
+            <div className={cx(styles['account-button-content'])}>
+              <Identicon value={address} size={21} theme="polkadot" className={cx(styles['account-identicon'])} />
+              <span className={cx(styles['account-name'])}>{meta.name}</span>
+            </div>
           </button>
           <Button variant="icon" label="" icon={copyToClipboardSVG} onClick={handleCopyClick} />
         </li>