Skip to content

Commit 49555a9

Browse files
elsirionelsirion
committed
feat: add wallet page
1 parent 7efde4d commit 49555a9

File tree

7 files changed

+326
-0
lines changed

7 files changed

+326
-0
lines changed

‎docusaurus.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,11 @@ const config = {
8787
position: "right",
8888
label: "Docs",
8989
},
90+
{
91+
to: "wallets",
92+
label: "Wallets",
93+
position: "right",
94+
},
9095
{
9196
to: "blog",
9297
label: "Blog",

‎src/pages/wallets.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from "react";
2+
import Link from "@docusaurus/Link";
3+
import Layout from "@theme/Layout";
4+
import styles from "./wallets.module.css";
5+
6+
function WalletCard({ wallet }) {
7+
return (
8+
<a
9+
href={wallet.link}
10+
target="_blank"
11+
rel="noopener noreferrer"
12+
className={styles.walletCard}
13+
>
14+
<div className={styles.walletImageContainer}>
15+
{wallet.screenshot ? (
16+
<img
17+
src={wallet.screenshot}
18+
alt={`${wallet.name} screenshot`}
19+
className={styles.walletImage}
20+
/>
21+
) : (
22+
<div className={styles.walletImagePlaceholder}>
23+
<span>Screenshot coming soon</span>
24+
</div>
25+
)}
26+
</div>
27+
<div className={styles.walletContent}>
28+
<h3 className={styles.walletName}>{wallet.name}</h3>
29+
<p className={styles.walletDescription}>{wallet.description}</p>
30+
<div className={styles.walletTags}>
31+
{wallet.platforms.map((platform) => (
32+
<span key={platform} className={`${styles.tag} ${styles.platformTag}`}>
33+
{platform}
34+
</span>
35+
))}
36+
{wallet.isBeta && (
37+
<span className={`${styles.tag} ${styles.betaTag}`}>beta</span>
38+
)}
39+
</div>
40+
<span className={styles.walletLink}>
41+
Learn more →
42+
</span>
43+
</div>
44+
</a>
45+
);
46+
}
47+
48+
function CLISection() {
49+
return (
50+
<div className={styles.cliSection}>
51+
<div className={styles.cliContent}>
52+
<h3>Fedimint CLI</h3>
53+
<p>
54+
Command-line wallet included in Fedimint, primarily used for testing and debugging.
55+
Perfect for developers and advanced users who want direct access to Fedimint's core functionality.
56+
</p>
57+
<div className={styles.walletTags}>
58+
<span className={`${styles.tag} ${styles.platformTag}`}>CLI</span>
59+
</div>
60+
<a
61+
href="https://github.com/fedimint/fedimint/"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
className={styles.walletLink}
65+
>
66+
View on GitHub →
67+
</a>
68+
</div>
69+
</div>
70+
);
71+
}
72+
73+
export default function Wallets() {
74+
const wallets = [
75+
{
76+
name: "Fedi",
77+
description: "Source-available mobile app for Fedimint with caht and community features. A fully-featured, production-ready wallet designed for everyday use.",
78+
link: "https://www.fedi.xyz/product/",
79+
platforms: ["iOS", "Android", "APK"],
80+
isBeta: false,
81+
screenshot: require("@site/static/img/wallets/fedi.png").default,
82+
},
83+
{
84+
name: "Ecash App",
85+
description: "Open source Fedimint wallet under active development. Built with a focus on power-users and exploration of new Fedimint features.",
86+
link: "https://ecash.love",
87+
platforms: ["APK"],
88+
isBeta: false,
89+
screenshot: require("@site/static/img/wallets/ecash-app.png").default,
90+
},
91+
{
92+
name: "Vipr",
93+
description: "Open source PWA Fedimint wallet in beta stage. Expect evolving features and ongoing improvements.",
94+
link: "https://beta.vipr.cash/",
95+
platforms: ["Web"],
96+
isBeta: true,
97+
screenshot: require("@site/static/img/wallets/vipr.png").default,
98+
},
99+
{
100+
name: "Harbor",
101+
description: "Open source Fedimint wallet in very early development. Currently supports signet only, perfect for testing and experimentation.",
102+
link: "https://github.com/MutinyWallet/harbor",
103+
platforms: ["Desktop"],
104+
isBeta: true,
105+
screenshot: require("@site/static/img/wallets/harbor.png").default,
106+
},
107+
];
108+
109+
return (
110+
<Layout
111+
title="Wallets"
112+
description="Explore the ecosystem of Fedimint wallets - from mobile apps to web-based solutions."
113+
>
114+
<section
115+
style={{
116+
background: "var(--body-background)",
117+
color: "var(--header-font-color)",
118+
padding: "4rem 0 2rem 0",
119+
textAlign: "center",
120+
}}
121+
>
122+
<div style={{ maxWidth: 1000, margin: "0 auto", padding: "0 1rem" }}>
123+
<h1 style={{ fontSize: "3rem", fontWeight: 700, margin: "0.5em 0" }}>
124+
Fedimint Wallets
125+
</h1>
126+
<p style={{ fontSize: "1.5rem", maxWidth: 600, margin: "0 auto 2em auto" }}>
127+
Choose from a growing ecosystem of wallets to hold, send and receive Bitcoin privately.
128+
</p>
129+
</div>
130+
</section>
131+
132+
<main style={{ padding: "2rem 0 4rem 0" }}>
133+
<div className="container" style={{ maxWidth: 1000 }}>
134+
<div className={styles.walletsGrid}>
135+
{wallets.map((wallet) => (
136+
<WalletCard key={wallet.name} wallet={wallet} />
137+
))}
138+
</div>
139+
140+
<div style={{ marginTop: "4rem" }}>
141+
<h2 style={{ textAlign: "center", fontSize: "2rem", fontWeight: 700, marginBottom: "2rem" }}>
142+
Developer Tools
143+
</h2>
144+
<CLISection />
145+
</div>
146+
</div>
147+
</main>
148+
</Layout>
149+
);
150+
}

‎src/pages/wallets.module.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/* Grid layout for wallets */
2+
.walletsGrid {
3+
display: grid;
4+
grid-template-columns: repeat(2, 1fr);
5+
gap: 2rem;
6+
margin-bottom: 2rem;
7+
}
8+
9+
/* Mobile: stack wallets */
10+
@media screen and (max-width: 768px) {
11+
.walletsGrid {
12+
grid-template-columns: 1fr;
13+
gap: 1.5rem;
14+
}
15+
}
16+
17+
/* Individual wallet card */
18+
.walletCard {
19+
background: #ffffff;
20+
border-radius: 12px;
21+
overflow: hidden;
22+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
23+
transition: transform 0.2s, box-shadow 0.2s;
24+
display: flex;
25+
flex-direction: column;
26+
height: 100%;
27+
text-decoration: none;
28+
color: inherit;
29+
cursor: pointer;
30+
}
31+
32+
.walletCard:hover {
33+
transform: translateY(-4px);
34+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
35+
text-decoration: none;
36+
}
37+
38+
/* Image container - fixed aspect ratio */
39+
.walletImageContainer {
40+
width: 100%;
41+
height: 400px;
42+
background: #f6fcff;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
overflow: hidden;
47+
}
48+
49+
.walletImage {
50+
width: 100%;
51+
height: 100%;
52+
object-fit: cover;
53+
}
54+
55+
.walletImagePlaceholder {
56+
width: 100%;
57+
height: 100%;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
background: linear-gradient(135deg, #f6fcff 0%, #e8f8ff 100%);
62+
color: #2ec4f1;
63+
font-size: 1rem;
64+
font-weight: 500;
65+
}
66+
67+
/* Wallet content section */
68+
.walletContent {
69+
padding: 1.5rem;
70+
display: flex;
71+
flex-direction: column;
72+
flex-grow: 1;
73+
}
74+
75+
.walletName {
76+
font-size: 1.5rem;
77+
font-weight: 700;
78+
margin: 0 0 0.5rem 0;
79+
color: var(--header-font-color);
80+
}
81+
82+
.walletDescription {
83+
font-size: 1rem;
84+
line-height: 1.6;
85+
color: var(--body-font-color);
86+
margin: 0 0 1rem 0;
87+
flex-grow: 1;
88+
}
89+
90+
/* Tags container */
91+
.walletTags {
92+
display: flex;
93+
flex-wrap: wrap;
94+
gap: 0.5rem;
95+
margin-bottom: 1rem;
96+
}
97+
98+
.tag {
99+
padding: 0.25rem 0.75rem;
100+
border-radius: 16px;
101+
font-size: 0.85rem;
102+
font-weight: 600;
103+
text-transform: uppercase;
104+
letter-spacing: 0.5px;
105+
}
106+
107+
.platformTag {
108+
background: #e8f8ff;
109+
color: #1b7ca6;
110+
}
111+
112+
.betaTag {
113+
background: #fff3cd;
114+
color: #856404;
115+
}
116+
117+
/* Link styling */
118+
.walletLink {
119+
color: #2e4af1;
120+
font-weight: 600;
121+
text-decoration: none;
122+
display: inline-flex;
123+
align-items: center;
124+
transition: color 0.2s;
125+
}
126+
127+
.walletLink:hover {
128+
color: #1b7ca6;
129+
text-decoration: none;
130+
}
131+
132+
/* CLI Section */
133+
.cliSection {
134+
background: #ffffff;
135+
border-radius: 12px;
136+
padding: 2rem;
137+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
138+
}
139+
140+
.cliContent h3 {
141+
font-size: 1.75rem;
142+
font-weight: 700;
143+
margin: 0 0 1rem 0;
144+
color: var(--header-font-color);
145+
}
146+
147+
.cliContent p {
148+
font-size: 1rem;
149+
line-height: 1.6;
150+
color: var(--body-font-color);
151+
margin: 0 0 1rem 0;
152+
}
153+
154+
/* Responsive adjustments */
155+
@media screen and (max-width: 996px) {
156+
.walletContent {
157+
padding: 1.25rem;
158+
}
159+
160+
.walletName {
161+
font-size: 1.35rem;
162+
}
163+
164+
.walletDescription {
165+
font-size: 0.95rem;
166+
}
167+
168+
.cliSection {
169+
padding: 1.5rem;
170+
}
171+
}

‎static/img/wallets/ecash-app.png‎

86.5 KB
Loading

‎static/img/wallets/fedi.png‎

195 KB
Loading

‎static/img/wallets/harbor.png‎

95.5 KB
Loading

‎static/img/wallets/vipr.png‎

73.2 KB
Loading

0 commit comments

Comments
 (0)