Search on enter. Dockerfile

Author: paulmillr

.dockerignore

@@ -0,0 +1,38 @@
+.github
+.git
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+.vscode
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+*.patch
+
+/patches_history
+build_*
+releases.json
+docker-compose-tmp.yml

.gitignore

@@ -31,3 +31,7 @@ coverage
 *.patch
 
 /patches_history
+# DAppNodeSDK release directories
+build_*
+releases.json
+docker-compose-tmp.yml

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:22.17.0-alpine3.21
+
+WORKDIR /app
+
+RUN apk add --no-cache python3
+
+COPY package*.json .
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+CMD ["sh", "-c", "cd dist && python3 -m http.server 80"]

src/assets/main.css

@@ -197,7 +197,7 @@
   content: '🗑️';
 }
 .bi-copy:before {
-  content: '©';
+  content: '📋';
 }
 .bi-file-earmark-text:before {
   content: '📃';

src/components/Search.vue

@@ -80,6 +80,7 @@ const clearWarning = () => {
       class="text-input"
       type="text"
       v-model.trim="search"
+      @keyup.enter="handleSearch"
       placeholder="Search addresses, transactions, blocks"
     />
     <div class="dropdown">

src/components/address-view/FavoritesList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FavoriteAddress } from '@/types';
-import { fromWeiToEth, shortenFavAddr } from '@/utils/utils';
+import { fromWeiToEth, shortenFavAddr, handleClickCopyIcon } from '@/utils/utils';
 
 const emit = defineEmits(['deleteFavorite']);
 
@@ -11,17 +11,6 @@ defineProps<{
 const handleDeleteFavorite = (address: string) => {
   emit('deleteFavorite', address);
 };
-
-const handleCopy = (event: Event, text: string) => {
-  const target = event.target as HTMLElement;
-  target.classList.remove('bi-copy');
-  target.classList.add('bi-check2');
-  navigator.clipboard.writeText(text);
-  setTimeout(() => {
-    target.classList.add('bi-copy');
-    target.classList.remove('bi-check2');
-  }, 2000);
-};
 </script>
 
 <template>
@@ -32,7 +21,7 @@ const handleCopy = (event: Event, text: string) => {
           {{ shortenFavAddr(fav.address) }}
         </RouterLink>
         <i
-          @click="(e: Event) => handleCopy(e, fav.address)"
+          @click="(e: Event) => handleClickCopyIcon(e, fav.address)"
           class="txn-hash-copy-icon bi bi-copy"
         ></i>
         <!-- <span v-if="fav.type === 'contract'">(contract)</span> -->
@@ -99,6 +88,7 @@ const handleCopy = (event: Event, text: string) => {
 .txn-hash-copy-icon {
   font-size: 16px;
   cursor: pointer;
+  font-style: normal;
 }
 
 .balance-trash {
@@ -135,6 +125,10 @@ const handleCopy = (event: Event, text: string) => {
   color: var(--red-darker);
 }
 
+.delete-icon i {
+  font-style: normal;
+}
+
 .delete-btn {
   cursor: pointer;
   color: var(--btn-red);

src/components/address-view/TransactionsListItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue';
-import { shortenTx } from '@/utils/utils';
+import { shortenTx, handleClickCopyIcon } from '@/utils/utils';
 import type { TransactionListItem } from '@/types';
 import TransactionListItemFromTo from '@/components/address-view/TransactionListItemFromTo.vue';
 
@@ -18,17 +18,6 @@ const isFirstTxnValue = computed(() => {
 watchEffect(() => {
   txns.value = props.transactions;
 });
-
-const handleCopy = (event: Event, text: string) => {
-  const target = event.target as HTMLElement;
-  target.classList.remove('bi-copy');
-  target.classList.add('bi-check2');
-  navigator.clipboard.writeText(text);
-  setTimeout(() => {
-    target.classList.add('bi-copy');
-    target.classList.remove('bi-check2');
-  }, 2000);
-};
 </script>
 
 <template>
@@ -46,7 +35,7 @@ const handleCopy = (event: Event, text: string) => {
           {{ shortenTx(txns[0].hash) }}
         </RouterLink>
         <i
-          @click="(e: Event) => handleCopy(e, txns[0].hash)"
+          @click="(e: Event) => handleClickCopyIcon(e, txns[0].hash)"
           class="txn-hash-copy-icon bi bi-copy"
         ></i>
       </span>
@@ -139,6 +128,7 @@ const handleCopy = (event: Event, text: string) => {
 .txn-hash-copy-icon {
   font-size: 16px;
   cursor: pointer;
+  font-style: normal;
 }
 
 .txns-list {

src/utils/utils.ts

@@ -44,6 +44,17 @@ export const getChainIdName = (netId: string) => {
   }
 };
 
+export const handleClickCopyIcon = (event: Event, text: string) => {
+  const target = event.target as HTMLElement;
+  target.classList.remove('bi-copy');
+  target.classList.add('bi-check2');
+  navigator.clipboard.writeText(text);
+  setTimeout(() => {
+    target.classList.add('bi-copy');
+    target.classList.remove('bi-check2');
+  }, 2000);
+};
+
 export const shortenFavAddr = (address: string | null) => {
   if (!address?.length) {
     return '-';

src/views/TransactionView.vue

@@ -10,6 +10,7 @@ import {
   shortenAddr,
   getTransferValue,
   fromWeiToEth,
+  fromWeiToGwei,
   concatTransfers,
   roundToTwo,
 } from '@/utils/utils';
@@ -51,6 +52,7 @@ const value = ref(0);
 const type = ref('');
 const nonce = ref(0);
 const transactionIndex = ref(0);
+const gasPrice = ref(0n);
 const gasUsed = ref(0n);
 const gasLimit = ref(0n);
 const input = ref('');
@@ -110,6 +112,7 @@ const mount = async (tx: string) => {
   // @ts-ignore
   nonce.value = txn.info.nonce;
   transactionIndex.value = txn.info.transactionIndex;
+  gasPrice.value = txn.info.gasPrice;
   gasUsed.value = txn.receipt.gasUsed;
   gasLimit.value = txn.info.gas;
   input.value = txn.info.input;
@@ -283,6 +286,13 @@ const mount = async (tx: string) => {
       </div>
     </div>
 
+    <div class="field">
+      <div class="field-title">Gas Price:</div>
+      <div v-if="!isLoadingTxnBaseInfo" class="eth-value">
+        {{ fromWeiToGwei(gasPrice, 9) }} Gwei ({{ fromWeiToEth(gasPrice, 18) }} ETH)
+      </div>
+    </div>
+
     <div class="field">
       <div class="field-title">Gas Used & Limit:</div>
       <div class="eth-value" v-if="!isLoadingTxnBaseInfo">
@@ -356,7 +366,7 @@ const mount = async (tx: string) => {
           </div>
         </div>
       </div>
-      <div v-else>-</div>
+      <div v-else>No logs for this transactions.</div>
     </div>
   </div>
 </template>
@@ -380,11 +390,13 @@ const mount = async (tx: string) => {
 .log-data {
   overflow-y: scroll;
   max-height: 103px;
+  padding-right: 7px;
 }
 
 .input-data {
   overflow-y: scroll;
   max-height: 130px;
+  padding-right: 7px;
 }
 
 .header {