Skip to content

Commit b295559

Browse files
uF4Nosarahschwartz
uF4No
and
sarahschwartz
authored
feat: zksync network focus (#429)
# Description - Improved landing page for ZKsync Network messaging - Moved `/zksync-era` content to `/zksync-network`, updated menus and links. - Add redirects from `/zksync-era/*` to `/zksync-network/*` - Additional cards in landing page - New page, chain list inside `/zksync-era/environment` ## TODOs - Confirm hero copy - Broken links? - Styling issues? mobile view? ## Linked Issues N/A ## Additional context Aligns with ZKsync new website. Focus on ZKsync Network as a cluster of chains. --------- Co-authored-by: Sarah Schwartz <[email protected]>
1 parent 2570869 commit b295559

File tree

369 files changed

+1826
-594
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

369 files changed

+1826
-594
lines changed

‎components/ChainsList.vue‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<script setup lang="ts">
2+
import chainsData from '~/data/chains.json';
3+
4+
interface Chain {
5+
name: string;
6+
chainId: number;
7+
icon: string; // URL to chain logo image
8+
isTestnet: boolean;
9+
documentationURL: string;
10+
explorerURL?: string;
11+
baseToken: string;
12+
pubdataMode: string;
13+
dataAvailability: string;
14+
}
15+
16+
const showTestnets = ref(false);
17+
18+
const filteredChains = computed(() => {
19+
return chainsData.filter((chain: Chain) => showTestnets.value || !chain.isTestnet);
20+
});
21+
22+
const mainnetChains = computed(() => chainsData.filter((chain: Chain) => !chain.isTestnet));
23+
const testnetChains = computed(() => chainsData.filter((chain: Chain) => chain.isTestnet));
24+
25+
const columns = [
26+
{
27+
key: 'name',
28+
label: 'Chain Name',
29+
},
30+
{
31+
key: 'chainId',
32+
label: 'Chain ID',
33+
},
34+
{
35+
key: 'baseToken',
36+
label: 'Base Token',
37+
},
38+
{
39+
key: 'dataAvailability',
40+
label: 'Data Availability',
41+
},
42+
{
43+
key: 'links',
44+
label: 'Links',
45+
},
46+
];
47+
</script>
48+
49+
<template>
50+
<div>
51+
<div class="mb-6 flex items-center justify-between">
52+
<div class="flex items-center space-x-4">
53+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
54+
Showing {{ filteredChains.length }} chains ({{ mainnetChains.length }} mainnet{{
55+
showTestnets ? `, ${testnetChains.length} testnet` : ''
56+
}})
57+
</span>
58+
</div>
59+
<div class="flex items-center space-x-3">
60+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Mainnets only</span>
61+
<UToggle v-model="showTestnets" />
62+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Include testnets</span>
63+
</div>
64+
</div>
65+
66+
<!-- Chain List Table -->
67+
<div class="not-prose overflow-x-auto">
68+
<UTable
69+
:columns="columns"
70+
:rows="filteredChains"
71+
class="min-w-full divide-y divide-gray-200 rounded-lg border border-gray-200 dark:divide-gray-700 dark:border-gray-700"
72+
:ui="{
73+
table: 'w-full table-auto',
74+
thead: 'bg-gray-50 dark:bg-gray-800',
75+
trow: 'transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 whitespace-nowrap px-6 py-4',
76+
tbody: 'divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900',
77+
td: { base: 'whitespace-nowrap px-6 py-8' },
78+
tr: { base: 'transition-colors hover:bg-gray-50 dark:hover:bg-gray-800' },
79+
th: {
80+
base: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider',
81+
},
82+
}"
83+
>
84+
<template #name-data="{ row }">
85+
<div class="flex min-w-0 items-center gap-2 truncate">
86+
<img
87+
:src="row.icon"
88+
:alt="`${row.name} logo`"
89+
class="mr-3 h-6 w-6 rounded-full object-cover"
90+
/>
91+
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
92+
{{ row.name }}
93+
</div>
94+
</div>
95+
</template>
96+
97+
<template #chainId-data="{ row }">
98+
<div class="flex items-center justify-center gap-2">
99+
<span
100+
class="rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-900 dark:bg-gray-700 dark:text-gray-100"
101+
>
102+
{{ row.chainId }}
103+
</span>
104+
</div>
105+
</template>
106+
107+
<template #baseToken-data="{ row }">
108+
<div>
109+
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
110+
{{ row.baseToken }}
111+
</span>
112+
</div>
113+
</template>
114+
115+
<template #dataAvailability-data="{ row }">
116+
<div>
117+
<span
118+
:class="{
119+
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200':
120+
row.dataAvailability === 'Ethereum',
121+
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': row.dataAvailability === 'Avail',
122+
'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200':
123+
row.dataAvailability === 'EigenLayer',
124+
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200': row.dataAvailability === 'NoDA',
125+
}"
126+
class="inline-flex rounded-full px-2 py-1 text-xs font-medium"
127+
>
128+
{{ row.dataAvailability }}
129+
</span>
130+
</div>
131+
</template>
132+
133+
<template #links-data="{ row }">
134+
<div class="flex items-center space-x-3">
135+
<NuxtLink
136+
:to="row.documentationURL"
137+
class="text-primary hover:text-primary-dark inline-flex items-center transition-colors"
138+
:title="`View ${row.name} Documentation`"
139+
>
140+
<UIcon
141+
name="i-heroicons-document-text-20-solid"
142+
class="h-5 w-5"
143+
/>
144+
</NuxtLink>
145+
<a
146+
v-if="row.explorerURL"
147+
:href="row.explorerURL"
148+
target="_blank"
149+
rel="noopener noreferrer"
150+
class="text-primary hover:text-primary-dark inline-flex items-center transition-colors"
151+
:title="`View ${row.name} Explorer`"
152+
>
153+
<UIcon
154+
name="i-heroicons-magnifying-glass-20-solid"
155+
class="h-5 w-5"
156+
/>
157+
</a>
158+
</div>
159+
</template>
160+
</UTable>
161+
</div>
162+
</div>
163+
</template>

0 commit comments

Comments
 (0)