add api example

apps/web/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^0.5.1",
+    "axios": "^0.27.2",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/web/src/pages/api/get-price.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const handler = async (req, res) => {
+  if (!req.query?.currency) {
+    return res
+      .status(500)
+      .json({ text: "INVALID_PARAMS", message: "missing currency" });
+  }
+
+  try {
+    const result = await axios.get(
+      `https://api.coingecko.com/api/v3/simple/price?ids=${req.query.currency}&vs_currencies=usd`
+    );
+    console.log(result.data.ethereum.usd);
+
+    return res.status(200).send(result.data.ethereum.usd);
+  } catch (e) {
+    res.status(500).json({ text: "ERROR", message: e.message });
+  }
+};
+
+export default handler;

apps/web/src/pages/index.tsx

@@ -6,10 +6,23 @@ import {
   useContractWrite,
   useNetwork,
 } from "wagmi";
+import { useQuery } from "react-query";
+import axios from "axios";
 
 export default function Web() {
   const { address, isDisconnected, isConnecting } = useAccount();
 
+  const { isLoading: isFetchingPrice, data: price = [] } = useQuery(
+    ["price"],
+    async () => {
+      const res = await axios.get(`/api/get-price?currency=ethereum`);
+      console.log(res.data);
+      return res.data || [];
+    }
+  );
+
+  if (isFetchingPrice) return <div>Fetching Price...</div>;
+
   return (
     <>
       <Header />
@@ -30,6 +43,9 @@ export default function Web() {
         <>
           <h1>My App Name</h1>
           <Button />
+          <div>
+            <h2>ETH Price : {price} $</h2>
+          </div>
         </>
       )}
     </>

yarn.lock

@@ -2483,6 +2483,14 @@ axios@^0.21.0, axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -5820,7 +5828,7 @@ fmix@^0.1.0:
   dependencies:
     imul "^1.0.0"
 
-follow-redirects@^1.12.1, follow-redirects@^1.14.0:
+follow-redirects@^1.12.1, follow-redirects@^1.14.0, follow-redirects@^1.14.9:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==