Namada Interface

Namada Interface

Front end development with Namada

The namada-interface repository (opens in a new tab) is a monorepo that contains the Namada Keychain browser extension and associated Namadillo web app. It's a great resource for developers wishing to understand how to incorporate the Namada SDK into their front-end applications.

Installing from source (for development and experiment purposes)

Connect to a testnet or run a local node

  1. Follow the instructions for the testnets to connect to a testnet or set up a local node.
  2. Figure out where the base directory is stored and save its location in an environment variable with something like export BASE_DIR=<path/to/base/dir>. You can follow these docs to save this variable. Consider saving the chain ID as an environment variable as well. You can find the chain ID by running cat $BASE_DIR/global-config.toml. Save this chain-id to the environment variable export CHAIN_ID=<CHAIN_ID>.
  3. You will need to edit the CometBFT config in order to allow Namadillo to connect to your node. The CometBFT config will be located in $BASE_DIR/$CHAIN_ID//config.toml. You will need to change the cors_allowed_origins field to ["*"]. You can do this by running
    sed -i 's/cors_allowed_origins = \[\]/cors_allowed_origins = ["*"]/' \
            $BASE_DIR/$CHAIN_ID/config.toml

Setting up the Namada Keychain extension

  1. Clone the namada-interface repository (opens in a new tab).
  2. Follow the installation instructions in README.md.
  3. cd into the namada-interface/apps/extension directory and run yarn start:chrome. This will build the Namada Keychain extension and place it in namada-interface/apps/extension/build/chrome. It also starts the dev server which will watch for changes.
  4. cd into the namada-interface/apps/namadillo directory and run yarn dev in order to launch a local instance of Namadillo.
  5. Add the extension to the browser. For example, in Chrome, you can go to chrome://extensions/ and click Load unpacked and select the namada-interface/apps/extension/build/chrome/ folder.

Receiving tokens

You can show the address of the current account by hovering over the account name in the top right corner. Clicking it will copy it to the clipboard. You can copy the address by clicking the copy icon next to the address. This will also display a QR code that can be scanned by a mobile wallet.