Skip to content

Commit b8d2b9b

Browse files
bassgetabassgeta
authored
docs: rework homepage to display integration steps (#4)
1 parent f5e67bf commit b8d2b9b

File tree

9 files changed

+2339
-73
lines changed

9 files changed

+2339
-73
lines changed

‎app/components/homepage.tsx‎

Lines changed: 464 additions & 0 deletions
Large diffs are not rendered by default.

‎app/components/viem-account-demo.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,13 @@ import {
1515
DialogTrigger,
1616
} from "@/components/ui/dialog";
1717
import { PaymentWidgetWrapper } from "./payment-widget-wrapper";
18-
import { useState } from "react";
18+
import { useState, useMemo } from "react";
1919
import { Wallet, LogOut } from "lucide-react";
2020

2121
interface ViemAccountDemoProps {
2222
recipientWallet: string;
2323
}
2424

25-
const config = createConfig({
26-
chains: [mainnet, sepolia],
27-
connectors: [injected(), metaMask()],
28-
transports: {
29-
[mainnet.id]: http(),
30-
[sepolia.id]: http(),
31-
},
32-
});
33-
34-
// Create a query client
35-
const queryClient = new QueryClient();
36-
3725
function ViemAccountDemoInner({ recipientWallet }: ViemAccountDemoProps) {
3826
const { address, isConnected } = useAccount();
3927
const { connectors, connect, isPending } = useConnect();
@@ -138,11 +126,35 @@ function ViemAccountDemoInner({ recipientWallet }: ViemAccountDemoProps) {
138126
);
139127
}
140128

141-
export function ViemAccountDemo(props: ViemAccountDemoProps) {
129+
function createDemoWagmiConfig() {
130+
return createConfig({
131+
chains: [mainnet, sepolia],
132+
connectors: [injected(), metaMask()],
133+
transports: {
134+
[mainnet.id]: http(),
135+
[sepolia.id]: http(),
136+
},
137+
});
138+
}
139+
140+
export function ViemAccountDemo({ recipientWallet }: ViemAccountDemoProps) {
141+
const config = useMemo(() => createDemoWagmiConfig(), []);
142+
const queryClient = useMemo(
143+
() =>
144+
new QueryClient({
145+
defaultOptions: {
146+
queries: {
147+
staleTime: 1000 * 60 * 5, // 5 minutes
148+
},
149+
},
150+
}),
151+
[],
152+
);
153+
142154
return (
143155
<WagmiProvider config={config}>
144156
<QueryClientProvider client={queryClient}>
145-
<ViemAccountDemoInner {...props} />
157+
<ViemAccountDemoInner recipientWallet={recipientWallet} />
146158
</QueryClientProvider>
147159
</WagmiProvider>
148160
);

‎app/page.tsx‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
1-
import { PaymentWidgetWrapper } from "./components/payment-widget-wrapper";
2-
import { ViemAccountDemo } from "./components/viem-account-demo";
1+
import { promises as fs } from "fs";
2+
import path from "path";
3+
import { HomePage } from "./components/homepage";
34

4-
export default function Home() {
5-
const recipientWallet = process.env.RECIPIENT_WALLET || "";
5+
export default async function Home() {
6+
const recipientWallet =
7+
process.env.RECIPIENT_WALLET ||
8+
"0x0000000000000000000000000000000000000000";
9+
10+
// Load README content
11+
const readmePath = path.join(
12+
process.cwd(),
13+
"registry/default/payment-widget/README.md",
14+
);
15+
const readmeContent = await fs.readFile(readmePath, "utf8");
616

717
return (
818
<main className="container mx-auto py-8 px-4 space-y-8">
9-
<h1 className="text-2xl font-bold mb-6">RequestNetwork UI Registry</h1>
10-
11-
<div className="space-y-8">
12-
<div>
13-
<h2 className="text-lg font-semibold mb-4">
14-
Payment Widget Preview:
15-
</h2>
16-
<PaymentWidgetWrapper recipientWallet={recipientWallet} />
17-
</div>
18-
19-
<div>
20-
<ViemAccountDemo recipientWallet={recipientWallet} />
21-
</div>
22-
</div>
23-
24-
<div className="bg-primary p-4 rounded">
25-
<h3 className="font-semibold mb-2">Install this component:</h3>
26-
<code className="text-sm">
27-
npx shadcn add @requestnetwork/payment-widget
28-
</code>
29-
</div>
19+
<HomePage
20+
recipientWallet={recipientWallet}
21+
readmeContent={readmeContent}
22+
/>
3023
</main>
3124
);
3225
}

‎components/markdown-renderer/index.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
"use client";
2+
import ReactMarkdown from "react-markdown";
3+
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
4+
import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";
5+
6+
export function MarkdownRenderer({ markdown }: { markdown: string }) {
7+
return (
8+
<div className="prose prose-neutral dark:prose-invert max-w-none">
9+
<ReactMarkdown
10+
components={{
11+
// Headings
12+
h1: ({ children }) => (
13+
<h1 className="text-3xl font-bold mb-6 text-foreground border-b border-border pb-2">
14+
{children}
15+
</h1>
16+
),
17+
h2: ({ children }) => (
18+
<h2 className="text-2xl font-semibold mb-4 mt-8 text-foreground">
19+
{children}
20+
</h2>
21+
),
22+
h3: ({ children }) => (
23+
<h3 className="text-xl font-semibold mb-3 mt-6 text-foreground">
24+
{children}
25+
</h3>
26+
),
27+
h4: ({ children }) => (
28+
<h4 className="text-lg font-semibold mb-2 mt-4 text-foreground">
29+
{children}
30+
</h4>
31+
),
32+
h5: ({ children }) => (
33+
<h5 className="text-base font-semibold mb-2 mt-4 text-foreground">
34+
{children}
35+
</h5>
36+
),
37+
h6: ({ children }) => (
38+
<h6 className="text-sm font-semibold mb-2 mt-4 text-foreground">
39+
{children}
40+
</h6>
41+
),
42+
43+
// Paragraphs
44+
p: ({ children }) => (
45+
<p className="mb-4 text-muted-foreground leading-relaxed">
46+
{children}
47+
</p>
48+
),
49+
50+
// Lists
51+
ul: ({ children }) => (
52+
<ul className="list-disc list-inside mb-4 space-y-1 text-muted-foreground ml-4">
53+
{children}
54+
</ul>
55+
),
56+
ol: ({ children }) => (
57+
<ol className="list-decimal list-inside mb-4 space-y-1 text-muted-foreground ml-4">
58+
{children}
59+
</ol>
60+
),
61+
li: ({ children }) => <li className="mb-1">{children}</li>,
62+
63+
// Links
64+
a: ({ href, children }) => (
65+
<a
66+
href={href}
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
className="text-primary hover:underline"
70+
>
71+
{children}
72+
</a>
73+
),
74+
75+
// Emphasis
76+
strong: ({ children }) => (
77+
<strong className="font-semibold text-foreground">
78+
{children}
79+
</strong>
80+
),
81+
em: ({ children }) => <em className="italic">{children}</em>,
82+
83+
// Blockquotes
84+
blockquote: ({ children }) => (
85+
<blockquote className="border-l-4 border-primary pl-4 italic text-muted-foreground my-4 bg-muted/30 py-2">
86+
{children}
87+
</blockquote>
88+
),
89+
90+
// Tables
91+
table: ({ children }) => (
92+
<div className="overflow-x-auto mb-4">
93+
<table className="min-w-full border border-border rounded-lg">
94+
{children}
95+
</table>
96+
</div>
97+
),
98+
thead: ({ children }) => (
99+
<thead className="bg-muted">{children}</thead>
100+
),
101+
tbody: ({ children }) => (
102+
<tbody className="divide-y divide-border">{children}</tbody>
103+
),
104+
tr: ({ children }) => (
105+
<tr className="hover:bg-muted/50">{children}</tr>
106+
),
107+
th: ({ children }) => (
108+
<th className="px-4 py-2 text-left font-semibold text-foreground">
109+
{children}
110+
</th>
111+
),
112+
td: ({ children }) => (
113+
<td className="px-4 py-2 text-muted-foreground">{children}</td>
114+
),
115+
116+
// Horizontal rule
117+
hr: () => <hr className="my-8 border-border" />,
118+
119+
// Code (inline and blocks)
120+
code(props) {
121+
const { children, className, node, ...rest } = props;
122+
const match = /language-(\w+)/.exec(className || "");
123+
124+
return match ? (
125+
<div className="my-4">
126+
<SyntaxHighlighter
127+
/* @ts-expect-error - SyntaxHighlighter types are outdated and cause style prop conflicts */
128+
style={darcula}
129+
language={match[1]}
130+
PreTag="div"
131+
customStyle={{
132+
margin: 0,
133+
borderRadius: "0.5rem",
134+
fontSize: "0.875rem",
135+
}}
136+
{...rest}
137+
>
138+
{String(children).replace(/\n$/, "")}
139+
</SyntaxHighlighter>
140+
</div>
141+
) : (
142+
<code
143+
className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono text-foreground"
144+
{...rest}
145+
>
146+
{children}
147+
</code>
148+
);
149+
},
150+
151+
// Pre (for code blocks without language)
152+
pre: ({ children }) => (
153+
<pre className="bg-muted p-4 rounded-lg overflow-x-auto mb-4 text-sm">
154+
{children}
155+
</pre>
156+
),
157+
}}
158+
>
159+
{markdown}
160+
</ReactMarkdown>
161+
</div>
162+
);
163+
}

‎components/ui/card.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-lg border bg-card text-card-foreground shadow-sm",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLDivElement,
34+
React.HTMLAttributes<HTMLDivElement>
35+
>(({ className, ...props }, ref) => (
36+
<div
37+
ref={ref}
38+
className={cn(
39+
"text-2xl font-semibold leading-none tracking-tight",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = "CardTitle"
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLDivElement,
49+
React.HTMLAttributes<HTMLDivElement>
50+
>(({ className, ...props }, ref) => (
51+
<div
52+
ref={ref}
53+
className={cn("text-sm text-muted-foreground", className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = "CardDescription"
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({ className, ...props }, ref) => (
63+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64+
))
65+
CardContent.displayName = "CardContent"
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({ className, ...props }, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn("flex items-center p-6 pt-0", className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = "CardFooter"
78+
79+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

‎components/ui/collapsible.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client"
2+
3+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4+
5+
const Collapsible = CollapsiblePrimitive.Root
6+
7+
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8+
9+
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10+
11+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

0 commit comments

Comments
 (0)