feat: integration React Component / GraphQL API (#14)

XDeFi-tech · Mar 14, 2024 · 713763e · 713763e
1 parent 6013f5a
commit 713763e
Show file tree

Hide file tree

Showing 22 changed files with 1,619 additions and 596 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1,2 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-
-npx commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@
 import { h } from "vue";
 import Theme from "vitepress/theme";
 import "./style.css";
+import "./tailwind.postcss";
 
 export default {
   extends: Theme,

diff --git a/.vitepress/theme/tailwind.postcss b/.vitepress/theme/tailwind.postcss
@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
diff --git a/components/AddressCheckV2.jsx b/components/AddressCheckV2.jsx
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import LoadingIcon from "./LoadingIcon";
+import PlayIcon from "./PlayIcon";
+
+export default function AddressCheckV2() {
+  const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql";
+  const [response, setResponse] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const query = `
+  query AddressCheckV2($address: AddressRouteInputTypeV2!) {
+    routingV2 {
+      addressCheckV2(address: $address) {
+        isValid
+        address
+        chain
+      }
+    }
+  }`;
+
+  const vars = {
+    address: {
+      address: "0x7045916CEEFf58547E80E31d2c60ae5F67D63027",
+      chain: "ETH",
+    },
+  };
+  const fetchAddressCheckV2 = async () => {
+    setLoading(true);
+    setResponse({});
+
+    await fetch(GRAPHQL_ENDPOINT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query,
+        variables: vars,
+      }),
+    })
+      .then((response) => response.json())
+      .then((result) => {
+        setResponse(result);
+      })
+      .catch((error) => {
+        setResponse(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <button
+          onClick={fetchAddressCheckV2}
+          className="flex justify-center items-center gap-2 bg-[#2770CB] text-white px-2 py-1 rounded"
+          disabled={loading}
+        >
+          {loading ? (
+            <>
+              <LoadingIcon />
+              Fetching...
+            </>
+          ) : (
+            <>
+              <PlayIcon />
+              Test the query
+            </>
+          )}
+        </button>
+      </div>
+      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+        <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
+          <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">Response</span>
+        </div>
+        <pre className="p-5">
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </div>
+    </>
+  );
+}
diff --git a/components/BridgeableTokens.jsx b/components/BridgeableTokens.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import LoadingIcon from "./LoadingIcon";
+import PlayIcon from "./PlayIcon";
+
+export default function BridgeableTokens() {
+  const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql";
+  const [response, setResponse] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const query = `
+  query BridgeableTokens($bridgeToken: BridgeTokenInput) {
+    routingV2 {
+      bridgeableTokens(bridgeToken: $bridgeToken) {
+        asset {
+          id
+          chain
+          name
+        }
+      }
+    }
+  }`;
+
+  const vars = {
+    bridgeToken: {
+      address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      name: "ETH.USDC",
+    },
+  };
+  const fetchBridgeableTokens = async () => {
+    setLoading(true);
+    setResponse({});
+
+    await fetch(GRAPHQL_ENDPOINT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query,
+        variables: vars,
+      }),
+    })
+      .then((response) => response.json())
+      .then((result) => {
+        setResponse(result);
+      })
+      .catch((error) => {
+        setResponse(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <button
+          onClick={fetchBridgeableTokens}
+          className="flex justify-center items-center gap-2 bg-[#2770CB] text-white px-2 py-1 rounded"
+          disabled={loading}
+        >
+          {loading ? (
+            <>
+              <LoadingIcon />
+              Fetching...
+            </>
+          ) : (
+            <>
+              <PlayIcon />
+              Test the query
+            </>
+          )}
+        </button>
+      </div>
+      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+        <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
+          <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">Response</span>
+        </div>
+        <pre className="p-5">
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </div>
+    </>
+  );
+}
diff --git a/components/ChainV2GraphQL.jsx b/components/ChainV2GraphQL.jsx
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import LoadingIcon from "./LoadingIcon";
+import PlayIcon from "./PlayIcon";
+
+export default function ChainV2GraphQL() {
+  const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql";
+  const [response, setResponse] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const query = `
+  query ChainV2($name: String!) {
+    routingV2 {
+      chainV2(name: $name) {
+        name
+        tokens {
+          asset {
+            contract
+            symbol
+          }
+        }
+      }
+    }
+  }`;
+  const vars = {
+    name: "ETH",
+  };
+  const fetchChainV2 = async () => {
+    setLoading(true);
+    setResponse({});
+
+    await fetch(GRAPHQL_ENDPOINT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query,
+        variables: vars,
+      }),
+    })
+      .then((response) => response.json())
+      .then((result) => {
+        setResponse(result);
+      })
+      .catch((error) => {
+        setResponse(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <button
+          onClick={fetchChainV2}
+          className="flex justify-center items-center gap-2 bg-[#2770CB] text-white px-2 py-1 rounded"
+          disabled={loading}
+        >
+          {loading ? (
+            <>
+              <LoadingIcon />
+              Fetching...
+            </>
+          ) : (
+            <>
+              <PlayIcon />
+              Test the query
+            </>
+          )}
+        </button>
+      </div>
+      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+        <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
+          <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">Response</span>
+        </div>
+        <pre className="p-5">
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </div>
+    </>
+  );
+}
diff --git a/components/ChainsV2.jsx b/components/ChainsV2.jsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import LoadingIcon from "./LoadingIcon";
+import PlayIcon from "./PlayIcon";
+
+export default function ChainsV2() {
+  const ENDPOINT = "https://routingapi.xdefiservices.com/";
+  const [response, setResponse] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchChainsV2 = async () => {
+    setLoading(true);
+    setResponse([]);
+    fetch(ENDPOINT + "chains")
+      .then((response) => response.json())
+      .then((result) => {
+        setResponse(result);
+      })
+      .catch((error) => {
+        setResponse(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <button
+          onClick={fetchChainsV2}
+          className="flex justify-center items-center gap-2 bg-[#2770CB] text-white px-2 py-1 rounded"
+          disabled={loading}
+        >
+          {loading ? (
+            <>
+              <LoadingIcon />
+              Fetching...
+            </>
+          ) : (
+            <>
+              <PlayIcon />
+              Test the query
+            </>
+          )}
+        </button>
+      </div>
+      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+        <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
+          <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">Response</span>
+        </div>
+        <pre className="p-5">
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </div>
+    </>
+  );
+}