Skip to content

Commit dea70a4

Browse files
sudo-shashanksudo-shashank
authored
Restructure & Split Components (#231)
1 parent 77dc43f commit dea70a4

Some content is hidden

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

49 files changed

+1178
-950
lines changed

‎docs/components.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
Forest Explorer Components Diagram
2+
3+
```mermaid
4+
flowchart TD
5+
%% Forest Explorer Components
6+
subgraph Main
7+
direction TB
8+
App[App]
9+
Ctrl[Faucet Controller]
10+
Model[Faucet Model]
11+
Server[SSR Logic]
12+
RateLimiter[Rate Limiter]
13+
Constants[Network Constants]
14+
end
15+
16+
%% UI
17+
subgraph UI
18+
direction TB
19+
Views[Views]
20+
Home[Home]
21+
Faucets[Faucets]
22+
Components[UI Components]
23+
end
24+
25+
%% Sub-sections of UI
26+
subgraph Faucets
27+
direction TB
28+
Mainnet[Mainnet]
29+
Calibnet[Calibnet]
30+
end
31+
subgraph Components
32+
direction TB
33+
Layout[Layout]
34+
Balance[Balance]
35+
Transaction[Transaction]
36+
Icon[Icon]
37+
Alert[Alert]
38+
Nav[Navigation]
39+
end
40+
41+
%% Utilities
42+
subgraph Utils
43+
direction TB
44+
Addr[Address]
45+
Key
46+
Fmt[Format]
47+
Err[Errors]
48+
Msg[Message]
49+
RpcCtx[RPC Context]
50+
LotusJson[Lotus JSON]
51+
end
52+
53+
%% Main relations
54+
App --> Ctrl
55+
App --> Server
56+
Ctrl --> Model
57+
Ctrl --> RateLimiter
58+
Ctrl --> Constants
59+
Ctrl --> Utils
60+
Ctrl --> Views
61+
Server --> Utils
62+
63+
%% UI relations
64+
Views --> Faucets
65+
Views --> Components
66+
67+
%% UI sub-relations
68+
Faucets --> Mainnet
69+
Faucets --> Calibnet
70+
Components --> Layout
71+
Components --> Balance
72+
Components --> Transaction
73+
Components --> Icon
74+
Components --> Alert
75+
Components --> Nav
76+
77+
%% Utilities relations
78+
Utils --> LotusJson
79+
Utils --> Addr
80+
Utils --> Key
81+
Utils --> Fmt
82+
Utils --> Err
83+
Utils --> Msg
84+
Utils --> RpcCtx
85+
```

‎e2e/script.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,20 +103,21 @@ async function checkFooter(page, path) {
103103
const PAGES = [
104104
{
105105
path: "",
106-
buttons: ["To faucet list"],
106+
buttons: ["Faucet List"],
107107
links: ["Filecoin Slack", "documentation"],
108108
},
109109
{
110110
path: "/faucet",
111+
buttons: ["Home"],
111112
links: ["Calibration Network Faucet", "Mainnet Network Faucet"],
112113
},
113114
{
114115
path: "/faucet/calibnet",
115-
buttons: ["Back to faucet list", "Transaction History", "Send"],
116+
buttons: ["Faucet List", "Transaction History", "Send"],
116117
},
117118
{
118119
path: "/faucet/mainnet",
119-
buttons: ["Back to faucet list", "Transaction History", "Send"],
120+
buttons: ["Faucet List", "Transaction History", "Send"],
120121
},
121122
];
122123

‎src/app.rs‎

Lines changed: 9 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,12 @@
1-
use crate::icons::{CheckIcon, LightningIcon};
2-
use crate::rpc_context::{Provider, RpcContext};
3-
use fvm_shared::address::Network;
1+
use crate::faucet::views::faucets::{calibnet::Faucet_Calibnet, mainnet::Faucet_Mainnet, Faucets};
2+
use crate::faucet::views::{components::layout::Footer, home::Explorer};
3+
use crate::utils::rpc_context::RpcContext;
44
use leptos::prelude::*;
5-
use leptos::{component, leptos_dom::helpers::event_target_value, view, IntoView};
5+
use leptos::{component, view, IntoView};
66
use leptos_meta::*;
77
use leptos_router::components::*;
88
use leptos_router::path;
99

10-
#[allow(dead_code)]
11-
pub fn shell(options: LeptosOptions) -> impl IntoView {
12-
view! {
13-
<!DOCTYPE html>
14-
<html lang="en">
15-
<head>
16-
<title>Filecoin Forest Explorer Faucet - Get Free tFIL and FIL</title>
17-
<meta charset="utf-8" />
18-
<meta name="robots" content="index, follow" />
19-
<meta name="viewport" content="width=device-width, initial-scale=1" />
20-
<meta
21-
name="description"
22-
content="Get free tFIL and FIL on the Filecoin Forest Explorer Faucet by ChainSafe. Quickly connect your wallet, request tokens, and start building or experimenting on the Filecoin testnet or mainnet with ease."
23-
/>
24-
25-
<AutoReload options=options.clone() />
26-
<HydrationScripts options />
27-
<MetaTags />
28-
</head>
29-
</html>
30-
}
31-
}
32-
33-
#[component]
34-
pub fn Loader(loading: impl Fn() -> bool + 'static + Send) -> impl IntoView {
35-
view! { <span class:loader=loading /> }
36-
}
37-
38-
#[component]
39-
pub fn BlockchainExplorer() -> impl IntoView {
40-
let rpc_context = RpcContext::use_context();
41-
let network_name = LocalResource::new(move || {
42-
let provider = rpc_context.get();
43-
async move { provider.network_name().await.ok() }
44-
});
45-
46-
let network_version = LocalResource::new(move || {
47-
let provider = rpc_context.get();
48-
async move { provider.network_version().await.ok() }
49-
});
50-
51-
view! {
52-
<main class="min-h-screen flex flex-col flex-grow space-y-8">
53-
<div class="space-y-6 flex flex-col items-center">
54-
<h1 class="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
55-
Filecoin Forest Explorer Faucet
56-
</h1>
57-
<p class="max-w-2xl text-center">
58-
The Filecoin Forest Explorer Faucet provides developers and users with free calibnet(tFil) and mainnet(FIL) to support their exploration, testing and development on the Filecoin network.
59-
</p>
60-
</div>
61-
62-
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl w-full m-auto">
63-
<div class="bg-white p-6 rounded-lg border border-gray-100">
64-
<h2 class="text-lg font-semibold text-gray-900 mb-4">What does the faucet offer?</h2>
65-
<ul class="space-y-3">
66-
<li class="flex items-start">
67-
<CheckIcon />
68-
<span class="text-gray-600">Free calibnet tFIL for experimentation and development.</span>
69-
</li>
70-
<li class="flex items-start">
71-
<CheckIcon />
72-
<span class="text-gray-600">
73-
Real mainnet FIL for contributors engaging with the Filecoin ecosystem.
74-
</span>
75-
</li>
76-
<li class="flex items-start">
77-
<CheckIcon />
78-
<span class="text-gray-600">
79-
A Quick and Easy way to request free tFIL and FIL - Just enter your wallet address.
80-
</span>
81-
</li>
82-
</ul>
83-
</div>
84-
85-
<div class="bg-white p-6 rounded-lg border border-gray-100">
86-
<h2 class="text-lg font-semibold text-gray-900 mb-4">Why use this faucet?</h2>
87-
<ul class="space-y-3">
88-
<li class="flex items-start">
89-
<LightningIcon class="text-blue-500".to_string() />
90-
<span class="text-gray-600">
91-
Supports both calibnet and mainnet, unlike typical faucets.
92-
</span>
93-
</li>
94-
<li class="flex items-start">
95-
<LightningIcon class="text-blue-500".to_string() />
96-
<span class="text-gray-600">
97-
Enables testing of smart contracts, storage deals, and blockchain interactions without financial risk.
98-
</span>
99-
</li>
100-
<li class="flex items-start">
101-
<LightningIcon class="text-blue-500".to_string() />
102-
<span class="text-gray-600">
103-
Easy access to FIL for developers and users building on Filecoin.
104-
</span>
105-
</li>
106-
<li class="flex items-start">
107-
<LightningIcon class="text-blue-500".to_string() />
108-
<span class="text-gray-600">
109-
Need help? Visit the
110-
<a class="text-blue-500" href="https://filecoin.io/slack" target="_blank">
111-
{" "}
112-
Filecoin Slack
113-
</a>{" "}or <a class="text-blue-500" href="https://docs.filecoin.io" target="_blank">
114-
{" "}
115-
documentation
116-
</a>.
117-
</span>
118-
</li>
119-
</ul>
120-
</div>
121-
</div>
122-
123-
<div class="space-y-6 flex flex-col items-center">
124-
<div class="relative w-64">
125-
<select
126-
on:change=move |ev| { rpc_context.set(event_target_value(&ev)) }
127-
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:border-gray-400 transition-colors cursor-pointer appearance-none"
128-
>
129-
<option value=Provider::get_network_url(Network::Testnet)>Glif.io Calibnet</option>
130-
<option value=Provider::get_network_url(Network::Mainnet)>Glif.io Mainnet</option>
131-
</select>
132-
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
133-
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
134-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
135-
</svg>
136-
</div>
137-
</div>
138-
<div class="flex items-center w-[300px] justify-between">
139-
<p>Network:</p>
140-
<Transition fallback=move || view! { <p>Loading network name...</p> }>
141-
<p>
142-
<span>{move || network_name.get().flatten()}</span>
143-
<Loader loading=move || network_name.get().is_none() />
144-
</p>
145-
</Transition>
146-
</div>
147-
<div class="flex items-center w-[300px] justify-between">
148-
<p>Version:</p>
149-
<Transition fallback=move || view! { <p>Loading network version...</p> }>
150-
<p>
151-
<span>{move || network_version.get().flatten()}</span>
152-
<Loader loading=move || network_version.get().is_none() />
153-
</p>
154-
</Transition>
155-
</div>
156-
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg">
157-
<a href="/faucet">To faucet list</a>
158-
</button>
159-
</div>
160-
161-
</main>
162-
}
163-
}
164-
165-
#[component]
166-
fn Footer() -> impl IntoView {
167-
view! {
168-
<footer class="py-4 text-center">
169-
<a
170-
class="text-green-600"
171-
target="_blank"
172-
rel="noopener noreferrer"
173-
href="https://github.com/ChainSafe/forest-explorer"
174-
>
175-
Forest Explorer
176-
</a>
177-
", built with ❤️ by "
178-
<a class="text-blue-600" target="_blank" rel="noopener noreferrer" href="https://chainsafe.io">
179-
ChainSafe Systems
180-
</a>
181-
</footer>
182-
}
183-
}
184-
18510
#[component]
18611
pub fn App() -> impl IntoView {
18712
provide_meta_context();
@@ -191,12 +16,12 @@ pub fn App() -> impl IntoView {
19116
<Stylesheet href="/style.css" />
19217
<Link rel="icon" type_="image/x-icon" href="/favicon.ico" />
19318
<Router>
194-
<div class="flex flex-col min-h-screen space-y-8 py-10 px-6 min-h-screen">
19+
<div class="app-container">
19520
<Routes fallback=|| "Not found.">
196-
<Route path=path!("/") view=BlockchainExplorer />
197-
<Route path=path!("/faucet") view=crate::faucet::views::Faucets />
198-
<Route path=path!("/faucet/calibnet") view=crate::faucet::views::Faucet_Calibnet />
199-
<Route path=path!("/faucet/mainnet") view=crate::faucet::views::Faucet_Mainnet />
21+
<Route path=path!("/") view=Explorer />
22+
<Route path=path!("/faucet") view=Faucets />
23+
<Route path=path!("/faucet/calibnet") view=Faucet_Calibnet />
24+
<Route path=path!("/faucet/mainnet") view=Faucet_Mainnet />
20025
</Routes>
20126
<Footer />
20227
</div>

src/constants.rs renamed to src/faucet/constants.rs

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
use std::sync::LazyLock;
2-
31
use fvm_shared::econ::TokenAmount;
2+
use std::sync::LazyLock;
43

5-
/// The rate limit imposed by the CloudFlare's rate limiter, and also reflected in the user
6-
/// interface.
4+
// Calibnet constants
75
pub const CALIBNET_RATE_LIMIT_SECONDS: i64 = 60;
6+
pub static FIL_CALIBNET_UNIT: &str = "tFIL";
7+
/// The amount of mainnet FIL to be dripped to the user. This corresponds to 1 tFIL.
8+
pub static CALIBNET_DRIP_AMOUNT: LazyLock<TokenAmount> =
9+
LazyLock::new(|| TokenAmount::from_whole(1));
10+
11+
// Mainnet constants
812
pub const MAINNET_RATE_LIMIT_SECONDS: i64 = 600;
13+
pub static FIL_MAINNET_UNIT: &str = "FIL";
914
/// The amount of mainnet FIL to be dripped to the user. This corresponds to 0.01 FIL.
1015
pub static MAINNET_DRIP_AMOUNT: LazyLock<TokenAmount> =
1116
LazyLock::new(|| TokenAmount::from_nano(10_000_000));
12-
/// The amount of calibnet tFIL to be dripped to the user.
13-
pub static CALIBNET_DRIP_AMOUNT: LazyLock<TokenAmount> =
14-
LazyLock::new(|| TokenAmount::from_whole(1));
15-
pub static FIL_MAINNET_UNIT: &str = "FIL";
16-
pub static FIL_CALIBNET_UNIT: &str = "tFIL";

0 commit comments

Comments
 (0)