Skip to content

Commit 2dc3093

Browse files
0xstt0xstt
committed
mobile view improvements
1 parent 6bbb1e3 commit 2dc3093

File tree

6 files changed

+360
-66
lines changed

6 files changed

+360
-66
lines changed

‎app/(home)/stats/validators/[slug]/page.tsx‎

Lines changed: 87 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -570,18 +570,24 @@ export default function ChainValidatorsPage() {
570570
{chainInfo.chainName} Validators
571571
</h1>
572572
</div>
573-
{/* Blockchain ID and Subnet ID chips */}
573+
{/* Blockchain ID and Subnet ID chips + Add to Wallet */}
574574
{(chainInfo.subnetId || chainInfo.blockchainId || chainInfo.rpcUrl) && (
575-
<div className="flex flex-wrap items-center gap-2 mt-3">
576-
<ChainIdChips subnetId={chainInfo.subnetId} blockchainId={chainInfo.blockchainId} />
577-
{chainInfo.rpcUrl && (
578-
<AddToWalletButton
579-
rpcUrl={chainInfo.rpcUrl}
580-
chainName={chainInfo.chainName}
581-
chainId={chainInfo.chainId ? parseInt(chainInfo.chainId) : undefined}
582-
tokenSymbol={(chainInfo as any).tokenSymbol}
583-
/>
584-
)}
575+
<div className="mt-3 -mx-4 px-4 sm:mx-0 sm:px-0">
576+
<div className="flex flex-row items-center gap-2 overflow-x-auto scrollbar-hide pb-1">
577+
<div className="flex items-center gap-2 flex-shrink-0">
578+
<ChainIdChips subnetId={chainInfo.subnetId} blockchainId={chainInfo.blockchainId} />
579+
</div>
580+
{chainInfo.rpcUrl && (
581+
<div className="flex-shrink-0">
582+
<AddToWalletButton
583+
rpcUrl={chainInfo.rpcUrl}
584+
chainName={chainInfo.chainName}
585+
chainId={chainInfo.chainId ? parseInt(chainInfo.chainId) : undefined}
586+
tokenSymbol={(chainInfo as any).tokenSymbol}
587+
/>
588+
</div>
589+
)}
590+
</div>
585591
</div>
586592
)}
587593
{(chainInfo.description || chainInfo.chainName) && (
@@ -591,6 +597,74 @@ export default function ChainValidatorsPage() {
591597
</p>
592598
</div>
593599
)}
600+
{/* Mobile Social Links - shown below description */}
601+
{(chainInfo.website || chainInfo.socials || chainInfo.rpcUrl) && (
602+
<div className="flex sm:hidden items-center gap-2 mt-4">
603+
{chainInfo.website && (
604+
<Button
605+
variant="outline"
606+
size="sm"
607+
asChild
608+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600"
609+
>
610+
<a href={chainInfo.website} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
611+
Website
612+
<ArrowUpRight className="h-4 w-4" />
613+
</a>
614+
</Button>
615+
)}
616+
{chainInfo.socials && (chainInfo.socials.twitter || chainInfo.socials.linkedin) && (
617+
<>
618+
{chainInfo.socials.twitter && (
619+
<Button
620+
variant="outline"
621+
size="sm"
622+
asChild
623+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2"
624+
>
625+
<a
626+
href={`https://x.com/${chainInfo.socials.twitter}`}
627+
target="_blank"
628+
rel="noopener noreferrer"
629+
aria-label="Twitter"
630+
>
631+
<Twitter className="h-4 w-4" />
632+
</a>
633+
</Button>
634+
)}
635+
{chainInfo.socials.linkedin && (
636+
<Button
637+
variant="outline"
638+
size="sm"
639+
asChild
640+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2"
641+
>
642+
<a
643+
href={`https://linkedin.com/company/${chainInfo.socials.linkedin}`}
644+
target="_blank"
645+
rel="noopener noreferrer"
646+
aria-label="LinkedIn"
647+
>
648+
<Linkedin className="h-4 w-4" />
649+
</a>
650+
</Button>
651+
)}
652+
</>
653+
)}
654+
{chainInfo.rpcUrl && (
655+
<div className="[&_button]:border-zinc-300 dark:[&_button]:border-zinc-700 [&_button]:text-zinc-600 dark:[&_button]:text-zinc-400 [&_button]:hover:border-zinc-400 dark:[&_button]:hover:border-zinc-600">
656+
<ExplorerDropdown
657+
explorers={[
658+
{ name: "BuilderHub", link: `/explorer/${chainInfo.slug}` },
659+
...(chainInfo.explorers || []).filter((e: { name: string }) => e.name !== "BuilderHub"),
660+
]}
661+
variant="outline"
662+
size="sm"
663+
/>
664+
</div>
665+
)}
666+
</div>
667+
)}
594668
{chainInfo.category && (
595669
<div className="mt-3">
596670
<span
@@ -607,8 +681,8 @@ export default function ChainValidatorsPage() {
607681
</div>
608682
</div>
609683

610-
<div className="flex flex-col sm:flex-row items-end gap-2">
611-
{/* Main action buttons */}
684+
{/* Desktop Social Links - hidden on mobile */}
685+
<div className="hidden sm:flex flex-row items-end gap-2">
612686
<div className="flex items-center gap-2">
613687
{chainInfo.website && (
614688
<Button

‎app/(home)/stats/validators/c-chain/page.tsx‎

Lines changed: 87 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -851,25 +851,99 @@ export default function CChainValidatorMetrics() {
851851
C-Chain Validators
852852
</h1>
853853
</div>
854-
{/* Blockchain ID and Subnet ID chips */}
854+
{/* Blockchain ID and Subnet ID chips + Add to Wallet */}
855855
{(chainConfig.subnetId || chainConfig.blockchainId || chainConfig.rpcUrl) && (
856-
<div className="flex flex-wrap items-center gap-2 mt-3">
857-
<ChainIdChips subnetId={chainConfig.subnetId} blockchainId={chainConfig.blockchainId} />
858-
{chainConfig.rpcUrl && (
859-
<AddToWalletButton
860-
rpcUrl={chainConfig.rpcUrl}
861-
chainName="Avalanche C-Chain"
862-
chainId={43114}
863-
tokenSymbol="AVAX"
864-
/>
865-
)}
856+
<div className="mt-3 -mx-4 px-4 sm:mx-0 sm:px-0">
857+
<div className="flex flex-row items-center gap-2 overflow-x-auto scrollbar-hide pb-1">
858+
<div className="flex items-center gap-2 flex-shrink-0">
859+
<ChainIdChips subnetId={chainConfig.subnetId} blockchainId={chainConfig.blockchainId} />
860+
</div>
861+
{chainConfig.rpcUrl && (
862+
<div className="flex-shrink-0">
863+
<AddToWalletButton
864+
rpcUrl={chainConfig.rpcUrl}
865+
chainName="Avalanche C-Chain"
866+
chainId={43114}
867+
tokenSymbol="AVAX"
868+
/>
869+
</div>
870+
)}
871+
</div>
866872
</div>
867873
)}
868874
<div className="flex items-center gap-3 mt-3">
869875
<p className="text-sm sm:text-base text-zinc-500 dark:text-zinc-400 max-w-2xl">
870876
{chainConfig.description}
871877
</p>
872878
</div>
879+
{/* Mobile Social Links - shown below description */}
880+
{(chainConfig.website || chainConfig.socials || chainConfig.rpcUrl) && (
881+
<div className="flex sm:hidden items-center gap-2 mt-4">
882+
{chainConfig.website && (
883+
<Button
884+
variant="outline"
885+
size="sm"
886+
asChild
887+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600"
888+
>
889+
<a href={chainConfig.website} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
890+
Website
891+
<ArrowUpRight className="h-4 w-4" />
892+
</a>
893+
</Button>
894+
)}
895+
{chainConfig.socials && (chainConfig.socials.twitter || chainConfig.socials.linkedin) && (
896+
<>
897+
{chainConfig.socials.twitter && (
898+
<Button
899+
variant="outline"
900+
size="sm"
901+
asChild
902+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2"
903+
>
904+
<a
905+
href={`https://x.com/${chainConfig.socials.twitter}`}
906+
target="_blank"
907+
rel="noopener noreferrer"
908+
aria-label="Twitter"
909+
>
910+
<Twitter className="h-4 w-4" />
911+
</a>
912+
</Button>
913+
)}
914+
{chainConfig.socials.linkedin && (
915+
<Button
916+
variant="outline"
917+
size="sm"
918+
asChild
919+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2"
920+
>
921+
<a
922+
href={`https://linkedin.com/company/${chainConfig.socials.linkedin}`}
923+
target="_blank"
924+
rel="noopener noreferrer"
925+
aria-label="LinkedIn"
926+
>
927+
<Linkedin className="h-4 w-4" />
928+
</a>
929+
</Button>
930+
)}
931+
</>
932+
)}
933+
{chainConfig.rpcUrl && (
934+
<div className="[&_button]:border-zinc-300 dark:[&_button]:border-zinc-700 [&_button]:text-zinc-600 dark:[&_button]:text-zinc-400 [&_button]:hover:border-zinc-400 dark:[&_button]:hover:border-zinc-600">
935+
<ExplorerDropdown
936+
explorers={[
937+
{ name: "BuilderHub", link: `/explorer/${chainConfig.slug}` },
938+
...(chainConfig.explorers || []).filter((e: { name: string }) => e.name !== "BuilderHub"),
939+
]}
940+
variant="outline"
941+
size="sm"
942+
/>
943+
</div>
944+
)}
945+
</div>
946+
)}
873947
<div className="mt-3">
874948
<span
875949
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
@@ -928,8 +1002,8 @@ export default function CChainValidatorMetrics() {
9281002
</div>
9291003
</div>
9301004

931-
<div className="flex flex-col sm:flex-row items-end gap-2">
932-
{/* Main action buttons */}
1005+
{/* Desktop Social Links - hidden on mobile */}
1006+
<div className="hidden sm:flex flex-row items-end gap-2">
9331007
<div className="flex items-center gap-2">
9341008
{chainConfig.website && (
9351009
<Button

‎components/explorer/ExplorerLayout.tsx‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -194,21 +194,27 @@ export function ExplorerLayout({
194194
{chainName} Explorer
195195
</h1>
196196
</div>
197-
{/* Blockchain ID and Subnet ID chips */}
197+
{/* Blockchain ID and Subnet ID chips + Add to Wallet */}
198198
{(currentChain?.subnetId || (currentChain as any)?.blockchainId || rpcUrl) && (
199-
<div className="flex flex-wrap items-center gap-2 mt-3">
200-
<ChainIdChips
201-
subnetId={currentChain?.subnetId}
202-
blockchainId={(currentChain as any)?.blockchainId}
203-
/>
204-
{rpcUrl && (
205-
<AddToWalletButton
206-
rpcUrl={rpcUrl}
207-
chainName={chainName}
208-
chainId={currentChain?.chainId ? parseInt(currentChain.chainId) : undefined}
209-
tokenSymbol={currentChain?.tokenSymbol}
210-
/>
211-
)}
199+
<div className="mt-3 -mx-4 px-4 sm:mx-0 sm:px-0">
200+
<div className="flex flex-row items-center gap-2 overflow-x-auto scrollbar-hide pb-1">
201+
<div className="flex items-center gap-2 flex-shrink-0">
202+
<ChainIdChips
203+
subnetId={currentChain?.subnetId}
204+
blockchainId={(currentChain as any)?.blockchainId}
205+
/>
206+
</div>
207+
{rpcUrl && (
208+
<div className="flex-shrink-0">
209+
<AddToWalletButton
210+
rpcUrl={rpcUrl}
211+
chainName={chainName}
212+
chainId={currentChain?.chainId ? parseInt(currentChain.chainId) : undefined}
213+
tokenSymbol={currentChain?.tokenSymbol}
214+
/>
215+
</div>
216+
)}
217+
</div>
212218
</div>
213219
)}
214220
{description && (
@@ -218,6 +224,52 @@ export function ExplorerLayout({
218224
</p>
219225
</div>
220226
)}
227+
{/* Mobile Social Links - shown below description */}
228+
{(website || socials) && (
229+
<div className="flex sm:hidden items-center gap-2 mt-4">
230+
{website && (
231+
<Button
232+
variant="outline"
233+
size="sm"
234+
asChild
235+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 cursor-pointer"
236+
>
237+
<a href={website} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 cursor-pointer">
238+
Website
239+
<ArrowUpRight className="h-4 w-4" />
240+
</a>
241+
</Button>
242+
)}
243+
{socials && (socials.twitter || socials.linkedin) && (
244+
<>
245+
{socials.twitter && (
246+
<Button
247+
variant="outline"
248+
size="sm"
249+
asChild
250+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2 cursor-pointer"
251+
>
252+
<a href={`https://x.com/${socials.twitter}`} target="_blank" rel="noopener noreferrer" aria-label="Twitter" className="cursor-pointer">
253+
<Twitter className="h-4 w-4" />
254+
</a>
255+
</Button>
256+
)}
257+
{socials.linkedin && (
258+
<Button
259+
variant="outline"
260+
size="sm"
261+
asChild
262+
className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2 cursor-pointer"
263+
>
264+
<a href={`https://linkedin.com/company/${socials.linkedin}`} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="cursor-pointer">
265+
<Linkedin className="h-4 w-4" />
266+
</a>
267+
</Button>
268+
)}
269+
</>
270+
)}
271+
</div>
272+
)}
221273
{currentChain?.category && (
222274
<div className="mt-3">
223275
<span
@@ -273,9 +325,9 @@ export function ExplorerLayout({
273325
</div>
274326
</div>
275327

276-
{/* Social Links */}
328+
{/* Desktop Social Links - hidden on mobile */}
277329
{(website || socials) && (
278-
<div className="flex flex-col sm:flex-row items-end gap-2">
330+
<div className="hidden sm:flex flex-row items-end gap-2">
279331
<div className="flex items-center gap-2">
280332
{website && (
281333
<Button

0 commit comments

Comments
 (0)