Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make app l1ExplorerUrl config optional #54

Merged
merged 7 commits into from
Oct 17, 2023
Merged

feat: make app l1ExplorerUrl config optional #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edaef9d
fix: separate app configs for local and dev envs
vasyl-ivanchuk Oct 12, 2023
2b5d871
fix: show all networks in app by default
vasyl-ivanchuk Oct 12, 2023
08d36a0
feat: make app l1BlockExplorer config optional
vasyl-ivanchuk Oct 16, 2023
c6bf554
Merge branch 'main' into fe-make-l1blockexplorer-config-not-required
vasyl-ivanchuk Oct 16, 2023
4ed8cef
Merge branch 'main' into fe-make-l1blockexplorer-config-not-required
vasyl-ivanchuk Oct 16, 2023
11af383
fix: app typecheck
vasyl-ivanchuk Oct 16, 2023
baa59ed
Merge branch 'main' into fe-make-l1blockexplorer-config-not-required
vasyl-ivanchuk Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ const config: EnvironmentConfig = {
verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
hostnames: ["localhost"],
icon: "/images/icons/zksync-arrows.svg",
l1ExplorerUrl: "https://goerli.etherscan.io",
l2ChainId: 270,
l2NetworkName: "Local",
l2WalletUrl: "https://goerli.staging-portal.zksync.dev/",
Expand All @@ -59,7 +58,6 @@ const config: EnvironmentConfig = {
verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
hostnames: ["localhost"],
icon: "/images/icons/zksync-arrows.svg",
l1ExplorerUrl: "https://goerli.etherscan.io",
l2ChainId: 270,
l2NetworkName: "Local Hyperchain",
l2WalletUrl: "https://goerli.staging-portal.zksync.dev/",
Expand Down
11 changes: 10 additions & 1 deletion packages/app/src/components/AddressLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
<template>
<a v-if="network === 'L1'" target="_blank" :href="`${currentNetwork.l1ExplorerUrl}/address/${formattedAddress}`">
<a
v-if="network === 'L1' && !!currentNetwork.l1ExplorerUrl"
target="_blank"
:href="`${currentNetwork.l1ExplorerUrl}/address/${formattedAddress}`"
>
<slot>
{{ formattedAddress }}
</slot>
</a>
<span v-else-if="network === 'L1' && !currentNetwork.l1ExplorerUrl">
<slot>
{{ formattedAddress }}
</slot>
</span>
<router-link v-else :to="{ name: 'address', params: { address: formattedAddress } }">
<slot>
{{ formattedAddress }}
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/batches/InfoTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,9 @@ const tableInfoItems = computed(() => {
tooltip: t(`batches.${key}Tooltip`),
value: { value: props.batch[key] },
component: CopyContent,
url: `${currentNetwork.value.l1ExplorerUrl}/tx/${props.batch[key]}`,
url: currentNetwork.value.l1ExplorerUrl
? `${currentNetwork.value.l1ExplorerUrl}/tx/${props.batch[key]}`
: undefined,
...(key === "proveTxHash" &&
props.batch.isProvenByNewProver && {
additionalContentComponent: NewProverInfoBox,
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/blocks/InfoTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,9 @@ const tableInfoItems = computed(() => {
tooltip: t(`blocks.table.${key}Tooltip`),
value: { value: props.block[key] },
component: CopyContent,
url: `${currentNetwork.value.l1ExplorerUrl}/tx/${props.block[key]}`,
url: currentNetwork.value.l1ExplorerUrl
? `${currentNetwork.value.l1ExplorerUrl}/tx/${props.block[key]}`
: undefined,
...(key === "proveTxHash" &&
props.block.isProvenByNewProver && {
additionalContentComponent: NewProverInfoBox,
Expand Down
24 changes: 16 additions & 8 deletions packages/app/src/components/transactions/Status.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@
<ol v-for="(finishedStatus, index) in item.finishedStatuses" :key="index">
<li>
<a
:href="`${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}`"
:href="
currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}` : undefined
"
class="badge-status-link"
target="_blank"
>
<span class="badge-status-link-text"><CheckIcon />{{ finishedStatus.text }}</span>
<ExternalLinkIcon class="badge-status-link-icon" />
<ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
</a>
</li>
</ol>
Expand All @@ -36,12 +38,12 @@
<template #default v-if="item.text">
<a
v-if="item.url"
:href="`${currentNetwork.l1ExplorerUrl}/tx/${item.url}`"
:href="currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${item.url}` : undefined"
class="badge-status-link"
target="_blank"
>
<span class="badge-status-link-text"><CheckIcon />{{ item.text }}</span>
<ExternalLinkIcon class="badge-status-link-icon" />
<ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
</a>
<span v-else>{{ item.text }}</span>
</template>
Expand Down Expand Up @@ -103,19 +105,25 @@
:key="index"
>
<a
:href="`${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}`"
:href="
currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}` : undefined
"
class="badge-status-link"
target="_blank"
>
<span class="badge-status-link-text"><CheckIcon />{{ finishedStatus.text }}</span>
<ExternalLinkIcon class="badge-status-link-icon" />
<ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
</a>
</div>

<div v-if="item.url" class="badge-status-popup-button status-active">
<a :href="`${currentNetwork.l1ExplorerUrl}/tx/${item.url}`" class="badge-status-link" target="_blank">
<a
:href="currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${item.url}` : undefined"
class="badge-status-link"
target="_blank"
>
<span class="badge-status-link-text status-next"><CheckIcon />{{ item.text }}</span>
<ExternalLinkIcon class="badge-status-link-icon" />
<ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
</a>
</div>
<div v-else class="badge-status-popup-button status-current">
Expand Down
3 changes: 3 additions & 0 deletions packages/app/src/components/transactions/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,9 @@ function getDirection(item: TransactionListItem): Direction {
.transactions-data-link-value {
@apply block cursor-pointer text-sm font-medium;
}
span.transactions-data-link-value {
@apply cursor-default;
}
}
.transactions-data-method {
@apply w-[200px] truncate sm:w-auto;
Expand Down
14 changes: 11 additions & 3 deletions packages/app/src/components/transactions/infoTable/TransferInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,17 @@
<AddressLink v-if="network !== 'L1'" :address="address" class="address">
<span>{{ shortenFitText(address, "left") }}</span>
</AddressLink>
<a v-else class="address" target="_blank" :href="`${currentNetwork.l1ExplorerUrl}/address/${address}`">
<span>{{ shortenFitText(address, "left") }}</span>
</a>
<template v-else>
<a
v-if="currentNetwork.l1ExplorerUrl"
class="address"
target="_blank"
:href="`${currentNetwork.l1ExplorerUrl}/address/${address}`"
>
<span>{{ shortenFitText(address, "left") }}</span>
</a>
<span class="address" v-else>{{ shortenFitText(address, "left") }}</span>
</template>
<CopyButton :value="address" class="copy-btn" />
</div>
</template>
Expand Down
3 changes: 3 additions & 0 deletions packages/app/src/components/transfers/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,9 @@ watch(
.transfers-data-link-value {
@apply block cursor-pointer text-sm font-medium;
}
span.transfers-data-link-value {
@apply cursor-default;
}
}
}
</style>
2 changes: 1 addition & 1 deletion packages/app/src/configs/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export type NetworkConfig = {
l2NetworkName: string;
l2WalletUrl: string;
l2ChainId: 270 | 280 | 324;
l1ExplorerUrl: string;
l1ExplorerUrl?: string;
maintenance: boolean;
published: boolean;
hostnames: string[];
Expand Down
35 changes: 34 additions & 1 deletion packages/app/tests/components/AddressLink.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
import { describe, expect, it } from "vitest";
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://goerli.etherscan.io");
vi.mock("@/composables/useContext", () => {
return {
default: () => ({
currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
}),
};
});

const global = {
stubs: {
RouterLink: RouterLinkStub,
Expand Down Expand Up @@ -58,4 +69,26 @@ describe("Address Link", () => {
"https://goerli.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");
});
});
});
50 changes: 49 additions & 1 deletion packages/app/tests/components/batches/InfoTable.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { computed } from "vue";
import { createI18n } from "vue-i18n";

import { describe, expect, it } from "vitest";
import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";

import { mount, RouterLinkStub } from "@vue/test-utils";

Expand All @@ -13,6 +14,15 @@ import type { BatchDetails } from "@/composables/useBatch";

import { localDateFromISOString } from "@/utils/helpers";

const l1ExplorerUrlMock = vi.fn((): string | null => "https://goerli.etherscan.io");
vi.mock("@/composables/useContext", () => {
return {
default: () => ({
currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
}),
};
});

describe("InfoTable:", () => {
const i18n = createI18n({
locale: "en",
Expand Down Expand Up @@ -145,4 +155,42 @@ describe("InfoTable:", () => {
);
wrapper.unmount();
});
describe("when L1 explorer url is not set", () => {
let mock1ExplorerUrl: Mock;
beforeEach(() => {
mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
});

afterEach(() => {
mock1ExplorerUrl.mockRestore();
});

it("renders L1 hashes as texts instead of links", async () => {
const wrapper = mount(InfoTable, {
global: {
stubs: {
RouterLink: RouterLinkStub,
},
plugins: [i18n],
},
props: {
batch: batchItem,
loading: false,
},
});
expect(wrapper.findAll(".actual-string")[0].text()).toEqual(
"0x8983f748ff6c2f9038904d65dc63a344db33c29d97f1741a931e90689f86b2be"
);
expect(wrapper.findAll(".actual-string")[1].text()).toEqual(
"0x0ab34d8523b67f80783305760a2989ffe6ab205621813db5420a3012845f5ac7"
);
expect(wrapper.findAll(".actual-string")[2].text()).toEqual(
"0x87c5c5bf78100d88766101f13ec78d3b3356929556ee971cfacb6fe2a53b210a"
);
expect(wrapper.findAll(".actual-string")[3].text()).toEqual(
"0x57c44d7c183633f81bfa155bd30e68a94e3ff12c1e6265a4b5e06b6d4a7a1fa8"
);
wrapper.unmount();
});
});
});
62 changes: 61 additions & 1 deletion packages/app/tests/components/blocks/InfoTable.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { computed } from "vue";
import { createI18n } from "vue-i18n";

import { describe, expect, it } from "vitest";
import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";

import { mount, RouterLinkStub } from "@vue/test-utils";

Expand All @@ -14,6 +15,15 @@ import type { Block } from "@/composables/useBlock";

import { localDateFromISOString } from "@/utils/helpers";

const l1ExplorerUrlMock = vi.fn((): string | null => "https://goerli.etherscan.io");
vi.mock("@/composables/useContext", () => {
return {
default: () => ({
currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
}),
};
});

describe("InfoTable:", () => {
const i18n = createI18n({
locale: "en",
Expand Down Expand Up @@ -241,4 +251,54 @@ describe("InfoTable:", () => {
expect(batch[1].findComponent(Tooltip).find("span").text()).toBe("1");
expect(batch[1].findComponent(RouterLinkStub).exists()).toBeFalsy();
});
describe("when L1 explorer url is not set", () => {
let mock1ExplorerUrl: Mock;
beforeEach(() => {
mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
});

afterEach(() => {
mock1ExplorerUrl.mockRestore();
});

it("renders L1 hashes as texts instead of links", async () => {
const wrapper = mount(InfoTable, {
global: {
plugins: [i18n],
stubs: {
RouterLink: RouterLinkStub,
},
},
props: {
block: <Block>{
number: 1,
timestamp: "2022-04-13T16:48:32.000Z",
l1TxCount: 1,
l2TxCount: 0,
hash: "0xcd7533748f8f0c8f406f366e83d5e92d174845405418745d0f7228b85025cd6e",
status: "verified",
commitTxHash: "0x5b5a05691d974803f5f095c1b918d2dd19152ed0a9de506d545c96df6cb9cac2",
committedAt: "2022-04-13T16:54:37.622380Z",
proveTxHash: "0xfb3532f4c38c2eaf78248da64cf80a354429d58204761d6ea6439391043f6fa9",
provenAt: "2022-04-13T16:54:37.700089Z",
executeTxHash: "0x8d1a78d1da5aba1d0755ec9dbcba938f3920681d2a3d4d374ef265a50858f364",
executedAt: "2022-04-13T16:54:37.784185Z",
},
loading: false,
},
});
expect(wrapper.findAll(".actual-string")[0].text()).toEqual(
"0xcd7533748f8f0c8f406f366e83d5e92d174845405418745d0f7228b85025cd6e"
);
expect(wrapper.findAll(".actual-string")[1].text()).toEqual(
"0x5b5a05691d974803f5f095c1b918d2dd19152ed0a9de506d545c96df6cb9cac2"
);
expect(wrapper.findAll(".actual-string")[2].text()).toEqual(
"0xfb3532f4c38c2eaf78248da64cf80a354429d58204761d6ea6439391043f6fa9"
);
expect(wrapper.findAll(".actual-string")[3].text()).toEqual(
"0x8d1a78d1da5aba1d0755ec9dbcba938f3920681d2a3d4d374ef265a50858f364"
);
});
});
});
Loading