feat: can list liquidity

sdk/package.json

@@ -1,5 +1,10 @@
 {
   "name": "instaswap",
   "version": "0.1.0",
-  "workspaces": ["packages/*"]
+  "workspaces": ["packages/*"],
+  "dependencies": {
+    "@apollo/client": "^3.8.8",
+    "graphql": "^16.8.1",
+    "react-query": "^3.39.3"
+  }
 }

sdk/packages/interface/src/apollo-client.ts

@@ -0,0 +1,17 @@
+// src/apollo-client.ts
+import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+
+// Define your GraphQL server URL here
+const GRAPHQL_URL = 'https://instaswap-api.metaforo.io/query';
+
+const httpLink = new HttpLink({
+  uri: GRAPHQL_URL,
+});
+
+// Create the Apollo Client instance
+const client = new ApolloClient({
+  link: httpLink,
+  cache: new InMemoryCache(),
+});
+
+export default client;

sdk/packages/interface/src/components/ButtonClick.tsx

@@ -4,6 +4,7 @@ import { Contract, uint256, CallData, RawArgs, Call, num, RpcProvider } from "st
 import { Wrap } from "instaswap-core";
 import { FeeAmount, SwapDirection } from "instaswap-core";
 import { Provider, constants, cairo } from "starknet";
+import LiquidityList from './Query';
 
 const ButtonClick = () => {
   const [lowerBound, setLowerBound] = useState(0);
@@ -357,6 +358,7 @@ const ButtonClick = () => {
       <div>
         <button onClick={withdraw}>withdraw</button>
       </div>
+      <LiquidityList account="0x0718a7b914428a0539d2bbfc6a274597f279570817b4437cdf6994a5be0b17f7" />
     </div>
   );
 };

sdk/packages/interface/src/components/Query.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useQuery, gql } from '@apollo/client';
+
+// Define the TypeScript types for the GraphQL response
+type ListLiquidityResponse = {
+  list_liquidity: {
+    token_id: number;
+  }[];
+};
+
+// Define the query with the appropriate GraphQL syntax
+const GET_LIST_LIQUIDITY = gql`
+  query getListLiquidity($account: String!) {
+    list_liquidity(account: $account) {
+      token_id
+    }
+  }
+`;
+
+// Define the TypeScript type for the component props
+type LiquidityListProps = {
+  account: string;
+};
+
+const LiquidityList: React.FC<LiquidityListProps> = ({ account }) => {
+  // Use the useQuery hook with the response type
+  const { loading, error, data } = useQuery<ListLiquidityResponse>(GET_LIST_LIQUIDITY, {
+    variables: { account },
+  });
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>An error occurred: {error.message}</p>;
+
+  return (
+    <ul>
+      {data && data.list_liquidity.map((liquidity, index) => (
+        <li key={index}>Token ID: {liquidity.token_id}</li>
+      ))}
+    </ul>
+  );
+};
+
+export default LiquidityList;

sdk/packages/interface/src/main.tsx

@@ -2,6 +2,9 @@ import { InjectedConnector, StarknetConfig } from "@starknet-react/core";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { ApolloProvider } from '@apollo/client';
+import client from './apollo-client';
+
 
 const connectors = [
   new InjectedConnector({ options: { id: "braavos" } }),
@@ -10,8 +13,11 @@ const connectors = [
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <StarknetConfig autoConnect connectors={connectors}>
-      <App />
-    </StarknetConfig>
+    <ApolloProvider client={client}>
+      {/* Wrap App with StarknetConfig */}
+      <StarknetConfig autoConnect connectors={connectors}>
+        <App />
+      </StarknetConfig>
+    </ApolloProvider>
   </React.StrictMode>,
 );