+
+
+ {{ currentNetwork.l2NetworkName }}
+
+
+ {{ t("maintenance.twitterLink") }}
+
+
+ {{ t("maintenance.uptimeLink") }}
+
+
+
+
+ {{ t("maintenance.uptimeLink") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/AddressLink.vue b/packages/app/src/components/AddressLink.vue
new file mode 100644
index 0000000000..922573341e
--- /dev/null
+++ b/packages/app/src/components/AddressLink.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {{ t("accountView.balances.notFound.title") }}
+
+
+
+ {{ t("accountView.balances.notFound.subtitle") }}
+
+
+ 
+
+
+
+ {{ t("accountView.balances.error.title") }}
+
+
+
+ {{ t("accountView.balances.error.subtitle") }}
+
+
+ 
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/ContentCard.vue b/packages/app/src/components/ContentCard.vue
new file mode 100644
index 0000000000..61114f0eac
--- /dev/null
+++ b/packages/app/src/components/ContentCard.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/EstimatedCostOfTransfers.stories.ts b/packages/app/src/components/EstimatedCostOfTransfers.stories.ts
new file mode 100644
index 0000000000..2b7b29010e
--- /dev/null
+++ b/packages/app/src/components/EstimatedCostOfTransfers.stories.ts
@@ -0,0 +1,41 @@
+import EstimatedCostOfTransfers, { type Cost } from "./EstimatedCostOfTransfers.vue";
+
+export default {
+ title: "components/EstimatedCostOfTransfers",
+ component: EstimatedCostOfTransfers,
+};
+
+type Args = {
+ costs: Cost[];
+};
+
+const costs: Cost[] = [
+ {
+ label: "Activation Fee",
+ value: 44.5,
+ description: "Description",
+ },
+ {
+ label: "Transfer",
+ value: 0.76,
+ },
+ {
+ label: "MintNFT",
+ value: 25,
+ },
+ {
+ label: "Withdraw",
+ value: 63,
+ },
+];
+
+const Template = (args: Args) => ({
+ components: { EstimatedCostOfTransfers },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("contract.balances.notFound.title") }}
+
+
+
+ {{ t("contract.balances.notFound.subtitle") }}
+
+
+
+
+
+
+ {{ t("contract.balances.error.title") }}
+
+
+
+ {{ t("contract.balances.error.subtitle") }}
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/FeeData.vue b/packages/app/src/components/FeeData.vue
new file mode 100644
index 0000000000..037eda82a6
--- /dev/null
+++ b/packages/app/src/components/FeeData.vue
@@ -0,0 +1,125 @@
+
+ {{ t("estimatedCost.title") }}
+ {{ t("estimatedCost.subtitle") }}
+
+
+
+
+
+ {{ cost.label }}
+
+
+ ?
+ {{ cost.description }}
+
+
+
+ {{ formatMoney(cost.value) }}
+
+
+
+
+
diff --git a/packages/app/src/components/IndexerDelayAlert.vue b/packages/app/src/components/IndexerDelayAlert.vue
new file mode 100644
index 0000000000..671cea6197
--- /dev/null
+++ b/packages/app/src/components/IndexerDelayAlert.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+ {{ t("transactions.table.feeDetails.initial") }}
+
+
+ {{ t("transactions.table.feeDetails.refunded") }}
+
+
+
+ {{ t("transactions.table.feeDetails.refunds") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/NetworkSwitch.vue b/packages/app/src/components/NetworkSwitch.vue
new file mode 100644
index 0000000000..d63fc1fa4d
--- /dev/null
+++ b/packages/app/src/components/NetworkSwitch.vue
@@ -0,0 +1,124 @@
+
+
+
+ {{ t("networkStats.title") }}
+ {{ subtitle }}
+ -
+
-
+
{{ t("networkStats.committed") }} +
+ -
+
+ {{ formatWithSpaces(committed ?? 0) }} +
+ -
+
{{ t("networkStats.verified") }} +
+ -
+
+ {{ formatWithSpaces(verified ?? 0) }} +
+ -
+
{{ t("networkStats.transactions") }} +
+ -
+
+ {{ formatWithSpaces(transactions ?? 0) }} +
+ - + {{ t("networkStats.totalLocked") }} + +
-
+
+ {{ formatMoney(totalLocked) }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ {{ network.l2NetworkName }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/SearchForm.vue b/packages/app/src/components/SearchForm.vue
new file mode 100644
index 0000000000..6316b8c4fd
--- /dev/null
+++ b/packages/app/src/components/SearchForm.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/SolidityEditor.stories.ts b/packages/app/src/components/SolidityEditor.stories.ts
new file mode 100644
index 0000000000..c0278375e2
--- /dev/null
+++ b/packages/app/src/components/SolidityEditor.stories.ts
@@ -0,0 +1,90 @@
+import SolidityEditor from "./SolidityEditor.vue";
+
+export default {
+ title: "components/SolidityEditor",
+ component: SolidityEditor,
+};
+
+type Args = {
+ modelValue: string | number;
+ error?: string;
+ disabled?: boolean;
+ readOnly?: boolean;
+};
+
+const Template = (args: Args) => ({
+ components: { SolidityEditor },
+ setup() {
+ return { args };
+ },
+ data() {
+ return {
+ value: args.modelValue,
+ };
+ },
+ template: `
+ {{ t("pageError.title") }}
+ {{ t("pageError.subtitle") }}
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/TheFooter.vue b/packages/app/src/components/TheFooter.vue
new file mode 100644
index 0000000000..8a3ad69b09
--- /dev/null
+++ b/packages/app/src/components/TheFooter.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/TheWelcome.vue b/packages/app/src/components/TheWelcome.vue
new file mode 100644
index 0000000000..cbafc0078d
--- /dev/null
+++ b/packages/app/src/components/TheWelcome.vue
@@ -0,0 +1,80 @@
+
+
+
+ + + More instructions are available in
README.md.
+
+
+
+ {{ decimalAmount }}
+
+
+
+
+ {{ symbol }}
+
+ {{ t("balances.table.unknownSymbol") }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/WelcomeItem.vue b/packages/app/src/components/WelcomeItem.vue
new file mode 100644
index 0000000000..6cff194656
--- /dev/null
+++ b/packages/app/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
+
+
+
+ ![]()
+
+
+
+
+ {{ symbol }}
+
+
+ {{ name }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/account/InfoTable.vue b/packages/app/src/components/account/InfoTable.vue
new file mode 100644
index 0000000000..0b3bb1c39a
--- /dev/null
+++ b/packages/app/src/components/account/InfoTable.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+ {{ t("accountView.transactionTable.notFound.title") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/balances/BalanceValue.vue b/packages/app/src/components/balances/BalanceValue.vue
new file mode 100644
index 0000000000..6ea1537683
--- /dev/null
+++ b/packages/app/src/components/balances/BalanceValue.vue
@@ -0,0 +1,34 @@
+
+
+ {{ t("accountView.transactionTable.notFound.subtitle") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/balances/Table.vue b/packages/app/src/components/balances/Table.vue
new file mode 100644
index 0000000000..4cc870264d
--- /dev/null
+++ b/packages/app/src/components/balances/Table.vue
@@ -0,0 +1,172 @@
+
+ {{ formatValue(balance.balance, balance.token.decimals) }}
+
+
+ {{ tokenPriceAmount }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/batches/InfoTableSection.vue b/packages/app/src/components/batches/InfoTableSection.vue
new file mode 100644
index 0000000000..86e332fcab
--- /dev/null
+++ b/packages/app/src/components/batches/InfoTableSection.vue
@@ -0,0 +1,98 @@
+
+
+
+
+ {{ batchExists ? t("batches.transactionTable.noTransactions") : t("batches.transactionTable.batchNotFound") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/blocks/InfoTable.vue b/packages/app/src/components/blocks/InfoTable.vue
new file mode 100644
index 0000000000..63ddc25491
--- /dev/null
+++ b/packages/app/src/components/blocks/InfoTable.vue
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/blocks/InfoTableBlock.vue b/packages/app/src/components/blocks/InfoTableBlock.vue
new file mode 100644
index 0000000000..cade76c928
--- /dev/null
+++ b/packages/app/src/components/blocks/InfoTableBlock.vue
@@ -0,0 +1,108 @@
+
+ Show more blocks ->
`,
+};
+WithFooter.decorators = [routes];
+
+export const Loading = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+Loading.args = {
+ blocks,
+ loading: true,
+ footer: undefined,
+};
+Loading.decorators = [routes];
diff --git a/packages/app/src/components/blocks/Table.vue b/packages/app/src/components/blocks/Table.vue
new file mode 100644
index 0000000000..178c14c116
--- /dev/null
+++ b/packages/app/src/components/blocks/Table.vue
@@ -0,0 +1,152 @@
+
+
+
+
+ {{ blockExists ? t("blocks.transactionTable.noTransactions") : t("blocks.transactionTable.blockNotFound") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Alert.stories.ts b/packages/app/src/components/common/Alert.stories.ts
new file mode 100644
index 0000000000..2c15adec07
--- /dev/null
+++ b/packages/app/src/components/common/Alert.stories.ts
@@ -0,0 +1,32 @@
+import Alert from "./Alert.vue";
+
+export default {
+ title: "Common/Alert",
+ component: Alert,
+};
+
+type Args = {
+ type: string;
+ slotText: string;
+};
+
+const Template = (args: Args) => ({
+ components: { Alert },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Badge.stories.ts b/packages/app/src/components/common/Badge.stories.ts
new file mode 100644
index 0000000000..a8c6990542
--- /dev/null
+++ b/packages/app/src/components/common/Badge.stories.ts
@@ -0,0 +1,86 @@
+import { ClipboardCheckIcon } from "@heroicons/vue/outline";
+
+import Badge from "./Badge.vue";
+
+export default {
+ title: "Common/Badge",
+ component: Badge,
+};
+
+type Args = {
+ type?: "label" | "pill";
+ size?: "sm" | "md";
+ color?: string;
+ defaultSlot?: string;
+ icon?: unknown;
+}[];
+
+const colors = ["primary", "secondary", "warning", "error", "danger", "success", "neutral"];
+
+const Template = (variants: Args) => ({
+ components: { Badge },
+ setup() {
+ return { variants };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ {{ tooltip }}
+
+ + {{ error }} +
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/ExpandableText.stories.ts b/packages/app/src/components/common/ExpandableText.stories.ts
new file mode 100644
index 0000000000..828d830b41
--- /dev/null
+++ b/packages/app/src/components/common/ExpandableText.stories.ts
@@ -0,0 +1,56 @@
+import ExpandableText from "./ExpandableText.vue";
+
+export default {
+ title: "Common/ExpandableText",
+ component: ExpandableText,
+};
+
+type Args = {
+ text: string;
+ maxHeight?: number;
+};
+
+const DefaultTemplate = (args: Args) => ({
+ components: { ExpandableText },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
+
+ Not found
+
+
+ Please, try again later
+
+ {{ text }}
+
+
+ {{ expanded ? 'Show less' : 'Show more' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Input.stories.ts b/packages/app/src/components/common/Input.stories.ts
new file mode 100644
index 0000000000..4490ec9d59
--- /dev/null
+++ b/packages/app/src/components/common/Input.stories.ts
@@ -0,0 +1,54 @@
+import Input from "./Input.vue";
+
+export default {
+ title: "Common/Input",
+ component: Input,
+};
+
+type Args = {
+ modelValue: string | number;
+ error?: string;
+ disabled?: boolean;
+};
+
+const Template = (args: Args) => ({
+ components: { Input },
+ setup() {
+ return { args };
+ },
+ data() {
+ return {
+ value: args.modelValue,
+ };
+ },
+ template: `
+ Radio Input`,
+});
+
+export const Default = Template.bind({}) as unknown as { args: Args };
+Default.args = {
+ modelValue: "",
+};
+
+export const Disabled = Template.bind({}) as unknown as { args: Args };
+Disabled.args = {
+ modelValue: "",
+ disabled: true,
+};
+
+export const WithValue = Template.bind({}) as unknown as { args: Args };
+WithValue.args = {
+ modelValue: "Input value",
+};
+
+export const DisabledWithValue = Template.bind({}) as unknown as { args: Args };
+DisabledWithValue.args = {
+ modelValue: "Input value",
+ disabled: true,
+};
+
+export const WithError = Template.bind({}) as unknown as { args: Args };
+WithError.args = {
+ modelValue: "",
+ error: "It's an error",
+};
diff --git a/packages/app/src/components/common/Input.vue b/packages/app/src/components/common/Input.vue
new file mode 100644
index 0000000000..870e426af9
--- /dev/null
+++ b/packages/app/src/components/common/Input.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Pagination.stories.ts b/packages/app/src/components/common/Pagination.stories.ts
new file mode 100644
index 0000000000..d981b34b24
--- /dev/null
+++ b/packages/app/src/components/common/Pagination.stories.ts
@@ -0,0 +1,62 @@
+import vueRouter from "storybook-vue3-router";
+
+import Pagination from "./Pagination.vue";
+
+export default {
+ title: "Common/Pagination",
+ component: Pagination,
+};
+
+type Args = {
+ activePage: number;
+ totalItems: number;
+ disabled?: boolean;
+};
+
+const Template = (args: Args) => ({
+ components: { Pagination },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+ {{ error }}
+
+
+
+
+ `,
+});
+
+export const Default = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+Default.args = {
+ activePage: 1,
+ totalItems: 50,
+};
+Default.decorators = [vueRouter()];
+
+export const Start = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+Start.args = {
+ activePage: 1,
+ totalItems: 100,
+};
+Start.decorators = [vueRouter()];
+
+export const Full = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+Full.args = {
+ activePage: 5,
+ totalItems: 100,
+};
+Full.decorators = [vueRouter()];
+
+export const End = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+End.args = {
+ activePage: 10,
+ totalItems: 100,
+};
+End.decorators = [vueRouter()];
+
+export const Disabled = Template.bind({}) as unknown as { args: Args; decorators: unknown[] };
+Disabled.args = {
+ activePage: 5,
+ totalItems: 100,
+ disabled: true,
+};
+Disabled.decorators = [vueRouter()];
diff --git a/packages/app/src/components/common/Pagination.vue b/packages/app/src/components/common/Pagination.vue
new file mode 100644
index 0000000000..4648398103
--- /dev/null
+++ b/packages/app/src/components/common/Pagination.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/PaginationButton.vue b/packages/app/src/components/common/PaginationButton.vue
new file mode 100644
index 0000000000..3b4a5f6658
--- /dev/null
+++ b/packages/app/src/components/common/PaginationButton.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Spinner.vue b/packages/app/src/components/common/Spinner.vue
new file mode 100644
index 0000000000..fa493753ef
--- /dev/null
+++ b/packages/app/src/components/common/Spinner.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
diff --git a/packages/app/src/components/common/SystemAlert.vue b/packages/app/src/components/common/SystemAlert.vue
new file mode 100644
index 0000000000..4dd6e3c059
--- /dev/null
+++ b/packages/app/src/components/common/SystemAlert.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Tabs.stories.ts b/packages/app/src/components/common/Tabs.stories.ts
new file mode 100644
index 0000000000..207c95c875
--- /dev/null
+++ b/packages/app/src/components/common/Tabs.stories.ts
@@ -0,0 +1,44 @@
+import vueRouter from "storybook-vue3-router";
+
+import Tabs from "./Tabs.vue";
+
+import type { Tab } from "./Tabs.vue";
+
+export default {
+ title: "Common/Tabs",
+ component: Tabs,
+};
+
+type Args = {
+ tabs: Tab[];
+};
+
+const Template = (args: Args) => ({
+ components: { Tabs },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/Title.vue b/packages/app/src/components/common/Title.vue
new file mode 100644
index 0000000000..696315da59
--- /dev/null
+++ b/packages/app/src/components/common/Title.vue
@@ -0,0 +1,40 @@
+
+ -
+
+
- + + + + +
+
+
+
+
+
+
+ {{ title }}
+
+ {{ shortValue(value) }}
+
+
+
+
diff --git a/packages/app/src/components/common/Tooltip.vue b/packages/app/src/components/common/Tooltip.vue
new file mode 100644
index 0000000000..e116153540
--- /dev/null
+++ b/packages/app/src/components/common/Tooltip.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/loaders/ContentLoader.vue b/packages/app/src/components/common/loaders/ContentLoader.vue
new file mode 100644
index 0000000000..cfcf5295b0
--- /dev/null
+++ b/packages/app/src/components/common/loaders/ContentLoader.vue
@@ -0,0 +1,9 @@
+
+ + {{ error }} +
+| {{ colItem }} | + + +{{ item }} | + + + + + +
|---|
|
+ |
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/table/TableBodyColumn.stories.ts b/packages/app/src/components/common/table/TableBodyColumn.stories.ts
new file mode 100644
index 0000000000..a59b7db7af
--- /dev/null
+++ b/packages/app/src/components/common/table/TableBodyColumn.stories.ts
@@ -0,0 +1,36 @@
+import Table from "./Table.vue";
+import TableBodyColumn from "./TableBodyColumn.vue";
+
+export default {
+ title: "Common/Table/TableBodyColumn",
+ component: Table,
+};
+
+type Args = {
+ headers: string[];
+ items: string[];
+};
+
+const Template = (args: Args) => ({
+ components: { Table, TableBodyColumn },
+ subcomponents: { TableBodyColumn },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
+ | {{ colItem }} | + + +
|---|
| {{ item }} | + +
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/table/fields/CopyContent.vue b/packages/app/src/components/common/table/fields/CopyContent.vue
new file mode 100644
index 0000000000..16ea6e2d43
--- /dev/null
+++ b/packages/app/src/components/common/table/fields/CopyContent.vue
@@ -0,0 +1,33 @@
+
+ {{ value }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/table/fields/TimeField.vue b/packages/app/src/components/common/table/fields/TimeField.vue
new file mode 100644
index 0000000000..24216056e4
--- /dev/null
+++ b/packages/app/src/components/common/table/fields/TimeField.vue
@@ -0,0 +1,87 @@
+
+
+
+ {{ timeAgo }}
+
+ {{ localDateFromISOString(isoString) }}
+
+
+
+
+
+
diff --git a/packages/app/src/components/common/table/fields/TokenPrice.vue b/packages/app/src/components/common/table/fields/TokenPrice.vue
new file mode 100644
index 0000000000..9092ca7d27
--- /dev/null
+++ b/packages/app/src/components/common/table/fields/TokenPrice.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/CodeBlock.stories.ts b/packages/app/src/components/contract/CodeBlock.stories.ts
new file mode 100644
index 0000000000..919fee64b7
--- /dev/null
+++ b/packages/app/src/components/contract/CodeBlock.stories.ts
@@ -0,0 +1,37 @@
+import CodeBlock from "./CodeBlock.vue";
+
+export default {
+ title: "Contract/CodeBlock",
+ component: CodeBlock,
+};
+
+type Args = {
+ label: string;
+ code: string;
+};
+
+const Template = (args: Args) => ({
+ components: { CodeBlock },
+ setup() {
+ return { args };
+ },
+ template: `
+ {{ priceAmount }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/CompilationInfo.stories.ts b/packages/app/src/components/contract/CompilationInfo.stories.ts
new file mode 100644
index 0000000000..5373f097e9
--- /dev/null
+++ b/packages/app/src/components/contract/CompilationInfo.stories.ts
@@ -0,0 +1,36 @@
+import CompilationInfo from "./CompilationInfo.vue";
+
+import type { Contract } from "@/composables/useAddress";
+
+export default {
+ title: "Contract/CompilationInfo",
+ component: CompilationInfo,
+};
+
+type Args = {
+ contract: Contract;
+};
+
+const Template = (args: Args) => ({
+ components: { CompilationInfo },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ {{ label }}
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/ContractBytecode.stories.ts b/packages/app/src/components/contract/ContractBytecode.stories.ts
new file mode 100644
index 0000000000..ada73822dd
--- /dev/null
+++ b/packages/app/src/components/contract/ContractBytecode.stories.ts
@@ -0,0 +1,93 @@
+import ContractBytecode from "./ContractBytecode.vue";
+
+import type { Contract } from "@/composables/useAddress";
+
+export default {
+ title: "Contract/ContractBytecode",
+ component: ContractBytecode,
+};
+
+type Args = {
+ contract: Contract;
+};
+
+const Template = (args: Args) => ({
+ components: { ContractBytecode },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ {{ t("contractVerification.compilationInfo.contractName") }}
+{{ contractName }}
+
+
+ {{ t("contractVerification.compilationInfo.compilerVersion") }}
+{{ verificationRequest?.compilerSolcVersion || verificationRequest?.compilerVyperVersion }}
+
+
+ + {{ + verificationRequest?.compilerVyperVersion + ? t("contractVerification.compilationInfo.zkvyperVersion") + : t("contractVerification.compilationInfo.zksolcVersion") + }} +
++ {{ verificationRequest?.compilerZksolcVersion || verificationRequest?.compilerZkvyperVersion }} +
+
+
+ {{ t("contractVerification.compilationInfo.optimization") }}
+{{ optimization }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/ContractInfoTab.vue b/packages/app/src/components/contract/ContractInfoTab.vue
new file mode 100644
index 0000000000..fdf7c21a86
--- /dev/null
+++ b/packages/app/src/components/contract/ContractInfoTab.vue
@@ -0,0 +1,292 @@
+
+
+
+
+
+ {{ t("contract.bytecode.areYouAnOwner") }}
+
+ {{ t("contract.bytecode.verifyAndPublishToday") }}
+ {{ contract.address }}
+
+
+
+
+
+
+
+
+
+
+ {{ t("contract.sourceCode.label") }}
+
+
+ {{ t("contract.bytecode.deployedBytecode") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/InfoTable.stories.ts b/packages/app/src/components/contract/InfoTable.stories.ts
new file mode 100644
index 0000000000..060f237fd7
--- /dev/null
+++ b/packages/app/src/components/contract/InfoTable.stories.ts
@@ -0,0 +1,45 @@
+import InfoTable from "./InfoTable.vue";
+
+import type { Contract } from "@/composables/useAddress";
+
+export default {
+ title: "Contract/InfoTable",
+ component: InfoTable,
+};
+
+type Args = {
+ contract: Contract;
+ loading: boolean;
+};
+
+const contract: Contract = {
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ creatorAddress: "0x52312ad6f01657413b2eae9287f6b9adad93d5fe",
+ creatorTxHash: "0xc3751ea2572cb6b4f061af1127a67eaded2cfc191f2a18d69000bbe2e98b680a",
+ createdInBlockNumber: 61223,
+ totalTransactions: 31231,
+ balances: {},
+} as Contract;
+
+const Template = (args: Args) => ({
+ components: { InfoTable },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+ {{ missingReadFunctionsMessage }}
+
+
+
+
+
+
+ {{ index + 1 }}. {{ item.name }}
+
+
+
+
+
+
+
+ {{ missingWriteFunctionsMessage }}
+
+
+
+
+
+
+ {{ index + 1 }}. {{ item.name }}
+
+
+
+
+
+
+
+
+ {{ t("contract.abiInteraction.contractImplementationFound") }}
+
+
+
+ {{ t("contract.abiInteraction.contractImplementationAt") }}
+
+
+ {{ t("contract.abiInteraction.verifyImplementationMessage") }} +
+
+ + {{ t("contract.abiInteraction.verifyImplementationMessage") }} +
+
+
+ {{ missingReadProxyFunctionsMessage }}
+
+
+
+
+ {{ t("contract.abiInteraction.method.readAsProxy.name") }}
+
+ {{ index + 1 }}. {{ item.name }}
+
+
+
+
+
+
+
+ {{ t("contract.abiInteraction.contractImplementationFound") }}
+
+
+
+ {{ t("contract.abiInteraction.contractImplementationAt") }}
+
+
+ {{ t("contract.abiInteraction.verifyImplementationMessage") }} +
+
+ + {{ t("contract.abiInteraction.verifyImplementationMessage") }} +
+
+
+ {{ missingWriteProxyFunctionsMessage }}
+
+
+
+
+
+
+ {{ index + 1 }}. {{ item.name }}
+
+
+
+
+
+ {{ t("contract.transactionTable.notFound.title") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/interaction/FunctionArrayParameter.vue b/packages/app/src/components/contract/interaction/FunctionArrayParameter.vue
new file mode 100644
index 0000000000..504d74c76e
--- /dev/null
+++ b/packages/app/src/components/contract/interaction/FunctionArrayParameter.vue
@@ -0,0 +1,107 @@
+
+
+ {{ t("contract.transactionTable.notFound.subtitle") }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/interaction/FunctionDropdown.vue b/packages/app/src/components/contract/interaction/FunctionDropdown.vue
new file mode 100644
index 0000000000..ef43997021
--- /dev/null
+++ b/packages/app/src/components/contract/interaction/FunctionDropdown.vue
@@ -0,0 +1,134 @@
+
+
+
+ {{ label }} ({{ type }})
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/interaction/FunctionForm.vue b/packages/app/src/components/contract/interaction/FunctionForm.vue
new file mode 100644
index 0000000000..d2d9c13be5
--- /dev/null
+++ b/packages/app/src/components/contract/interaction/FunctionForm.vue
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/verification/FilePreview.stories.ts b/packages/app/src/components/contract/verification/FilePreview.stories.ts
new file mode 100644
index 0000000000..0b8c5ccc3a
--- /dev/null
+++ b/packages/app/src/components/contract/verification/FilePreview.stories.ts
@@ -0,0 +1,28 @@
+import FilePreview from "./FilePreview.vue";
+
+export default {
+ title: "Contract/Verification/FilePreview",
+ component: FilePreview,
+};
+
+type Args = {
+ name: string;
+ size: number;
+ index: number;
+};
+
+const Template = (args: Args) => ({
+ components: { FilePreview },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+ {{ t("contract.abiInteraction.metaMaskNotFound") }}
+
+
+
+
+
+
+
+
+
+ {{ output.name }} ({{ output.type }})
+
+
+
+ {{ index + 1 }}
+ {{ name }}
+
+
+
+
diff --git a/packages/app/src/components/contract/verification/MultiFileVerification.stories.ts b/packages/app/src/components/contract/verification/MultiFileVerification.stories.ts
new file mode 100644
index 0000000000..b3b3d500ba
--- /dev/null
+++ b/packages/app/src/components/contract/verification/MultiFileVerification.stories.ts
@@ -0,0 +1,13 @@
+import MultiFileVerification from "./MultiFileVerification.vue";
+
+export default {
+ title: "Contract/Verification/MultiFileVerification",
+ component: MultiFileVerification,
+};
+
+const Template = () => ({
+ components: { MultiFileVerification },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/contract/verification/SuccessScreen.stories.ts b/packages/app/src/components/contract/verification/SuccessScreen.stories.ts
new file mode 100644
index 0000000000..98a70d37e9
--- /dev/null
+++ b/packages/app/src/components/contract/verification/SuccessScreen.stories.ts
@@ -0,0 +1,24 @@
+import SuccessScreen from "./SuccessScreen.vue";
+
+export default {
+ title: "Contract/Verification/SuccessScreen",
+ component: SuccessScreen,
+};
+
+type Args = {
+ contractAddress: string;
+};
+
+const Template = (args: Args) => ({
+ components: { SuccessScreen },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+ {{ t("contractVerification.verified.title") }}
+{{ t("debuggerTool.title") }}
+{{ t("debuggerTool.whatFor") }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/debugger/MetadataBlock.stories.ts b/packages/app/src/components/debugger/MetadataBlock.stories.ts
new file mode 100644
index 0000000000..29aeecbc8b
--- /dev/null
+++ b/packages/app/src/components/debugger/MetadataBlock.stories.ts
@@ -0,0 +1,87 @@
+import MetadataBlock from "./MetadataBlock.vue";
+
+import type { TraceFile, TraceStep } from "@/composables/useTrace";
+
+export default {
+ title: "Debugger/MetadataBlock",
+ component: MetadataBlock,
+};
+
+type Args = {
+ metadata: TraceStep;
+ file: TraceFile;
+};
+
+const Template = (args: Args) => ({
+ components: { MetadataBlock },
+ setup() {
+ return { ...args };
+ },
+ template: `
+ {{ text }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/debugger/Navigation.stories.ts b/packages/app/src/components/debugger/Navigation.stories.ts
new file mode 100644
index 0000000000..486b944939
--- /dev/null
+++ b/packages/app/src/components/debugger/Navigation.stories.ts
@@ -0,0 +1,39 @@
+import { action } from "@storybook/addon-actions";
+
+import Navigation from "./Navigation.vue";
+
+import type { Meta } from "@storybook/vue3";
+
+export default {
+ title: "Debugger/Navigation",
+ component: Navigation,
+} as Meta
+
+
+
+
+
+
+ {{ address }}
+
+ -
+
- + + + + {{ item.error }} + + + + +
+
+
+
+
+
+
diff --git a/packages/app/src/components/event/TransactionEventTableCell.stories.ts b/packages/app/src/components/event/TransactionEventTableCell.stories.ts
new file mode 100644
index 0000000000..506a1667ee
--- /dev/null
+++ b/packages/app/src/components/event/TransactionEventTableCell.stories.ts
@@ -0,0 +1,72 @@
+import TransactionEventTableCell from "@/components/event/TransactionEventTableCell.vue";
+
+import type { InputType } from "@/composables/useEventLog";
+import type { TransactionLogEntry } from "@/composables/useEventLog";
+
+export default {
+ title: "components/Event/TransactionEventTableCell",
+ component: TransactionEventTableCell,
+};
+
+type Args = {
+ item: TransactionLogEntry;
+ popoverPlacement?: "top" | "bottom";
+};
+
+const item: TransactionLogEntry = {
+ address: "0x4d82c246feae3f67303d2500ac9fb18fc654d151",
+ topics: [
+ "0x5548c837ab068cf56a2c2479df0882a4922fd203edb7517321831d95078c5f62",
+ "0x0000000000000000000000001e98677895078dd55bf59236b8bc477ab4e962c3",
+ "0x000000000000000000000000a2faa945acadaed59797c40f906f9936906b9621",
+ ],
+ data: "0x0000000000000000000000000000000000000000000000000000000005ed2d99",
+ blockHash: "0xa9eccec9d479f22760f46b10572d2a7144e31f454703b30983256b666646110f",
+ blockNumber: "0x2beec2",
+ l1BatchNumber: "0x92260",
+ transactionHash: "0xdcf4932c1f33ce1c8831eb7c0f1ba2cf0344829d5ce6ab34cf6adf214f8a2be2",
+ transactionIndex: "0x2",
+ logIndex: "0xa",
+ transactionLogIndex: "0xa",
+ logType: null,
+ removed: false,
+ event: {
+ name: "Deposit",
+ inputs: [
+ {
+ name: "user",
+ type: "address" as InputType,
+ value: "0x1e98677895078dd55bf59236B8bC477AB4e962c3",
+ },
+ {
+ name: "lpToken",
+ type: "address" as InputType,
+ value: "0xA2fAA945acaDaed59797C40F906F9936906b9621",
+ },
+ {
+ name: "amount",
+ type: "uint256" as InputType,
+ value: "99429785",
+ },
+ ],
+ },
+};
+
+const Template = (args: Args) => ({
+ components: { TransactionEventTableCell },
+ setup() {
+ return { args };
+ },
+ template: `{{ topicIndex }}
+
+ {{ topic }}
+
+
+ {{ checksumAddress(data as Address) }}
+ {{ shortenFitText(checksumAddress(data as Address), "left", 230, 10) }}
+
+
+ {{ data }}
+
+ {{ data }}
+
+ {{ shortenFitText(data, "left", selected === "number" ? 230 : 280, 10) }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/form/FormItem.vue b/packages/app/src/components/form/FormItem.vue
new file mode 100644
index 0000000000..f5a72f24e3
--- /dev/null
+++ b/packages/app/src/components/form/FormItem.vue
@@ -0,0 +1,48 @@
+
+
+
+ {{ t("contract.events.value") }}:
+
+
+ {{ data }}
+
+
+ {{ expanded ? t("contract.events.hide") : t("contract.events.showMore") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("transactions.table.feeDetails.paymaster") }}
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/Status.stories.ts b/packages/app/src/components/transactions/Status.stories.ts
new file mode 100644
index 0000000000..23d52f54bc
--- /dev/null
+++ b/packages/app/src/components/transactions/Status.stories.ts
@@ -0,0 +1,42 @@
+import Status from "./Status.vue";
+
+import type { TransactionStatus } from "@/composables/useTransaction";
+
+export default {
+ title: "Transactions/Status",
+ component: Status,
+};
+
+type Args = {
+ status: TransactionStatus;
+};
+
+const Template = (args: Args) => ({
+ components: { Status },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+ {{ item.infoTooltip }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/Table.stories.ts b/packages/app/src/components/transactions/Table.stories.ts
new file mode 100644
index 0000000000..f2c4820ac0
--- /dev/null
+++ b/packages/app/src/components/transactions/Table.stories.ts
@@ -0,0 +1,99 @@
+import { action, type HandlerFunction } from "@storybook/addon-actions";
+import vueRouter from "storybook-vue3-router";
+
+import TransactionsTable from "./Table.vue";
+
+import ExecuteTx from "@/../mock/transactions/Execute.json";
+
+import type { TransactionItem } from "@/composables/useTransaction";
+
+export default {
+ title: "Transactions/Table",
+ component: TransactionsTable,
+};
+
+type Args = {
+ transactions: TransactionItem[];
+ loading: boolean;
+ total?: number;
+ isLoadMoreRequestPending?: boolean;
+ isLoadMoreRequestFailed?: boolean;
+ loadMore?: HandlerFunction;
+ columns?: string[];
+};
+
+const Template = (args: Args) => ({
+ components: {
+ TransactionsTable,
+ },
+ setup() {
+ return { ...args };
+ },
+
+ template: `
+ -
+
-
+
+
{{ finishedStatus.text }} + + +
+
-
+
-
+ + {{ remainingStatus.text }} ++
+
+
+
+
+
+
+
+
+
+
+
+ + {{ t("transactions.statusComponent.ethereumNetwork") }} +
+ + +
+
+ {{ shortenFitText(decimalAmount, "right", 100, 10) }}
+
+ {{ decimalAmount }} {{ tokenInfo.symbol }}
+
+
+
+ {{ priceAmount }}
+
+
+ —
+ {{ decimalAmount }}
+
+ {{ text }}
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/TransactionNetworkSquareBlock.stories.ts b/packages/app/src/components/transactions/TransactionNetworkSquareBlock.stories.ts
new file mode 100644
index 0000000000..14601b935b
--- /dev/null
+++ b/packages/app/src/components/transactions/TransactionNetworkSquareBlock.stories.ts
@@ -0,0 +1,32 @@
+import TransactionNetworkSquareBlock from "@/components/transactions/TransactionNetworkSquareBlock.vue";
+
+import type { NetworkOrigin } from "@/types";
+
+export default {
+ title: "Transactions/TransactionNetworkSquareBlock",
+ component: TransactionNetworkSquareBlock,
+};
+
+type Args = {
+ network: NetworkOrigin;
+};
+
+const Template = (args: Args) => ({
+ components: { TransactionNetworkSquareBlock },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ {{ network }}
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/TransactionNonceTableCell.vue b/packages/app/src/components/transactions/TransactionNonceTableCell.vue
new file mode 100644
index 0000000000..5dde8176dc
--- /dev/null
+++ b/packages/app/src/components/transactions/TransactionNonceTableCell.vue
@@ -0,0 +1,53 @@
+
+
+ {{ nonce }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
new file mode 100644
index 0000000000..40fbb238d6
--- /dev/null
+++ b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
@@ -0,0 +1,330 @@
+
+
+ {{ t(`transactions.logs.options.${selected}`) }}
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/infoTable/TransferInfo.stories.ts b/packages/app/src/components/transactions/infoTable/TransferInfo.stories.ts
new file mode 100644
index 0000000000..82d586d924
--- /dev/null
+++ b/packages/app/src/components/transactions/infoTable/TransferInfo.stories.ts
@@ -0,0 +1,30 @@
+import TransferInfo from "@/components/transactions/infoTable/TransferInfo.vue";
+
+import type { Hash, NetworkOrigin } from "@/types";
+
+export default {
+ title: "Transactions/TransferInfo",
+ component: TransferInfo,
+};
+
+type Args = {
+ label: string;
+ address: Hash;
+ network: NetworkOrigin;
+};
+
+const Template = (args: Args) => ({
+ components: { TransferInfo },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+ Function: {{ methodInterface }}
+
+ {{
+ t("transactionData.errors.unableToDecode", {
+ error: te(`transactionData.errors.${error}`) ? t(`transactionData.errors.${error}`) : error,
+ })
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+ MethodID: {{ data!.sighash }}
+ [{{ index }}]: {{ item.encodedValue }}
+
+ {{ label }}
+
+ {{ shortenFitText(address, "left") }}
+
+
+
+ {{ shortenFitText(address, "left") }}
+
+ {{ shortenFitText(address, "left") }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/transactions/infoTable/TransferTableCell.stories.ts b/packages/app/src/components/transactions/infoTable/TransferTableCell.stories.ts
new file mode 100644
index 0000000000..4b26f215f0
--- /dev/null
+++ b/packages/app/src/components/transactions/infoTable/TransferTableCell.stories.ts
@@ -0,0 +1,41 @@
+import TransferTableCell from "@/components/transactions/infoTable/TransferTableCell.vue";
+
+import type { TokenTransfer } from "@/composables/useTransaction";
+
+export default {
+ title: "Transactions/TransferTableCell",
+ component: TransferTableCell,
+};
+
+type Args = {
+ transfer: TokenTransfer;
+};
+
+const Template = (args: Args) => ({
+ components: { TransferTableCell },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+
+
+
diff --git a/packages/app/src/components/transfers/EmptyState.vue b/packages/app/src/components/transfers/EmptyState.vue
new file mode 100644
index 0000000000..b928e265ab
--- /dev/null
+++ b/packages/app/src/components/transfers/EmptyState.vue
@@ -0,0 +1,26 @@
+
+
+ {{ t("transactions.table.for") }}
+ {{ transferAmount }}
+
+ Configure
+
+
+
+ 
+
+ Presets for popular tools
+ Easy setup for TypeScript, SCSS and more.
+
+
+
+ 
+
+ Build configuration
+ How to customize webpack and Babel
+
+
+
+ 
+
+ Styling
+ How to load and configure CSS libraries
+
+
+
+ 
+
+ Data
+ Providers and mocking for data libraries
+
+
+
+
+Learn
+
+
+
+ 
+
+ Storybook documentation
+ Configure, customize, and extend
+
+
+
+ 
+
+ In-depth guides
+ Best practices from leading teams
+
+
+
+ 
+
+ GitHub project
+ View the source and add issues
+
+
+
+ 
+
+ Discord chat
+ Chat with maintainers and the community
+
+
+
+
+
+ TipEdit the Markdown in{' '}
+
diff --git a/packages/app/src/stories/assets/code-brackets.svg b/packages/app/src/stories/assets/code-brackets.svg
new file mode 100644
index 0000000000..73de947760
--- /dev/null
+++ b/packages/app/src/stories/assets/code-brackets.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/colors.svg b/packages/app/src/stories/assets/colors.svg
new file mode 100644
index 0000000000..17d58d516e
--- /dev/null
+++ b/packages/app/src/stories/assets/colors.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/comments.svg b/packages/app/src/stories/assets/comments.svg
new file mode 100644
index 0000000000..6493a139f5
--- /dev/null
+++ b/packages/app/src/stories/assets/comments.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/direction.svg b/packages/app/src/stories/assets/direction.svg
new file mode 100644
index 0000000000..65676ac272
--- /dev/null
+++ b/packages/app/src/stories/assets/direction.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/flow.svg b/packages/app/src/stories/assets/flow.svg
new file mode 100644
index 0000000000..8ac27db403
--- /dev/null
+++ b/packages/app/src/stories/assets/flow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/plugin.svg b/packages/app/src/stories/assets/plugin.svg
new file mode 100644
index 0000000000..29e5c690c0
--- /dev/null
+++ b/packages/app/src/stories/assets/plugin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/repo.svg b/packages/app/src/stories/assets/repo.svg
new file mode 100644
index 0000000000..f386ee902c
--- /dev/null
+++ b/packages/app/src/stories/assets/repo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/stories/assets/stackalt.svg b/packages/app/src/stories/assets/stackalt.svg
new file mode 100644
index 0000000000..9b7ad27435
--- /dev/null
+++ b/packages/app/src/stories/assets/stackalt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/app/src/types.ts b/packages/app/src/types.ts
new file mode 100644
index 0000000000..d0c87863c2
--- /dev/null
+++ b/packages/app/src/types.ts
@@ -0,0 +1,61 @@
+export type Hash = `0x${string}` | string;
+
+export type Address = Hash;
+
+export type NetworkOrigin = "L1" | "L2";
+
+export enum ContractVerificationCodeFormatEnum {
+ soliditySingleFile = "solidity-single-file",
+ solidityMultiPart = "solidity-standard-json-input",
+ vyperSingleFile = "vyper-multi-file",
+ vyperMultiPart = "vyper-multi-file",
+}
+
+export type ContractVerificationCodeFormat =
+ | ContractVerificationCodeFormatEnum.soliditySingleFile
+ | ContractVerificationCodeFormatEnum.solidityMultiPart
+ | ContractVerificationCodeFormatEnum.vyperSingleFile
+ | ContractVerificationCodeFormatEnum.vyperMultiPart;
+
+export enum CompilerEnum {
+ solc = "solc",
+ zksolc = "zksolc",
+ vyper = "vyper",
+ zkvyper = "zkvyper",
+}
+
+export enum CompilationTypeOptionsEnum {
+ soliditySingleFile = "soliditySingleFile",
+ solidityMultiPart = "solidityMultiPart",
+ vyperSingleFile = "vyperSingleFile",
+ vyperMultiPart = "vyperMultiPart",
+}
+
+export type Compiler = CompilerEnum.solc | CompilerEnum.zksolc | CompilerEnum.vyper | CompilerEnum.zkvyper;
+
+export type ContractVerificationData = {
+ codeFormat: ContractVerificationCodeFormat;
+ contractAddress: string;
+ contractName: string;
+ optimizationUsed: boolean;
+ sourceCode:
+ | string
+ | {
+ language: string;
+ sources: {
+ [key: string]: {
+ content: string;
+ };
+ };
+ settings: {
+ optimizer: {
+ enabled: boolean;
+ };
+ };
+ };
+ zkCompilerVersion: string;
+ compilerVersion: string;
+ constructorArguments: string;
+};
+
+export type ContractVerificationStatus = "successful" | "failed" | "in_progress" | "queued";
diff --git a/packages/app/src/utils/constants.ts b/packages/app/src/utils/constants.ts
new file mode 100644
index 0000000000..834827ee7b
--- /dev/null
+++ b/packages/app/src/utils/constants.ts
@@ -0,0 +1,18 @@
+import { checksumAddress } from "./formatters";
+
+export const ETH_TOKEN_L2_ADDRESS = checksumAddress("0x000000000000000000000000000000000000800A");
+
+export const PROXY_CONTRACT_IMPLEMENTATION_ABI = [
+ {
+ inputs: [],
+ name: "implementation",
+ outputs: [
+ {
+ internalType: "address",
+ type: "address",
+ },
+ ],
+ stateMutability: "view",
+ type: "function",
+ },
+];
diff --git a/packages/app/src/utils/formatters.ts b/packages/app/src/utils/formatters.ts
new file mode 100644
index 0000000000..b9ea5409e5
--- /dev/null
+++ b/packages/app/src/utils/formatters.ts
@@ -0,0 +1,86 @@
+import { BigNumber, type BigNumberish, ethers } from "ethers";
+import { isHexString } from "ethers/lib/utils";
+
+import type { Token } from "@/composables/useToken";
+import type { HexDecimals } from "@/composables/useTrace";
+import type { Address } from "@/types";
+
+export function formatMoney(num: number, maximumFractionDigits = 1) {
+ return new Intl.NumberFormat("en-US", {
+ notation: num > 99_999_999 ? "compact" : "standard",
+ style: "currency",
+ currency: "USD",
+ maximumFractionDigits,
+ }).format(num);
+}
+
+export function formatPrice(num: number) {
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(num);
+}
+
+export function formatWithSpaces(num: number) {
+ return new Intl.NumberFormat("fr-FR").format(num);
+}
+
+export function stringFromAsciiArray(asciiArray: number[]) {
+ return asciiArray.reduce((acc, currentValue) => acc + String.fromCharCode(currentValue), "");
+}
+
+export function shortValue(value: string, count = 13): string {
+ return !value
+ ? ""
+ : value.length < count
+ ? value
+ : value.substring(0, count / 2) + "..." + value.substring(value.length - 4, value.length);
+}
+
+export function formatValue(value: BigNumberish, decimals: number): string {
+ return ethers.utils.formatUnits(BigNumber.from(value), decimals);
+}
+
+export function formatBigNumberish(value: BigNumberish, decimals: number) {
+ return ethers.utils.formatUnits(value, decimals).replace(/.0$/g, "");
+}
+
+export function checksumAddress(address: Address | string): Address {
+ return ethers.utils.getAddress(address) as Address;
+}
+
+export function convert(value: BigNumberish | null, token: Token | null, tokenPrice: string): string {
+ if (token && value) {
+ return formatValue(
+ BigNumber.from(value)
+ .mul(BigNumber.from(Math.round(+parseFloat(tokenPrice).toFixed(6) * 1000000)))
+ .div(1000000)
+ .toString(),
+ token.decimals
+ );
+ } else {
+ return "";
+ }
+}
+
+export function formatHexDecimals(value: string, showValueAs: HexDecimals) {
+ const validValue = value === "0x" ? "0" : value;
+ const prefix = isHexString(validValue) ? "" : "0x";
+ if (showValueAs === "Dec") {
+ return BigNumber.from(prefix + validValue).toString();
+ }
+ return BigNumber.from(prefix + validValue).toHexString();
+}
+
+export function formatPricePretty(amount: BigNumberish, decimals: number, usdPrice: string) {
+ const price = +usdPrice * +formatBigNumberish(amount, decimals);
+ const leadingZeroes = price.toString().split(".")[1]?.match(/^0*/)?.[0].length || 0;
+ const priceDecimals = Math.max(2, Math.min(5, leadingZeroes + 1));
+ if (price === 0) {
+ return "$0";
+ } else if (price < 0.00001) {
+ return `<${formatMoney(0.00001, 5)}`;
+ } else {
+ return `${formatMoney(price, priceDecimals)}`;
+ }
+}
diff --git a/packages/app/src/utils/helpers.ts b/packages/app/src/utils/helpers.ts
new file mode 100644
index 0000000000..71d2ab80fc
--- /dev/null
+++ b/packages/app/src/utils/helpers.ts
@@ -0,0 +1,130 @@
+import { format } from "date-fns";
+import { utils } from "ethers";
+import { BOOTLOADER_FORMAL_ADDRESS } from "zksync-web3/build/src/utils";
+
+import type { DecodingType } from "@/components/transactions/infoTable/HashViewer.vue";
+import type { AbiFragment } from "@/composables/useAddress";
+import type { InputType, TransactionEvent, TransactionLogEntry } from "@/composables/useEventLog";
+import type { TokenTransfer } from "@/composables/useTransaction";
+
+export function utcStringFromUnixTimestamp(timestamp: number) {
+ const isoDate = new Date(+`${timestamp}000`).toISOString();
+ return format(new Date(isoDate.slice(0, -1)), "yyyy-MM-dd HH:mm 'UTC'");
+}
+
+export function utcStringFromISOString(ISOString: string) {
+ return format(new Date(ISOString.slice(0, -1)), "yyyy-MM-dd HH:mm:ss 'UTC'");
+}
+
+export function localDateFromISOString(ISOString: string) {
+ return format(new Date(ISOString), "yyyy-MM-dd HH:mm");
+}
+
+export function localDateFromUnixTimestamp(timestamp: number) {
+ return format(new Date(timestamp * 1000), "yyyy-MM-dd HH:mm");
+}
+
+export function ISOStringFromUnixTimestamp(timestamp: number) {
+ return new Date(+`${timestamp}000`).toISOString();
+}
+
+export function camelCaseFromSnakeCase(str: string) {
+ return str.replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function arrayHalfDivider(arr: any[]) {
+ const newArray = [...arr];
+ const middleIndex = Math.ceil(newArray.length / 2);
+ return [newArray.splice(0, middleIndex), newArray];
+}
+
+export function contractInputTypeToHumanType(type: InputType): DecodingType | undefined {
+ switch (type) {
+ case "string":
+ return "text";
+ case "address":
+ return "address";
+ case "uint8":
+ case "uint256":
+ return "number";
+
+ default:
+ return undefined;
+ }
+}
+
+export function getTypeFromEvent(event: TransactionEvent, index: number) {
+ const inputIndex = index - 1;
+ if (!event || !event.inputs[inputIndex]) {
+ return undefined;
+ }
+ return contractInputTypeToHumanType(event.inputs[inputIndex].type);
+}
+
+export function isArrayFunctionType(type: string) {
+ return !!type.match(/(.*)\[(.*)\]/);
+}
+export function getRawFunctionType(type: string) {
+ const arrayMatch = type.match(/(.*)\[(.*)\]/);
+ return arrayMatch ? arrayMatch[1] : type;
+}
+export function getRequiredArrayLength(type: string) {
+ const value = parseInt(type.match(/(.*)\[(.*)\]/)?.[2] ?? "");
+ return isNaN(value) ? undefined : value;
+}
+
+/* This is a hack needed to mock the location in tests */
+export const getWindowLocation = () => window.location;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mapOrder = (array: any[], order: string[], key: string) => {
+ return array.sort((a, b) => {
+ let indA = order.indexOf(a[key]);
+ let indB = order.indexOf(b[key]);
+ if (indA == -1) {
+ indA = order.length;
+ }
+ if (indB == -1) {
+ indB = order.length;
+ }
+ return indA - indB;
+ });
+};
+
+export function decodeLogWithABI(log: TransactionLogEntry, abi: AbiFragment[]): TransactionEvent | undefined {
+ const contractInterface = new utils.Interface(abi);
+ try {
+ const decodedLog = contractInterface.parseLog({
+ topics: log.topics,
+ data: log.data,
+ });
+ return {
+ name: decodedLog.name,
+ inputs: decodedLog.eventFragment.inputs.map((input) => ({
+ name: input.name,
+ type: input.type as InputType,
+ value: decodedLog.args[input.name]?.toString(),
+ })),
+ };
+ } catch {
+ return undefined;
+ }
+}
+
+export function sortTokenTransfers(transfers: TokenTransfer[]): TokenTransfer[] {
+ return [...transfers].sort((_, t) => {
+ if (t.to === BOOTLOADER_FORMAL_ADDRESS || t.from === BOOTLOADER_FORMAL_ADDRESS) {
+ return -1;
+ }
+ return 0;
+ });
+}
+
+export function truncateNumber(value: string, decimal: number): string {
+ if (!decimal) {
+ return value;
+ }
+ const regex = new RegExp(`\\d+(?:\\.\\d{0,${decimal}})?`);
+ return value.match(regex)![0];
+}
diff --git a/packages/app/src/utils/highlight.ts b/packages/app/src/utils/highlight.ts
new file mode 100644
index 0000000000..7b1f293b2a
--- /dev/null
+++ b/packages/app/src/utils/highlight.ts
@@ -0,0 +1,29 @@
+export const highlight = (text: string, query: string): string => {
+ const map = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ };
+
+ const escaped = text.replace(/[&<>"']/g, (m: string) => {
+ return map[m as keyof typeof map];
+ });
+ if (!query) {
+ return escaped;
+ }
+
+ const index = escaped.toLowerCase().indexOf(query.toLowerCase());
+ if (index > -1) {
+ return (
+ escaped.substring(0, index) +
+ '' +
+ escaped.substring(index, index + query.length) +
+ "" +
+ escaped.substring(index + query.length, escaped.length)
+ );
+ } else {
+ return escaped;
+ }
+};
diff --git a/packages/app/src/utils/logger.ts b/packages/app/src/utils/logger.ts
new file mode 100644
index 0000000000..530aaadcd1
--- /dev/null
+++ b/packages/app/src/utils/logger.ts
@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-console */
+
+import { BrowserTracing } from "@sentry/tracing";
+import * as Sentry from "@sentry/vue";
+
+import type { Vue } from "@sentry/vue/types/types";
+import type { Router } from "vue-router";
+
+let sentryReady = false;
+
+export function useSentry(
+ app: Vue | Vue[],
+ applicationId: string,
+ appEnvironment: string,
+ version: string,
+ router: Router
+) {
+ if (applicationId?.length && process.env.NODE_ENV === "production") {
+ Sentry.init({
+ app,
+ dsn: applicationId,
+ integrations: [
+ new BrowserTracing({
+ routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+ tracePropagationTargets: [version],
+ }),
+ ],
+ environment: appEnvironment,
+ release: version,
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for performance monitoring.
+ // We recommend adjusting this value in production
+ tracesSampleRate: 1.0,
+ });
+ sentryReady = true;
+ }
+}
+
+export default {
+ log(...data: any[]): void {
+ console.log(...data);
+ },
+
+ error(e: any, ...data: any[]): void {
+ if (sentryReady) {
+ Sentry.captureException(e);
+ }
+
+ if (process.env.NODE_ENV !== "test") {
+ console.error(e, ...data);
+ }
+ },
+
+ warn(message: string, ...data: any[]): void {
+ if (sentryReady) {
+ Sentry.captureMessage(message);
+ }
+
+ if (process.env.NODE_ENV !== "test") {
+ console.warn(message, ...data);
+ }
+ },
+};
diff --git a/packages/app/src/utils/mappers.ts b/packages/app/src/utils/mappers.ts
new file mode 100644
index 0000000000..617de1b457
--- /dev/null
+++ b/packages/app/src/utils/mappers.ts
@@ -0,0 +1,37 @@
+import { BigNumber } from "ethers";
+
+import type { AbiFragment } from "@/composables/useAddress";
+import type { TransactionLogEntry } from "@/composables/useEventLog";
+import type { HexDecimals, TraceStep } from "@/composables/useTrace";
+
+import { checksumAddress, formatHexDecimals } from "@/utils/formatters";
+import { decodeLogWithABI } from "@/utils/helpers";
+
+export function mapContractEvents(contractEvents: TransactionLogEntry[], abi?: AbiFragment[]): TransactionLogEntry[] {
+ return contractEvents.map((e) => ({
+ ...e,
+ blockNumber: BigNumber.from(e.blockNumber),
+ event: abi ? decodeLogWithABI(e, abi) : undefined,
+ address: checksumAddress(e.address),
+ }));
+}
+
+export function mapStep(step: TraceStep, dataFormat: HexDecimals) {
+ return {
+ ...step,
+ memory_interactions: [
+ ...step.memory_interactions.map((e) => ({
+ ...e,
+ address: formatHexDecimals(e.address.toString(), dataFormat),
+ value: formatHexDecimals(e.value, dataFormat),
+ })),
+ ],
+ memory_snapshots: [
+ ...step.memory_snapshots.map((e) => ({
+ ...e,
+ values: [...e.values.map((value) => formatHexDecimals(value, dataFormat))],
+ })),
+ ],
+ registers: [...step.registers.map((value) => formatHexDecimals(value, dataFormat))],
+ };
+}
diff --git a/packages/app/src/utils/validators.ts b/packages/app/src/utils/validators.ts
new file mode 100644
index 0000000000..94b2226852
--- /dev/null
+++ b/packages/app/src/utils/validators.ts
@@ -0,0 +1,24 @@
+import { ethers } from "ethers";
+
+export function isAddress(address: string): boolean {
+ return ethers.utils.isAddress(address?.toLowerCase());
+}
+
+export const isTransactionHash = (s: string) => {
+ return /^0x([A-Fa-f0-9]{64})$/.test(s);
+};
+
+export const isBlockNumber = (s: number | string) => {
+ const n = Number(s);
+ return /^[0-9*+-]+$/.test(s?.toString()) && n >= 0 && n <= Number.MAX_SAFE_INTEGER;
+};
+
+export const validateAbiValue = (value: string, type: string) => {
+ try {
+ /* Will throw an error in case if it is impossible to encode the value to required type */
+ ethers.utils.defaultAbiCoder.encode([type], [value]);
+ } catch {
+ return false;
+ }
+ return true;
+};
diff --git a/packages/app/src/views/AddressView.vue b/packages/app/src/views/AddressView.vue
new file mode 100644
index 0000000000..1048ee41b4
--- /dev/null
+++ b/packages/app/src/views/AddressView.vue
@@ -0,0 +1,52 @@
+
+ src/stories/Introduction.stories.mdx
+
+
+
+
+
+
+
+ {{ parseInt(id) }}
+
+
+
+
+
+
diff --git a/packages/app/src/views/BatchesView.vue b/packages/app/src/views/BatchesView.vue
new file mode 100644
index 0000000000..4d9f294071
--- /dev/null
+++ b/packages/app/src/views/BatchesView.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+
+
+
+ {{ t("batches.transactionTable.title") }}
+
+
+
+
+
+
diff --git a/packages/app/src/views/BlockView.vue b/packages/app/src/views/BlockView.vue
new file mode 100644
index 0000000000..ce8fe4d117
--- /dev/null
+++ b/packages/app/src/views/BlockView.vue
@@ -0,0 +1,127 @@
+
+
+
+ {{ t("batches.title") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ parseInt(id) }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/BlocksView.vue b/packages/app/src/views/BlocksView.vue
new file mode 100644
index 0000000000..63a6bfac69
--- /dev/null
+++ b/packages/app/src/views/BlocksView.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("blocks.transactionTable.title") }}
+
+
+
+
+
+
diff --git a/packages/app/src/views/ContractVerificationView.vue b/packages/app/src/views/ContractVerificationView.vue
new file mode 100644
index 0000000000..2bc9272bfa
--- /dev/null
+++ b/packages/app/src/views/ContractVerificationView.vue
@@ -0,0 +1,668 @@
+
+
+
+ {{ t("blocksView.title") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("contractVerification.resources.links.hardhat") }}
+
+
+
+
+
+
+ {{
+ contractVerificationErrorMessage
+ ? contractVerificationErrorMessage
+ : t("contractVerification.form.unknownError")
+ }}
+
+
+
+
+ {{ t("contractVerification.form.contractAddress.underline") }}
+
+
+
+
+
+
+
+
+
+ {{
+ t(`contractVerification.form.contractName.${selectedCompiler.name}Underline`)
+ }}
+
+
+
+ {{ t("contractVerification.form.contractPath.underline") }}
+
+
+
+
+
+ {{ t("contractVerification.form.flattenerInfo.solidityFlattener") }}
+
+
+
+
+ {{ t("contractVerification.form.flattenerInfo.solidityFlattery") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/DebuggerView.vue b/packages/app/src/views/DebuggerView.vue
new file mode 100644
index 0000000000..9127b9164c
--- /dev/null
+++ b/packages/app/src/views/DebuggerView.vue
@@ -0,0 +1,554 @@
+SourceNode
+
+
+
+ {{ t("contractVerification.title") }}
+{{ t("contractVerification.subtitle") }}
+
+
+
+
+
+
+
+ {{ t("contractVerification.compilationError.title") }}
+
+ {{ item }}
+
+
+ {{
+ expanded
+ ? t("contractVerification.compilationError.showLessButton")
+ : t("contractVerification.compilationError.showMoreButton")
+ }}
+
+ {{ t("contractVerification.form.contractAddress.title") }}
+{{ t("contractVerification.form.compilationInfo") }}
+
+
+ {{ t(`contractVerification.form.${selectedZkCompiler.name}Version.details`) }}
+
+
+ {{ t("contractVerification.form.solcVersion.zkVM") }}
+
+
+
+
+ {{ t("contractVerification.form.optimizationUsed.options.yes") }}
+
+
+ {{ t("contractVerification.form.optimizationUsed.options.no") }}
+
+
+ {{ t("contractVerification.form.optimizationUsed.underline") }}
+ Contract info
+
+
+
+
+
+
+ {{ t("debuggerTool.transaction") }}
+
+
+
+
+
+ -
+
-
+ ++
+ + + + + + + + + +++ ++ + + +++ + + ++ {{ t(`debuggerTool.${data.type}`) }} + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/MaintenanceView.vue b/packages/app/src/views/MaintenanceView.vue
new file mode 100644
index 0000000000..d13560896c
--- /dev/null
+++ b/packages/app/src/views/MaintenanceView.vue
@@ -0,0 +1,59 @@
+
+ {{ t("blockExplorer.title") }}
+{{ t("blockExplorer.subtitle") }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("batches.tooltipInfo") }}
+
+ {{ t("blockExplorer.batches") }}
+{{ t("batches.table.notFoundHomePage") }}
+ +
+
+
+
+
+
+
+
+ {{ t("blockExplorer.latestTransactions") }}
+{{ t("transactions.table.notFoundHomePage") }}
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/NotFound.vue b/packages/app/src/views/NotFound.vue
new file mode 100644
index 0000000000..3a922c8635
--- /dev/null
+++ b/packages/app/src/views/NotFound.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/TokensView.vue b/packages/app/src/views/TokensView.vue
new file mode 100644
index 0000000000..b14d415c32
--- /dev/null
+++ b/packages/app/src/views/TokensView.vue
@@ -0,0 +1,72 @@
+
+ {{ t("notFound.title") }}
++ {{ t("notFound.description") }} +
+
+ {{ t("notFound.contactSupportTitle") }}
+ {{ t("notFound.contactSupport") }}
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/TransactionView.vue b/packages/app/src/views/TransactionView.vue
new file mode 100644
index 0000000000..6e5aa0ba06
--- /dev/null
+++ b/packages/app/src/views/TransactionView.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+ {{ t("tokensView.heading") }}
+
+ {{ t("tokensView.offChainDataPoweredBy") }}{{ " " }}
+ CoinGecko API
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/src/views/TransactionsView.vue b/packages/app/src/views/TransactionsView.vue
new file mode 100644
index 0000000000..e9172a8f91
--- /dev/null
+++ b/packages/app/src/views/TransactionsView.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js
new file mode 100644
index 0000000000..28d9ad07bb
--- /dev/null
+++ b/packages/app/tailwind.config.js
@@ -0,0 +1,54 @@
+const colors = require("tailwindcss/colors");
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+ content: ["./src/**/*.{html,js,ts,vue}"],
+ theme: {
+ container: false,
+ extend: {
+ fontFamily: {
+ sans: ["Roboto", ...defaultTheme.fontFamily.sans],
+ mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
+ },
+ colors: {
+ primary: {
+ 50: "#F3F5FF",
+ 100: "#D9D9F9",
+ 200: "#CBCBFF",
+ 300: "#8C8DFC",
+ 400: "#5D65B9",
+ 500: "#53579f",
+ 600: "#4E529A",
+ 700: "#32325D",
+ 800: "#27274E",
+ 900: "#11142B",
+ },
+ secondary: colors.yellow,
+ neutral: colors.gray,
+
+ success: colors.green,
+ error: colors.red,
+ warning: colors.yellow,
+ },
+ screens: {
+ xs: "480px",
+ "4xl": "1920px",
+ },
+ },
+ },
+ plugins: [
+ require("@tailwindcss/forms"),
+ function ({ addComponents }) {
+ addComponents({
+ ".container": {
+ maxWidth: "90%",
+ marginLeft: "auto",
+ marginRight: "auto",
+ "@screen xl": {
+ maxWidth: "1240px",
+ },
+ },
+ });
+ },
+ ],
+};
diff --git a/packages/app/tests/App.spec.ts b/packages/app/tests/App.spec.ts
new file mode 100644
index 0000000000..ef52295bee
--- /dev/null
+++ b/packages/app/tests/App.spec.ts
@@ -0,0 +1,84 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+const useTitleMock = vi.fn();
+vi.mock("@vueuse/core", () => {
+ return {
+ useTitle: useTitleMock,
+ };
+});
+const maintenanceMock = vi.fn(() => false);
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ isReady: computed(() => true),
+ currentNetwork: computed(() => ({ maintenance: maintenanceMock() })),
+ }),
+ };
+});
+vi.mock("@/composables/useLocalization", () => {
+ return {
+ default: () => ({
+ setup: vi.fn(),
+ }),
+ };
+});
+vi.mock("@/composables/useRouteTitle", () => {
+ return {
+ default: () => ({
+ title: computed(() => "Page title"),
+ }),
+ };
+});
+
+import enUS from "@/locales/en.json";
+
+import App from "@/App.vue";
+import $testId from "@/plugins/testId";
+import MaintenanceView from "@/views/MaintenanceView.vue";
+
+describe("App:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ const global = {
+ stubs: ["the-header", "the-footer", "router-view", "MaintenanceView"],
+ plugins: [i18n, $testId],
+ mocks: {
+ $route: { name: "test-route" },
+ },
+ };
+
+ it("uses title", async () => {
+ const mock = useTitleMock.mockClear();
+ mount(App, {
+ global,
+ });
+ expect(mock).toHaveBeenCalledOnce();
+ mock.mockRestore();
+ });
+ it("shows maintenance when network maintenance is true", () => {
+ const mockMaintenance = maintenanceMock.mockReturnValue(true);
+ const wrapper = mount(App, {
+ global,
+ });
+
+ expect(wrapper.findComponent(MaintenanceView).exists()).toBe(true);
+ mockMaintenance.mockRestore();
+ });
+ it("shows router-view when network maintenance is false", () => {
+ const wrapper = mount(App, {
+ global,
+ });
+ expect(wrapper.findComponent("router-view-stub").exists()).toBe(true);
+ });
+});
diff --git a/packages/app/tests/components/Account.spec.ts b/packages/app/tests/components/Account.spec.ts
new file mode 100644
index 0000000000..39fb86887f
--- /dev/null
+++ b/packages/app/tests/components/Account.spec.ts
@@ -0,0 +1,55 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import Account from "@/components/Account.vue";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+const router = {
+ replace: vi.fn(),
+ currentRoute: {
+ value: {},
+ },
+};
+
+vi.mock("vue-router", () => ({
+ useRouter: () => router,
+ useRoute: () => vi.fn(),
+}));
+
+describe("Account:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ it("renders component", () => {
+ const { container } = render(Account, {
+ props: {
+ account: {
+ accountType: "eOA",
+ address: "0xDB754A7833163caAB170814c5F9cAf32F09FDEd4",
+ balances: {},
+ sealedNonce: 0,
+ verifiedNonce: 0,
+ },
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub, TransfersTable: { template: "" } },
+ },
+ });
+ expect(container.querySelector(".breadcrumb-item-active")?.textContent).toBe("Account 0xDB75...DEd4");
+ expect(container.querySelector(".contract-info-table")).toBeDefined();
+ expect(container.querySelector(".balance-table")).toBeDefined();
+ expect(container.querySelector(".transactions-table")).toBeDefined();
+ });
+});
diff --git a/packages/app/tests/components/AddressLink.spec.ts b/packages/app/tests/components/AddressLink.spec.ts
new file mode 100644
index 0000000000..f35af187c4
--- /dev/null
+++ b/packages/app/tests/components/AddressLink.spec.ts
@@ -0,0 +1,94 @@
+import { computed } from "vue";
+
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import AddressLink from "@/components/AddressLink.vue";
+
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://sepolia.etherscan.io/");
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+ }),
+ };
+});
+
+const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [],
+};
+
+describe("Address Link", () => {
+ it("renders default state", async () => {
+ const wrapper = mount(AddressLink, {
+ global,
+ props: {
+ address: "0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a16",
+ },
+ });
+ expect(wrapper.text()).toBe("0xc31F9d4cbf557b6cF0AD2AF66D44c358F7Fa7a16");
+ });
+ it("renders default slot", async () => {
+ const wrapper = mount(AddressLink, {
+ global,
+ props: {
+ address: "0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a16",
+ },
+ slots: {
+ default: "Default Slot",
+ },
+ });
+ expect(wrapper.text()).toBe("Default Slot");
+ });
+ it("renders the link", async () => {
+ const wrapper = mount(AddressLink, {
+ global,
+ props: {
+ address: "0x0000000000000000000000000000000000000001",
+ },
+ });
+ await wrapper.vm.$nextTick();
+ expect(wrapper.findComponent(RouterLinkStub).props().to.name).toBe("address");
+ expect(wrapper.findComponent(RouterLinkStub).props().to.params.address).toBe(
+ "0x0000000000000000000000000000000000000001"
+ );
+ });
+ it("renders link that goes to etherscan if network is 'L1'", async () => {
+ const wrapper = mount(AddressLink, {
+ global,
+ props: {
+ address: "0x0000000000000000000000000000000000000001",
+ network: "L1",
+ },
+ });
+ expect(wrapper.find("a").attributes().href).toBe(
+ "https://sepolia.etherscan.io//address/0x0000000000000000000000000000000000000001"
+ );
+ });
+ describe("when L1 explorer url is not set", () => {
+ let mock1ExplorerUrl: Mock;
+ beforeEach(() => {
+ mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+ });
+
+ afterEach(() => {
+ mock1ExplorerUrl.mockRestore();
+ });
+
+ it("renders L1 address as text instead of link", async () => {
+ const wrapper = mount(AddressLink, {
+ global,
+ props: {
+ address: "0x0000000000000000000000000000000000000001",
+ network: "L1",
+ },
+ });
+ expect(wrapper.findAll("a").length).toBe(0);
+ expect(wrapper.find("span").text()).toBe("0x0000000000000000000000000000000000000001");
+ });
+ });
+});
diff --git a/packages/app/tests/components/ConnectMetamaskButton.spec.ts b/packages/app/tests/components/ConnectMetamaskButton.spec.ts
new file mode 100644
index 0000000000..e12e601822
--- /dev/null
+++ b/packages/app/tests/components/ConnectMetamaskButton.spec.ts
@@ -0,0 +1,105 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import { useWalletMock } from "../mocks";
+
+import ConnectMetaMaskButton from "@/components/ConnectMetamaskButton.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("ConnectMetaMaskButton:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("shows default state when wallet isn't connected", async () => {
+ const mock = useWalletMock({
+ isReady: computed(() => true),
+ isMetamaskInstalled: computed(() => true),
+ });
+ const wrapper = mount(ConnectMetaMaskButton, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ const connectButton = wrapper.find(".login-button");
+ expect(connectButton.text()).toBe(i18n.global.t("connectMetamaskButton.label"));
+ expect(connectButton.attributes("disabled")).toBe(undefined);
+ mock.mockRestore();
+ });
+ it("shows connecting state when connection is pending", async () => {
+ const mock = useWalletMock({
+ isConnectPending: computed(() => true),
+ });
+
+ const wrapper = mount(ConnectMetaMaskButton, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ const connectButton = wrapper.find(".login-button");
+ expect(connectButton.text()).toBe(i18n.global.t("connectMetamaskButton.connecting"));
+ expect(connectButton.attributes("disabled")).toBe("");
+ mock.mockRestore();
+ });
+ it("shows address when wallet is connected", async () => {
+ const mock = useWalletMock({
+ address: computed(() => "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b"),
+ });
+
+ const wrapper = mount(ConnectMetaMaskButton, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".address-text").text()).toBe("0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b");
+ mock.mockRestore();
+ });
+ it("connects when button is clicked", async () => {
+ const mockConnect = vi.fn();
+ const mock = useWalletMock({
+ isReady: computed(() => true),
+ isMetamaskInstalled: computed(() => true),
+ connect: mockConnect,
+ });
+
+ const wrapper = mount(ConnectMetaMaskButton, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ await wrapper.find(".login-button").trigger("click");
+ expect(mockConnect).toHaveBeenCalledOnce();
+ mock.mockRestore();
+ });
+ it("disconnects when logout button is clicked", async () => {
+ const mockDisconnect = vi.fn();
+ const mock = useWalletMock({
+ address: computed(() => "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b"),
+ disconnect: mockDisconnect,
+ });
+
+ const wrapper = mount(ConnectMetaMaskButton, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ await wrapper.find(".dropdown-button").trigger("click");
+ await wrapper.find(".logout-button").trigger("click");
+ expect(mockDisconnect).toHaveBeenCalledOnce();
+ mock.mockRestore();
+ });
+});
diff --git a/packages/app/tests/components/Contract.spec.ts b/packages/app/tests/components/Contract.spec.ts
new file mode 100644
index 0000000000..0ccd2c5cf4
--- /dev/null
+++ b/packages/app/tests/components/Contract.spec.ts
@@ -0,0 +1,93 @@
+import { createI18n } from "vue-i18n";
+
+import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import { useContextMock } from "./../mocks";
+
+import Contract from "@/components/Contract.vue";
+
+import ERC20Contract from "@/../mock/contracts/ERC20.json";
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+const router = {
+ replace: vi.fn(),
+ currentRoute: {
+ value: {},
+ },
+};
+
+vi.mock("vue-router", () => ({
+ useRouter: () => router,
+ useRoute: () => ({
+ query: {
+ page: vi.fn(),
+ },
+ }),
+}));
+
+describe("Contract:", () => {
+ let mockContext: SpyInstance;
+
+ beforeEach(() => {
+ mockContext = useContextMock();
+ });
+
+ afterEach(() => {
+ mockContext?.mockRestore();
+ });
+
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("renders component", () => {
+ const { container } = render(Contract, {
+ props: {
+ contract: {
+ ...ERC20Contract.info,
+ verificationInfo: null,
+ },
+ pending: false,
+ failed: false,
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub, TransfersTable: { template: "" } },
+ },
+ });
+ expect(container.querySelector(".breadcrumb-item-active")?.textContent).toBe("Contract 0x0cc7...dc1b");
+ expect(container.querySelector(".title-container")?.textContent?.replace(/\u00a0/g, " ")).toBe(
+ "Contract 0x0cc7...dc1b"
+ );
+ expect(container.querySelector(".contract-info-table")).toBeDefined();
+ expect(container.querySelector(".balance-table")).toBeDefined();
+ const tabs = container.querySelectorAll(".tab-head li");
+ expect(tabs[0].querySelector("button")?.textContent).toBe("Transactions");
+ expect(tabs[1].querySelector("button")?.textContent).toBe("Transfers");
+ expect(tabs[2].querySelector("button")?.textContent).toBe("Contract");
+ expect(tabs[3].querySelector("button")?.textContent).toBe("Events");
+ });
+ it("renders contract name in the headline when contract is verified", () => {
+ const { container } = render(Contract, {
+ props: {
+ contract: ERC20Contract.info,
+ pending: false,
+ failed: false,
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: ["router-link"],
+ },
+ });
+ expect(container.querySelector(".title-container")?.textContent?.trim()).toBe("DARA2");
+ });
+});
diff --git a/packages/app/tests/components/EstimatedCostOfTransfers.spec.ts b/packages/app/tests/components/EstimatedCostOfTransfers.spec.ts
new file mode 100644
index 0000000000..bba6e0619f
--- /dev/null
+++ b/packages/app/tests/components/EstimatedCostOfTransfers.spec.ts
@@ -0,0 +1,49 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+
+import EstimatedCostOfTransfers from "@/components/EstimatedCostOfTransfers.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("EstimatedCostOfTransfers:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("renders component base on props", () => {
+ const { container } = render(EstimatedCostOfTransfers, {
+ props: {
+ costs: [
+ {
+ label: "Test1 label",
+ value: 44.5,
+ description: "Test1 description",
+ },
+ {
+ label: "Test2 label",
+ value: 72.2,
+ },
+ ],
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ const costs = container.querySelectorAll(".cost");
+ const popover = container.querySelectorAll(".popover-container");
+
+ expect(popover[0].textContent).toContain("?");
+ expect(costs[0].textContent).toContain("Test1 label");
+ expect(costs[0].textContent).toContain("$44.5");
+ expect(costs[1].textContent).toContain("Test2 label");
+ expect(costs[1].textContent).toContain("$72.2");
+ });
+});
diff --git a/packages/app/tests/components/FeeData.spec.ts b/packages/app/tests/components/FeeData.spec.ts
new file mode 100644
index 0000000000..c12493e2ca
--- /dev/null
+++ b/packages/app/tests/components/FeeData.spec.ts
@@ -0,0 +1,256 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { fireEvent, render } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import { ETH_TOKEN_MOCK } from "../mocks";
+
+import { default as FeeDataComponent } from "@/components/FeeData.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { FeeData } from "@/composables/useTransaction";
+
+import $testId from "@/plugins/testId";
+
+vi.mock("@/composables/useToken", () => {
+ return {
+ default: () => ({
+ getTokenInfo: () => undefined,
+ tokenInfo: computed(() => ({
+ l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+ name: "Ether",
+ symbol: "ETH",
+ decimals: 18,
+ usdPrice: 150,
+ })),
+ }),
+ };
+});
+
+const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+});
+
+const feeData = {
+ amountPaid: "10000000000000000",
+ isPaidByPaymaster: false,
+ refunds: [
+ {
+ tokenInfo: {
+ decimals: 18,
+ l1Address: "0x0000000000000000000000000000000000000000",
+ l2Address: "0x0000000000000000000000000000000000000000",
+ symbol: "ETH",
+ name: "Ether",
+ usdPrice: 3500,
+ },
+ amount: "1000000",
+ from: "0x0000000000000000000000000000000000008001",
+ to: "0x9adEe6D82c003FF2E0F2026A13ae80736CA61163",
+ type: "transfer",
+ fromNetwork: "L2",
+ toNetwork: "L2",
+ },
+ ],
+ amountRefunded: "1000000",
+};
+
+const feeDataPaymaster = {
+ ...feeData,
+ isPaidByPaymaster: true,
+ paymasterAddress: "0x9adEe6D82c003FF2E0F2026A13ae80736CA61163",
+};
+
+const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [$testId, i18n],
+};
+
+describe("FeeToken", () => {
+ it("renders amount and token correctly", async () => {
+ const wrapper = mount(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ showDetails: false,
+ },
+ });
+ await wrapper.vm.$nextTick();
+ expect(wrapper.find(".token-amount").text()).toBe("0.01");
+ expect(wrapper.find(".token-symbol").text()).toBe(ETH_TOKEN_MOCK.symbol);
+ expect(wrapper.find(".token-price").text()).toBe("$1.50");
+ });
+ it("handles amount update correctly", async () => {
+ const wrapper = mount(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("0.01");
+ await wrapper.setProps({
+ feeData: feeData as FeeData,
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("0.01");
+ });
+
+ it("does not display fee details button when showDetails is falsy", async () => {
+ const wrapper = mount(FeeDataComponent, {
+ global,
+ props: {
+ showDetails: false,
+ feeData: feeData as FeeData,
+ },
+ });
+
+ expect(wrapper.find(".toggle-button").exists()).toBe(false);
+ });
+
+ it("displays the initial fee details when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ expect(container.querySelector(".details-data-container .details-title")?.textContent).toBe("Initial:");
+ expect(container.querySelector(".details-data-container .token-amount")?.textContent).toBe("0.010000000001");
+ });
+
+ it("displays the refunds details when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ expect(container.querySelector(".details-data-container:nth-child(2) .details-title")?.textContent).toBe(
+ "Refunded:"
+ );
+ expect(container.querySelector(".details-data-container:nth-child(2) .token-amount")?.textContent).toBe(
+ "0.000000000001"
+ );
+ });
+
+ describe("when transaction fee is not paid by paymaster", () => {
+ it("does not display paid by paymaster label when fee is not paid by paymaster", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+ expect(container.querySelector(".payed-by-paymaster-label")).toBe(null);
+ });
+
+ it("displays the refunds when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ const transfers = container.querySelectorAll(".fee-transfers-container .transfer-container");
+ expect(transfers.length).toBe(1);
+ const transferInfo = transfers[0].querySelectorAll(".transfer-info-container");
+ expect(transferInfo[0].querySelector(".address span")?.textContent).toBe("0x00000000000...8001");
+ expect(transferInfo[0].querySelector(".paymaster-label")).toBe(null);
+ expect(transferInfo[1].querySelector(".address span")?.textContent).toBe("0x9adEe6D82c0...1163");
+ expect(transferInfo[1].querySelector(".paymaster-label")).toBe(null);
+ expect(container.querySelectorAll(".transfer-amount-container span")[0]?.textContent).toBe("for");
+ expect(container.querySelectorAll(".transfer-amount-container span")[1]?.textContent).toBe("0.000000000001");
+ expect(container.querySelectorAll(".transfer-amount-container span")[2]?.textContent).toBe("ETH");
+ });
+
+ it("displays the 'Why Refunded?' link when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeData as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ const link = container.querySelector(".refunded-link");
+ expect(link?.getAttribute("href")).toBe(
+ "https://docs.zksync.io/build/developer-reference/fee-model.html#refunds"
+ );
+ expect(link?.getAttribute("target")).toBe("_blank");
+ expect(link?.textContent).toBe("Why am I being refunded?");
+ });
+ });
+
+ describe("when transaction fee is paid by paymaster", () => {
+ it("display paid by paymaster label when fee is paid by paymaster", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeDataPaymaster as FeeData,
+ },
+ });
+ expect(container.querySelector(".payed-by-paymaster-label")?.textContent).toBe("Paid by Paymaster");
+ });
+
+ it("displays the refunds when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeDataPaymaster as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ const transfers = container.querySelectorAll(".fee-transfers-container .transfer-container");
+ expect(transfers.length).toBe(1);
+ const transferInfo = transfers[0].querySelectorAll(".transfer-info-container");
+ expect(transferInfo[0].querySelector(".address span")?.textContent).toBe("0x00000000000...8001");
+ expect(transferInfo[0].querySelector(".paymaster-label")).toBe(null);
+ expect(transferInfo[1].querySelector(".address span")?.textContent).toBe("0x9adEe6D82c0...1163");
+ expect(transferInfo[1].querySelector(".paymaster-label")?.textContent).toBe("Paymaster");
+ expect(container.querySelectorAll(".transfer-amount-container span")[0]?.textContent).toBe("for");
+ expect(container.querySelectorAll(".transfer-amount-container span")[1]?.textContent).toBe("0.000000000001");
+ expect(container.querySelectorAll(".transfer-amount-container span")[2]?.textContent).toBe("ETH");
+ });
+
+ it("displays the 'Why Paymaster Refunded?' and 'What is Paymaster' links when expanded", async () => {
+ const { container } = render(FeeDataComponent, {
+ global,
+ props: {
+ feeData: feeDataPaymaster as FeeData,
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+
+ const refundedLink = container.querySelector(".refunded-link");
+ expect(refundedLink?.getAttribute("href")).toBe(
+ "https://docs.zksync.io/build/developer-reference/fee-model.html#refunds"
+ );
+ expect(refundedLink?.getAttribute("target")).toBe("_blank");
+ expect(refundedLink?.textContent).toBe("Why is Paymaster being refunded?");
+
+ const paymasterLink = container.querySelector(".paymaster-link");
+ expect(paymasterLink?.getAttribute("href")).toBe(
+ "https://docs.zksync.io/build/developer-reference/account-abstraction.html#paymasters"
+ );
+ expect(paymasterLink?.getAttribute("target")).toBe("_blank");
+ expect(paymasterLink?.textContent).toBe("What is Paymaster?");
+ });
+ });
+});
diff --git a/packages/app/tests/components/LocaleSwitch.spec.ts b/packages/app/tests/components/LocaleSwitch.spec.ts
new file mode 100644
index 0000000000..fc4259c4c4
--- /dev/null
+++ b/packages/app/tests/components/LocaleSwitch.spec.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import { fireEvent, render } from "@testing-library/vue";
+
+import LocaleSwitch from "@/components/LocaleSwitch.vue";
+
+describe("LocaleSwitch:", () => {
+ it("renders listbox button with selected option", async () => {
+ const { getByText } = render(LocaleSwitch, {
+ props: {
+ value: "uk",
+ options: [
+ { value: "en", label: "English", imageUrl: "en.svg" },
+ { value: "uk", label: "Ukrainian", imageUrl: "uk.svg" },
+ ],
+ },
+ });
+
+ expect(getByText("Ukrainian"));
+ });
+
+ it("renders list of locales when button is clicked", async () => {
+ const { container, getByText } = render(LocaleSwitch, {
+ props: {
+ value: "en",
+ options: [
+ { value: "en", label: "English", imageUrl: "" },
+ { value: "uk", label: "Ukrainian", imageUrl: "" },
+ ],
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+
+ expect(getByText("Ukrainian", { selector: ".language-list-item-label" }));
+ expect(getByText("English", { selector: ".language-list-item-label" }));
+ });
+
+ it("emits update:value when click on locale", async () => {
+ const { container, emitted } = render(LocaleSwitch, {
+ props: {
+ value: "en",
+ options: [
+ { value: "en", label: "English", imageUrl: "" },
+ { value: "uk", label: "Ukrainian", imageUrl: "" },
+ ],
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(container.querySelector(".language-list-item:last-child")!);
+
+ expect(emitted()).toHaveProperty("update:value", [["uk"]]);
+ });
+});
diff --git a/packages/app/tests/components/NetworkStats.spec.ts b/packages/app/tests/components/NetworkStats.spec.ts
new file mode 100644
index 0000000000..12d01fee54
--- /dev/null
+++ b/packages/app/tests/components/NetworkStats.spec.ts
@@ -0,0 +1,167 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import NetworkStats from "@/components/NetworkStats.vue";
+
+import enUS from "@/locales/en.json";
+
+const currentNetworkMock = vi.fn(() => "testnet");
+
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ currentNetwork: computed(() => ({ name: currentNetworkMock() })),
+ }),
+ };
+});
+
+describe("NetworkStats:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n],
+ };
+
+ it("renders component base on input", () => {
+ const { container } = render(NetworkStats, {
+ props: {
+ loading: false,
+ committed: 123,
+ verified: 542,
+ transactions: 1404,
+ totalLocked: 849320,
+ },
+ global,
+ });
+ const wrapperArray = container.querySelectorAll(".stats-container");
+ expect(wrapperArray[0].textContent).toContain("123");
+ expect(wrapperArray[1].textContent).toContain("542");
+ expect(wrapperArray[2].textContent).toContain("1 404");
+ expect(wrapperArray[3].textContent).toContain("$849,320.0");
+ });
+ it("renders component without total value locked property", () => {
+ const { container } = render(NetworkStats, {
+ props: {
+ loading: false,
+ committed: 123,
+ verified: 542,
+ transactions: 1404,
+ },
+ global,
+ });
+ const wrapperArray = container.querySelectorAll(".stats-container");
+ expect(wrapperArray[0].textContent).toContain("123");
+ expect(wrapperArray[1].textContent).toContain("542");
+ expect(wrapperArray[2].textContent).toContain("1 404");
+ expect(wrapperArray[3]).toBe(undefined);
+ });
+ it("renders loading state", () => {
+ const { container } = render(NetworkStats, {
+ props: {
+ loading: true,
+ },
+ global,
+ });
+ expect(container.querySelectorAll(".content-loader").length).toBe(3);
+ });
+ it("shows 0 if value of committed, verified or transactions is undefined", () => {
+ const { container } = render(NetworkStats, {
+ props: {
+ loading: false,
+ committed: undefined,
+ verified: undefined,
+ transactions: undefined,
+ },
+ global,
+ });
+ const wrapperArray = container.querySelectorAll(".stats-container");
+ expect(wrapperArray[0].textContent).toContain("0");
+ expect(wrapperArray[1].textContent).toContain("0");
+ expect(wrapperArray[2].textContent).toContain("0");
+ });
+ it("renders 'Committed Blocks' link properly", () => {
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ committed: undefined,
+ verified: undefined,
+ transactions: undefined,
+ },
+ global,
+ });
+
+ expect(wrapper.findAllComponents(RouterLinkStub)[0].props().to.name).toBe("blocks");
+ });
+ it("renders 'Verified Blocks' link properly", () => {
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ committed: undefined,
+ verified: undefined,
+ transactions: undefined,
+ },
+ global,
+ });
+
+ expect(wrapper.findAllComponents(RouterLinkStub)[1].props().to.name).toBe("blocks");
+ });
+ it("renders 'Transactions' link properly", () => {
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ committed: undefined,
+ verified: undefined,
+ transactions: undefined,
+ },
+ global,
+ });
+
+ expect(wrapper.findAllComponents(RouterLinkStub)[2].props().to.name).toBe("transactions");
+ });
+ it("renders title", () => {
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ },
+ global,
+ });
+
+ expect(wrapper.find(".title").text()).toBe("Network Stats");
+ });
+ it("renders subtitle for testnet", () => {
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ },
+ global,
+ });
+
+ expect(wrapper.find(".subtitle").text()).toBe("Stats are occasionally reset on testnet.");
+ });
+ it("renders subtitle for mainnet", () => {
+ const mockNetwork = currentNetworkMock.mockReturnValue("mainnet");
+ const wrapper = mount(NetworkStats, {
+ props: {
+ loading: false,
+ },
+ global,
+ });
+
+ expect(wrapper.find(".subtitle").text()).toBe("zkSync Era Mainnet is open to everyone.");
+ mockNetwork.mockRestore();
+ });
+});
diff --git a/packages/app/tests/components/NetworkSwitch.spec.ts b/packages/app/tests/components/NetworkSwitch.spec.ts
new file mode 100644
index 0000000000..fd3b89c496
--- /dev/null
+++ b/packages/app/tests/components/NetworkSwitch.spec.ts
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed } from "vue";
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fireEvent, render } from "@testing-library/vue";
+
+import { TESTNET_BETA_NETWORK, TESTNET_NETWORK } from "./../mocks";
+
+import NetworkSwitch from "@/components/NetworkSwitch.vue";
+
+import * as useEnvironmentConfig from "@/composables/useEnvironmentConfig";
+
+vi.mock("vue-router", () => ({
+ useRoute: vi.fn(() => ({
+ path: "",
+ })),
+}));
+
+const location = {
+ hostname: "https://staging-scan-v2.zksync.dev",
+ search: "",
+};
+
+vi.mock("@/utils/helpers", () => ({
+ getWindowLocation: () => location,
+}));
+
+describe("NetworkSwitch:", () => {
+ beforeEach(() => {
+ vi.spyOn(useEnvironmentConfig, "default").mockReturnValue({
+ networks: computed(() => [TESTNET_NETWORK, TESTNET_BETA_NETWORK]),
+ });
+ });
+
+ it("renders listbox button with selected option", async () => {
+ const { container } = render(NetworkSwitch);
+ expect(container.querySelector(".network-item-label")?.textContent).toBe("Testnet");
+ });
+
+ it("renders list of networks when button is clicked", async () => {
+ const { container } = render(NetworkSwitch);
+
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+
+ const options = container.querySelectorAll(".network-list-item-container > *");
+ expect(options[0].getAttribute("href")).toBe("?network=testnet");
+ expect(options[0].textContent).toBe("Testnet");
+ expect(options[0].tagName).toBe("LABEL");
+ expect(options[0].querySelector("img")?.getAttribute("alt")).toBe("Testnet logo");
+ expect(options[1].getAttribute("href")).toBe("https://testnet-beta.staging-scan-v2.zksync.dev/");
+ expect(options[1].textContent).toBe("Testnet Beta");
+ expect(options[1].tagName).toBe("A");
+ expect(options[1].querySelector("img")?.getAttribute("alt")).toBe("Testnet Beta logo");
+ });
+
+ it("uses relative url schema for networks when on localhost", async () => {
+ location.hostname = "localhost";
+
+ const { container } = render(NetworkSwitch);
+
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+
+ const options = container.querySelectorAll(".network-list-item-container > *");
+ expect(options[0].getAttribute("href")).toBe("?network=testnet");
+ expect(options[0].textContent).toBe("Testnet");
+ expect(options[0].tagName).toBe("LABEL");
+ expect(options[1].getAttribute("href")).toBe("?network=testnet-beta");
+ expect(options[1].textContent).toBe("Testnet Beta");
+ expect(options[1].tagName).toBe("A");
+ });
+
+ it("uses relative url schema for networks when on preview deployment (.web.app)", async () => {
+ location.hostname = "preview.web.app";
+ const { container } = render(NetworkSwitch);
+
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+
+ const options = container.querySelectorAll(".network-list-item-container > *");
+ expect(options[0].getAttribute("href")).toBe("?network=testnet");
+ expect(options[0].textContent).toBe("Testnet");
+ expect(options[0].tagName).toBe("LABEL");
+ expect(options[1].getAttribute("href")).toBe("?network=testnet-beta");
+ expect(options[1].textContent).toBe("Testnet Beta");
+ expect(options[1].tagName).toBe("A");
+ });
+});
diff --git a/packages/app/tests/components/PageError.spec.ts b/packages/app/tests/components/PageError.spec.ts
new file mode 100644
index 0000000000..3fc4e84e0d
--- /dev/null
+++ b/packages/app/tests/components/PageError.spec.ts
@@ -0,0 +1,41 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import PageError from "@/components/PageError.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("PageError:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ it("renders component", () => {
+ const { container } = render(PageError, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".error-page-title")?.textContent).toBe("Something went wrong");
+ expect(container.querySelector(".error-page-subtitle")?.textContent).toBe(
+ "Unknown request, please try again, or go to the homepage."
+ );
+ expect(container.querySelector(".home-button")?.textContent).toBe("Homepage");
+ });
+ it("redirects to home page after the button has been clicked on", async () => {
+ const wrapper = mount(PageError, {
+ global: {
+ plugins: [i18n],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ expect(wrapper.findComponent(RouterLinkStub).props().to.name).toBe("home");
+ });
+});
diff --git a/packages/app/tests/components/SolidityEditor.spec.ts b/packages/app/tests/components/SolidityEditor.spec.ts
new file mode 100644
index 0000000000..721ee09222
--- /dev/null
+++ b/packages/app/tests/components/SolidityEditor.spec.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+
+import { fireEvent } from "@testing-library/vue";
+import { mount } from "@vue/test-utils";
+
+import SolidityEditor from "@/components/SolidityEditor.vue";
+
+describe("SolidityEditor", () => {
+ it("renders component based on input values", () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ },
+ });
+
+ expect(wrapper.find("textarea")!.element.value).toEqual("");
+ });
+
+ it("renders initial value", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "pragma solidity ^0.8.0;",
+ },
+ });
+
+ expect(wrapper.find("textarea")!.element.value).toEqual("pragma solidity ^0.8.0;");
+ });
+
+ it("emits update:value when value updated", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ },
+ });
+
+ await fireEvent.update(wrapper.find("textarea")!.element, "pragma solidity ^0.8.0;");
+ expect(wrapper.emitted()).toHaveProperty("update:modelValue", [["pragma solidity ^0.8.0;"]]);
+ });
+
+ it("value is updated on value property update", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ },
+ });
+
+ await wrapper.setProps({
+ modelValue: "pragma solidity ^0.8.0;",
+ });
+ expect(wrapper.find("textarea")!.element.value).toEqual("pragma solidity ^0.8.0;");
+ });
+
+ it("adds disabled class when disabled is true", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ disabled: true,
+ },
+ });
+
+ expect(wrapper.classes().includes("disabled")).toEqual(true);
+ });
+
+ it("adds read only class when read only is true", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ readOnly: true,
+ },
+ });
+
+ expect(wrapper.classes().includes("read-only")).toEqual(true);
+ });
+
+ it("adds expanded class when expanded is true", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ expanded: true,
+ },
+ });
+
+ expect(wrapper.classes().includes("expanded")).toEqual(true);
+ });
+
+ it("adds error class when error has value", async () => {
+ const wrapper = mount(SolidityEditor, {
+ props: {
+ modelValue: "",
+ error: "Some error",
+ },
+ });
+
+ expect(wrapper.classes().includes("error")).toEqual(true);
+ });
+});
diff --git a/packages/app/tests/components/TheFooter.spec.ts b/packages/app/tests/components/TheFooter.spec.ts
new file mode 100644
index 0000000000..8ecf1a640d
--- /dev/null
+++ b/packages/app/tests/components/TheFooter.spec.ts
@@ -0,0 +1,33 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import TheFooter from "@/components/TheFooter.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("TheFooter:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("renders navigation links", () => {
+ const wrapper = mount(TheFooter, {
+ global: {
+ plugins: [i18n],
+ },
+ });
+ const links = wrapper.findAll("a");
+ expect(links[0].attributes("href")).toBe(
+ "https://docs.zksync.io/build/tooling/block-explorer/getting-started.html"
+ );
+ expect(links[1].attributes("href")).toBe("https://zksync.io/terms");
+ expect(links[2].attributes("href")).toBe("https://zksync.io/contact");
+ });
+});
diff --git a/packages/app/tests/components/TheHeader.spec.ts b/packages/app/tests/components/TheHeader.spec.ts
new file mode 100644
index 0000000000..a5367a5832
--- /dev/null
+++ b/packages/app/tests/components/TheHeader.spec.ts
@@ -0,0 +1,158 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { fireEvent } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import TheHeader from "@/components/header/TheHeader.vue";
+
+import enUS from "@/locales/en.json";
+
+const routeMock = vi.fn(() => ({ name: "home", params: {} }));
+vi.mock("vue-router", () => ({
+ useRoute: () => routeMock(),
+}));
+
+const maintenanceMock = vi.fn(() => false);
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ currentNetwork: computed(() => ({
+ maintenance: maintenanceMock(),
+ bridgeUrl: "https://bridge.zksync.io/",
+ apiUrl: "https://api-url",
+ })),
+ }),
+ };
+});
+
+describe("TheHeader:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("renders navigation links", async () => {
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: { RouterLink: RouterLinkStub },
+ plugins: [i18n],
+ },
+ });
+ const dropdown = wrapper.findAll(".dropdown-container");
+ await fireEvent.click(dropdown[0].find("button")!.element);
+ const blockExplorerLinks = dropdown[0].findAllComponents(RouterLinkStub);
+ expect(blockExplorerLinks[0].props().to.name).toBe("blocks");
+ expect(blockExplorerLinks[1].props().to.name).toBe("batches");
+ expect(blockExplorerLinks[2].props().to.name).toBe("transactions");
+ expect(blockExplorerLinks[3].props().to.name).toBe("tokens");
+
+ await fireEvent.click(dropdown[1].find("button")!.element);
+ const toolsLinksRouter = dropdown[1].findAllComponents(RouterLinkStub);
+ const toolsLinks = dropdown[1].findAll("a");
+ expect(toolsLinks[0].attributes("href")).toBe("https://api-url/docs");
+ expect(toolsLinksRouter[0].props().to.name).toBe("contract-verification");
+ expect(toolsLinks[2].attributes("href")).toBe("https://bridge.zksync.io/");
+
+ expect(wrapper.findAll(".navigation-container > .navigation-link")[0].attributes("href")).toBe(
+ "https://docs.zksync.io/build/tooling/block-explorer/getting-started.html"
+ );
+ });
+ it("renders social links", () => {
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+ const routerArray = wrapper.findAll(".socials-container > a");
+ expect(routerArray[0].attributes("href")).toBe("https://join.zksync.dev/");
+ expect(routerArray[1].attributes("href")).toBe("https://twitter.com/zksync");
+ });
+ it("renders network switch", () => {
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+ expect(wrapper.find(".network-switch")).toBeTruthy();
+ });
+ it("renders hero banner container by default", async () => {
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(true);
+ });
+ it("doesn't render hero banner for not-found route", async () => {
+ const mockRoute = routeMock.mockReturnValue({ name: "not-found", params: {} });
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(false);
+ mockRoute.mockRestore();
+ });
+ it("doesn't render hero banner if network maintenance is true", async () => {
+ const mockRoute = routeMock.mockReturnValue({ name: "not-found", params: {} });
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(false);
+ mockRoute.mockRestore();
+ });
+ it("doesn't render hero banner if transaction hash is invalid", async () => {
+ const mockRoute = routeMock.mockReturnValue({ name: "transaction", params: { hash: "asdasd" } });
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(false);
+ mockRoute.mockRestore();
+ });
+ it("doesn't render hero banner if address is invalid", async () => {
+ const mockRoute = routeMock.mockReturnValue({ name: "address", params: { address: "asdasd" } });
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(false);
+ mockRoute.mockRestore();
+ });
+ it("doesn't render hero banner if block id is invalid", async () => {
+ const mockRoute = routeMock.mockReturnValue({ name: "block", params: { id: "asdasd" } });
+ const wrapper = mount(TheHeader, {
+ global: {
+ stubs: ["router-link"],
+ plugins: [i18n],
+ },
+ });
+
+ expect(wrapper.find(".hero-banner-container").exists()).toBe(false);
+ mockRoute.mockRestore();
+ });
+});
diff --git a/packages/app/tests/components/TokenAmountPrice.spec.ts b/packages/app/tests/components/TokenAmountPrice.spec.ts
new file mode 100644
index 0000000000..2a55898c59
--- /dev/null
+++ b/packages/app/tests/components/TokenAmountPrice.spec.ts
@@ -0,0 +1,115 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import TokenAmountPrice from "@/components/TokenAmountPrice.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { Token } from "@/composables/useToken";
+
+import $testId from "@/plugins/testId";
+
+const ethToken = {
+ l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+ symbol: "ETH",
+ name: "ETH",
+ decimals: 18,
+ usdPrice: 3500,
+} as Token;
+const usdcToken = {
+ l2Address: "0xf6947d8dd3a019a151c1a44dc94033be15cb12f8",
+ symbol: "USDC",
+ name: "USDC",
+ decimals: 3,
+ usdPrice: 3500,
+} as Token;
+
+const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+});
+
+const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [$testId, i18n],
+};
+
+describe("TokenAmountPrice", () => {
+ it("renders amount and token correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "10000000000000000",
+ },
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("0.01");
+ expect(wrapper.find(".token-symbol").text()).toBe(ethToken.symbol);
+ });
+ it("handles amount update correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "10000000000000000",
+ },
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("0.01");
+ await wrapper.setProps({
+ amount: "10000",
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("0.00000000000001");
+ });
+ it("handles token address update correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "10000000000000000",
+ },
+ });
+ await wrapper.setProps({
+ token: usdcToken,
+ });
+ expect(wrapper.find(".token-amount").text()).toBe("10000000000000");
+ expect(wrapper.find(".token-symbol").text()).toBe(usdcToken.symbol);
+ });
+ it("renders price bigger than 0.00001 correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "10000000000000000",
+ },
+ });
+ expect(wrapper.find(".token-price").text()).toBe("$35.00");
+ });
+ it("renders price smaller than 0.00001 correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "1000",
+ },
+ });
+ expect(wrapper.find(".token-price").text()).toBe("<$0.00001");
+ });
+ it("renders price '0' correctly", async () => {
+ const wrapper = mount(TokenAmountPrice, {
+ global,
+ props: {
+ token: ethToken,
+ amount: "0",
+ },
+ });
+ expect(wrapper.find(".token-price").text()).toBe("$0");
+ });
+});
diff --git a/packages/app/tests/components/TokenIconLabel.spec.ts b/packages/app/tests/components/TokenIconLabel.spec.ts
new file mode 100644
index 0000000000..f085bc8cb9
--- /dev/null
+++ b/packages/app/tests/components/TokenIconLabel.spec.ts
@@ -0,0 +1,122 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import { ETH_TOKEN_MOCK } from "../mocks";
+
+import TokenIconLabel from "@/components/TokenIconLabel.vue";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+describe("TokenIconLabel", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [$testId, i18n],
+ };
+ it("renders token icon if iconUrl is defined", () => {
+ const wrapper = mount(TokenIconLabel, {
+ global,
+ props: {
+ symbol: ETH_TOKEN_MOCK.symbol,
+ address: ETH_TOKEN_MOCK.l2Address,
+ iconUrl: "https://test.link",
+ },
+ });
+ expect(wrapper.find("img")?.attributes("src")).toBe("https://test.link");
+ });
+ it("renders custom token icon if iconUrl is not defined", () => {
+ const wrapper = mount(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b",
+ },
+ });
+ expect(wrapper.find("img")?.attributes("src")).toBe("/images/currencies/customToken.svg");
+ });
+ it("renders token symbol when showLinkSymbol is true", () => {
+ const wrapper = mount(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ showLinkSymbol: true,
+ },
+ });
+ expect(wrapper.find(".token-symbol").text()).toBe("ETH");
+ });
+ it("renders 'unknown' symbol when it is not exist", () => {
+ const wrapper = mount(TokenIconLabel, {
+ global,
+ props: {
+ symbol: null,
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ showLinkSymbol: true,
+ },
+ });
+ expect(wrapper.find(".token-symbol").text()).toBe(i18n.global.t("balances.table.unknownSymbol"));
+ });
+ it("renders correct link of contract page", () => {
+ const wrapper = mount(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ },
+ });
+ const contractPageUrl = wrapper.findAllComponents(RouterLinkStub);
+
+ expect(contractPageUrl[0].props().to.name).toBe("address");
+ expect(contractPageUrl[0].props().to.params.address).toBe("0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3");
+ });
+ it("renders default 'sm' size for icon", () => {
+ const { container } = render(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ },
+ });
+
+ expect(container.querySelector(".sm")).toBeTruthy();
+ });
+ it("renders 'md' size for icon", () => {
+ const { container } = render(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ iconSize: "md",
+ },
+ });
+
+ expect(container.querySelector(".md")).toBeTruthy();
+ });
+ it("renders 'lg' size for icon", () => {
+ const { container } = render(TokenIconLabel, {
+ global,
+ props: {
+ symbol: "ETH",
+ address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
+ iconSize: "lg",
+ },
+ });
+
+ expect(container.querySelector(".lg")).toBeTruthy();
+ });
+});
diff --git a/packages/app/tests/components/account/InfoTable.spec.ts b/packages/app/tests/components/account/InfoTable.spec.ts
new file mode 100644
index 0000000000..439b7bbd95
--- /dev/null
+++ b/packages/app/tests/components/account/InfoTable.spec.ts
@@ -0,0 +1,59 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import InfoTable from "@/components/account/InfoTable.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { Account } from "@/composables/useAddress";
+
+describe("InfoTable:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ it("renders table based on input", () => {
+ const wrapper = mount(InfoTable, {
+ global: {
+ plugins: [i18n],
+ },
+ props: {
+ account:
+
+ {{ t("transactionsView.title") }}
+We haven't had any blocks yet. Please, check again later.
`, + }, + props: { + loading: false, + }, + }); + getByText("We haven't had any blocks yet. Please, check again later."); + }); + it("does not render header when blocks collection is empty", () => { + const { container } = render(Table, { + global: { + stubs: ["router-link"], + plugins: [i18n, $testId], + }, + props: { + blocks: [], + loading: false, + }, + }); + expect(container.querySelectorAll(".table-head-col")).toHaveLength(0); + }); +}); diff --git a/packages/app/tests/components/blocks/TransactionEmptyState.spec.ts b/packages/app/tests/components/blocks/TransactionEmptyState.spec.ts new file mode 100644 index 0000000000..d13a086010 --- /dev/null +++ b/packages/app/tests/components/blocks/TransactionEmptyState.spec.ts @@ -0,0 +1,41 @@ +import { createI18n } from "vue-i18n"; + +import { describe, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import TransactionEmptyState from "@/components/blocks/TransactionEmptyState.vue"; + +import enUS from "@/locales/en.json"; + +describe("TransactionEmptyState", () => { + const i18n = createI18n({ + locale: "en", + allowComposition: true, + messages: { + en: enUS, + }, + }); + it("renders component properly for existing block", async () => { + const { getByText } = render(TransactionEmptyState, { + global: { + plugins: [i18n], + }, + props: { + blockExists: true, + }, + }); + getByText("This Block doesn't have any transactions"); + }); + it("renders component properly for nonexisting block", async () => { + const { getByText } = render(TransactionEmptyState, { + global: { + plugins: [i18n], + }, + props: { + blockExists: false, + }, + }); + getByText("This Block has not been created or sealed yet"); + }); +}); diff --git a/packages/app/tests/components/common/Alert.spec.ts b/packages/app/tests/components/common/Alert.spec.ts new file mode 100644 index 0000000000..3619fb205c --- /dev/null +++ b/packages/app/tests/components/common/Alert.spec.ts @@ -0,0 +1,26 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import Alert from "@/components/common/Alert.vue"; + +describe("Alert", () => { + it("renders default slot", () => { + const { container } = render(Alert, { + slots: { + default: { + template: "Alert", + }, + }, + }); + expect(container.textContent).toBe("Alert"); + }); + it("properly uses type prop", async () => { + const { container } = render(Alert, { + props: { + type: "warning", + }, + }); + expect(container.innerHTML).includes("warning"); + }); +}); diff --git a/packages/app/tests/components/common/Badge.spec.ts b/packages/app/tests/components/common/Badge.spec.ts new file mode 100644 index 0000000000..44fb5e3dbc --- /dev/null +++ b/packages/app/tests/components/common/Badge.spec.ts @@ -0,0 +1,67 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import Badge from "@/components/common/Badge.vue"; + +import $testId from "@/plugins/testId"; + +describe("Badge", () => { + const global = { + plugins: [$testId], + }; + it("renders default and icon slot", async () => { + const { findByText, unmount } = render(Badge, { + global, + slots: { + default: "Test slot content", + }, + }); + await findByText("Test slot content"); + unmount(); + }); + it("adds has-icon class when icon slot is not empty", async () => { + const { getByTestId, findByText, unmount } = render(Badge, { + global, + slots: { + icon: "Test icon slot content", + }, + }); + expect(getByTestId("badge")?.classList.contains("has-icon")).toBe(true); + await findByText("Test icon slot content"); + unmount(); + }); + it("properly uses size props", async () => { + const { getByTestId, rerender, unmount } = render(Badge, { global }); + expect(getByTestId("badge")?.classList.contains("size-sm")).toBe(true); + await rerender({ + size: "md", + }); + expect(getByTestId("badge")?.classList.contains("size-md")).toBe(true); + unmount(); + }); + it("properly uses type props", async () => { + const { getByTestId, rerender, unmount } = render(Badge, { global }); + expect(getByTestId("badge")?.classList.contains("type-label")).toBe(true); + await rerender({ type: "pill" }); + expect(getByTestId("badge")?.classList.contains("type-pill")).toBe(true); + unmount(); + }); + it("properly uses color props", async () => { + const { getByTestId, rerender, unmount } = render(Badge, { global }); + expect(getByTestId("badge")?.classList.contains("color-neutral")).toBe(true); + await rerender({ color: "secondary" }); + expect(getByTestId("badge")?.classList.contains("color-secondary")).toBe(true); + unmount(); + }); + it("shows tooltip on hover", async () => { + const { findByText, unmount } = render(Badge, { + global, + props: { + tooltip: "Test tooltip text", + }, + }); + await findByText("Test tooltip text"); + unmount(); + }); +}); diff --git a/packages/app/tests/components/common/Breadcrumbs.spec.ts b/packages/app/tests/components/common/Breadcrumbs.spec.ts new file mode 100644 index 0000000000..9f6fddc3ad --- /dev/null +++ b/packages/app/tests/components/common/Breadcrumbs.spec.ts @@ -0,0 +1,44 @@ +import { createI18n } from "vue-i18n"; + +import { describe, expect, it } from "vitest"; + +import { mount } from "@vue/test-utils"; + +import Breadcrumbs from "@/components/common/Breadcrumbs.vue"; + +import enUS from "@/locales/en.json"; + +import type { BreadcrumbItem } from "@/components/common/Breadcrumbs.vue"; + +describe("Breadcrumbs:", () => { + const i18n = createI18n({ + locale: "en", + allowComposition: true, + messages: { + en: enUS, + }, + }); + + it("renders links correctly", () => { + const wrapper = mount(Breadcrumbs, { + props: { + items:`,
+ },
+ title: {
+ template: "Title",
+ },
+ description: {
+ template: "Description",
+ },
+ },
+ });
+ expect(wrapper.find(".state-image img").attributes("src")).toBe("/images/empty-state/empty_balance.svg");
+ expect(wrapper.find(".title").text()).toBe("Title");
+ expect(wrapper.find(".description").text()).toBe("Description");
+ });
+});
diff --git a/packages/app/tests/components/common/ExpandableText.spec.ts b/packages/app/tests/components/common/ExpandableText.spec.ts
new file mode 100644
index 0000000000..6734397360
--- /dev/null
+++ b/packages/app/tests/components/common/ExpandableText.spec.ts
@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+
+import ExpandableText from "@/components/common/ExpandableText.vue";
+
+describe("ExpandableText:", () => {
+ it("renders default slot value", async () => {
+ const { getByText, unmount } = render(ExpandableText, {
+ slots: {
+ default: "Test test",
+ },
+ });
+
+ expect(getByText("Test test")).toBeTruthy();
+ unmount();
+ });
+ it("renders button slot by default", async () => {
+ const { getByText, unmount } = render(ExpandableText, {
+ slots: {
+ button: "Button text",
+ },
+ });
+
+ expect(getByText("Button text")).toBeTruthy();
+ unmount();
+ });
+ it("doesn't render show more button if text content height is less than maxHeight", async () => {
+ const { container, unmount } = render(ExpandableText, {
+ slots: {
+ default: "Test test
", + button: "Button text", + }, + global: { + mocks: { + showButton: ref(false), + }, + }, + props: { + maxHeight: 300, + }, + }); + expect(container.querySelector(".expand-button")).toBeFalsy(); + unmount(); + }); +}); diff --git a/packages/app/tests/components/common/HashLabel.spec.ts b/packages/app/tests/components/common/HashLabel.spec.ts new file mode 100644 index 0000000000..78cabfb695 --- /dev/null +++ b/packages/app/tests/components/common/HashLabel.spec.ts @@ -0,0 +1,162 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; +import { mount } from "@vue/test-utils"; + +import HashLabel, { shortenFitText } from "@/components/common/HashLabel.vue"; + +describe("HashLabel:", () => { + it("correctly renders value", async () => { + const { getAllByText } = render(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + }, + }); + + expect(getAllByText("0xaBEA9132b05A70803a4E85094fD0e1800777fBEF")).toBeTruthy(); + }); + + it("does not render icon container when default slot is not provided", () => { + const { container } = render(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + }, + }); + + expect(container.querySelector(".icon")?.innerHTML).not.toBeDefined(); + }); + + it("text is updated on text property update", async () => { + const { rerender, getAllByText } = render(HashLabel, { + props: { + text: "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + }, + }); + + await rerender({ + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + }); + + expect(getAllByText("0xaBEA9132b05A70803a4E85094fD0e1800777fBEF")).toBeTruthy(); + }); + + describe("shortenFitText:", () => { + it("correctly cuts text that doesn't fit", () => { + expect( + shortenFitText("0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", "middle", 505, 8.5) + ).toEqual("0x286fa01d8cbcee191d6cf0ad...bf7e7daf58aa4f73d34b1a7a39"); + }); + it("correctly cuts text if rootWidth and singleCharacterWidth isn't specified", () => { + expect(shortenFitText("0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", "middle")).toEqual( + "0x286fa01d8cb...f73d34b1a7a39" + ); + }); + it("correctly returns text that fully fits", () => { + const text = "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39"; + const letterWidth = 8; + expect( + shortenFitText( + "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + "middle", + text.length * letterWidth, + letterWidth + ) + ).toEqual("0x286fa01d8cbcee191d6cf0ada2f1...63b4bf7e7daf58aa4f73d34b1a7a39"); + }); + }); + + it("renders default empty slot", () => { + const { container } = render(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + }, + }); + + expect(container.querySelector(".icon")?.innerHTML).toBeFalsy; + }); + + it("renders icon slot", () => { + const { container } = render(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + }, + slots: { + default: { + template: "Icon slot", + }, + }, + }); + + expect(container.querySelector(".icon")?.innerHTML).toBe("Icon slot"); + }); + + it("correctly renders shortenFitText when subtraction props exist", async () => { + const wrapper = mount(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + subtraction: 5, + }, + }); + + expect( + shortenFitText( + "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + "middle", + 505, + 8.5, + wrapper.vm.subtraction + ) + ).toEqual("0x286fa01d8cbcee191d6cf0...7e7daf58aa4f73d34b1a7a39"); + }); + it("correctly renders shortenFitText if placement is left", async () => { + const wrapper = mount(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + placement: "left", + }, + }); + + expect( + shortenFitText( + "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + wrapper.vm.placement, + 500, + 8.5 + ) + ).toEqual("0x286fa01d8cbcee191d6cf0ad...7a39"); + }); + it("correctly renders shortenFitText if placement is right", async () => { + const wrapper = mount(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + placement: "right", + }, + }); + + expect( + shortenFitText( + "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + wrapper.vm.placement, + 500, + 8.5 + ) + ).toEqual("0x286...bf7e7daf58aa4f73d34b1a7a39"); + }); + it("correctly renders shortenFitText if placement is middle", async () => { + const wrapper = mount(HashLabel, { + props: { + text: "0xaBEA9132b05A70803a4E85094fD0e1800777fBEF", + placement: "middle", + }, + }); + + expect( + shortenFitText( + "0x286fa01d8cbcee191d6cf0ada2f1684ff763b4bf7e7daf58aa4f73d34b1a7a39", + wrapper.vm.placement, + 500, + 8.5 + ) + ).toEqual("0x286fa01d8cbcee191d6cf0ad...bf7e7daf58aa4f73d34b1a7a39"); + }); +}); diff --git a/packages/app/tests/components/common/InfoTooltip.spec.ts b/packages/app/tests/components/common/InfoTooltip.spec.ts new file mode 100644 index 0000000000..84c366d704 --- /dev/null +++ b/packages/app/tests/components/common/InfoTooltip.spec.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import InfoTooltip from "@/components/common/InfoTooltip.vue"; + +describe("InfoTooltip:", () => { + it("renders default slot text on hover", async () => { + const { container } = render(InfoTooltip, { + slots: { + default: { + template: "InfoTooltip content", + }, + }, + }); + expect(container.textContent).toBe("InfoTooltip content"); + }); +}); diff --git a/packages/app/tests/components/common/Input.spec.ts b/packages/app/tests/components/common/Input.spec.ts new file mode 100644 index 0000000000..0d577eff05 --- /dev/null +++ b/packages/app/tests/components/common/Input.spec.ts @@ -0,0 +1,88 @@ +import { describe, expect, it } from "vitest"; + +import { fireEvent, render } from "@testing-library/vue"; + +import Input from "@/components/common/Input.vue"; + +describe("Input:", () => { + it("renders initial empty value", async () => { + const { container } = render(Input, { + props: { + modelValue: "", + }, + }); + + expect(container.querySelector("input")!.value).toEqual(""); + }); + + it("renders initial value", async () => { + const { getByDisplayValue } = render(Input, { + props: { + modelValue: "Input value", + }, + }); + + expect(getByDisplayValue("Input value")).toBeTruthy(); + }); + + it("emits update:value when value updated", async () => { + const { container, emitted } = render(Input, { + props: { + modelValue: "", + }, + }); + const input = container.querySelector("input")!; + + await fireEvent.update(input, "Input value"); + expect(emitted()).toHaveProperty("update:modelValue", [["Input value"]]); + }); + + it("input values is updated on value property update", async () => { + const { container, rerender } = render(Input, { + props: { + modelValue: "", + }, + }); + + expect(container.querySelector("input")!.value).toEqual(""); + + await rerender({ + modelValue: "Input value", + }); + expect(container.querySelector("input")!.value).toEqual("Input value"); + }); + + it("disables input when disabled is true", async () => { + const { container } = render(Input, { + props: { + modelValue: "", + }, + attrs: { + disabled: true, + }, + }); + + expect(container.querySelector("input")!.hasAttribute("disabled")).toEqual(true); + }); + + it("error tooltip is hidden when no error was passed", async () => { + const { container } = render(Input, { + props: { + modelValue: "", + }, + }); + expect(container.querySelector(".input-error-tooltip")).toBeFalsy(); + }); + + it("shows error tooltip and adds class when error prop is not empty", async () => { + const { container } = render(Input, { + props: { + modelValue: "", + error: "Error test", + }, + }); + + expect(container.querySelector(".input-error-tooltip")).toBeTruthy(); + expect(container.querySelector(".input.error")).toBeTruthy(); + }); +}); diff --git a/packages/app/tests/components/common/Pagination.spec.ts b/packages/app/tests/components/common/Pagination.spec.ts new file mode 100644 index 0000000000..762e896bc3 --- /dev/null +++ b/packages/app/tests/components/common/Pagination.spec.ts @@ -0,0 +1,189 @@ +import { describe, expect, it, vi } from "vitest"; + +import { fireEvent } from "@testing-library/vue"; +import { mount, RouterLinkStub } from "@vue/test-utils"; + +import Pagination from "@/components/common/Pagination.vue"; + +vi.mock("vue-router", () => ({ + useRouter: () => vi.fn(), + useRoute: () => ({ + hash: "events", + }), +})); + +describe("Pagination:", () => { + it("renders default state properly", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 1, + totalItems: 50, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + const pageLinks = wrapper.findAllComponents(RouterLinkStub).filter((e) => e.classes().includes("page")); + + expect(pageLinks.length).toBe(5); + expect(pageLinks[0].props().to.query).toEqual({}); + for (let a = 2; a < 5; a++) { + expect(pageLinks[a - 1].props().to.query.page).toBe(a); + } + expect(wrapper.find(".pagination-page-button.arrow.left").exists()).toBe(true); + expect(wrapper.find(".pagination-page-button.arrow.right").exists()).toBe(true); + }); + it("pagination is disabled when disabled is true", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 1, + totalItems: 50, + disabled: true, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + expect(wrapper.classes("disabled")).toBe(true); + }); + + describe("Dots:", () => { + it("pagination renders dots to the left", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 1, + totalItems: 100, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + expect(wrapper.findAll(".dots").length).toBe(1); + expect(wrapper.findAll(".pagination-page-button")[4].classes().includes("dots")).toBe(true); + }); + it("pagination renders dots to the right", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 10, + totalItems: 100, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + expect(wrapper.findAll(".dots").length).toBe(1); + expect(wrapper.findAll(".pagination-page-button")[2].classes().includes("dots")).toBe(true); + }); + it("pagination renders dots to the left and to the right", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 5, + totalItems: 100, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + expect(wrapper.findAll(".dots").length).toBe(2); + expect(wrapper.findAll(".pagination-page-button")[2].classes().includes("dots")).toBe(true); + expect(wrapper.findAll(".pagination-page-button")[6].classes().includes("dots")).toBe(true); + }); + }); + it("emits update:activePage when page updated", async () => { + const wrapper = mount(Pagination, { + props: { + activePage: 5, + totalItems: 100, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + + await fireEvent.click(wrapper.find(".pagination-page-button.right")!.element); + expect(wrapper.emitted("update:activePage")).toEqual([[5], [5], [5], [6]]); + }); + describe("Back & Next buttons:", () => { + it("back button doesn't have a query and is disabled if first page is active", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 1, + totalItems: 50, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + const pageLinks = wrapper.findAllComponents(RouterLinkStub).filter((e) => e.classes().includes("arrow")); + expect(pageLinks[0].props().to.query).toEqual({}); + expect(pageLinks[0].classes().includes("disabled")).toEqual(true); + }); + it("next button is disabled if last page is active", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 5, + totalItems: 50, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + const pageLinks = wrapper.findAllComponents(RouterLinkStub).filter((e) => e.classes().includes("arrow")); + expect(pageLinks[1].props().to.query.page).toBe(5); + expect(pageLinks[1].classes().includes("disabled")).toEqual(true); + }); + it("back and next button have correct query", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 3, + totalItems: 50, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + const pageLinks = wrapper.findAllComponents(RouterLinkStub).filter((e) => e.classes().includes("arrow")); + expect(pageLinks[0].props().to.query.page).toBe(2); + expect(pageLinks[0].classes().includes("disabled")).toEqual(false); + expect(pageLinks[1].props().to.query.page).toBe(4); + expect(pageLinks[1].classes().includes("disabled")).toEqual(false); + }); + }); + it("renders correct hash for the links if route hash exists", () => { + const wrapper = mount(Pagination, { + props: { + activePage: 2, + totalItems: 30, + }, + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + }, + }); + const pageLinks = wrapper.findAllComponents(RouterLinkStub); + + expect(pageLinks[0].props().to.hash).toBe("events"); + expect(pageLinks[1].props().to.hash).toBe("events"); + expect(pageLinks[2].props().to.hash).toBe("events"); + expect(pageLinks[3].props().to.hash).toBe("events"); + }); +}); diff --git a/packages/app/tests/components/common/RadioInput.spec.ts b/packages/app/tests/components/common/RadioInput.spec.ts new file mode 100644 index 0000000000..ed2b7afcac --- /dev/null +++ b/packages/app/tests/components/common/RadioInput.spec.ts @@ -0,0 +1,41 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import RadioInput from "@/components/common/RadioInput.vue"; + +describe("RadioInput", () => { + it("renders default slot", () => { + const { container } = render(RadioInput, { + slots: { + default: { + template: "Radio Input", + }, + }, + props: { + value: "radio", + }, + }); + expect(container.textContent).toBe("Radio Input"); + }); + it("renders checked state correctly", async () => { + const { container } = render(RadioInput, { + props: { + modelValue: "radio", + value: "radio", + }, + }); + expect(container.querySelector(".radio-input-container")!.classList.contains("checked")).toBe(true); + }); + it("renders disabled state correctly", async () => { + const { container } = render(RadioInput, { + props: { + modelValue: "radio", + value: "radio", + disabled: true, + }, + }); + expect(container.querySelector(".radio-input-container")!.classList.contains("disabled")).toBe(true); + expect(container.querySelector(".radio-input-container input")!.attributes.getNamedItem("disabled")).toBeTruthy(); + }); +}); diff --git a/packages/app/tests/components/common/SearchField.spec.ts b/packages/app/tests/components/common/SearchField.spec.ts new file mode 100644 index 0000000000..8af154e3c5 --- /dev/null +++ b/packages/app/tests/components/common/SearchField.spec.ts @@ -0,0 +1,112 @@ +import { createI18n } from "vue-i18n"; + +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; +import { mount } from "@vue/test-utils"; + +import SearchField from "@/components/common/SearchField.vue"; + +import enUS from "@/locales/en.json"; + +describe("Search Field:", () => { + const i18n = createI18n({ + locale: "en", + allowComposition: true, + messages: { + en: enUS, + }, + }); + it("sets the value", async () => { + const wrapper = mount(SearchField, { + props: { + value: "", + }, + global: { + plugins: [i18n], + }, + }); + const input = wrapper.find("input"); + await input.setValue("test"); + expect(input.element.value).toBe("test"); + }); + it("emits update:value when value changed", async () => { + const wrapper = mount(SearchField, { + props: { + value: "", + }, + global: { + plugins: [i18n], + }, + }); + wrapper.vm.$emit("update:value", "value"); + await wrapper.vm.$nextTick(); + expect(wrapper.emitted("update:value")).toBeTruthy(); + expect(wrapper.emitted("update:value")).toEqual([["value"]]); + }); + it("shows input label if it exists", () => { + const wrapper = mount(SearchField, { + props: { + value: "", + label: "label", + }, + global: { + plugins: [i18n], + }, + }); + const label = wrapper.find(".input-label"); + expect(label.element.textContent).toBe("label"); + }); + it("disables input when disabled is true", () => { + const wrapper = mount(SearchField, { + props: { + value: "", + disabled: true, + }, + global: { + plugins: [i18n], + }, + }); + const input = wrapper.find("input"); + expect(input.attributes("disabled")).toBeDefined(); + }); + it("sets error text", () => { + const wrapper = mount(SearchField, { + props: { + value: "", + error: "error", + }, + global: { + plugins: [i18n], + }, + }); + const error = wrapper.find("input"); + expect(error.classes()).toContain("has-error"); + expect(wrapper.find(".error-message").text()).toBe("Please, enter a correct query"); + }); + it("sets spinner if pending is true", () => { + const { container } = render(SearchField, { + props: { + value: "", + pending: true, + }, + global: { + plugins: [i18n], + }, + }); + expect(container.querySelector(".spinner-container")).not.toBeNull(); + }); + it("emits update:value with trimmed value", async () => { + const wrapper = mount(SearchField, { + props: { + value: "", + }, + global: { + plugins: [i18n], + }, + }); + const input = wrapper.find("input"); + await input.setValue(" test "); + expect(wrapper.emitted("update:value")).toEqual([["test"]]); + }); +}); diff --git a/packages/app/tests/components/common/Tabs.spec.ts b/packages/app/tests/components/common/Tabs.spec.ts new file mode 100644 index 0000000000..97d212cf0c --- /dev/null +++ b/packages/app/tests/components/common/Tabs.spec.ts @@ -0,0 +1,73 @@ +import { describe, expect, it, vi } from "vitest"; + +import { mount } from "@vue/test-utils"; + +import Tabs from "@/components/common/Tabs.vue"; + +const router = { + push: vi.fn(), +}; + +vi.mock("vue-router", () => ({ + useRouter: () => router, + useRoute: () => vi.fn(), +})); + +describe("Tabs", () => { + it("renders component with default empty slots", () => { + const wrapper = mount(Tabs, { + props: { + tabs: [ + { title: "Tab 1", hash: "tab1" }, + { title: "Tab 2", hash: "tab2" }, + ], + }, + }); + expect(wrapper.findAll(".tab-head li").length).toBe(2); + expect(wrapper.findAll(".tab-head li")[0].text()).toBe("Tab 1"); + expect(wrapper.findAll(".tab-head li")[1].text()).toBe("Tab 2"); + expect(wrapper.findAll(".tab-content > div").length).toBe(2); + expect(wrapper.findAll(".tab-content > div")[0].text()).toBe(""); + expect(wrapper.findAll(".tab-content > div")[1].text()).toBe(""); + }); + it("renders component with custom slots values", () => { + const wrapper = mount(Tabs, { + props: { + tabs: [ + { title: "Tab 1", hash: "tab1" }, + { title: "Tab 2", hash: "tab2" }, + ], + }, + slots: { + "tab-1-content": { + template: "Tab 1 slot content", + }, + "tab-2-content": { + template: "Tab 2 slot content", + }, + }, + }); + expect(wrapper.findAll(".tab-head li").length).toBe(2); + expect(wrapper.findAll(".tab-head li")[0].text()).toBe("Tab 1"); + expect(wrapper.findAll(".tab-head li")[1].text()).toBe("Tab 2"); + expect(wrapper.findAll(".tab-content > div").length).toBe(2); + expect(wrapper.findAll(".tab-content > div")[0].text()).toBe("Tab 1 slot content"); + expect(wrapper.findAll(".tab-content > div")[1].text()).toBe("Tab 2 slot content"); + }); + it("redirects to current tab hash on tab button click", async () => { + const wrapper = mount(Tabs, { + props: { + tabs: [ + { title: "Tab 1", hash: "tab1" }, + { title: "Tab 2", hash: "tab2" }, + ], + }, + }); + + await wrapper.findAll(".tab-btn")[1].trigger("click"); + + expect(router.push).toHaveBeenCalledWith({ + hash: "tab2", + }); + }); +}); diff --git a/packages/app/tests/components/common/Tooltip.spec.ts b/packages/app/tests/components/common/Tooltip.spec.ts new file mode 100644 index 0000000000..565937365b --- /dev/null +++ b/packages/app/tests/components/common/Tooltip.spec.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from "vitest"; + +import { render } from "@testing-library/vue"; + +import Tooltip from "@/components/common/Tooltip.vue"; + +describe("Tooltip:", () => { + it("renders default slot", () => { + const { container } = render(Tooltip, { + slots: { + default: { + template: "Tooltip content", + }, + }, + }); + expect(container.textContent).toBe("Tooltip content"); + }); +}); diff --git a/packages/app/tests/components/common/UploadFile.spec.ts b/packages/app/tests/components/common/UploadFile.spec.ts new file mode 100644 index 0000000000..02b8b5db2a --- /dev/null +++ b/packages/app/tests/components/common/UploadFile.spec.ts @@ -0,0 +1,35 @@ +import { describe, expect, it } from "vitest"; + +import userEvent from "@testing-library/user-event"; +import { render } from "@testing-library/vue"; + +import UploadFile from "@/components/common/UploadFile.vue"; + +describe("UploadFile:", () => { + it("renders component base on input", () => { + const { getByText } = render(UploadFile, { + slots: { + default: "Hello World", + }, + }); + + getByText("Hello World"); + }); + + it("trigger event when supported file selected", async () => { + const user = userEvent.setup({}); + const { container, emitted } = render(UploadFile, { + slots: { + default: "Hello World", + }, + }); + + const input = container.querySelector
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+
+ expect(container.querySelector(".data-value")?.textContent).toBe(
+ "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403"
+ );
+ });
+ it("adds opens-up class when popoverPlacement is setted to 'top'", async () => {
+ const { container, unmount } = render(HashViewer, {
+ global: {
+ plugins: [i18n],
+ },
+ props: {
+ hash: "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403",
+ popoverPlacement: "top",
+ },
+ });
+
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ expect(container.querySelector(".option-list.opens-up")).toBeTruthy();
+ unmount();
+ });
+ it("converts hash to number", async () => {
+ const { container, getByText, unmount } = render(HashViewer, {
+ props: {
+ hash: "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe(
+ "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403"
+ );
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(getByText("Number"));
+ expect(container.querySelector(".data-value")?.textContent).toBe(
+ "402585566167427292863253751803857345753774113795"
+ );
+ unmount();
+ });
+ it("converts hash to address", async () => {
+ const { container, getByText, unmount } = render(HashViewer, {
+ props: {
+ hash: "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe(
+ "0x00000000000000000000000046848fa6e189b5e94c7b71566b3617e30a714403"
+ );
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(getByText("Address"));
+ expect(container.querySelector(".data-value")?.textContent).toBe("0x46848fa6e189b5e94c7b71566b3617e30a714403");
+ unmount();
+ });
+ it("converts hash to text", async () => {
+ const { container, getByText, unmount } = render(HashViewer, {
+ props: {
+ hash: "a18523b75fc9d74658d70c6a2ab6ea27d6bb2fb01a2ca9ea36cc8fc4708dcf3e",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe(
+ "a18523b75fc9d74658d70c6a2ab6ea27d6bb2fb01a2ca9ea36cc8fc4708dcf3e"
+ );
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(getByText("Text"));
+ expect(container.querySelector(".data-value")?.textContent).toBe("¡
#·_É×FX×\fj*¶ê'Ö»/°,©ê6ÌÄpÏ>");
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ const selected = container.querySelector("[aria-selected='true']")!;
+ expect(selected.textContent).toBe("Text ");
+ expect(selected.querySelector(".check-icon")).not.toBe(null);
+ unmount();
+ });
+ it("uses defaultType", async () => {
+ const { container } = render(HashViewer, {
+ props: {
+ hash: "a18523b75fc9d74658d70c6a2ab6ea27d6bb2fb01a2ca9ea36cc8fc4708dcf3e",
+ defaultType: "text",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe("¡
#·_É×FX×\fj*¶ê'Ö»/°,©ê6ÌÄpÏ>");
+ });
+ it("converts hash to number when the hash is not a valid argument for BigNumber", async () => {
+ const { container, getByText } = render(HashViewer, {
+ props: {
+ hash: "0x",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe("0x");
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(getByText("Number"));
+ expect(container.querySelector(".data-value")?.textContent).toBe("0");
+ });
+ it("converts hash to address when the hash is not a valid argument for BigNumber", async () => {
+ const { container, getByText, unmount } = render(HashViewer, {
+ props: {
+ hash: "0x",
+ },
+ slots: {
+ default: `
+
+
+ {{ params.data }}
+
+
+ `,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".data-value")?.textContent).toBe("0x");
+ await fireEvent.click(container.querySelector(".toggle-button")!);
+ await fireEvent.click(getByText("Address"));
+ expect(container.querySelector(".data-value")?.textContent).toBe("0x00");
+ unmount();
+ });
+});
diff --git a/packages/app/tests/components/transactions/Logs.spec.ts b/packages/app/tests/components/transactions/Logs.spec.ts
new file mode 100644
index 0000000000..941450f921
--- /dev/null
+++ b/packages/app/tests/components/transactions/Logs.spec.ts
@@ -0,0 +1,192 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import Pagination from "@/components/common/Pagination.vue";
+import Logs from "@/components/transactions/infoTable/Logs.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { TransactionLogEntry } from "@/composables/useEventLog";
+
+import $testId from "@/plugins/testId";
+
+const log = {
+ logIndex: 0,
+ address: "0x000000000000000000000000000000000000800a",
+ data: "0x0000000000000000000000000000000000000000000000000000000000000001",
+ topics: [
+ "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef",
+ "0x0000000000000000000000006cc8cf7f6b488c58aa909b77e6e65c631c204784",
+ "0x000000000000000000000000a1cf087db965ab02fb3cface1f5c63935815f044",
+ ],
+ event: {
+ name: "Transfer",
+ inputs: [
+ {
+ name: "from",
+ type: "address",
+ value: "0x6cC8cf7f6b488C58AA909B77E6e65c631c204784",
+ },
+ {
+ name: "to",
+ type: "address",
+ value: "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044",
+ },
+ {
+ name: "value",
+ type: "uint256",
+ value: "1",
+ },
+ ],
+ },
+};
+
+const router = {
+ push: vi.fn(),
+};
+const routeQueryMock = vi.fn(() => ({}));
+vi.mock("vue-router", () => ({
+ useRouter: () => router,
+ useRoute: () => ({
+ query: routeQueryMock(),
+ }),
+}));
+
+describe("Logs", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("render components based on input", () => {
+ const { container } = render(Logs, {
+ props: {
+ logs: [log],
+ loading: false,
+ initiatorAddress: "0x46848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".address-value-container")?.textContent).toBe(
+ "0x000000000000000000000000000000000000800A"
+ );
+ expect(container.querySelector(".log-interface")?.textContent?.replace(/\u00a0/g, " ")).toBe(
+ "Transfer (index_topic_1 address from, index_topic_2 address to, data uint256 value) "
+ );
+ const topicItem = container.querySelectorAll(".topic-container");
+ expect(topicItem[0].querySelector(".topic-index-container")?.textContent).toBe("0");
+ expect(topicItem[0].querySelector(".convert-dropdown-container")).toBe(null);
+
+ expect(topicItem[1].querySelector(".topic-index-container")?.textContent).toBe("1");
+ expect(topicItem[1].querySelector(".convert-dropdown-container")).toBeTruthy();
+
+ expect(topicItem[2].querySelector(".topic-index-container")?.textContent).toBe("2");
+ expect(topicItem[2].querySelector(".convert-dropdown-container")).toBeTruthy();
+
+ expect(container.querySelector(".hash-label-component")?.textContent).toBe("1");
+ });
+ it("doesn't render interface row if log is not decoded", () => {
+ const { container } = render(Logs, {
+ props: {
+ logs: [
+ {
+ ...log,
+ event: undefined,
+ },
+ ],
+ loading: false,
+ initiatorAddress: "0x46848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".log-interface")).toBe(null);
+ });
+ it("renders loading state", () => {
+ const wrapper = mount(Logs, {
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ props: {
+ loading: true,
+ },
+ });
+ expect(wrapper.findAll(".content-loader").length).toBe(6);
+ });
+
+ describe("Pagination", () => {
+ it("doesn't render pagination if amount of logs is 25 or less", () => {
+ const wrapper = mount(Logs, {
+ props: {
+ logs: Array.from(
+ { length: 25 },
+ (_, i) =>
+ ({
+ ...log,
+ logIndex: i.toString(),
+ } as TransactionLogEntry)
+ ),
+ loading: false,
+ initiatorAddress: "0x46848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(wrapper.findComponent(Pagination).exists()).toBe(false);
+ });
+ it("renders page according to route page query param", () => {
+ const mock = routeQueryMock.mockReturnValue({ page: 2 });
+ const { container } = render(Logs, {
+ props: {
+ logs: [
+ ...Array.from({ length: 25 }, (_, i) => ({
+ ...log,
+ logIndex: i,
+ })),
+ {
+ ...log,
+ logIndex: 26,
+ address: "0xF44095b5f84c560011B901e0DeE5EB7DdF96fE8D",
+ },
+ ],
+ loading: false,
+ initiatorAddress: "0x46848fa6e189b5e94c7b71566b3617e30a714403",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".address-value-container")?.textContent).toBe(
+ "0xF44095b5f84c560011B901e0DeE5EB7DdF96fE8D"
+ );
+
+ mock.mockRestore();
+ });
+ });
+});
diff --git a/packages/app/tests/components/transactions/PaymasterLabel.spec.ts b/packages/app/tests/components/transactions/PaymasterLabel.spec.ts
new file mode 100644
index 0000000000..51594b4c10
--- /dev/null
+++ b/packages/app/tests/components/transactions/PaymasterLabel.spec.ts
@@ -0,0 +1,29 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import PaymasterLabel from "@/components/transactions/PaymasterLabel.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("TransactionNetworkSquareBlock:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ const global = {
+ plugins: [i18n],
+ };
+
+ it("renders component", () => {
+ const wrapper = mount(PaymasterLabel, {
+ global,
+ });
+ expect(wrapper.find(".paymaster-label").text()).toBe("Paymaster");
+ });
+});
diff --git a/packages/app/tests/components/transactions/Status.spec.ts b/packages/app/tests/components/transactions/Status.spec.ts
new file mode 100644
index 0000000000..16a564809e
--- /dev/null
+++ b/packages/app/tests/components/transactions/Status.spec.ts
@@ -0,0 +1,378 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import Badge from "@/components/common/Badge.vue";
+import Spinner from "@/components/common/Spinner.vue";
+import Status from "@/components/transactions/Status.vue";
+
+import useContext from "@/composables/useContext";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+const { currentNetwork } = useContext();
+
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://sepolia.etherscan.io/");
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+ }),
+ };
+});
+
+describe("Status", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ const global = {
+ stubs: {
+ Badge,
+ },
+ plugins: [i18n, $testId],
+ };
+ it("shows a single danger badge with an error icon for 'failed' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "failed",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(1);
+
+ const [failedBadge] = badges;
+
+ expect(failedBadge.props().color).toBe("danger");
+ expect(failedBadge.text()).toBe(i18n.global.t("transactions.statusComponent.failed"));
+ });
+ it("shows l2 completed badge and l1 validating badge for 'included' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "included",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(5);
+
+ const [
+ l2StatusBadgeTitle,
+ l2StatusBadgeValue,
+ l1StatusBadgeTitle,
+ l1StatusBadgeValueDesktop,
+ l1StatusBadgeValueMobile,
+ ] = badges;
+
+ expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+ expect(l2StatusBadgeTitle.props().color).toBe("success");
+ expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+ expect(l2StatusBadgeValue.props().color).toBe("dark-success");
+
+ expect(l1StatusBadgeTitle.text()).toBe(i18n.global.t("general.l1NetworkName"));
+ expect(l1StatusBadgeTitle.props().color).toBe("neutral");
+ expect(l1StatusBadgeTitle.props().textColor).toBe("neutral");
+ expect(l1StatusBadgeValueDesktop.text()).toBe(
+ i18n.global.t("transactions.statusComponent.sending") +
+ i18n.global.t("transactions.statusComponent.validating") +
+ i18n.global.t("transactions.statusComponent.executing")
+ );
+ expect(l1StatusBadgeValueDesktop.props().color).toBe("dark-neutral");
+ let spinnerComponents = l1StatusBadgeValueDesktop.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+
+ expect(l1StatusBadgeValueMobile.text()).toBe(i18n.global.t("transactions.statusComponent.sending"));
+ expect(l1StatusBadgeValueMobile.props().color).toBe("dark-neutral");
+ spinnerComponents = l1StatusBadgeValueMobile.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+ });
+ it("shows l2 completed badge and l1 validating badge for 'committed' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "committed",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(5);
+
+ const [
+ l2StatusBadgeTitle,
+ l2StatusBadgeValue,
+ l1StatusBadgeTitle,
+ l1StatusBadgeValueDesktop,
+ l1StatusBadgeValueMobile,
+ ] = badges;
+ expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+ expect(l2StatusBadgeTitle.props().color).toBe("success");
+ expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+ expect(l2StatusBadgeValue.props().color).toBe("dark-success");
+
+ expect(l1StatusBadgeTitle.text()).toBe(i18n.global.t("general.l1NetworkName"));
+ expect(l1StatusBadgeTitle.props().color).toBe("neutral");
+ expect(l1StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l1StatusBadgeValueDesktop.text()).toBe(
+ i18n.global.t("transactions.statusComponent.sent") +
+ i18n.global.t("transactions.statusComponent.validating") +
+ i18n.global.t("transactions.statusComponent.executing")
+ );
+ expect(l1StatusBadgeValueDesktop.props().color).toBe("dark-neutral");
+ let spinnerComponents = l1StatusBadgeValueDesktop.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+ const l1StatusLinks = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ const [sentLink] = l1StatusLinks;
+ expect(sentLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().commitTxHash}`
+ );
+
+ expect(l1StatusBadgeValueMobile.text()).toBe(i18n.global.t("transactions.statusComponent.validating"));
+ expect(l1StatusBadgeValueMobile.props().color).toBe("dark-neutral");
+ spinnerComponents = l1StatusBadgeValueMobile.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+ });
+ describe("when L1 explorer url is not set", () => {
+ let mock1ExplorerUrl: Mock;
+ beforeEach(() => {
+ mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+ });
+
+ afterEach(() => {
+ mock1ExplorerUrl.mockRestore();
+ });
+
+ it("does not render links for 'committed' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "committed",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ const l1StatusBadgeValueDesktop = badges[3];
+ const [sentLink] = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ expect(sentLink.attributes("href")).toBeUndefined();
+ });
+ });
+ it("shows l2 completed badge and l1 validating badge for 'proved' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "proved",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(5);
+
+ const [
+ l2StatusBadgeTitle,
+ l2StatusBadgeValue,
+ l1StatusBadgeTitle,
+ l1StatusBadgeValueDesktop,
+ l1StatusBadgeValueMobile,
+ ] = badges;
+ expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+ expect(l2StatusBadgeTitle.props().color).toBe("success");
+ expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+ expect(l2StatusBadgeValue.props().color).toBe("dark-success");
+
+ expect(l1StatusBadgeTitle.text()).toBe(i18n.global.t("general.l1NetworkName"));
+ expect(l1StatusBadgeTitle.props().color).toBe("neutral");
+ expect(l1StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l1StatusBadgeValueDesktop.text()).toBe(
+ i18n.global.t("transactions.statusComponent.sent") +
+ i18n.global.t("transactions.statusComponent.validated") +
+ i18n.global.t("transactions.statusComponent.executing")
+ );
+ expect(l1StatusBadgeValueDesktop.props().color).toBe("dark-neutral");
+ let spinnerComponents = l1StatusBadgeValueDesktop.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+ const l1StatusLinks = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ const [sentLink, validatedLink] = l1StatusLinks;
+ expect(sentLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().commitTxHash}`
+ );
+ expect(validatedLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().proveTxHash}`
+ );
+
+ expect(l1StatusBadgeValueMobile.text()).toBe(i18n.global.t("transactions.statusComponent.executing"));
+ expect(l1StatusBadgeValueMobile.props().color).toBe("dark-neutral");
+ spinnerComponents = l1StatusBadgeValueMobile.findAllComponents(Spinner);
+ expect(spinnerComponents.length).toBe(1);
+ expect(spinnerComponents[0].props().color).toBe("dark-neutral");
+ });
+ describe("when L1 explorer url is not set", () => {
+ let mock1ExplorerUrl: Mock;
+ beforeEach(() => {
+ mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+ });
+
+ afterEach(() => {
+ mock1ExplorerUrl.mockRestore();
+ });
+
+ it("does not render links for 'proved' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "proved",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ const l1StatusBadgeValueDesktop = badges[3];
+ const [sentLink, validatedLink] = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ expect(sentLink.attributes("href")).toBeUndefined();
+ expect(validatedLink.attributes("href")).toBeUndefined();
+ });
+ });
+ it("shows l2 completed badge and l1 executed badge for 'verified' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "verified",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(5);
+
+ const [
+ l2StatusBadgeTitle,
+ l2StatusBadgeValue,
+ l1StatusBadgeTitle,
+ l1StatusBadgeValueDesktop,
+ l1StatusBadgeValueMobile,
+ ] = badges;
+ expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+ expect(l2StatusBadgeTitle.props().color).toBe("success");
+ expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+ expect(l2StatusBadgeValue.props().color).toBe("dark-success");
+
+ expect(l1StatusBadgeTitle.text()).toBe(i18n.global.t("general.l1NetworkName"));
+ expect(l1StatusBadgeTitle.props().color).toBe("success");
+ expect(l1StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l1StatusBadgeValueDesktop.text()).toBe(
+ i18n.global.t("transactions.statusComponent.sent") +
+ i18n.global.t("transactions.statusComponent.validated") +
+ i18n.global.t("transactions.statusComponent.executed")
+ );
+ expect(l1StatusBadgeValueDesktop.props().color).toBe("dark-success");
+ const l1StatusLinks = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ const [sentLink, validatedLink] = l1StatusLinks;
+ expect(sentLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().commitTxHash}`
+ );
+ expect(validatedLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().proveTxHash}`
+ );
+
+ const l1ExecutedLink = l1StatusBadgeValueDesktop.find(".badge-content a");
+ expect(l1ExecutedLink.attributes("href")).toBe(
+ `${currentNetwork.value.l1ExplorerUrl}/tx/${wrapper.props().executeTxHash}`
+ );
+
+ expect(l1StatusBadgeValueMobile.text()).toBe(i18n.global.t("transactions.statusComponent.executed"));
+ expect(l1StatusBadgeValueMobile.props().color).toBe("dark-success");
+ });
+ describe("when L1 explorer url is not set", () => {
+ let mock1ExplorerUrl: Mock;
+ beforeEach(() => {
+ mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+ });
+
+ afterEach(() => {
+ mock1ExplorerUrl.mockRestore();
+ });
+
+ it("does not render links for 'verified' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "verified",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+ const badges = wrapper.findAllComponents(Badge);
+ const l1StatusBadgeValueDesktop = badges[3];
+ const [sentLink, validatedLink] = l1StatusBadgeValueDesktop.findAll(".badge-pre-content a");
+ expect(sentLink.attributes("href")).toBeUndefined();
+ expect(validatedLink.attributes("href")).toBeUndefined();
+
+ const l1ExecutedLink = l1StatusBadgeValueDesktop.find(".badge-content a");
+ expect(l1ExecutedLink.attributes("href")).toBeUndefined();
+ });
+ });
+ it("shows indexing badge for 'indexing' status", async () => {
+ const wrapper = mount(Status, {
+ global,
+ props: {
+ status: "indexing",
+ commitTxHash: "commitTxHash",
+ proveTxHash: "proveTxHash",
+ executeTxHash: "executeTxHash",
+ },
+ });
+
+ const badges = wrapper.findAllComponents(Badge);
+ expect(badges.length).toBe(3);
+
+ const [l2StatusBadgeTitle, l2StatusBadgeValue, indexingBadge] = badges;
+
+ expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+ expect(l2StatusBadgeTitle.props().color).toBe("success");
+ expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+ expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+ expect(l2StatusBadgeValue.props().color).toBe("dark-success");
+
+ expect(indexingBadge.props().color).toBe("neutral");
+ expect(indexingBadge.text()).toBe(i18n.global.t("transactions.statusComponent.indexing"));
+ });
+});
diff --git a/packages/app/tests/components/transactions/Table.spec.ts b/packages/app/tests/components/transactions/Table.spec.ts
new file mode 100644
index 0000000000..58c4288267
--- /dev/null
+++ b/packages/app/tests/components/transactions/Table.spec.ts
@@ -0,0 +1,312 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { render, type RenderResult } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import { ETH_TOKEN_MOCK, useContextMock, useTransactionsMock } from "../../mocks";
+
+import Table from "@/components/transactions/Table.vue";
+
+import enUS from "@/locales/en.json";
+import elements from "tests/e2e/testId.json";
+
+import type { AbiFragment } from "@/composables/useAddress";
+import type { TransactionListItem } from "@/composables/useTransactions";
+
+import $testId from "@/plugins/testId";
+
+vi.mock("vue-router", () => ({
+ useRoute: vi.fn(() => ({ query: {} })),
+}));
+vi.mock("@/composables/useTokenLibrary", () => {
+ return {
+ default: () => ({
+ getToken: (address: string) =>
+ address === ETH_TOKEN_MOCK.l2Address
+ ? {
+ ...ETH_TOKEN_MOCK,
+ iconURL: "https://test.link",
+ }
+ : null,
+ getTokens: () => undefined,
+ isRequestFailed: computed(() => false),
+ isRequestPending: computed(() => false),
+ }),
+ };
+});
+
+const transaction: TransactionListItem = {
+ hash: "0x20e564c3178e1f059c8ac391f35dd73c20ac4a4731b23fa7e436b3d221676ff6",
+ to: "0x3355df6D4c9C3035724Fd0e3914dE96A5a83aaf4",
+ from: "0xb942802a389d23fCc0a807d4aa85e956dcF20f5B",
+ data: "0xa41368620000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000648656c6c6f210000000000000000000000000000000000000000000000000000",
+ value: "12321312300000",
+ isL1Originated: false,
+ fee: "0x3b9329f2a880",
+ nonce: 69,
+ blockNumber: 6539779,
+ l1BatchNumber: 74373,
+ blockHash: "0x5ad6b0475a6bdff6007e62adec0ceed0796fb427fe8f4de310432a52e118800b",
+ transactionIndex: 5,
+ receivedAt: "2023-06-20T12:10:44.187Z",
+ status: "included",
+ commitTxHash: null,
+ executeTxHash: null,
+ proveTxHash: null,
+ isL1BatchSealed: false,
+ gasPrice: "4000",
+ gasLimit: "5000",
+ gasUsed: "3000",
+ gasPerPubdata: "800",
+ maxFeePerGas: "7000",
+ maxPriorityFeePerGas: "8000",
+ error: null,
+ revertReason: null,
+};
+
+const contractAbi: AbiFragment[] = [
+ {
+ inputs: [
+ {
+ internalType: "string",
+ name: "_greeting",
+ type: "string",
+ },
+ ],
+ name: "setGreeting",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+
+describe("Transfers:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ let mockContext: SpyInstance;
+ let mockTransactions: SpyInstance;
+
+ beforeEach(() => {
+ mockContext = useContextMock();
+ });
+
+ afterEach(() => {
+ mockContext?.mockRestore();
+ mockTransactions?.mockRestore();
+ });
+
+ describe("Table:", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2023-06-21T10:00:00.000Z"));
+ mockTransactions = useTransactionsMock({
+ data: computed(() => [transaction]),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ afterEach(() => {
+ renderResult?.unmount();
+ vi.useRealTimers();
+ });
+
+ describe("when transaction status is committed", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransactions = useTransactionsMock({
+ data: computed(() => [{ ...transaction, status: "committed" }]),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ afterEach(() => {
+ renderResult!.unmount();
+ });
+
+ it("renders sent status column", () => {
+ expect(renderResult!.container.querySelector(".badge-content")!.textContent).toEqual("Sent on");
+ });
+ });
+
+ describe("when transaction status is proved", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransactions = useTransactionsMock({
+ data: computed(() => [{ ...transaction, status: "proved" }]),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ afterEach(() => {
+ renderResult!.unmount();
+ });
+
+ it("renders validated status column", () => {
+ expect(renderResult!.container.querySelector(".badge-content")!.textContent).toEqual("Validated on");
+ });
+ });
+
+ describe("when transaction status is verified", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransactions = useTransactionsMock({
+ data: computed(() => [{ ...transaction, status: "verified" }]),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ afterEach(() => {
+ renderResult!.unmount();
+ });
+
+ it("renders executed status column", () => {
+ expect(renderResult!.container.querySelector(".badge-content")!.textContent).toEqual("Executed on");
+ });
+ });
+
+ it("renders status column", () => {
+ expect(renderResult!.getByTestId(elements.statusBadge).textContent).toEqual("Processed on");
+ });
+
+ it("renders transaction hash column", () => {
+ expect(renderResult!.getByTestId(elements.transactionsHash).textContent).toEqual("0x20e564c...6ff6");
+ });
+
+ it("renders method name column", () => {
+ expect(renderResult!.getByTestId(elements.transactionsMethodName).textContent).toEqual("0xa4136862");
+ });
+
+ it("renders decoded method name when ABI is passed", async () => {
+ await renderResult?.rerender({ contractAbi });
+ expect(renderResult!.getByTestId(elements.transactionsMethodName).textContent).toEqual("setGreeting");
+ });
+
+ it("renders timestamp column", () => {
+ expect(renderResult!.getByTestId(elements.timestamp).textContent).toBe("yesterday");
+ });
+
+ it("renders from column", () => {
+ expect(renderResult!.getAllByTestId(elements.fromAddress)[0].textContent).toEqual("0xb9428...0f5B");
+ });
+
+ it("renders direction column", () => {
+ expect(renderResult!.getByTestId(elements.direction).textContent).toEqual("out");
+ });
+
+ it("renders to column", () => {
+ expect(renderResult!.getAllByTestId(elements.toAddress)[0].textContent).toEqual("0x3355d...aaf4");
+ });
+
+ it("renders from/to column for tablet", () => {
+ expect(renderResult?.getByText("0xb9428...0f5B", { selector: ".tablet-column a" }));
+ expect(renderResult?.getByText("0x3355d...aaf4", { selector: ".tablet-column a" }));
+ });
+
+ it("renders value column", () => {
+ expect(renderResult!.getAllByTestId(elements.tokenAmount)[0].textContent).toEqual("0.0000123213123");
+ expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[0].textContent).toEqual("$0.02");
+ });
+
+ it("renders fee column", () => {
+ expect(renderResult!.getAllByTestId(elements.tokenAmount)[2].textContent).toEqual("0.00006550325");
+ expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[1].textContent).toEqual("$0.12");
+ });
+ });
+
+ describe("Table with pagination:", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2023-06-02T10:00:00.000Z"));
+ });
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ describe("when total > pageSize", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransactions = useTransactionsMock({
+ data: computed(() => Array.from({ length: 10 }).map(() => transaction)),
+ total: computed(() => 11),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ it("renders pagination", async () => {
+ expect(renderResult!.container.querySelector(".pagination")).not.toBeNull();
+ });
+
+ it("does not render pagination if pagination prop is false", async () => {
+ await renderResult?.rerender({ pagination: false });
+ expect(renderResult!.container.querySelector(".pagination")).toBeNull();
+ });
+ });
+
+ describe("when total < pageSize", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransactions = useTransactionsMock({
+ data: computed(() => [transaction]),
+ total: computed(() => 1),
+ });
+ renderResult = render(Table, {
+ props: {},
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ it("does not render pagination", async () => {
+ expect(renderResult!.container.querySelector(".pagination")).toBeNull();
+ });
+ });
+ });
+});
diff --git a/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts b/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts
new file mode 100644
index 0000000000..f3e0bed661
--- /dev/null
+++ b/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts
@@ -0,0 +1,63 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import TokenAmountPriceTableCell from "@/components/transactions/TokenAmountPriceTableCell.vue";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+});
+
+const global = {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [$testId, i18n],
+};
+
+describe("TokenAmountPriceTableCell", () => {
+ it("renders '-' when no token provided", async () => {
+ const { container } = render(TokenAmountPriceTableCell, {
+ global,
+ props: {
+ amount: "10000000000000000",
+ },
+ });
+
+ expect(container.textContent).toBe("—");
+ });
+
+ it("renders ERC20 token when token is provided", async () => {
+ const erc20Token = {
+ l1Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeea",
+ l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeb",
+ symbol: "ERC",
+ name: "ERC",
+ decimals: 18,
+ usdPrice: 3500,
+ };
+
+ const { container } = render(TokenAmountPriceTableCell, {
+ global,
+ props: {
+ amount: "10000000000000000",
+ token: erc20Token,
+ },
+ });
+
+ expect(container.querySelector(".token-amount")?.textContent).toBe("0.01");
+ expect(container.querySelector(".token-symbol")?.textContent).toBe(erc20Token.symbol);
+ expect(container.querySelector(".token-price")?.textContent).toBe("$35.00");
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransactionData.spec.ts b/packages/app/tests/components/transactions/TransactionData.spec.ts
new file mode 100644
index 0000000000..b35c40f4b5
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransactionData.spec.ts
@@ -0,0 +1,217 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { fireEvent, render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import TransactionDataComponent from "@/components/transactions/infoTable/TransactionData.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { TransactionData } from "@/composables/useTransactionData";
+
+import $testId from "@/plugins/testId";
+
+const transactionData = {
+ contractAddress: "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b",
+ calldata:
+ "0xa9059cbb000000000000000000000000a1cf087db965ab02fb3cface1f5c63935815f0440000000000000000000000000000000000000000000000000000000000000001",
+ value: "0x0",
+ sighash: "0xa9059cbb",
+ factoryDeps: null,
+} as TransactionData;
+const transactionDataDecodedMethod = {
+ name: "transfer",
+ inputs: [
+ {
+ name: "recipient",
+ type: "address",
+ value: "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044",
+ encodedValue: "000000000000000000000000a1cf087db965ab02fb3cface1f5c63935815f044",
+ },
+ {
+ name: "amount",
+ type: "uint256",
+ value: "1",
+ encodedValue: "0000000000000000000000000000000000000000000000000000000000000001",
+ },
+ ],
+} as TransactionData["method"];
+
+const router = {
+ push: vi.fn(),
+};
+
+vi.mock("vue-router", () => ({
+ useRouter: () => router,
+}));
+
+describe("TransactionDataComponent", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ it("renders decoded data by default", () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: { ...transactionData, method: transactionDataDecodedMethod },
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".toggle-decode-button")?.textContent).toBe(
+ i18n.global.t("transactionData.showOriginalInput")
+ );
+ expect(container.querySelector(".method-interface")?.textContent).toBe(
+ "Function: transfer(address recipient, uint256 amount)"
+ );
+ expect(container.querySelector(".show-as-dropdown")?.textContent).toBe(
+ i18n.global.t("transactionData.viewOptions.decoded")
+ );
+ const parameterRows = container.querySelectorAll(".method-parameters-table tbody tr");
+ const [row1Columns, row2Columns] = Array.from(parameterRows).map((row) =>
+ Array.from(row.querySelectorAll("td")).map((column) => column.textContent)
+ );
+ expect(row1Columns).toEqual(["0", "recipient", "address", "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044"]);
+ expect(row2Columns).toEqual(["1", "amount", "uint256", "1"]);
+ });
+ it("renders binary decoded data when selected in the dropdown", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: { ...transactionData, method: transactionDataDecodedMethod },
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ await fireEvent.click(container.querySelector(".show-as-dropdown .toggle-button")!);
+ await fireEvent.click(container.querySelectorAll(".options-list-item")[1]);
+ expect(container.querySelector(".show-as-dropdown")?.textContent).toBe(
+ i18n.global.t("transactionData.viewOptions.original")
+ );
+ expect(container.querySelector(".encoded-data-container")?.textContent).toBe(
+ "MethodID: 0xa9059cbb[0]: 000000000000000000000000a1cf087db965ab02fb3cface1f5c63935815f044[1]: 0000000000000000000000000000000000000000000000000000000000000001"
+ );
+ });
+ it("renders original data by default if contract is not verified", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: transactionData,
+ error: "contract_not_verified",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".transaction-byte-data")?.textContent).toBe(
+ "0xa9059cbb000000000000000000000000a1cf087db965ab02fb3cface1f5c63935815f0440000000000000000000000000000000000000000000000000000000000000001"
+ );
+ expect(container.querySelector(".decoding-data-error")?.textContent).toBe(
+ i18n.global.t("transactionData.errors.unableToDecode", {
+ error: i18n.global.t("transactionData.errors.contract_not_verified"),
+ })
+ );
+ });
+ it("renders empty data without error and decode button", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: { ...transactionData, calldata: "0x" },
+ error: "",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".transaction-byte-data")?.textContent).toBe("0x");
+ expect(container.querySelector(".decoding-data-error")).toBeNull();
+ expect(container.querySelector(".toggle-decode-button")).toBeNull();
+ });
+ it("doesn't render decode button if contract is not verified", () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: transactionData,
+ error: "contract_not_verified",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".toggle-decode-button")).toBeNull();
+ });
+ it("renders custom error correctly", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: transactionData,
+ error: "Custom error message",
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".decoding-data-error")?.textContent).toBe(
+ i18n.global.t("transactionData.errors.unableToDecode", {
+ error: "Custom error message",
+ })
+ );
+ });
+ it("renders loading", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: transactionData,
+ loading: true,
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ await fireEvent.click(container.querySelector(".toggle-decode-button")!);
+ expect(container.querySelector(".decoding-loading")?.textContent).toBe(
+ i18n.global.t("transactionData.decodingInProgress")
+ );
+ });
+ it("toggles decoded / original data correctly", async () => {
+ const { container } = render(TransactionDataComponent, {
+ props: {
+ data: { ...transactionData, method: transactionDataDecodedMethod },
+ },
+ global: {
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ plugins: [i18n, $testId],
+ },
+ });
+ expect(container.querySelector(".transaction-byte-data")).toBeFalsy();
+ await fireEvent.click(container.querySelector(".toggle-decode-button")!);
+ expect(container.querySelector(".method-interface")).toBeFalsy();
+ expect(container.querySelector(".show-as-dropdown")).toBeFalsy();
+ expect(container.querySelector(".method-parameters-table")).toBeFalsy();
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransactionDirectionTableCell.spec.ts b/packages/app/tests/components/transactions/TransactionDirectionTableCell.spec.ts
new file mode 100644
index 0000000000..3380719846
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransactionDirectionTableCell.spec.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import TransactionDirectionTableCell from "@/components/transactions/TransactionDirectionTableCell.vue";
+
+describe("TransactionDirectionTableCell:", () => {
+ it("renders 'in' state properly", () => {
+ const wrapper = mount(TransactionDirectionTableCell, {
+ props: {
+ text: "in",
+ },
+ });
+ expect(wrapper.find(".incoming").exists()).toBe(true);
+ expect(wrapper.find(".incoming").text()).toBe("in");
+ });
+ it("renders 'out' state properly", () => {
+ const wrapper = mount(TransactionDirectionTableCell, {
+ props: {
+ text: "out",
+ },
+ });
+ expect(wrapper.find(".outcoming").exists()).toBe(true);
+ expect(wrapper.find(".outcoming").text()).toBe("out");
+ });
+ it("renders 'self' state properly", () => {
+ const wrapper = mount(TransactionDirectionTableCell, {
+ props: {
+ text: "self",
+ },
+ });
+ expect(wrapper.find(".self").exists()).toBe(true);
+ expect(wrapper.find(".self").text()).toBe("self");
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransactionNetworkSquareBlock.spec.ts b/packages/app/tests/components/transactions/TransactionNetworkSquareBlock.spec.ts
new file mode 100644
index 0000000000..7255edf29e
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransactionNetworkSquareBlock.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+
+import { mount } from "@vue/test-utils";
+
+import TransactionSquare from "@/components/transactions/TransactionNetworkSquareBlock.vue";
+
+describe("TransactionNetworkSquareBlock:", () => {
+ it("renders component", () => {
+ const wrapper = mount(TransactionSquare, {
+ props: {
+ network: "L1",
+ },
+ });
+ expect(wrapper.find(".transactions-data-link-network").text()).toBe("L1");
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransactionNonceTableCell.spec.ts b/packages/app/tests/components/transactions/TransactionNonceTableCell.spec.ts
new file mode 100644
index 0000000000..5854a8b12f
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransactionNonceTableCell.spec.ts
@@ -0,0 +1,47 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { mount } from "@vue/test-utils";
+
+import TransactionNonceTableCell from "@/components/transactions/TransactionNonceTableCell.vue";
+
+import enUS from "@/locales/en.json";
+
+describe("TransactionNonceTableCell:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ it("shows info icon when transaction direction value is 'in'", () => {
+ const container = mount(TransactionNonceTableCell, {
+ props: {
+ nonce: 10,
+ direction: "in",
+ showInfo: true,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.find(".nonce-info-icon")).toBeDefined();
+ expect(container.find(".transactions-data-transaction-nonce").text()).toBe("10");
+ });
+ it("hides info icon when 'nonce-info' is equal to false", () => {
+ const { container } = render(TransactionNonceTableCell, {
+ props: {
+ nonce: 10,
+ direction: "in",
+ showInfo: false,
+ },
+ global: {
+ plugins: [i18n],
+ },
+ });
+ expect(container.querySelector(".nonce-info-icon")).toBeNull();
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransferInfo.spec.ts b/packages/app/tests/components/transactions/TransferInfo.spec.ts
new file mode 100644
index 0000000000..02fb9ead41
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransferInfo.spec.ts
@@ -0,0 +1,135 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import { $fetch } from "ohmyfetch";
+
+import TransferInfo from "@/components/transactions/infoTable/TransferInfo.vue";
+
+import enUS from "@/locales/en.json";
+
+vi.mock("ohmyfetch", () => {
+ return {
+ $fetch: vi.fn(() => ({})),
+ };
+});
+
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://sepolia.etherscan.io/");
+vi.mock("@/composables/useContext", () => {
+ return {
+ default: () => ({
+ currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+ }),
+ };
+});
+
+describe("TransferInfo:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ const global = {
+ plugins: [i18n],
+ stubs: { RouterLink: RouterLinkStub },
+ };
+ it("renders component properly", async () => {
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ const mock = ($fetch as any).mockResolvedValue({ accountType: "eOA" });
+
+ const wrapper = mount(TransferInfo, {
+ global,
+ props: {
+ label: "From",
+ address: "0x6c10d9c1744f149d4b17660e14faa247964749c7",
+ network: "L2",
+ },
+ });
+ expect(wrapper.find("span")?.text()).toBe("From");
+ expect(wrapper.findComponent(RouterLinkStub).props().to.name).toBe("address");
+ expect(wrapper.findComponent(RouterLinkStub).props().to.params.address).toBe(
+ "0x6c10d9C1744F149D4B17660E14FaA247964749c7"
+ );
+ expect(wrapper.find(".copy-btn")).toBeTruthy();
+ expect(wrapper.find(".transactions-data-link-network")?.text()).toBe("L2");
+
+ mock.mockRestore();
+ wrapper.unmount();
+ });
+ it("renders component properly for L1 network", async () => {
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ const mock = ($fetch as any).mockResolvedValue({ accountType: "eOA" });
+
+ const wrapper = mount(TransferInfo, {
+ global,
+ props: {
+ label: "From",
+ address: "0x6c10d9c1744f149d4b17660e14faa247964749c7",
+ network: "L1",
+ },
+ });
+ expect(wrapper.find("span")?.text()).toBe("From");
+ expect(wrapper.findAll("a")[0].attributes("href")).toEqual(
+ "https://sepolia.etherscan.io//address/0x6c10d9c1744f149d4b17660e14faa247964749c7"
+ );
+ expect(wrapper.findAll("a")[0].text()).toEqual("0x6c10d9c1744...49c7");
+ expect(wrapper.find(".copy-btn")).toBeTruthy();
+ expect(wrapper.find(".transactions-data-link-network")?.text()).toBe("L1");
+
+ mock.mockRestore();
+ wrapper.unmount();
+ });
+ it("renders paymaster label when transaction fee is paid by paymaster", async () => {
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ const mock = ($fetch as any).mockResolvedValue({ accountType: "eOA" });
+
+ const wrapper = mount(TransferInfo, {
+ global,
+ props: {
+ label: "From",
+ address: "0x6c10d9c1744f149d4b17660e14faa247964749c7",
+ network: "L2",
+ isPaymaster: true,
+ },
+ });
+ expect(wrapper.find(".paymaster-label")?.text()).toBe("Paymaster");
+
+ mock.mockRestore();
+ wrapper.unmount();
+ });
+ describe("when L1 explorer url is not set", () => {
+ let mock1ExplorerUrl: Mock;
+ beforeEach(() => {
+ mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+ });
+
+ afterEach(() => {
+ mock1ExplorerUrl.mockRestore();
+ });
+
+ it("renders L1 address as text instead of a link", async () => {
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ const mock = ($fetch as any).mockResolvedValue({ accountType: "eOA" });
+
+ const wrapper = mount(TransferInfo, {
+ global,
+ props: {
+ label: "From",
+ address: "0x6c10d9c1744f149d4b17660e14faa247964749c7",
+ network: "L1",
+ },
+ });
+ expect(wrapper.find("span")?.text()).toBe("From");
+ expect(wrapper.findAll("span.address")[0].text()).toEqual("0x6c10d9c1744...49c7");
+ expect(wrapper.find(".copy-btn")).toBeTruthy();
+ expect(wrapper.find(".transactions-data-link-network")?.text()).toBe("L1");
+
+ mock.mockRestore();
+ wrapper.unmount();
+ });
+ });
+});
diff --git a/packages/app/tests/components/transactions/TransferTableCell.spec.ts b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
new file mode 100644
index 0000000000..41c453ed17
--- /dev/null
+++ b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
@@ -0,0 +1,56 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import TransferTableCell from "@/components/transactions/infoTable/TransferTableCell.vue";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+describe("TransferTableCell:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+ const global = {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ };
+ it("renders component properly", () => {
+ const { container } = render(TransferTableCell, {
+ global,
+ props: {
+ transfer: {
+ amount: "0x56bc75e2d63100000",
+ from: "0x6c10d9c1744f149d4b17660e14faa247964749c7",
+ to: "0xd5736a5c56498577b8e699520fe20b57ac91d491",
+ type: "transfer",
+ fromNetwork: "L2",
+ toNetwork: "L2",
+ tokenInfo: {
+ decimals: 18,
+ l1Address: "0x63bfb2118771bd0da7a6936667a7bb705a06c1ba",
+ l2Address: "0x4732c03b2cf6ede46500e799de79a15df44929eb",
+ name: "ChainLink Token (testnet)",
+ symbol: "LINK",
+ usdPrice: 1,
+ },
+ },
+ },
+ });
+
+ expect(container.querySelector(".transfer-container")).toBeTruthy();
+ expect(container.querySelector(".transfer-amount-container")).toBeTruthy();
+ expect(container.querySelectorAll(".transfer-amount-container span").length).toBe(4);
+ expect(container.querySelectorAll(".transfer-amount-container span")[0]?.textContent).toBe("for");
+ expect(container.querySelectorAll(".transfer-amount-container span")[1]?.textContent).toBe("100");
+ expect(container.querySelectorAll(".transfer-amount-container span")[2]?.textContent).toBe("LINK");
+ });
+});
diff --git a/packages/app/tests/components/transfers/Table.spec.ts b/packages/app/tests/components/transfers/Table.spec.ts
new file mode 100644
index 0000000000..37a1ea76b0
--- /dev/null
+++ b/packages/app/tests/components/transfers/Table.spec.ts
@@ -0,0 +1,200 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { render, type RenderResult } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+import { useTimeAgo } from "@vueuse/core";
+
+import { ETH_TOKEN_MOCK, useContextMock, useTransfersMock } from "./../../mocks";
+
+import Table from "@/components/transfers/Table.vue";
+
+import enUS from "@/locales/en.json";
+import elements from "tests/e2e/testId.json";
+
+import $testId from "@/plugins/testId";
+
+vi.mock("vue-router", () => ({
+ useRoute: vi.fn(),
+}));
+vi.mock("@/composables/useTokenLibrary", () => {
+ return {
+ default: () => ({
+ getToken: (address: string) =>
+ address === ETH_TOKEN_MOCK.l2Address
+ ? {
+ ...ETH_TOKEN_MOCK,
+ iconURL: "https://test.link",
+ }
+ : null,
+ getTokens: () => undefined,
+ isRequestFailed: computed(() => false),
+ isRequestPending: computed(() => false),
+ }),
+ };
+});
+
+const transfer = {
+ from: "0x0a27CaAeaD54cc6976175F6f4888beB1f871706b",
+ to: "0xB2bAbfBBB09A17Fb38cBc7E793B18078dd241347",
+ blockNumber: 6681664,
+ transactionHash: "0x99e37da46fd7b2913cef0c7a4366dbdc7eea42c42ace71b5c2b276dea74461ba",
+ amount: "129187024261081",
+ timestamp: "2023-06-01T06:28:16.583Z",
+ tokenAddress: "0x0faF6df7054946141266420b43783387A78d82A9",
+ type: "transfer",
+ fields: null,
+ token: {
+ l2Address: "0x0faF6df7054946141266420b43783387A78d82A9",
+ l1Address: "0xd35CCeEAD182dcee0F148EbaC9447DA2c4D449c4",
+ symbol: "USDC",
+ name: "USD Coin (testnet)",
+ decimals: 6,
+ usdPrice: 1,
+ },
+ fromNetwork: "L1",
+ toNetwork: "L1",
+};
+
+describe("Transfers:", () => {
+ const i18n = createI18n({
+ locale: "en",
+ allowComposition: true,
+ messages: {
+ en: enUS,
+ },
+ });
+
+ let mockContext: SpyInstance;
+ let mockTransfers: SpyInstance;
+
+ beforeEach(() => {
+ mockContext = useContextMock();
+ });
+
+ afterEach(() => {
+ mockContext?.mockRestore();
+ mockTransfers?.mockRestore();
+ });
+
+ describe("Table:", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransfers = useTransfersMock({
+ data: computed(() => [transfer]),
+ });
+ renderResult = render(Table, {
+ props: {
+ address: "0x0a27CaAeaD54cc6976175F6f4888beB1f871706b",
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ afterEach(() => {
+ renderResult?.unmount();
+ });
+
+ it("renders transaction hash column", () => {
+ expect(renderResult!.getByTestId(elements.transactionsHash).textContent).toEqual("0x99e37da46fd...61ba");
+ });
+
+ it("renders timestamp column", () => {
+ expect(renderResult!.getByTestId(elements.timestamp).textContent).toBe(useTimeAgo(transfer.timestamp).value);
+ });
+
+ it("renders type column", () => {
+ expect(renderResult!.getByTestId(elements.transferType).textContent).toBe(transfer.type);
+ });
+
+ it("renders from column", () => {
+ expect(renderResult!.getByTestId(elements.fromAddress).textContent).toEqual("0x0a27CaAeaD5...706b");
+ expect(renderResult!.getByTestId(elements.transferFromOrigin).textContent).toEqual("L1");
+ expect(renderResult!.getByTestId(elements.transferFromOriginTablet).textContent).toEqual("L1");
+ });
+
+ it("renders direction column", () => {
+ expect(renderResult!.getByTestId(elements.direction).textContent).toEqual("out");
+ });
+
+ it("renders to column", () => {
+ expect(renderResult!.getByTestId(elements.toAddress).textContent).toEqual("0xB2bAbfBBB09...1347");
+ expect(renderResult!.getByTestId(elements.transferToOrigin).textContent).toEqual("L1");
+ expect(renderResult!.getByTestId(elements.transferToOriginTablet).textContent).toEqual("L1");
+ });
+
+ it("renders from/to column for tablet", () => {
+ expect(renderResult?.getByText("0x0a27CaAeaD5...706b", { selector: ".tablet-column a" }));
+ expect(renderResult?.getByText("0xB2bAbfBBB09...1347", { selector: ".tablet-column a" }));
+ });
+
+ it("renders amount column", () => {
+ expect(renderResult!.getByTestId(elements.tokenAmount).textContent).toEqual("129187024.261081");
+ expect(renderResult!.getByTestId(elements.tokenAmountPrice).textContent).toEqual("$129.19M");
+ });
+ });
+
+ describe("Table with pagination:", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2023-06-02T10:00:00.000Z"));
+ });
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ describe("when total > pageSize", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransfers = useTransfersMock({
+ data: computed(() => Array.from({ length: 10 }).map(() => transfer)),
+ total: computed(() => 11),
+ });
+ renderResult = render(Table, {
+ props: {
+ address: "0x0a27CaAeaD54cc6976175F6f4888beB1f871706b",
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ it("renders pagination", async () => {
+ expect(renderResult!.container.querySelector(".pagination")).not.toBeNull();
+ });
+ });
+
+ describe("when total < pageSize", () => {
+ let renderResult: RenderResult | null;
+
+ beforeEach(() => {
+ mockTransfers = useTransfersMock({
+ data: computed(() => [transfer]),
+ total: computed(() => 1),
+ });
+ renderResult = render(Table, {
+ props: {
+ address: "0x0a27CaAeaD54cc6976175F6f4888beB1f871706b",
+ },
+ global: {
+ plugins: [i18n, $testId],
+ stubs: { RouterLink: RouterLinkStub },
+ },
+ });
+ });
+
+ it("does not render pagination", async () => {
+ expect(renderResult!.container.querySelector(".pagination")).toBeNull();
+ });
+ });
+ });
+});
diff --git a/packages/app/tests/composables/common/useFetch.spec.ts b/packages/app/tests/composables/common/useFetch.spec.ts
new file mode 100644
index 0000000000..0136f57aff
--- /dev/null
+++ b/packages/app/tests/composables/common/useFetch.spec.ts
@@ -0,0 +1,64 @@
+import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { $fetch } from "ohmyfetch";
+
+import composable, { type UseFetch } from "@/composables/common/useFetch";
+
+vi.mock("ohmyfetch", () => {
+ return {
+ $fetch: vi.fn(() => null),
+ };
+});
+
+describe("useFetch:", () => {
+ afterEach(() => {
+ ($fetch as unknown as SpyInstance).mockReset();
+ });
+ it("creates useFetch composable", () => {
+ const result = composable(() => new URL("https://block-explorer-api.testnets.zksync.dev"));
+ expect(result.pending).toBeDefined();
+ expect(result.failed).toBeDefined();
+ expect(result.item).toBeDefined();
+ expect(result.fetch).toBeDefined();
+ });
+ describe("estimate", () => {
+ let fc: UseFetch