Code Monkey home page Code Monkey logo

ensdomains-landing's Introduction

ENS Homepage V2

The homepage for the ENS project, visit here.

Translations

Translations use react-i18next and translations are located in: locales/language/translation.json.

Please copy the en.translation.json and add the translation to allow us to add a new language

Adding logos

If your app integrates with ENS and would like to have your logo into our website, please raise a PR following the instruction below.

1. Add your company detail to src/components/Home/links.json in the following format. Please place your company name in the alphabetical order.

 "productname": {
    "link": "https://yourwebsite.com",
    "name": "the description of your site"
  }

Example

 "nftychat": {
    "link": "https://nftychat.xyz",
    "name": "nfty chat"
  }

2. Add your company logo in the same name as your productname (please resize your logo) under one of the following directories

  • src/components/Home/Ecosystem/wallets/ = wallets
  • src/components/Home/Ecosystem/browsers/ = browsers
  • src/components/Home/Ecosystem/apps/ = anything else

3. Raise a PR. In the PR, please describe how to check if you have integrated ENS (screenshot or video is preferred)

Reference PR

ensdomains-landing's People

Contributors

achalvs avatar arachnid avatar bilinkis avatar brantlymillegan avatar claysending avatar danchousz avatar dbadoy avatar dependabot[bot] avatar domicoeth avatar eth-limo avatar gemcoder21 avatar gskril avatar hacktar avatar hursittarcan avatar jefflau avatar katakoto avatar leonmanrolls avatar liuminke1996 avatar loatheb avatar lucemans avatar makoto avatar robertcedwards avatar serenae-fansubs avatar spduk avatar storywithoutend avatar sugh01 avatar talentlessguy avatar tateb avatar tiagofssampaio avatar zadok7 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ensdomains-landing's Issues

Add a "Get Started" call to action with a step-by-step guide on how to get started

ENS Domains could be a gateway into cryptocurrency. People who see value in the legacy domain infrastructure understand and appreciate the scarcity of good names. There is only one Apple.com and only one Amazon.com. Domain names are scarce digital assets, just like cryptocurrency, so users of legacy domains will likely understand the value of ENS names. Therefore, if we make it easier to get started with ENS domains, more people may be interested in Ethereum and other cryptocurrency.

I think the current landing page and docs are not very helpful for new users. If someone is interested in ENS Domains after seeing the landing page but have no experience with Ethereum, then they will have no idea how to get started. When you click Launch App, you are sent to https://app.ens.domains. There, you will find a "How to use ENS" and a button, but it is useless because it leads back to the home page, https://ens.domains, which doesn't explain how to use ENS. At this point, you have the following options: try to ask people what's going on in the Discord and Discourse (which can lead to abuse), read the docs (which is pretty complicated for people who know nothing about cryptocurrency), try to figure out what's happening on your own (which is tough), or move on with something else. I suspect most people are going to move on.

To make it easier to get started with ENS and Ethereum, I suggest that we replace the first "Launch App" button in the body with a "Get Started" call to action button. This button should be big, like "Decentralised Websites". Add the same button at the bottom before "Get Involved". Keep the Launch App button in the top right of the header. This "Get Started" button should lead to a step-by-step article in the docs on how to get started. This should include:

  1. What is Ethereum? How is it different from other cryptocurrencies such as Bitcoin? Perhaps explain what Decentralized Apps are.
  2. How to choose a wallet, set it up, and add funds to it. Mention that they need to use a wallet that supports WalletConnect or a Portis, Torus, Authereum, or MEW wallet. Perhaps suggest reputable wallets with ENS integration such as Argent or TrustWallet. Perhaps add a link to Ethereum.org's section on how to pick a wallet: https://ethereum.org/en/wallets/find-wallet/ or a link to WalletConnect.org's section on which wallets support it: https://walletconnect.org/wallets.
  3. How to connect to ENS with your wallet and purchase a name.

There are some blog posts on the internet with step-by-step guides on how to use ENS, but there's nothing official that's easily discoverable. I think it would be extremely helpful to newcomers to have something welcoming and easy to understand for people who like names but don't know much (or anything) about Ethereum or the ecosystem powered by it.

Fix font issue on homepage

I think when you made the homepage translatable, we lost the correct font for the homepage. Just need to get back the original font.

Add links to homepage sections

I want to be able to link directly to each section, e.g. ens.domains/#ensecosystem

All the sections include:

  • "One Name for All..."
  • stats section
  • "Decentralised Websites"
  • "Use Traditional Domains"
  • "Additional Features"
  • "ENS Ecosystem"
  • "Get Involved"

Updates to Homepage

  1. Remove "Additional Features" section

  2. Add a "Learn More" button (that looks like the one below the "Decentralized Websites" section) below the "Use Traditional Domains" section and have it point to this: https://docs.ens.domains/dns-registrar-guide

  3. Fix shadow behind "Learn More" button below "Decentralized Websites" Section (the shadow is cut off)

Screen Shot 2021-07-01 at 12 02 09 PM

  1. Move "One Name For All of Your Addresses" section to below stats section

  2. Where "One Name.." used to be (just above the stats), make a new section with this copy:
    Title: Your Portable Web3 Username
    Text: No more sandboxed usernames. Own your username and use it across services.

Becca has made a graphic/animation for this section to be displayed below the text, you can find the sketch file here (note that she has the wrong text in the sketch file, use the text I provided above). The first state should fade to the second at some point as the person scrolls down the page

section

Cannot add content record to subdomain

I'm on the site, I try to add an ipfs CID to a subdomain, and it fails. The browser console says

Uncaught (in promise) Error: Network error: execution reverted
at new t (ApolloError.ts:57)
at Object.error (QueryManager.ts:256)
at b (Observable.js:134)
at v (Observable.js:165)
at e.value (Observable.js:224)
at observables.ts:15
at Set.forEach ()
at Object.error (observables.ts:15)
at b (Observable.js:134)
at v (Observable.js:165)
at e.value (Observable.js:224)

I tried on firefox and chrome, I was able to successfully add the subdomain, but added a content record fails without opening metamask. This has been an issue for a few weeks now.

Some feedback about your landing

Hi,

I'm opening this issue hoping it's the right place to give feedback about your landing.

Almost every time I go to ens.domains I get confused and frustrated about the screenshot of a searchbox that appears in the middle of the screen. It makes the landing look almost like a search engine, so I try to use the searchbox, but it doesn't work.

Also, the screenshots look pretty blurry on my mac.

Clickjacking vulnerability found on https://ens.domains

<title>I Frame</title>

clickjacking vulnerability

<iframe src="https://ens.domains" height="550px" width="700px"></iframe>

Here your domain not restricting from displaying ur website and it's possible to track any users to attackers website

SEO Improvements

Looking at page ranking on Google Search, we might be able to improve some of the SEO. Recommending to add the following <meta>.

<meta name="googlebot" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content=“@ensdomains”>
<meta property="og:description" content="Your web3 username, a readable name for all your cryptocurrency addresses, and decentralised websites.">
<meta property="og:type" content="website">
<meta property="og:image" content=“https://ens.domains/static/twitter-49d4bb2b55c07c5f5900e95860401fd0.png">
<meta property="og:image:alt" content=“Ethereum Name Service”>
<meta property="og:image:width" content=“390px”>
<meta property="og:image:height" content=“258px”>
<meta property="og:site_name" content=“Ethereum Name Service">
<meta property="og:title" content=“Ethereum Name Service”>
<meta property="og:url" content="https://ens.domains”>

I can initiate a PR in components/Layout.js to add the tags to <Helmet meta={[ ... ]} /> if there is no bandwidth w/in the team.

Edited: Closed missing content description.

Wallet animation not displaying correctly on mobile

Screenshot_20200714-200311_Brave

I think this was added when I extended the length of the line of cryptocurrency logos (so they would continue off the page on desktop). Please ensure the length isn't affected, only that the double line of cryptocurrency logos is removed on mobile.

translation is broken

when you switch the language apart from English, it's showing the translation key, instead of the fallback string

Screenshot 2021-11-18 at 10 49 49

It's possibly because the key only exists in English file. That has to exist on all other translation files

App names scrambled on expansion

When expanding the list of apps on the ENS homepage the names of apps seem to be scrambled, i.e. the names don't match the logos, but only on Firefox.

My specs: Firefox 83.0 / macOS Catalina 10.15.7

For reference, I tested on Chrome and everything works as expected.

See 1inch icon / name in this screenshot

RD8QqkmP jpg large

Fix spacing for translations

Try a few different languages and you'll see that some of them mess up the spacing and dont fit into the places that the English words do

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.