{"id":21936139,"url":"https://github.com/learnweb3dao/ens","last_synced_at":"2025-04-22T11:52:12.575Z","repository":{"id":38424571,"uuid":"456586771","full_name":"LearnWeb3DAO/ENS","owner":"LearnWeb3DAO","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-04T00:17:00.000Z","size":133,"stargazers_count":1,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T14:51:11.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LearnWeb3DAO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-07T16:29:46.000Z","updated_at":"2022-05-28T05:24:43.000Z","dependencies_parsed_at":"2022-08-18T08:21:38.248Z","dependency_job_id":null,"html_url":"https://github.com/LearnWeb3DAO/ENS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FENS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FENS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FENS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FENS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LearnWeb3DAO","download_url":"https://codeload.github.com/LearnWeb3DAO/ENS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250237798,"owners_count":21397399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T01:13:20.613Z","updated_at":"2025-04-22T11:52:12.553Z","avatar_url":"https://github.com/LearnWeb3DAO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Ethereum Name Service\n\n![](https://i.imgur.com/UnxKYz2.png)\n\n\n## Background\nWhen web initially started the only way you could explore information on the web was by entering in its IP address. After that the concept of DNS was introduced which helped us to link a domain name to an IP address.\n\nSo whenever you type `learnweb3.io`, DNS takes care of translating it to the respective IP which is what the computer finally understands.\n\n## What is ENS?\n\n- ENS stands for `The Ethereum Name Service` and it behaves very similar to how DNS behaves in the web2 space. \n- As we all know that Ethereum has long addresses which are hard to remember or type\n- ENS solves this issue by translating these wallet addresses, hashes etc into readable domains which are then saved on Ethereum blockchain\n- The best part about ENS is unlike DNS servers which are centralized, ENS works with the help of a smart contract which is censorship resistant.\n- So now when you are sending your wallet address to someone which looks like `0x1234huiahi....` you can actually send them `tom.eth` and the ENS would figure out that `tom.eth` is actually equal to your wallet address (`0x1234huiahi....`)\n\n\n## Requirements\n\nIts time to build something where we can use ENS.\n\nWe will develop a website which can display the ENS for an address if it has one.\n\nLets gooo 🚀\n\n\n## Setup\n\n- First lets get an ENS name for your address, start by opening up [https://app.ens.domains/](https://app.ens.domains/)\n- Make sure when you open the website, your MetaMask is connected to the `Rinkeby testnet` and it has some `Rinkeby Ether`\n- Search for an ENS domain name, any name you like, as long as it is available!\n- Click on `Available`\n\n    ![](https://i.imgur.com/1p0EBmv.png)\n\n- Then click on `Request To Register`\n![](https://i.imgur.com/zBG5JRo.png)\n\n- When the progress bar enters the 3rd step, Click `Register`\n![](https://i.imgur.com/a4nd6O4.png)\n\n- Then after the progress bar finishes click on `Set As Primary ENS Name`\n\n    ![](https://i.imgur.com/8cXXopd.png)\n\n- From the dropdown then select the ENS name you just created\n\n    ![](https://i.imgur.com/MgSrlyG.png)\n\n- Click `Save`\n  ![](https://i.imgur.com/8qOcAnp.png)\n\n- Now you have an ENS registered to your address on Rinkeby\n\nAwesome, You did it ❤️\n\n## Website\n\n- To develop the website we will use [React](https://reactjs.org/) and [Next Js](https://nextjs.org/). React is a javascript framework used to make websites and Next.js is a React framework that also allows writing backend APIs code along with the frontend, so you don't need two separate frontend and backend services.\n- First, You will need to create a new `next` app. Your folder structure should look something like\n\n  ```\n  - ENS\n      - my-app\n  ```\n\n- To create this `next-app`, in the terminal point to ENS folder and type\n\n  ```bash\n  npx create-next-app@latest\n  ```\n\n  and press `enter` for all the questions\n\n- Now to run the app, execute these commands in the terminal\n\n  ```\n  cd my-app\n  npm run dev\n  ```\n\n- Now go to `http://localhost:3000`, your app should be running 🤘\n\n- Now lets install [Web3Modal library](https://github.com/Web3Modal/web3modal). Web3Modal is an easy to use library to help developers easily allow their users to connect to your dApps with all sorts of different wallets. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc) and WalletConnect, You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.\n  Open up a terminal pointing at`my-app` directory and execute this command\n\n  ```bash\n  npm install web3modal\n  ```\n\n- In the same terminal also install `ethers.js`\n\n  ```bash\n  npm install ethers\n  ```\n- In your my-app/public folder, download [this image](https://github.com/LearnWeb3DAO/ENS/blob/main/my-app/public/learnweb3punks.png) and rename it to `learnweb3punks.png`\n\n- Now go to styles folder and replace all the contents of `Home.modules.css` file with the following code, this would add some styling to your dapp:\n\n  ```css\n  .main {\n    min-height: 90vh;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    font-family: \"Courier New\", Courier, monospace;\n  }\n\n  .footer {\n    display: flex;\n    padding: 2rem 0;\n    border-top: 1px solid #eaeaea;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .image {\n    width: 70%;\n    height: 50%;\n    margin-left: 20%;\n  }\n\n  .title {\n    font-size: 2rem;\n    margin: 2rem 0;\n  }\n\n  .description {\n    line-height: 1;\n    margin: 2rem 0;\n    font-size: 1.2rem;\n  }\n\n  .button {\n    border-radius: 4px;\n    background-color: blue;\n    border: none;\n    color: #ffffff;\n    font-size: 15px;\n    padding: 20px;\n    width: 200px;\n    cursor: pointer;\n    margin-bottom: 2%;\n  }\n  @media (max-width: 1000px) {\n    .main {\n      width: 100%;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n  ```\n- Open your index.js file under the pages folder and paste the following code, explanation of the code can be found in the comments.\n\n    ```javascript\n    import Head from \"next/head\";\n    import styles from \"../styles/Home.module.css\";\n    import Web3Modal from \"web3modal\";\n    import { ethers, providers } from \"ethers\";\n    import { useEffect, useRef, useState } from \"react\";\n\n    export default function Home() {\n      // walletConnected keep track of whether the user's wallet is connected or not\n      const [walletConnected, setWalletConnected] = useState(false);\n      // Create a reference to the Web3 Modal (used for connecting to Metamask) which persists as long as the page is open\n      const web3ModalRef = useRef();\n      // ENS\n      const [ens, setENS] = useState(\"\");\n      // Save the address of the currently connected account\n      const [address, setAddress] = useState(\"\");\n\n      /**\n       * Sets the ENS, if the current connected address has an associated ENS or else it sets\n       * the address of the connected account\n       */\n      const setENSOrAddress = async (address, web3Provider) =\u003e {\n        // Lookup the ENS related to the given address\n        var _ens = await web3Provider.lookupAddress(address);\n        // If the address has an ENS set the ENS or else just set the address\n        if (_ens) {\n          setENS(_ens);\n        } else {\n          setAddress(address);\n        }\n      };\n\n      /**\n       * A `Provider` is needed to interact with the blockchain - reading transactions, reading balances, reading state, etc.\n       *\n       * A `Signer` is a special type of Provider used in case a `write` transaction needs to be made to the blockchain, which involves the connected account\n       * needing to make a digital signature to authorize the transaction being sent. Metamask exposes a Signer API to allow your website to\n       * request signatures from the user using Signer functions.\n       */\n      const getProviderOrSigner = async () =\u003e {\n        // Connect to Metamask\n        // Since we store `web3Modal` as a reference, we need to access the `current` value to get access to the underlying object\n        const provider = await web3ModalRef.current.connect();\n        const web3Provider = new providers.Web3Provider(provider);\n\n        // If user is not connected to the Rinkeby network, let them know and throw an error\n        const { chainId } = await web3Provider.getNetwork();\n        if (chainId !== 4) {\n          window.alert(\"Change the network to Rinkeby\");\n          throw new Error(\"Change network to Rinkeby\");\n        }\n        const signer = web3Provider.getSigner();\n        // Get the address associated to the signer which is connected to  MetaMask\n        const address = await signer.getAddress();\n        // Calls the function to set the ENS or Address\n        await setENSOrAddress(address, web3Provider);\n        return signer;\n      };\n\n      /*\n        connectWallet: Connects the MetaMask wallet\n      */\n      const connectWallet = async () =\u003e {\n        try {\n          // Get the provider from web3Modal, which in our case is MetaMask\n          // When used for the first time, it prompts the user to connect their wallet\n          await getProviderOrSigner(true);\n          setWalletConnected(true);\n        } catch (err) {\n          console.error(err);\n        }\n      };\n\n      /*\n        renderButton: Returns a button based on the state of the dapp\n      */\n      const renderButton = () =\u003e {\n        if (walletConnected) {\n          \u003cdiv\u003eWallet connected\u003c/div\u003e;\n        } else {\n          return (\n            \u003cbutton onClick={connectWallet} className={styles.button}\u003e\n              Connect your wallet\n            \u003c/button\u003e\n          );\n        }\n      };\n\n      // useEffects are used to react to changes in state of the website\n      // The array at the end of function call represents what state changes will trigger this effect\n      // In this case, whenever the value of `walletConnected` changes - this effect will be called\n      useEffect(() =\u003e {\n        // if wallet is not connected, create a new instance of Web3Modal and connect the MetaMask wallet\n        if (!walletConnected) {\n          // Assign the Web3Modal class to the reference object by setting it's `current` value\n          // The `current` value is persisted throughout as long as this page is open\n          web3ModalRef.current = new Web3Modal({\n            network: \"rinkeby\",\n            providerOptions: {},\n            disableInjectedProvider: false,\n          });\n          connectWallet();\n        }\n      }, [walletConnected]);\n\n      return (\n        \u003cdiv\u003e\n          \u003cHead\u003e\n            \u003ctitle\u003eENS Dapp\u003c/title\u003e\n            \u003cmeta name=\"description\" content=\"ENS-Dapp\" /\u003e\n            \u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n          \u003c/Head\u003e\n          \u003cdiv className={styles.main}\u003e\n            \u003cdiv\u003e\n              \u003ch1 className={styles.title}\u003e\n                Welcome to LearnWeb3 Punks {ens ? ens : address}!\n              \u003c/h1\u003e\n              \u003cdiv className={styles.description}\u003e\n                Its an NFT collection for LearnWeb3 Punks.\n              \u003c/div\u003e\n              {renderButton()}\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              \u003cimg className={styles.image} src=\"./learnweb3punks.png\" /\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cfooter className={styles.footer}\u003e\n            Made with \u0026#10084; by LearnWeb3 Punks\n          \u003c/footer\u003e\n        \u003c/div\u003e\n      );\n    }\n\n    ```\n- Now in your terminal which is pointing to my-app folder, execute\n    ```bash\n    npm run dev\n    ```\n\nYour ENS dapp should now work without errors 🚀\n\n### Push to github\n\nMake sure before proceeding you have [pushed all your code to github](https://medium.com/hackernoon/a-gentle-introduction-to-git-and-github-the-eli5-way-43f0aa64f2e4) :)\n\n\n## Deploying your dApp\n\nWe will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.\n\n- Go to [Vercel](https://vercel.com/) and sign in with your GitHub\n- Then click on `New Project` button and then select your ENS dApp repo\n- ![](https://i.imgur.com/alCmuu9.png)\n- When configuring your new project, Vercel will allow you to customize your `Root Directory`\n- Click `Edit` next to `Root Directory` and set it to `my-app`\n- Select the Framework as `Next.js`\n- Click `Deploy`\n- Now you can see your deployed website by going to your dashboard, selecting your project, and copying the URL from there!\n\n---\n\nTo pass the skill test for this level, input YOUR address you used to buy the ENS domain from in the verification box.\n\nShare your website on Discord :D and as usual, feel free to ask any questions!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnweb3dao%2Fens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnweb3dao%2Fens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnweb3dao%2Fens/lists"}