listia · IgorKonovalov · Oct 5, 2021 · Oct 5, 2021 · Oct 6, 2021 · Oct 6, 2021
diff --git a/components/Account.tsx b/components/Account.tsx
@@ -23,8 +23,10 @@ const Account = ({ triedToEagerConnect }: Props) => {
   // initialize metamask onboarding
   const >
 
-  useLayoutEffect(() => {
-    onboarding.current = new MetaMaskOnboarding();
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      onboarding.current = new MetaMaskOnboarding();
+    }
   }, []);
 
   // manage connecting state for injected connector

diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,6 @@
 module.exports = {
   reactStrictMode: true,
+  images: {
+    domains: ['storage.opensea.io'],
+  },
 };
diff --git a/package.json b/package.json
@@ -33,10 +33,12 @@
   },
   "devDependencies": {
     "@typechain/ethers-v5": "^7.0.1",
+    "@types/node": "^16.10.2",
     "@types/react": "^17.0.19",
     "eslint": "7.32.0",
     "eslint-config-next": "11.1.0",
     "ethers": "^5.4.5",
+    "prettier": "2.4.1",
     "typechain": "^5.1.2",
     "typescript": "^4.3.5"
   }

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,8 @@
 import { Web3ReactProvider } from "@web3-react/core";
 import type { AppProps } from "next/app";
 import getLibrary from "../getLibrary";
-import 'semantic-ui-css/semantic.min.css';
-import "../styles/globals.css";
+import "semantic-ui-css/semantic.min.css";
+import "styles/globals.css";
 
 function NextWeb3App({ Component, pageProps }: AppProps) {
   return (

diff --git a/pages/api/getAssets.js b/pages/api/getAssets.js
@@ -1,24 +1,35 @@
 import axios from "axios";
 
-export default async (req, res) => {
-  const openseaAssetURL = "https://api.opensea.io/api/v1/assets?order_direction=desc&order_by=sale_price"
-  console.log("getAssets from opensea: " + JSON.stringify(req.query, null, 2))
-  if (req.method == 'GET' && req.query.owner) {
+const getAccess = async (req, res) => {
+  const openseaAssetURL =
+    "https://api.opensea.io/api/v1/assets?order_direction=desc&order_by=sale_price";
+  console.log("getAssets from opensea: " + JSON.stringify(req.query, null, 2));
+
+  if (req.method == "GET" && req.query.owner) {
     console.log("getting Assets from opensea...");
-    axios({
-      method: 'GET',
-      url: openseaAssetURL,
-      params: { owner: req.query.owner,
-                limit: req.query.limit },
-      headers: {'X-API-KEY': process.env.OPENSEA_API_KEY ? process.env.OPENSEA_API_KEY : ""}
-    }).then((response) => {
+    try {
+      await axios({
+        method: "GET",
+        url: openseaAssetURL,
+        params: {
+          owner: req.query.owner,
+          limit: req.query.limit,
+        },
+        headers: {
+          'X-API-KEY': process.env.OPENSEA_API_KEY 
+            ? process.env.OPENSEA_API_KEY 
+            : ""
+        },
+      });
       console.log("getAssets result: " + response.data);
       res.status(200).json({ assets: response.data.assets });
-    }).catch(error => {
+    } catch (error) {
       console.log(error);
       res.status(500).json({ error: error });
-    })
+    }
   } else {
     res.status(500).json({ error: "Could not GET owner." });
   }
 };
+
+export default getAccess;
diff --git a/pages/api/getBoard.js b/pages/api/getBoard.js
@@ -1,15 +1,19 @@
-import { query as q } from 'faunadb';
-import { faunaClient } from '../../lib/fauna';
+import { query as q } from "faunadb";
+import { faunaClient } from "../../lib/fauna";
 import { MAX_SIZE } from "../../util";
 
-export default async (req, res) => {
-  console.log("getBoard: " + JSON.stringify(req.method, null, 2))
-  if (req.method == 'GET') {
-    console.log("getting Board...")
+const getBoard = async (req, res) => {
+  console.log("getBoard: " + JSON.stringify(req.method, null, 2));
+  if (req.method == "GET") {
+    console.log("getting Board...");
     let query = await faunaClient.query(
-      q.Paginate(q.Match(q.Index("all_coordinates")), { size: MAX_SIZE * MAX_SIZE })
+      q.Paginate(q.Match(q.Index("all_coordinates")), {
+        size: MAX_SIZE * MAX_SIZE,
+      })
     );
-    console.log("getBoard result length: " + query.data.length)
+    console.log("getBoard result length: " + query.data.length);
     res.status(200).json({ coordinates: query.data });
   }
 };
+
+export default getBoard;
diff --git a/pages/api/updateCoordinate.js b/pages/api/updateCoordinate.js
@@ -1,24 +1,36 @@
-import {query as q} from 'faunadb';
-import { faunaClient } from '../../lib/fauna';
+import { query as q } from "faunadb";
+import { faunaClient } from "../../lib/fauna";
 
-export default async (req, res) => {
+const updateCoordinate = async (req, res) => {
   console.log("updateCoordinate: " + JSON.stringify(req.body, null, 2));
-  if (req.method == 'POST') {
-    console.log("updating Coordinate...")
+  if (req.method == "POST") {
+    console.log("updating Coordinate...");
     let query = await faunaClient.query(
       // update OR create a coordinate based on the token_id
-      q.Let({
-          match: q.Match(q.Index('unique_token_id'), req.body.token_id),
-          data: { token_id: req.body.token_id, owner: req.body.owner, color: req.body.color, image_uri: req.body.image_uri }
+      q.Let(
+        {
+          match: q.Match(q.Index("unique_token_id"), req.body.token_id),
+          data: {
+            token_id: req.body.token_id,
+            owner: req.body.owner,
+            color: req.body.color,
+            image_uri: req.body.image_uri,
+          },
         },
         q.If(
-          q.Exists(q.Var('match')),
-          q.Update(q.Select(['ref'], q.Get(q.Var('match'))), { data: q.Var('data') }),
-          q.Create(q.Collection('coordinates'), { data: q.Var('data') })
+          q.Exists(q.Var("match")),
+          q.Update(q.Select(["ref"], q.Get(q.Var("match"))), {
+            data: q.Var("data"),
+          }),
+          q.Create(q.Collection("coordinates"), { data: q.Var("data") })
         )
       )
     );
-    console.log("updateCoordinate result: " + JSON.stringify(query.data, null, 2))
+    console.log(
+      "updateCoordinate result: " + JSON.stringify(query.data, null, 2)
+    );
     res.status(200).json({ data: query });
   }
 };
+
+export default updateCoordinate;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,18 +1,15 @@
 import { useWeb3React } from "@web3-react/core";
 import Head from "next/head";
-import Link from "next/link";
+import Image from "next/image";
 import Account from "../components/Account";
-import ETHBalance from "../components/ETHBalance";
 import XYBalance from "../components/XYBalance";
 import useEagerConnect from "../hooks/useEagerConnect";
 
 import Game from "../components/Game";
 
 function Home() {
   const { account, library } = useWeb3React();
-
   const triedToEagerConnect = useEagerConnect();
-
   const isConnected = typeof account === "string" && !!library;
 
   return (
@@ -23,69 +20,122 @@ function Home() {
       </Head>
 
       <main>
-        <br/>
+        <br />
         <h1>X,Y Project</h1>
-
         <h4>
-          <a href="https://opensea.io/collection/xy-coordinates">OpenSea</a>&nbsp;&nbsp;|&nbsp;&nbsp;
-          <a href="https://etherscan.io/address/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413">Etherscan</a>&nbsp;&nbsp;|&nbsp;&nbsp;
-          <a href="https://twitter.com/XYCoordinates">Twitter</a>&nbsp;&nbsp;|&nbsp;&nbsp;
+          <a href="https://opensea.io/collection/xy-coordinates">OpenSea</a>
+          &nbsp;&nbsp;|&nbsp;&nbsp;
+          <a href="https://etherscan.io/address/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413">
+            Etherscan
+          </a>
+          &nbsp;&nbsp;|&nbsp;&nbsp;
+          <a href="https://twitter.com/XYCoordinates">Twitter</a>
+          &nbsp;&nbsp;|&nbsp;&nbsp;
           <a href="https://discord.com/invite/zBWEsfufPZ">Discord</a>
         </h4>
-
-        <a href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/4750?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833" target="_blank" rel="noreferrer"><img src="https://storage.opensea.io/files/98692044b0fc95750f5daf58d62f957d.svg" width="160" /></a>
+        <a
+          href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/4750?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Image
+            src="https://storage.opensea.io/files/98692044b0fc95750f5daf58d62f957d.svg"
+            alt=""
+            height={160}
+            width={160}
+          />
+        </a>
         &nbsp;
-        <a href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/1416?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833" target="_blank" rel="noreferrer"><img src="https://storage.opensea.io/files/0c834b4ba5c297a97acd5c6b55999585.svg" width="160" /></a>
+        <a
+          href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/1416?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Image
+            src="https://storage.opensea.io/files/0c834b4ba5c297a97acd5c6b55999585.svg"
+            alt=""
+            height={160}
+            width={160}
+          />
+        </a>
         &nbsp;
-        <a href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/9934?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833" target="_blank" rel="noreferrer"><img src="https://storage.opensea.io/files/9932a81ae30a4785940cbe8df8a61945.svg" width="160" /></a>
-
+        <a
+          href="https://opensea.io/assets/0x3ca53be299c765cdc66cc1723f8b3eefb3aaa413/9934?ref=0xe3Ca71F5D505937959893CdEFd2704f062E14833"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Image
+            src="https://storage.opensea.io/files/9932a81ae30a4785940cbe8df8a61945.svg"
+            alt=""
+            height={160}
+            width={160}
+          />
+        </a>
         <p></p>
-
         <section>
-          <p>The X,Y Project is a full set of X,Y Coordinates stored on chain, representing a 128x128 grid.</p>
-          <p>Use X,Y Project in any way you want. For example: maps, tiles, locations, games, virtual worlds, and more.</p>
+          <p>
+            The X,Y Project is a full set of X,Y Coordinates stored on chain,
+            representing a 128x128 grid.
+          </p>
+          <p>
+            Use X,Y Project in any way you want. For example: maps, tiles,
+            locations, games, virtual worlds, and more.
+          </p>
         </section>
-
         <p></p>
-
-        <h2>          
-          Claim your Free X,Y Project NFTs (until they are all minted)
-        </h2>
-
+        <h2>Claim your Free X,Y Project NFTs (until they are all minted)</h2>
         {isConnected && (
           <section>
             <Account triedToEagerConnect={triedToEagerConnect} />
             <XYBalance />
             <Game />
           </section>
         )}
-
         {!isConnected && (
           <section>
             <Account triedToEagerConnect={triedToEagerConnect} />
             <p></p>
             <Game />
           </section>
         )}
-
         <>
-          <br/>
-          Brought to you by the team @ <a href="https://nftyverse.com" target="_blank" rel="noreferrer">NFTYverse API</a>
-          <br/><br/>
-          This website is <a href="https://github.com/listia/xy-project" target="_blank" rel="noreferrer">Open-Source</a>
-          <br/><br/><br/><br/>
-          <div className="terms" style={{color: "#aaaaaa"}}>
+          <br />
+          Brought to you by the team @{" "}
+          <a href="https://nftyverse.com" target="_blank" rel="noreferrer">
+            NFTYverse API
+          </a>
+          <br />
+          <br />
+          This website is{" "}
+          <a
+            href="https://github.com/listia/xy-project"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Open-Source
+          </a>
+          <br />
+          <br />
+          <br />
+          <br />
+          <div className="terms" style={{ color: "#aaaaaa" }}>
             X,Y Project is a fun, community-focused metaverse NFT project.
-            Please feel free to use it in any way you want.
-            Claim X,Y corodinates, issue blockchain transactions, and use the NFTs at your own risk.
-            Full website functionality requries Metamask or a similar wallet plugin.
-            We do not track or store your information.
-            Ownership data is cached and pulled directly from the public Ethereum blockchain.
-            All information on this website is provided &quot;AS IS&quot;.
-            The website is open source, free to use and makes no warranties, express, implied or otherwise, regarding its accuracy, completeness or performance.
-            Enjoy the X,Y Project and drop us a line on <a href="https://twitter.com/XYCoordinates">Twitter</a> or <a href="https://discord.com/invite/zBWEsfufPZ">Discord</a> if you have any questions!
+            Please feel free to use it in any way you want. Claim X,Y
+            corodinates, issue blockchain transactions, and use the NFTs at your
+            own risk. Full website functionality requries Metamask or a similar
+            wallet plugin. We do not track or store your information. Ownership
+            data is cached and pulled directly from the public Ethereum
+            blockchain. All information on this website is provided &quot;AS
+            IS&quot;. The website is open source, free to use and makes no
+            warranties, express, implied or otherwise, regarding its accuracy,
+            completeness or performance. Enjoy the X,Y Project and drop us a
+            line on <a href="https://twitter.com/XYCoordinates">Twitter</a> or{" "}
+            <a href="https://discord.com/invite/zBWEsfufPZ">Discord</a> if you
+            have any questions!
           </div>
-          <br/><br/><br/>
+          <br />
+          <br />
+          <br />
         </>
       </main>
 

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: "es5",
+  tabWidth: 2,
+  semi: true,
+  singleQuote: false,
+};
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,4 @@
+:global
 html,
 body {
   padding: 0;
@@ -88,6 +89,5 @@ body {
 }
 .terms {
   width: 80%;
-  align: center;
   margin: auto;
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]