chore: first project commit

2022-05-10 10:40:06 -04:00
commit f1a448ba08
19 changed files with 40134 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,61 @@
+.DS_STORE
+node_modules
+scripts/flow/*/.flowconfig
+.flowconfig
+*~
+*.pyc
+.grunt
+_SpecRunner.html
+__benchmarks__
+build/
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/.tempUserDataDir
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "ens-clock",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.4",
+    "@reduxjs/toolkit": "^1.8.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
+    "axios": "^0.27.2",
+    "browserify": "^17.0.0",
+    "eth-ens-namehash": "^2.0.8",
+    "install": "^0.13.0",
+    "npm": "^8.9.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.1",
+    "react-scripts": "5.0.1",
+    "sha3": "^2.1.4",
+    "web-vitals": "^2.1.4",
+    "web3": "^1.7.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/public/04H59.png
+++ b/public/04H59.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="24H Club - ENS 1440 Timekeepers"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    
+    <!--
+      Bootstrap css
+    -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+    <!--
+      Web fonts used in this project
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:wght@600;700&display=swap" rel="stylesheet">
+
+    <title>ENS Clock</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "24H Club",
+  "name": "The first 24 hour art exhibition.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,196 @@
+code {
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-variant-numeric: tabular-nums;
+  color: white;
+  font-size: 100%;
+  font-weight: bold;
+  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.225);
+  line-height: 34px;
+}
+
+.App {
+  text-align: center;
+  font-family: 'Bebas Neue', cursive;
+  color: #71757d;
+  height: 100%;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+}
+
+.App-header {
+  height: 0%;
+  height: 0vh;
+  height: calc(var(--vh, 1vh) * 0);
+}
+
+.App-body {
+  height: 95%;
+  height: 95vh;
+  height: calc(var(--vh, 1vh) * 95);
+  display: flex;
+  align-items: center;
+}
+
+.App-footer {
+  height: 5%;
+  height: 5vh;
+  height: calc(var(--vh, 1vh) * 5);
+}
+
+.card-row {
+  justify-content: center;
+}
+
+.card {
+  background-color: rgb(30,30,30) !important;
+  color: white !important;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.card-size {
+  min-height: 325px;
+  min-width: 300px;
+  max-width: 300px;
+}
+
+.card-content {
+  width: 300px;
+  height: 300px;
+}
+
+.card-counter {
+  position: absolute; 
+  top: 225.85px; 
+  left: 225.85px;
+  font-size: 28.88px;
+}
+
+.card-image {
+  height: 300px;
+  width: 300px;
+  position: absolute; 
+  top:0; 
+  left:0;
+}
+
+.card-footer {
+  font-size: 100%;
+}
+
+.icon-size {
+  height: 40px;
+  width: 40px;
+}
+
+.lds-grid-container {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  justify-content: center;
+}
+
+@media (min-width: 992px) {
+  code {
+    font-size: 133.33%;
+  }
+
+  .card-size {
+    min-height: 425px;
+    min-width: 400px;
+    max-width: 400px;
+  }
+
+  .card-content {
+    width: 400px;
+    height: 400px;
+  }
+
+  .card-counter {
+    top: 310px; 
+    left: 310px;
+  }
+
+  .card-image {
+    height: 400px;
+    width: 400px;
+  }
+
+  .icon-size {
+    height: 60px;
+    width: 60px;
+  }
+
+  .lds-grid-container {
+    height: 400px;
+    width: 400px;
+  }
+}
+
+.lds-grid {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-grid div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  animation: lds-grid 1.2s linear infinite;
+}
+.lds-grid div:nth-child(1) {
+  top: 8px;
+  left: 8px;
+  animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+  top: 8px;
+  left: 32px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+  top: 8px;
+  left: 56px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+  top: 32px;
+  left: 8px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+  top: 32px;
+  left: 32px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+  top: 32px;
+  left: 56px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+  top: 56px;
+  left: 8px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+  top: 56px;
+  left: 32px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+  top: 56px;
+  left: 56px;
+  animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,240 @@
+import "./App.css";
+import "animate.css";
+import { useState, useEffect } from "react";
+
+//import namehash from "eth-ens-namehash"; // DO NOT REMOVE COMMENT
+import { Keccak } from "sha3";
+//import axiosClient from "axios"; // DO NOT REMOVE COMMENT
+
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import ButtonBase from "@mui/material/ButtonBase";
+
+import OpenSeaIcon from "./asset/image/opensea-icon.svg";
+import EnsIcon from "./asset/image/ens-icon.jpeg";
+
+import { hexToDec } from "./utility";
+
+//var ensContract = new EnsContract();
+
+/* vanilla js to adapt height to actual viewport vs therotical */
+let vh = window.innerHeight * 0.01;
+document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+window.addEventListener("resize", () => {
+  let vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty("--vh", `${vh}px`);
+});
+/* end vanilla js */
+
+function App() {
+  const [seconds, setSeconds] = useState("00");
+  const [currentEnsImage, setCurrentEnsImage] = useState("");
+  const ensImages = {};
+  const donationLink =
+    "https://heliowallet.com/ethereum-donation?address=0x2652CBE035CF346A4E085D4C2Fb30F2B5Abf3d3d&amount=0.01&accessWallet=1&qrCode=1&ethBalance=1";
+
+  useEffect(() => {
+    setSeconds(getSeconds());
+    setInterval(() => {
+      setSeconds(getSeconds());
+      setCurrentEnsImage(ensImages[getEnsName()]);
+    }, 1000);
+
+    preloadImages();
+    // eslint-disable-next-line
+  }, []);
+
+  const preloadImages = async () => {
+    // load all ens names for next 1000 minutes
+    const ensNames = [getEnsName()];
+    for (let i = 1; i <= 1000; i++) {
+      ensNames.push(getEnsName(i));
+    }
+
+    // load images for each ens name
+    await downloadEnsImage(ensNames[0], 0);
+    for (let i = 1; i <= 2; i++) {
+      await downloadEnsImage(ensNames[i], 1000);
+    }
+    for (let i = 3; i <= 1000; i++) {
+      await downloadEnsImage(ensNames[i], 30000);
+    }
+  };
+
+  const downloadEnsImage = async (ensName, timeDelay) => {
+    let resolve = function (ensName) {
+      ensImages[ensName] = getEnsImageUri(ensName);
+    };
+    let reject = function (ensName) {
+      ensImages[ensName] = "";
+    };
+
+    const img = new Image();
+    img.onload = () => {
+      resolve(ensName);
+    };
+    img.onerror = () => {
+      reject(ensName);
+    };
+    img.src = getEnsImageUri(ensName);
+
+    await new Promise((r) => setTimeout(r, timeDelay));
+  };
+
+  const getEnsImageUri = (ensName) => {
+    return `https://metadata.ens.domains/mainnet/0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85/${getLabelHash(
+      ensName
+    )}/image`;
+  };
+
+  const getEnsDetailsUri = (ensName) => {
+    return `https://app.ens.domains/name/${ensName}/details`;
+  };
+
+  const getOpenSeaUri = (ensName) => {
+    const tokenId = hexToDec(getLabelHash(ensName).replace("0x", ""));
+    return `https://opensea.io/assets/0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85/${tokenId}`;
+  };
+
+  // const getNameHash = (ensName) => { // DO NOT REMOVE COMMENT
+  //   return namehash.hash(ensName);
+  // };
+
+  const getLabelHash = (ensName) => {
+    const label = ensName.replace(".eth", "");
+
+    const hasher = new Keccak(256);
+    hasher.update(label);
+
+    return "0x" + hasher.digest("hex");
+  };
+
+  const getEnsName = (minutesToAdd) => {
+    let now = new Date();
+    if (minutesToAdd) {
+      now = new Date(now.getTime() + minutesToAdd * 60000);
+    }
+
+    const hour =
+      now.getHours() < 10 ? `0${now.getHours()}` : now.getHours().toString();
+    const minute =
+      now.getMinutes() < 10
+        ? `0${now.getMinutes()}`
+        : now.getMinutes().toString();
+    return hour + "h" + minute + ".eth";
+  };
+
+  const getSeconds = () => {
+    const now = new Date();
+    const seconds =
+      now.getSeconds() < 10
+        ? `0${now.getSeconds()}`
+        : now.getSeconds().toString();
+    return seconds;
+  };
+
+  const isEnsImageLoading = () => {
+    return !currentEnsImage;
+  };
+
+  const renderLoadingRipple = () => {
+    return (
+      <div className="lds-grid-container">
+        <div className="lds-grid" style={{ margin: "auto" }}>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderCardContent = () => {
+    return (
+      <div className="card-content">
+        <img src={currentEnsImage} className="card-image" alt="ens avatar" />
+        <div className="card-counter">
+          <code>{seconds}</code>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="App">
+      <div className="App-header container">
+        <div className="col">
+          <div className="row"></div>
+        </div>
+      </div>
+      <div className="App-body container align-self-center">
+        <div className="col">
+          <div className="row card-row">
+            <Card raised={true} className="card card-size">
+              {isEnsImageLoading()
+                ? renderLoadingRipple()
+                : renderCardContent()}
+              <CardActions sx={{ marginBottom: 1, marginTop: 1 }}>
+                <div style={{ margin: "auto" }}>
+                  <ButtonBase
+                    sx={{
+                      marginRight: 2,
+                    }}
+                  >
+                    <a
+                      href={getOpenSeaUri(getEnsName())}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <img
+                        src={OpenSeaIcon}
+                        className="icon-size"
+                        alt="opensea logo"
+                      />
+                    </a>
+                  </ButtonBase>
+                  <ButtonBase>
+                    <a
+                      href={getEnsDetailsUri(getEnsName())}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <img
+                        src={EnsIcon}
+                        className="icon-size"
+                        style={{ borderRadius: "50%" }}
+                        alt="ens logo"
+                      />
+                    </a>
+                  </ButtonBase>
+                </div>
+              </CardActions>
+            </Card>
+          </div>
+          <div className="row mt-4">
+            <h4>24H Club</h4>
+          </div>
+        </div>
+      </div>
+      <div className="App-footer container">
+        <div className="row">
+          <div className="col">
+            Donate to the project:&nbsp;
+            <a href={`${donationLink}`} target="_blank" rel="noreferrer">
+              04h59.eth
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
--- a/src/abi/EnsPublicResolver.json
+++ b/src/abi/EnsPublicResolver.json
--- a/src/asset/image/ens-icon.jpeg
+++ b/src/asset/image/ens-icon.jpeg
--- a/src/asset/image/opensea-icon.svg
+++ b/src/asset/image/opensea-icon.svg
@@ -0,0 +1,5 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90 45C90 69.8514 69.8514 90 45 90C20.1486 90 0 69.8514 0 45C0 20.1486 20.1486 0 45 0C69.8566 0 90 20.1486 90 45Z" fill="#2081E2"/>
+<path d="M22.2011 46.512L22.3953 46.2069L34.1016 27.8939C34.2726 27.6257 34.6749 27.6535 34.8043 27.9447C36.76 32.3277 38.4475 37.7786 37.6569 41.1721C37.3194 42.5683 36.3948 44.4593 35.3545 46.2069C35.2204 46.4612 35.0725 46.7109 34.9153 46.9513C34.8413 47.0622 34.7165 47.127 34.5824 47.127H22.5432C22.2196 47.127 22.0301 46.7756 22.2011 46.512Z" fill="white"/>
+<path d="M74.38 49.9149V52.8137C74.38 52.9801 74.2783 53.1281 74.1304 53.1928C73.2242 53.5812 70.1219 55.0052 68.832 56.799C65.5402 61.3807 63.0251 67.932 57.4031 67.932H33.949C25.6362 67.932 18.9 61.1727 18.9 52.8322V52.564C18.9 52.3421 19.0803 52.1618 19.3023 52.1618H32.377C32.6359 52.1618 32.8255 52.4022 32.8024 52.6565C32.7099 53.5072 32.8671 54.3764 33.2693 55.167C34.0461 56.7435 35.655 57.7283 37.3934 57.7283H43.866V52.675H37.4673C37.1391 52.675 36.9449 52.2959 37.1345 52.0277C37.2038 51.9214 37.2824 51.8104 37.3656 51.6856C37.9713 50.8257 38.8358 49.4895 39.6958 47.9684C40.2829 46.9421 40.8516 45.8463 41.3093 44.746C41.4018 44.5472 41.4758 44.3438 41.5497 44.1449C41.6746 43.7936 41.804 43.4653 41.8965 43.1371C41.9889 42.8597 42.0629 42.5684 42.1369 42.2956C42.3542 41.3617 42.4467 40.3723 42.4467 39.3459C42.4467 38.9437 42.4282 38.523 42.3912 38.1207C42.3727 37.6815 42.3172 37.2423 42.2617 36.8031C42.2247 36.4147 42.1554 36.031 42.0814 35.6288C41.9889 35.0416 41.8595 34.4591 41.7115 33.8719L41.6607 33.65C41.5497 33.2478 41.4573 32.864 41.3278 32.4618C40.9626 31.1996 40.5418 29.9698 40.098 28.8186C39.9362 28.3609 39.7512 27.9217 39.5663 27.4825C39.2935 26.8213 39.0161 26.2203 38.7619 25.6516C38.6324 25.3927 38.5214 25.1569 38.4105 24.9165C38.2857 24.6437 38.1562 24.371 38.0268 24.112C37.9343 23.9132 37.8279 23.7283 37.754 23.5434L36.9634 22.0824C36.8524 21.8836 37.0374 21.6478 37.2546 21.7079L42.2016 23.0487H42.2155C42.2247 23.0487 42.2294 23.0533 42.234 23.0533L42.8859 23.2336L43.6025 23.437L43.866 23.511V20.5706C43.866 19.1512 45.0034 18 46.4089 18C47.1116 18 47.7496 18.2866 48.2073 18.7536C48.665 19.2206 48.9517 19.8586 48.9517 20.5706V24.935L49.4787 25.0829C49.5204 25.0968 49.562 25.1153 49.599 25.143C49.7284 25.2401 49.9133 25.3835 50.1491 25.5591C50.3341 25.7071 50.5329 25.8874 50.7733 26.0723C51.2495 26.4561 51.8181 26.9508 52.4423 27.5194C52.6087 27.6628 52.7706 27.8107 52.9185 27.9587C53.723 28.7076 54.6245 29.5861 55.4845 30.557C55.7249 30.8297 55.9607 31.1071 56.2011 31.3984C56.4415 31.6943 56.6958 31.9856 56.9177 32.2769C57.209 32.6652 57.5233 33.0674 57.7961 33.4882C57.9256 33.687 58.0735 33.8904 58.1984 34.0892C58.5497 34.6209 58.8595 35.1711 59.1554 35.7212C59.2802 35.9755 59.4097 36.2529 59.5206 36.5257C59.8489 37.2608 60.1078 38.0098 60.2742 38.7588C60.3251 38.9206 60.3621 39.0963 60.3806 39.2535V39.2904C60.436 39.5124 60.4545 39.7482 60.473 39.9886C60.547 40.756 60.51 41.5235 60.3436 42.2956C60.2742 42.6239 60.1818 42.9336 60.0708 43.2619C59.9598 43.5763 59.8489 43.9045 59.7056 44.2143C59.4282 44.8569 59.0999 45.4996 58.7115 46.1006C58.5867 46.3225 58.4388 46.5583 58.2908 46.7802C58.129 47.016 57.9626 47.238 57.8146 47.4553C57.6112 47.7327 57.3939 48.0239 57.172 48.2828C56.9732 48.5556 56.7697 48.8284 56.5478 49.0688C56.2381 49.434 55.9422 49.7808 55.6324 50.1137C55.4475 50.331 55.2487 50.5529 55.0452 50.7517C54.8464 50.9736 54.643 51.1724 54.4581 51.3573C54.1483 51.6671 53.8894 51.9075 53.6721 52.1063L53.1635 52.5733C53.0896 52.638 52.9925 52.675 52.8908 52.675H48.9517V57.7283H53.9079C55.0175 57.7283 56.0716 57.3353 56.9223 56.6141C57.2136 56.3598 58.485 55.2594 59.9876 53.5997C60.0384 53.5442 60.1032 53.5026 60.1771 53.4841L73.8668 49.5265C74.1211 49.4525 74.38 49.6467 74.38 49.9149Z" fill="white"/>
+</svg>
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: rgb(26,32,39);
+  color: white;
+}
+
+.hidden {
+  display: none;
+}
+
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Provider } from "react-redux";
+import store from "./store";
+
+import "./index.css";
+import App from "./App";
+import { Buffer } from "buffer";
+
+// allow namehash library to work in browser
+window.Buffer = Buffer;
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,5 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+export default configureStore({
+  reducer: {},
+});
--- a/src/utility.js
+++ b/src/utility.js
@@ -0,0 +1,42 @@
+// import Web3 from "web3";
+// import ensPublicResolverAbi from "./abi/EnsPublicResolver.json";
+
+// const moralisEthNode =
+// const ensPublicResolverAddress = "0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41";
+
+// export class EnsContract {
+//   constructor() {
+//     this.web3 = new Web3(moralisEthNode);
+//     this.publicResolverContract = new this.web3.eth.Contract(
+//       ensPublicResolverAbi,
+//       ensPublicResolverAddress
+//     );
+//   }
+
+//   async getTextRecord(textRecord, labelHash) {
+//     return this.publicResolverContract.methods
+//       .text(labelHash, textRecord)
+//       .call();
+//   }
+// }
+
+export const hexToDec = (hexString) => {
+  let s = hexString;
+  var i,
+    j,
+    digits = [0],
+    carry;
+  for (i = 0; i < s.length; i += 1) {
+    carry = parseInt(s.charAt(i), 16);
+    for (j = 0; j < digits.length; j += 1) {
+      digits[j] = digits[j] * 16 + carry;
+      carry = (digits[j] / 10) | 0;
+      digits[j] %= 10;
+    }
+    while (carry > 0) {
+      digits.push(carry % 10);
+      carry = (carry / 10) | 0;
+    }
+  }
+  return digits.reverse().join("");
+};