Merge pull request #3 from v3xlabs/graph

added graphql and names page

package.json

@@ -22,16 +22,19 @@
         "typecheck": "tsc --project tsconfig.json --noEmit"
     },
     "dependencies": {
+        "@apollo/client": "^3.10.4",
         "@ensdomains/ensjs": "^3.7.0",
         "@ensdomains/thorin": "^0.6.50",
         "@tanstack/react-query": "^5.40.0",
         "clsx": "^2.1.1",
         "ens-tools": "^0.0.14",
+        "graphql": "^16.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.51.5",
         "react-icons": "^5.2.1",
         "swr": "^2.2.5",
+        "tailwind-merge": "^2.3.0",
         "viem": "^2.13.2",
         "wagmi": "^2.9.8"
     },

src/components/App.tsx

@@ -1,15 +1,22 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { FiHeart } from "react-icons/fi";
+import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
 
 import { NameList } from "./names/NameList";
 import { UserProfile } from "./profile/UserProfile";
 import { Tab, Tabs } from "./tabs/Tabs";
 import { VaultList } from "./vaults/VaultList";
 
+const client = new ApolloClient({
+    uri: "https://srv.streamingfast.io/9e804b35/graphql",
+    cache: new InMemoryCache()
+  });
+
 export const App = () => {
     const [tab, setTab] = useState<Tab>("vaults");
 
     return (
+        <ApolloProvider client={client}>
         <div className="relative flex min-h-dvh flex-col items-center gap-4 overflow-hidden bg-background-secondary p-4">
             <div className="flex w-full items-center justify-between">
                 <div>
@@ -64,5 +71,6 @@ export const App = () => {
                 </div>
             </div>
         </div>
+        </ApolloProvider>
     );
 };