Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
**/tailwind-output.css
.vercel
**/.vitepress/cache
**/.vitepress/.temp
**/.vitepress/dist

**/.vscode
Expand Down
22 changes: 22 additions & 0 deletions src/components/FeatureCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<a :href="linkUrl" class="block h-full text-inherit no-underline">
<div
class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
>
<div class="mb-4 text-3xl">{{ icon }}</div>
<h3 class="text-text1 m-0 mb-2">{{ title }}</h3>
<p class="text-text2 m-0 flex-grow leading-relaxed">{{ description }}</p>
</div>
</a>
</template>

<script setup lang="ts">
interface Props {
icon: string;
title: string;
description: string;
linkUrl: string;
}

defineProps<Props>();
</script>
51 changes: 51 additions & 0 deletions src/components/ImageViewer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<template>
<div :class="['my-8', { 'text-center': centered }]">
<a :href="linkUrl" target="_blank" rel="noreferrer">
<img
:src="imageUrl"
:alt="imageAlt"
:style="{
width: '100%',
maxWidth: maxWidth,
borderRadius: borderRadius,
border: '1px solid var(--vp-c-border)',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
}"
class="transition-transform duration-200 ease-in-out hover:scale-[1.02]"
/>
</a>
<p v-if="caption" class="mt-4 font-medium">
<a
:href="linkUrl"
target="_blank"
rel="noreferrer"
class="text-primary hover:text-primary2 inline-flex items-center gap-2 no-underline transition-colors duration-200"
>
<Icon :icon="linkIcon" height="16" />
{{ caption }}
</a>
</p>
</div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue';

interface Props {
imageUrl: string;
imageAlt: string;
linkUrl: string;
caption?: string;
linkIcon?: string;
centered?: boolean;
maxWidth?: string;
borderRadius?: string;
}

withDefaults(defineProps<Props>(), {
linkIcon: 'mdi:external-link',
centered: true,
maxWidth: '800px',
borderRadius: '8px',
});
</script>
6 changes: 4 additions & 2 deletions src/components/UseCaseCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
rel="noreferrer"
>
<Icon :icon="demoIcon" height="18" />
Try Live Demo
{{ demoLabel || 'Try Live Demo' }}
</Button>
<Button
v-if="githubUrl"
Expand All @@ -49,7 +49,7 @@
variant="secondary"
>
<Icon icon="mdi:github" height="18" />
View Code
{{ githubLabel || 'View Code' }}
</Button>
</div>
</div>
Expand All @@ -70,6 +70,8 @@ interface Props {
demoUrl?: string;
githubUrl?: string;
demoIcon: string;
demoLabel?: string;
githubLabel?: string;
}

defineProps<Props>();
Expand Down
192 changes: 23 additions & 169 deletions src/overview/tooling-and-explorers/blockchain-explorer.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,58 +13,28 @@ publicly auditable.

## 🌐 Supported Networks

<div class="networks-grid">
<div class="network-card">
<div class="card-image">
<a href="https://arbiscan.io/" target="_blank" rel="noreferrer">
<img src="/assets/tooling-&-explorers/blockchain-explorer/arbitrum-explorer.png" alt="Arbitrum Explorer">
</a>
</div>
<div class="card-content">
<h3>🔷 Arbitrum Mainnet</h3>
<p class="card-description">
Production network for mainnet operations with verified smart contracts and comprehensive transaction tracking.
</p>
<div class="card-features">
<span class="feature-tag">Verified Contracts</span>
<span class="feature-tag">Transaction History</span>
<span class="feature-tag">Token Tracking</span>
<span class="feature-tag">Contract Interactions</span>
</div>
<div class="card-actions">
<a href="https://arbiscan.io/" target="_blank" rel="noreferrer" class="explorer-link">
<Icon icon="mdi:eye" height="18" />
Explore on Arbiscan
</a>
</div>
</div>
</div>

<div class="network-card">
<div class="card-image">
<a href="https://blockscout-bellecour.iex.ec/" target="_blank" rel="noreferrer">
<img src="/assets/tooling-&-explorers/blockchain-explorer/bellecour-explorer.png" alt="Bellecour Explorer">
</a>
</div>
<div class="card-content">
<h3>⚡ Bellecour Network</h3>
<p class="card-description">
iExec's dedicated sidechain for optimized performance with native integration and enhanced protocol analytics.
</p>
<div class="card-features">
<span class="feature-tag">Verified Contracts</span>
<span class="feature-tag">Transaction History</span>
<span class="feature-tag">Token Tracking</span>
<span class="feature-tag">Contract Interactions</span>
</div>
<div class="card-actions">
<a href="https://blockscout-bellecour.iex.ec/" target="_blank" rel="noreferrer" class="explorer-link">
<Icon icon="mdi:eye" height="18" />
Explore on Bellecour Blockscout
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 my-8">
<UseCaseCard
title="🔷 Arbitrum Mainnet"
description="Production network for mainnet operations with verified smart contracts and comprehensive transaction tracking."
image-url="/assets/tooling-&-explorers/blockchain-explorer/arbitrum-explorer.png"
image-alt="Arbitrum Explorer"
:features="['Verified Contracts', 'Transaction History', 'Token Tracking', 'Contract Interactions']"
demo-url="https://arbiscan.io/"
demo-icon="mdi:eye"
demo-label="Visit Arbiscan"
/>

<UseCaseCard
title="⚡ Bellecour Network"
description="iExec's dedicated sidechain for optimized performance with native integration and enhanced protocol analytics."
image-url="/assets/tooling-&-explorers/blockchain-explorer/bellecour-explorer.png"
image-alt="Bellecour Explorer"
:features="['Verified Contracts', 'Transaction History', 'Token Tracking', 'Contract Interactions']"
demo-url="https://blockscout-bellecour.iex.ec/"
demo-icon="mdi:eye"
demo-label="Visit Blockscout"
/>
</div>

::: tip 💡 Dev Tip
Expand All @@ -74,122 +44,6 @@ deploy to **Arbitrum** for production workloads.

:::

<style scoped>
.networks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.network-card {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.network-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: var(--vp-c-brand-1);
}

.card-image {
position: relative;
overflow: hidden;
}

.card-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}

.card-image:hover img {
transform: scale(1.05);
}

.card-content {
padding: 1.5rem;
}

.card-content h3 {
margin: 0 0 1rem 0;
color: var(--vp-c-text-1);
font-size: 1.5rem;
font-weight: 600;
}

.card-description {
color: var(--vp-c-text-2);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}

.card-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

.feature-tag {
background: var(--vp-c-brand-soft);
color: var(--vp-c-brand-1);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid var(--vp-c-brand-2);
}

.card-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.explorer-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.2s ease;
border: 1px solid transparent;
background: var(--vp-c-brand-1);
color: white;
}

.explorer-link:hover {
background: var(--vp-c-brand-2);
transform: translateY(-1px);
}

@media (max-width: 768px) {
.networks-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.card-actions {
flex-direction: column;
}

.explorer-link {
justify-content: center;
}
}
</style>

<script setup>
import { Icon } from '@iconify/vue';
import UseCaseCard from '../../components/UseCaseCard.vue';
</script>
Loading