Layer LogoLayer AVS Docs
GuidesFrontend

Connect a wallet

1. How to Install Keplr in a Browser

To install Keplr:

  1. Open your browser (Google Chrome or Brave recommended).
  2. Go to the Keplr Extension Page in the Chrome Web Store.
  3. Click "Add to Chrome" (or "Add to Brave").
  4. Follow the instructions and confirm the installation.

Once installed, you will see the Keplr icon in your browser extensions section.

For more detailed help, you can visit Keplr's installation guide.


2. How to Make an Account

  1. Click on the Keplr icon in your browser extensions.
  2. You'll see options to create a new account or import an existing one:
    • To create a new account, click "Create New Account."
    • Follow the prompts to generate a new mnemonic phrase.
  3. Write down your 12 or 24-word mnemonic safely (do not share it with anyone).
  4. Complete the form by entering your desired account name and setting a password.
  5. Click "Next" to finalize and create your Keplr account.

For more detailed steps, refer to Keplr's help center.


3. How to Add the Permissionless Testnet to Keplr

If you're connecting to an example app that automatically adds the testnet:

  1. Go to the example AVS demo app.
  2. In the top-right corner of the app, click the "Connect Wallet" button.
  3. The app will prompt you to connect your Keplr wallet and add the permissionless testnet if it's not already added.
  4. Approve the network addition in the Keplr popup.

Example Code: Here is the relevant piece of code from the app that handles connecting to Keplr and adding the testnet:

await window.keplr.experimentalSuggestChain({
chainId: "layer-permissionless-3",
chainName: "Layer-P Testnet",
rpc: "https://rpc.layer-p.net",
rest: "https://grpc.layer-p.net:443",
stakeCurrency: {
coinDenom: "Perm",
coinMinimalDenom: "uperm",
coinDecimals: 6
},
bip44: { coinType: 118 },
bech32Config: {
bech32PrefixAccAddr: "layer",
bech32PrefixAccPub: "layerpub",
bech32PrefixValAddr: "layervaloper",
bech32PrefixValPub: "layervaloperpub",
bech32PrefixConsAddr: "layervalcons",
bech32PrefixConsPub: "layervalconspub"
},
currencies: [{ coinDenom: "Perm", coinMinimalDenom: "uperm", coinDecimals: 6 }],
feeCurrencies: [{ coinDenom: "Perm", coinMinimalDenom: "uperm", coinDecimals: 6 }],
gasPriceStep: { low: 0.015, average: 0.025, high: 0.035 }
});
await window.keplr.enable("layer-permissionless-3");

For more details on adding custom networks to Keplr, check Keplr's documentation on managing chains.


4. How to Hit the Faucet

You can use the example app to call the faucet automatically:

  1. Connect your wallet using Keplr.
  2. If your balance is zero, the app will automatically ask if you'd like to call the faucet to receive test tokens.
  3. Approve the request in the Keplr popup, and tokens will be added to your account.

Faucet API Function Code:

import { faucetAddress } from "./constants";
/**
* Calls the faucet API to credit the specified address with test tokens.
*
* @param userAddress - The user's address to which the faucet should send tokens.
* @returns A promise that resolves to the response data from the faucet API.
* @throws An error if the API request fails.
*/
export const callFaucet = async (userAddress: string) => {
const response = await fetch(faucetAddress, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
denom: "uperm", // The microdenomination of the token to be credited
address: userAddress, // The user's address that will receive the tokens
}),
});
if (!response.ok) {
throw new Error(`Error: ${response.statusText}`);
}
const contentType = response.headers.get("Content-Type");
if (contentType && contentType includes "application/json") {
const data = await response.json();
return data;
} else {
const data = await response.text();
return data; // Usually "ok"
}
};

For more help with faucets on testnets, you can refer to CosmJS's faucet documentation.


5. How to Send Tokens Between Two Accounts Using Keplr UI

To send tokens between two accounts:

  1. Open Keplr in your browser.
  2. Go to the "Assets" tab.
  3. Select the network (e.g., Layer-P testnet or mainnet) from which you want to send tokens.
  4. Click the "Send" button.
  5. Enter the recipient's address and the amount of tokens you wish to send.
  6. Click "Next" to review the transaction.
  7. Click "Approve" to complete the transaction.

You can also check out Keplr's official guide for sending tokens here.


Layer-P Network Configuration (for Developers)

To connect to the Layer-P network programmatically, use the following configuration:

export const TestnetConfig = {
rpc_endpoint: "https://rpc.layer-p.net",
grpc_endpoint: "https://grpc.layer-p.net:443",
chain_id: "layer-permissionless-3",
native_denom: "uperm",
};

Layer-P Chain Registry Entry

For connecting to and registering the Layer-P network in wallets and applications, use this configuration:

export const chainRegistryEntry = {
chainId: "layer-permissionless-3",
chainName: "Layer-P Testnet",
rpc: "https://rpc.layer-p.net",
rest: "https://grpc.layer-p.net:443",
bip44: { coinType: 118 },
bech32Config: {
bech32PrefixAccAddr: "layer",
bech32PrefixAccPub: "layerpub",
bech32PrefixValAddr: "layervaloper",
bech32PrefixValPub: "layervaloperpub",
bech32PrefixConsAddr: "layervalcons",
bech32PrefixConsPub: "layervalconspub"
},
currencies: [
{
coinDenom: "Perm",
coinMinimalDenom: "uperm",
coinDecimals: 6,
coinGeckoId: "layer-p",
},
],
feeCurrencies: [
{
coinDenom: "Perm",
coinMinimalDenom: "uperm",
coinDecimals: 6,
coinGeckoId: "layer-p",
gasPriceStep: { low: 0.015, average: 0.025, high: 0.035 },
},
],
stakeCurrency: {
coinDenom: "Perm",
coinMinimalDenom: "uperm",
coinDecimals: 6,
coinGeckoId: "layer-p",
},
};

On this page