Initial commit

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@commitlint/config-conventional"
+  ]
+}

.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@matterlabs/eslint-config-vue"],
+};

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jack Hamer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<style lang="scss">
+html,
+body {
+  @apply min-h-full w-full bg-[#f7f7f7] font-sans leading-[1.15] antialiased;
+  -webkit-text-size-adjust: 100%;
+}
+</style>

assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/sidebar/Sidebar.vue

@@ -0,0 +1,61 @@
+<template>
+  <nav class="navbar-container">
+    <nav class="navbar-desktop">
+      <!-- <SidebarAccountButton /> -->
+      <div class="navbar-desktop-links">
+        <NuxtLink :to="{ name: 'index' }" class="navbar-desktop-link">
+          <HomeIcon class="navbar-desktop-link-icon" aria-hidden="true" />
+          <span class="navbar-desktop-link-label">Home</span>
+        </NuxtLink>
+        <NuxtLink :to="{ name: 'payments' }" class="navbar-desktop-link">
+          <ArrowsRightLeftIcon class="navbar-desktop-link-icon" aria-hidden="true" />
+          <span class="navbar-desktop-link-label">Payments</span>
+        </NuxtLink>
+      </div>
+    </nav>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { ArrowsRightLeftIcon, HomeIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<style lang="scss" scoped>
+.navbar-container {
+  @apply pointer-events-none sticky bottom-0 top-auto z-[3] overflow-y-hidden;
+  grid-area: menu / menu / menu / menu;
+
+  @media (hover: hover) and (pointer: fine) {
+    overflow: hidden overlay;
+  }
+  @media screen and (min-width: 720px) {
+    overflow-y: overlay;
+    @apply pointer-events-auto top-0 bottom-auto max-h-screen px-8 py-4;
+  }
+  @media screen and (min-width: 1024px) {
+    @apply px-6;
+  }
+
+  .navbar-desktop {
+    @apply hidden min-w-[3.5rem] max-w-[3.5rem] md:block xl:max-w-[12.5rem];
+
+    .navbar-desktop-links {
+      @apply mt-6 space-y-1;
+
+      .navbar-desktop-link {
+        @apply flex w-full items-center rounded-xl bg-transparent py-3 px-4 text-gray-secondary no-underline transition-colors hover:bg-gray-200;
+        &.router-link-exact-active {
+          @apply bg-white text-indigo-600;
+        }
+
+        .navbar-desktop-link-icon {
+          @apply h-6 w-6 text-inherit;
+        }
+        .navbar-desktop-link-label {
+          @apply mr-auto ml-4 hidden font-medium leading-4 tracking-[-0.1px] xl:block;
+        }
+      }
+    }
+  }
+}
+</style>

composables/useDataSync.ts

@@ -0,0 +1,172 @@
+import { ref } from "vue";
+
+import { $fetch } from "ohmyfetch";
+
+import useOrders from "@/composables/useOrders";
+
+import { db } from "@/db";
+
+export type Address = string;
+export type InputType = "string" | "address" | "bool" | "bytes" | "bytes32" | "uint256" | "uint8";
+
+export type TransactionData = {
+  calldata: string;
+  contractAddress: Address;
+  value: string;
+  sighash: string;
+  method?: {
+    name: string;
+    inputs: {
+      name: string;
+      type: InputType;
+      value: string;
+      encodedValue: string;
+    }[];
+  };
+};
+
+export type TokenTransfer = {
+  amount: string;
+  from: string;
+  to: string;
+  type: "fee" | "transfer" | "withdrawal" | "deposit";
+  tokenInfo: {
+    address: string;
+    decimals: number;
+    l1Address: string;
+    l2Address: string;
+    name: string;
+    symbol: string;
+    usdPrice: string | null | "unknown";
+  };
+};
+
+export type TransactionStatus = "pending" | "included" | "verified" | "failed";
+
+export type Transaction = {
+  blockHash: string;
+  blockNumber: number;
+  data: TransactionData;
+  ethCommitTxHash: string | null;
+  ethExecuteTxHash: string | null;
+  ethProveTxHash: string | null;
+  fee: string;
+  indexInBlock?: number;
+  initiatorAddress: string;
+  isL1Originated: boolean;
+  nonce: null | number;
+  receivedAt: string;
+  status: TransactionStatus;
+  logs: [];
+  transactionHash: string;
+  balanceChanges: [];
+  transfers: TokenTransfer[];
+  erc20Transfers?: TokenTransfer[];
+  transfer?: TokenTransfer;
+};
+
+export type TransactionSearchParams = {
+  direction: "older" | "newer";
+  blockNumber?: number;
+  fromBlockNumber?: number;
+  fromTxIndex?: number;
+  accountAddress?: string;
+  contractAddress?: string;
+  limit?: number;
+  offset?: number;
+};
+
+const BUIDL_BUXX_TOKEN_ADDRESS = "0xfc5b07a5dd1b80cf271d35642f75cc0500ff1e2c";
+
+export default () => {
+  const pending = ref(false);
+  const failed = ref(false);
+  const { orders, getOrders } = useOrders();
+
+  const getCollection = async (address: string) => {
+    pending.value = true;
+    failed.value = false;
+    try {
+      const response = await $fetch(
+        `https://z2-dev-api-explorer.zksync.dev/transactions?${new URLSearchParams({
+          limit: "1",
+          direction: "older",
+          accountAddress: address,
+        })}`
+      );
+      for (let offset = 0; offset < response.total; offset += 100) {
+        const items = await $fetch(
+          `https://z2-dev-api-explorer.zksync.dev/transactions?${new URLSearchParams({
+            limit: "100",
+            direction: "older",
+            fromBlockNumber: response.list[0].blockNumber.toString(),
+            fromTxIndex: (response.list[0].indexInBlock! + 1).toString(),
+            offset: offset.toString(),
+            accountAddress: address,
+          })}`
+        );
+        addToDB(items.list);
+      }
+    } catch (error: unknown) {
+      failed.value = true;
+    } finally {
+      pending.value = false;
+    }
+  };
+
+  const getUpdatedCollection = async (address: string) => {
+    try {
+      const response = await $fetch(
+        `https://z2-dev-api-explorer.zksync.dev/transactions?${new URLSearchParams({
+          limit: "1",
+          direction: "older",
+          accountAddress: address,
+        })}`
+      );
+      await getOrders();
+      if (response.total > orders.value.length) {
+        pending.value = true;
+        failed.value = false;
+        for (let offset = 0; offset < response.total - orders.value.length; offset += 20) {
+          const items = await $fetch(
+            `https://z2-dev-api-explorer.zksync.dev/transactions?${new URLSearchParams({
+              limit: "20",
+              direction: "older",
+              fromBlockNumber: response.list[0].blockNumber.toString(),
+              fromTxIndex: (response.list[0].indexInBlock! + 1).toString(),
+              offset: offset.toString(),
+              accountAddress: address,
+            })}`
+          );
+          addToDB(items.list.filter((item) => new Date(item.receivedAt).getTime() > orders.value[0].receivedAt));
+        }
+      }
+    } catch (error: unknown) {
+      failed.value = true;
+    } finally {
+      pending.value = false;
+    }
+  };
+
+  const addToDB = (transactions: Transaction[]) => {
+    const filterCollection = transactions
+      .filter((item) => item.erc20Transfers![1]?.tokenInfo.address === BUIDL_BUXX_TOKEN_ADDRESS)
+      .map((item) => {
+        return {
+          transactionHash: item.transactionHash,
+          orderId: item.transactionHash.slice(-5),
+          receivedAt: new Date(item.receivedAt).getTime(),
+          amount: item.erc20Transfers![1]?.amount,
+          from: item.erc20Transfers![1]?.from,
+        };
+      });
+    db.transactions.bulkAdd(filterCollection);
+  };
+
+  return {
+    pending,
+    failed,
+    getCollection,
+    getUpdatedCollection,
+  };
+};

composables/useOrders.ts

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+
+import { db, type OrdersInstance } from "@/db";
+
+export default () => {
+  const orders = ref<OrdersInstance[] | []>([]);
+  const pending = ref(false);
+
+  const getOrders = async () => {
+    pending.value = true;
+    if (db.transactions) {
+      orders.value = await db.transactions.orderBy("receivedAt").reverse().toArray();
+      pending.value = false;
+    }
+  };
+
+  return {
+    orders,
+    pending,
+    getOrders,
+  };
+};