Hide WalletInfo dialog when user clicks on account ID, copies EVM add…

…ress, or selects an account. Signed-off-by: Simon Viénot <[email protected]>
hashgraph · Nov 29, 2023 · ea07ba8 · ea07ba8
1 parent c502aec
commit ea07ba8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Copyable.vue b/src/components/Copyable.vue
@@ -54,10 +54,12 @@ export default defineComponent({
       default: true
     },
   },
-  setup(props) {
+  emits: ['copyMade'],
+  setup(props, context) {
     const copyToClipboard = (): void => {
       if (props.contentToCopy?.length) {
         navigator.clipboard.writeText(props.contentToCopy)
+          context.emit('copyMade')
       }
     }
     return {

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
@@ -148,7 +148,7 @@
         <WalletInfo 
           :connected="connected" 
           :accountIds="accountIds"
-          :showWalletInfo="showWalletInfo" 
+          v-model:show-wallet-info="showWalletInfo"
           :accountId="accountId || undefined" 
           :walletIconURL="walletIconURL || undefined" 
           @wallet-disconnect="disconnectFromWallet"

diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
@@ -33,7 +33,7 @@
             </figure>
 
             <!-- accountID-checksum -->
-            <div class="is-flex is-align-items-baseline ml-3" style="font-size: 1.35rem;">
+            <div @click="hideWalletInfo" class="is-flex is-align-items-baseline ml-3" style="font-size: 1.35rem;">
                 <AccountLink :account-id="accountId"/>
                 <span class="has-text-grey h-is-smaller">
                     -{{ accountChecksum }}
@@ -45,7 +45,7 @@
           <div class="p-2" style="border: 0.5px solid white;">
             <p class="has-text-grey h-is-smaller">EVM ADDRESS</p>
 
-            <Copyable :content-to-copy="accountEthereumAddress ?? ''">
+            <Copyable @copy-made="hideWalletInfo" :content-to-copy="accountEthereumAddress ?? ''">
               <template v-slot:content>
                 <div class="is-flex is-align-items-center" style="gap: 0.5rem">
                   <p v-if="accountEthereumAddress">
@@ -136,7 +136,7 @@ export default defineComponent({
             default: undefined,
         },
     },
-    emit: ['walletDisconnect', 'changeAccount'],
+    emit: ['walletDisconnect', 'changeAccount', 'update:showWalletInfo'],
 
     setup(props, ctx) {
         const isSmallScreen = inject('isSmallScreen', true)
@@ -185,6 +185,7 @@ export default defineComponent({
         const changeAccount = (accountId: string) => {
           ctx.emit('changeAccount', accountId)
           showAccountIdsModal.value = false;
+          hideWalletInfo()
         }
 
         // 
@@ -195,6 +196,10 @@ export default defineComponent({
           showAccountIdsModal.value = false;
         }
 
+        const hideWalletInfo = () => {
+            ctx.emit('update:showWalletInfo', false)
+        }
+
         return {
             accountRoute,
             isTouchDevice,
@@ -205,6 +210,7 @@ export default defineComponent({
             chosenAccountId,
             showAccountIdsModal,
             disconnectFromWallet,
+            hideWalletInfo,
             accountEthereumAddress,
             tbarBalance: balanceAnalyzer.hbarBalance,
             accountChecksum: accountLocParser.accountChecksum,