Merge pull request #1 from mbellamj/feat/connect-wallet

feat(component): implement connect-wallet component

package.json

@@ -19,6 +19,7 @@
     "@web3-react/types": "^8.2.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^0.2.1",
     "eventemitter3": "^5.0.1",
     "lucide-react": "^0.376.0",
     "next": "14.2.3",

src/app/[locale]/page.tsx

@@ -1,3 +1,13 @@
+import { ConnectWallet } from "@/components/app/connect-wallet";
+
 export default function Home() {
-  return <main>Home page</main>;
+  return (
+    <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+      <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+          <ConnectWallet />
+        </div>
+      </div>
+    </main>
+  );
 }

src/components/app/connect-wallet/dialog.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useTranslations } from "next-intl";
+import { FC, useState } from "react";
+import { ConnectorPicker } from "../connector/picker";
+
+interface ConnectWalletDialogProps {}
+
+export const ConnectWalletDialog: FC<ConnectWalletDialogProps> = () => {
+  const [visible, setVisible] = useState(false);
+  const t = useTranslations("ConnectWallet.dialog");
+
+  return (
+    <Dialog open={visible} onOpenChange={setVisible}>
+      <DialogTrigger asChild>
+        <Button>
+          <span className="first-letter:capitalize">{t("trigger")}</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="first-letter:capitalize">
+            {t("title")}
+          </DialogTitle>
+          <DialogDescription className="max-w-lg text-balance leading-relaxed first-letter:capitalize">
+            {t("description")}
+          </DialogDescription>
+        </DialogHeader>
+        <ConnectorPicker />
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/app/connect-wallet/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
+import { FC } from "react";
+import { ConnectWalletDialog } from "./dialog";
+
+interface ConnectWalletProps {}
+
+export const ConnectWallet: FC<ConnectWalletProps> = () => {
+  const t = useTranslations("ConnectWallet.card");
+
+  return (
+    <Card className="sm:col-span-2">
+      <CardHeader className="pb-3">
+        <CardTitle className="first-letter:capitalize">{t("title")}</CardTitle>
+      </CardHeader>
+      <CardFooter>
+        <ConnectWalletDialog />
+      </CardFooter>
+    </Card>
+  );
+};