Skip to content

Commit 53c3c7b

Browse files
committed
update
1 parent 2de56d9 commit 53c3c7b

File tree

3 files changed

+162
-0
lines changed

3 files changed

+162
-0
lines changed
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {
3+
WalletIconBasic,
4+
WalletNameBasic,
5+
WalletNameFormat,
6+
} from "@/components/headless-ui/wallet-examples";
7+
8+
import ThirdwebProvider from "@/components/thirdweb-provider";
9+
import { metadataBase } from "@/lib/constants";
10+
import type { Metadata } from "next";
11+
12+
export const metadata: Metadata = {
13+
metadataBase,
14+
title: "Wallet Components",
15+
description:
16+
"Boost your crypto wallet applications with our React headless UI components, optimized for digital asset management. These flexible, unstyled elements simplify cryptocurrency operations while granting developers complete control over the user interface design.",
17+
};
18+
19+
export default function Page() {
20+
return (
21+
<ThirdwebProvider>
22+
<main className="container px-0 pb-20">
23+
<APIHeader
24+
title="Wallet Components"
25+
description={
26+
<>
27+
Boost your crypto wallet applications with our React headless UI
28+
components, optimized for digital asset management. These
29+
flexible, unstyled elements simplify cryptocurrency operations
30+
while granting developers complete control over the user interface
31+
design.
32+
</>
33+
}
34+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
35+
heroLink="/headless-ui-header.png"
36+
/>
37+
<section className="space-y-8">
38+
<WalletIconBasic />
39+
</section>
40+
<section className="space-y-8">
41+
<WalletNameBasic />
42+
</section>
43+
<section className="space-y-8">
44+
<WalletNameFormat />
45+
</section>
46+
</main>
47+
</ThirdwebProvider>
48+
);
49+
}

apps/playground-web/src/app/navLinks.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,10 @@ export const navLinks: SidebarLink[] = [
127127
name: "Token",
128128
href: "/connect/ui/token",
129129
},
130+
{
131+
name: "Wallet",
132+
href: "/connect/ui/wallet",
133+
},
130134
],
131135
},
132136
];
Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
"use client";
2+
3+
import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react";
4+
import { CodeExample } from "../code/code-example";
5+
6+
export function WalletIconBasic() {
7+
return (
8+
<>
9+
<div className="space-y-2">
10+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
11+
WalletIcon
12+
</h2>
13+
<p className="max-w-[600px] text-lg">
14+
Show the icon of a crypto wallet
15+
</p>
16+
</div>
17+
18+
<CodeExample
19+
preview={
20+
<WalletProvider id="io.metamask">
21+
<WalletIcon
22+
className="h-20 w-20 rounded-full"
23+
loadingComponent={<span>Loading...</span>}
24+
/>
25+
</WalletProvider>
26+
}
27+
code={`import { WalletProvider, WalletIcon } from "thirdweb/react";
28+
29+
function App() {
30+
return (
31+
<WalletProvider id="io.metamask">
32+
<WalletIcon
33+
className="h-20 w-20 rounded-full"
34+
loadingComponent={<span>Loading...</span>}
35+
/>
36+
</WalletProvider>
37+
)
38+
}`}
39+
lang="tsx"
40+
/>
41+
</>
42+
);
43+
}
44+
45+
export function WalletNameBasic() {
46+
return (
47+
<>
48+
<div className="mt-8 space-y-2">
49+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
50+
WalletName
51+
</h2>
52+
<p className="max-w-[600px] text-lg">
53+
Show the name of a crypto wallet
54+
</p>
55+
</div>
56+
57+
<CodeExample
58+
preview={
59+
<WalletProvider id="io.metamask">
60+
<WalletName loadingComponent={<span>Loading...</span>} />
61+
</WalletProvider>
62+
}
63+
code={`import { WalletProvider, WalletName } from "thirdweb/react";
64+
65+
function App() {
66+
return (
67+
<WalletProvider id="io.metamask">
68+
<WalletName loadingComponent={<span>Loading...</span>} />
69+
</WalletProvider>
70+
)
71+
}`}
72+
lang="tsx"
73+
/>
74+
</>
75+
);
76+
}
77+
78+
export function WalletNameFormat() {
79+
return (
80+
<>
81+
<div className="mt-8 space-y-2">
82+
<p className="max-w-[600px] text-lg">
83+
Transform the wallet name using the <b>formatFn</b> prop.
84+
</p>
85+
</div>
86+
87+
<CodeExample
88+
preview={
89+
<WalletProvider id="io.metamask">
90+
<WalletName formatFn={(str: string) => `${str} Wallet`} />
91+
</WalletProvider>
92+
}
93+
code={`import { WalletProvider, WalletName } from "thirdweb/react";
94+
95+
function App() {
96+
return (
97+
<WalletProvider id="io.metamask">
98+
<WalletName
99+
loadingComponent={<span>Loading...</span>}
100+
formatFn={(str: string) => \`\${str} Wallet\`}
101+
/>
102+
</WalletProvider>
103+
)
104+
}`}
105+
lang="tsx"
106+
/>
107+
</>
108+
);
109+
}

0 commit comments

Comments
 (0)