fix: improve transactions page (#343)

matter-labs · Oct 23, 2023 · 1ed930a · 1ed930a
1 parent 54280c2
commit 1ed930a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/src/assets/style/pages/_transactions.scss b/src/assets/style/pages/_transactions.scss
@@ -227,6 +227,26 @@
   }
 
   @media (max-width: $mobile) {
+    .transactionsButtonGroup {
+      gap: 5px;
+
+      .button {
+        display: inline-flex !important;
+        align-items: center;
+        margin: 0 !important;
+        padding: 0 15px 0 10px !important;
+        line-height: 100% !important;
+        min-width: fit-content !important;
+        min-height: 40px !important;
+
+        svg {
+          top: initial !important;
+          max-width: 12px !important;
+          width: auto !important;
+          height: auto !important;
+        }
+      }
+    }
     .transactionsTile {
       display: flex;
       flex-direction: column;

diff --git a/src/blocks/Transactions.vue b/src/blocks/Transactions.vue
@@ -3,6 +3,30 @@
     <block-modals-account-activation />
     <div class="tileBlock transactionsTile">
       <div class="tileHeadline h3">Transactions</div>
+      <div class="_display-flex _justify-content-space-between transactionsButtonGroup _margin-bottom-1">
+        <i-button
+          block
+          class="_margin-y-0 _margin-right-1 _padding-right-2"
+          data-cy="account_deposit_button"
+          size="md"
+          :href="accountZkScanUrl"
+          target="_blank"
+          variant="secondary"
+        >
+          <v-icon class="planeIcon" name="ri-external-link-line" />&nbsp;View in Explorer
+        </i-button>
+        <i-button
+          block
+          class="_margin-y-0 _padding-right-1 _margin-right-1"
+          data-cy="account_send_zksync_button"
+          size="md"
+          :href="exportLink"
+          target="_blank"
+          variant="secondary"
+        >
+          <v-icon class="planeIcon" name="ri-file-line" />&nbsp;Export
+        </i-button>
+      </div>
       <div class="transactionsListContainer genericListContainer">
         <div v-if="loadingStatus === 'main'" class="nothingFound">
           <loader class="_display-block" />
@@ -58,6 +82,19 @@ export default Vue.extend({
     transactionHistoryAllLoaded(): boolean {
       return this.$store.getters["zk-history/transactionHistoryAllLoaded"];
     },
+    accountAddress(): string {
+      return this.$store.getters["zk-account/address"];
+    },
+    accountZkScanUrl(): string {
+      console.log(this.$store.getters["zk-onboard/config"]);
+      return (this.$store.getters["zk-onboard/config"].zkSyncNetwork.explorer +
+        "explorer/accounts/" +
+        this.accountAddress) as string;
+    },
+    exportLink(): string {
+      const network = this.$store.getters["zk-onboard/config"].ethereumNetwork.name;
+      return `https://zkexport-lite.netlify.app/export/account/transactions?address=${this.accountAddress}&network=${network}`;
+    },
   },
   async mounted() {
     if (!this.transactionHistoryRequested) {