Git Product home page Git Product logo

eth-dapp-browser's Introduction

Ledger

ETH Dapp Browser

An Ethereum Dapp Browser to run your Dapp inside Ledger Live

License Issues GitHub pull requests Discord

Full documentation · Report Bug · Request Feature

Installation

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.ts. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Usage

This application is mainly used by Ledger Live to display a Dapp and provide a bridge between said Dapp and the Ledger Live client.

As a Dapp developer, you can use this application through a manifest, as specified on our developer portal, to test the correct integration of your Dapp within Ledger Live.

The list of supported rpc calls can be found in the receiveDAPPMessage function in the DAPPBrowser component index file.

Here is an example of a manifest you could use for local test (with the eth-dapp-browser accessible on port 3000 and your Dapp accessible on port 4000):

{
  "id": "test-dapp",
  "name": "Test DApp",
  "url": "http://localhost:3000/v2/",
  "params": {
    "dappUrl": "http://localhost:4000/",
    "nanoApp": "Ethereum",
    "dappName": "Test DApp",
    "networks": [
      {
        "currency": "ethereum",
        "chainID": 1,
        "nodeURL": "wss://eth-mainnet.ws.alchemyapi.io/v2/0fyudoTG94QWC0tEtfJViM9v2ZXJuij2"
      },
      {
        "currency": "bsc",
        "chainID": 56,
        "nodeURL": "https://bsc-dataseed.binance.org/"
      },
      {
        "currency": "polygon",
        "chainID": 137,
        "nodeURL": "https://polygon-mainnet.g.alchemy.com/v2/oPIxZM7kXsPVVY1Sk0kOQwkoIOpSu8PE"
      },
      {
        "currency": "ethereum_goerli",
        "chainID": 5,
        "nodeURL": "https://eth-goerli.g.alchemy.com/v2/vzJoUrfWDBOdwtCL-sybfBzIfNzY0_tk"
      }
    ]
  },
  "homepageUrl": "",
  "supportUrl": "",
  "icon": "",
  "platforms": ["ios", "android", "desktop"],
  "apiVersion": "^2.0.0",
  "manifestVersion": "2",
  "branch": "stable",
  "categories": [],
  "currencies": ["ethereum", "bsc"],
  "content": {
    "shortDescription": {
      "en": "Test DApp"
    },
    "description": {
      "en": "Test DApp"
    }
  },
  "permissions": [
    "account.list",
    "account.request",
    "currency.list",
    "message.sign",
    "transaction.signAndBroadcast"
  ],
  "domains": ["http://", "https://"]
}

Know that your Dapp will always be accessed through the url provided under the dappUrl field.

If you want to handle different logics for opening your Dapp (for example, opening a specific page or start your app in a specific stage based on some parameters), you can use URL query string alongside Ledger Live deeplink.

Here is an example of a deeplink oppening this test Dapp with some query parameters:

ledgerlive://discover/test-dapp/?param1=val1&param2=val2

The query params param1 and param2 will be forwarded by the eth-dapp-browser to your Dapp (i.e: included as query parameters in your Dapp URL).

Your Dapp could also automatically receive extra query params provided by the client application (Ledger Live for example).

⚠️ These query params are reserved, meaning you should not provide them as query params, either in the dappUrl field through the manifest or in a deeplink.

Here is a list of these reserved query params and the information of wether or not they might be forwarded by the eth-dapp-browser to the Dapp:

Query param Passed to Dapp?
params
accountId
theme X
backgroundColor X
textColor X
loadDate X
lang X

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT


We are hiring, join us! 🚀

See also:

eth-dapp-browser's People

Contributors

chabroa avatar comradeaergo avatar iammorrow avatar justkant avatar meriadec avatar ramyeb avatar sprohaszka-ledger avatar valpinkman avatar wozacosta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eth-dapp-browser's Issues

"@ledgerhq/react-ui" brakes peer dependencies with "[email protected]"

Steps to reproduce:

  1. Clone https://github.com/LedgerHQ/eth-dapp-browser
  2. Run pnpm install
  3. Get the output:
 ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies

.
├─┬ @ledgerhq/react-ui 0.13.0
│ └─┬ react-chartjs-2 3.3.0
│   └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
└─┬ react-select 4.3.1
  ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
  ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
  └─┬ react-input-autosize 3.0.0
    └── ✕ unmet peer react@"^16.3.0 || ^17.0.0": found 18.2.0

Seems like @ledgerhq/react-ui got updated and brings [email protected] along, which brakes peer deps of react-select and react-input-autosize

Lido not connecting to wallet before Term Of Service accept

We noticed a weird behavior with Lido dapp on ledger-vault.

You can't have your account auto-connected to lido the first time you use the dapp (we reproduce constantly in incognito window). You need to click on connect, accept the ToS, then your account is automatically connected.

Have you experienced such issue on ledger-live side?

To be honest, I don't think the issue is on eth-dapp-browser, it's more something on Lido side, but just in case I'm creating this issue, and also for tracking the issue. Feel free to close it if you feel it's not eth-dapp-browser fault.

Demo
lidobug

Lido manifest used

 {
        "apiVersion": "0.0.1",
        "branch": "stable",
        "categories": [
            "staking",
            "defi"
        ],
        "content": {
            "description": {
                "en": "Stake your ETH with Lido to earn daily staking rewards."
            },
            "shortDescription": {
                "en": "Stake your ETH with Lido to earn daily staking rewards."
            }
        },
        "currencies": [
            "ethereum"
        ],
        "domains": [
            "https://*"
        ],
        "homepageUrl": "https://lido.fi/",
        "icon": "https://cdn.live.ledger.com/icons/platform/lido.png",
        "id": "lido",
        "manifestVersion": "1",
        "name": "Lido",
        "params": {
            "dappUrl": "https://stake.lido.fi/?ref=0x6DC9657C2D90D57cADfFB64239242d06e6103E43&embed=true&app=ledger-live",
            "networks": [
                {
                    "chainID": 1,
                    "currency": "ethereum",
                    "nodeURL": "https://eth-dapps.api.live.ledger.com"
                }
            ]
        },
        "permissions": [],
        "platform": "all",
        "url": "https://dapp-browser.apps.ledger.com/"
    },

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.