Skip to content

Commit 994f2a8

Browse files
Le-CaignecLe-Caignec
committed
feat: add RLC Token overview and related assets
1 parent 8892b56 commit 994f2a8

File tree

6 files changed

+294
-0
lines changed

6 files changed

+294
-0
lines changed

‎.vitepress/sidebar.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ export function getSidebar() {
3030
},
3131
],
3232
},
33+
{
34+
text: '🪙 RLC Token',
35+
link: '/overview/rlc',
36+
},
3337
{
3438
text: '🚀 Quick Start',
3539
link: '/overview/quick-start',

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,3 +170,6 @@ Fork this repository and ensure you're working on the `main` branch:
170170
- Add a Development workflow
171171
- Update context7 when doc will be deployed
172172
- Check theGraph Images with design Team
173+
- Update the Dune Dashboard to the final version
174+
- Update or add design illustrations based on the new design system (coordinate
175+
with Emily)

‎src/assets/rlc/dune-dashboard.png‎

427 KB
Loading

‎src/assets/rlc/rlc.gif‎

7.64 MB
Loading

‎src/components/FeatureGridCard.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<div :class="cardClasses">
3+
<div class="mb-4 flex items-center gap-3">
4+
<span class="text-2xl">{{ icon }}</span>
5+
<h3 :class="titleClasses">{{ title }}</h3>
6+
</div>
7+
<ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
8+
<li
9+
v-for="feature in features"
10+
:key="feature"
11+
class="flex items-start gap-2"
12+
>
13+
<span :class="bulletClasses">•</span>
14+
<span>{{ feature }}</span>
15+
</li>
16+
</ul>
17+
</div>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { computed } from 'vue';
22+
23+
interface Props {
24+
title: string;
25+
icon: string;
26+
features: string[];
27+
color?:
28+
| 'blue'
29+
| 'purple'
30+
| 'green'
31+
| 'orange'
32+
| 'gray'
33+
| 'yellow'
34+
| 'indigo'
35+
| 'teal'
36+
| 'pink';
37+
size?: 'sm' | 'md' | 'lg';
38+
}
39+
40+
const props = withDefaults(defineProps<Props>(), {
41+
color: 'blue',
42+
size: 'md',
43+
});
44+
45+
const colorClasses = {
46+
blue: {
47+
card: 'bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-700',
48+
title: 'text-blue-800 dark:text-blue-200',
49+
bullet: 'text-blue-600',
50+
},
51+
purple: {
52+
card: 'bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border-purple-200 dark:border-purple-700',
53+
title: 'text-purple-800 dark:text-purple-200',
54+
bullet: 'text-purple-600',
55+
},
56+
green: {
57+
card: 'bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-700',
58+
title: 'text-green-800 dark:text-green-200',
59+
bullet: 'text-green-600',
60+
},
61+
orange: {
62+
card: 'bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 border-orange-200 dark:border-orange-700',
63+
title: 'text-orange-800 dark:text-orange-200',
64+
bullet: 'text-orange-600',
65+
},
66+
gray: {
67+
card: 'bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900/20 dark:to-gray-800/20 border-gray-200 dark:border-gray-700',
68+
title: 'text-gray-800 dark:text-gray-200',
69+
bullet: 'text-gray-600',
70+
},
71+
yellow: {
72+
card: 'bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 border-yellow-200 dark:border-yellow-700',
73+
title: 'text-yellow-800 dark:text-yellow-200',
74+
bullet: 'text-yellow-600',
75+
},
76+
indigo: {
77+
card: 'bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-indigo-200 dark:border-indigo-700',
78+
title: 'text-indigo-800 dark:text-indigo-200',
79+
bullet: 'text-indigo-600',
80+
},
81+
teal: {
82+
card: 'bg-gradient-to-br from-teal-50 to-teal-100 dark:from-teal-900/20 dark:to-teal-800/20 border-teal-200 dark:border-teal-700',
83+
title: 'text-teal-800 dark:text-teal-200',
84+
bullet: 'text-teal-600',
85+
},
86+
pink: {
87+
card: 'bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 border-pink-200 dark:border-pink-700',
88+
title: 'text-pink-800 dark:text-pink-200',
89+
bullet: 'text-pink-600',
90+
},
91+
};
92+
93+
const sizeClasses = {
94+
sm: {
95+
card: 'p-4',
96+
title: 'text-base font-semibold m-0',
97+
},
98+
md: {
99+
card: 'p-6',
100+
title: 'text-lg font-semibold m-0',
101+
},
102+
lg: {
103+
card: 'p-6',
104+
title: 'text-xl font-semibold m-0',
105+
},
106+
};
107+
108+
const cardClasses = computed(() => [
109+
'rounded-lg border',
110+
colorClasses[props.color].card,
111+
sizeClasses[props.size].card,
112+
]);
113+
114+
const titleClasses = computed(() => [
115+
colorClasses[props.color].title,
116+
sizeClasses[props.size].title,
117+
]);
118+
119+
const bulletClasses = computed(() => [colorClasses[props.color].bullet]);
120+
</script>

‎src/overview/rlc.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
---
2+
title: RLC Token
3+
description:
4+
The RLC token is the native cryptocurrency that powers the iExec decentralized
5+
computing ecosystem
6+
---
7+
8+
<div class="flex flex-col items-center mb-8">
9+
<img :src="rlcGif" alt="RLC Token Animation" class="w-100 h-100 mb-4" />
10+
<h1 class="text-3xl font-bold text-center mb-2">RLC Token</h1>
11+
<p class="text-lg text-center text-gray-600 max-w-2xl">The native cryptocurrency that powers the entire iExec decentralized confidential computing ecosystem</p>
12+
</div>
13+
14+
**RLC** (Run on Lots of Computers) serves as the primary medium of exchange for
15+
all interactions within the protocol, enabling users to access confidential
16+
computing services and rewarding providers for their contributions.
17+
18+
## 🎯 What RLC Enables
19+
20+
RLC is essential for interacting with the iExec protocol and accessing its
21+
decentralized confidential computing services:
22+
23+
### 💰 Transparent Payment Flow
24+
25+
When you pay for a task execution with RLC, your payment is automatically and
26+
transparently distributed to all iExec protocol participants:
27+
28+
<div class="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-700 my-6">
29+
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">🔍 How Your RLC Payment is Distributed</h4>
30+
31+
**1. App Provider** - Gets paid for providing the confidential application
32+
33+
**2. Protected Data Provider** - Gets paid for providing access to protected datasets
34+
35+
**3. Worker** - Gets paid for running the confidential computation on their decentralized machine
36+
37+
</div>
38+
39+
**💡 Transparent:** Payments are distributed based on orders defined by each
40+
provider (iApp, Protected Data, Worker) with their specific pricing and
41+
conditions.
42+
43+
## 💰 Tokenomics
44+
45+
RLC operates on a utility-driven economic model where demand for confidential
46+
computing services drives token value:
47+
48+
**Fixed Supply**: RLC has a maximum supply of 87 million tokens, ensuring
49+
scarcity and value preservation.
50+
51+
**Deflationary Mechanism**: A portion of transaction fees is burned, reducing
52+
the total supply over time and creating deflationary pressure.
53+
54+
**Staking Rewards**: Compute providers can stake RLC to earn additional rewards,
55+
incentivizing network participation and security.
56+
57+
**Network Effects**: As more users and providers join the iExec ecosystem, the
58+
demand for RLC increases, driving token value through network effects.
59+
60+
<div class="mt-8">
61+
<ImageViewer
62+
:image-url-dark="duneDashboard"
63+
image-alt="RLC Token Economics Dashboard"
64+
link-url="https://dune.com/datawarlock/arbitrum-economics"
65+
class="rounded-lg shadow-lg"
66+
/>
67+
<p class="text-center text-sm text-gray-600 mt-2">
68+
📊 <a href="https://dune.com/datawarlock/arbitrum-economics" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800">View live RLC analytics on Dune Dashboard</a>
69+
</p>
70+
</div>
71+
72+
## 🌐 RLC Across Networks
73+
74+
RLC is available on multiple blockchain networks to serve different use cases:
75+
76+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
77+
<FeatureGridCard
78+
title="Ethereum Mainnet"
79+
icon="⟠"
80+
color="gray"
81+
:features="[
82+
'Original ERC-20 RLC token',
83+
'DeFi integrations available',
84+
'High liquidity markets'
85+
]"
86+
/>
87+
88+
<FeatureGridCard
89+
title="Bellecour Sidechain"
90+
icon="⚡"
91+
color="yellow"
92+
:features="[
93+
'xRLC native asset',
94+
'Gasless blockchain',
95+
]"
96+
/>
97+
98+
<FeatureGridCard
99+
title="Arbitrum"
100+
icon="🔷"
101+
color="blue"
102+
:features="[
103+
'Layer 2 scaling solution',
104+
'Reduced transaction costs',
105+
'Ethereum ecosystem access',
106+
'Growing DeFi opportunities'
107+
]"
108+
/>
109+
</div>
110+
111+
## 🔄 Getting RLC
112+
113+
You can acquire RLC tokens through several methods:
114+
115+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
116+
<FeatureGridCard
117+
title="Exchanges"
118+
icon="🏪"
119+
color="indigo"
120+
:features="[
121+
'Centralized exchanges (CEX)',
122+
'Decentralized exchanges (DEX)',
123+
'High liquidity markets'
124+
]"
125+
/>
126+
127+
<FeatureGridCard
128+
title="Cross-Chain Bridging"
129+
icon="🌉"
130+
color="teal"
131+
:features="[
132+
'Bellecour Bridge',
133+
'Stargate Bridge (Arbitrum)',
134+
]"
135+
/>
136+
137+
<FeatureGridCard
138+
title="Earn RLC"
139+
icon="💎"
140+
color="pink"
141+
:features="[
142+
'Develop confidential apps',
143+
'Monetize protected datasets',
144+
'Become a compute provider',
145+
]"
146+
/>
147+
</div>
148+
149+
## 🚀 Ready to get started?
150+
151+
Ready to dive into the iExec ecosystem? Here are the next steps:
152+
153+
- **[Bridge RLC](./tooling-and-explorers/bridge.md)** - Transfer RLC between
154+
networks
155+
- **[Start Using iExec](./quick-start.md)** - Begin your confidential computing
156+
journey
157+
- **[Earn RLC](../manage-data/dataProtector/getting-started.md)** - Become a
158+
provider and monetize your resources
159+
160+
<script setup>
161+
import ImageViewer from '../components/ImageViewer.vue';
162+
import FeatureGridCard from '../components/FeatureGridCard.vue';
163+
164+
// Assets
165+
import rlcGif from '../assets/rlc/rlc.gif';
166+
import duneDashboard from '../assets/rlc/dune-dashboard.png';
167+
</script>

0 commit comments

Comments
 (0)