Skip to content

Commit a0aef83

Browse files
vaunbluvaunblu
committed
refactor: move simple kit into a provider with a hook
1 parent 78f9d2a commit a0aef83

File tree

7 files changed

+163
-122
lines changed

7 files changed

+163
-122
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@tanstack/react-query": "^5.50.1",
1717
"class-variance-authority": "^0.7.0",
1818
"clsx": "^2.1.1",
19+
"geist": "^1.3.1",
1920
"lucide-react": "^0.404.0",
2021
"next": "14.2.4",
2122
"next-themes": "^0.3.0",

‎pnpm-lock.yaml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/layout.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
32
import "./globals.css";
43
import { WagmiProvider } from "@/components/wagmi-provider-ssr";
54
import { headers } from "next/headers";
65
import { cookieToInitialState } from "wagmi";
76
import { getConfig } from "@/lib/wagmi-config";
87
import { ThemeProvider } from "next-themes";
9-
10-
const inter = Inter({ subsets: ["latin"] });
8+
import { GeistSans } from "geist/font/sans";
119

1210
export const metadata: Metadata = {
1311
title: "SimpleKit",
@@ -28,7 +26,7 @@ export default function RootLayout({
2826
return (
2927
<WagmiProvider initialState={initialState}>
3028
<html lang="en" suppressHydrationWarning>
31-
<body className={inter.className}>
29+
<body className={GeistSans.className}>
3230
<ThemeProvider attribute="class">
3331
<div vaul-drawer-wrapper="" className="bg-background">
3432
{children}

‎src/app/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ConnectWallet } from "@/components/connect-wallet";
1+
import { ConnectWalletButton } from "@/components/simplekit";
22
import { Button } from "@/components/ui/button";
33
import { ThemeToggle } from "./theme-toggle";
44
import Link from "next/link";
@@ -20,7 +20,7 @@ export default function Home() {
2020
</div>
2121
<div className="flex items-center gap-3.5">
2222
<ThemeToggle />
23-
<ConnectWallet />
23+
<ConnectWalletButton />
2424
<Link href="https://github.com/vaunblu/SimpleKit" target="_blank">
2525
<Button variant="ghost" className="rounded-xl">
2626
GitHub &rarr;

‎src/components/connect-wallet.tsx renamed to ‎src/components/simplekit.tsx

+93-58
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
import * as React from "react";
44

55
import {
6-
ConnectWalletModal,
7-
ConnectWalletModalBody,
8-
ConnectWalletModalContent,
9-
ConnectWalletModalDescription,
10-
ConnectWalletModalFooter,
11-
ConnectWalletModalHeader,
12-
ConnectWalletModalTitle,
13-
ConnectWalletModalTrigger,
14-
} from "@/components/ui/connect-wallet-modal";
6+
SimpleKitModal,
7+
SimpleKitModalBody,
8+
SimpleKitModalContent,
9+
SimpleKitModalDescription,
10+
SimpleKitModalFooter,
11+
SimpleKitModalHeader,
12+
SimpleKitModalTitle,
13+
} from "@/components/ui/simplekit-modal";
1514
import { Button } from "@/components/ui/button";
1615
import {
1716
type Connector,
@@ -27,7 +26,7 @@ import { Check, ChevronLeft, Copy, RotateCcw } from "lucide-react";
2726

2827
const MODAL_CLOSE_DURATION = 320;
2928

30-
const ConnectWalletContext = React.createContext<{
29+
const SimpleKitContext = React.createContext<{
3130
pendingConnector: Connector | null;
3231
setPendingConnector: React.Dispatch<React.SetStateAction<Connector | null>>;
3332
isConnectorError: boolean;
@@ -43,16 +42,12 @@ const ConnectWalletContext = React.createContext<{
4342
setOpen: () => false,
4443
});
4544

46-
export function ConnectWallet() {
45+
export function SimpleKitProvider(props: { children: React.ReactNode }) {
4746
const { status, address } = useAccount();
4847
const [pendingConnector, setPendingConnector] =
4948
React.useState<Connector | null>(null);
5049
const [isConnectorError, setIsConnectorError] = React.useState(false);
5150
const [open, setOpen] = React.useState(false);
52-
const { data: ensName } = useEnsName({ address });
53-
const { data: ensAvatar } = useEnsAvatar({ name: ensName! });
54-
55-
const formattedAddress = address?.slice(0, 6) + "•••" + address?.slice(-4);
5651
const isConnected = address && !pendingConnector;
5752

5853
React.useEffect(() => {
@@ -69,7 +64,7 @@ export function ConnectWallet() {
6964
}, [status, setOpen, pendingConnector, setPendingConnector]);
7065

7166
return (
72-
<ConnectWalletContext.Provider
67+
<SimpleKitContext.Provider
7368
value={{
7469
pendingConnector,
7570
setPendingConnector,
@@ -79,25 +74,35 @@ export function ConnectWallet() {
7974
setOpen,
8075
}}
8176
>
82-
<ConnectWalletModal open={open} onOpenChange={setOpen}>
83-
<ConnectWalletModalTrigger asChild>
84-
{isConnected ? (
85-
<Button className="rounded-xl">
86-
{ensAvatar && <img src={ensAvatar} alt="ENS Avatar" />}
87-
{address && (
88-
<span>{ensName ? `${ensName}` : formattedAddress}</span>
89-
)}
90-
</Button>
91-
) : (
92-
<Button className="rounded-xl">Connect Wallet</Button>
93-
)}
94-
</ConnectWalletModalTrigger>
95-
96-
<ConnectWalletModalContent>
77+
{props.children}
78+
<SimpleKitModal open={open} onOpenChange={setOpen}>
79+
<SimpleKitModalContent>
9780
{isConnected ? <Account /> : <Connectors />}
98-
</ConnectWalletModalContent>
99-
</ConnectWalletModal>
100-
</ConnectWalletContext.Provider>
81+
</SimpleKitModalContent>
82+
</SimpleKitModal>
83+
</SimpleKitContext.Provider>
84+
);
85+
}
86+
87+
export function ConnectWalletButton() {
88+
const simplekit = useSimpleKit();
89+
const { address } = useAccount();
90+
const { data: ensName } = useEnsName({ address });
91+
const { data: ensAvatar } = useEnsAvatar({ name: ensName! });
92+
93+
return (
94+
<Button onClick={simplekit.toggleModal} className="rounded-xl">
95+
{simplekit.isConnected ? (
96+
<>
97+
{ensAvatar && <img src={ensAvatar} alt="ENS Avatar" />}
98+
{address && (
99+
<span>{ensName ? `${ensName}` : simplekit.formattedAddress}</span>
100+
)}
101+
</>
102+
) : (
103+
"Connect Wallet"
104+
)}
105+
</Button>
101106
);
102107
}
103108

@@ -106,7 +111,7 @@ function Account() {
106111
const { disconnect } = useDisconnect();
107112
const { data: ensName } = useEnsName({ address });
108113
const { data: userBalance } = useBalance({ address });
109-
const context = React.useContext(ConnectWalletContext);
114+
const context = React.useContext(SimpleKitContext);
110115

111116
const formattedAddress = address?.slice(0, 6) + "•••" + address?.slice(-4);
112117
const formattedUserBalace = userBalance?.value
@@ -122,13 +127,13 @@ function Account() {
122127

123128
return (
124129
<>
125-
<ConnectWalletModalHeader>
126-
<ConnectWalletModalTitle>Connected</ConnectWalletModalTitle>
127-
<ConnectWalletModalDescription className="sr-only">
130+
<SimpleKitModalHeader>
131+
<SimpleKitModalTitle>Connected</SimpleKitModalTitle>
132+
<SimpleKitModalDescription className="sr-only">
128133
Account modal for your connected Web3 wallet.
129-
</ConnectWalletModalDescription>
130-
</ConnectWalletModalHeader>
131-
<ConnectWalletModalBody className="h-[280px]">
134+
</SimpleKitModalDescription>
135+
</SimpleKitModalHeader>
136+
<SimpleKitModalBody className="h-[280px]">
132137
<div className="flex w-full flex-col items-center justify-center gap-8 md:pt-5">
133138
<div className="size-24 flex items-center justify-center">
134139
<img
@@ -154,37 +159,37 @@ function Account() {
154159
Disconnect
155160
</Button>
156161
</div>
157-
</ConnectWalletModalBody>
162+
</SimpleKitModalBody>
158163
</>
159164
);
160165
}
161166

162167
function Connectors() {
163-
const context = React.useContext(ConnectWalletContext);
168+
const context = React.useContext(SimpleKitContext);
164169

165170
return (
166171
<>
167-
<ConnectWalletModalHeader>
172+
<SimpleKitModalHeader>
168173
<BackChevron />
169-
<ConnectWalletModalTitle>
174+
<SimpleKitModalTitle>
170175
{context.pendingConnector?.name ?? "Connect Wallet"}
171-
</ConnectWalletModalTitle>
172-
<ConnectWalletModalDescription className="sr-only">
176+
</SimpleKitModalTitle>
177+
<SimpleKitModalDescription className="sr-only">
173178
Connect your Web3 wallet or create a new one.
174-
</ConnectWalletModalDescription>
175-
</ConnectWalletModalHeader>
176-
<ConnectWalletModalBody>
179+
</SimpleKitModalDescription>
180+
</SimpleKitModalHeader>
181+
<SimpleKitModalBody>
177182
{context.pendingConnector ? <WalletConnecting /> : <WalletOptions />}
178-
</ConnectWalletModalBody>
179-
<ConnectWalletModalFooter>
183+
</SimpleKitModalBody>
184+
<SimpleKitModalFooter>
180185
<div className="h-0" />
181-
</ConnectWalletModalFooter>
186+
</SimpleKitModalFooter>
182187
</>
183188
);
184189
}
185190

186191
function WalletConnecting() {
187-
const context = React.useContext(ConnectWalletContext);
192+
const context = React.useContext(SimpleKitContext);
188193

189194
return (
190195
<div className="flex w-full flex-col items-center justify-center gap-9 md:pt-5">
@@ -215,7 +220,7 @@ function WalletConnecting() {
215220
}
216221

217222
function WalletOptions() {
218-
const context = React.useContext(ConnectWalletContext);
223+
const context = React.useContext(SimpleKitContext);
219224
const { connectors, connect } = useConnectors();
220225

221226
return (
@@ -293,7 +298,7 @@ function CopyAddressButton() {
293298
}
294299

295300
function BackChevron() {
296-
const context = React.useContext(ConnectWalletContext);
301+
const context = React.useContext(SimpleKitContext);
297302

298303
if (!context.pendingConnector) {
299304
return null;
@@ -316,7 +321,7 @@ function BackChevron() {
316321
}
317322

318323
function RetryConnectorButton() {
319-
const context = React.useContext(ConnectWalletContext);
324+
const context = React.useContext(SimpleKitContext);
320325
const { connect } = useConnect({
321326
mutation: {
322327
onError: () => context.setIsConnectorError(true),
@@ -343,7 +348,7 @@ function RetryConnectorButton() {
343348
}
344349

345350
function useConnectors() {
346-
const context = React.useContext(ConnectWalletContext);
351+
const context = React.useContext(SimpleKitContext);
347352
const { connect, connectors } = useConnect({
348353
mutation: {
349354
onError: () => context.setIsConnectorError(true),
@@ -416,3 +421,33 @@ function useConnectors() {
416421

417422
return { connectors: sortedConnectors, connect };
418423
}
424+
425+
export function useSimpleKit() {
426+
const { address } = useAccount();
427+
const context = React.useContext(SimpleKitContext);
428+
429+
const isModalOpen = context.open;
430+
const isConnected = address && !context.pendingConnector;
431+
const formattedAddress = address?.slice(0, 6) + "•••" + address?.slice(-4);
432+
433+
function open() {
434+
context.setOpen(true);
435+
}
436+
437+
function close() {
438+
context.setOpen(false);
439+
}
440+
441+
function toggleModal() {
442+
context.setOpen((prevState) => !prevState);
443+
}
444+
445+
return {
446+
isModalOpen,
447+
isConnected,
448+
formattedAddress,
449+
open,
450+
close,
451+
toggleModal,
452+
};
453+
}

0 commit comments

Comments
 (0)