Merge pull request #1 from bleu/jean/op-170-implement-wallet-connecti…

…on-functionality Jean/op 170 implement wallet connection functionality
bleu · Aug 27, 2024 · 984d371 · 984d371
2 parents b5e88b8 + e9865dd
commit 984d371
Show file tree

Hide file tree

Showing 23 changed files with 1,899 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -11,10 +11,19 @@
   "dependencies": {
     "@ethereum-attestation-service/eas-contracts": "^1.7.1",
     "@ethereum-attestation-service/eas-sdk": "^2.5.0",
+    "@rainbow-me/rainbowkit": "^2.1.5",
+    "@tanstack/react-query": "^5.52.1",
+    "class-variance-authority": "^0.7.0",
     "ethers": "^6.13.2",
+    "lucide-react": "^0.436.0",
     "next": "14.2.6",
+    "radix-ui": "^1.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-query": "^3.39.3",
+    "tailwind-merge": "^2.5.2",
+    "urql": "^4.1.0",
+    "viem": "2.x",
     "wagmi": "^2.12.7"
   },
   "devDependencies": {

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -0,0 +1,3 @@
+export default function Events() {
+    return <h1>Events</h1>
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,37 @@
+import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import { headers } from "next/headers";
+import { type ReactNode } from "react";
+import { cookieToInitialState } from "wagmi";
+
+import { getConfig } from "../wagmi";
+import { Providers } from "./providers";
+import { Header } from "@/components/Header";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Bacchus",
-  description: "Onboarding project",
+  description: "Events and tickets",
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout(props: { children: ReactNode }) {
+  const initialState = cookieToInitialState(
+    getConfig(),
+    headers().get("cookie"),
+  );
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers initialState={initialState}>
+          <div>
+            <Header/>
+            {props.children}
+          </div>
+        </Providers>
+      </body>
     </html>
   );
 }
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,13 +1,13 @@
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Bacchus Onboarding</h1>
-      {/* <h1>Create Party</h1>
-      <form>
-        <textarea placeholder="Party name" />
-        <textarea placeholder="Owner address" />
-      </form> */}
-
-    </main>
-  );
-}
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        <h1>Bacchus Onboarding</h1>
+        {/* <h1>Create Party</h1>
+        <form>
+          <textarea placeholder="Party name" />
+          <textarea placeholder="Owner address" />
+        </form> */}
+  
+      </main>
+    );
+  }
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import { type State, WagmiProvider } from "wagmi";
+
+import { getConfig } from "@/wagmi";
+import { Provider } from "urql";
+import { client } from "../lib/urql-client";
+
+import '@rainbow-me/rainbowkit/styles.css';
+import {
+  getDefaultConfig,
+  RainbowKitProvider,
+  type Locale,
+} from '@rainbow-me/rainbowkit';
+import { useRouter } from 'next/router';
+
+export function Providers(props: {
+  children: ReactNode;
+  initialState?: State;
+}) {
+  // const {locale} = useRouter() as {locale:Locale}
+  const [config] = useState(() => getConfig());
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={config} initialState={props.initialState}>
+      <Provider value={client}>
+          <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider>
+            {props.children}
+            </RainbowKitProvider>
+          </QueryClientProvider>
+      </Provider>
+    </WagmiProvider>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,102 @@
+// "use client";
+// import React from "react";
+// import { useAccount, useBalance, useConnect, useDisconnect, useEnsName } from "wagmi";
+// import { Button } from "@/components/ui/button";
+// import {
+//   DropdownMenu,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu";
+
+// function formatAddress(address:string) {
+//   return address.slice(0, 6) + "..." + address.slice(-4);
+// }
+
+// function DisconnectWallet({ balance, connector, ensName, address, disconnect }:any) {
+//   return (
+//     <DropdownMenu>
+//       <div className="flex items-center justify-center">
+//         <DropdownMenuTrigger asChild>
+//             <Button className="bg-white text-red-500">
+//             {ensName ? ensName : formatAddress(address)}
+//             </Button>
+//         </DropdownMenuTrigger>
+//         <p>{connector?.name || ""}</p>
+//         <p>OPT: {balance?.data ? balance.data.formatted : "Sem balanço"}</p>
+//       </div>
+//       <DropdownMenuContent>
+//         <DropdownMenuItem onClick={() => disconnect()}>
+//           Disconnect
+//         </DropdownMenuItem>
+//       </DropdownMenuContent>
+//     </DropdownMenu>
+//   );
+// }
+
+// export function Header() {
+//   const { address, isConnected, connector, chain } = useAccount();
+//   const { data: ensName } = useEnsName({address,});
+//   const { connect, connectors } = useConnect();
+//   const { disconnect } = useDisconnect();
+//   const balance = useBalance({address,chainId:10})
+
+//   function ConnectWallet({ connectors }:any) {
+//     return (
+//       <DropdownMenu>
+//         <DropdownMenuTrigger asChild>
+//           <Button className="bg-white text-red-500">Connect Wallet</Button>
+//         </DropdownMenuTrigger>
+//         <DropdownMenuContent>
+//           {connectors.map((connector:any) => (
+//             <DropdownMenuItem
+//               key={connector.id}
+//               onClick={() => connect({ connector })}
+//             >
+//               {connector.name}
+//             </DropdownMenuItem>
+//           ))}
+//         </DropdownMenuContent>
+//       </DropdownMenu>
+//     );
+//   }
+
+//   console.log(balance);
+
+//   return (
+//     <header className="bg-red-500 text-white p-4">
+//       <div className="container mx-auto flex justify-between items-center">
+//         <h1 className="text-2xl font-bold">Bacchus: Events and Invitations</h1>
+//         {isConnected ? (
+//           <DisconnectWallet
+//             balance={balance}
+//             connector={connector}
+//             ensName={ensName}
+//             address={address}
+//             disconnect={disconnect}
+//           />
+//         ) : (
+//           <ConnectWallet connectors={connectors} />
+//         )}
+//       </div>
+//     </header>
+//   );
+// }
+"use client"
+
+
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+export function Header() {
+    return (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            padding: 12,
+          }}
+        >
+          <ConnectButton />
+        </div>
+      );
+    };
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };