dramatically simplify everything

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
 }

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+public

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false
+}

abi/baseFriendsHelper.ts

@@ -159,4 +159,4 @@ export default [
     ],
     stateMutability: "view",
   },
-] as const;
+] as const

abi/basefriends.ts

@@ -313,4 +313,4 @@ export default [
       },
     ],
   },
-] as const;
+] as const

abi/basenamesL2Resolver.ts

@@ -696,4 +696,4 @@ export default [
     stateMutability: "view",
     type: "function",
   },
-] as const;
+] as const

abi/usdc.ts

@@ -750,4 +750,4 @@ export default [
     stateMutability: "pure",
     type: "function",
   },
-] as const;
+] as const

abi/youOwe.ts

@@ -336,4 +336,4 @@ export default [
     name: "YouCannotOweYourself",
     inputs: [],
   },
-] as const;
+] as const

app/Providers.tsx

@@ -0,0 +1,16 @@
+"use client"
+import "@/app/globals.css"
+import { wagmiConfig } from "@/constants/wagmiConfig"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import React from "react"
+import { WagmiProvider } from "wagmi"
+
+const queryClient = new QueryClient()
+
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  )
+}

app/(app)/friends/page.tsx → app/friends/page.tsx

@@ -1,42 +1,42 @@
-"use client";
+"use client"
 
-import MagnifyingGlass from "@/app/icons/magnifying-glass.svg";
-import Button from "@/components/button";
-import Input from "@/components/input";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { USERNAME_L2_RESOLVER_ADDRESSES } from "@/constants/addresses";
-import { CLOUDFARE_IPFS_PROXY } from "@/constants/urls";
-import { useBasenameOfAddress } from "@/hooks/useBasenameOfAddress";
-import Image from "next/image";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useDebounceValue } from "usehooks-ts";
-import { Address, isAddress } from "viem";
-import { baseSepolia } from "viem/chains";
-import { normalize } from "viem/ens";
-import { useAccount, useEnsAddress, useEnsAvatar } from "wagmi";
+import MagnifyingGlass from "@/app/icons/magnifying-glass.svg"
+import Button from "@/components/button"
+import Input from "@/components/input"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { USERNAME_L2_RESOLVER_ADDRESSES } from "@/constants/addresses"
+import { CLOUDFARE_IPFS_PROXY } from "@/constants/urls"
+import { useBasenameOfAddress } from "@/hooks/useBasenameOfAddress"
+import Image from "next/image"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { useDebounceValue } from "usehooks-ts"
+import { Address, isAddress } from "viem"
+import { baseSepolia } from "viem/chains"
+import { normalize } from "viem/ens"
+import { useAccount, useEnsAddress, useEnsAvatar } from "wagmi"
 
 interface ResultItemProps {
-  name?: string;
-  address: string;
+  name?: string
+  address: string
 }
 
 const ResultItem: React.FC<ResultItemProps> = ({
   name,
   address,
 }: ResultItemProps) => {
-  const { address: connectedAddress } = useAccount();
+  const { address: connectedAddress } = useAccount()
   // const { writeContract } = useWriteContract();
 
   const addFriend = useCallback(() => {
-    if (!connectedAddress) return;
+    if (!connectedAddress) return
     // writeContract({
     //   abi: BasefriendsABI,
     //   address: connectedAddress,
     //   functionName: "addFollows",
     //   args: [node, newFollows],
     // });
-  }, [connectedAddress]);
+  }, [connectedAddress])
   return (
     <div className="flex items-center space-x-4 p-2 hover:bg-gray-100 ">
       <Avatar>
@@ -65,44 +65,44 @@ const ResultItem: React.FC<ResultItemProps> = ({
         </Button>
       </div>
     </div>
-  );
-};
+  )
+}
 
 export default function Friends() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [debouncedSearchTerm] = useDebounceValue(searchTerm, 300);
+  const [searchTerm, setSearchTerm] = useState("")
+  const [debouncedSearchTerm] = useDebounceValue(searchTerm, 300)
   const normalizedSearchTerm = useMemo(() => {
     try {
-      return normalize(debouncedSearchTerm);
+      return normalize(debouncedSearchTerm)
     } catch (e) {
-      console.error("jf e", e);
-      return "";
+      console.error("jf e", e)
+      return ""
     }
-  }, [debouncedSearchTerm]);
-  const [lookupType, setLookupType] = useState<"name" | "address">("name");
-  const addressLookup = useMemo(() => lookupType === "address", [lookupType]);
+  }, [debouncedSearchTerm])
+  const [lookupType, setLookupType] = useState<"name" | "address">("name")
+  const addressLookup = useMemo(() => lookupType === "address", [lookupType])
   useEffect(() => {
     if (
       debouncedSearchTerm.startsWith("0x") &&
       isAddress(debouncedSearchTerm)
     ) {
-      setLookupType("address");
+      setLookupType("address")
     } else {
-      setLookupType("name");
+      setLookupType("name")
     }
-  }, [debouncedSearchTerm]);
+  }, [debouncedSearchTerm])
 
   const { data: foundBasename } = useBasenameOfAddress(
     addressLookup ? (debouncedSearchTerm as Address) : undefined
-  );
+  )
   const { data: foundAddress } = useEnsAddress({
     chainId: baseSepolia.id,
     name: normalizedSearchTerm,
     universalResolverAddress: USERNAME_L2_RESOLVER_ADDRESSES[baseSepolia.id],
     query: {
       enabled: !!normalizedSearchTerm && lookupType === "name",
     },
-  });
+  })
 
   const { data: foundAvatar } = useEnsAvatar({
     name: foundBasename ?? normalizedSearchTerm,
@@ -114,7 +114,7 @@ export default function Friends() {
     query: {
       enabled: !!foundBasename ?? !!normalizedSearchTerm,
     },
-  });
+  })
 
   return (
     <div className="flex flex-col p-4">
@@ -142,5 +142,5 @@ export default function Friends() {
         )}
       </ScrollArea>
     </div>
-  );
+  )
 }

app/globals.css

@@ -1,4 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-

app/layout.tsx

@@ -1,12 +1,15 @@
-import type { Metadata, Viewport } from "next";
-import { Inter } from "next/font/google";
-import "@/app/globals.css";
+import "@/app/globals.css"
+import Footer from "@/components/footer"
+import type { Metadata, Viewport } from "next"
+import { Inter } from "next/font/google"
+import React from "react"
+import { Providers } from "./Providers"
 
-const inter = Inter({ subsets: ["latin"] });
-const APP_NAME = "USDC";
-const APP_DEFAULT_TITLE = "USDC";
-const APP_TITLE_TEMPLATE = "%s - USDC";
-const APP_DESCRIPTION = "Simple USDC transfer app";
+const inter = Inter({ subsets: ["latin"] })
+const APP_NAME = "USDC"
+const APP_DEFAULT_TITLE = "USDC"
+const APP_TITLE_TEMPLATE = "%s - USDC"
+const APP_DESCRIPTION = "Simple USDC transfer app"
 
 export const metadata: Metadata = {
   applicationName: APP_NAME,
@@ -40,21 +43,24 @@ export const metadata: Metadata = {
     },
     description: APP_DESCRIPTION,
   },
-};
+}
 
 export const viewport: Viewport = {
   themeColor: "#FFFFFF",
-};
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
       <head />
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+        <Footer />
+      </body>
     </html>
-  );
+  )
 }